Cara Membuat Related Post Buka/Tutup

Assalamualaikum..

Masih seger-seger kan sobat sekalian ? Gimana nih puasanya? udah ada yang bolong-bolong gak? Haaha :) . Pada postingan kali ini, saya akan menjelaskan tentang  Cara Membuat Related Post Buka/Tutup. Apa itu Related Post ? Related Post adalah sekumpulan link untuk memudahkan para pembaca mencari atau menemukan konten yang hampir sama atau berhubungan dengan halaman yang saat itu dibuka. Ini Screen Shootnya (Atau bisa dilihat di bagian bawah posting ini) :

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 AcerNoval  (caelah :p haha). 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 </head> dan letakkan kode berikut, tepat dibawah kode </head>

<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>

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 )

Script Related Post Buka/Tutup

<b:if cond='data:blog.pageType == &quot;item&quot;'><script type='text/javascript'>$(function(){$(&quot;#butToggle&quot;).click(function(){$(&#39;#dvt&#39;).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 rgb(74, 100, 144); color: #4a6490; font-family: Trebuchet MS; margin: 5px 0px 0px; padding: 5px; width: 200px;'>Buka/Tutup Related Post</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 == &quot;item&quot;'> <div class='similiar'> <!-- *****************http://acernoval.blogspot.com*****Agustus2010****************** --> <!-- *****************Related Articles by Labels - Take Two****************** --> <!-- Modified by JackBook.Com to make it easier to use. 1. Now, users don't need to change anything to use this widget. just copy and paste, and done! 2. The current article will also be listed, now it's no more. --> <div class='widget-content'> <h3>Related Posts :</h3> <div id='data2007'/><br/><br/> <div id='hoctro'> <u/><u/> </div> <script type='text/javascript'> var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 10; maxNumberOfLabels = 3; function listEntries10(json) { var ul = document.createElement(&#39;ul&#39;); var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel; for (var i = 0; i &lt; maxPosts; i++) { var entry = json.feed.entry[i]; var alturl; for (var k = 0; k &lt; entry.link.length; k++) { if (entry.link[k].rel == &#39;alternate&#39;) { alturl = entry.link[k].href; break; } } var li = document.createElement(&#39;li&#39;); var a = document.createElement(&#39;a&#39;); 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 &lt; json.feed.link.length; l++) { if (json.feed.link[l].rel == &#39;alternate&#39;) { var raw = json.feed.link[l].href; var label = raw.substr(homeUrl3.length+13); var k; for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;); var txt = document.createTextNode(label); var h = document.createElement(&#39;b&#39;); h.appendChild(txt); var div1 = document.createElement(&#39;div&#39;); div1.appendChild(h); div1.appendChild(ul); document.getElementById(&#39;data2007&#39;).appendChild(div1); } } } function search10(query, label) { var script = document.createElement(&#39;script&#39;); script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39; + label + &#39;?alt=json-in-script&amp;callback=listEntries10&#39;); script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;); 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 = &quot;<data:label.name/>&quot;; var test = 0; for (var i = 0; i &lt; labelArray.length; i++) if (labelArray[i] == textLabel) test = 1; if (test == 0) { labelArray.push(textLabel); var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels; if (numLabel &lt; 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://acernoval.blogspot.com/'><i><b>AcerNoval&#39;s Site </b></i></a></span> </div></b:if>

Simpan Template, dan lihat hasilnya ^_^

Catatan!

Jangan mengubah dan menghapus Scriptnya, karena Script tersebut tidak akan bekerja jika kita Ubah.

Sekian dulu posting dari saya, kalau diterusin, kepanjangan haha . Semoga bermanfaat yaa :D.  Mohon maaf bila ada kata-kata yang salah, karena kita seorang blogger yang sama-sama sedang belajar, saling bertukar ilmu, dan saling menjaga silaturahmi antar blogger. Jika ada pertanyaan jangan dipendem dihati kalian, silahkan isi Form komentar ya !  Salam sukses selalu, Salam Blogger ...