Membuat Related Post Dengan Efek Ceklis

Written By PENDIDIDKAN Thursday, September 18, 2014 Add Comment Edit

Membuat Related Post Dengan Efek Ceklis - Relate Post Efek ceklis pada umumnya sama dengan relate post lainnya, memunculkan judul artikel dalam satu lebel. Namun yang membedakan adalah relate post berikut mempunyai efek ceklis di sisi kiri, selain memiliki efek ceklis relate post berikut ini juga memiliki efek scroll.

Efek ceklis pada realete post akan muncul ketika judul artikel tersentuh cursor, efek cklis ini tentunya akan menambah cantik tampilan blog. Jika anda tertarik berikut ini langkah-langkahnya :

Langkah - langkah Membuat Related Post dengan efek Ceklis :

Pertama yang perlu anda lakukan adalah membuka Editor template, selanjutnya anda ke </style> atau kode ]]></b:skin>. Jika sudah anda terapkan CSS sebelum kode ]]></b:skin>

.rbbox

{

font-family:Federant;

background:#fff;

border:1px solid #ccc;

height:198px;

overflow:auto;

margin:10px 0 15px;

padding:10px

}

.rbbox ul li:hover

{

cursor:pointer;

list-style-image:url(http://4umi.com/image/icon/check.png);

color:#3B5998

}

.rbbox ul li

{

list-style-image:url(https://lh6.googleusercontent.com/-
4d5WhtoEhnQ/TszzCXAYfnI/AAAAAAAABq8/wauqCWb3uOE/s12/uncheck.gif);

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

}

Selanjutnya cari kode : <data:post.body/> copy kode berikut ini di bawah kode <data:post.body/>

<div>

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

var maxNumberOfPostsPerLabel =999;

var maxNumberOfLabels = 999;

maxNumberOfPostsPerLabel = 999;

maxNumberOfLabels = 999;

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>

Langkah terakhir anda simpan template

Penjelasan :
Jika Nanti Related Post diatas Tidak Muncul dibawah Posting alterbatif lainnya anda bisa meletakan kode di atas di bawah kode <div class='post-footer-line post-footer-line-1'>

Demikian Membuat Related Post Dengan Efek Ceklis , semoga bermanfaat!