Cara Menambahkan Galeri Pos Terpopuler Di Blog

Baru-baru ini, widget yang paling populer adalah widget Galeri Posting Terpopuler ini yang terkenal dengan sebutan Sliders atau Carousels. Widget ini menampilkan 10 foto dari posting terpopuler di blogmu secara horizontal. Sangat berguna untuk membuat pengunjung tetap tinggal di blog.

galeri pos terpopuler

Sebelum menambahkan widget ini, kamu harus tahu bahwa widget ini tidak sepenuhnya cocok untuk semua template. Maka, buatlah sebuah backup terlebih dahulu sebelum menambahkannya.

galeri post terpopuler

Cara Menambahkan:

Langkah 1. Masuk ke Dasbor Blogger - Template (buat dulu sebuah back-up) - Edit HTML - Lanjutkan - Expand Template Widget.

Langkah 2. Cari kode ]]></b:skin>

Langkah 3. Di atas/Sebelum kode ]]></b:skin>, masukkan kode di bawah ini:
#gallery{position:relative;margin:0 35px 20px;width:590px;height:126px;background:#ffffff}
#gallery .belt{position:absolute;top:0;left:0;list-style-type:none}
#gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxc4cPiI5zVYCGyNWSbACq_wgH38If2HyJ53LGiSe2B5bqme5X6gTysroX1JrgpJkg-1LjX1hCpL_ryyEQC7ATpN7EIM9t8HQbHgFgl_vLLL3C5tw9r45qOml_Wu6sASB3_Tutd_Tx1rsP/s1600/bg-slider.png) bottom center no-repeat;overflow:hidden}
#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px}
#gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}
...Kamu bisa mengubah ukuran widget ini dengan mengubah nilai dari 590 (panjang) dan 126 (lebar). Disarankan untuk tidak mengubah ukuran bagi yang tidak berpengalaman.

Langkah 4. Sekarang, carilah kode </head>

Langkah 5. Di atas/Sebelum kode </head>, masukkan kode di bawah ini:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://gemar-html.googlecode.com/svn/trunk/js/galeri-posting-populer-diatas-post.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
stepcarousel.setup({
galleryid: "gallery",
beltclass: "belt",
panelclass: "panel",
autostep: {enable:true, moveby:1, pause:6000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgljamoM29i1JLjZF7uKGdQdYa06tz64kl4QF45zIjJIRCCWewyYK2r7jB7NlXHSp6hBLAGCaM63duQsOreo0Xq9mMRYdlRf-mi3vJLeBJfzcvpcapmtMLFgfua9kkGhLdOXSLcuiU86yS/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5y-2BzXQ1T1Lj0lqzs2GmOLYU4kIMvWItlMKo5NGBQLfMdQFcFwtjTXS1eWaMWcGU8yVi22eyJU9A9G9Xd96lAN827BygSFFGvIb6QlzHkaeH4coV-_jVbKYrjCvRdutXI4aR9supeea5/s1600/next.png", 2, 36]},
contenttype: ["external"]
})
//]]>
</script>

Langkah 6. Cari kode di bawah ini:
<b:section class='main' id='main' showaddelement='yes'>
...bila kode di atas tidak ketemu, carilah kode dibawah ini:
<b:section class='main' id='main' showaddelement='no'>

Langkah 7. Tepat di bawah kode di langkah 6, masukkanlah kode di bawah ini:
<b:widget id='PopularPosts2' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'><div style='margin-top:20px;margin-bottom:70px;margin-left:-20px;'>
  <div id='gallery'>
   <ul class='belt'>
    <b:loop values='data:posts' var='post'>
     <li class='panel'>
      <b:if cond='data:showThumbnails == &quot;false&quot;'>
       <b:if cond='data:showSnippets == &quot;false&quot;'>
        <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
       <b:else/>
        <div class='item-title'>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
        </div>
        <div class='item-snippet'>
         <data:post.snippet/>
        </div>
       </b:if>
      <b:else/>
       <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'>
        <b:if cond='data:post.thumbnail'>
         <img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
        <b:else/>
         <img alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFYwrgGDx87OnHAiHItk9Go0cj7TrxL0MJ6h45ksgeXPm57Ii-RqLoTOOjqE5MOahWvv0Ba__REtM-AanjdbJUbMZHFs61PtoW8dyEc2QnVo0u1fH0nQwVQXO2AfNMvX_usSIdxt3RyGeB/s1600/no-image.PNG'/>
        </b:if>
       </a>
      </b:if>
     </li>
    </b:loop>
   </ul>
  </div></div></b:if> </b:includable>
</b:widget>
...Hapus kode berwarna biru jika kamu mau menampilkan widget ini di halaman postingan juga.

Langkah 8. Pratinjau dulu templatemu. Bila hasilnya bagus, Simpan templatemu.

18 komentar:

  1. Mantap sob....
    Follow balik ya sob

    BalasHapus
  2. Keren gan, kapan" ane coba :D

    BalasHapus
  3. Boleh di coba nih triknya, Niche blog :)

    BalasHapus
  4. keren sob ijin coba yachh

    BalasHapus
  5. wah mantabz gan ijin tes ,,,,makasih 4share

    BalasHapus
  6. Keren gan...btw kalau dibuat berdasarkan label bisa ga tuh gan?
    Thakns sebelumnya.

    BalasHapus
  7. kalo kayak punya kamu itu gimana ya.
    yg itu caranya ribet :D .

    BalasHapus
    Balasan
    1. Kamu bisa menambahkannya blogger secara langsung. Masuk ke Dasbor blogger > Tata letak > Tambah widget > Popular posts. lalu dicek kata "image thumbnail". Sip, semoga membantu.

      Hapus
  8. terimakasih atas informasinya

    BalasHapus
  9. Lagi terima kasih atas informasinya, ini sangat bermanfaat bagi saya blogger pemula yang masik suka coba mencoba laaagiii,,,,, oooooohhh
    hehehehe

    Ok terima kasih sebagi kembali kasih atas postingannya

    BalasHapus


  10. Thnks gan atas infonya ,,,,,,,,, smoga lebih pariatif lagi isinya

    BalasHapus
  11. pagi.. senang membaca berita di web ini.. sangat banyak informasi penting .. :D

    BalasHapus
  12. salam sejahtera dan sukses... awalnya saya akan mengucapkan ucapan terimakasih telah memberikan beritanya.. thanks ya :D

    infonya mantep

    BalasHapus
  13. makasih atas infonya sangat menarik dan artikelnya keren banget http://goo.gl/lmUAEp

    BalasHapus
  14. Izin pake ya gan,, thanks sebelumnya :)

    BalasHapus
  15. Salam sukses selalu yah, saya mengucapkan banyak terima kasih atas artikel yang kreatif ini.

    BalasHapus
  16. kalau menyimpan terus berarti ada yang gagal gan?

    BalasHapus

Diberdayakan oleh Blogger.

Followers