Modifikasi widget popular posts dengan efek tooltip pada ringkasan atau summary postnya. Kali ini saya akan membahas cara modifikasi widget popular posts bawaan blogspot dengan efek tooltip pada summary atau ringkasan post-nya, seperti yang kita ketahui ada banyak tutorial untuk memodifikasi widget popular post original blogspot, seperti memberi efek warna warni dll.
Pada pembahasan ini, kita akan menampilkan popular post bergambar dengan efek pada ringkasan postingnya, dan ringkasan tersebut akan muncul ketka link pada popular posts tersebut di sorot, contoh seperti gambar diatas. Tutorial ini saya dapatkan setelah berjalan-jalan di blog asal vietnam http://www.trollvl.com/  dan saya menemukan tutorial yang menarik ini, saya coba terapkan dan berhasil, tapi ini hanya berjalan pada popular posts dengan thumbnail atau menampilkan gambar.
Berikut Langkah-langkah Modifikasi Widget Popular Posts Dengan Efek Tooltip.
» TAHAP 1
1. Login akun blogger anda
2. Pada Dashboard pilih Tata Letak » Tambah Gadget » Pilih Entri Populer
3. Lalu pilih jumlah post yang akan ditampilkan, Setting seperti gambar berikut ini !
4. Klik Simpan
5. Klik Simpan Setelan

» TAHAP 2
1. Masuk ke Template » Edit HTML » Centang  Expand Template Widget
2. Letakka kode berikut ini diatas kode ]]></b:skin>

.tooltip-pp { position:relative; display:block }
.tooltip-pp span { visibility:hidden; position:absolute; bottom:30px; left:50%; z-index:999; width:230px; margin-left:-127px; padding:10px; border:2px solid #0F83A0; opacity:.9; background-color:#A6CED8; background-image:-webkit-linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0)); background-image:-moz-linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0)); background-image:-ms-linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0)); background-image:-o-linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0)); background-image:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0)); -moz-border-radius:4px; border-radius:4px; -moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.5) inset; -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.5) inset; box-shadow:0 1px 2px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.5) inset; text-shadow:0 1px 0 rgba(255,255,255,.4) }
.tooltip-pp:hover { border:0 }
.tooltip-pp:hover span { visibility:visible }
.tooltip-pp span:before,.tooltip span:after { content:""; position:absolute; z-index:1000; bottom:-7px; left:50%; margin-left:-8px; border-top:8px solid #A6CED8; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:0 }
.tooltip-pp span:before { border-top-color:#0F83A0; bottom:-10px }

3. Cari kode dibawah ini

            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>

Untuk mudah menemukannya cari saja kode  <!-- (4) Show snippets and thumbnails -->

Lalu ganti semua kode tersebut dengan kode berikut ini

<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
    <div class='item-title'>
        <b:if cond='data:post.thumbnail'>
            <img border='0' class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
        </b:if>
<a class='tooltip-pp' expr:href='data:post.href'><data:post.title/><span><data:post.snippet/></span></a></div>
</div>

4. Simpan Template dan Lihat hasilnya..
Silahkan anda sesuiakan sendiri, tampilan style setting pada kode cssnya.

Demikian posting tentang Modifikasi Widget Popular Posts Dengan Efek Tooltip, semoga bermanfaat.