BLOGNYA PAKPUR

CARA MEMASANG GALERY SLIDE SHOW PADA BLOG

Untuk mepercantik tampilan blog sekaligus untuk mempublikasikan foto/ gambar atau  hasil karya  maka memasang slide show pada widget adalah solusi terbaik.

Untuk menambahkan slide ini ke blog BlogSpot Anda, hanya Copy dan Paste kode yang diberikan di bawah ini ke HTML / Javascript Widget.

1. Pergi ke Blogger Dashboard> Tata Letak> Tambah Gadget Pilih HTML / Javascript
2. Salin kode di bawah ini dan paste di Widget paling atas. 
3. Kemudian Simpan. Dan Anda sudah selesai !.

<!---------------------------------------------
Blogger Slideshow Widget by
http://imagesliderforblogger.blogspot.com/
org. by dimpost.com
----------------------------------------------->
<!-- Camera_Slideshow Styles -->
<link rel="stylesheet" id="camera-css" href="http://project.dimpost.com/camera-slideshow/css/camera.css" type="text/css" media="all" />
<!-- Camera Slideshow Scripts -->
<script type='text/javascript' src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
<script type='text/javascript' src='http://project.dimpost.com/camera-slideshow/scripts/jquery.mobile.customized.min.js'></script>
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
<script type='text/javascript' src='http://project.dimpost.com/camera-slideshow/scripts/camera.min.js'></script>
<script type='text/javascript'>
jQuery(function() {
jQuery('#camera_wrap_1').camera({
time: 2500, // milliseconds between the end of the sliding effect and the start of the nex one
transPeriod: 1200, // length of the sliding effect in milliseconds
thumbnails: false, // thumnails & tooltip is controlled by it
pagination: true, // only when "pagination" is set to "false" thumbnails will be visible
fx: 'curtainTopLeft, curtainTopRight, curtainBottomLeft, curtainBottomRight, curtainSliceLeft, curtainSliceRight, blindCurtainTopLeft, blindCurtainTopRight, blindCurtainBottomLeft, blindCurtainBottomRight, blindCurtainSliceBottom, blindCurtainSliceTop, stampede, mosaic, mosaicReverse, mosaicRandom, mosaicSpiral, mosaicSpiralReverse, topLeftBottomRight, bottomRightTopLeft, bottomLeftTopRight, bottomLeftTopRight, scrollLeft, scrollRight, scrollHorz, scrollBottom, scrollTop', // transition effects
hover: false, // Pause on hover
height: '50%' // slideshow height (50% is default)
});
});
</script>
<style type="text/css">
.fluid_container {
margin: 0 auto;
/* aling centered */
width: 100%;
max-width: 900px;
overflow: hidden;
}


/* Blogger CSS Conflict Fix */

.camera_pag_ul {
border: none !important;
background: none !important;
}

.camera_pag_ul li {
float: inherit !important;
padding: inherit !important;
}

.camera_pag_ul {
margin: 0 !important;
border: 0 !important;
}
</style>
<div class="fluid_container">
<!-- camera_slideshow camera_wrap-->
<div class="camera_wrap" id="camera_wrap_1">
<div data-link="URL LINK" data-thumb="#" data-src="URL GAMBAR">
<div class="camera_caption fadeFromBottom">
Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>
</div>
</div>
<div data-link="URL LINK" data-thumb="#" data-src="URL GAMBAR">
<div class="camera_caption fadeFromBottom">
It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em>
</div>
</div>
<div data-link="URL LINK" data-thumb="#" data-src="URL GAMBAR">
<div class="camera_caption fadeFromBottom">
<em>It's completely free</em> (even though a donation is appreciated)
</div>
</div>
<div data-link="URL LINK" data-thumb="#" data-src="URL GAMBAR">
<div class="camera_caption fadeFromBottom">
Camera slideshow provides many options <em>to customize your project</em> as more as possible
</div>
</div>
<div data-link="URL LINK" data-thumb="#" data-src="URL GAMBAR">
<div class="camera_caption fadeFromBottom">
It supports captions, HTML elements and videos.
</div>
</div>
</div>
<!-- #camera_wrap_1 -->
</div>
<!-- .fluid_container -->

*Ket : Untuk "URL LINK" ganti dengan Link Tautan, dan yang "URL Gambar" ganti dengan Url gambar tautan anda.
Untuk ukuran gambar direkomendasikan (900x450)
Semoga bermanfaat ya:)

sumber : http://www.starpurnama.tk/2016/08/cara-memasang-widget-slideshow.html