Langkah Membuat Related Post/Artikel Terkait Dengan Efek Checklist

Langkah Membuat Related Post/Artikel Terkait Dengan Efek Checklist - Halo semua, sore ini saya akan membahas bagaimana cara membuat related post atau artikel terkait dengan fungsi scroll sekaligus efek hover checklist...

contohnya ada pada gambar diatas dan ada pada blog saya ini....

mau tahu bagaimana cara pembuatannya? ok simak ajah langsung langkahnya dibawah ini

 1.  Login ke akun blogger kalian

 2.  Klik Template » Edit HTML » Lanjutkan » dan jangan lupa tandai Expand Template Widget

Catatan : Sebaikknya anda membaca dengan baik langkah yang telah diberikan dan jangan lupa backup template anda

 3.  Cari kode ]]></b:skin>, lalu letakkan kode dibawah ini tepat diatas kode tadi

.rbbox

{

 font-family:Federant;

 background:transparent;

 border:2px dashed #f00;

 height:198px;

 overflow:auto;

 margin:-10px 0 0 0;

 padding:10px

}

.rbbox ul li:hover

{

 cursor:pointer;

 list-style-image:url(https://sites.google.com/site/republicofnote/script/ceklisthover.png);

 color:#3B5998

}

.rbbox ul li

{

 list-style-image:url(https://sites.google.com/site/republicofnote/script/ceklist.png);

 padding:.5em 0 .5em .3em

}

 4.  Lalu cari lagi kode seperti ini <data:post.body/>, biasanya kode ini terdapat 2-3, tergantung template kalian, bila sudah menggunakan auto readmore pilih kode yang kedua, dan letakkan kode ini dibawah kode tadi

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<h3>Related Post :</h3>

<div class='rbbox'>

<div>

<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>

 5.  Klik Save dan lihatlah hasilnya...

Sekarang tampilan related post atau artikel terkait pada blog anda menjadi lebih menarik

Share Please :

Posted by : Keiruchan Agatha ~ / Portal Media Informasi Pilihan

Anda telah membaca artikel Langkah Membuat Related Post/Artikel Terkait Dengan Efek Checklist Ditulis oleh Keiruchan Agatha pada Selasa, 27 November 2012. Kritik dan saran dapat disampaikan via kotak komentar. Anda diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link yang ada di bawah sebagai sumbernya. Atas perhatiannya saya ucapkan terimakasih. Salam blogger and Happy blogging. <a href="http://republicofnote.blogspot.com/2012/11/langkah-membuat-related-post-dengan-efek-checklist.html" target="_blank">Langkah Membuat Related Post/Artikel Terkait Dengan Efek Checklist</a>

Artikel Acak

Jika anda suka dengan artikel ini klik disini, atau berlangganan untuk menerima konten selengkapnya.

Ayo Berlangganan Disini !!

Baca Yang Ini Juga Boz :