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 == "item"'>

<h3>Related Post :</h3>

<div>

var homeUrl3 = "<data:blog.homepageUrl/>";

var maxNumberOfPostsPerLabel = 4;

var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 10;

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>

</script>

</div>

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

Baca Yang Ini Juga Boz :

Tips and Tricks

Blog

Tutorial

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

Unknown mengatakan...: waduuh scriptnya luar bisan nih,, puannjang juga.; 27 November 2012 pukul 18.09
Unknown mengatakan...: heuheu...
g bikin blog berat ko, bebas js apalagi jquery :D; 27 November 2012 pukul 18.16
Unknown mengatakan...: wow panjang amat kk script.a
follow sukses ke 84
bondowoso-jawa.blogspot.com; 27 November 2012 pukul 19.04
Unknown 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...; 27 November 2012 pukul 19.11

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