Modifikasi Popular Post Bag.2 - Hallo Sob Jody Blog, artikel kali ini berjudul Modifikasi Popular Post Bag.2, kami telah menuliskan yang kami tahu pada artikel ini, semoga bermanfaat.

Judul : Modifikasi Popular Post Bag.2
link : Modifikasi Popular Post Bag.2

Modifikasi Popular Post Bag.2

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 .

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

Lakukan setting pada bagian ini :

Lalu Save selanjut nya kita akan melakukan pengeditan pada bagian template (ingat download lengkap dulu template )
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;
}

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>

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 == "false"'>
          <b:if cond='data:showSnippets == "false"'>
            
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            
            <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 == "false"'>
            
            <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/AVvXsEj9v2z6ma9Jhg0WXeeUEGWbST8M2zvaT-5D_6-LjvIkKreuFBMarYtC_eaKLxFXxsZmsHaYftPhzCn__U0RmdtEwCRKrgcGBGVX8X61Jg0_-tfNIFV0efd4qbj6L_WQi-ZeeWFGN4oBJKQ/s72-c/default.png'/>
       </b:if>
                  </a>
                </div>
             </div>
            <b:else/>
            
            <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>

Save Template (lakukan preview terlebih dahulu)

Modifikasi Popular Post Bag.2

Demikianlah Artikel Modifikasi Popular Post Bag.2

Sekian Modifikasi Popular Post Bag.2, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingankali ini.

Anda sedang membaca artikel Modifikasi Popular Post Bag.2 dan artikel ini url permalinknya adalah http://caratutorialgratis.blogspot.com/2013/04/modifikasi-popular-post-bag2.html Semoga artikel ini bisa bermanfaat.

Modifikasi Popular Post Bag.2

lihat juga

Modifikasi Popular Post Bag.2

Demikianlah Artikel Modifikasi Popular Post Bag.2