Đánh giá chủ đề:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Slide Hình cho blogger
#1

  1. Vào Blogger Dashboard > Layout > Add a Gadget Select HTML/Javascript 

  2. Copy code bên dưới, sửa các link hình lại và save là xong.
Mã:
<!---------------------------------------------
   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="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/1.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/1.jpg">
           <div class="camera_caption fadeFromBottom">
               Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>
           </div>
       </div>
       <div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/2.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/2.jpg">
           <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="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/3.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/3.jpg">
           <div class="camera_caption fadeFromBottom">
               <em>It's completely free</em> (even though a donation is appreciated)
           </div>
       </div>
       <div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/4.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/4.jpg">
           <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="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/5.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/5.jpg">
           <div class="camera_caption fadeFromBottom">
               It supports captions, HTML elements and videos.
           </div>
       </div>
   </div>
   <!-- #camera_wrap_1 -->
</div>
<!-- .fluid_container -->

Customization Options:
Mã:
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)

To adjust the slider size edit this CSS rule from the main code
Mã:
.fluid_container {

   margin: 0 auto; /* aling centered */

   width: 100%;

   max-width: 900px;

   overflow: hidden;
}

Demo: http://www.pmanhatrang.com/
Chữ ký của Noname 020
ღღღღღTài sản của Noname (View All Items) ღღღღღ
Reply
Những người đã cảm ơn


Có thể liên quan đến chủ đề
Chủ đề: Tác giả Trả lời: Xem: Bài mới nhất
  Blogger cho doanh nghiệp Noname 2 416 18-12-17, 11:38 AM
Bài mới nhất: Noname

Chuyển nhanh:


User(s) browsing this thread: 1 Guest(s)
Diễn Đàn Thơ Văn Thi Ẩm Lâu|Nhà Hàng Sông Thơ| PMA Nha Trang| Gỗ Acrylic Không Đường Line