Cara Membuat Related Post dengan Scroll | Bloagspot

Cara Membuat Related Post dengan Scroll - Membuat relate post pada blogspot sangat penting agar pengunjung atau user bisa berlama-lama pada blog kita, mereka bisa berlama-lama karena mereka bisa melihat berbagai macam artikel yang mempunyai relasi dengan artikel tersebut.

Bentuk relate post juga bermacam-macam, ada yang langsung lurus kebawah, ada dalam bentuk thumbnail dengan gambar,ada juga yang berbentuk lurus tetapi dengan gaya scroll dropdown. Yang akan kita bahas ini adalah cara membuat relate post dengan scroll pada blogspot. Kelebihan relate post seperti ini adalah tidak menghabiskan banyak space blog, anda bisa menampilkan banyak artikel terkai tanpa menjulir kebawah, dan anda bisa menampilkannya dalam beberapa kategori, karena form relate post ini sudah dibatasi oleh kotak scroll, sehingga apabila relate artikelnya banyak maka otomatis akan dibuat scroll.

Kalau anda ingin mencoba membuat relate post dengan scroll pada blogspot, mari ikuti saya kebawah. :)

Cara Membuat Related Post dengan Scroll

1. Masuk Blogger > Template > edit HTML
2. Back up template dahulu > klik Download Full Template (ini untuk menjaga blog anda tidak rusak)
3. Check "Expand Widget Templates" box
4. Tekan Control + F > cari kode <div class='post-footer'>

5. Copy script dibawah ini, kemudian letakkan dibawah kode no. 4

<!-- START Related posts--> <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 = 100; 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> <!-- END Related posts -->

Perlu diperhatikan, kalau dalam template anda terdapat banyak kode <div class='post-footer'>, silakan anda ber expresi, Gagal dengan kode pertama silakan di kdoe ke dua..

Langkah selanjutnya addalah anda harus mencari kode ]]></b:skin>, kemudian letakkan kode dibawah ini tepat diatas kode tadi.

.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);}

Kemudian SAVE template anda. Lihat apa yang terjatu.... :)

loading...