Laman

Senin, 13 Agustus 2012

Cara Membuat Artikel Terkait dengan Fasilitas Scrolling

Cara Membuat Artikel Terkait dengan Fasilitas Scrolling -Sebelumnya saya pernah menjelaskan bagaimana cara membuat artikel terkait atau related post dan memang tanpa menggunakan fasilitas scroll bila Anda berkenan bisa baca kembalidisini. Kali ini postingannya dalam kategori yang sama yakni Bagaimana Membuat Artikel Terkait atau Related Post dengan fasilitas scroll. Seperti contoh pada gambar berikut ini. Untuk lebih jelasnya bisa Anda lihat Demonya.
Kreasi Anak Garut
Gimana Menarik bukan? Jika Anda tertarik untuk memasangnya ikuti langkah berikut ini:
Seperti biasa:
  • Login ke blogger > pada dasboard pilih Template > Edit HTML > Lanjutkan.
  • Jangan lupa centang Expand Templates Widgetnya.
  • Letakkan kode berikut ini tepat dibawah kode <data:post.body/> (jika kode tersebut terdapat 3 pada template Anda pilih yang kedua).
<!--Related-Posts-dengan-Scroll--> <b:if cond='data:blog.pageType == &quot;item&quot;'><br/><br/><H2>Artikel Terkait:</H2><div class='rbbox'><div style='margin:0; padding:10px;height:100px;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 = 15;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>
Jgn Lupa Baca Juga : Cara Ampuh Mengetahui Keperawanan Wanita
  • Selanjutnya Letakkan kode berikut ini tepat diatas kode  ]]></b:skin>
.rbbox{border: 1px solid #0B3B39;padding: 5px;
background-color: #FFF;-moz-border-radius:5px;
margin:5px;}
.rbbox:hover{background-color: #E6E6E6;}


  • Langkah terakhir simpan template anda dan lihat hasilnya, setiap dibawah postingan sekarang terdapat  related post dengan scrolling. Selamat mencoba!
Cara Membuat Artikel Terkait dengan Fasilitas Scrolling


source list: , , , , , TEMPLATE BY Opa Soparudin © 2012. Just for Sharing!

Tidak ada komentar:

Posting Komentar