mas template

Membuat Recent Post Thumbnail + Spy di Blog

recent post maskolisKali ini saya akan memberikan tutorial tentang gimana caranya membuat recent post yang ada gambarnya, nggak itu aja gambarnya bisa jalan lagi, hebat kan? Karena dengar-dengar fungsi atau keberadaan recent post akan sangat berguna (terasa dibutuhkan) ketika pengunjung berada pada halaman posting. Kemungkinan besar mereka ingin mencari link posting-posting terbaru yang masih tergolong fresh.

Recent post kali ini ada sedikit berbeda dengan recent post yang  saya postingkan kemarin  yang hanya menyediakan fasilitas thumbnailsnya saja, teman teman bisa lihat di homepage blog ini. Tapi kalau yang ini agak sedikit berbeda, karena selain memiliki thumbnail (gambar), disertakan juga tampilan tanggal postingan dan jumlah komentar, dan tentu dengan efek spy. Sangat menarik untuk di coba teman-teman. Recent post ini saya dapatkan dari hasil browsing ke tempatnya om Abu Farhan .

Silahkan lihat demo ini bagi yang belum melihatnya, soalnya widgetnya saya tampilkan di home saja. Baik, langsung kita menuju ke langkah-langkah pembuatannya  :
  1. Log in ke Blogger
  2. Kemudian pilih Design --> Page Element
  3. Add gadget -->> HTML/Javascript
  4. Copy paste kode di bawah ini ke gadget sidebar teman-teman.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#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://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/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] = "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 = 10;
home_page = "http://creatingwebsite-maskolis.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

Save-->> Selesai.

Catatan Penting :
  1. Ganti URL ( http://creatingwebsite-maskolis.blogspot.com/ ) dengan URL teman .
  2. Atur lebar dan sesuaikan dengan lebar sidebar teman-teman.
  3. Apabila ingin menyesuaikan lagi dengan background template teman-teman, bisa menggantinya dengan background yang lain.
  4. Sesuaikan juga lebar dan tinggi gambar (thumbnails) nya.
  5. Berapa post yang teman-teman ingin tampilkan bisa di ubah sesuai selera.
Itu tadi sedikit gambaran bagaimana caranya untuk membuat recent post thumbnail yang bisa gerak naik turun, semoga berhasil.

Sekian dari saya. Semoga bermanfaat
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

44 comments:

  1. disini, gak otomatis yah gan?
    maksudnya otomatis berita-berita yg di tampilkan, adalah berita-berita terbaru...

    ReplyDelete
  2. mas, sejak saya pasang script ini, koq gambar slide show di halaman utama blog saya jadi ga mau tampil yah??
    ada hubungannya atau tidak yah??

    Thankz :)

    ReplyDelete
  3. wah mantap nih..
    dri dulu pengen masg kyk gini di blog
    tp sayang blog saya gk bisa masang script di sidebarx,,
    alx klo masg ntar error :'(

    ReplyDelete
  4. informasinya sangat menarik gan...sukses

    ReplyDelete
  5. hahaha...tapi serius jadi ilang beneran nich slide show berita di halaman depan :o padahal gw ga edit2 html kode disana....huhuhu...ada cara mudah pasang slide lagi ga mas?? tapi yg buat disidebar aja...biar kalo eror kaya gini ga puyeng2 :)

    ReplyDelete
  6. bagus tutorial ni harus dicuba.

    ReplyDelete
  7. Baru engeh,rupanya yg kucari ada disini,aku obok2 dibeberapa blog ada mmg sosoknya RP spay,tapi ga ada tutorialnya,ma kasih ya maskolis,lgsg tancepin aah..!

    ReplyDelete
  8. Koq,dipasang di blog saya gak berfungsi maskolis,teks dan gambarnya gak bergerak jalan cuma itu2 saja,apa ada yang salah,trus dimana ya kesalahannya..?

    ReplyDelete
  9. @Novyar:
    Mas Novyar coba anda buat postingan baru 2 ato 3 kemudian tunggu ada perubahan apa nggak...
    makasih kunjungan

    ReplyDelete
  10. sudah saya rubah maskolis.... weeehhh mantap mas kolis, langsung menaggapi permasalahan bloger2 yg masih cetek ilmunya... sekali lagi TERIMA KASIH BANYAK MAS KOLIS

    ReplyDelete
  11. tampilan tutorialnya menarik berikut isi dari Tips Recent post yang diberikan sangat menarik sukses semuanya

    ReplyDelete
  12. wah, keren sob,,
    tp takutnya blog saya tmbah lola klo dikasih ini sob,,,
    huhuhu

    ReplyDelete
  13. hello friend was here have a nice day. Useful website!

    ReplyDelete
  14. Mantep nih mas :)
    saya juga pake :)

    ReplyDelete
  15. mantep jga nih sob...thanks ya..jangan lupa jga komentar balik di blogku ya sobat

    ReplyDelete
  16. thanks ya info nya kalo boleh tukeran link nya ya? http://hanynizah.blogspot.com link km dah di pasang ditunggu link baliknya ya

    ReplyDelete
  17. tenkiu tutorialnya... kini blogqu makin bervariasi... maaf gan nyubi euy..

    ReplyDelete
  18. TGerimakasih banyak atas info trinya mas...sangat membantu sekali. Tutorial yg hebat...

    ReplyDelete
  19. waduh...trimakasih banyak..
    senang banget dengan postingan ini.

    ReplyDelete
  20. thanks prens.....
    berhasil.....
    untuk tampilan yang mendatar yg letaknya ada dibawah itu gmana ya prens.....
    salam kemal

    ReplyDelete
  21. @: manteb mas brow, kalo cuma gambar doang, trus tampilannya mendatar gimana?

    ReplyDelete
  22. Makasih tutorial dan juga secripnya sob..Udah ku coba dan hasilnya memuaskan.
    Salam kenal

    ReplyDelete
  23. mas kolis kalo klo untuk gambar thumbnailnya agar menyamping kekanan tidak kebawah gimana caranya?

    ReplyDelete
  24. keren gan artikelnya, pas banget., sedot ah

    ReplyDelete
  25. Ok mantabzz..coba dolo lah ah!!
    http://iniitusaja.blogspot.com

    ReplyDelete
  26. Scirpt Si burhan sudah kena banned semua :D

    ReplyDelete
  27. thanks maskolis tutorialnya, jadi dah di blog saya
    makasih makasihh...

    ReplyDelete
  28. kalau di wordpress caranya gimana ya gan?

    ReplyDelete
  29. gan uda tidak berpungsi script yang ini udah di hapus http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js

    ReplyDelete
    Replies
    1. coba disini om dharla http://caramudahdancepatmembuatsesuatu.blogspot.com/2013/06/membuat-recent-post-bergerak.html

      Delete
  30. Gadget ini sebenarnya bagus, namun ada sedikit kendala, saat aku coba pasangkan di blog aku ...., ternyata gak bisa jalan. Mohon pencerahan.


    http://shareaja21.blogspot.com

    ReplyDelete
  31. Mantab bener nih recent post nya mas! Saya coba script nya di blog saya ya.. :D

    ReplyDelete
  32. Wah kalau maskolis memang share-nya mantap..saya coba dulu Mas...TQ

    ReplyDelete
  33. mantap http://lintas-aceh.blogspot.com/p/blog-page.html

    ReplyDelete
  34. Produk di Jamin Asli.
    ELECTRONIC SOLUTION-SHOP.
    Menawarkan harga Promo , Barang yang Kami Tawarkan Semuanya Barang Asli Original Garansi Resmi Distributor dan Garansi Tam .Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya,
    Berminat Hub: Hotline/sms: 0857-7087-2865 ATAU KLIK WEBSET RESMI KAMI http://electronicsulution-shop.blogspot.com
    BlackBerry>Samsung>Nokia>Apple>Acer>Toshiba
    Led tvlg>Led tv Samsung>Nikon>Canon>DLL

    Dijual,
    Ready Stock !
    Blackberry Bold 9780
    Harga Promo Rp.1.500.000,-
    Ready Stock !
    BlackBerry Bold Curve 9300,
    Harga promo Rp.1.000.000,-
    Ready Stock !
    BlackBerry Torch 9800
    Rp.1.600.000,-
    Ready Stock !
    BlackBerry Z10
    Rp.3.500.000,-
    Ready Stock !
    BlackBerry Q 10
    Rp.4.000.000,-
    Ready Stock !
    Samsung Galaxy S3 Mini
    Rp. 2.700.000,-
    Ready Stock !
    Samsung Galaxy Ace
    Rp.1.400.000,-
    Ready Stock !
    Samsung Galaxy S2
    Rp.2.500.000,-
    Ready Stock !
    Samsung Galaxy S4
    Rp.4.500.000,-
    Ready Stock !
    Nokia 808 Pure View
    Rp.4.200.000,-
    Ready Stock !
    Nokia Lumia 820
    Rp. 2.700.000,-
    Ready Stock !
    Nokia Lumia 920
    Rp.3.400.000,-
    Ready Stock !
    Nokia Lumia 620
    Rp. 1.500.000,-
    Ready Stock !
    Apple iPhone 5G 16GB
    Rp.4.100.000,-
    Ready Stock !
    Apple iPhone 4G- 32GB
    Rp.3.500.000,-
    Ready Stock !
    Apple iPhone 3G-16GB
    Rp.2.900.000,-
    Ready Stock !
    Apple iPhone 4S-64GB
    Rp.4.000.000,-
    Ready Stock !
    Acer Aspire one 756
    Rp.1.400.000,-
    Ready Stock !
    Acer Aspire E1-471G
    Rp.2.800.000,-
    Ready Stock !
    Acer Aspire S5 Ultrabook Core 17
    Rp.7.000.000,-
    Ready Stock !
    Toshiba Satellite C800D-1006
    Rp.2.500.000,-
    Ready Stock !
    Toshiba Satellite C800D-1003
    Rp.1.500.000,-
    Ready Stock !
    Toshiba Satellite L840-1045XR
    Rp.3.700.000,-
    Ready Stock !
    Led TV Lg 42 inch LN5100
    Rp 3.500.000,-
    Ready Stock !
    Led TV Lg 42 inch LN5710
    Rp. 4.000.000,-
    Ready Stock !
    Led TV Lg 39 inch LN5100
    Rp. 3.000.000,-
    Ready Stock !
    Led TV Samsung UA 32 inch F5000
    Rp. 2.100.000,-
    Ready Stock !
    Led TV Samsung UA 32 inch F4000
    Rp.1.500.000,-
    Ready Stock !
    Nikon D5100+18-15Kit
    Rp 3.500.000,-
    Ready Stock !
    Nikon D3000 Kit 18-15mm VR
    Rp. 1.500.000,-
    Ready Stock !
    Nikon D3200 Kit 18-105mm VR
    Rp 3.100.000,-
    Ready Stock !
    Canon Eos 600D Kit EF-S 18-135mm
    Rp.3.800.000,-
    Ready Stock !
    Canon Eos 70D Kit EF-S 18-55mm is stm
    Rp.4.700.000,-
    Ready Stock !
    Canon Eos 600D Body
    Rp.2.500.000,-


    Kami melakukan Pengiriman barang lewat Tiki atau Jne ,Pos,Cargo,bagi luar kota,Ongkir ditanggung pembeli
    Berkat Anda Usaha Kami Jadi Semakin Lancar,Terima kasih telah berbelanja di Electronic Solution-Shop.

    Nikmati berbagai keuntungan berbelanja di sini.
    *Barang berkualitas dan harga relatif lebih murah
    *Dapat diantar ke seluruh indonesia
    *Keamanan di jamin karna setiap pengiriman di sertai asuransi proses cepat dan sederhana
    Barang di jamin 100% original baru dan bergaransi resmi.
    Selamat Berbelanja ! ! !

    ReplyDelete
  35. Keren gan,...........

    http://adamjayasticker.blogspot.com/

    ReplyDelete
  36. ijin copy code dan memasangnya bos

    ReplyDelete
  37. makasih gan semoga bermanfaat http://tinyurl.com/nyf29hp

    ReplyDelete

No comment moderation in this page
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly

 
CREATING WEBSITE © 2012 the other blog Mas Template | Look at this Johny Template | Powered by Blogger