.JPG)
Related Post tampilan baru ya begitulah saya menamai widged ini karena sebelumnya mungkin sudah ada di blog lain tetapi belum pernah saya lihat related post seperti ini sebuah related post yang menggabungkan animasi tooltip dengan kolom navigasinya yang cuman menampilkan thumbnail
ok gan daripada penasaran lansung aja ke proses pembuatannya....
Masuk blog agan
kemudian pilih menu tata letak/add gadged
setelah itu copas semua kode dibawah ini pada kolom yang telah tersedia...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style type="text/css" scoped="scoped">
#mini-gallery {
width:340px; /* Tentukan lebar yang tepat sesuka hati atau buang saja deklarasi ini */
margin:0 auto;
font:normal normal 11px Verdana,Arial,Sans-Serif;
color:#666;
padding:8px;
background-color:#222;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow:0 1px 3px rgba(0,0,0,0.4);
box-shadow:0 1px 3px rgba(0,0,0,0.4);
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
#mini-gallery h2 {
font:normal normal 14px Impact,"Arial Narrow",Arial,Sans-Serif;
color:#999;
text-shadow:0 1px 0 black;
text-transform:uppercase;
margin:2px 2px 2px;
padding:7px 14px;
background-color:#3c3c3c;
}
#mini-gallery .rp-item {
float:left;
display:inline;
position:relative;
margin:2px;
padding:0 0;
background:#fff url('http://reader-download.googlecode.com/svn/trunk/images/loading-white.gif') no-repeat 50% 50%;
width:72px;
height:72px;
}
#mini-gallery .rp-item img {
width:72px;
height:72px;
border:none !important;
margin:0 0 !important;
padding:0 0 !important;
background:transparent !important;
display:none;
}
#mini-gallery .rp-item .rp-child {
position:absolute;
top:95%;
left:95%;
z-index:1000;
width:200px;
background-color:white;
border-top:4px solid #3399ff;
-webkit-box-shadow:0 0 3px rgba(0,0,0,0.7);
-moz-box-shadow:0 0 3px rgba(0,0,0,0.7);
box-shadow:0 0 3px rgba(0,0,0,0.7);
padding:10px 15px;
overflow:hidden;
word-wrap:break-word;
display:none;
}
#mini-gallery .rp-item .rp-child h4 {
font-size:12px;
margin:0 0 5px;
color:#2473A8;
}
#mini-gallery .rp-item:hover .hidden {display:block}
</style>
<script type="text/javascript">
var rpTitle = "Artikel Terbaru", // Tentukan judul widget
numposts = 8, // Tentukan jumlah thumbnail/posting
numchar = 300, // Tentukan jumlah karakter pada deskripsi tooltip
rcFadeSpeed = 600, // Tentukan kecepatan efek .fadeIn() saat tooltip tampil
pBlank = "http://images.cooltext.com/3096753.gif", // Thumbnail cadangan jika posting yang tampil tidak memiliki gambar
blogURL = "http://informasibloger.blogspot.com";// Alamat blogmu
</script>
<script src="http://reader-download.googlecode.com/svn/trunk/rp-mini-gallery.js" type="text/javascript"></script>
Catatan : untuk settingannya silahkan ubah kode berwarna Hijau sesuai keinginan anda
kodetersebut menunjukan lebar kolom widgednya
Simak beberapa kode yang saya tandai dengan warna biru dibawah ini
Silahkan disesuaikan kode tersebuat dengan kebutuhan anda
Contohnya : Numpost adalah jumlah post yang akan ditampilaknpBlank adalah URL gambar pengganti ketika postingan tidak memiliki gambar
blog URL silahkan ganti http://informasibloger.blogspot.com dengan URL blog anda
Saya rasa sudah cukup untuk related post navigasinya gan jika agan berminat silahkan dicoba saja..
Selamat mencoba semoga related postnya bisa bermanfaat....
read more : http://www.dte.web.id/
Penulis : Imron fhatoni Lokasi : NTB, SUMBAWA
Artikel Related Post Thumbnail Tampilan Baru Dengan Navigasi Kolom Dan Efek Tooltip, ditulis oleh Imron fhatoni. Semoga artikel ini dapat menambah wawasan Kita. 
Silahkan tinggalkan jejak pada form Komentar untuk mempermudah Imron fhatoni berkunjung kembali ke blog sobat. 
0 komentar:
Posting Komentar