Modifikasi Popular Posts Effects 3D

Pada sebuah blog atau blogspot, sudah pasti, untuk membuatnya lebih memanjakan
Pengunjung atau lebih tepatnya agar pengunjung mudah menavigasi, artikel dan post
Yang terdapat pada blog kita, dengan cara, memasang widget popular posts, yang
Pada kali ini akan saya share, dan sebelumnya sudah berbagi tentang cara memasang

Threaded Comments Rotating Cycle V3, pada kesempatan ini script popular posts
Yang akan saya publikasikan, akan sedikit berbeda dengan yang ada karena pada
Tampilanya nanti, popular posts ini, akan sedikit menampilkan effects slide 3D yang
Bisa menambah tampilan widget tersebut, lebih unik dan menawan silahkan di simak

Modifikasi Popular Posts Effects 3D

Dengan effects 3D popular, post ini, tampil berputar - putar seperti bujur sangkar yang melingkar
Dan saling bergantian sesuai, jumlah max pada slide yang kita atur nilai jumlahnya, jadi buat anda
Dan sobat yang hendak mencobanya, silahkan simak tutorial pemasanganya berikut di bawah ini

Demo Modifikasi Popular Posts Effects 3D klik demo di bawah ini :

DEMO

Sebelum artkel Modifikasi Popular Posts Effects 3D, saya bagikan sebelumnya saya sudah posting

Trik Membuat Popular Posts Effects Spin, tapi apabila ingin mencoba memasang tampilan widget Popular posts dengan tampilan yang berbeda, silahkan lanjutkan cara memasang widget artikel ini
Sebelumnya anda harus memasang widget defaul popular posts terlebih dulu untuk melakukan edite
Pada artikel ini, namun jika di blog anda belum terpasang widget nya, langsung ke tahap dibawah ini

01.Cara Memasangnya :

Pertama masuk accaount blog anda, dan sign in kemudian, pilih template lalu pilih
Edite temlate, selanjutnya. Cari koode : <b:section class='sidebar' tekan Ctrl + F
Untuk memudahkan pencarian kode, contoh lengkap kodenya 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'><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'
expr:title='data:post.title'><data:post.title/></a>
<b:else/>

<div class='item-title'><a expr:href='data:post.href'
expr:title='data:post.title'><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'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'
expr:title='data:post.title'>
<img alt='thumbnails' expr:height='data:thumbnailSize'
expr:src='data:post.thumbnail' expr:width='data:thumbnailSize' expr:title='data:post.title'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'
expr:title='data:post.title'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>

<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'
expr:title='data:post.title'>
<img alt='thumbnails' expr:height='data:thumbnailSize'
expr:src='data:post.thumbnail' expr:width='data:thumbnailSize' expr:title='data:post.title'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'
expr:title='data:post.title'><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>

02.Cara Memasang kode js :

Selanjutnya masih di edit html, Cari kode </body> gunakan Ctrl + f kemudian copy
Kode dibawah ini kemudian pastekan script di bawah ini tepat diatas kode </body>

<style type='text/css'>
.cube { width: 230px; height: 150px;}
a img { border: none; }
#linksCube img { width: 100%; height: 100%; }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
<script src='http://karrysta.googlecode.com/files/jqueryimagecube.js' type='text/javascript'/>
<script charset='utf-8' type='text/javascript'>
$(function () {
$('.popular-posts ul').abupopularcube();
});
</script>
<script src='http://karrysta.googlecode.com/files/popularposts3d.js' type='text/javascript'/>

Keterangan kode diatas :

Pada kode diatas perhatikan yang berwarna Biru, bisa anda ganti ukuran lebar dan tinggi widget
Popular posts ini, dan yang berwarna Merah, itu kode jquery apabila di template blog anda sudah
Ada jquery, script yang berwarna Merah jangan di ikut sertakan, atau ganti jquery pada widget ini
Jika Effect animasi 3D tidak muncul pada blog, silahkan anda edite dan konfigurasikan entri
Populer. Contoh screnshoot nya seperti gambar di bawah ini :

Modifikasi Popular Posts Effects 3D

Setelah semuanya terpasang dengan benar silahkan klik save dan lihat hasilnya
Selamat mencoba semoga artikel ini bisa bermanfaat buat sobat blogging semua