Dimana ada kemauan disitu ada jalan, seperti di hari ini ada kesempatan
Waktu luang, untuk berbagi tutorial yang sederhana dan ringan, tentang
Popular posts dengan effects berputar, dan sudah valid html 5, css3 jadi
Buat sobat yang berminat dengan widget ini, silahakan simak dibawah ini
 |
Trik Membuat Popular Posts Effects Spin |
Sebelum anda simak artikel ini lebih lanjut, sebelumnya saya publikasi tentang
Menghapus Batas Tabel Gambar Postingan, dan pada kali ini saya akan share
Trik Membuat Popular Posts Effects Spin, di mana widget P
opular Posts ini
Berperan penting pada artikel anda, manakala postingan tersebut yang sering di
Kunjungi oleh pengunjung blog anda, jika di blog anda belum ada atau sudah ada
Dan ingin mencoba
Trik popular post yang ini, silahkan berapresiasi di sini sob
Cara memasangnya :
Masuk blog anda dan
sign in, kemudian pilih dasboard dan pilih template
Lalu pilih edit template, selanjutnya anda cari kode
]]></b:skin> tekan
Ctrl + f untuk memudahkan pencarian anda, setelah ketemu kode yang
Anda cari copy kode di bawah ini dan paste tepat di atas kode
]]></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);}
Masih di edit html Kemudian Cari koode
<b:section class='sidebar'Atau lengkap cari kode nya seperti di bawah ini
<div id='sidebar-wrapper'>
<div style='clear: both;'/>
<b:section class='sidebar' id='sidebar' preferred='yes'>
Setelah ketemu copy kode di bawah ini dan pastekan tepat di bawah kode
<b:section class='sidebar' id='sidebar' preferred='yes'>Di bawah ini kode yang harus anda copy :
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h3><data:title/></h3></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='' 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='' 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>
</div>
</b:includable>
</b:widget>
Keterangan :
Setelah penempatan kode nya, terpasang dengan benar, silahkan klik save - simpan
Dan buka blog anda, dan cek popular posts nya, bekerja dengan oftimal atau tidak
Jika belum tampil di blog anda, silahkan baca kembali dengan seksama artikel diatas
Dan jika anda, ingin mengatur jumlah pos t yang tampil pada popular posts silahkan
Anda atur ulang menurut jumlah yang di inginkan, dengan membuka halaman layout
Pilih tata letak dan edit widget popular post, silahkan atur jumlah posts atau lainya
Menurut yang anda kehendaki, sekian semoga tutorial sederhana ini bisa bermanfaat