Click Here

Labels

Slide Recent Posting

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>

  • 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
Harga Notebook Acer Aspire S3 Ultrabook

Sudah 31 Orang Berkomentar, Silakan anda yang selanjutnya :

Komentar dari pakde sulas :

sepuluh jempol buat Serba Blog karena selalu menampilkan artikel yang serba menarik dan dinanti nanti artikelnya.

sukses selalu kawan

Komentar dari zoel :

wah serba seru memang serba keren infonya..hehe... mantap sob,,

Komentar dari harto :

boleh juga niiih ilmunya sangat membantu, boleh izin save untuk di pelajari dulu ok. trims yaa sudah mo berbagi, sukses selalu n tetap semangat

Komentar dari Arief Masqulin :

makasih infonya sob, dah mau berbagi... :)

Komentar dari Kristanto Wds :

Kunjungan pertama ini, salam kenal sebelumnya....
keren bro postinganya....

Komentar dari gambutku :

makasih toturialnya fren. sukses selalu ya.:D

Komentar dari secangkir teh dan sekerat roti :

gambarnya itu sih yang saya kurang suka :)

Komentar dari berita untuk negri :

keren banget mau dicoba tapi udah punya related post,,makasih infonya sobat,,

Komentar dari Ngeposting ni yee :

tHanks tUtoriAlnya sOb.,.,
lAngsUng di sedOt scriptnya sOb..,

Komentar dari darahbiroe :

link anda sudah saya pajang di blog q, mohon di cek ke blog saya

n mohon pasang link saya dengan nama "tips n trik blog facebook"

makasihh

Komentar dari Rizky2009 :

keren nih nih sob RCnya aq dah lihat beberapa blogger juga dah pasang

Menampilkan Pesan Dibawah Judul Postingan

Komentar dari Ngeposting ni yee :

bLackwAlkiNg Malam sObat.,.

Komentar dari Rizky2009 :

jalan2 malam berbagi info

Parse Code HTML Ala Mbah Google

Komentar dari pakde sulas :

berkunjung lagi kawan

pakde 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..

Komentar dari febriyanto :

lumayan buat dicoba2 ni sob..... :D thx,.

Komentar dari beyondtech :

TOP MARKOTOP INI BLOG, Bisa dijadikan sumber tulisan nich "COPOT". Tp Om kok mbah google kasih nilainya minim sih ????.

Saya baru tahu blog ini saja link dari blognya O-OM.

Tapi saya mengacukkan 4Jempol saya pada tulisannya.

Komentar dari fauzan upz :

info menarik,, jadinya blog tambah asik dong yah.. trimakasih infonya ya..

Komentar dari G E O R G E O U Z :

Pakde 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...

Beyondtech : 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

Komentar dari ardianzzz :

nice tutorial.. jarang2 ada yang ngebahas jQuery buat blogger loh

Komentar dari ayuadine :

ane mau coba jg sob ya. keren infonya..

Komentar dari Fauzan elhafiz :

makasih tutorialnya sob...bermanfaat banget buat new bie spt saya...

Komentar dari Kian Coi :

boleh juga tuh...!!!

Komentar dari ALMANDURY :

bos ... bagi dong cara bikin repostnya kayak punya bos gimana.. please bos yah..
baisamusthafa.blogspot.com

Komentar dari ALMANDURY :

sorry bos itu maksudnya related post kaya punya bos... thank ya..

Komentar dari Kurnia Septa :

makasih :)

Komentar dari abiabi :

ga bisa ditampilkan om..
apa kode scripnya ada yg salah tuh..

Komentar dari MUXLIMO :

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..

Komentar dari G E O R G E O U Z :

@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

@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

Komentar dari GEORGEOUZ :

@All : script nya sudah di update, skrg sudah bs jalan...thanx ya udh mampir...

Komentar dari PNPM-MP Team Jatim-8 :

Mas, kok ga jalan ya punya saya?

Komentar dari GEORGEOUZ :

ga jalan..???
udh diterapkan dg benar mas cara2nya..???

Silakan Tulis Komentar Anda di Bawah ini :

Silahkan tulis komentar anda dibawah ini, namun diharapkan jangan melakukan spamming,hindari komentar yang mengandung unsur SARA, berkata kasar serta hal2 negatif lainnya, Terima Kasih, Semoga bermanfaat