Modifikasi Popular Post Bag.2

D

iantara sekian banyak widget yang paling sering di modifikasi adalah Popular post ,masih ingat dengan postingan saya beberapa waktu lalu tentang cara Modifikasi Popular Post Bag.1 jika belum silahkan lihat dulu disini .untuk memodifikasi sebuah widget biasanya kita akan melakukan perubahan pada kode css widget tersebut ,tidak terkecuali denga widget popular post itu sendiri,Seperti halnya yang akan Full Blog Design Share kali ini masih tentang cara  Modifikasi Popular Post Bag.2 nah untuk melihat screenshot nya silahkan lihat contoh gambar di samping kiri postingan ini ,atau langsung ke demonya pada bagian Popular Post di samping kanan bagian sidebar website ini .Yang perlu di perhatikan untuk melakukan trik ini sobat perlu berhati hati karena kita akan melakukan pengeditan pada bagian template ,jadi akan lebih baik jika sobat dowload lengkap dulu template ,untuk menjaga kemungkinan salah dalam pengeditan .

1. Masuk ke tata letak == Tambah gadget == Pilih widget Popular Post /Entri popular seperti contoh gambar di bawah ini :

2. Lakukan setting pada bagian ini  :

3. Lalu Save selanjut nya kita akan melakukan pengeditan pada bagian template (ingat download lengkap dulu template )
4. Dengan bantuan Ctr+ F Cari kode ]]></b:skin> selanjutnya taruh kode css di bawah ini tepat kode ]]></b:skin> berikut kodenya:

/*popular-post*/
.popular-posts .item-thumbnail {
    float: center;
}

.popular-posts ul {
    padding-left: 0px;
}

.popular-posts ul li {
    list-style-image: none;
    list-style-type: none;
    display: inline;
}

.PopularPosts img {
    margin-left: 10px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    -o-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -webkit-transition: all 1.5s ease;
}

.PopularPosts img:hover {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -o-transform: scale(1.2) rotate(360deg) translate(0px);
    -moz-transform: scale(1.2) rotate(360deg) translate(0px);
    -webkit-transform: scale(1.2) rotate(360deg) translate(0px);
    -o-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -webkit-transition: all 1.5s ease;
}

5. Juga dengan bantuan Ctr+ F cari kode seperti di bawah ini  :

<b:widget id='PopularPosts1' locked='false' title='Popular post' type='PopularPosts'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
   ...........................................................
.......................................................
........................................
......................................
............................................
          </b:widget>

6. Drag semua kode di atas kemudian ganti dengan kode di bawah ini

<b:widget id='PopularPosts1' locked='false' title='Popular post' 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'>
            
                <div class='item-thumbnail'>
   <a expr:href='data:post.href' expr:title='data:post.title'>
    <b:if cond='data:post.thumbnail'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
       <b:else/>
        <img alt='' border='0' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDykc5EXZdDU7nB0Acc2ERu-LbOpEj82EX90-me8K5YzD8Ko6hHjtmE-2PlZVypUa22OvwUtE25fGj0gAjm50PRUBSJFG20cfQclzFWhht5Zfsvq9jC0QhzeGLoGG_abDA1a1WRaSH_ZY/s72-c/default.png'/>
       </b:if>
                  </a>
                </div>       
             </div>
            <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>

7. Save Template (lakukan preview terlebih dahulu)
Jika sobat ada kesulitan berhubungan dengan tutorial tentang cara  Modifikasi Popular Post Bag.2 silahkan ajukan pertanyaan di form komentar

Judul Artikel : Modifikasi Popular Post Bag.2

Terima Kasih Sobat sudah membaca Artikel saya Tentang Modifikasi Popular Post Bag.2 Silahkan tinggalkan jejak lewat form komentar untuk mempermudah Admin berkunjung balik ke blog sobat. Mau share ulang Article saya ini..? silahkan ..!! tentunya dengan Judul dan narasi yang berbeda dan jangan lupa untuk mencantumkan link sumber..Terima Kasih