Salam blogger untuk para sahabat Oto Website dari mana saja!
Dalam tutorial atau postingan (terserah dah) kali ini blog Oto Website akan share kepada teman-teman tentang Recent Post Dengan Gambar Thumbnail Bergerak, huh lagi gak enak badan ni sob, yah biar ada postingan masuk aja tiap hari, hikhikhik... karna gak sempat ngetik jadi saya share widget ini dulu aja ya...
untuk contoh widgetnya seperti gambar berikut:


O iya sekali lagi gambar thumbnailnya bergerak ke bawah ya bukan ke atas, hehehe...
Oke dah lansung aja ya sob, keburu pusing ni kepala!

1. Masuk ke akun blogger sobat.

2. Pada menu sobat klick Rancangan ➨ Tambah gadget(di bagian mana saja sobat ingin widget ini muncul)

3. Lalu sobat pilih elemen HTML/Java Script.

4. Selanjutnya sobat copy kode di bawah ini dan letakkan di dalamnya.

<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:500px;
}
#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:#ffffff; /* warna background */
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#000000;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li a:hover{color:#cc0000; text-decoration:underline}
#spylist li img {
float:left;
margin-right:5px;
background:#ffffff;
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://1.bp.blogspot.com/-uTpzdLvF4q8/T_MOyWrHdQI/AAAAAAAAD2s/1MisiIsLjxM/s1600/O.W.gif";
imgr[1] = "http://1.bp.blogspot.com/-uTpzdLvF4q8/T_MOyWrHdQI/AAAAAAAAD2s/1MisiIsLjxM/s1600/O.W.gif";
imgr[2] = "http://1.bp.blogspot.com/-uTpzdLvF4q8/T_MOyWrHdQI/AAAAAAAAD2s/1MisiIsLjxM/s1600/O.W.gif";
imgr[3] = "http://1.bp.blogspot.com/-uTpzdLvF4q8/T_MOyWrHdQI/AAAAAAAAD2s/1MisiIsLjxM/s1600/O.W.gif";
imgr[4] = "http://1.bp.blogspot.com/-uTpzdLvF4q8/T_MOyWrHdQI/AAAAAAAAD2s/1MisiIsLjxM/s1600/O.W.gif";
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://www.otowebsite.blogspot.com/";
limitspy=6
intervalspy=4000
</script>
<div id="spylist">
<script src='https://otowebsite-blogspot.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

5. Simpan.

Keterangan:
  • Jika di templatemu sudah terpasang jQuery 1.3.2 maka kamu tidak perlu memasang jQuery 1.3.2 di atas atau tinggal di hapus saja.
  • numposts = 20 angka 20 adalah jumlah postingan terbaru yang akan di munculkan di widget ini,
  • ganti url http://www.otowebsite.blogspot.com/ dengan url blog sobat.
  • kode di atas masih ada yang bisa sobat ganti seperti border, heigh, weight.
Jika anda menggunaka widget ini jangan lupa komentnya, jangan berkomentar cuma bila ada kesulitan saja.

Saya rasa cukup, silahkan tinggalkan tanggapan atau keterangan sobat tentang postingan di atas!

Poskan Komentar Blogger Disqus

  1. trims tutorialnya bro...tapi kenapa di komentarnya hanya muncul di postingan saja bro, kalo di halaman/page statis, kolom komentar fb nya gak muncul?

    BalasHapus
  2. @djerseycorp.blogspot.com Ehm, maaf sya kurg mgrti mksud prtnyaan anda, dn anda brtnya ttang komntar apa? tlog d prjlas!

    BalasHapus
  3. betah dehh lama2 disini..

    cuma saya masih penasaran buat label kayak punya-nya mas,,!!!!
    ajarin yahh..???

    BalasHapus
  4. @SEGALANYA Sya msih blum mpljri tntag itu, widget trsbut mggunkan gnrator, ilmu sya blum smpai stu.
    krna sya skrg msih mpljri tag kndsionl, html, dll.
    klo gnerator sya pljri blkgan, krna pling ribet.
    do'ain aja biar sya cpat mpljrinya dn bsa mpljri gnerator, hehehe . . .

    BalasHapus
  5. iya dehhhh....!!!
    smga cepat cepat difahami dan dimengerti...
    slmat bljar klo begitu...!!

    BalasHapus
  6. Kode backgroundnya yang mana gan jika mau diganti soalnya biar sesuai dengan warna template kita.

    jika diblog ini widget recent postnya berwarna putih bagaimana untuk menggantinya menjadi hitam.kodenya yang mana.hehe.trims

    BalasHapus
  7. @Yaqind Sblumnya kmu gnti dlu script widget yg sudh kmu psang d blogmu dengan kode script d atas.

    krna kde script di atas sudh sya update agar bsa di rubah wrna backgroundnya.

    untuk mngganti warna background:
    #ffffff; /* warna background */ ganti #ffffff dengan #000000 (bila ingin menggunakan warna hitam)
    Jika ingin dngan wrna lainnya silahkan kmu buka tools kode warna blog ini!

    BalasHapus
  8. saya sda cba, tp cm muncul bntuknya ja, gk ad postingnya, itu gmn? ,thnk before,,

    BalasHapus
  9. @Zhall Trozans Hpus kode script yg bwrna merah.

    BalasHapus
  10. @dek rifgk bsa jg gan,, :D ,yg di gnti cm itu aja,,?

    BalasHapus
  11. @Zhall TrozansYg sya lihat di blog Anda, Anda menggunkan Template X5 Shadow.
    Saya pernah menggunkn template trsbut.

    Yg prlu Anda tau disini tidk semua widget atau script bisa di gunakan pada template trsbut.
    Sya tidk tau psti krna apa, mungkin bisa jadi HTML yg brbda dgan tmplate biasanya, atau keterbatasan ruang sidebar yg trllu kcil.

    Intinya widget ini sulit untuk bkrja dgan smpurna d tmplate Anda.

    BalasHapus
  12. maaf oot ane mw tanya om, gimana cara ganti lebar auto slide?

    BalasHapus
  13. @JayaQue PutraMaksud Anda cara melebarkan SIdebar?

    #outer-wrapper –> kode untuk melebarkan halaman blog.
    #main-wrapper –> kode untuk melebarkan postingan blog
    #sidebar-wrapper –> kode untuk melebarkan sidebar blog

    Itu adalah beberapa elemen yang ada di template.
    Perlu Anda ketahui setiap template berbeda-beda dan memiliki kode yang berbeda pula.
    Sayangnya di situs ini saya tidak membahasnya, karna sudah banyak yang membahasnya dari dulu.
    Saya sarankan Anda mencari di google searh engine dengan pencarian "CARA MELEBARKAN SIDEBAR BLOG"

    BalasHapus
  14. di coba lagi Sob tapi widgate yang ini juga sama gak kerja di 3 blog saya..yah terima kasih saja.

    BalasHapus
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top