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:
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.
Saya rasa cukup, silahkan tinggalkan tanggapan atau keterangan sobat tentang postingan di atas!
trims tutorialnya bro...tapi kenapa di komentarnya hanya muncul di postingan saja bro, kalo di halaman/page statis, kolom komentar fb nya gak muncul?
BalasHapusDilarang Menyertakan Link Hidup!! Spam tidak diperbolehkan!
BalasHapusbetah dehh lama2 disini..
BalasHapuscuma saya masih penasaran buat label kayak punya-nya mas,,!!!!
ajarin yahh..???
Dilarang Menyertakan Link Hidup!! Spam tidak diperbolehkan!
BalasHapusiya dehhhh....!!!
BalasHapussmga cepat cepat difahami dan dimengerti...
slmat bljar klo begitu...!!
Kode backgroundnya yang mana gan jika mau diganti soalnya biar sesuai dengan warna template kita.
BalasHapusjika diblog ini widget recent postnya berwarna putih bagaimana untuk menggantinya menjadi hitam.kodenya yang mana.hehe.trims
Dilarang Menyertakan Link Hidup!! Spam tidak diperbolehkan!
BalasHapussaya sda cba, tp cm muncul bntuknya ja, gk ad postingnya, itu gmn? ,thnk before,,
BalasHapusDilarang Menyertakan Link Hidup!! Spam tidak diperbolehkan!
BalasHapusDilarang Menyertakan Link Hidup!! Spam tidak diperbolehkan!
BalasHapusDilarang Menyertakan Link Hidup!! Spam tidak diperbolehkan!
BalasHapusDilarang Menyertakan Link Hidup!! Spam tidak diperbolehkan!
BalasHapusmaaf oot ane mw tanya om, gimana cara ganti lebar auto slide?
BalasHapusDilarang Menyertakan Link Hidup!! Spam tidak diperbolehkan!
BalasHapusizin nyoba gan.....
BalasHapusdi coba lagi Sob tapi widgate yang ini juga sama gak kerja di 3 blog saya..yah terima kasih saja.
BalasHapus