Membuat Artikel Terkait Dengan Icon dan Scroll

Coretan Bang Dadan on

Wednesday, December 26, 2012

Cara Membuat Artikel Terkait Dengan Icon dan Scroll | Salam sejahtera, buat para blogger dimanapun anda berada. pada postingan kali ini bang dadan akan membahas cara Membuat Artikel Terkait DEngan Icon Dan Scroll, sahabat blogger mungkin yang sering berkunjung kesini pernah melihat postingan bang dadan sebelumnya tentang Cara Membuat Artikel Terkait Dengan Icon, pada postingan yang dulu dan sekarang sebenarnya masih sama, cuma berbeda sedikit yaitu kalau pada postingan kali ini ialah hanya menambahkan fungsi scroll pada artikel terkait. sebenarnya bagi sobat yang sudah mahir dalam dunia blogger mungkin akan sangat mudah membuat fungsi scroll ini hanya dengan menambahkan kode html sedikit saja ya kawan, namun bagi yang belum paha sobat bisa cari cara membuat fungsi scroll di blog. DEMO-nya seperti gambar dibawah ini.

Nah sesuai dengan tema diatas yaitu Cara Membuat Artikel Terkait Dengan Icon dan Scroll, dan agar tidak melebar pembahasan kita, baiklah bang dadan akan langsung saja memaparkan bagaimana Cara Membuat Artikel Terkait Dengan Icon dan Scroll. dan bagi sobat yang ingin memasangnya silahkan simak baik - baik caranya ya?

Cara Membuat Artikel Terkait Dengan Icon dan Scroll

Silahkan login ke blog
Pilih Rancangan Template Edit HTML *jangan lupa centang expand template widgate
Selanjutnya cari kode ]]></b:skin>
Copy kode dibawah ini di atas ]]></b:skin>

◉ Berikut kodenya:

.rbbox{border: 1px solid #000000;padding: 5px;
background-color: #F2F2F2;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #B59090;}
.rbbox ul li {
display : block;
background : url(https://lh5.googleusercontent.com/-zxh1l81-DkM/UNnbyQ8uQeI/AAAAAAAAA44/Y2OJ3Wyggjg/w497-h373/crk.png) no-repeat 0px 0;
margin-left : -10px;
padding-top : 0;
padding-right : 0px;
padding-bottom : 1px;
padding-left : 20px;
margin-bottom : 5px;
line-height : 1em;
border-bottom:1px dotted #cccccc;

◉ Masih dalam Edit HTML

Selanjutnya cari kode <data:post.body/>
Kemudian letakan kode berikut di bawah kode <data:post.body/>

◉ Berikut kodenya:

<b:if cond='data:blog.pageType == "item"'>
<p style='font-style:bold;'>
ARTIKEL TERKAIT:</p>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:150px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 15;
maxNumberOfPostsPerLabel = 50;
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>

Selanjutnya klik simpan template

Selesai sudah, sekarang artikel terkait seperti punya bang dadan dibawah ini telah sobat bikin diblognya sendiri. dan bila ingin Membuat Artikel Terkait Tanpa Scroll silahkan klik disini.

Dan mungkin cukup sekian pula pembahasan kita kali ini tentang Cara Membuat Artikel Terkait Dengan Icon dan Scroll. Semoga artikel ini bermanfaat baut anda semuanya.

Akhir kata bang dadan ucapkan selamat mencoba dan wassalam..!!