Cara Memodif Widget Populer Post Di Blog

 Cara memodif widget Bawaan Populer Post Blogger.Bagaimana Cara memodif Populer Post itu sendiri?Kalau anda kurang begitu Mod oleh widget Populer Post bawaan Blogger anda bisa memodif dengan tampilan yang lebih menarik lagi di banding Tampilan Populer Post yang Bawaan Blogger itu sendiri.Trik ini saya peroleh dari sahabat creatingwebsite-maskolis Dengan sedikit sentuhan Css maka akan ada perubahan yang mencolok di banding populer post sebelumnya.

Untuk lebih Lanjut,Ikuti Langkah - langkah caranya di bawah ini :

1.Pertama-tama Login Blogger anda.
2.Kedua Klik Template - Edit HTML - Lalu centang Expand widget Template ,Kemudian cari Kode ]]></b:skin> Untuk mempercepat proses pencarian Gunakan CTRL + F Lalu masukkan kode ]]></b:skin> .kalau sudah ketemu kemudian kopas kode di bawah ini tepat di atas kode ]]></b:skin> :

.PopularPosts .widget-content ul li {
background:none repeat scroll 0 0 transparent;
float:left;
list-style:none outside none;
border-bottom:none;
margin:0!important;
padding:0!important
}

.PopularPosts ul {
border:none;
padding:0
}

.PopularPosts {
border:0 solid #ccc
}

.PopularPosts .item-thumbnail img {
width:146px;
height:90px;
margin:0;
padding:0
}

.PopularPosts .item-content {
position:relative;
float:left;
margin:0
}

.PopularPosts .item-title a {
font-size:11px;
color:#fff;
display:block;
float:left;
width:136px;
padding:0 5px
}

.PopularPosts .item-title:hover {
background:#111
}

.PopularPosts .item-thumbnail {
border:1px solid #666;
overflow:hidden;
margin:3px 5px 7px 6px
}

.PopularPosts .item-title {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirjzGG6R6uHKfnY4FXTeIRjc63NyiL2s-SkbmgtgwLSbYWWq89g4lxSwAhOxMLtxAKsd6FX9kNQeX-z5KlKGzHnYGlI0CnfGa31LkhoxnOnSWRqjGoi-ExjaZPsrk84kw6QrXJ90rXiLY/s1600/transparant.png);
position:absolute;
bottom:8px;
right:6px
}

Keterangan :
 "Ganti Nomor Dari Kode width:136px; Ini dimaksudkan untuk menyesuaikan dengan Tata Letak Sobat.

3.Langkah Ketiga Masuk ke Tata Letak - Tambah Gadget - Pilih Populer Post ,Kemudian Setting/Atur Populer Post anda sesuai ScreenShot Atau Gambar di bawah ini :

ScreenShot Setting Populer Post

4.Langkah KeEmpat Masuk ke Edit HTML Lagi Centang Expand widget Template Lalu Cari Kode mirip kode di bawah ini :

<b:widget id='PopularPosts' locked='false' title='Popular Posts' type='PopularPosts'>

<b:includable id='main'>

  <b:if cond='data:title'><h2><data:title/></h2></b:if>

  <div class='widget-content popular-posts'>

    <ul>

      <b:loop values='data:posts' var='post'>

      <li>

        <b:if cond='data:showThumbnails == &quot;false&quot;'>

          <b:if cond='data:showSnippets == &quot;false&quot;'>

            <!-- (1) No snippet/thumbnail -->

            <a expr:href='data:post.href'><data:post.title/></a>

          <b:else/>

            <!-- (2) Show only snippets -->

            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>

            <div class='item-snippet'><data:post.snippet/></div>

          </b:if>

        <b:else/>

          <b:if cond='data:showSnippets == &quot;false&quot;'>

            <!-- (3) Show only thumbnails -->

            <div class='item-thumbnail-only'>

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

            <div style='clear: both;'/>

          <b:else/>

            <!-- (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;'/>

          </b:if>

        </b:if>

      </li>

      </b:loop>

    </ul>

    <b:include name='quickedit'/>

  </div>

</b:includable>

</b:widget>

Kalau sudah Ketemu  Ganti Kode di atas Dengan Kode di bawah Ini :

<b:widget id='PopularPosts' locked='false' title='Most Product View' type='PopularPosts'>

<b:includable id='main'>

  <b:if cond='data:title'><h2><data:title/></h2></b:if>

  <div class='widget-content popular-posts'>

    <ul>

      <b:loop values='data:posts' var='post'>

      <li>

        <b:if cond='data:showThumbnails == &quot;false&quot;'>

          <b:if cond='data:showSnippets == &quot;false&quot;'>

            <!-- (1) No snippet/thumbnail -->

            <a expr:href='data:post.href'><data:post.title/></a>

          <b:else/>

            <!-- (2) Show only snippets -->

            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>

            <div class='item-snippet'><data:post.snippet/></div>

          </b:if>

        <b:else/>

          <b:if cond='data:showSnippets == &quot;false&quot;'>

            <!-- (3) Show only 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>

            <div style='clear: both;'/>

          <b:else/>

            <!-- (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;'/>

          </b:if>

        </b:if>

      </li>

      </b:loop>

    </ul>

    <b:include name='quickedit'/>

  </div>

</b:includable>

</b:widget>

5.Langkah Terakhir Simpan Template.

 Jika dari Langkah -Langkah  di atas anda jalankan dengan Tepat maka Hasil dari Cara memodif widget Populer Post di Blog Akan seperti Terpopuler Blog Facewoman.Itulah cara memodif Populer Post memang tutornya cukup panjang Tapi dengan ketelitian itu sangatlah mudah dan menyenangkan.