Skip to main content

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

Comments

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

    sukses selalu kawan

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

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

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

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

    ReplyDelete
  6. makasih toturialnya fren. sukses selalu ya.:D

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

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

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

    ReplyDelete
  10. keren nih nih sob RCnya aq dah lihat beberapa blogger juga dah pasang

    Menampilkan Pesan Dibawah Judul Postingan

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

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

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

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

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

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

    ReplyDelete
  17. ane mau coba jg sob ya. keren infonya..

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

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

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

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

    ReplyDelete
  22. 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
  23. @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

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

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

    ReplyDelete

Post a Comment

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

Popular Posts

Cara Membuat Random Posting Title Berjalan (Marquee)

Setelah kemaren sempat memposting " Cara menampilkan Top Comment Berjalan (Marquee) " , nah, kali ini mencoba memaparkan "Cara Membuat Random Posting Title Berjalan (Marquee)" . Postingan kali ini juga untuk menjawab pertanyaan dari sobat blogger pada waktu yang lalu sempat bertanya kalau cara membuat Recent Postingnya bagaimana? Thanx ya buat sobat Ngeposting ni yee + sobat yang satu lagi saya lupa (karena beliau bertanya via shoutbox dan sekarang shoutbox sudah saya ganti, jd maaf kl saya lupa yaaa...) karena pertanyaan anda memberikan saya ide untuk membuat postingan yang baru, abisnya saya sempat bingung mau membuat postingan apalagi yaaa....heheheheheeee.... Sebenarnya mau dikasi judul Recent Posting Title .....namun rasanya kurang pas kl mau bilang tentang tool ini Recent Posting Title , karena tool ini menghadirkan judul-judul posting blog kita secara acak bukan menampilkan judul postingan terbaru pada blog kita. Tapi ga apa-apa dech, ada baiknya juga si

Cara Pasang Kotak Komentar/Comment Form Facebook di Blogger

Cara Membuat Kotak Komentar/Comment Form Facebook di Blogger | Mungkin Tips ini udah bukan hal baru lagi, namun jika niat ingin berbagi, tidak ada kata terlambat. Berikut ini ingin mensharingkan cara membuat Kotak Komentar/Comment Form Facebook yang akan di tampilkan di Blogger. Jadi Kotak komentar yang sudah secara default ada di blogger dirubah atau ditambah dengan aplikasi kotak komentar/Comment form yang disediakan oleh Facebook. Fungsi kotak komentar Facebook ini adalah sebagai pengganti atau alternatif lain bagi pengunjung blog kita untuk memberikan komentar di blog kita, karena memungkinkan untuk pengunjung blog selain pengguna Blogger/Wordpress/Typepad/Open id untuk memberikan ide/komentar/saran/kesan untuk blog kita. Dikarenakan pengguna Facebook semakin meningkat jumlahnya, jadi bisa dipastikan hampir semua pengunjung blog memiliki akun Facebook. Untuk melihat demo Kotak komentar Facebook, silakan lihat Disini Berikut ini cara membuat/memasang kotak komentar Facebook di

Thumbnail Related Posting with Marquee (Berjalan)

Setelah kemaren memposting tentang cara membuat Related Posting menggunakan Daftar list berdasarkan Label dan Related Posting menggunakan Gambar(Thumbnail) . Nah kali ini sedikit berkaitan dengan Related Posting menggunakan Gambar(Thumbnail) . Nah, untuk menampilkan Related Posting menggunakan Gambar anda bisa lihat disini cara membuatnya. Namun ada sedikit kekurangan dari Related posting ini, yaitu anda tidak bisa menampilkan Related postingnya dalam jumlah yang banyak , jumlah yang ditampilkan sebatas ukuran lebar halaman posting saja, seperti halnya blog ini, hanya bisa menampilkan 4 judul serta gambar dari related posting tersebut. Lalu bagaimana cara menampilkan related posting tersebut dalam jumlah yang banyak...??? Oke, yang ingin di sharingkan kali ini mencoba mengangkat tentang menggunakan metode Marquee pada thumbnail related posting. Untuk contoh anda bisa lihat kebawah posting ini. Setelah mengutak-atik sedikit, sampai sempat sedikit error, hingga akhirnya saya mem

Cara Menampilkan Top Comment Berjalan (Marquee)

Wahhh...lama juga ga posting nich...akhirnya kangen juga sama blog setelah beberapa hari tidak menjamahnya karena ada sedikit kesibukan diluar. Oke langsung saja ke postingan , sebenarnya postingan kali ini adalah untuk menjawab pertanyaan sobat blogger, saya lupa namanya karena beliau bertanya via shoutbox blog ini yang lama, dan pada akhirnya shoutbox saya di banned, dan sekarang berganti dg Cbox, jadi maaf ya jika saya lupa, maklum memori sudah lemot. kalau tidak salah beliau bertanya bagaimana cara membuat Top Comment berjalan seperti di blog ini ? dan saya menjawab Coming soon sobat( Kayak film baru aja ) Oke, setelah kemaren sempat memposting cara menampilkan Top Comment di Blog , nah... sekarang mencoba membeberkan cara alternatif kedua untuk menampilkan Top Comment di blog dengan tampilan yang sedikit berbeda. Cara alternatif yang kedua ini menggunakan metode tulisan berjalan (Marquee) . makanya postingan kali ini saya beri nama Cara Menampilkan Top Comment Berjalan (Ma

Cara Membuat Halaman Posting Berpindah dari Kiri ke Kanan

Cara Membuat Halaman Posting Berpindah dari Kiri ke Kanan | Sempat bingung menentukan judul artikel yang satu ini, tapi yang jelas gambarannya seperti dibawah ini, Pernah lihat halaman blognya Kang Rohman (kolom-tutorial.blogspot.com), jika diperhatikan, ketika pada halaman beranda/Home page, bagian artikel/posting terletak di sebelah kiri dan sidebar berada di sebelah kanan, dan ketika masuk ke halaman postingnya, halaman artikel akan berada di sebelah kanan dan sidebar di sebelah kiri. Nah, untuk membuat halaman tersebut agar bisa berpindah-pindah ternyata cukup simpel. ternyata yang dibutuhkan hanya sedikit penambahan pada struktur CSS nya saja. berikut cara-caranya : Login ke Blogger Langsung menuju ke Design/Rancangan Klik Edit HTML centang tulisan "Expand Widget Template" Cari kode berikut : ]]></b:skin> Letakkan kode berikut ini setelah kode diatas  <style type='text/css'> <b:if cond='data:blog.pageType == &quot;item&quot;&

Blogger Lebih Asik dengan New Posting Editor

Nah...saat sekarang ini, para Blogging mania diberi kemudahan lagi oleh Blogger. Sebuah Posting Editor Baru telah di luncurkan. disini kita diberi kemudahan lagi dalam memposting entry. Adapun fitur-fitur yang telah diperbaharui sebagai berikut : New Toolbar Full safary 3 support Improved Handling Image Improved Raw HTML Geotagging Vertical Resizing Easy link editing in Compose mode Placeholder image for tags Preview dialog  Untuk lebih jelasnya dapat anda lihat Disini Nah...untuk dapat menggunakan New Posting Editor ini ( bagi anda yang masih menggunakan Posting editor lama ), berikut ini cara mengaktifkan New Posting Editor nya : Login dulu ke Blogger Masuk ke Setting/Pengaturan Pada halaman dasar, scroll hingga ke bawah, cari Setting Global   Pilih Editor yang diperbaharui Simpan Settingan anda Selesai Dech... Selamat menggunakan Posting Editor yang baru Sukses untuk semua Blogger...!!!