Cara Membuat Artikel Terkait Dengan Scroll

Kamis, Desember 25th, 2014 - Tutorial Blog

Tags :

Cara Mudah Membuat Artikel Terkait Dengan Scroll. Artikel terkait adalah sebuah artikel yang terkait dengan artikel lainya yang muncul berdasarkan label, Sehingga mempermudah pengunjung untuk membaca artikel yang berkaitan dengan yang sedang sedang dibacanya. sebenarnya cara membuat artikel terbaik sangat banyak, karena artikel terkait juga banyak jenis-jenisnya mulai dari artikel terkait dengan gambar, judulnya saja, dan masih banyak lainya.

Cara Mudah Membuat Artikel Terkait Dengan Scroll

Pada kesempatan kali ini kita akan membahas tentang bagaimana cara membuat artikel terkait dengan scroll pada sebuah blog, kenapa menggunakan scroll? ada banyak manfaatnya membuat artikel terkait dengan scroll, diatara lain adalah menghemat ruang artikel terkait tersebut, terlihat rapih karna tidak terlalu memanjang, dan juga lebih simpel.

Cara Mudah Membuat Artikel Terkait Dengan Scroll

Bila kawan ingin membuat artikel terkait menggunakan scroll pada blog masing-masing, dapat mengikuti langkah-langkah di bawah ini

Cara Mudah Membuat Artikel Terkait Dengan Scroll


1. Login ke blog anda
2. Masuk ke pengaturan template
3. Kemudian pilih Edit template
4. Cari kode scricpt ]]></b:skin> gunakan ( CTRL+F ) untuk mempermudah pencarian
5. Jika sudah ketemu silahkan anda letakan kode dibawah ini tepat di atas kode ]]></b:skin>

.rbbox{border:1px solid rgb(192,192,192);padding:5px;background-color:#f0f0f0;-moz-border-radius:5px;margin:5px}.rbbox:hover{background-color:rgb(255,255,255)}

6. Kemudian cari kode <data:post.body/>, Jika kode tersebut lebih dari satu silahkan anda pilih yang terahir sendir, atau anda bisa mencobanya satu persatu.
7. Jika sudah ketemu silahkan anda letakan kode dibawah ini tepat di bawah <data:post.body/>

<b:if cond=’data:blog.pageType == &quot;item&quot;’> <H2>Artikel Terkait:</H2> <div class=’rbbox’> <div style=’margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;’> <div id=’albri’/> <script type=’text/javascript’> var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 10; maxNumberOfLabels = 3; function listEntries10(json) { var ul = document.createElement(&#39;ul&#39;); var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel; for (var i = 0; i &lt; maxPosts; i++) { var entry = json.feed.entry[i]; var alturl; for (var k = 0; k &lt; entry.link.length; k++) { if (entry.link[k].rel == &#39;alternate&#39;) { alturl = entry.link[k].href; break; } } var li = document.createElement(&#39;li&#39;); var a = document.createElement(&#39;a&#39;); a.href = alturl; if(a.href!=location.href) { var txt = document.createTextNode(entry.title.$t); a.appendChild(txt); li.appendChild(a); ul.appendChild(li); } } for (var l = 0; l &lt; json.feed.link.length; l++) { if (json.feed.link[l].rel == &#39;alternate&#39;) { var raw = json.feed.link[l].href; var label = raw.substr(homeUrl3.length+13); var k; for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;); var txt = document.createTextNode(label); var h = document.createElement(&#39;b&#39;); h.appendChild(txt); var div1 = document.createElement(&#39;div&#39;); div1.appendChild(h); div1.appendChild(ul); document.getElementById(&#39;albri&#39;).appendChild(div1); } } } function search10(query, label) { var script = document.createElement(&#39;script&#39;); script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39; + label + &#39;?alt=json-in-script&amp;callback=listEntries10&#39;); script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;); document.documentElement.firstChild.appendChild(script); } var labelArray = new Array(); var numLabel = 0; <b:loop values=’data:posts’ var=’post’> <b:loop values=’data:post.labels’ var=’label’> textLabel = &quot;<data:label.name/>&quot;; var test = 0; for (var i = 0; i &lt; labelArray.length; i++) if (labelArray[i] == textLabel) test = 1; if (test == 0) { labelArray.push(textLabel); var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels; if (numLabel &lt; maxLabels) { search10(homeUrl3, textLabel); numLabel++; } } </b:loop> </b:loop> </script> </div> <script type=’text/javascript’>RelPost();</script> </div> </b:if>

Keterangan :

  • Tulisan yang berwarna kunining adalah nama artikel terkait tersebut, anda bisa menggantinya dengan Related Post, Artikel Lainya, atau yang sesuai dengan keinginan anda
  • Tulisan yang berwarna Biru adalah tinggi artikel terkait tersebut, silahkan di sesuaikan
  • Tulisan yang berwarna Merah untuk menampilkan jumlah post yang akan tampil di artikel terkait, rubah sesuai keinginan anda
8. Jika sudah silahkan simpan template dan lihat hasilnya
Sekian pembahasan kita tentang cara membuat artikel terkait menggunakan scroll, silahkan di coba pada blog masing-masing, bila ada pertanyaan silahkan tinggalkan pertanyaan anda pada kotak komentar yang tersedia dibawah. Selamat mencoba dan semoga bermanfaat
Share this article
Previous Post « « Cara Mudah Membuat Tombol Share Di Bawah Postingan Blog and Cara Memasang Tombol Share Facebook Di Atas Judul Postingan » » Next Post

Cara Membuat Artikel Terkait Dengan Scroll

Cara Membuat Artikel Terkait Dengan Scroll | wongcilik2017 | 4.5