Penting!! Sobat Blogger yang ingin re-post atau menulis kembali artikel kami diblog/website Anda, harap lihat halaman DISCLAIMER ( beberapa blog telah diproses di Google Removal Content ) Setiap tindakan pelanggaran hak cipta (COPAS) akan dilaporkan, TANPA pemberitahuan.

proBlogiz

Membuat Related Post atau Artikel Terkait di blog Anda akan memberi banyak keuntungan khususnya meningkatkan pageview blog Anda. Selain itu fitur ini akan memudahkan pembaca Anda unutk mencari artikel-artikel yang terkait topik. Saya akan membagi kembali, setelah sebelumnya juga sudah sharing
Cara Buat dan Pasang Artikel Terkait di Blogger, namun tutorial kali ini juga berkaitan dengan permintaan seorang pengunjung yang menanyakan cara Membuat Related Post Dengan Fungsi Scroll-DropDown.
Related Post Dengan Fungsi Scroll-DropDown.
Related Post Dengan Fungsi Scroll-DropDown.

Pada fungsi Related Pos ini, mempunyai fitur Scrolling down dan artikelnya ditampilkan dengan style DropDown, seperti gambar diatas. Ada penambahan kode CSS untuk box/kotak Related Post, sehingga setiap Anda scrolling artikel, judul / tulisan "Artikel Terkait" masih tetap berada diatas / fixed.

Langkah Membuat Related Post Dengan Fungsi Scroll-DropDown

Masuk Blogger > Template > edit HTML
Back up template dahulu > klik Download Full Template
Check "Expand Widget Templates" box
Tekan Control + F > cari kode <data:post.body/>
Copy  kode script HTML berikut dan letakkan setelah/dibawah tag <data:post.body/>

<!-- START Related posts--> <b:if cond='data:blog.pageType == &quot;item&quot;'> <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 = &quot;<data:blog.homepageUrl/>&quot;; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 100; 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;albri&#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> <script type="text/javascript">RelPost();</script> </DIV> </b:if> <!-- END Related posts -->
note : 
pada beberapa template terdapat lebih dari satu tag <data:post.body/>, oleh karena itu Anda bisa pilih salah satu kalau gagal tag yang pertama pilih tag yang kedua atau cobalah semuanya dimana yang berhasil.
Selanjutnya, copy kode CSS berikut dan letakkan diatas tag  ]]></b:skin>

.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);}

Kemudian Save Template

Selesai !!
Lihat hasilnya Related Post Dengan Fungsi Scroll-DropDown disalah satu postingan Anda.

Salaam


Artikel Terkait Lainnya:
Click here for comments

24 komentar

sudah saya terapkan sob :D makasih ya :)

REPLY

makasih banyak sob.
in yang saya maksud.
sekali lagi makasih.. :D

REPLY

sama2 mas
senang bisa bantu Anda

REPLY

Terima kasih infonya, mohon maaf mau nanya, cara mengisi content related postnya gimana ya, maklum baru belajar, sekali lagi terima kasih

REPLY

content otomatis terpasang mas sesuai dengan label artikelnya, krna sudah ada script JSON (JavaScript Object Notation) untuk memanggil data yang berlabel sama:) nama

REPLY

mantab infonya mungkin bisa liat liat di blog sederhana saya http://aguzcreative.blogspot.com/

REPLY

ok mas
thanks udah mampir, i'll be there:)

REPLY

Wah, keren gan..

nice share..

visit me ya:
http://aan-shared.blogspot.com

REPLY

punya saya kok masih kosong gan, gimana cara ngisinya ..
thanks

REPLY

postingan harus berlabel mas:)

REPLY

artikel ini sangat membantu

dapatkan 1000 backlink gratis dalam rangka promosi situs disini:
http://mita-sen.blogspot.com/2013/02/cara-mendapatkan-1000-backlink-gratis.html

REPLY

saya coba dulu gan....

buat yang ingin 1000 backlink gratis dan permanen klik aja disini:

http://mita-sen.blogspot.com/2013/02/cara-mendapatkan-1000-backlink-gratis.html

REPLY

Gan, di blog Ane ga ada scrip yang ini
Gimana tuch????

REPLY

Makasih sob related postnya sudah berhasil, oh ya sob kalau mau bikin related post kaya punya sobat gimana caranya ya... lebih keren keliatannya :)

REPLY

ok sob, aritkelnya di http://problogiz.blogspot.com/2012/09/cara-pasang-artikel-terkait-di-postingan.html

REPLY

wah sukses gan.. tengkyu

bermanfaat sekali untuk blogger baru seperti saya

http://sotosop-tutorial.blogspot.com/

REPLY

terimakasih gan tutprialnya...sangat membantu nih
jangan lupa mampir ya
http://volimaniak.blogspot.com/

REPLY

kok di blog admin gak bisa ya gan? mohon penjelasannya?

REPLY

Silahkan Berkomentar
Komentar/pertanyaan Sesuai Topik, Please NO SPAM, NO Promotion Links
Convert Kode HTML sebelum disisipkan

Convert

Google+ Followers

Submit email Anda, dapatkan update artikel:


Like Me

Blog Arsip

Artikel Terbaru

|Copyright © 2013| Problogiz |All Rights Reserved|