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....
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>
<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
116 komentar:
thanks gan infonya....
kebetulan ane lagi nyari script nya
sipp gan,,
jangan lupa,, sering - sering kunjungi permathic gan...
bagus bang
Thank you..
gak nimbul tu slideshow nya?!!
mungkin url yg saya kasih warna merah belum di ganti kali gan ma url blognya agan..
aku pengguna wordpress udah ku coba dah ku ganti tulisan warna merah dg url blog aku...kok ttp gak bs ya?
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.
keren mas post nya blog walking ya http://purnomosymb19.blogspot.com/ thx
bang follow blog ane :: http://boga-boedaxtekaje.blogspot.com/
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.
untuk agan Entjep.. udah ane follow blognya agan...
bagus
makasi gan akhirnya bisa pasang widget ini juga...
follow blog ane
Ko' saya gak bsa ya gan.. Knp ya?
tulisan warna merahnya di ganti dulu gan,. sesuai ma url blog yg mw di pasang slideshow
untuk merubah tinggi dan lebarnya di edit di mana..?
Follow blog gout yooo http://vinaa-thelucky-bastard.blogspot.com
TQ infonyaa :D
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?
:)
boleh lah .. makasih gan infonya ...
cek >>
x-komodo
makasih gan
janagn lupa kunjungan balik ya ,,,
http://catatanrobith.blogspot.com/
Sipp,,,, Bisa di terapkan
kunjangan malam, nice posting and happy blogging
Trimakasih atas ilmu yang agan berikan . . . Langsung aja izin mencoba
thanks yea sob info na sngat berguna bnged bwd blog saya,.,
tx bngedd bguss,., :)
thanks gan infonya....
kebetulan aq jg lagi nyari script nya, http://dwiworo.blogspot.com
bisa gan, pi images tidak kluar..?
[ apa images yg di tampilkan harus tersimpan di blogger..? ] soalnya semua images blog q link dari luar semua.
trima kasih infonya
trima kasih infonya
makasih gan ilmunya
makasih gan....
sippp....
kunjungi punya ane juga ya...
http://izat17.blogspot.com/
Okay! dicoba gan :)
Follow yo: qolamqarnain.blogspot.com
mau tanya, ini bentuk slide nya vertikal apa horizontal ya bang?
makasih infonya :)
http://skatersklk.blogspot.com/
Keren banget widget nya..maksih gan...
Terimakasih banyak mas sudah share tutorialnya. :)
follow aku http://listiantikahfiana.blogspot.com/ :)
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..
Gan Kok di BLOG ane gk nge SLIDE ya .??? MOHON BANTUANNYA ...
bermip.blogspot.com
bermip.co.cc
bermip.tk
thanks infonya :) tapi di blog gue kok gak ngeslide ya bang? padahal urlnya udah bener
Thanks gan untuk Infonya semoga tetap berkarya...
thanks gan..
Thank you, sob.
setelah dicoba berhasil gan,.. sekalian mo tanya nh, apa blh slideshownya dibuat horisontal gan,..
thanks
Rare Angon Berkunjung Sobat, Artikel dan tutorialnya sudah dicoba ... kenapa blog saya berat yaa.. mohon solusinya, trims
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???
di blog sya tidak mau jalan slide Gan...bgmna in ya? mohon di bantu ya, thank...
wah postingannya bermanfaat banget buat ane gan.. makasih ya gan...
gan keren ..udah lama dicari...baru ketemu nih
jangan lupa mampir ya
frabagas.blogspot.com
Nampaknya paten caranya tapi penempatan slidenya di mana dan apa format slidnya?
ajipzzzzzzzzzzz gan ane dah coba.tanx.
Maturnuwun Infonya ... Monggo mampir di Blog saya
Thanks sudah berbagi ilmunya, sukses selalu...
THANKS BANGET YA GAN...
UDH ANE COBA...
DAN BERHASIL....
JANGAN LUPA BERKUNJUNG KE http://sefriwandanahsb.blogspot.com/
Ok gan petunjuknya oke banget
visit me yah!
http://jhangsoen.blogspot.com
ini yang ane cari...
makasih masta
thanks infonya ya
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 :)
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
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.
bank,ane pernah coba tutorial di atas tp kok gak bisa yach, bentuin donk pengin bgt punya slide.
Pengen pasang tapi nggak ada demonya, jadi takut salah pasang.
Makasih sharingnya mas :)
Ijin Copas bos
postingan yang bagus. salam kunjungan
terimakasih Share nya, langsung dicoba.
Terima Kasih Kawan, ini sangat bermanfaat...
Merubah lebar box nya gimana ya?
Ada contohnya gag Bro
bagus gan coba kalo pya aku gmn yah apa yg hrs di tamabahin.
http://www.suryapratamaartistik.blogspot.com
thanks bro info nya sangat membantu semoga sukses
blog ane bro http://www.prediksitogelasiajp.blogspot.com
thanks very much bro . . . infonya sangat membantu . . .
blog saiia bro http://sayetmdahri.blogspot.com
Thanks ya Ma Info nya..., Kunjung balik ya mas...!
mantap juga...belajar dulu yaaa
cara ganti gambar widget slideshowx gmna ya?
kereeenn gan.. thx.
Bagus ni bila dipasang dalam web terutama web komersial seperti punya saya biar tampilannya makin menarik
terima kasih buat info dan langkah2nya
makasih ga, mampir ke blog kami juga jajanngampuss.blogspot.com :)
asikk...makasih gan
:)
bermanfaat banget...
Follow my blog
gan punya saya ok ndak jalan tolog kasih tau pa penyebabnya cek disini http://sunarnoponorogo.blogspot.com
kok gak bsa gan...
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...
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...
Kyaknya menarik nich, izin cobain ya gan.
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 ^^
mantap bro bisa coba kunjungan baliknya ya www.naufalthedarkness.blogspot.com
waktu pertama coba kan bisa, nah kenapa waktu buka blog lagi dan lagi itu susah munculnya ya slide shownya? kenapa om?
Terimakasih ;;;;)
http://fairuzalhumaira.blogspot.com/
Mantap gan artikelnya , jangan lupa mampir ya http://candraseptian.blogspot.com/
Kerenn!!
mau dcoba akh
Mampir ya sob :-)
sukses terus deh
gak bisa masuk gan. betul gak nih Postingannya?
sukses selalu ya , makasih
makasih, postingannya sangat bermanfaat
thanks infonya, sukses selalu..
keren postingannya,sukses ya
makasih dah berbagi ilmunya,,
wow infonya keren banget,
bermanfaat banget informasinya ,,thanks ya
terima kasih banget buat infonya ,
referensinya mantap bos....
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
terima kasih infonya...mantab...
gk muncul gan padahal udah diganti ama url punya saya
Bisa gan,tapi agak berat loadingnya
kalau mau pasang slide antar label gimana caranya ya
Kunjungan Malam gan, segera dicoba. Follow and Mampir ke blok aq gan www.auliabalitour.blogspot.com
gak biza muncul gan....
yg merah udah saya ganti ma alamat url blog saya tp tetp gak biza muncul tu gan...???
Artikelnya lumayan bantu banget neh ...
Bagus dan membantu banget
Terima kasih sharingnya.
Mungkin kalau berbentuk widget, lebih mudah cara pakainya :)
terimakasih infonya om....mohon ijin untuk saya terapkan di blog saya ya...
terimakasih om...salam kenal
Nice your post
Post a Comment