Langkah Membuat Related Post/Artikel Terkait Dengan Efek Checklist

Diposting oleh Keiruchan Agatha on Selasa, 27 November 2012

Markup Validation Service

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

Markup Validation Service
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.

Baca Yang Ini Juga Boz :

{ 4 komentar... read them below or add one }

Unlimit -Soft mengatakan...

waduuh scriptnya luar bisan nih,, puannjang juga.

Keiruchan Agatha mengatakan...

heuheu...
g bikin blog berat ko, bebas js apalagi jquery :D

donny pratama mengatakan...

wow panjang amat kk script.a
follow sukses ke 84
bondowoso-jawa.blogspot.com

Keiruchan Agatha mengatakan...

@donny : masak sih panjang, menurut saya ini masih yah lumayan normal, saya pernah nemu yg panjang banget n ribet, lupa buat nerapain efek apa gitu...

Posting Komentar

Silahkan tinggalkan komentar anda dengan tidak meninggalkan link. Jika ada kesalahan dalam artikel ini dan jika ada saran dan kritik silahkan tulis komentar anda dibawah dengan baik dan sopan... ;)
Dan jika kedapatan link yang mati dalam penempatan software atau game harap beritahukan agar segera diperbaiki...

 
Markup Validation Service Markup Validation Service Markup Validation Service Markup Validation Service Markup Validation Service