Membuat Related Posts Lebih Indah dengan Fungsi Scroll

Related Post dengan fungsi scroll. Melanjutkan artikel sebelumnya mengenai cara membuat related post di blogspot, kali ini saya akan menjelaskan cara membuat related post menjadi tampak lebih indah.

Tutorial related post atau artikel terkait yang akan dijelaskan, yaitu membuat related post dengan fungsi scroll dan dengan tampilan yang lebih menarik. Dengan fungsi scroll ini artikel terkait dalam jumlah yang banyak akan lebih tersusun rapi, tidak memanjang ke bawah.

Dengan begitu, related post ini akan meningkatkan perhatian pembaca terhadap artikel-artikel terkait yang ada. Tentunya hal ini akan berpengaruh terhadap pageview yang juga akan berpengaruh terhadap alexa rank.

Ini contohnya.


Bagi yang ingin mencoba, silahkan ikuti tutorial di bawah ini.

1. Log in ke akun blogspot Anda.
2. Pilih menu Layout (Tata Letak) � Edit HTML.
3. Beri tanda centang pada tulisan Expand Widget Templates.
4. Cari kode berikut.
   
   
   <p><data:post.body/></p>
   
   
5. Copy-paste kode berikut di bawah kode tadi.
   
   <b:if cond='data:blog.pageType == "item"'> <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 = "<data:blog.homepageUrl/>"; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 100; maxNumberOfLabels = 3; function listEntries10(json) { var ul = document.createElement('ul'); var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel; for (var i = 0; i < maxPosts; i++) { var entry = json.feed.entry[i]; var alturl; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { alturl = entry.link[k].href; break; } } var li = document.createElement('li'); var a = document.createElement('a'); 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 < json.feed.link.length; l++) { if (json.feed.link[l].rel == 'alternate') { var raw = json.feed.link[l].href; var label = raw.substr(homeUrl3.length+13); var k; for (k=0; k<20; k++) label = label.replace("%20", " "); var txt = document.createTextNode(label); var h = document.createElement('b'); h.appendChild(txt); var div1 = document.createElement('div'); div1.appendChild(h); div1.appendChild(ul); document.getElementById('albri').appendChild(div1); } } } function search10(query, label) { var script = document.createElement('script'); script.setAttribute('src', query + 'feeds/posts/default/-/' + label + '?alt=json-in-script&callback=listEntries10'); script.setAttribute('type', 'text/javascript'); 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 = "<data:label.name/>"; var test = 0; for (var i = 0; i < labelArray.length; i++) if (labelArray[i] == textLabel) test = 1; if (test == 0) { labelArray.push(textLabel); var maxLabels = (labelArray.length <= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels; if (numLabel < maxLabels) { search10(homeUrl3, textLabel); numLabel++; } } </b:loop> </b:loop> </SCRIPT> </DIV><script type="text/javascript">RelPost();</script> </DIV></b:if><br />
   
   
6. Setelah itu, copy-paste kode berikut di atas kode ]]></b:skin>
   
   
   /*-----------------------------
   kode related post optimal
   visit http://www.ateonsoft.com
   ------------------------------*/
   .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);}
   
   
7. Terakhir, copy kode berikut dan paste di atas kode </head> kemudian simpan template.
   
   
   <SCRIPT src='http://ateon.fs.googlepages.com/kodescript.js' type='text/javascript'/>
   
   

Silahkan dicoba tutorial blog kali ini mengenai cara membuat related post dengan fungsi scroll yang lebih indah. Semoga bermanfaat dan semoga berhasil.