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.

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

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.