Sekarang ini semakin banyak alternatif pilihan untuk membuat blog agar terlihat unik, berbagai macam jenis tampilan pada widget blogger. Nah, pada kesempatan kali inimemaparkan tentang Recent Posting menggunakan Slide.
Untuk tool yang satu ini mungkin agak sedikit aneh, karena saya dapatkan dari hasil nyontek dikit di pagesource halaman blog lain yang menggunakan tool ini, karena sangat sulit sekali menemukan tutorial untuk membuat tool yang satu ini.
Namun jangan khawatir, walaupun hasil dari nyontek ga jelas, namun hasilnya ga ada yang kurang tuh, tetap perfect. Untuk Demonya bisa anda lihat disini atau disini
Oke, bagi yang berminat untuk menggunakannya, silakan ikuti langkah-langkahnya dibawah ini :
1. Pertama masuk ke Blogger => Tata Letak/Layout
2. Klik Add a Gadget, pilih HTML/Javascript
3. Copy Paste code dibawah ini kedalamnya :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style media="screen" type="text/css">
<!--
#spylist {
overflow:show;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:280px;
overflow:show;
list-style-type: none;
padding: 5px 5px;
margin:0px 0px;
}
#spylist li {
width:280px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url() repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:10px;
height:8px;
overflow:show;
margin:3px 3px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:show;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:8px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:show;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:3px 3px;
margin:8px 8px;
}
-->
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.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 = 20;
home_page = "http://nama-blog-anda.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://serba-blog.googlecode.com/files/rpts-serbablog.js" type="text/javascript"></script>
</div>
<style media="screen" type="text/css">
<!--
#spylist {
overflow:show;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:280px;
overflow:show;
list-style-type: none;
padding: 5px 5px;
margin:0px 0px;
}
#spylist li {
width:280px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url() repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:10px;
height:8px;
overflow:show;
margin:3px 3px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:show;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:8px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:show;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:3px 3px;
margin:8px 8px;
}
-->
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.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 = 20;
home_page = "http://nama-blog-anda.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://serba-blog.googlecode.com/files/rpts-serbablog.js" type="text/javascript"></script>
</div>
- Ganti tulisan berwarna merah dengan URL blog anda (ingat : harus pakai tanda " / " diakhir URL)
- Angka berwarna biru adalah jumlah postingan yang akan ditampilkan, silahkan ganti sesuai selera anda
- Untuk merubah warna serta ukuran, silakan edit dibagian CSSnya dibagian atas.
4. Simpan dan lihat hasilnya.
Sekian, selamat berkreasi
Semoga bermanfaat
sepuluh jempol buat Serba Blog karena selalu menampilkan artikel yang serba menarik dan dinanti nanti artikelnya.
ReplyDeletesukses selalu kawan
wah serba seru memang serba keren infonya..hehe... mantap sob,,
ReplyDeleteboleh juga niiih ilmunya sangat membantu, boleh izin save untuk di pelajari dulu ok. trims yaa sudah mo berbagi, sukses selalu n tetap semangat
ReplyDeletemakasih infonya sob, dah mau berbagi... :)
ReplyDeleteKunjungan pertama ini, salam kenal sebelumnya....
ReplyDeletekeren bro postinganya....
makasih toturialnya fren. sukses selalu ya.:D
ReplyDeletegambarnya itu sih yang saya kurang suka :)
ReplyDeletekeren banget mau dicoba tapi udah punya related post,,makasih infonya sobat,,
ReplyDeletetHanks tUtoriAlnya sOb.,.,
ReplyDeletelAngsUng di sedOt scriptnya sOb..,
link anda sudah saya pajang di blog q, mohon di cek ke blog saya
ReplyDeleten mohon pasang link saya dengan nama "tips n trik blog facebook"
makasihh
keren nih nih sob RCnya aq dah lihat beberapa blogger juga dah pasang
ReplyDeleteMenampilkan Pesan Dibawah Judul Postingan
bLackwAlkiNg Malam sObat.,.
ReplyDeletejalan2 malam berbagi info
ReplyDeleteParse Code HTML Ala Mbah Google
berkunjung lagi kawan
ReplyDeletepakde cuman kasih info saja, ilmu ini sudah pakde praktekkan, cuman hasilya sangat dipengaruhi oleh koneksi internet ya? punya pakde hasilnya akan tampak bagus kalau pas koneksi internetnya bagus, tapi jika koneksinya pas bikin pening kepala hasilnya juga bikin senewen he he he..
lumayan buat dicoba2 ni sob..... :D thx,.
ReplyDeleteTOP MARKOTOP INI BLOG, Bisa dijadikan sumber tulisan nich "COPOT". Tp Om kok mbah google kasih nilainya minim sih ????.
ReplyDeleteSaya baru tahu blog ini saja link dari blognya O-OM.
Tapi saya mengacukkan 4Jempol saya pada tulisannya.
info menarik,, jadinya blog tambah asik dong yah.. trimakasih infonya ya..
ReplyDeletePakde Sulas : Thanx infonya pakde...emang sih kl pake JS sering bkin berat loadingnya...namanya jg Javascript...keindahan yg beresiko...tips aja...kl mau loadingnya bs agak cepet...jumlah posting yg mo ditampilkan dikurangi...
ReplyDeleteBeyondtech : Kurang tau jg tuh sob, rahasia PR google msh blm banyak yg tau...maklumlah blog ini jg masih baru, umurnya aja br 3 bulan...thanx ya jempolnya...
All : thanx smua atas komennya...tutorial emang jd sbuah pilihan...silakan dipilih(koq jd kayak jualan)...hehehee...thanx all
nice tutorial.. jarang2 ada yang ngebahas jQuery buat blogger loh
ReplyDeleteane mau coba jg sob ya. keren infonya..
ReplyDeletemakasih tutorialnya sob...bermanfaat banget buat new bie spt saya...
ReplyDeleteboleh juga tuh...!!!
ReplyDeletebos ... bagi dong cara bikin repostnya kayak punya bos gimana.. please bos yah..
ReplyDeletebaisamusthafa.blogspot.com
sorry bos itu maksudnya related post kaya punya bos... thank ya..
ReplyDeletemakasih :)
ReplyDeletega bisa ditampilkan om..
ReplyDeleteapa kode scripnya ada yg salah tuh..
Gan, saya udah coba tapi gak muncul apa pun. saya pake template neonsential-nya Otak Works, apa musti pake template yang di demo itu supaya bisa jalan slidenya?? mohon petunjuknya, Gan..
ReplyDelete@MUXLIMO : Sorry bgt nih br bs bls, ga ada yg salah dg templatenya, itu cm ada source link JS nya yg error, utk sementara saya blm sempat ngutak-atik JS nya, kl mau segera, silakan searching di mbah google dg keyword "recentpostthumbspy-min.js",ntar upload aja ke hostingnya/ kesini aja http://yourjavascript.com/ , tp kl mo nungguin diupload, diusahain deh segera.skali lg, maaf banget nih, makasih udh berkunjung ke blog ini
ReplyDelete@ALMANDURY : Related Postnya yg kayak diatas udah diposting disini http://serba-seru.blogspot.com/2010/02/thumbnail-related-posting-with-marquee.html , silakan di cek,makasih atas kunjungannya
@All : script nya sudah di update, skrg sudah bs jalan...thanx ya udh mampir...
ReplyDeleteMas, kok ga jalan ya punya saya?
ReplyDeletega jalan..???
ReplyDeleteudh diterapkan dg benar mas cara2nya..???