Cara Memasang Slide Show Postingan Di Blog

Cara Membuat Widget Slideshow Postingan
Belakangan ini banyak teman teman saya menanyakan kepada saya .. “gimana sih cara pasang slide show postingan di blog” susah ga ? terus saya jawab ga susah kok, tinggal copy scriptnya , edit dikit abis itu save. Jadi deh...  Namun satu udah bisa, beberapa hari kemudian ada yang nanya lagi dan begitu terus hingga beberapa orang. Sehingga munculah sebuah ide untuk memposting cara membuat slideshows di postingan. Banyak yang berminat memasang widget ini setelah melihat blog saya. Karena slide tersebut memudahkan para pengunjung untuk membaca postingan apa yang menarik di blog kita. Karena di slide show tersebut bisa menampilkan gambar dari tiap postingan kita. Disertai judul dan koment yang ada di postingan tersebut. Apakah anda berminat juga untuk memasang widget ini ? caranya mudah kok,. Tidak perlu memakan waktu lama... dari pada membuang – buang waktu mari kita langsung ke TKP saja,,, lets gooo....

Cara Memasang Widget Slide Show Postingan Di Blog

  • Login ke blog anda
  • Pilih Rancangan
  • Tambah gadget
  • Pilih tambah Html / Java Script
  • Kemudian Copy kode Html Dibawah ini

<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: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] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.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://www.BlogAnda.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
    <script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div> 
<small><a href="http://permathic.blogspot.com/2012/04/cara-memasang-slide-show-postingan-di.html" target="_blank" title="Cara Memasang Slideshow Postingan Di Blog"> Widget Slideshow</a></small> 

Ingat !!! jangan lupa ubah tulisan warna merah menjadi alamat url Blog anda. Dan Editlah Width ( lebar) dan Height (tinggi) sesuai dengan yang anda inginkan. Namun jika anda tidak ingin repot2 mengubah ukuran, tinggal Copas aja. Tapi jangan lupa tulisan warna merahnya di ganti.

  • Pastekan script di atas kedalam Html/java script tadi
  • Simpan
  • Lalu atur dimana anda akan meletakan slide show tersebut
  • Lalu simpan kembali.
  • Selesai

Mudah bukan ? jangan lupa sering - sering berkunjung Ke Permathic Blog  






121 komentar:

Muhammad Husni Farid said...

thanks gan infonya....
kebetulan ane lagi nyari script nya

Permathic said...

sipp gan,,
jangan lupa,, sering - sering kunjungi permathic gan...

PC DOwnload said...

bagus bang

gunu kumar said...

Great post, you have pointed out some superb details, I will tell my friends that this is a very informative blog thanks.
IT Company India

Permathic said...

Thank you..

Pramana Headline said...

gak nimbul tu slideshow nya?!!

Permathic said...

mungkin url yg saya kasih warna merah belum di ganti kali gan ma url blognya agan..

andreascorsini said...

aku pengguna wordpress udah ku coba dah ku ganti tulisan warna merah dg url blog aku...kok ttp gak bs ya?

tas branded said...

beneran gak tuh bisa? saya baca di blog laen katanya harus masuk ke edit html, centang widget trus taro dibawah Head trus di-save. Baru deh buka halaman tata letak trus bikin gadget html n taro kode laen.

budi os 19 said...

keren mas post nya blog walking ya http://purnomosymb19.blogspot.com/ thx

Entjep boedax TeKaJe said...

bang follow blog ane :: http://boga-boedaxtekaje.blogspot.com/

Permathic said...

buat agan tas branded dan andreascorsini, ga tuh gan, saya langsung paste aja di tambah gadget Html/Java Script terus ganti urlnya bisa. dan beberapa yg masang, bisa tuh nampil. contohnya punya agan Muhammad husni Farid yg komentnya paling atas. mungkin memang widgetnya khusus buat blogspot kali gan...
contoh slidenya ada di sebelah kiri blog saya di bawah iklan.

Permathic said...

untuk agan Entjep.. udah ane follow blognya agan...

rencong.soft said...

bagus

1x Klik Blog's (ahmad) said...

makasi gan akhirnya bisa pasang widget ini juga...
follow blog ane

Jefri Krisna Putra said...

Ko' saya gak bsa ya gan.. Knp ya?

Permathic said...

tulisan warna merahnya di ganti dulu gan,. sesuai ma url blog yg mw di pasang slideshow

Ardy Rahman Saputra said...

untuk merubah tinggi dan lebarnya di edit di mana..?

Vinna Ariyanti said...

Follow blog gout yooo http://vinaa-thelucky-bastard.blogspot.com

Pendekar Cantik said...

TQ infonyaa :D

Chandra Kelana said...

Bang,.. Itu untuk 4 foto tampilan Slide Show! Kalau mw bikin atau tambah lagi! Jadi 5,6,7,8 Gimana caranya, Bang! Mohon petunjuk ilmunya bang?

Nana Nano-nano said...

:)

anonim os said...

boleh lah .. makasih gan infonya ...

cek >>
x-komodo

Robith said...

makasih gan
janagn lupa kunjungan balik ya ,,,

http://catatanrobith.blogspot.com/

fokuss smanssa said...

Sipp,,,, Bisa di terapkan

Rudy Hartono said...

kunjangan malam, nice posting and happy blogging

Sigit andrian said...

Trimakasih atas ilmu yang agan berikan . . . Langsung aja izin mencoba

mank tegreg said...

thanks yea sob info na sngat berguna bnged bwd blog saya,.,
tx bngedd bguss,., :)

Dwiworo said...

thanks gan infonya....
kebetulan aq jg lagi nyari script nya, http://dwiworo.blogspot.com

voo said...

bisa gan, pi images tidak kluar..?
[ apa images yg di tampilkan harus tersimpan di blogger..? ] soalnya semua images blog q link dari luar semua.

Doslan Damanik, S.Pd said...

trima kasih infonya

Doslan Damanik, S.Pd said...

trima kasih infonya

asriyatno said...

makasih gan ilmunya

Ngizat Muhammad said...

makasih gan....
sippp....
kunjungi punya ane juga ya...
http://izat17.blogspot.com/

Ananda Deki Zett said...

Okay! dicoba gan :)

Follow yo: qolamqarnain.blogspot.com

arditya ramdhan said...

mau tanya, ini bentuk slide nya vertikal apa horizontal ya bang?

Asy Shahid AM (SkaterSulawesi) said...

makasih infonya :)

http://skatersklk.blogspot.com/

Eko said...

Keren banget widget nya..maksih gan...

Blog Belajar SEO Gratis said...

Terimakasih banyak mas sudah share tutorialnya. :)

al isma said...

Nice Info !! :) Do not forget to visit Sekilas Info Aneh

Listianti Kahfiana said...

follow aku http://listiantikahfiana.blogspot.com/ :)

mauricelly said...

Nice posting. Boleh juga nih di praktekin.. Makasih ya triknya..

Eh.. buat teman2, ingin bikin toko online, website gallery produk ada CMS yang patut dicoba. CMS webshop pro, download installasinya di sourforge net. Lengkapnya di sini:
https://sourceforge.net/projects/cmsprowebshop/

Contoh penggunaan template bisa lihat di web ini:
http://catering-murah.web.id

Just sharing, semoga berguna..

Vadel Caestro said...

Gan Kok di BLOG ane gk nge SLIDE ya .??? MOHON BANTUANNYA ...


bermip.blogspot.com
bermip.co.cc
bermip.tk

dedey samantha said...

thanks infonya :) tapi di blog gue kok gak ngeslide ya bang? padahal urlnya udah bener

Jupen Bahari said...

Thanks gan untuk Infonya semoga tetap berkarya...

blitari said...

thanks gan..

Seru.com said...

Thank you, sob.

agung said...

setelah dicoba berhasil gan,.. sekalian mo tanya nh, apa blh slideshownya dibuat horisontal gan,..
thanks

rare-angon said...

Rare Angon Berkunjung Sobat, Artikel dan tutorialnya sudah dicoba ... kenapa blog saya berat yaa.. mohon solusinya, trims

brams bemby said...

gaan, mohon petunjuk, udh berulang kali gonta ganti url yg di bold merah menjadi url blog ane, ga bisa2...
balesan nya :

"Kami tidak dapat menyimpan template Anda.

Harap perbaiki kesalahan di bawah, dan kirimkan template Anda lagi.
Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: The markup in the document following the root element must be well-formed."

kenapa yaaakk???

Widjaja said...

di blog sya tidak mau jalan slide Gan...bgmna in ya? mohon di bantu ya, thank...

produk grosir said...

wah postingannya bermanfaat banget buat ane gan.. makasih ya gan...

rossanoni said...

gan keren ..udah lama dicari...baru ketemu nih

cesc Frabagas said...

jangan lupa mampir ya
frabagas.blogspot.com

Yuswanda said...

Nampaknya paten caranya tapi penempatan slidenya di mana dan apa format slidnya?

Plakat Jakarta said...

ajipzzzzzzzzzzz gan ane dah coba.tanx.

Bakul Angkringan said...

Maturnuwun Infonya ... Monggo mampir di Blog saya

Mang uem said...

Thanks sudah berbagi ilmunya, sukses selalu...

Sefri Wandana Hasibuan said...

THANKS BANGET YA GAN...
UDH ANE COBA...
DAN BERHASIL....
JANGAN LUPA BERKUNJUNG KE http://sefriwandanahsb.blogspot.com/

Eris Risno said...

Ok gan petunjuknya oke banget

visit me yah!
http://jhangsoen.blogspot.com

Informasi Terkini said...

ini yang ane cari...
makasih masta

Muhammad Farhan said...

thanks infonya ya

mufita said...

ass, saya mau tanya, kok punya saya widgetny tdk bergerak ya? hanya diam saja, awalny bergerak tp stlh itu tdk, karena saya masih baru d blog, saya masih penasaran. jdi mohon bantuanya..
trmksh :)

download film said...

wow artikel yg menarik mas, dan salam kenal dari mico dan juga saya suka blog ini dan juga bagi teman2 yg suka dengan film action,horor,atau box office dan download film gratis silakan kunjungi situsnya ok.thanks admin blog ini loe

Permathic said...

maaf untuk bbrpa komentar yg blm sempet saya balas.. dan untuk pertanyaan2 yg blm smpt saya jawab juga. harap di mklumi,, sebab beberapa bulan ini admin bnyk di sibukan oleh pekerjaan dan tugas2 kuliah di dunia nyata. saya sebgai admin hanya ingin mengucapkan terima ksih atas kunjungn dn komentar dari shbt2 blogger semua..
semoga selalu semangat untuk nge-blogging.

eko sudibyo said...

bank,ane pernah coba tutorial di atas tp kok gak bisa yach, bentuin donk pengin bgt punya slide.

Direktori Penerjemah Indonesia said...

Pengen pasang tapi nggak ada demonya, jadi takut salah pasang.
Makasih sharingnya mas :)

Agung Newbie said...

ane uda bisa,,
tp sayang ke kecilan gambarnya...
ane uda cba mengubah lebar sama tingginya tp tetep aja gk brubah..
klw bleh te dmna letak ubah image nya jadi besar..?

Rizky Pratama said...

Ijin Copas bos

Kumpulan Puisi said...

postingan yang bagus. salam kunjungan

Karya Unik said...

terimakasih Share nya, langsung dicoba.

Software Kartu Pelajar, Kartu Pramuka dan Kartu Pegawa said...

Terima Kasih Kawan, ini sangat bermanfaat...

Neneng Novesha said...

Merubah lebar box nya gimana ya?

Rumah dijual di Jogja said...

Ada contohnya gag Bro

STICKER JAKARTA PETUKANGAN said...

bagus gan coba kalo pya aku gmn yah apa yg hrs di tamabahin.
http://www.suryapratamaartistik.blogspot.com

TotoKingmaster said...

thanks bro info nya sangat membantu semoga sukses
blog ane bro http://www.prediksitogelasiajp.blogspot.com

sayed dahri said...

thanks very much bro . . . infonya sangat membantu . . .

blog saiia bro http://sayetmdahri.blogspot.com

Khabaran Unik said...

Thanks ya Ma Info nya..., Kunjung balik ya mas...!

RIAU HEADLINE said...

mantap juga...belajar dulu yaaa

Anonymous said...

cara ganti gambar widget slideshowx gmna ya?

Arhievs Zadoel said...

kereeenn gan.. thx.

Jefry said...

Bagus ni bila dipasang dalam web terutama web komersial seperti punya saya biar tampilannya makin menarik
terima kasih buat info dan langkah2nya

Jajan Ngampus said...

makasih ga, mampir ke blog kami juga jajanngampuss.blogspot.com :)

Droiden Garuda said...

asikk...makasih gan
:)
bermanfaat banget...

Oma Supartana said...

Follow my blog

narno ponorogo said...

gan punya saya ok ndak jalan tolog kasih tau pa penyebabnya cek disini http://sunarnoponorogo.blogspot.com

Rizky Archery said...

mantap gan. mampir ke blog ane gan. http://operatingsystemdebian.blogspot.com

Andrew HS said...

Keren Gan Slideshow nya, sukses Ta Masukkan ke Blog Saya. Thanks

Nathan rubi said...

kok gak bsa gan...

Arsyad NR said...

Terima kasih tipsnya. Kemarin saya dah coba dan sukses di blog saya. Tapi beberapa hari ini kok jadi blank ya (gak ada apa2nya), seperti punya Anda di "Baca juga". Mohon bantuannya...

Permathic said...

PEMBERITAHUAN !!!! bagi rekan-rekan blogger yg sudah memasang widget slideshow, untuk beberapa hari ini slideshow pada blog tidak tampil termasuk slideshow pada blog saya. setelah saya cek ternyata ada url yg tidak bisa di akses pada google code. sehingga saya memcoba memperbaiki sricptnya. dan akhirnya bisa juga tampil slidenya. bisa di lihat pada sidebar sebelah kiri permathic blog. nah jika rekan2 ingin slidenya tampil juga, maka ganti semua kode yang di atas menjadi kode script yang baru, bisa anda dapatkan pada link di bawah ini.

permathic.blogspot.com/2012/12/cara-membuat-slideshow-postingan-di-blog.html

ini kode yg lebih simple. semoga dengan kode yg baru ini bisa berhasil...

mariyanto widodo said...

Kyaknya menarik nich, izin cobain ya gan.

rima anisa said...

oh makanya slide show d blog saya ndak bsa..
oke saya coba kode yang baru..makasih yaaa ^.^
kunjungi blog saya ya di smartmathematics22.blogspot.com dan diaryrima22.blogspot.com.
Thankyouuuu ya ^^

naufal syarifuddin said...

mantap bro bisa coba kunjungan baliknya ya www.naufalthedarkness.blogspot.com

Adinda_Nancy said...

waktu pertama coba kan bisa, nah kenapa waktu buka blog lagi dan lagi itu susah munculnya ya slide shownya? kenapa om?

Fairuz Alhumaira said...

Terimakasih ;;;;)

http://fairuzalhumaira.blogspot.com/

Chandra Septian said...

Mantap gan artikelnya , jangan lupa mampir ya http://candraseptian.blogspot.com/

coolie doolie stone said...

Kerenn!!
mau dcoba akh

sukmagie said...

Mampir ya sob :-)
sukses terus deh

rendi yenzia said...

gak bisa masuk gan. betul gak nih Postingannya?

retno said...

sukses selalu ya , makasih

retno said...

makasih, postingannya sangat bermanfaat

giant said...

thanks infonya, sukses selalu..

tiara said...

keren postingannya,sukses ya

gilang said...

makasih dah berbagi ilmunya,,

gladis said...

wow infonya keren banget,

gladis said...

bermanfaat banget informasinya ,,thanks ya

sederhana said...

terima kasih banget buat infonya ,

anwar said...

referensinya mantap bos....

Kang Trick said...

Mantap aku Buutuh Yang ini, tapi tolong berikan infonya supaya tulisan isi postingnya agak panjang, saya punya munculnya sedikit sekali kurang lebih cuma 30 Huruf, Makasiih gan Tlg berkunjung juga di blogku www.kangtrick.com

faul said...

terima kasih infonya...mantab...

habib syahid said...

gk muncul gan padahal udah diganti ama url punya saya

pernak-pernik lucu said...

Bisa gan,tapi agak berat loadingnya

krist said...

kalau mau pasang slide antar label gimana caranya ya

auliabalitour.blogspot.com said...

Kunjungan Malam gan, segera dicoba. Follow and Mampir ke blok aq gan www.auliabalitour.blogspot.com

Dina Agustiana said...

gak biza muncul gan....
yg merah udah saya ganti ma alamat url blog saya tp tetp gak biza muncul tu gan...???

Cakrawala said...

Artikelnya lumayan bantu banget neh ...

Dedi said...

Bagus dan membantu banget

Karimun Jawa said...

Terima kasih sharingnya.
Mungkin kalau berbentuk widget, lebih mudah cara pakainya :)

Lukis Darto said...

http://www.maslukis.com/2016/10/bayar-semua-tagihan-langsung-dari-hp.html

Framada Hendri S said...

terimakasih infonya om....mohon ijin untuk saya terapkan di blog saya ya...
terimakasih om...salam kenal