Sebetulnya postingan ini merupakan request trik dari sobat bloger. Namun ane baru bisa sharing sekarang setelah sebulan ane tedampar di kampung yang bisa dibilang pedalamanlah, dengan jaringan telephone yang lemah ane terpaksa ga bisa berinteraksi dengan internet. Setelah waktu berlalu, hari ini ane sempatkan untuk mempostkan triknya. (Ma'af ni sob sebelunya.....)
Nah sekarang ane coba untuk mempostingin triknya. Sesuai dengan gambar yang ada di samping atau kalau sobat mau lihat demonya, sobat bisa klik home pada blog ini. Tentunya postslider ini juga salah satu trik agar blog menjadi tampil menarik dan userfriendly. Gimana, jika sobat-sobat yang lain mau, silahkan ikutin step-stepnya.Dalam hal pemasangan gadged ini sobat bisa etakn dengan dua cara, yang pertama dengan menambah gadged dan yang kedua diletakan sesuai dengan keinginan sobat melalui edit html.
Ini scriptnya css :
<style type='text/css'>
#rp_plus_img{height:212px;overflow:hidden;border:solid 0px #585858;padding:6px 10px 14px 5px;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:60px;padding:5px;list-style:none;}
#rp_plus_img a{color:blue; text-decoration: none; font-size:13px; font-weight:bold;} /*link*/
#rp_plus_img a:hover{color:#f61c3b; text-decoration: none; font-size:13px; font-weight:bold;} /*ketika mouse didekatkan */
#rp_plus_img .news-title{color:blue; display:block;font-weight:bold !important;margin-bottom:4px;font-size:12px;} /*judul postingan*/
#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:black;text-align:justify;} /*isi postingan*/
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 0px #585858;width:55px;height:55px;} /*image */
.slidespost {
padding:0px;
border:0px;
margin:0px;
height:260px;
width:400px;
float:left;
}
</style>
Ini script htmlnya :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript' />
<script type='text/javascript' language='javascript' src='http://syamsjs.googlecode.com/files/syams_slide_post_script.js' />
<div class='slidespost'>
<script type='text/javascript'>
var speed = 500; /*kecepatan slide/gerak */
var pause = 2500; /*lama waktu berhenti slide */
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id='rp_plus_img'>
<script style='text/javascript'>
var numposts = 15; /*jumlah post yang ingin di tampilkan */
var numchars = 200; /*jumlah karakter post yang ingin di tampilkan */
</script>
<script src='http://syamsmobillex.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt'></script> <!-- ganti syamsmobillex.blogspot.com dengan url/link blog spobat -->
</ul>
</div>
Cara pemasanganya :
- Login ke akun blog sobat,
- Pilih Rancangan --> Edit Html,
- Cari kode </head>,
- Masukan script css di atas kode no.3,
- Nah tinggal pemasangan script html, seperti saya katakan di atas ada dua pemasangan script ini. Pada tambah gadged dan pada Edit Html,
- Jika sobat akan memasang pada Add Gadged sobat pindah pada Edit Laman,
- Setelah itu klik Add Gadged dan pilih Html/Javascript lalu pastekan script html dan simpan.
- Jika sobat ingin meletakanya di Edit Html silahkan sobat sesuaikan di mana letaknya asalkan di dalam tag <body> dan pastekan script html dan simpan.
Gimana, Semoga bermanfa'at bagi sobat......
Judul :
Membuat Postslider Dengan Gambar (Thumbnails)
Rating : 4.5
Ditulis Oleh : sy@ms
Rating : 4.5
Ditulis Oleh : sy@ms
Jika mengutip harap berikan link yang menuju ke artikel Membuat Postslider Dengan Gambar (Thumbnails) ini. Sesama blogger mari saling menghargai. Terima kasih atas perhatiannya
Copyright © 2011.
Keren postslidernya...thanks dah sharing, gan!
BalasHapus11111 111111 eee eeeeee e1 22222222
HapusSama sama sob. Semoga bermanfaat
BalasHapusTrims ya dah berkunjung di blog ane.
Salam kenal dari ku sob.
dcfsaefa dsfes dfaesfa dscadsfva asfasfas sfasfas
Hapusfasfsafafasf egfaefA Fdfgsd rgregweaw
BalasHapus22 222 2 2 2 22 22 22 2222 222222 2
BalasHapus33 333 3 3 3 333 3333 3333 3333 3333 3 33333 3
Hapus