THREE STEPS TO ADD SLIDES TO BLOGGER


Slides can be added to your blogger blogs. Slides make your blog look elegantly and captivating. It is pretty simple to add already created slide to your blog. Here the three steps to create slide on blogspot. Follow the steps below;

1.Log in to blogspot account  [ Blogger ]
2. Locate theme editor on your blog just on first page after you sign in  or just do this by adding a HTML/Javascript widget on the layout setting.
3. Paste this slide code to your widget ;


<!---------------------------------------------
   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: 500%;
   max-width: 1000px;
   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">
              The day you allow your feelings determine your prayer you have decided to become a leaf tossed and blown every direction of the wind. <em>You must stand firm in prayer for your family, your territory, your friends as well as your self</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">
            Refuse to be limited by your physical ability; your potentials are limitless. <em>Two ways to increase your income are to get more jobs or increase the streams of inflow into your life.</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>Upgrading your spiritual life enables the Holy Spirit to flow more easily in your life.</em> [ Business people without a solid walk with the Lord become easy prey for the devil ]
           </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">A strong spirit puts you ahead of whatever the enemy throws at you.
                <em> You can do supernatural things, and you can make supernatural things happen by the power of God’s Spirit.</em> Grace is the solution to wrong behavior.
           </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">
               All is well.
           </div>
       </div>
   </div>
   <!-- #camera_wrap_1 -->
</div>
<!-- .fluid_container →

How  To Adjust the Slides to Your Taste
There are things you can do do with slide HTML above. You can change the image sources and caption fade.  Locate the data-src to change the images and div class= “camera_caption … to change caption fade. You can also enlarge and reduce the size but putting a positive integer into;

   width: 500%;
   max-width: 1000px;
However, the only disadvantage in using slides already created  by someone else is that if the slide is clicked on it will automatically land to creator site which is somehow to me. Do enjoy your time testing this slide
  









No comments:

Post a Comment