Assalamualaikum wr. wb. lama ga buat Postingan tentang Tips dan Trick Blogger. karena memang saya lagi ada kesibukan kerja dalam beberapa Minggu terakhir. dan kali ini karena ada kesempatan saya mau share tentang Membuat Popular Post lebih Menarik dengan Animasi Image 3D Cube.
Caranya sangat Mudah sobat, silahkan ikuti langkah singakat berikut ini, hanya menambahkan ke Gadget Baru saja.
1. Login Ke Blogger
2. Design (Rancangan) --> Page Element (Element Laman)
3. Click “Add Gadget” dan pilih “Popular Posts”(Jika Gadget ini Sudah ada lewati langkah ini)
n/b : Activekan Image thumbnail
4. Setelah sobat mempunyai Gadget Popular Post, Click “Add Gadget” lagi dan pilih "HTML/Javascript”
5. Copykan Kode dibawah ini di bagian Content Gadget HTML/Javascript dan Save.
Pada bagian code .cube { width: 100%; height: 200px;} yang 100% bisa sobat ganti dengan satuan px (misalkan 200px)sesuai ukuran Sidebar Blog sobat.
Caranya sangat Mudah sobat, silahkan ikuti langkah singakat berikut ini, hanya menambahkan ke Gadget Baru saja.
1. Login Ke Blogger
2. Design (Rancangan) --> Page Element (Element Laman)
3. Click “Add Gadget” dan pilih “Popular Posts”(Jika Gadget ini Sudah ada lewati langkah ini)
n/b : Activekan Image thumbnail
4. Setelah sobat mempunyai Gadget Popular Post, Click “Add Gadget” lagi dan pilih "HTML/Javascript”
5. Copykan Kode dibawah ini di bagian Content Gadget HTML/Javascript dan Save.
<style type="text/css">
.cube { width: 100%; height: 200px;}
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>
<script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/jqueryimagecube.js"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
$('.popular-posts ul').abupopularcube();
});
</script>
<script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/popularcube.js"></script>
.cube { width: 100%; height: 200px;}
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>
<script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/jqueryimagecube.js"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
$('.popular-posts ul').abupopularcube();
});
</script>
<script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/popularcube.js"></script>
Pada bagian code .cube { width: 100%; height: 200px;} yang 100% bisa sobat ganti dengan satuan px (misalkan 200px)sesuai ukuran Sidebar Blog sobat.
0 komentar:
Posting Komentar