Edit Widget Popular Post Dengan Efek Melayang

Modifikasi widget popular posts dengan efek tooltip pada ringkasan atau summary postnya. Trick ini saya dapat dari blognya MDF , dan saya mencoba untuk menshare ulang Artikel ini . 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


            <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 

Lalu ganti semua kode tersebut dengan kode berikut ini

<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.

Judul: Edit Widget Popular Post Dengan Efek Melayang; Ditulis oleh Unknown; Rating Blog: 5 dari 5