membuat show/hide artikel terkait >> sedikitshare

Cara Membuat Related Post Buka/Tutup. Apa itu Related Post ? Related Post adalah sekumpulan link untuk memudahkan para pembaca mencari atau menemukan konten yang

Pasti sobat semua sudah mengetahui, seperti apa itu Related Post. Namun, kali ini saya akan memberikan hal yang berbeda, yaitu menggunakan Spoiler. Spoilernya pun berbeda dari yang lain, karena menggunakan Spoiler versi shoh/hide. Tapi, sebelum kita ke Tutorialnya, alahkah baiknya jika kita mengetahui fungsi dari Related Post berikut :

Memudahkan para pembaca mencari konten yang hampir serupa atau berhubungan. Maka pengunjung akan berlama lama berada di blog kita.
Otomatis halaman yang terbuka atau Page Views pun akan bertambah, karena pengunjung akan membaca artikel-artikel kita yang lain.Bagus untuk SEO. Karena semakin lama pengunjung berjalan-jalan di blog sobat semakin bagus juga pandangan blog sobat di mata search engine.
( Dengan Spoiler !! ) Akan menghemat ruang, karena dapat dibuka/tutup, dan tidak akan memusingkan pengunjung blog kita.

Banyak sekali keuntungan-keuntungan yang kita dapat. Tidak ada salahnya kan jika kita mencoba Widget ini? ^.^ Okee, daripada penasaran langsung saja kita ke Tutorialnya :

1. Login ke akun Blogger sobat.
2. Pilih menu Rancangan => Edit HTML => Centang Expand Template Widget
3. Cari kode dan letakkan kode berikut, tepat dibawah kode

4. Simpan Template.

Simple sekali kan Script nya? haha.. Tapi jangan senang dulu, karena ada script yang lain, yang harus kita tambahkan. Mari kita maju ke langkah selanjutnya, Maju Terus Pantang Mundur !!

5. Cari kode <data:post.body/>. Copy semua kode berikut , dan letakkan dibawah <data:post.body/> ( Jika sudah menggunakan read more, letakkan pada <data:post.body/> yang kedua )

<b:if cond='data:blog.pageType == "item"'><script type='text/javascript'>$(function(){$("#butToggle").click(function(){$('#dvt').toggle(1000);});});</script> <button id='butToggle' input='' style='-moz-border-radius: 20px 20px 20px 20px; background: none repeat scroll 0% 0% rgb(224, 236, 248); border: 4px solid ##794704; color: #ffffff; font-family: Corsiva; margin: 5px 0px 0px; padding: 5px; width: 200px;'>Click untuk artikel lainnya</button> <style type='text/css'>#dvt{width: 100%;height: 100%;border: solid 0px black;background-color:ffffff; display:none;}</style> <div id='dvt'> <b> <b:if cond='data:blog.pageType == "item"'> <div class='similiar'>    <div class='widget-content'> <h3>Artikel Terkait Lainnya :</h3> <div id='data2007'/><br/><br/> <div id='hoctro'> <u/><u/> </div> <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('data2007').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> </div> </b:if></b><span style='font-size: x-small;'>Widget By : <a href='http://lefransnote.blogspot.com/'><i><b>lefransnote's Site </b></i></a></span> </div></b:if>

Simpan Template, dan lihat hasilnya ^_^