Modifikasi | Widget Popular Posts | Dengan Efek Tooltip

Kali ini Miev 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 Miev dapatkan setelah berjalan-jalan di blog asal vietnam http://www.trollvl.com/  dan Miev menemukan tutorial yang menarik ini, Miev 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 sobatMiev
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 sobatMiev sesuiakan sendiri, tampilan style setting pada kode cssnya.

Semoga Artikel ini bermanfaat untuk sobatMiev

Contact : Facebook : softmiev Twitter      : softmiev Email        : softmiev@yahoo.co.id Invite        : 29ecodcc Jangan Lupa Komentar yah !!!

.

Posted in: Tutorial Blog