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
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 ...

{ 59 komentar..ada pertanyaan? komentar disini! }

satria mengatakan...

mantap gan hehehe
tapi kok ini tulisan nya agak kekiri ya
(blognya)

Terimakasih Untuk Komentar Sobat ... by AcerNoval
Acernoval mengatakan...

harus di reload lagi gan, hehe

Terimakasih Untuk Komentar Sobat ... by AcerNoval
Naufal Syahrial Hidayat mengatakan...

harus di reload mungkin gan :) hehe

TituitBom mengatakan...

ane pasangnya di sidebar sob, hahaha

Terimakasih Untuk Komentar Sobat ... by AcerNoval
indofreeabis mengatakan...

Mantap trik nya...oya udah dikiss balik iklannya :)

Terimakasih Untuk Komentar Sobat ... by AcerNoval
Naufal Syahrial Hidayat mengatakan...

@tuitbom : haha iya
@indofreeabis : thanks yaa

XaOn mengatakan...

mantep gan, tapi saya lebih suka related post yang berada disidebar

Terimakasih Untuk Komentar Sobat ... by AcerNoval
COMPLETE - ALL in One Blog mengatakan...

Kalau kebanyakan menggunakan script(buka-tutup) apa tidak memberatkan blog???

Terimakasih Untuk Komentar Sobat ... by AcerNoval
Naufal Syahrial Hidayat mengatakan...

@XaOn : haha iya deh..
@COMPLETE - ALL in One Blog : tidak terlalu juga sih sob.. buktinyam blog ini tidak seperti yang anda pikirkan :D

maad planetS mengatakan...

follow back sukses gan kunjungan.a ya

Terimakasih Untuk Komentar Sobat ... by AcerNoval
saryadinilan mengatakan...

makasih atas infonya,love,peace and gaul.

Terimakasih Untuk Komentar Sobat ... by AcerNoval
Asmara Susanto mengatakan...

wow amazing, persis sama related post ente d atas y?

Terimakasih Untuk Komentar Sobat ... by AcerNoval
loadres mengatakan...

(Widget By : AcerNoval's Site ) bisa diganti gan
(Widget By : loading's Site )

thank tutorialnya

Terimakasih Untuk Komentar Sobat ... by AcerNoval
Santo mengatakan...

sip banget gan info n triknya

kunjungi balik ya

Terimakasih Untuk Komentar Sobat ... by AcerNoval
FirdausTech mengatakan...

Saya Mahh Tak TAro di Side Bar Sob soalnya bila di taro di bawah posting selalu eror ga tau kenapa

Terimakasih Untuk Komentar Sobat ... by AcerNoval
Naufal Syahrial Hidayat mengatakan...

@maad planetS : okee sob, makasih yaa :)
@saryadinilan : oke sama2,,
@Asmara Susanto : Iya, sama persis, hehe :)
@loadres : Kalau gitu, tidak menghargai yang buat widget nya dong sob ? hehe :) tolong jangan diganti yaa..
@Santo : makasih, langsung ke TKP !
Firdaus : memang, tapi kode ini ga error kok sob :)

luswandy mengatakan...

@Naufal Syahrial Hidayat : tidak berpengaruh sama loading, sob... :)

mantep sob postingan kamu ini "spoiler"

Terimakasih Untuk Komentar Sobat ... by AcerNoval
Naufal Syahrial Hidayat mengatakan...

@luswandy : okee sob, makasih yaa
haha iyaa

merdiyanse7 mengatakan...

variasi baru lagi nih kang untuk membuat Related Post... kalo blog saya karna konten nya belum begitu banyak jadi kayaknya saya belum butuh fasilitas ini... nanti kalau kontennya dah mulai banyak saya akan coba tips ini... thx kang infonya.... ;)

Terimakasih Untuk Komentar Sobat ... by AcerNoval
Naufal Syahrial Hidayat mengatakan...

@merdiyanse7 : okee deh soobb, siip ! good luck yaa :D

RB mengatakan...

saya coba dulu gan

Terimakasih Untuk Komentar Sobat ... by AcerNoval
CSS TRICKS TO STRONG MENU NAVIGATION mengatakan...

heheh bisa aja sobat scriptnya ngga boleh di ganti, xixixi

oia kalo related post biasa gmna sob?

Terimakasih Untuk Komentar Sobat ... by AcerNoval
Naufal Syahrial Hidayat mengatakan...

Komentar ini telah dihapus oleh pengarang.

Naufal Syahrial Hidayat mengatakan...

@RB : okee
@CSS : haha iya dong biar kaga ada yang hapus link ane, wwwkwkkw klau mau yang biasa, kopy aja dari kode :< b >sampai kode < / b >

RAY TKJ mengatakan...

Hello gan datang kesini untuk menjawab pertanyaan anda.
Cara submit blog ke Google analytic ?

kalau caranya memang panjang gan tapi saya punya link sumbernya bisa dicoba ..
http://ferdianinfo.blogspot.com/2011/03/cara-mendaftar-dan-memasang-google.html

Terima kasih. Wassalam

Terimakasih Untuk Komentar Sobat ... by AcerNoval
Putra Tenzhung mengatakan...

%3Cb%3E sampai kode %3C%2Fb%3E kayanya ngga ada kode itu

Terimakasih Untuk Komentar Sobat ... by AcerNoval
Aa mengatakan...

Nice info, Kakak.
:)

Terimakasih Untuk Komentar Sobat ... by AcerNoval
Naufal Syahrial Hidayat mengatakan...

@RAY TKj : oh gitu ya sob. makasih banyaak yaa ! ilmu nya sangat bermanfaat ^_^
@Putra Tenzhung : < b > sampai < / b > maksudnya gan. hehe.. tapi tanpa spasi..
@Aa : makasih kaka :D

Kerajaanhosting masa depan hosting Indonesia mengatakan...

BW k mari, visitback kawan

Terimakasih Untuk Komentar Sobat ... by AcerNoval
fatkhur mengatakan...

ane cuma mau promosi gan silahkan berkunjung di baca dan disimak di http://komisigratis.com/?reg=f4tkhur

Terimakasih Untuk Komentar Sobat ... by AcerNoval
mc4-inspirasi mengatakan...

terimakasih infonya ya..

Terimakasih Untuk Komentar Sobat ... by AcerNoval
PENGGABUNGAN SCRIPT CSS DENGAN HTML mengatakan...

Ohh dari B sampe /B besok ane coba sobb.. coz belum ada related postnya blog ane, pusing jg scriptnya Jequery mulu :P

Terimakasih Untuk Komentar Sobat ... by AcerNoval
lagi proses mengatakan...

hehehe maap ya aku kan bilang kalo bagian ntuaja bisa diganti hehehehe

Terimakasih Untuk Komentar Sobat ... by AcerNoval
Naufal Syahrial Hidayat mengatakan...

@Kerajaanhosting masa depan hosting Indonesia : okee langsung ke TKP
@fatkhur : okee gan siap ke TKP
@mc4-inspirasi : sama2 gan :)
@PENGGABUNGAN SCRIPT CSS DENGAN HTML : hahaiya sob, sebenernya saya juga pusing -__-
@agi proses :ga apa2 kok sob :D

halobro mengatakan...

tips manfaat, makasih bro

Terimakasih Untuk Komentar Sobat ... by AcerNoval
Musa Khairul Umam mengatakan...

Thanks sob artikelnya,dan salam kenal

Terimakasih Untuk Komentar Sobat ... by AcerNoval
Naufal Syahrial Hidayat mengatakan...

@halobro : sip sama2 :D
@Musa Khairul Umam : salam kenal juga ^_^

Zam mengatakan...

trms banyak info nya, sangat bermanfaat !

Terimakasih Untuk Komentar Sobat ... by AcerNoval
baju tanah abang mengatakan...

nice posting gan....slam kenal yah...maaf ne ru mampir...

Terimakasih Untuk Komentar Sobat ... by AcerNoval
Naufal Syahrial Hidayat mengatakan...

@Zam : sama2 ^_^
@baju tanah abang : salam kenal.. :)

Daeng Nawa mengatakan...

tengkyu tutorialnya bang..

Terimakasih Untuk Komentar Sobat ... by AcerNoval
Abimanyu mengatakan...

blog manteb gan!

Terimakasih Untuk Komentar Sobat ... by AcerNoval
lina@women's perspectives mengatakan...

Tutorialnya sangat bermanfaat nih!

Terimakasih Untuk Komentar Sobat ... by AcerNoval
Naufal Syahrial Hidayat mengatakan...

makasih yaa semua :)

Petu Boy mengatakan...

Matur tenkyuUU

Terimakasih Untuk Komentar Sobat ... by AcerNoval
merdiyanse7 mengatakan...

Kalo related post nya dengan thumbnials bisa juga gak ya mas??

Terimakasih Untuk Komentar Sobat ... by AcerNoval
Web MDMK mengatakan...

Alhamdulillah bersilaturahmi sore hari dapat ilmu.
Saya belum sempat memakai Related Artikel di blog saya mas.Mungkin nanti bisa jadi referensi untuk membuatnya.Karena sebagian besar sobat-sobat blogger lainnya kalau saya perjatikan memakai related artikel pakai scroll mas.
Assalamu'alaikum...selamat bernuka mas...sebentar lagi ini mau berbuka
Semoga Puasa kita hari ini diterima Allah Ta'ala aamiin

Terimakasih Untuk Komentar Sobat ... by AcerNoval
tigefa dot info mengatakan...

manteb sob, tapi kayaknya scriptnya panjang ya! :D

kis dan sundul balik sudah terlaksana

Terimakasih Untuk Komentar Sobat ... by AcerNoval
Naufal Syahrial Hidayat mengatakan...

@petu : somo2 :)
@merdiyanse7 : kalau mau pakai tumbnials paling juga pakai linkWithin sob :)
@web MDMK : Waaalikum salam :D amiin.. terimakasih dukunganya :D
@tigefa : iya, hehe tp gak memberatkan kok :D

Urfi Luthfurrahman mengatakan...

Terimakasih

Terimakasih Untuk Komentar Sobat ... by AcerNoval
Urfi Luthfurrahman mengatakan...

maaf gak bisa, tadi aku komen wkt blm cba

Terimakasih Untuk Komentar Sobat ... by AcerNoval
willy alam mengatakan...

PERTAMAX mantap gan follow back ya....

Terimakasih Untuk Komentar Sobat ... by AcerNoval
falahiyah mengatakan...

wah" ngg bagus nih...,

Terimakasih Untuk Komentar Sobat ... by AcerNoval
Battlefiield mengatakan...

bagus ya kalau buka tutup kayak gitu..

http://sangagkuh.blogspot.com/2011/11/manifesto-hacker.html

Terimakasih Untuk Komentar Sobat ... by AcerNoval
Free Games mengatakan...

pertamax gan..

Terimakasih Untuk Komentar Sobat ... by AcerNoval
CopozLatoz mengatakan...

waahh bermanfaat sekali !!

Terimakasih Untuk Komentar Sobat ... by AcerNoval
Anthzo mengatakan...

Mantap Mas, IZIN copas yah :D

Terimakasih Untuk Komentar Sobat ... by AcerNoval
Jefry mengatakan...

harus hari2 ni saat mengedit template
trims

Terimakasih Untuk Komentar Sobat ... by AcerNoval
belajar seo dan blog mengatakan...

bagus sob spoilernya...

Terimakasih Untuk Komentar Sobat ... by AcerNoval

Be a Top Commentators!

Top Commentators

Postingan
Komentar


Widget by DAW-XP