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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaPJtFiMFOJLDxvcqdiRlvaSp8yAqQa-2WwAXuMwQVpB-UXRvVP1VMnRyQ2jq3RbVbqnFccuCG4djzFlq9ToLTpvr5OytdLZjhdrDjdSyna7xZqDcmS1PEIcYrO3IJCTE5MTKLAxYmbv8/s1600/O.W.gif";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaPJtFiMFOJLDxvcqdiRlvaSp8yAqQa-2WwAXuMwQVpB-UXRvVP1VMnRyQ2jq3RbVbqnFccuCG4djzFlq9ToLTpvr5OytdLZjhdrDjdSyna7xZqDcmS1PEIcYrO3IJCTE5MTKLAxYmbv8/s1600/O.W.gif";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaPJtFiMFOJLDxvcqdiRlvaSp8yAqQa-2WwAXuMwQVpB-UXRvVP1VMnRyQ2jq3RbVbqnFccuCG4djzFlq9ToLTpvr5OytdLZjhdrDjdSyna7xZqDcmS1PEIcYrO3IJCTE5MTKLAxYmbv8/s1600/O.W.gif";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaPJtFiMFOJLDxvcqdiRlvaSp8yAqQa-2WwAXuMwQVpB-UXRvVP1VMnRyQ2jq3RbVbqnFccuCG4djzFlq9ToLTpvr5OytdLZjhdrDjdSyna7xZqDcmS1PEIcYrO3IJCTE5MTKLAxYmbv8/s1600/O.W.gif";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaPJtFiMFOJLDxvcqdiRlvaSp8yAqQa-2WwAXuMwQVpB-UXRvVP1VMnRyQ2jq3RbVbqnFccuCG4djzFlq9ToLTpvr5OytdLZjhdrDjdSyna7xZqDcmS1PEIcYrO3IJCTE5MTKLAxYmbv8/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!
31 May 2012

Posting 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. Dilarang Menyertakan Link Hidup!! Spam tidak diperbolehkan!

    BalasHapus
  3. betah dehh lama2 disini..

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

    BalasHapus
  4. Dilarang Menyertakan Link Hidup!! Spam tidak diperbolehkan!

    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. Dilarang Menyertakan Link Hidup!! Spam tidak diperbolehkan!

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

    BalasHapus
  9. Dilarang Menyertakan Link Hidup!! Spam tidak diperbolehkan!

    BalasHapus
  10. Dilarang Menyertakan Link Hidup!! Spam tidak diperbolehkan!

    BalasHapus
  11. Dilarang Menyertakan Link Hidup!! Spam tidak diperbolehkan!

    BalasHapus
  12. Dilarang Menyertakan Link Hidup!! Spam tidak diperbolehkan!

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

    BalasHapus
  14. Dilarang Menyertakan Link Hidup!! Spam tidak diperbolehkan!

    BalasHapus
  15. 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
:) :)) ;(( :-) =)) ;( ;-( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (b) (f) x-) (k) (h) (c) cheer
Klik untuk melihat kode!
Untuk menyisipkan emoticon Anda harus menambahkan setidaknya satu spasi sebelum kode.

 
Top