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?
BalasHapus@djerseycorp.blogspot.com Ehm, maaf sya kurg mgrti mksud prtnyaan anda, dn anda brtnya ttang komntar apa? tlog d prjlas!
BalasHapusbetah dehh lama2 disini..
BalasHapuscuma saya masih penasaran buat label kayak punya-nya mas,,!!!!
ajarin yahh..???
@SEGALANYA Sya msih blum mpljri tntag itu, widget trsbut mggunkan gnrator, ilmu sya blum smpai stu.
BalasHapuskrna 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 . . .
iya 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
@Yaqind Sblumnya kmu gnti dlu script widget yg sudh kmu psang d blogmu dengan kode script d atas.
BalasHapuskrna 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!
saya sda cba, tp cm muncul bntuknya ja, gk ad postingnya, itu gmn? ,thnk before,,
BalasHapus@Zhall Trozans Hpus kode script yg bwrna merah.
BalasHapus@dek rif Hmmm,, OK saya coba,, :D
BalasHapus@dek rifgk bsa jg gan,, :D ,yg di gnti cm itu aja,,?
BalasHapus@Zhall TrozansYg sya lihat di blog Anda, Anda menggunkan Template X5 Shadow.
BalasHapusSaya 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.
maaf oot ane mw tanya om, gimana cara ganti lebar auto slide?
BalasHapus@JayaQue PutraMaksud Anda cara melebarkan SIdebar?
BalasHapus#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"
izin nyoba gan.....
BalasHapusdi coba lagi Sob tapi widgate yang ini juga sama gak kerja di 3 blog saya..yah terima kasih saja.
BalasHapus