Lompat ke konten Lompat ke sidebar Lompat ke footer

Membuat Slide Recent Post

Membuat Slide Recent Post
Banyak cara untuk menampilkan recent post atau postingan terbaru. Di blog ini saja ada banyak tutorial atau pelajaran yang membahas tentang recent post. Coba ketik saja di search box "recent post".

Sekarang kita akan belajar menampilkan recent post lebih menarik lagi. Kita membuat slide recent post, yang akan disertai thumbnail, judul terbaru, tanggal dipublish dan jumlah komentar. Ya karena slide, berarti terus bergerak dan bergantian. Widget slide recent post ini cocok dipasang di sidebar. Demonya bisa dilihat di sini

Cara Membuat Slide Recent Post
1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<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://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] = "http://i777.photobucket.com/albums/yy55/terate/th_New.jpg";
imgr[1] = "http://i1037.photobucket.com/albums/a452/thing_wu/Thing/women/2q1bhc3.jpg";
imgr[2] = "http://i1044.photobucket.com/albums/b443/akropolis_album/antarktis/125model6-1.jpg";
imgr[3] = "http://i777.photobucket.com/albums/yy55/terate/th_New.jpg";
imgr[4] = "http://i777.photobucket.com/albums/yy55/terate/th_New.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://kurniasepta.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>

Sebelum kita Simpan, berikut ini yang bisa kita ubah:
  • 220 dan 208 adalah lebar widget.
  •  numposts = 10; adalah banyaknya postingan yg ingin kita tampilkan
  • Ganti http://kurniasepta.blogspot.com/ dengan URL blog kita sendiri.
5. Simpan jika sudah selesai.

    31 komentar untuk "Membuat Slide Recent Post"

    1. ;)sangat bermanma'at mas....maju terus..tapi aku masih baru mengenal blogsport...:)

      BalasHapus
    2. bantuannya dunk, untuk wordpress self hosting.. :)

      BalasHapus
    3. makasih sharenya,,,ane masih belajar

      BalasHapus
    4. Terimakasih atas kunjungan dan komentarnya :D

      BalasHapus
    5. Trims kasih sudah ku pasang di blogku,, tambah ganteng tampilannya neh,..,..

      BalasHapus
    6. salam dariku,wahai kakak

      BalasHapus
    7. thanks gan... yang ini work di blog ane... udah berkeling2 gax dapet... izin save scriptnya

      BalasHapus
    8. makasih mas ilmunya.... :D

      BalasHapus
    9. tengkyu kang, berguna nih postingannya..

      keep posting terus..

      BalasHapus
    10. kalau nga bergerak bagai mana???
      please info nya

      BalasHapus
    11. langsung ke TKP!! Makasi gan...

      BalasHapus
    12. thanks,, tutorialnya sangat membantu saya

      BalasHapus
    13. blognya sangan membantu sekali mas, banyak belajar dari sini :), btw kalau untuk popular post dan recent coment bisa pake ini juga nggak ya? :)

      BalasHapus
    14. coba rubah pada height sama width dulu.... klo ada masalah tanya lagi juga gpp kok

      BalasHapus
    15. untuk buat gadget seprti gadget anda yang bertuliskan "terbaru,komentar,random" itu gimana mas?
      salam kenal mas,saya newbie

      BalasHapus
    16. thanks ya gan atas share nya... Ane pasang scriptnya di www.actresexy.blogspot.com

      BalasHapus
    17. maaf, comment dah terlanjur pake alamat blog ane...

      BalasHapus
    18. kok gambar posting di blog q gak muncul mas,,,??? mohon pencerahannya mas

      BalasHapus
    19. Itu bergerak dari atas ke bawah, kalai dar i kanan kekiri gimana ya?

      BalasHapus
    20. nice share and nice blog..

      BalasHapus
    21. nuhun, Gan. katampi tutorial blogna ku simkuring.

      BalasHapus
    22. wow artikel yg menarik mas, dan salam kenal dari mico dan juga saya suka blog ini dan juga bagi teman2 yg suka dengan film action,horor,atau box office dan download film gratis silakan kunjungi situsnya ok.thanks admin blog ini loe

      BalasHapus
    23. BURUAN BELANJA DI ANDHY SHOP DAPATKAN HARGA PROMO AWAL TAHUN 2013 TERPERCAYA DI SELURU INDONESIA BEBAS RESIKO-BEBAS PENIPUA
      BERMINAT HUB-SMS: 0896-9198-6274 ATAU KLIK WEBSET RESMI KAMI http://www.andi-shop7.blogspot.com/
      BlackBerry>Samsung>Nokia>Apple>Acer>Dell>Nikon>DLL

      DIJUAL

      BLACKBERRY
      Asli Buatan Canada

      Ready Stock !
      BlackBerry 9380 Orlando - Black
      Rp.900.000,-

      Ready Stock !
      BlackBerry Curve 8520 Gemini
      Rp.500.000,-

      Ready Stock !
      BlackBerry Bold 9780 Onyx 2
      Rp.800.000,-

      Ready Stock !
      Blackberry Curve 9320
      Rp.700.000,-

      Ready Stock !
      BlackBerry Bold 9900 Dakota
      Rp.1.500.000,

      Ready Stock !
      Blackberry Torch 9800
      Rp.1.200.000,

      Ready Stock !
      Blackberry bellagio 9790
      Rp.1.100.000

      Ready Stock !
      BlackBerry Curve 9220 Davis
      Rp.650.000,-

      Ready Stock !
      BlackBerry Torch 2 9810 Jennings
      Rp. 1.350.000,-

      Ready Stock !
      BlackBerry Curve 9360 Apollo
      Rp.950.000,-

      Ready Stock !
      Blackberry Monza 9860
      Rp.1.400.000,-

      Ready Stock !
      Blackberry Keppler 9300 Curve 3G
      Rp.700.000,-


      SAMSUNG
      Asli Buatan Korea

      Ready Stock !
      Samsung L9100 Galaxy S2 - Black
      Rp. 1.000.000,-

      Ready Stock !
      Samsung Galaxy Tab 8.9, 16GB - Pure Whit
      Rp. 1.600.000,-

      Ready Stock !
      Samsung Galaxy Tab 7.7 Super AMOLED Plus
      Rp.1.500,000

      Ready Stock !
      Samsung Galaxy Note N7000 - Black
      Rp. 1.700.000

      Ready Stock !
      Samsung Galaxy Tab 2 (7.0)
      Rp. 1.000.000

      Ready Stock !
      Samsung Galaxy Nexus I9250 - Titanium Si
      Rp.1.500.000,-

      Ready Stock !
      Samsung Galaxy Note N7000 - Pink
      Rp.1.700.000

      Ready Stock !
      Samsung Galaxy Y S5360 GSM - Pure White
      Rp.500.000,-

      Ready Stock !
      Samsung Galaxy Tab 7.0 Plus
      Rp. 1.000.000.

      Ready Stock !
      P7100 Galaxy Tab 10.132GB
      Rp. 1.850.000,-

      Ready Stock !
      Samsung Galaxy Y i509 CDMA - Pure White
      Rp. 550.000,-

      Ready Stock !
      Samsung Galaxy Tab 7" plus ALL WHITE
      Rp.1.000.000

      Ready Stock !
      Samsung Galaxy Pocket GT-S5300 - Black
      Rp.500.000,-

      Ready Stock !
      Samsung Galaxy W i8150 - Soft Black
      Rp.800.000

      Ready Stock !
      Samsung Galaxy Ace GT S5830 - Onyx Bl
      Rp.750.000,-

      Ready Stock !
      Samsung Chat GT-C3222W Wifi – Dual GSM - Noble Black
      Rp.400.000,-

      ACER

      Ready Stock !
      Acer Iconia Tab A101 - Cherry
      Rp. 1.100.000,-

      Ready Stock !
      Acer Iconia Tab A501r
      Rp. 1.100.000,-

      Ready Stock !
      Acer AOD270-26C Balloon 10.1
      Rp. 1.000.000

      Ready Stock !
      Acer Aspire One AO722 AMD C60
      Rp. 900.000,-

      Ready Stock !
      Acer Aspire 4752-2332G50Mn Core i3 Win7 Home
      Rp 1.300.000

      Ready Stock !
      Acer Aspire S3-951-2364G34iss
      Rp. 1.200.000,-

      Ready Stock !
      Acer Aspire 5951G Core i7 2630 Win 7
      Rp. 2.500.000,-

      Ready Stock !
      Acer Aspire 4755G Core i5 2430 Win 7 Home Premium Green
      Rp. 2.500.000,-

      Ready Stock !
      Acer Aspire 4755G Core i5 2430 Linux Blue
      Rp 1.700.000

      BalasHapus
    24. gak work d blog ane :((

      BalasHapus
    25. as wr wb,,,,,,!!!!!!
      dl saya selalu kalah dalam bermainan TOTO SGP/HK,
      barang berharga di rumah sdh saya jual semuanya, surat2/sertipikat rumah saya
      masukkan di BANK BRI,
      bahkan saya sdh minta bantuan para normal pt, hasilnya nihil suatu hari saya bertemu
      teman yg sama seperti saya PECINTA TOGEL jg & menberitahu saya kalau MBAH DEWA
      bisa menbantu saya untuk melunasi hutang2 saya dalam bermain TOTO SGP/HK,
      dan saya hub MBAH DEWA no 082-315-999-679 saya diberikan petunjuk
      oleh MBAH DEWA menjadi member beliu
      dan di kirim ANGKA RITUAL/GOIB SUPER JITU 4D terbukti tembus/jebol 100%
      saya sangat berterimah kasih atas bantuanya MBAH DEWA yg tlah membebaskan
      saya dr hutang-piutang saya, dan tak lupa jg saya mengujapkan puji syukur
      kepada yg MAHA KUASA atas rezki yg di berikan kepada saya terimma kasih TUHAN,,
      inilah kisah nyata hidup saya apakah anda ingin mengubah
      nasib anda seperti saya,,,???
      hub MBAH DEWA 082-315-999-679 insyah allah anda tdk akan kecewa,
      ini bukan hanya sebuah cerita
      tp, bukti & faktalah yg berbica,,,,,terima kasih,,,,,,,roomnya
      ;;☆╭⌒╭⌒╮☆ ╭⌒╮☆ ~ ╭⌒╮,☆,,”★ ~~,”,~~★ ╱◥█◣ ╱◥◣╱◥████◣ ╱◥█◣_●●●●●●∩║▓_ _∩__▓ ▓∩▓田 ║∩║▓__∩__ ▓▓∩▓田

      (`’•.¸(` ‘•. ¸* ¸. •’´)¸.•’´)
      «´ Thanks sOb `»
      (¸. •’´(¸.•’´ * `’•.¸)`’•.¸ )
      SALAM KOMPAK SELALUH….
      ██▓▓█████▓▓████
      >>>>>===========>>
      .الالله صلى الله عليه وسلموعليكوتهله صلى الل

      BalasHapus

    Berlangganan via Email