Modifikasi Widget Popular Posts Thumbnail/gambar With Efek Tooltip

Modifikasi Widget Popular Posts With Efek Tooltip. Sebelumnya saya telah mengulas membuat Link dan Recent post dengan effek Tooltip, pada kali ini saya masih mengulas mengenai efek Tooltip namun kali ini saya akan memodifikasi Popular Post dengan efeek Tooltip.

Populer posts yang akan saya ulas ini dengan Thumbnail dengan ringkasan, dan ringkasan tersebut akan muncul ketka link pada popular posts di sorot oleh kursor. Perlu anda ketahui Modifikasi Widget Popular Posts With Efek Tooltip ini dapat bekerja jika populer posts tersebut dengan thumbnail atau menampilkan gambar.Bagi anda yang tertarik ingin menarapkannya berikut ini langkah-langkahnya :

L1-Modifikasi Widget Popular Posts Thumbnail/gambar With Efek Tooltip

1. Login keakun Bloger
2. Pilih Template » Edit HTML » Expand Template Widget
3. Kemudian anda  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 }

4. Selanjutnya anda cari kode berikut :

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

Note :
Utuk memudahkan pencarian anda gunakan ctrl+f  anda cari <!-- (4) Show snippets and thumbnails -->

5. Kemudian anda ganti kode diatas dengan 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>

6. simpan Template

L2-Modifikasi Widget Popular Posts Thumbnail/gambar With Efek Tooltip

1. Login keakun Blogger
2. Pada Dashboard pilih Tata Letak » Tambah Gadget » Pilih Entri Populer

3. Berikan centang pada thumbnail gambar dan cuplikan
4. Untuk menapilkan gambar silahkan anda sesuiakan dengan keinginan
5. simpan

Demikian tentan Modifikasi Widget Popular Posts Thumbnail/gambar With Efek Tooltip, semoga bermanfaat!

Share this post