Modifikasi Popular Posts Effects 3D

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 == &quot;false&quot;'>
              <b:if cond='data:showSnippets == &quot;false&quot;'>
                <!-- (1) No snippet/thumbnail -->
                <a expr:href='data:post.href'
expr:title='data:post.title'><data:post.title/></a>
              <b:else/>
                <!-- (2) Show only snippets -->
                <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 == &quot;false&quot;'>
                <!-- (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'
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/>
                <!-- (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'
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 () {
    $(&#39;.popular-posts ul&#39;).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