Home disini
widget by sy@ms

Latest Posts

Membuat Recent Post Slide Dengan Thumbnails

Nah, kemarin kan ane dah pasang Recent Post Slide Keren Sekarang ane mau postingin Recent Post Slide dengan Thumbnails nih. Nah untuk lihat demonya, sobat bisa lihat pada sidebar kanan, atau lihat pada gambar disamping. Ni akan menampilkan semua postingan secara slide satu persatu disertai dengan tumbnails atau gambar kecil.

Gimana....

Cara pemasanganya masih sama dengan postingn Recent Post Slide Keren hanya scriptnya saja yang membedakan.


Untuk lebih lanjutnya ikuti saja step-step pemasanganya.

Ni scriptnya :


<script src='http://syamsjs.googlecode.com/files/recentpostslide.js' type='text/javascript'/>
<style media='screen' type='text/css'>
#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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRMGuqnVhCVmQf0K4SfP0TokwSF05kNkaX7hA75NDnqlELzAAyp-IWWhualicMUhKJAX_ExquXK74gwkWhy1KJkDxMbE1U1tBfT8XOW_ApVYiPXT_0DK4DUQCPauQoxu2PMbgH0VHhgzwB/s128/othersite.png";

imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ9a1A3jPPIDQmBwJ5d-Ij4gdgYgo1pjlYBYQ0QrfTxugLds0vd3a3BWFEEEB0jeTRWfi3x8gGgq2JITzp9yo_qjftKTtiAEk3t9MRpjX1TZcI0dzYFHUudiAGbzVwV4-l4S81qdldY6M3/s128/Terminal-syams.gif";

imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCqmm8KMMauW3w2uVDva_fZgfXLRtxNrKYBj3CUhTmmIvEpJbHTqcwr83RBtciUWfMnqg0rWbRf4Rmy7IZGV-fRdPDzquU9f6OPXCbrrpGCsPC_BxznKrIMZjBx5MVqI_M2ZEczcBPrLgu/s128/othersite60.png";

imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPuQsOAkEp1cFq0lbWzOmsdSEeGwbgQQ-dQ4VdO7MxJC4bZd88vDsPzPRy2JvvmFf1-5wCaGASQ0vimxKjkNBs5JTrz8tdnRnI_5q8aak-usYY43wszQrlt_0jcAftB7yWdNJ-Gj0GwDTc/s128/ayoayo.gif";

imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih4VSPMfGVSOUv7HiOyyFI-lkIU9CR_1fwVBp2io6Ju-xDxdxJRFmFJ9_TODPRZ7ysOe_lb_N6_BV54xNjm8slouKr5J5SvFl5JLiL4gOslseSapP0BJe-qPcXttqsl28ouczwkgGoLrbW/s128/imgload.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://url-blog-soabat.com/";

limitspy=4
intervalspy=4000

</script>

<div id='spylist'>
<script src='http://syamsjs.googlecode.com/files/recentpostslide2.js' type='text/javascript'/>
</div>


Untuk Pemasanganya, Terserah sobat. Mau di pasang pada Add Gadget atau Edit Html.
Ni stepnya untuk Add Gadget :
  1. Login ke akun blog sobat.
  2. Pilih Rancangan, Add Gadget.
  3. Pilih Html/JavaScript.
  4. Copy Pastekan Script diatas kedalam add gadged
  5. Klik simpan dan simpan template.

Untuk stepn pemasangan pada Edit html :
  1. login ke akun blog sobat.
  2. Pilih Rancangan, edit Html.
  3. Copy Pastekan Kedalam Html Sobat, dengan ketentuhan harus di dalam tag <body>.
  4. Simpan template sobat dan lihat blog

Gimana......
Sobat juga bisa mengedit atau mengubah sesuai dengan keinginan sobat. Ok teruslah berkreasi dan tetap bersemangat.

Catatan : Silahkan sobat ganti url home page-nya pada script tersebut dengan url home page sobat.
home_page = "http://url-blog-soabat.com/";

Salam senyum dariku untuk semuanya, tetaplah untuk bersemangat. Jangan lupa Comment atau isi buku tamu ya sob. Sedikit pemberitahuan untuk sobat yang ingin mengambil [Copy-Paste], Owner tidak melarang sobat untuk memperbanyak artikel namun Owner berharap sobat berlaku dengan bijak agar mencantumkan link active maupun yang tidak. Owner berharap partisipasinya ya sob.



16 komentar:

Ady Sukrul Fadhlilah mengatakan...

makasih kak infonya
salam kenal

sy@ms mengatakan...

Salam kenal juga sob, trims dah berkunjung ke blog ane, semoga artikelnya bermanfa'at...

11 Maret 2012 pukul 16.18
Arief Ardiansyah mengatakan...

Kok tidak bekerja di blog saya??
Mohon bantuannya....
arief-ardiansyah.blogspot.com

sy@ms mengatakan...

Ok, Sebelumnya salam kenal sob n mohon ma'f ni kalau ane baru bales.

Coba sobat cek lagi script-nya karna disitu ada yang harus dirubah, yaitu pada javascriptnya:

home_page = "http://url-blog-soabat.com/";

ganti dengan url blog sobat. jangan dihilangkan garis miring (/) setelah .com

Oke sob, silakan dicoba kembali. Semoga bermanfa't sob.

29 April 2012 pukul 13.56
Arief Ardiansyah mengatakan...

tetap tidak bekerja.............

sy@ms mengatakan...

Kalau boleh tau yang ga mau itu apanya sob.....
soalnya sudah ane coba dengan url blog sobat berhasil kok.
ini demonya :
http://skynetprogram.blogspot.com

kalau permasalahanya sobat seperti ini :
"untuk listnya sudah muncul namun dia tidak mau slide"

nah untuk permasalahan yang itu mungkin script jquery sobat kurang tepat peletakanya untuk mengoptimalkan letakan script jquery sebelum tag </head>
kalu sobat belum punya script jquery silahkan sobat tambahkan script berikut sebelum tag </head>

ini scriptnya :
"<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript' ></script>"
[tanpa tanda kutip]

Ok semoga bermanfa't.

12 Mei 2012 pukul 08.59
Arief Ardiansyah mengatakan...

Ane bingung sob, tetep gabisa..
Apa di template artisteer emang ga bisa ya??
Maaf merepotkan..

sy@ms mengatakan...

Kalau masalah template tidak jadi masalah sob, karna template yang saya demokan itu juga template dari artisteer.

Emang sobat sudah menaruh scriptnya di HTML templatenya atau di AddGadgetnya..?

Coba sobat cek kalu dipasang melalui gadget dan html. Mungkin salah satu peletakan itu berhasil.

15 Mei 2012 pukul 11.02
Arief Ardiansyah mengatakan...

di blog ane gabisa sob (arief-ardiansyah.blogspot.com)
dicoba di blog ane yang lain (nyobanyobadoang.blogspot.com) malah gepeng.... gimana dong??

sy@ms mengatakan...

Ma'f sebelumnya sob, maksudnya gepeng tu apa ya sob, soalnya setelah ane cek di blog sobat yang "nyobanyobadoang.blogspot.com" sudah berhasil, jika sobat ingin menyesuaikan lebar dari listnya sobat bisa edit css nya yaitu lebar dari
"#spylist ul" sama yang "#spylist li"
Ok sob, semoga berhasil.

14 Juni 2012 pukul 14.14
Unknown mengatakan...

Mau tanya sedikit, ini bisa ditaruh dibawah Komentar ga sob?

sy@ms mengatakan...

Sebelumnya salam kenal dari ane sob,
oya, untuk peletakan script bisa di mana aja, mulai dari add gadget, samai ke edit html.
Kalau sobat ingin menaruh script tersebut di bawah komentar silahkan sobat sesuaikan setelah tag yang di akai pada komentar. Biasanya tag tersebut adalah

<div class="comments" id="comments">

-----disini adalah kode untuk komentar

</div>

--- taruh script recent post disini

Oke sob, semoga bermanfaat.

18 Juni 2012 pukul 21.51
Anonim mengatakan...

kalo mau megubah menjadi horizontal gmn?

sy@ms mengatakan...

Salam kenal sob, oya sebelumnya ane minta ma'f ni sob. untuk mengubah menjadi harizotal ane belum menemukan cara maupun source code yang di-share.

26 Juli 2012 pukul 11.28
Ariien mengatakan...

gimana cara mengatur kecepatan slide, teks juga gambarnya

sy@ms mengatakan...

Sebelumnya salam kenal sob, tris dah mampir ke blog ane.
Ma'f nih sob, klu commentnya baru ane bales, baru ol soalnya.

Untuk menentukan cepat dan lambatnya slide sobat bisa rubah script yang ada di javascriptnya,
sintaknya yaitu :
intervalspy = 4000

Silahkan sobat bisa rubah angka 4000 dengan angka kecepata sobat, klu ga salah 4000 sama dengan kurang lebih 4 detik.

Ok selamt ,mencoba....

16 Desember 2012 pukul 23.27

Jam Sekarang
Tanggal
Salam Sapa :
Status Blogging :

*ket. status : Terjadwal : Berarti yang punya blog tidak bisa berinternet [ More... ]





sy@ms
skyNET program


Join the conversation for skyNET program

 
 free web counter Counter Powered by  RedCounter

© 2011 || Copyright by sy@ms || Thanks for skyNET program All Reserved

Technology Blogs TopOfBlogs Top Blogs Internet Internet Blogs Phil Backlink Display Pagerank
Yahoo bot last visit powered by MyPagerank.Net
USA Backlinks Free Backlinks Service at USABacklinks.com! Auto Backlink Gratis Indonesia : Top Link Indo My Ping in TotalPing.com ping fast  my blog, website, or RSS feed for Free