Membuat Scroll pada Related Post
Related post adalah salah satu widget yang pernah ditulis di blog ini sebgai widget yang sebaiknya ada di blog. Karena memiliki fungsi atau manfaat yang besar untuk blog maupun pembaca. Bagi pembaca akan mempermudah untuk mengetahui atau menelusuri tulisan yang terkait dengan yang sedang dibacanya. Kemudian bagi blog bisa membuat lebih banyak page view.
Related post yang ada di blogger.com atau blogspot yaitu related post yang didasarkan pada label. Jika dalam satu label itu banyak tulisan. Misalnya ada label Blogging ada 25 post makan saat kita membaca salah postingan akan ada 24 judul yang terkait yang ada dibawahnya, ini menyebabkan menyita banyak tempat. Oleh sebab itulah perlu kita membuat scroll pada related post.
Cara Membuat Scroll pada Related Post
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode <p><data:post.body/></p>
6. Taruh (copy paste) kode berikut di bawahnya
7. Cari kode ]]></b:skin> dan taruh kode berikut di atasnya
8. Cari kode </head> dan taruh kode berikut di atasnya
9. Simpan Template jika sudah selesai.
Related post yang ada di blogger.com atau blogspot yaitu related post yang didasarkan pada label. Jika dalam satu label itu banyak tulisan. Misalnya ada label Blogging ada 25 post makan saat kita membaca salah postingan akan ada 24 judul yang terkait yang ada dibawahnya, ini menyebabkan menyita banyak tempat. Oleh sebab itulah perlu kita membuat scroll pada related post.
Cara Membuat Scroll pada Related Post
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode <p><data:post.body/></p>
6. Taruh (copy paste) kode berikut di bawahnya
<b:if cond='data:blog.pageType == "item"'> <H2>Artikel Terkait:</H2> <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 = 100; 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><br />
7. Cari kode ]]></b:skin> dan taruh kode berikut di atasnya
.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: rgb(255, 255, 255);}
background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: rgb(255, 255, 255);}
8. Cari kode </head> dan taruh kode berikut di atasnya
<SCRIPT src='http://ateon.fs.googlepages.com/kodescript.js' type='text/javascript'/>
9. Simpan Template jika sudah selesai.
Karena related post ku belum begitu banyak. Jadi aku belum menggunakan scroll. Tapi widget yang lain udah ku kasi scroll. Thanks infonya, mantab. Keep Writing
BalasHapusKalu mempercantik Scroll pada Related Post bagaimana? Yang pasang gambr di scorol itu.
BalasHapusyang penting hapi ..... bagus sekali sob infonya . thanks www.masroid.blogspot.com
BalasHapusboleh juga gan....saya coba untuk mempercantik blog....tks
BalasHapusmantab tutornya.
BalasHapuslangsung praktek ah..
salam kenal....
kode pertama d tmpt edit template q kx g ada ta bos??np kx bisa kyk gtu??
BalasHapus~x( ~x( ~x(
Assalamu'alaikum...
BalasHapusLanjutkan...bagus dan mantap tutorialnya...
Coba praktekkan
wah bagus gan tipsnya :D
BalasHapusfollow donk blog q ............ www.masroid.blogspot.com
BalasHapus@Njayuz Ahmad Qolfathiriyus:
BalasHapussama ni bang punyaku juga... knapa ni.. mohon bantuannya?
@Njayuz Ahmad Qolfathiriyus:
BalasHapuskok ada tulisan "Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
BalasHapusPesan error XML: The content of elements must consist of well-formed character data or markup."
maksudnya bagaimana gan? :-/ :-/ :-/
GAN, BISA MINTA TOLONG GAK? KALO UNTUK ORANG NULIS SEPERTI DI FACEBOOK TUH GIMANA? YANG KAYAK DIMINTA EMAIL DENGAN PASSWORD TU... KAYAK GINI JUGA
BalasHapussip gan informasinya,,,semoga tambah sukses,,kalu ngk keberatan mampir gan ya,walaupun cuma sekedar tengok gan,,,thanks gan
BalasHapusLangsung kita praktek ke tkp gan!!
BalasHapuswahh nambah wawasan ilmu lagin nih ..
BalasHapushttp://caranyablogspot.blogspot.com