Trik Membuat Artikel Populer Dengan Gambar Yang Berputar

Minggu pagi enaknya bagi-bagi informasi nih ^_^ dari pada galau-galauan sendiri mending baca artikel ini deh bagi kalian blogger. kali ini saa akan membahas tentang Trik Membuat Artikel Populer Dengan Gambar Yang Berputar. Yups gak usah basa basi lagi deh mending langsung saja ini dia Trik Membuat Artikel Populer Dengan Gambar Yang Berputar.


Untuk contohnya anda bisa lihat pada blog ini tepatnya di sebelah kanan bawah laar ^_^. sekarang mari kita bahas Cara Membuat Entri Populer Dengan Animasi Berputar di Blogger anda.


1. Masuk ke akun blogger anda.


2. Pada Dasbor klik Tata Letak ➨ Tambah Gadget (Di manapun yang anda suka)


3. Lalu pilih Entri Populer ➨ Setting Entri Populer dengan mencentang tumbinalis gambar saja, lalu simpan.




4. Selanjutnya pada menu klick template ➨ Edit HTML ➨ CentangExpand Template Widget.


5. Sekarang dalam Edit Template anda cari kode ]]></b:skin> agar lebih mudah anda bisa menggunakan f3 atau menggunakan ctrl+f.


6. Bila sudah ketemu letakkan kode di bawah ini tepat di atas ]]></b:skin> .


.popular-posts .item-thumbnail{float:left;} .popular-posts ul{padding-left:30px;} .popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;} .popular-posts ul li img {padding:0px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;} .popular-posts ul li img:hover {border:2px solid #ccc;-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. Sebenarnya cara di atas sudah bisa untuk membuat artikel populer anda berputar, namun artikel populernya masih memanjang ke bawah.Jika ingin seperti yang ada di blog ini silahkan ikuti langkah berikut


7. Jika ingin membentuknya seperti pada blog ini, maka kita harus mengganti kode Widget Entri Populer.
    
8. Untuk membentuknya seperti pada blog ini s sobat cari kode : PopularPosts1


9. Setelah ketemu anda  perhatikan kode <b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'> sampai kode </b:widget> ,lebih lengkapnya ini :


<b:widget id='PopularPosts1' locked='false' title='Entri Populer' 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"'>
            <!-- (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 == "false"'>
            <!-- (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>


10 .Lalu ganti atau hapus kode tersebut dan ganti dengan kode berikut :


<b:widget id='PopularPosts1' 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 == "false"'> <b:if cond='data:showSnippets == "false"'> <!-- (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 == "false"'> <!-- (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/AVvXsEjB1DsSVB_WbeKPaIIwP7-8iQR6_qmuYC6L0LzMCoVzoBX-cJxWcuvuVhSJFw15Ub3XaEWJPYmvxbGrp9MYrtdGCwv9bj8dFMXbjs6_SGxXSmqf2hRUiUiTaFHwHpIfca5vZsA0ayi7VEY/s1600/otowebsite.jpg'/> </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>


11 Kemudian simpan template dan lihat hasilnya, Selamat mencoba ^_^.

Yups demikianlah artikel tentang Trik Membuat Artikel Populer Dengan Gambar Yang Berputar , Semoga artkel ini bermanfaat bagi anda semua, Happy Blogging ^_^.

Semoga artikel Trik Membuat Artikel Populer Dengan Gambar Yang Berputar bermanfaat bagi Anda. Jika kamu suka dengan artikel Trik Membuat Artikel Populer Dengan Gambar Yang Berputar ini, like dan bagikan ketemanmu.