Blogger Dynamic Slider by Label / Recent Posts

Share61
blogger dynamic slider


"Blogger Dynamic Slider" is a simple yet powerful automatic slider for blogger. The slider content generates from blog's feed dynamically, based upon users settings via jQuery Ajax Call. It is fully responsive. As it is a Dynamic Slider, the slider content updates whenever a new post comes (if it fits with user settings criteria).


Blogger Dynamic Slider(bdSlider) Features

  • Dynamic - Slider Content Generates Automatically
  • Fully Responsive
  • Slider By a Specific Label
  • Slider By Recent Posts
  • Preloader Function
  • Lots of Customization Options
  • Easy Setup & Customization

Live Testing Tool for Blogger Dynamic Slider

Well now this automatic recent post slider have a testing tool where you can enter your blog URL and see how Dynamically it generate a slider from your blog's feed. This tools have other basic options like Image Size, Max Item, Label (you can specify a label to generate slider from. Though it is optional). Check out the Live Testing Tool.


Demo/ Examples



How It Works ?

The slider content generates from blogger blog's feed, dynamically by jQuery AJAX call, and then FlexSlider takes effect and take care of the sliding features. That it, nothing fancy but very useful for blogger users.

Installation Guide

STEP - 1: Go to Your Blogs Home > Template (Backup your template to be safe)
STEP - 2: Edit HTML
STEP - 3: Search for closing head: </head> in the template (Hint: to search on template: click anywhere in the code block and press Ctrl+F)
STEP - 4: Copy the following code below and paste just before </head>
<!-- BloggerDynamicSlider Basic CSS -->
<style type="text/css">
/**
 *  jQuery BloggerDynamicSlider v1.0.0
 *  Copyright 2016 http://shuvojitdas.com
 *  Contributing Author: Shuvojit Das
 *  Plugin URL: https://github.com/shuvojit33/blogger-dynamic-slider
 *
 */

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400);
@import url("https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/flexslider.min.css");

/* Preloader */

.flexslider.loading:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLB16UQ5QCEae3fFpILNX7mnAXW7vwIZJR0mATMBWBmXAuw2-gS4kZyFyjkPcN7HEGAmrYBXV4FvDpsnlQx-Dd4XAGb-ChDuBHvwTYSBeck0s8F5uVikClhb1dnHZ1kqFD9g9orqfmkPWk/h120/loader.gif) no-repeat center center;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 9999;
}

.flexslider.loading ul.flex-direction-nav,
.flexslider.loading ol,
.loading .flex-caption {
    display: none;
}

.flexslider {
    border: 1px solid #cacaca;
    padding: 4px;
    margin: 0 auto 60px auto;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.flexslider a {
    text-decoration: none;
}


/* Caption/Post Title */

.flex-caption {
    position: relative;
    padding-left: 15px;
    padding-right: 10px;
    height: 60px;
    background: #FFFFFF;
    color: #1C1C1C;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 26px;
    line-height: 26px;
    margin: 0;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flex-caption span {
    display: table-cell;
    vertical-align: middle;
    height: 60px;
}

.flex-caption.overlayDark,
.flex-caption.overlayLight {
    margin-bottom: -60px;
    bottom: 60px;
    position: relative;
}

.flex-caption.overlayDark {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
}

.flex-caption.overlayLight {
    background: rgba(255, 255, 239, 0.9);
    color: #000;
}

ul.slides li a {
    display: block;
    overflow: hidden;
}


/* blogger css conflicts fix */

.flexslider ul {
    margin: 0 !important;
    padding: 0 !important;
    line-height: initial !important;
}

.flexslider ul.flex-direction-nav li {
    margin: 0;
    padding: 0;
    line-height: initial;
}

.flexslider ul li {
    margin-bottom: 0 !important;
}

.flexslider img {
    padding: 0;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

ul.flex-direction-nav {
    position: static;
}

ul.flex-direction-nav li {
    position: static;
}

.error {
    font-family: monospace, sans-serif;
}

@media (max-width: 600px) {
    .flex-caption {
        font-size: 20px;
        line-height: 20px;
        font-weight: 400;
    }
}
</style>
<!-- Include Dependency Script -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="http://shuvojitdas.com/script/jquery.bdslider.min.js"></script>

Note: If you had already added jQuery .js into your blogs template then don't add it again as sometimes multiple jQuery ruins everything. Here jQuery script tag is located at the very first of this code block above.

STEP - 5: So now the slider engine scripts are installed, you are ready to add slider(s) anywhere in your blog including gadget, post or page. Well, just copy the code below and paste in a HTML Gadget or Post or Page

<div id="slider1"></div>
<script type="text/javascript">
$(document).ready(function() {
    $("#slider1").BloggerDynamicSlider({
        imageWidth: 636, // Image width in px value
        imageHeight: 398, // Image height in px value
        maxItem: 6, // Max number of Slider Image to show
        animation: "slide", // Select your animation type, "fade" or "slide"
        showPostTitle: true, // Show post title as Caption ? (true/false)
        postTitleStyle: "overlayLight", // Caption style: "default, "overlayDark" or "overlayLight"
    });
});
</script>

STEP - 6: Save & Done! Pretty Simple & Dynamic.


Check these demos again and see their respective code below them to see what bdSlider can provide, And build your very own slider :)


All the options of 'Blogger Dynamic Slider'

$("#slider1").BloggerDynamicSlider({
    blogURL: "", // Your Blog URL. example: "http://imagesliderforblogger.blogspot.com"; Only need to specify when fetching slider content from another blog
    labelName: "", // Show posts from specific Label. Specify a 'Label', or leave it empty to fetch from all recent posts
    maxItem: 6, // Max number of Slider Posts to show
    showPostTitle: true, // Show post title as Caption ? (true/false)
    postTitleStyle: "default", // Select post title/caption style "default, "overlayDark" or "overlayLight"
    imageWidth: 544, // Image width in px value
    imageHeight: 280, // Image height in px value
    animation: "fade", // Select your animation type, "fade" or "slide"
    controlNav: true, // Navigation for paging control of each slide? (true/false)
    directionNav: true, // Previous/next navigation? (true/false)
    pauseOnHover: false, // Pause slideshow when hovering over slider, then resume when no longer hovering (true/false)
    slideshowSpeed: 7000, // Set the speed of the slideshow cycling, in milliseconds
    animationSpeed: 600, // Set the speed of animations, in milliseconds
    animationLoop: true, // Should the animation loop? (true/false)
});


Thank you all for your love and support :) 

jQuery Image Slider(wow slider) with Thumbnails for Blogspot

Share24

Here I came up with another awesome image slider for blogspot. This is a 'jQuery Image Slider with Thumbnails' created by WOWSlider. I did a little customization for making it blogger friendly with due respect to wowslider. See demo below.



Lets Step forward to adding this jQuery Image Slider with Thumbnails for Blogspot

1. Go to Blogger Dashboard > Layout > Add a Gadget
2. Select HTML/Javascript
3. Copy the code below and paste on it. 
<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">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<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/AVvXsEgT55ZH2ttzEz1TjzZ9iFvQaLwARz00uTXCUaF-XKg43kkfDktJmwwReUHhlguLgN4s88h285xssa2_7j9eIJ1oKR_oklvvf4u_LT4ps9FBDRVxlCki3AtfK0fHIcChZWs7qi6ffpY0_Zmn/s550/sample1.jpg" title="Sunset" />
                        </a>A boat with beautiful sunset.</li>
                    <li>
                        <a href="#">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRhj31-1LGXhKqfg5SVeg9z2o6445q_jXv8qCe317dyb5z8D33ZdxjuxP_EJGRe619t-AsPsiPIDncXHiu7QS3EClOg9OtUPGxjoipNXW8ESikr3h8l18DeqTuZn9EQ9So5s1F0hE-9U1y/s550/sample2.jpg" title="Rainbow" />
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXSt_t0NzVODs9_KrEKOsX5AeULArNSijAti4y4bxYV5jEHzUqEKnh1lvsyvKQptwGEXq-FiPOo6lyIsKGo2YlhdzkkluOidDAvB4VwiIJpAlF0MKEmkcicW1-UXSgjOxunjBR9C6lmYbK/s550/sample3.jpg" title="True Nature" />
                        </a>Tree in field with blue sky.</li>
                    <li>
                        <a href="#">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV3ri1UkwPlP0Fb1yZdJEq1YpDD_sImxWUNY-v3JFfPjb5fN1oVd7IUo7YsvzQNtMEEtZk4DhUWURUe4WJLb3cqTrC8cwsvhCKAHrX0__M2Yg-cIigeJIugiGNOUdR9rH4jyW-Pg_1Oe8i/s550/sample4.jpg" title="Sunrise" />
                        </a>Amaizing sunrise moment</li>
                    <li>
                        <a href="#">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2k6uHtNNiEzq8wbp2fSm0nJgNcDUBeJfsmwL8c1hb_VAXS2aShDIvTcwalTQn4vnK2qBjAhin2RObiSWhRrcx7pKHrPJkmD-K04T6MhA2cp2dzY2W1L8kCvaps5Bjsu8G0KD6seUtmueg/s550/sample5.jpg" title="CAR in HDR Nature" />
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMmsmER_8IYC3I4CAVhkD2tjAZJ254_FXFNeMYFhJRaV7EKBSCaWPR4YVi8IIhl68E7koV5_TnOcwQT-xY_Kf-PHqq_BYv81viFjT3UcnWGjfTcYTfXHdUDzXFi9tiUXFn8lctT5S9xmMX/s550/sample6.jpg" title="Sunshine" />
                        </a>
                    </li>
                </ul>
            </div>
            <div class="jslider_thumbs">
                <div>
                    <a href="#" title="Sunset"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii-yayib3mA3kykBNzYZf8wWh3oKw4HA86SkMi4Y_WT-9bDs_sM8Se03wc8FwAGMpBdJOzgGTNjw4nARoBy4zaJH7IFEpda6n4AwY6EILimTzmU7TKuBm_gmLN7hRnnDKUhcQkbLQmj6S_/s85/sample1.jpg" /></a>
                    <a href="#" title="Rainbow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSbRfQT3fcqiY9LSIBABl2ZJymPFdXhlEmZQMYXw12V7XD3WcPFxU4iI5-lwYFr479YJ394Pl9GrmuioTvbwoF9tlcP2agAFOGgi4YCzivI7GT1i2MKj9PTyPmhcLOdVrS1LpHDFZle3Pa/s85/sample2.jpg" /></a>
                    <a href="#" title="True Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP8UwgTjz3GVJh3CG8Xg7MRIQi-o8RgaZTy082_63zxGsoR1qTeUM5l5fylVBnC-VL2CafAFDkjHxrWt3zKyGpXAU2mH0MrVZWCEEN72uR46gVw22yl3_mWEu2oMXxt1Ngc08D-xWBEZUK/s85/sample3.jpg" /></a>
                    <a href="#" title="Sunrise"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-E4Pt39e-qpws7PxMluuon9BO4_-QswR1w4LAazp3Ka8qLYoE3SZlwV8kY5g67E8RcIN4OA62SyNEKk1jUkI6lh2DqXrOWgIjdDRTXa25kFWQOaVQcW_xqacwT72Lm-QeY4O_-XIKYm_9/s85/sample4.jpg" /></a>
                    <a href="#" title="CAR in HDR Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYD8aTIWV5fISvhyphenhyphendOOO1oB_12ur0cWb_GIlZO3ouTy28g_i7wYMiEDTuUXNKg90y6YfdTB4qhvJ9D4VOXxHv6qVBn8QfMwmaAvwqtD2EVB3K7SRx4Dywgf3dvhJgXlKZPWfDkqn7rj-Eb/s85/sample5.jpg" /></a>
                    <a href="#" title="Sunshine"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsJIBazIKXkmBTz-OeVb-TF3IcqdvwEiVSW55Nw8VoWbz1d5PLQQwEAWdrwTvUueV4QdM8G44DT5oWW7DOPIrTF-uiy_rLRZggNFX_X5dkEJ5RzxNJPcvrUST9VlkrD8mdZSRuaOGWgBth/s85/sample6.jpg" /></a>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script>

4. Save & you're done! But don't forget to update slider images and text with yours.

How to add a Responsive Slideshow Widget to Blogger

Share48
It is almost 2016. And now responsive/ fluid design became very trendy things for websites/ blogs. Not only trendy but it is very necessary for websites to have responsive design, as high percentage of users going mobile.

So here I came up with a responsive slideshow widget for Blogger webmasters. This slideshow widget is build with Camera Slideshow jQuery Plugin, which is an open source project of Pixedelic


Blogger Slideshow

Features of Responsive Blogger Slideshow Widget (Camera Slideshow)

  • Fully Responsive
  • Cross-Browser Supported 
  • 33 Different Colors Skin
  • Lots of options to customize it in your way
  • jQuery Easing Supported
  • Custom jQuery Mobile for mobile devices compatibility.


Check out the demo (Static & Blogger version) of Responsive Slideshow Widget



I Would Say ‘One Of The Best’ If You Ask For Responsive Slider/Slideshow Plugin

There is many beautiful jQuery slider/ slideshow plugin out there. But I found that most of them (slider with lots of features) aren’t fully responsive. Another dependable responsive slider I found is FlexSlider, which is very popular for its simplicity. Alongside responsiveness this Camera Slideshow plugin has some other cool features too including..
  • Lots of transition effects
  • Play/Pause, Thumbnail Navigation, ToolTip Navigation etc. 
  • HTML5 Data Attribute supported. By using it, many properties can be added to slide. For example a link/URL, thumbnail URL/ slider image URL etc.
  • You don’t have to worry about image size or aspect ratio. 
  • Images will be re-sized to fit automatically with the slideshow box. 
  • When images are larger than container / slideshow box, or have different aspect ratio then they will be cropped (from middle) automatically with maintaining their aspect ratio, that’s mean they won’t get Stretch.
  • Video Supported.

I recommend to add larger images than the container/slideshow box or at least same size of the container.



Get The Code!

To add this slideshow to your BlogSpot blog, just Copy and Paste the code given below into a HTML/Javascript Widget. 

  1. Go to Blogger Dashboard > Layout > Add a Gadget Select HTML/Javascript 
  2. Copy the code below and paste on it. Then Save it. And you’re done!.
<!---------------------------------------------
    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:

Look at the code below. This is where you customize the slideshow. Play with it. (Read code comments for get easily).

Slideshow Options 
    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
.fluid_container {
    margin: 0 auto; /* aling centered */
    width: 100%;
    max-width: 900px;
    overflow: hidden;
}


Your feedback is most welcome!

How To Make A Slider Appear Only On Homepage In Blogger

Share13
Many of you asked about "how to appear a slider only on homepage" in comments. I want to mention those comments here and say sorry to those guys for not answering your questions earlier. But here I am now with the solution.

 Comments


slider only on homepage

Follow the steps below to make it appear only on homepage. 

(I presume that you’ve added the slider code in a widget/gadget. )
  1. Find your Slider Widget/Gadget ID (Gadget ID Finding Tutorial)
  2. Got to Template > Edit HTML
  3. Search in template for the Gadget ID you find out on Step 1. Note: Click anywhere in the template code area and press CTRL+F to open the search box. Paste the ID And press Enter.
  4. You’ll find the Widget Code as shown below. Here HTML1 is our Widget ID
      <b:widget id='HTML1' locked='false' title='' type='HTML'>
    <b:includable id='main'>
        <!-- only display title if it's non-empty -->
        <b:if cond='data:title != &quot;&quot;'>
            <h2 class='title'><data:title/></h2>
        </b:if>
        <div class='widget-content'>
            <data:content/>
        </div>
        
        <b:include name='quickedit' />
    </b:includable>
  </b:widget>

  5. We have to add the conditional tag for the Widget Code to appear only on homepage. See below
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    Widget Code Here 
</b:if>

  6. So after you made the change it will looks like:
    <b:widget id='HTML1' locked='false' title='' type='HTML'>
    <b:includable id='main'>
        <b:if cond='data:blog.url == data:blog.homepageUrl'>
            <!-- only display title if it's non-empty -->
            <b:if cond='data:title != &quot;&quot;'>
                <h2 class='title'><data:title/></h2>
            </b:if>
            <div class='widget-content'>
                <data:content/>
            </div>
            
            <b:include name='quickedit' />
        </b:if>
    </b:includable>
</b:widget>

  7. Now "Save Template" and you are done.
Does It Help? Let me know in comments.

Lightbox Photo Gallery for Blogger (PrettyPhoto Lightbox)

Share8
lightbox for blogger


Hi there, how you'll doing? I hope you are doing great! Well today I came up with a damn cool Lightbox + Slider for your blogger blog. It is created from a  jQuery lightbox plugin called "PrettyPhoto". Well I won't waste your time to introducing it anymore. Just check out the demo, it will say it all.

PrettyPhoto Lightbox Demo


Installation Guide

If this is what you're looking for, follow the simple steps to install it.


STEP - 1: Go to Your Blogs Home > Template > Edit HTML

STEP - 2: Add jQuery script. (If your template already have a jQuery script installed then skip this step.) 

Place the following code just before the closing head tag </head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>


STEP - 3: Add PrettyPhoto plugin. 

Place the following code just before the closing head tag </head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prettyPhoto/3.1.6/js/jquery.prettyPhoto.min.js' type='text/javascript'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/prettyPhoto/3.1.6/css/prettyPhoto.min.css' rel='stylesheet' type='text/css'/>


STEP - 4: Initialize the Lightbox (Final step)

Place the following code just before the closing body tag </body>
<script type='text/javascript'>
  $(&quot;.post-body&quot;).each(function(i) {
      $(this).find(&quot;img&quot;).closest(&#39;a&#39;).attr(&quot;rel&quot;, &quot;prettyPhoto[gallery&quot; + (i + 1) + &quot;]&quot;);
  });
</script>
<script charset='utf-8' type='text/javascript'>
  $(document).ready(function(){
      $(&quot;.post-body a[rel^=&#39;prettyPhoto&#39;]&quot;).prettyPhoto({
          animation_speed:&#39;normal&#39;,
          slideshow: 5000, 
          theme: &#39;pp_default&#39;,
          autoplay_slideshow: true
      });
  });
</script>

Congratulation! You've successfully installed the PrettyPhoto Lightbox. Any question or any suggestion to improve this widget is more than welcome. Cheers!

FlexSlider Basic Image Slider Widget for Blogger

Share72
FlexSlider for Blogger

This is a responsive jQuery image slider. This simple but amazing slider developed by woothemes.com. It has some really nice features that makes you like it. The most cool feature is it is extremely responsive and lightweight; you don't have to tensed about the sliders width / height even all images width and height adjust automatically. Here it is customized for blogger/blogspot so you can just copy and paste the code to install on your blogger blog.

Check out live demo


Let’s Install the FlexSlider Image Slider Widget in Blogger

  1. Go to Blogger Dashboard > Layout > Add a Gadget Select HTML/Javascript 
  2. Copy the code below and paste on it.
<!-- SLIDER CSS -->
<style type="text/css">
/*
 * jQuery FlexSlider v2.2.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 */


/* Browser Resets
*********************************/

.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus {
    outline: none;
}

.slides,
.flex-control-nav,
.flex-direction-nav {
    margin: 0;
    padding: 0;
    list-style: none;
}


/* FlexSlider Necessary Styles
*********************************/

.flexslider li {
    border: 0 none !important;
    padding: 0 !important;
    text-indent: 0 !important;
    margin-bottom: 0 !important;
}

.flexslider {
    margin: 0;
    padding: 0;
}

.flexslider .slides > li {
    display: none;
    -webkit-backface-visibility: hidden;
}

#flex-isfb {
    overflow: hidden;
    position: relative;
    min-height: 200px;
    padding: 3px;
}


/* Hide the slides before the JS is loaded. Avoids image jumping */

.flexslider .slides img {
    width: 100%;
    display: block;
}

.flexslider .slides,
.flexslider .slides img,
.flex-direction-nav {
    margin: 0 !important;
    padding: 0 !important;
}

.flex-pauseplay span {
    text-transform: capitalize;
}


/* Clearfix for the .slides element */

.slides:after {
    content: "\0020";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

html[xmlns] .slides {
    display: block;
}

* html .slides {
    height: 1%;
}


/* No JavaScript Fallback */


/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */

.no-js .slides > li:first-child {
    display: block;
}


/* FlexSlider Default Theme
*********************************/

.flexslider {
    margin: 0 0 60px;
    background: #fff;
    border: 4px solid #fff;
    position: relative;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    -o-box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    zoom: 1;
}

.flex-viewport {
    max-height: 2000px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

.loading .flex-viewport {
    max-height: 300px;
}

.flexslider .slides {
    zoom: 1;
}

.carousel li {
    margin-right: 5px;
}


/* Direction Nav */

.flex-direction-nav {
    *height: 0;
}

.flex-direction-nav a {
    text-decoration: none;
    display: block;
    width: 40px;
    height: 45px;
    margin: -20px 0 0;
    position: absolute;
    top: 50%;
    z-index: 10;
    overflow: hidden;
    opacity: 0;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.8);
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease;
}

.flex-direction-nav .flex-prev {
    background: url("http://project.dimpost.com/flexslider-basic/img/arrows1.png") no-repeat scroll -15px -92px transparent;
    left: -50px;
}

.flex-direction-nav .flex-next {
    background: url("http://project.dimpost.com/flexslider-basic/img/arrows1.png") no-repeat scroll -15px -15px transparent;
    right: -50px;
    text-align: right;
}

.flexslider:hover .flex-prev {
    opacity: 0.5;
    left: 10px;
}

.flexslider:hover .flex-next {
    opacity: 0.5;
    right: 10px;
}

.flexslider:hover .flex-next:hover,
.flexslider:hover .flex-prev:hover {
    opacity: 0.9;
}


/* Pause/Play */

.flex-pauseplay a {
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: 5px;
    left: 10px;
    opacity: 0.8;
    z-index: 10;
    overflow: hidden;
    cursor: pointer;
    color: #000;
}

.flex-pauseplay a:before {
    font-family: "flexslider-icon";
    font-size: 20px;
    display: inline-block;
    content: '\f004';
}

.flex-pauseplay a:hover {
    opacity: 1;
}

.flex-pauseplay a.flex-play:before {
    content: '\f003';
}


/* Control Nav */

.flex-control-nav {
    width: 100%;
    position: absolute;
    bottom: -40px;
    text-align: center;
}

.flex-control-nav li {
    margin: 0 6px;
    display: inline-block;
    zoom: 1;
    *display: inline;
}

.flex-control-paging li a {
    width: 11px;
    height: 11px;
    display: block;
    background: #666;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    text-indent: -9999px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
    -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
}

.flex-control-paging li a:hover {
    background: #333;
    background: rgba(0, 0, 0, 0.7);
}

.flex-control-paging li a.flex-active {
    background: #000;
    background: rgba(0, 0, 0, 0.9);
    cursor: default;
}

.flex-control-thumbs {
    margin: 5px 0 0;
    position: static;
    overflow: hidden;
}

.flex-control-thumbs li {
    width: 25%;
    float: left;
    margin: 0;
}

.flex-control-thumbs img {
    width: 100%;
    display: block;
    opacity: .7;
    cursor: pointer;
}

.flex-control-thumbs img:hover {
    opacity: 1;
}

.flex-control-thumbs .flex-active {
    opacity: 1;
    cursor: default;
}

@media screen and (max-width: 860px) {
    .flex-direction-nav .flex-prev {
        opacity: 1;
        left: 10px;
    }
    .flex-direction-nav .flex-next {
        opacity: 1;
        right: 10px;
    }
}
</style>
<!-- SLIDER HTML -->
<div id="flex-isfb">
    <!-- Preloader -->
    <div id="preloader"></div>
    <style>
    /* Preloader */
    
    #preloader {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #fff;
        /* change if the mask should have another color then white */
        z-index: 999999999999;
        /* makes sure it stays on top */
    }
    </style>
    <div class="flexslider">
        <ul class="slides">
            <li>
                <a href="http://dimpost.com">
                    <img src="http://project.dimpost.com/flexslider-basic/img/1.jpg" />
                </a>
            </li>
            <li>
                <a href="http://dimpost.com">
                    <img src="http://project.dimpost.com/flexslider-basic/img/2.jpg" />
                </a>
            </li>
            <li>
                <a href="http://dimpost.com">
                    <img src="http://project.dimpost.com/flexslider-basic/img/3.jpg" />
                </a>
            </li>
        </ul>
    </div>
</div>
<!-- SLIDER JS -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://project.dimpost.com/flexslider-basic/js/jquery.flexslider-min.js"></script>
<script type="text/javascript">
$(window).load(function() {
    $('.flexslider').flexslider({
        animation: "slide",
        controlNav: true,
        directionNav: true,
        easing: "swing",
        slideshowSpeed: 3000,
        animationSpeed: 600,
    });
});
</script>
<script type="text/javascript">
//<![CDATA[
$(window).load(function() {
        $('#preloader').delay(350).fadeOut('slow');
    })
    //]]>
</script>
 3. Save, and we are done. 


NOTE: 
  • Forget about slider width and height, it will adjust automatically.
  • Replace slider images(search <img src ) with your own uploaded images (You can upload image on blogspot, flickr etc.) 
  • There is some other things you may want to play with, see below. I guess I don't have to explain that because they are named like as they are. Play with them...
$('.flexslider').flexslider({
    animation: "slide",
    controlNav: true,
    directionNav: true,
    easing: "swing",
    slideshowSpeed: 3000,
    animationSpeed: 600,
});
Share8