share all free for you

Advertiser Here

Membuat Related Post dengan Efek Ceklis

Assalamuallaikum Wr Wb selamat malam sobat blogger semua pada kali ini saya akan share tutorial blogger lagi yang berjudul Membuat Related Post dengan Efek Ceklis. sebenarnya tutor ini adalah request dari sahabat saya. Langsung saja kita lihat screenshotnya

Membuat Related Post denagn Efek Ceklis
1. Buka Dasbor >> Template >> Edit HTML >> Lanjutkan >> Beri centang pada Expand Template Widget

2. Cari kode ]]></b:skin> atau bisa juga </style> dan letakan kode berikut di atasnya :

.rbbox
{
font-family:Federant;
background:#fff;
border:1px solid #ccc;
height:198px;
overflow:auto;
margin:10px 0 15px;
padding:10px
}
.rbbox ul li:hover
{
cursor:pointer;
list-style-image:url(http://4umi.com/image/icon/check.png);
color:#3B5998
}
.rbbox ul li
{
list-style-image:url(https://lh6.googleusercontent.com/-4d5WhtoEhnQ/TszzCXAYfnI/AAAAAAAABq8/wauqCWb3uOE/s12/uncheck.gif);
padding:.5em 0 .5em .3em
}

3. Lalu cari kode : <data:post.body/>  bagi yang sudah memasang read more akan ada dua kode nah ambil kode yang  pertama  lalu copy kode berikut ini  di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='rbbox'>
<div>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel =999;
var maxNumberOfLabels = 999;
maxNumberOfPostsPerLabel = 999;
maxNumberOfLabels = 999;
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>

5. Simpan Template Sobat

Catatan : 
  • Jika Nanti Related Post diatas Tidak Muncul dibawah Posting anda, maka kode diatas sobat simpan dibawah Kode : <data:post.body/> yang 'kedua' lebih tepatnya di bawah tag </b:if>.
  • Atau sobat juga bisa meletakan kode kode di atas di bawah kode <div class='post-footer-line post-footer-line-1'>
Sekian tutorial dari saya semoga dapat bermanfaat.

Title : Membuat Related Post dengan Efek Ceklis
URL : http://blogcunayz.blogspot.com/2012/06/membuat-related-post-dengan-efek-ceklis.html
Anda boleh menyebar Luaskan atau Meng Copy-Paste Artikel ini bila dapat bermanfaat bagi teman-teman anda, Namun jangan lupa untuk meletakkan Link Membuat Related Post dengan Efek Ceklis sebagai Sumbernya.

Sudah ada [ 42 komentar ] bagaimana pendapat Anda,,?

  1. keren bibeh banget nih, bisa menceklis otomatis.
    butuh waktu rada panjang nih kang kalau dipasang....ooo iyah kebetulan lagi buat blog baru nih, bisa dipasang disonoh..
    tengkyu ilmunya.
    salam sehat dan met malming.

    ReplyDelete
    Replies
    1. trimakasih kang itu cuma menggunakan efek hover saja.
      gak segitunya kali kang gak nyampe 10 menit pasangnya :),, weh kren bikin blog baru, tar saya mampir ah
      sama2 kang
      sekarang sudah hari minggu kang :)

      Delete
  2. Lebih tampak simple dan memudahkan penglihatan mana yang akan dikunjungi.

    ReplyDelete
  3. ehhh ternyata demonya sudah ada di blog ini yaa..

    ReplyDelete
  4. Kayaknya lebih keren dan lebih simpel yang ini sob :)

    ReplyDelete
  5. Kok saya coba belum berhasil yah sahabat, mohon pencerahannya. Adakah saya yang salah..
    Oh ya breadcrumb sukses dipraktekkan sahabat tips yang kemarin itu.
    Hanya ini yang masih belum berhasil saya

    ReplyDelete
    Replies
    1. belum berhasil bagaimana sobat?
      sebelumnya sobat sudah punya related post?, jika sebelumnya sudah punya tinggal di hapus dan di ganti dengan kode di atas

      Delete
    2. Setelah mengganti template sekarang sudah terpasang sahabat related postnya dengan check list ini

      Delete
  6. Terima kasih atas artikelnya.
    o iya selama saya jelajah mencari ilmu dengan blogwalking, menurut saya

    anda memiliki kelebihan tersendiri dari situs-situs lain dan jujur potensi

    anda juga sangat bagus, banyak juga ilmu yang saya pelajari disini jika ada

    waktu saya akan berkunjung lagi.



    #Semoga sehat selalu :D


    Template apa nih ya? kok bagus

    ReplyDelete
    Replies
    1. amin gan

      templatenya belum saya kasih nama gan wkwkwk,ah masa sih template jelek gini

      Delete
  7. suka banget deh artikelnya.. mengajarkan blogger untuk tambah mempercantik blognya, dan so pastinya memanjakan pengunjung juga,,heheheheehehe

    ReplyDelete
    Replies
    1. alhamdulillah jika sobat suka dengan artikel saya,, betul banget gan saya setuju

      Delete
  8. semakin mantabs saja info tutorialnya kawan :)

    ReplyDelete
  9. tutorial ini yg dr dlu aq cari.., kapan2 aq share ke blog sy ya sob.., thx...,templatex super simple banget sob keren..!, halamx homex ringaaaaannn banget..! hehehhe.., happy blogging . *smile

    ReplyDelete
    Replies
    1. silahkan sob,,thank sob :) sip happy blogging juga

      Delete
  10. Keren Sob, sangat manfaat dan lengkap caranya.

    ReplyDelete
    Replies
    1. thank sob,, harus dong supaya pengunjung tidak bingung

      Delete
  11. Sembari menyimak dapat ilmu baru.. Thank you tipsnya ya sob..

    ReplyDelete
  12. keren rek . . .
    nanti kalo dah siap ngblog lgi, aku pke yah sob :)

    ReplyDelete
  13. hmm,, kereen sob.. tapi kayaknya aq belum waktunya nii.. kontenQ masih acak2an. :)

    ReplyDelete
  14. ijin nyobain ah, kayaknya bagus nih..

    ReplyDelete
  15. Gan ijin make templatenya ya.

    ReplyDelete
  16. wah keren sob, saya coba dulu ya :)

    ReplyDelete
  17. wah keren banget nih, makasih gan!!:)

    ReplyDelete
  18. related post ini membuat pengunjung kita betah karena langsung mendapat artikel-2 dengan hal-hal yang dicari ya..

    thanks infonya bermanfaat

    ReplyDelete
  19. wah blognya rapi banget ya gan .jadi ngiri aku.hehehe

    ReplyDelete
  20. mantap gan,,,keren,,thank tutorial nya

    ReplyDelete
  21. Seepp mas bro keren untuk template kaya punya blog ini download dimana Citra Indah Dan citra Gran

    ReplyDelete

Untuk menyisipkan kode,gunakan tag
[code]KODE ANDA[/code]
Untuk menyisipkan quote,gunakan tag
[blockquote]KATA-KATA ANDA[/blockquote]
Untuk menyisipkan gambar,gunakan tag
[img]URL GAMBAR ANDA[/img]
Untuk menyisipkan video,gunakan tag
[youtube]URL VIDEO ANDA[/youtube]
Anda juga bisa menggunakan emoticon seperti biasa.

Pasang Iklan Anda Disini

 
Copyright © 2011 Blogcunayz Template Design By Rizky Wardiansyah