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 class='rbbox'>
<div>
<div id='albri'/>
<script type='text/javascript'>
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>
</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
0 Komentar untuk "Langkah Membuat Related Post/Artikel Terkait Dengan Efek Checklist"