Begitu pula dengan Blog atau Website, apabila blog tersebut memiliki pernak pernik gambar yang unik dan enak dilihat, tentu saja akan membuat pengunjung blog menjadi betah jika sedang berkunjung ke blog anda.
Pada kesempatan kali ini, kerjaterus.com akan berbagi sedikit trik simple namun hasilnya akan terlihat memuaskan. yaitu Cara Membuat Gallery SlideShow di Blog Tanpa Harus Edit HTML.
Cara ini banyak di gemari sebagian banyak blogger pemula seperti saya, karena caranya sangatlah simple dan tidak ribet harus Edit HTML .
Pada artikel yang sebelumnya juga telah kami bagikan Trik Cara Pasang Slide Out Recommended Post Tanpa Edit HTML
Jika penasaran kita lihat dulu tampilan Gallery SlideShow nya di bawah ini:
Untuk melihat DEMO KLIK DISINI
Jika anda tertarik Membuat Gallery SlideShow di Blog Tanpa Edit HTML silahkan ikuti langkah langkahnya di bawah ini:
Cara Pertama:
Masuk ke =>> blogger.com
Cara Kedua:
Pilih Tata Letak =>> Tambah Gadget seperti gambar di bawah ini:
Kemudian Pilih HTML/ Javasript seperti gambar di bawah ini
 |
| Klik Untuk Memperbesar Gambar |
Cara Ketiga:
Copy dan Paste Kode di bawah ini di kolom HTML/ Javascript
<style type="text/css">
.slider-box {
background: none repeat scroll 0 0 #FAFAFA;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 0 3px #333333;
margin: 0 auto;
width: 675px;
overflow: hidden;
}
#slider-wrapper {
margin: 0 auto;
padding: 10px;
}
#jslider-container {
border: 2px solid #FFFFFF;
max-width: 550px;
position: relative;
text-align: left;
z-index: 90;
}
</style>
<link href="http://project.dimpost.com/image-slider/wowslider/css/wow-slider.css" rel="stylesheet" type="text/css"></link>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<br />
<div class="slider-box">
<div id="slider-wrapper">
<div id="jslider-container">
<div class="jslider_images">
<ul>
<li><a href="http://dimpost.com/">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8O53k1W5RscrJueiQpopDTG3SAOvUSi6f1cFvBmfDvHcbJjWVczm_ZEu1AMzQZ_g9TCnICx0Es45cT6EA7LZFkT8nvhd66O5TafScVHzpP0oh44RWMR3TkKDK-d_YoNVLM0cIP1Z5SlCM/s550/sample1.jpg" title="Sunset" />
</a>A boat with beautiful sunset.</li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2365866921618955720#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8wQ-OtiMZVIXO5U-fsU0qDjoahlzjpZVYGg8VgUwrckq4gC9_tkwSKH-m5t7cXfxYLhpy9bNz-EmJkmkUDcZN2JR8Ct75DCO_nmisvyzMc19x92jkd05xGmBf2QS5wq4MQSYxYbAJ1S9V/s550/sample2.jpg" title="Rainbow" />
</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2365866921618955720#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS_Ranzt3uf3XkPQ7fxQ4JG7_suktnKBWRXoIh-jAsyRFgAXZBw0i2aoeeDBuqEbGkamXUYaJACy2arxQryQ22LOotNwyUBei8x7G-RuxOnuS3H0KujdJi_vnk0a-v3TfXa3TGEXfjnA-o/s550/sample3.jpg" title="True Nature" />
</a>Tree in field with blue sky.</li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2365866921618955720#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw2gwK2rLmy-6WycedPoUlNX_w5sguXdCghTwuA1SuXmb_kETSPOnSE7ESs6cWtuqTSjIq3E2ipDcQC1SeXaP9gSz4DvKxcgbl4Dt_nqzle2rRhfkHobbQs9FWdKHRL-n6i7Hg3HjMd418/s550/sample4.jpg" title="Sunrise" />
</a>Amaizing sunrise moment</li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2365866921618955720#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc7eK5OLzPHGWzeAXzuM0vUQKYYBAdDbiZ5zTm7w3P__ClC6bbAZIdBt_LmCZb2dtL1bwlnKPv-Wk3XWuzZkx_AmPPyDP7KBVPdozisONTB9iVOpj3U6CI27YLTX94x1WMV-RoC87_rzKL/s550/sample5.jpg" title="CAR in HDR Nature" />
</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2365866921618955720#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4QCyPYdk91RxLFNhQA7HL1WEu71eyNhEX7uWfyuptwZFjxsHq220upxt-syacLn_TU3HDpHgGWczR_53hXBUFz8D9VP46sHvnAItkS4ZDaqKM7ZebnS1qO-P8L7c7Yra2sDMeQakkHSxI/s550/sample6.jpg" title="Sunshine" />
</a></li>
</ul>
</div>
<div class="jslider_thumbs">
<div>
<a href="https://www.blogger.com/blogger.g?blogID=2365866921618955720#" title="Sunset"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRfeITj4iZz6kpht71ldiwK8UXyYuFtnhOTe7mPPrmeuvdVjcu2FvwD9qAFqivfM0QR2IjLDrGLUnAdcdo5b0wjmPIuH0ehc_Abk1wmGseaLzITO8U53O17EfHi8Ce_SpE23sbioO1tyKi/s85/sample1.jpg" /></a>
<a href="https://www.blogger.com/blogger.g?blogID=2365866921618955720#" title="Rainbow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP87nOC3wmuwSPmLP9ChdLRBH5vWzOSbkG1eEj4KwDCCDJrCBU1hF1Dck4rIJmnD8I_lV7b2nr-qBgFoszGqbqBRXJyd6SqwQoVNgrM7-G1WXcxQhQfzVryv3NTEM671ZeYfdgS3m8sZzt/s85/sample2.jpg" /></a>
<a href="https://www.blogger.com/blogger.g?blogID=2365866921618955720#" title="True Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAcnVbdjYKEE1ciD_zOwNwNPzFh5130OA0_od9L22EAisAdBiwIYhSgslQN-2cMr2FJKz2_gSDhr76pI24Bi8TiKY3jvFpYuvzYTMMYeSdPLMbivF7vm6vELmcHZKT2euCzsl8JXBil6yB/s85/sample3.jpg" /></a>
<a href="https://www.blogger.com/blogger.g?blogID=2365866921618955720#" title="Sunrise"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM8_sAycoRBo9LjWBwVxtNNPstvnUa4XlpdSj4DwbJyMOSf8Nd02jExzVFG7ZqlPVsGCoJjUwA_h5-kgqDfLTKZObhIUr_zOjCDz50Ga6HvA5CONlLlCFk7TpIzxr1FMEkVINs_4O52CUU/s85/sample4.jpg" /></a>
<a href="https://www.blogger.com/blogger.g?blogID=2365866921618955720#" title="CAR in HDR Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH5KVbp-tcMfhceD2FMyqVFapcDVTAHMZbMamkopV7TrQHs1yrOlVz-9ktSXuIcV4TTZPILMTv9-uThci70ZTd_QcANDbHyh8qp3EElkukqEjJ9CWjARS6aYfCXIOzJZ1RXJ0IftLObx9h/s85/sample5.jpg" /></a>
<a href="https://www.blogger.com/blogger.g?blogID=2365866921618955720#" title="Sunshine"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji242kYvuru0WIs5UQ1PjLWS7kcw217RRwoHAibrbLW96BsgxWYQapfmT3dXIAf742j1ktQwgW6oUBDyWE1WbXgBiKG_ovVom5LeE8Au_QR8v1rrMvH2BwwIkyMadOTyp22nO1Htd5FZMn/s85/sample6.jpg" /></a>
</div>
</div>
</div>
</div>
</div>
<script src="http://dimpost.googlecode.com/files/wow-slider.js" type="text/javascript"></script>
.slider-box {
background: none repeat scroll 0 0 #FAFAFA;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 0 3px #333333;
margin: 0 auto;
width: 675px;
overflow: hidden;
}
#slider-wrapper {
margin: 0 auto;
padding: 10px;
}
#jslider-container {
border: 2px solid #FFFFFF;
max-width: 550px;
position: relative;
text-align: left;
z-index: 90;
}
</style>
<link href="http://project.dimpost.com/image-slider/wowslider/css/wow-slider.css" rel="stylesheet" type="text/css"></link>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<br />
<div class="slider-box">
<div id="slider-wrapper">
<div id="jslider-container">
<div class="jslider_images">
<ul>
<li><a href="http://dimpost.com/">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8O53k1W5RscrJueiQpopDTG3SAOvUSi6f1cFvBmfDvHcbJjWVczm_ZEu1AMzQZ_g9TCnICx0Es45cT6EA7LZFkT8nvhd66O5TafScVHzpP0oh44RWMR3TkKDK-d_YoNVLM0cIP1Z5SlCM/s550/sample1.jpg" title="Sunset" />
</a>A boat with beautiful sunset.</li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2365866921618955720#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8wQ-OtiMZVIXO5U-fsU0qDjoahlzjpZVYGg8VgUwrckq4gC9_tkwSKH-m5t7cXfxYLhpy9bNz-EmJkmkUDcZN2JR8Ct75DCO_nmisvyzMc19x92jkd05xGmBf2QS5wq4MQSYxYbAJ1S9V/s550/sample2.jpg" title="Rainbow" />
</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2365866921618955720#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS_Ranzt3uf3XkPQ7fxQ4JG7_suktnKBWRXoIh-jAsyRFgAXZBw0i2aoeeDBuqEbGkamXUYaJACy2arxQryQ22LOotNwyUBei8x7G-RuxOnuS3H0KujdJi_vnk0a-v3TfXa3TGEXfjnA-o/s550/sample3.jpg" title="True Nature" />
</a>Tree in field with blue sky.</li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2365866921618955720#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw2gwK2rLmy-6WycedPoUlNX_w5sguXdCghTwuA1SuXmb_kETSPOnSE7ESs6cWtuqTSjIq3E2ipDcQC1SeXaP9gSz4DvKxcgbl4Dt_nqzle2rRhfkHobbQs9FWdKHRL-n6i7Hg3HjMd418/s550/sample4.jpg" title="Sunrise" />
</a>Amaizing sunrise moment</li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2365866921618955720#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc7eK5OLzPHGWzeAXzuM0vUQKYYBAdDbiZ5zTm7w3P__ClC6bbAZIdBt_LmCZb2dtL1bwlnKPv-Wk3XWuzZkx_AmPPyDP7KBVPdozisONTB9iVOpj3U6CI27YLTX94x1WMV-RoC87_rzKL/s550/sample5.jpg" title="CAR in HDR Nature" />
</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2365866921618955720#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4QCyPYdk91RxLFNhQA7HL1WEu71eyNhEX7uWfyuptwZFjxsHq220upxt-syacLn_TU3HDpHgGWczR_53hXBUFz8D9VP46sHvnAItkS4ZDaqKM7ZebnS1qO-P8L7c7Yra2sDMeQakkHSxI/s550/sample6.jpg" title="Sunshine" />
</a></li>
</ul>
</div>
<div class="jslider_thumbs">
<div>
<a href="https://www.blogger.com/blogger.g?blogID=2365866921618955720#" title="Sunset"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRfeITj4iZz6kpht71ldiwK8UXyYuFtnhOTe7mPPrmeuvdVjcu2FvwD9qAFqivfM0QR2IjLDrGLUnAdcdo5b0wjmPIuH0ehc_Abk1wmGseaLzITO8U53O17EfHi8Ce_SpE23sbioO1tyKi/s85/sample1.jpg" /></a>
<a href="https://www.blogger.com/blogger.g?blogID=2365866921618955720#" title="Rainbow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP87nOC3wmuwSPmLP9ChdLRBH5vWzOSbkG1eEj4KwDCCDJrCBU1hF1Dck4rIJmnD8I_lV7b2nr-qBgFoszGqbqBRXJyd6SqwQoVNgrM7-G1WXcxQhQfzVryv3NTEM671ZeYfdgS3m8sZzt/s85/sample2.jpg" /></a>
<a href="https://www.blogger.com/blogger.g?blogID=2365866921618955720#" title="True Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAcnVbdjYKEE1ciD_zOwNwNPzFh5130OA0_od9L22EAisAdBiwIYhSgslQN-2cMr2FJKz2_gSDhr76pI24Bi8TiKY3jvFpYuvzYTMMYeSdPLMbivF7vm6vELmcHZKT2euCzsl8JXBil6yB/s85/sample3.jpg" /></a>
<a href="https://www.blogger.com/blogger.g?blogID=2365866921618955720#" title="Sunrise"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM8_sAycoRBo9LjWBwVxtNNPstvnUa4XlpdSj4DwbJyMOSf8Nd02jExzVFG7ZqlPVsGCoJjUwA_h5-kgqDfLTKZObhIUr_zOjCDz50Ga6HvA5CONlLlCFk7TpIzxr1FMEkVINs_4O52CUU/s85/sample4.jpg" /></a>
<a href="https://www.blogger.com/blogger.g?blogID=2365866921618955720#" title="CAR in HDR Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH5KVbp-tcMfhceD2FMyqVFapcDVTAHMZbMamkopV7TrQHs1yrOlVz-9ktSXuIcV4TTZPILMTv9-uThci70ZTd_QcANDbHyh8qp3EElkukqEjJ9CWjARS6aYfCXIOzJZ1RXJ0IftLObx9h/s85/sample5.jpg" /></a>
<a href="https://www.blogger.com/blogger.g?blogID=2365866921618955720#" title="Sunshine"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji242kYvuru0WIs5UQ1PjLWS7kcw217RRwoHAibrbLW96BsgxWYQapfmT3dXIAf742j1ktQwgW6oUBDyWE1WbXgBiKG_ovVom5LeE8Au_QR8v1rrMvH2BwwIkyMadOTyp22nO1Htd5FZMn/s85/sample6.jpg" /></a>
</div>
</div>
</div>
</div>
</div>
<script src="http://dimpost.googlecode.com/files/wow-slider.js" type="text/javascript"></script>
Kemudian Klik SIMPAN dan selesai..
Demikian tadi trik Cara Membuat Galery SlideSow Unik di Blog yang bisa kami bagikan, jika ada pertanyaan silahkan tinggalkan komentar pada kotak komentar di bawah.
Sumber : http://www.kerjaterus.com/2014/08/cara-baru-memasang-galery-slideshow.html
