Modifikasi Widget Popular Posts Dengan Efek Tooltip

Modifikasi Widget Popular Posts Dengan Efek Tooltip, pada kesempatan kali ini MaxTrick akan berbagi bagaimana membuat Popular Post Stylish dan keren tentunya dengan cara yang mudah dan simple. Rubah tampilan popular post kalian menjadi lebih trendy, dan tentunya lebih user friendly.

Modifikasi Widget Popular Posts Dengan Efek Tooltip

Kriteria Post Hari Ini :

• Goal : Menjadikan Popular Post kita menjadi lebih interaktif dan menarik
• Tujuan : Meningkatkan Popular Site di pandangan Visitor Blog
• Fitur : User friendly dan fast respon popular post

Tutorial - 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 Disamping !
4. Klik Simpan 
5. Klik Simpan Setelan

Tutorial - Tahap 2 :

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

.PopularPosts li {margin-bottom:-10px}
.PopularPosts .item-thumbnail {float:left}
.popular-posts ul li img {
  width:60px;
  height:60px;
  padding:2px;
  -moz-border-radius:60px;
  -webkit-border-radius:60px;
  border-radius:60px;
  -webkit-transition:all 0.3s ease;
  -moz-transition:all 0.3s ease;
  transition:all 0.3s ease;
  border:2px solid #CCC;
}
.popular-posts ul li img:hover {
  border:2px solid #ccc;
  -moz-transform:scale(1.2) rotate(-360deg);
  -webkit-transform:scale(1.2) rotate(-360deg);
  -o-transform:scale(1.2) rotate(-360deg);
  -ms-transform:scale(1) rotate(-360deg);
  transform:scale(1.2) rotate(-360deg);
}
.popular-post-isi {
  position:relative;
  background-color:#f7f7f7;
  padding:5px;
  min-height:60px;
  border:1px solid #ccc;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  margin-left:75px;
  margin-bottom:5px;
}
.popular-post-isi:before {
  content:"";
  width:0;
  height:0;
  position:absolute;
  right:100%;
  top:19px;
  border-width:10px;
  border-style:solid;
  border-color:transparent #f7f7f7 transparent transparent;
}
.item-title {
  font-size:12px;
  line-height:1.1em;
}
.item-snippet {
  color:blue;
  font-size:11px;
  line-height:1em;
}

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>
            <div style='clear: both;'/>

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'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img border='0' expr:alt='data:title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:title='data:title' expr:width='data:thumbnailSize' itemprop='photo'/>
                  </a>
                </div>
    <b:else/>
    <div class='item-thumbnail'>
    <a expr:href='data:post.href' target='_blank'>
     <img border='0' expr:alt='data:title' expr:height='data:thumbnailSize' expr:title='data:title' expr:width='data:thumbnailSize' itemprop='photo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGUECmhBwujVr_hiW3lCZn3OozgtOF8ljTdFM9ndHLMAAHOBtlCyCaMe8hgEaII9OiMLBiS80FHKhsDCHVeE4JxshdtJh7Aknov28QlAMu_pr4Bx7HxBu1kiqBJ1dFyhu4X-iHGMqaD8Kb/'/>
    </a>
    </div>
              </b:if>
              <div class='popular-post-isi'><div class='item-title'><a expr:href='data:post.href' itemprop='url'><span itemprop='summary'><data:post.title/></span></a></div>
              <div class='item-snippet'><span itemprop='description'><data:post.snippet/></span></div></div>
            </div>
            <div style='clear: both;'/>  

4. Simpan Template dan Lihat hasilnya..

//Pengaturan
Jika anda ingin menghilangkan ringkasan posting pada widget popular posts, tambahkan kode berikut ini

.item-snippet { display:none }

Note :

Url https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGUECmhBwujVr_hiW3lCZn3OozgtOF8ljTdFM9ndHLMAAHOBtlCyCaMe8hgEaII9OiMLBiS80FHKhsDCHVeE4JxshdtJh7Aknov28QlAMu_pr4Bx7HxBu1kiqBJ1dFyhu4X-iHGMqaD8Kb/

merupakan gambar yang tampil jika artikel tidak memiliki gambar, silahkan ganti dengan url gambar anda. 

Sisanya silahkan anda sesuaikan sendiri.

Bila merasa keksusahan dalam setting Template, SOBAT BISA MEMESAN PADA SAYA UNTUK SETTING pada Theme sobat. Blogspot.

"Melayani Optimasi Template Sobat Blogger"

Masalah harga saya tidak prioritaskan yang terpenting saya bisa membantu kawan semua
How To Order to us To Setting Your Tag Heading :

1. Just comment in post below and said that you want to order.

Feature : Fast Respon & Pengerjaan paling lambat 2 hari ^^

Modifikasi Widget Popular Posts Dengan Efek Tooltip