Entri Populer adalah Entri atau postingan, tutorial atau apa aja terserah sobat menyebutnya apa !Intinya Entri Populer adalah Entri yang paling sering di baca oleh pengunjung, dan bila kita memasang Widget Entri Populer ini maka akan lebih bisa menarik perhatian pengunjung blog kita untuk membaca Entri Populer yang paling sering di baca pengunjung. Sayangnya untuk pemasangan Widget Entri Populer ini biasanya akan lebih menghabiskan tempat karna bentuknya yang memanjang ke bawah, sebelumnya Blog Oto Website pernah membahas tentang : Cara Membuat Entri Populer Dengan Fungsi Scroll dan Membuat Entri Populer Tampil Lebih Menarik.
Untuk kali ini masih tentang Entri Populer ya itu : Cara Membuat Entri Populer Dengan Animasi Berputar, maksudnya adalah widget atau gambar Entri Populer sobat akan berputar bila cursor mendekatinya, dan Widget Entri Populer juga tidak akan menghabiskan banyak tempat.
Untuk contohnya sobat bisa lihat gambar di atas. sekarang mari kita bahas Cara Membuat Entri Populer Dengan Animasi Berputar di Blogger sobat.

1. Masuk ke akun blogger sobat.

2. Pada Dasbor klick Rancangan ➨ Tambah Gadget (di bagian manapun sobat ingin widget ini muncul)

3. Lalu pilih Entri Populer ➨ Setting Entri Populer seperti gambar berikut, lalu simpan.


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

5. Sekarang dalam Edit Template sobat cari kode ]]></b:skin> Jika kesulitan mencarinya coba baca Cara Cepat Mencari Kode HTML.

6. Bila sudah ketemu sekarang letakkan kode berikut ini di atas kode tadi.

.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. Cara di atas sebenarnya sudah bisa lansung di Simpan dan Entri Populer sobat sudah bisa berputar, tapi bentuknya masih memanjang ke bawah. Jika ingin membentuknya seperti pada gambar di atas maka silahkan ikuti langkah selanjutnya.

7. Jika ingin membentuknya seperti pada gambar di atas, maka kita harus menghancurkan kode Widget Entri Populer.
Emoticon
Bukan menghancurkan sebenarnya lebih tepatnya adalah mengganti kode widget Entri Populer.

8. Untuk membentuknya seperti pada gambar di atas sobat cari kode : PopularPosts1

9. Setelah ketemu sobat perhatikan 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='http://2.bp.blogspot.com/-z4FDUFmj1nI/T92vNJB7nII/AAAAAAAADFQ/qytwzaUZgDc/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. Simpan Template.

Sekarang sobat bisa lihat sendiri hasilnya dan coba arahkn cursor ke widget Entri Populer.

Saya rasa cukup untuk kali ini !

Bagaimana apakah sobat berhasil menerapkannya di blogger sobat? silahkan tinggalkan tanggapan atau komentar sobat tentang postingan atau articles di atas!

Poskan Komentar Blogger Disqus

  1. gan request cara memasang tulisan description, reviewer, rating di setiap postingan

    BalasHapus
  2. brhasil mas.. tq infonya...

    tapi gimana biar bisa muncul tulisan 'judul entri' pas kursor mouse diarah kan ke situ..
    kyak di blog mas.. tq bgt

    BalasHapus
  3. @Muhammad Iqbal JaizSama-sama, Jika ingin membuat agar muncul teks silahkan klick DISINI.

    BalasHapus
  4. wah makasih tutorialnya ya...

    BalasHapus
  5. Thanks Gan info-nya berhasil nich...

    BalasHapus
  6. @AllSama2, senang bisa berbagi n membantu.

    BalasHapus
  7. gan ane copas dikit ea,tapi yang menghancurkan widgetnya nggak bisa

    BalasHapus
  8. \o/ gan dmca itu gunanya buat apa

    BalasHapus
  9. @lasidroid azizAnda hrus mmsang widget entri populer dhulu bru Anda bsa mghncurkan/mgganti kode trsbut.

    Silhkn asal mnyrtkan sumbernya sbgai hak cipta.

    DMCA : Adlah alt yg d gunkn untuk mlcak artikel kita/kode script & HTML milik kita(pemilik asli) yang di gunakan oleh orang lain.
    DMCA jga bsa d gunkan untuk menghpus artikel di blog lain yg copas blog kita (dengan syarat)

    Mka dri itu sgat brbhya bila ada blog yg copas dan tidak izin/mmsang link sumber, maka oleh pmilik artike/kode asli trsbut akan di adukan ke google dan blog trsbut akan msuk blacklist.

    Itu sdikit ket tntang DMCA, Jika kurg jlas silhkn brtnya lgi :Q

    BalasHapus
  10. kalau diterapkan di blog itu kena blacklist nnggak blognya,misalkan ane pasang di blog ane nanti blog ane kena blacklist nggak,terimakasih

    BalasHapus
  11. @lasidroid azizTntu tidk, aslkn anda izin dan yg trpnting mnyrtkn link sumber jika ingin copas.

    Biasanya yang memblacklist ini sang pmilik content asli and mbah google. :Q

    BalasHapus
  12. :yaya: thanks ya informasinya saya sudah menambah kan link anda ke blog saya,kunjungi juga ya blog saya lasidroid.blogspot.com

    BalasHapus
  13. maksih banget sob atas info nya ... komen balik yaa :) www.ekooe.blogspot.com

    BalasHapus
  14. gagal mas, coba deh cek blog ane..

    BalasHapus
  15. @Admin Layar TeknoSebelum menerapkan tutorial ini Anda harus memasang entri populer terlebih dahulu, setelah itu Anda baru bisa mengganti kode tersebut.

    BalasHapus
  16. sob, ini cuma bisa nampilin 9 popular post aja ya?
    coz saya mencoba untuk tampilin 12 postingan yg muncul tetap 9 postingan aja? ada triknya gak?

    thanks

    BalasHapus
  17. @ArdiansyahTidak bisa, karna dari awal kode sampai akhir adalah hanya untuk menampilkan jumlah standar entri populer.

    BalasHapus
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top