Cara Memasang Slide Show di Blog dengan HTML

<div style="text-align: justify;"> Joko-Blog | Cara Memasang Slide Show di Blog Dengan HTML - Awalnya sih ingin membantu sosialisasi program / acara dengan memasang gambar di blog, tapi setelah terpasang koq jadinya monoton. Akhirnya terfikir untuk merubah gambar yang sudah terpasang tersebut dengan menggantinya dengan tampilan Slide Show (gambar yang berubah-rubah / berganti-ganti). Sebenarnya di blogspot sudah menyediakan widget yang bisa langsung dipakai untuk Slide Show ini, namun kelihatannya kok ya terbatas untuk sumber / gambar yang bisa kita tampilkan. Jadi gambar yang tampil kemungkinan tidak sesuai dengan keinginan kita, karena di widget tersebut hanya akan mengambil gambar dari "link feed url" yang kita pilih.</div> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVnvEAe6vsAVKE-OLW0FZlQhaYgdrOOkBPHnPhqMGLv8EfWdD0efCayHrPLM2dPoh8wxrQmgM7IFpS3wK_jIGQmHktXYY9QHqLWbP103tdKVR2tBhcHJlfBI3TknT0ufiiSr8/s1600/Tataletak-Gadget.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Slide Show" border="0" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVnvEAe6vsAVKE-OLW0FZlQhaYgdrOOkBPHnPhqMGLv8EfWdD0efCayHrPLM2dPoh8wxrQmgM7IFpS3wK_jIGQmHktXYY9QHqLWbP103tdKVR2tBhcHJlfBI3TknT0ufiiSr8/s320/Tataletak-Gadget.png" title="Cara Membuat Slide Show" width="320" /></a></div> <br /> Salah satu cara yang mungkin bisa kita coba adalah dengan menggunakan script di bawah ini :<br /> <blockquote class="tr_bq"> <span style="color: blue;"><script src='http://yourjavascript.com/53816065231/Database5.js' type='text/javascript'></script></span><br /> <span style="color: blue;"><script type="text/javascript" src="http://yourjavascript.com/65160840132/cycle.js"></script></span><br /> <span style="color: blue;"><script type="text/javascript"></span><br /> <span style="color: blue;">$(document).ready(function() {</span><br /> <span style="color: blue;">$('#content-slider').cycle({</span><br /> <span style="color: blue;">fx: 'fade'</span><br /> <span style="color: blue;">});</span><br /> <span style="color: blue;">});</span><br /> <span style="color: blue;"></script></span><br /> <span style="color: blue;"><style type="text/css"></span><br /> <span style="color: blue;">#content-slider {</span><br /> <span style="color: blue;">   position: relative;</span><br /> <span style="color: blue;">   width:</span> <span style="color: lime;">350</span><span style="color: blue;">px;</span><br />    <span style="color: blue;">height: </span><span style="color: lime;">250</span>px;<br />    <span style="color: blue;">overflow: hidden;</span><br /> <span style="color: blue;">   margin:0 auto;</span><br /> <span style="color: blue;">}</span><br /> <span style="color: blue;">#content-slider img {</span><br /> <span style="color: blue;">   display: block;</span><br />    width: <span style="color: lime;">350</span>px;<br />    height: <span style="color: lime;">250</span><span style="color: blue;">px;</span><br /> <span style="color: blue;">}</span><br /> <span style="color: blue;"></style></span><br /> <span style="color: blue;"><div id="content-slider"></span><br /> <span style="color: blue;"><img src="</span><span style="color: #cc0000;">URL Gambar 1</span><span style="color: blue;">" /></span><br /> <span style="color: blue;"><img src="</span><span style="color: #cc0000;">URL Gambar 2</span><span style="color: blue;">" /></span><br /> <span style="color: blue;"><img src="</span><span style="color: #cc0000;">URL Gambar 3</span><span style="color: blue;">" /></span><br /> <span style="color: blue;"><img src="</span><span style="color: #cc0000;">URL Gambar 4</span><span style="color: blue;">" /></span><br /> <span style="color: blue;"></div></span></blockquote>  Langkah selengkapnya sebagai berikut :<br /> <br /> 1. Login ke Akun Blogspot Anda (sudah tahu kan),<br /> <br /> 2. Masuk ke Dashboard dan pilihlah Tata Letak, (1.tata letak, 2.pilih gadget, 3.pilih HTML / Java Script)<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgesG59pWpVT2aMFMB3NTLf6gUW0DA_9YRM0XFoo-dto22wt6V_07NgfiPLmvvmTuoHd8QY9z1TK8Ie2Z-_CfaC6hoC9S36pQXIWNg97DxLovnZGA5FtsiGV4rkRDHsqP-YOrA/s1600/Tataletak-Gadget.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Tata Letak" border="0" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgesG59pWpVT2aMFMB3NTLf6gUW0DA_9YRM0XFoo-dto22wt6V_07NgfiPLmvvmTuoHd8QY9z1TK8Ie2Z-_CfaC6hoC9S36pQXIWNg97DxLovnZGA5FtsiGV4rkRDHsqP-YOrA/s320/Tataletak-Gadget.png" title="Tata Letak" width="320" /></a></div> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <div style="text-align: justify;"> 3. Pilih Gadget HTML / Javascript, setelah langkah ke-2 di atas dilanjutkan dengan mengcopy script di atas dan pastekan di Gadget HTML / Java Script yang sudah dipilih tadi (perlu diperhatikan letak gadged yang dipilih agar tidak membuat tampilan blog kita jadi malah berantakan / kurang sedap dipandang) selanjutnya apabila sudah silahkan pilih "simpan"</div> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8kEWwuZQQHQPEXYTjZZBtTS1t8-qXHiN_L1vdBJx5lk8LlWBsLcvHO8kgkcPOAJcQ_dhlJD-pPFQTp1RH8Fk6WbCxvLgdLwRsoFB_48Z7Y9zNrPqYJJ88KrkA8ZhMxsQAFXc/s1600/Gadget-HTML.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Gadget - HTML" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8kEWwuZQQHQPEXYTjZZBtTS1t8-qXHiN_L1vdBJx5lk8LlWBsLcvHO8kgkcPOAJcQ_dhlJD-pPFQTp1RH8Fk6WbCxvLgdLwRsoFB_48Z7Y9zNrPqYJJ88KrkA8ZhMxsQAFXc/s320/Gadget-HTML.png" title="Gadget - HTML" width="274" /></a></div> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <div style="text-align: justify;"> 4. Untuk mengatur gambar yang ingin ditampilkan, silahkan ubah <span style="color: red;">"</span><span style="color: #cc0000;">URL Gambar 1",</span><span style="color: red;">"</span><span style="color: #cc0000;">URL Gambar 2", </span><span style="color: red;">"</span><span style="color: #cc0000;">URL Gambar 3",</span><span style="color: red;">"</span><span style="color: #cc0000;">URL Gambar 4" <span style="color: black;">dengan url gambar yang sudah anda upload ataupun url yang sudah ada di hosting / internet (flickr, picasa, photobucket, dll).</span></span></div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <span style="color: #cc0000;"><span style="color: black;">5. Sedangkan untuk tampilan tinggi atau lebar anda bisa mengubah nilai dari </span></span><span style="color: #cc0000;"><span style="color: black;"><span style="color: blue;">width:</span> <span style="color: lime;">350</span><span style="color: blue;">px;<span style="color: black;"> atau </span></span></span></span>height: <span style="color: lime;">250</span><span style="color: blue;">px;<span style="color: black;"> pada script di atas. <span style="background-color: yellow;">Untuk </span></span></span><span style="background-color: yellow;"><span style="color: blue;"><span style="color: black;"><span style="color: #cc0000;"><span style="color: black;"><span style="color: blue;">width:</span> <span style="color: lime;">350</span><span style="color: blue;">px; <span style="color: black;">bisa anda ganti menjadi </span></span></span></span></span></span></span><span style="color: blue;"><span style="color: black;"><span style="color: #cc0000;"><span style="color: black;"><span style="color: blue;"><span style="color: black;"><span style="color: #cc0000;"><span style="color: black;"><span style="background-color: yellow;"><span style="color: blue;">width:</span> <span style="color: lime;">100%</span></span><span style="color: blue;"><span style="background-color: yellow;">;</span> <span style="color: black;">apabila menginginkan tampilan slide yang rapi (tidak terpotong / tidak balance). Sedangkan untuk </span></span></span></span></span></span></span></span></span></span><span style="color: blue;"><span style="color: black;"><span style="color: #cc0000;"><span style="color: black;"><span style="color: blue;"><span style="color: black;"><span style="color: #cc0000;"><span style="color: black;"><span style="color: blue;"><span style="color: black;">height: <span style="color: lime;">250</span><span style="color: blue;">px;<span style="color: black;"> bisa anda sesuaikan dengan gambar yang tersedia / keinginan anda.</span></span></span></span></span></span></span></span></span></span></span></span></div> <div style="text-align: justify;"> <span style="color: blue;"><span style="color: black;"><span style="color: #cc0000;"><span style="color: black;"><span style="color: blue;"><span style="color: black;"><span style="color: #cc0000;"><span style="color: black;"><span style="color: blue;"><span style="color: black;"><span style="color: blue;"><span style="color: black;"><br /></span></span></span></span></span></span></span></span></span></span></span></span> <span style="color: blue;"><span style="color: black;"><span style="color: #cc0000;"><span style="color: black;"><span style="color: blue;"><span style="color: black;"><span style="color: #cc0000;"><span style="color: black;"><span style="color: blue;"><span style="color: black;"><span style="color: blue;"><span style="color: black;">6. Mungkin setelah memasang script ini anda akan menjumpai tampilan blog anda jadi berantakan, hal ini bisa diatasi denga :</span></span></span></span></span></span></span></span></span></span></span></span></div> <ul> <li><span style="color: blue;"><span style="color: black;"><span style="color: #cc0000;"><span style="color: black;"><span style="color: blue;"><span style="color: black;"><span style="color: #cc0000;"><span style="color: black;"><span style="color: blue;"><span style="color: black;"><span style="color: blue;"><span style="color: black;">menghapus script pertama (kalau diperhatikan script di atas memuat 2 script)</span></span></span></span></span></span></span></span></span></span></span></span></li> </ul> <ul> <li><span style="color: blue;"><span style="color: black;"><span style="color: #cc0000;"><span style="color: black;"><span style="color: blue;"><span style="color: black;"><span style="color: #cc0000;"><span style="color: black;"><span style="color: blue;"><span style="color: black;"><span style="color: blue;"><span style="color: black;">sebelum memasang script ini bisa juga dengan mem"parse" kode script terlebih dahulu.</span></span></span></span></span></span></span></span></span></span></span></span></li> </ul> <span style="color: blue;"><span style="color: black;"><span style="color: #cc0000;"><span style="color: black;"><span style="color: blue;"><span style="color: black;"><span style="color: #cc0000;"><span style="color: black;"><span style="color: blue;"><span style="color: black;"><span style="color: blue;"><span style="color: black;">OK, semoga bermanfaat.</span></span></span></span></span></span></span></span></span></span></span></span><br /> <span style="color: blue;"><span style="color: black;"><span style="color: #cc0000;"><span style="color: black;"><span style="color: blue;"><span style="color: black;"><span style="color: #cc0000;"><span style="color: black;"><span style="color: blue;"><span style="color: black;"><span style="color: blue;"><span style="color: black;"><i><span style="font-size: xx-small;">(thanks to : ibumudabijak)</span></i> </span></span></span></span></span></span></span></span></span></span></span></span><br /> <br />  

Cara Memasang Slide Show di Blog dengan HTML

Joko-Blog | Cara Memasang Slide Show di Blog Dengan HTML - Awalnya sih ingin membantu sosialisasi program / acara dengan memasang gambar di blog, tapi setelah terpasang koq jadinya monoton. Akhirnya terfikir untuk merubah gambar yang sudah terpasang tersebut dengan menggantinya dengan tampilan Slid…

Baca selengkapnya »