Nah, kemarin kan ane dah pasang Recent Post Slide Keren Sekarang ane mau postingin Recent Post Slide dengan Thumbnails nih. Nah untuk lihat demonya, sobat bisa lihat pada sidebar kanan, atau lihat pada gambar disamping. Ni akan menampilkan semua postingan secara slide satu persatu disertai dengan tumbnails atau gambar kecil.
Gimana....
Cara pemasanganya masih sama dengan postingn Recent Post Slide Keren hanya scriptnya saja yang membedakan.
Untuk lebih lanjutnya ikuti saja step-step pemasanganya.
Ni scriptnya :
<script src='http://syamsjs.googlecode.com/files/recentpostslide.js' type='text/javascript'/>
<style media='screen' type='text/css'>
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
</style>
<script language='javascript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlCDwStWqF3lotzCX4pUM7-KBmiQPkFNtWQQn1-8AcJtE8ioGonEJWqoQDkxWQJieil6shNpRfLRselns4ZyYEJ-UCEN-PtT6Liq0jGYNclsowHIwfnrDecSCNvyvKjUDYpzeTXN5CQlRo/s128/othersite.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirSIFNRi_yc36o_HF_x19PXRbu8D3MnjYHeUwSd8BcvkYOogCz-OWRnf57G2SN7UJkgUtkyjiA0yV7gQB_Yjb5is4LET3o-Kxv9e271wghGyNVBmsEWKPSJjszp-JN8fF25QMArNznm4OH/s128/Terminal-syams.gif";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtyy525p0Bcw5BB7T-2LuCNEjGf47C4uUt6WYkz-XkxoUDZZD98ByoP27PYs_SqSJ3U8IqWRq1dub9Wvy3jfJFcndCgZinHx1l0aRv6NQfU8Ety8oXhzkLOO46_N_3uqBmKURtW9mxZ0Z6/s128/othersite60.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqKC-pMyWaplCVLwcJbxAUJZmp89lGdwz_njegL70fETYPD61-At_iHZkM9COJprbben9q2BeRbi76GkO7uZ5QJc2kscF7ttdqg8zmv7hW0DL5I8CcaP7Uxk7YBsLu33eAvlADeTJsccO6/s128/ayoayo.gif";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQlMr_cxQEkRdgub4wHCmYpVwELGUiyqo2NxXrMCa9sIIvD03ouz1Cu7-Ek9vRBA7bfwLe8uojES2rCAlS3J9bLRm9W1x-KGgNesoeIGO7vyI-ejs6ZCeK5-RVzM5Mm7_ue4HyRRYCaC0f/s128/imgload.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://url-blog-soabat.com/";
limitspy=4
intervalspy=4000
</script>
<div id='spylist'>
<script src='http://syamsjs.googlecode.com/files/recentpostslide2.js' type='text/javascript'/>
</div>
Untuk Pemasanganya, Terserah sobat. Mau di pasang pada Add Gadget atau Edit Html.
Ni stepnya untuk Add Gadget :
- Login ke akun blog sobat.
- Pilih Rancangan, Add Gadget.
- Pilih Html/JavaScript.
- Copy Pastekan Script diatas kedalam add gadged
- Klik simpan dan simpan template.
Untuk stepn pemasangan pada Edit html :
- login ke akun blog sobat.
- Pilih Rancangan, edit Html.
- Copy Pastekan Kedalam Html Sobat, dengan ketentuhan harus di dalam tag <body>.
- Simpan template sobat dan lihat blog
Gimana......
Sobat juga bisa mengedit atau mengubah sesuai dengan keinginan sobat. Ok teruslah berkreasi dan tetap bersemangat.
Catatan : Silahkan sobat ganti url home page-nya pada script tersebut dengan url home page sobat.
home_page = "http://url-blog-soabat.com/";
Judul :
Membuat Recent Post Slide Dengan 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 Recent Post Slide Dengan Thumbnails ini. Sesama blogger mari saling menghargai. Terima kasih atas perhatiannya
Copyright © 2011.
makasih kak infonya
BalasHapussalam kenal
Salam kenal juga sob, trims dah berkunjung ke blog ane, semoga artikelnya bermanfa'at...
BalasHapusKok tidak bekerja di blog saya??
BalasHapusMohon bantuannya....
arief-ardiansyah.blogspot.com
Ok, Sebelumnya salam kenal sob n mohon ma'f ni kalau ane baru bales.
BalasHapusCoba sobat cek lagi script-nya karna disitu ada yang harus dirubah, yaitu pada javascriptnya:
home_page = "http://url-blog-soabat.com/";
ganti dengan url blog sobat. jangan dihilangkan garis miring (/) setelah .com
Oke sob, silakan dicoba kembali. Semoga bermanfa't sob.
tetap tidak bekerja.............
BalasHapusKalau boleh tau yang ga mau itu apanya sob.....
BalasHapussoalnya sudah ane coba dengan url blog sobat berhasil kok.
ini demonya :
http://skynetprogram.blogspot.com
kalau permasalahanya sobat seperti ini :
"untuk listnya sudah muncul namun dia tidak mau slide"
nah untuk permasalahan yang itu mungkin script jquery sobat kurang tepat peletakanya untuk mengoptimalkan letakan script jquery sebelum tag </head>
kalu sobat belum punya script jquery silahkan sobat tambahkan script berikut sebelum tag </head>
ini scriptnya :
"<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript' ></script>"
[tanpa tanda kutip]
Ok semoga bermanfa't.
Ane bingung sob, tetep gabisa..
BalasHapusApa di template artisteer emang ga bisa ya??
Maaf merepotkan..
Kalau masalah template tidak jadi masalah sob, karna template yang saya demokan itu juga template dari artisteer.
BalasHapusEmang sobat sudah menaruh scriptnya di HTML templatenya atau di AddGadgetnya..?
Coba sobat cek kalu dipasang melalui gadget dan html. Mungkin salah satu peletakan itu berhasil.
di blog ane gabisa sob (arief-ardiansyah.blogspot.com)
BalasHapusdicoba di blog ane yang lain (nyobanyobadoang.blogspot.com) malah gepeng.... gimana dong??
Ma'f sebelumnya sob, maksudnya gepeng tu apa ya sob, soalnya setelah ane cek di blog sobat yang "nyobanyobadoang.blogspot.com" sudah berhasil, jika sobat ingin menyesuaikan lebar dari listnya sobat bisa edit css nya yaitu lebar dari
BalasHapus"#spylist ul" sama yang "#spylist li"
Ok sob, semoga berhasil.
Mau tanya sedikit, ini bisa ditaruh dibawah Komentar ga sob?
BalasHapusSebelumnya salam kenal dari ane sob,
BalasHapusoya, untuk peletakan script bisa di mana aja, mulai dari add gadget, samai ke edit html.
Kalau sobat ingin menaruh script tersebut di bawah komentar silahkan sobat sesuaikan setelah tag yang di akai pada komentar. Biasanya tag tersebut adalah
<div class="comments" id="comments">
-----disini adalah kode untuk komentar
</div>
--- taruh script recent post disini
Oke sob, semoga bermanfaat.
kalo mau megubah menjadi horizontal gmn?
BalasHapusSalam kenal sob, oya sebelumnya ane minta ma'f ni sob. untuk mengubah menjadi harizotal ane belum menemukan cara maupun source code yang di-share.
BalasHapusgimana cara mengatur kecepatan slide, teks juga gambarnya
BalasHapusSebelumnya salam kenal sob, tris dah mampir ke blog ane.
BalasHapusMa'f nih sob, klu commentnya baru ane bales, baru ol soalnya.
Untuk menentukan cepat dan lambatnya slide sobat bisa rubah script yang ada di javascriptnya,
sintaknya yaitu :
intervalspy = 4000
Silahkan sobat bisa rubah angka 4000 dengan angka kecepata sobat, klu ga salah 4000 sama dengan kurang lebih 4 detik.
Ok selamt ,mencoba....