CARA MEMBUAT POPULAR POST BERGERAK

CARA MEMBUAT POPULAR POST BERGERAK – Cara membuat thumbnail popular post bergerak ternyata bisa dengan mengatur kode cssnya saja dan menghapus beberapa baris script yang sudah ada pada default gadget popular post.

cara membuat popular post widget
cara membuat popular post widget

Tutorial Cara memasang popular post dengan thumbnail bergerak

1. Seperti biasa yang harus pertama kali dilakukan adalah masuk dashboard blogger
2. Pilih Layout > add a gadget > pilih Popular Post
3. Pilih pengaturan seperti pada gambar berikut ini
popular post
popular post

4. Setelah itu masuk ke Template > Edit HTML > Proceed
5. Masukan kode css berikut pada kode css blog template

.popular-posts .item-thumbnail{float:left}
.popular-posts ul{padding-left:8px;padding-top:4px}
.popular-posts ul li{list-style-image:none;list-style-type:none;display:inline}
.popular-posts ul li img{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease;border:2px solid #fff;padding:0}
.popular-posts ul li img:hover{border:2px solid #fff;-moz-transform:scale(1.3) rotate(-360deg);-webkit-transform:scale(1.3) rotate(-360deg);-o-transform:scale(1.3) rotate(-360deg);-ms-transform:scale(1.2) rotate(-360deg);transform:scale(1.3) rotate(-360deg)}

6. Centang Expand widget template cari kode <!– (3) Show only thumbnails –> dengan ctrl+f
7. HAPUS script yang berwarna merah dan MASUKAN kode yang berwarna biru pada kode widget tersebut

            <!-- (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:title='data:post.title' 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/>

 5. Selesai maka hasilnya akan berupa seperti gambar dibawah ini

cara membuat popular post bergerak
cara membuat popular post bergerak

Demikian tutorial CARA MEMBUAT POPULAR POST BERGERAK semoga bermanfaat

Leave a Reply

Your email address will not be published. Required fields are marked *

No Live Link Please! and Leave a Relevant Comment