Membuat Artikel Terkait dengan Menu Scroll

Untuk kali ini kita akan mencoba membuat artikel terkait dengan menu scroll, sebenarnya artikel terkait ini sama saja dengan yang lain Cuma ditambahkan dengan scroll agar lebih enak di pandang... Untuk mulai membuat artikel ini silakan mengikuti langkah-langkah berikut ini :

• Masuk ke Dasbor
• Klik Tata Letak
• Pilih Edit HTML pastikan backup template dahulu
• Cari kode <data:post.body/> atau kalau sobat sudah memakai read more maka akan ada dua kode <data:post.body/>
• Tambahkan kode berikut ini tepat dibawah <data:post.body/> yang pertama

<b:if cond='data:blog.pageType == "item"'> Artikel Terkait:<div class='rbbox'><div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'><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>

• Kemudian, cari kode ]]></b:skin>
• Letakkan kode berikut diatas kode ]]></b:skin>

radius:5px; margin:5px;} .rbbox:hover{background-color: rgb(255, 255, 255);}

• Klik Simpan Template
• Selesai

Selamat Mencoba....!!!

Posted in: Blogger

Baca Juga Artikel Terkait Dibawah Ini: