Cara Memodif Widget Populer Post Di Blog
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 :
Cara Memodif Widget Populer Post Di Blog
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.

8 Komentar

Hallo sobat..Kami Senang! Apabila Anda mau meninggalkan Saran, kritik dan Opini tentang Artikel Blog Kami.

  1. keren jg ya sob.. punya saya msh pakai bawa'an blogger. tar saya cb Sob. makasih ya infonya....:D

    BalasHapus
  2. wahhh,,
    kre tuh tutorial nya
    boleh di coba nihh,,
    heheheh
    thankz

    BalasHapus
  3. tgx buat tutorialnya gan,,
    langsung ke TKP....

    BalasHapus
  4. Ud di Praktekin...
    tapi ga Jalan....
    Thx U

    BalasHapus
    Balasan
    1. Terima kasih atas komentarnya,

      setelah saya telusuri memang ada kesalahan pada PopularPosts1 ,Yang seharusnya penulisan yang benar di hilangkan angka (1)satu menjadi PopularPosts.

      jadi scrip di atas sudah saya perbaiki.

      untuk hasilnya nanti akan terlihat pada Menu TERPOPULER : blog facewoman. jika masih tidak valid, coba hubungi saya di cintakubaca@gmail.com

      terima kasih. :)



      Hapus

Posting Komentar

Hallo sobat..Kami Senang! Apabila Anda mau meninggalkan Saran, kritik dan Opini tentang Artikel Blog Kami.

Lebih baru Lebih lama