How To Add Text Watermark To Blogger

I founded too many questions for adding Watermark to blogger but no proper solution for it, so I decided to create tutorial for my users to add text watermark to blogger. Watermark helps you to reserve your content copyrights and to relate your blog content with your name or brand. If you want to add horizontal, vertical or diagonal text watermark to blogger just follow the given step by step tutorial with images and demo.

Steps : Adding Text Watermark to Blog Posts

DEMO

Step 1. Log in to your Blogger account, then go to Template > Edit HTML.

Step 2. Click anywhere inside the code and search for following code ( CTRL+F ) :

<data:post.body/>

Step 3. Replace the code with this code :

Note : Their will be two codes replace both.

<div class='hbzwatermark'><data:post.body/></div>

Step 4. Again click anywhere inside the code and search for following code :

]]></b:skin>

Step 5. Place this code just above it :

.hbzwatermark { background: transparent url("https://2.bp.blogspot.com/-x3m5Qr2P3UA/Vu7cNIfcUcI/AAAAAAAAAds/1ziODMCywIgVlr3quFx0SBtPmAYp74T7g/s1600/transparent_text_effect%25282%2529.png") repeat scroll 0% 0% / 200px auto; }

Step 6. Configuration :

• Replace https://2.bp.blogspot.com/-x3m5Qr2P3UA/Vu7cNIfcUcI/AAAAAAAAAds/1ziODMCywIgVlr3quFx0SBtPmAYp74T7g/s1600/transparent_text_effect%25282%2529.png  with your watermark text image URL.
• Adjust the value 200 to adjust the size of the watermark text.

To Create Watermark Text Image Click here.

• For Diagonal Watermark set 'Text rotation' = -45
• For Horizontal Watermark set 'Text rotation' = 0
• For Vertical Watermark set 'Text rotation' = 90
• For Watermark Do not tick 'Draw text with outline' and neglect 'Outline thickness' & 'Outline color'.
• Select 'Text color' such that your text is visible over it.
• For example for white background set 'Text color' to "F0F0F0" and for Dark Background set it to "606060".

To Find the URL of the Watermark image click here. 


Step 7. Save Template.

That's it

Now checkout your blog posts you will find your watermark placed behind your blog posts. For any issues related to above tutorial comment below. Stay Updated, Browse Howbloggerz ! :)

Read more ...

How To Get The URL Of An Image In Blogger

As each day there are lots of new users joining the world of blogging, It is very important to know about the basic tricks in blogger and finding the URL, address or link of the image you upload on your blog post is one of them. If you want to know how to find the URL of an image, photo or picture follow the given instructions :

Steps : Finding The URL Of An Image

Step 1. Log in to your Blogger account, then click on New Post.

Step 2. Click on HTML ( Right to compose ) and clear the codes from input area.

Step 3. Click on Image upload icon, in pop-up window select the image you want to upload and click add selected.

Step 4. Again a pop-up box appear, Select None under 'Image alignment' and Original size under 'Image size', then click 'OK'.

Step 5. Now some codes will appear in your input field area like this :

This code contains two same URLs of an image ( copy any one ) :

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXKPbZs0_vbIDjMCG7TryM1ri37oT6PiKr0Vk4gT6n5mMW8Tan0wQszkLdl8d1-DYDHJevFOK6mpPBbCD-Bf8SceU4k75trv-VpZtaYDW7FgAc_XRi_7Xj4chQPcLuGCRQ9hHQ74384bBO/s1600/3.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXKPbZs0_vbIDjMCG7TryM1ri37oT6PiKr0Vk4gT6n5mMW8Tan0wQszkLdl8d1-DYDHJevFOK6mpPBbCD-Bf8SceU4k75trv-VpZtaYDW7FgAc_XRi_7Xj4chQPcLuGCRQ9hHQ74384bBO/s1600/3.jpg" /></a>

All the images uploaded on blogger are saved anyway on PicasaWeb (unless when you removed the draft, you have also selected the option to remove the image). Therefore another way to get the URL of the already published images from your blog or directly from PicasaWeb is by using browser option :

To get the URL of the image from Picasa, click on the image to open in full size > right click on the picture and select the following option depending on the browser you are using...



- On Google Chrome > select Copy Image Address.

- If you are using Mozilla Firefox > select Copy Image Location.

- If you are using Opera > select Copy Image URL.

- If you are using Safari > select Copy Image Address.

- If you are using Internet Explorer > first select Properties, a window will open and there you will find the Address section from where you can select the URL of the image. Copy it.

Great !

Once you have selected any of these options, you'll have the URL of the image copied to the clipboard. Use Ctrl+V or paste option to paste URL. For any issues related to above instructions comment below. Stay Updated, Browse Howbloggerz ! :)

Read more ...

How To Remove Border And Shadow Around Images On Blogger

By default blogger shows border and shadow around images or photos of your blog post if you find this annoying and want to remove or delete it just follow the given tutorial with images :

Steps : To remove border from blogger images

Step 1. Log in to your Blogger account, then go to Template > Edit HTML.

Step 2. Click anywhere inside the code and search for following code ( CTRL+F ) :

]]></b:skin>

Step 3. Copy and paste the following code just above it :

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {
  padding: 0px !important;
  background: none !important;
  border: none !important;
  -moz-box-shadow: 0px 0px 0px transparent !important;
  -webkit-box-shadow: 0px 0px 0px transparent !important;
  box-shadow: 0px 0px 0px transparent !important;
}

Step 4. Save the Template.

That's it !

Now visitors of your blog will not see any border and shadow around your blog images. For any issues related to above tutorial comment below. Stay Updated, Browse Howbloggerz ! :)

Read more ...

Top jQuery LightBoxes For Blogger (with Demo)

Blogger lightbox come into play whenever you click on any image in your blogspot post, it pop-up on whole screen like image preview box and shows all images like photo gallery widget. The default blogger photo light box is not stylish and responsive to mobile version but still you can customize blogger lightbox with CSS.

There are so many blogger lightbox alternative but, i came up with top jQuery lightboxes. These custom lightboxes provides basic key benefits with additional features like auto slideshow, responsive to desktop tablets and mobiles, easy to customize etc. If you want to replace your simple blogger image lightbox viewer with a cool custom stylish responsive jQuery lightbox plugin to show off your pictures gallery in a stylish manner then just follow the below given step by step tutorial with images and demo:

Dark Background

DEMO

White Background

DEMO

Adding jQuery LightBox To Blogger

Step 1. Log in to your Blogger account, then go to Dashboard > Settings > Posts and comments.

Step 2. Find "Showcase images with Lightbox" and Select "No", Save settings.

Step 3. Then Navigate to Template > Click on setting icon under Mobile > Set Custom, then Save.

Step 4. Again go to Template > Edit HTML.

Step 5. Click anywhere inside the Template code, then search for the following code ( CTRL+F )

</head>

Step 6. Add this code just above it (any one design of your choice).

• Design 1 ( ImageLightbox )

• Design 2 ( Fancybox )

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'/>
<script src='https://dl.dropboxusercontent.com/s/44nrvf9a6dtv7a8/ImageLightbox-USER.js' type='text/javascript'></script>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'></script>
<script src='https://dl.dropboxusercontent.com/s/ooie16ljsg11jtu/fancybox-USER.js' type='text/javascript'></script>

Step 7. Again click anywhere inside the Template code, then search for the following code ( CTRL+F )

]]></b:skin>

Step 8. Add this code just above it (any one). Please select respective code in accordance to Step 6.

For Example: If you have used Design 1 code in Step 6 then choose either Design 1 (White Background) or Design 1 (Dark Background).

• Design 1 (White Background)

• Design 1 (Dark Background)

        html
        {
            /* killing 300ms touch delay in IE */
            -ms-touch-action: manipulation;
            touch-action: manipulation;
        }
                        button
                        {
                            border: none;
                            cursor: pointer;
                        }


        /* IMAGE LIGHTBOX SELECTOR */

        #imagelightbox
        {
            cursor: pointer;
            position: fixed;
            z-index: 10000;

            -ms-touch-action: none;
            touch-action: none;

            -webkit-box-shadow: 0 0 3.125em rgba( 0, 0, 0, .75 );
            box-shadow: 0 0 3.125em rgba( 0, 0, 0, .75 );
        }


        /* ACTIVITY INDICATION */

        #imagelightbox-loading,
        #imagelightbox-loading div
        {
            border-radius: 50%;
        }
        #imagelightbox-loading
        {
            width: 2.5em;
            height: 2.5em;
            background-color: rgba( 0, 0, 0, .5 );
            position: fixed;
            z-index: 10003;
            top: 50%;
            left: 50%;
            margin: -1.25em 0 0 -1.25em;
            -webkit-box-shadow: 0 0 2.5em rgba( 0, 0, 0, .75 );
            box-shadow: 0 0 2.5em rgba( 0, 0, 0, .75 );
        }
            #imagelightbox-loading div
            {
                margin: 25%;
                width: 1.25em;
                height: 1.25em;
                background-color: #fff;

                -webkit-animation: imagelightbox-loading .5s ease infinite;
                animation: imagelightbox-loading .5s ease infinite;
            }

            @-webkit-keyframes imagelightbox-loading
            {
                from { opacity: .5;    -webkit-transform: scale( .75 ); }
                50%     { opacity: 1;    -webkit-transform: scale( 1 ); }
                to     { opacity: .5;    -webkit-transform: scale( .75 ); }
            }
            @keyframes imagelightbox-loading
            {
                from { opacity: .5;    transform: scale( .75 ); }
                50%     { opacity: 1;    transform: scale( 1 ); }
                to     { opacity: .5;    transform: scale( .75 ); }
            }


        /* OVERLAY */

        #imagelightbox-overlay
        {
            background-color: rgba( 255, 255, 255, .9 );
            position: fixed;
            z-index: 9998;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }


        /* "CLOSE" BUTTON */

        #imagelightbox-close
        {
            width: 2.5em;
            height: 2.5em;
            text-align: left;
            background-color: #666;
            border-radius: 50%;
            position: fixed;
            z-index: 10002;
            top: 2.5em;
            right: 2.5em;

            -webkit-transition: color .3s ease;
            transition: color .3s ease;
        }
            #imagelightbox-close:hover,
            #imagelightbox-close:focus
            {
                background-color: #111;
            }
            #imagelightbox-close:before,
            #imagelightbox-close:after
            {
                width: 2px;
                background-color: #fff;
                content: '';
                position: absolute;
                top: 20%;
                bottom: 20%;
                left: 50%;
                margin-left: -1px;
            }
            #imagelightbox-close:before
            {
                -webkit-transform: rotate( 45deg );
                -ms-transform: rotate( 45deg );
                transform: rotate( 45deg );
            }
            #imagelightbox-close:after
            {
                -webkit-transform: rotate( -45deg );
                -ms-transform: rotate( -45deg );
                transform: rotate( -45deg );
            }


        /* CAPTION */

        #imagelightbox-caption
        {
            text-align: center;
            color: #fff;
            background-color: #666;
            position: fixed;
            z-index: 10001;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 0.625em;
        }


        /* NAVIGATION */

        #imagelightbox-nav
        {
            background-color: rgba( 0, 0, 0, .5 );
            border-radius: 20px;
            position: fixed;
            z-index: 10001;
            left: 50%;
            bottom: 3.75em;
            padding: 0.313em;

            -webkit-transform: translateX( -50% );
            -ms-transform: translateX( -50% );
            transform: translateX( -50% );
        }
            #imagelightbox-nav button
            {
                width: 1em;
                height: 1em;
                background-color: transparent;
                border: 1px solid #fff;
                border-radius: 50%;
                display: inline-block;
                margin: 0 0.313em;
            }
            #imagelightbox-nav button.active
            {
                background-color: #fff;
            }


        /* ARROWS */

        .imagelightbox-arrow
        {
            width: 3.75em;
            height: 7.5em;
            background-color: rgba( 0, 0, 0, .5 );
            vertical-align: middle;
            display: none;
            position: fixed;
            z-index: 10001;
            top: 50%;
            margin-top: -3.75em;
        }
        .imagelightbox-arrow:hover,
        .imagelightbox-arrow:focus
        {
            background-color: rgba( 0, 0, 0, .75 );
        }
        .imagelightbox-arrow:active
        {
            background-color: #111;
        }
            .imagelightbox-arrow-left
            {
                left: 2.5em;
            }
            .imagelightbox-arrow-right
            {
                right: 2.5em;
            }
            .imagelightbox-arrow:before
            {
                width: 0;
                height: 0;
                border: 1em solid transparent;
                content: '';
                display: inline-block;
                margin-bottom: -0.125em;
            }
                .imagelightbox-arrow-left:before
                {
                    border-left: none;
                    border-right-color: #fff;
                    margin-left: -0.313em;
                }
                .imagelightbox-arrow-right:before
                {
                    border-right: none;
                    border-left-color: #fff;
                    margin-right: -0.313em;
                }

        #imagelightbox-loading,
        #imagelightbox-overlay,
        #imagelightbox-close,
        #imagelightbox-caption,
        #imagelightbox-nav,
        .imagelightbox-arrow
        {
            -webkit-animation: fade-in .25s linear;
            animation: fade-in .25s linear;
        }
            @-webkit-keyframes fade-in
            {
                from    { opacity: 0; }
                to        { opacity: 1; }
            }
            @keyframes fade-in
            {
                from    { opacity: 0; }
                to        { opacity: 1; }
            }

        @media only screen and (max-width: 41.250em)
        {
            #imagelightbox-close
            {
                top: 1.25em;
                right: 1.25em;
            }
            .imagelightbox-arrow
            {
                width: 2.5em;
                height: 3.75em;
                margin-top: -2.75em;
            }
            .imagelightbox-arrow-left
            {
                left: 1.25em;
            }
            .imagelightbox-arrow-right
            {
                right: 1.25em;
            }
        }

        @media only screen and (max-width: 20em)
        {
            .imagelightbox-arrow-left
            {
                left: 0;
            }
            .imagelightbox-arrow-right
            {
                right: 0;
            }
        }

        html
        {
            /* killing 300ms touch delay in IE */
            -ms-touch-action: manipulation;
            touch-action: manipulation;
        }
                        button
                        {
                            border: none;
                            cursor: pointer;
                        }


        /* IMAGE LIGHTBOX SELECTOR */

        #imagelightbox
        {
            cursor: pointer;
            position: fixed;
            z-index: 10000;

            -ms-touch-action: none;
            touch-action: none;

            -webkit-box-shadow: 0 0 3.125em rgba( 0, 0, 0, .75 );
            box-shadow: 0 0 3.125em rgba(129, 129, 129, 0.8);
        }


        /* ACTIVITY INDICATION */

        #imagelightbox-loading,
        #imagelightbox-loading div
        {
            border-radius: 50%;
        }
        #imagelightbox-loading
        {
            width: 2.5em;
            height: 2.5em;
            background-color: rgba( 0, 0, 0, .5 );
            position: fixed;
            z-index: 10003;
            top: 50%;
            left: 50%;
            margin: -1.25em 0 0 -1.25em;
            -webkit-box-shadow: 0 0 3.125em rgba(252, 252, 252, 0.8);
            box-shadow: 0 0 3.125em rgba(252, 252, 252, 0.8);
        }
            #imagelightbox-loading div
            {
                margin: 25%;
                width: 1.25em;
                height: 1.25em;
                background-color: #fff;

                -webkit-animation: imagelightbox-loading .5s ease infinite;
                animation: imagelightbox-loading .5s ease infinite;
            }

            @-webkit-keyframes imagelightbox-loading
            {
                from { opacity: .5;    -webkit-transform: scale( .75 ); }
                50%     { opacity: 1;    -webkit-transform: scale( 1 ); }
                to     { opacity: .5;    -webkit-transform: scale( .75 ); }
            }
            @keyframes imagelightbox-loading
            {
                from { opacity: .5;    transform: scale( .75 ); }
                50%     { opacity: 1;    transform: scale( 1 ); }
                to     { opacity: .5;    transform: scale( .75 ); }
            }


        /* OVERLAY */

        #imagelightbox-overlay
        {
            background-color: rgba(86, 86, 86, 0.5);
            position: fixed;
            z-index: 9998;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }


        /* "CLOSE" BUTTON */

        #imagelightbox-close
        {
            width: 2.5em;
            height: 2.5em;
            text-align: left;
            background-color: #C9C9C9;
            border-radius: 50%;
            position: fixed;
            z-index: 10002;
            top: 2.5em;
            right: 2.5em;

            -webkit-transition: color .3s ease;
            transition: color .3s ease;
        }
            #imagelightbox-close:hover,
            #imagelightbox-close:focus
            {
                background-color: #fff;
            }
            #imagelightbox-close:before,
            #imagelightbox-close:after
            {
                width: 2px;
                background-color: #000;
                content: '';
                position: absolute;
                top: 20%;
                bottom: 20%;
                left: 50%;
                margin-left: -1px;
            }
            #imagelightbox-close:before
            {
                -webkit-transform: rotate( 45deg );
                -ms-transform: rotate( 45deg );
                transform: rotate( 45deg );
            }
            #imagelightbox-close:after
            {
                -webkit-transform: rotate( -45deg );
                -ms-transform: rotate( -45deg );
                transform: rotate( -45deg );
            }

        /* CAPTION */

        #imagelightbox-caption
        {
            text-align: center;
            color: #fff;
            background-color: #666;
            position: fixed;
            z-index: 10001;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 0.625em;
        }


        /* NAVIGATION */

        #imagelightbox-nav
        {
            background-color: rgba( 0, 0, 0, .5 );
            border-radius: 20px;
            position: fixed;
            z-index: 10001;
            left: 50%;
            bottom: 3.75em;
            padding: 0.313em;

            -webkit-transform: translateX( -50% );
            -ms-transform: translateX( -50% );
            transform: translateX( -50% );
        }
            #imagelightbox-nav button
            {
                width: 1em;
                height: 1em;
                background-color: transparent;
                border: 1px solid #fff;
                border-radius: 50%;
                display: inline-block;
                margin: 0 0.313em;
            }
            #imagelightbox-nav button.active
            {
                background-color: #fff;
            }


        /* ARROWS */

        .imagelightbox-arrow
        {
            width: 3.75em;
            height: 7.5em;
            background-color: rgba(255, 255, 255, 0.72);
            vertical-align: middle;
            display: none;
            position: fixed;
            z-index: 10001;
            top: 50%;
            margin-top: -3.75em;
        }
        .imagelightbox-arrow:hover,
        .imagelightbox-arrow:focus
        {
            background-color: rgba(167, 167, 167, 0.8);
        }
        .imagelightbox-arrow:active
        {
            background-color: #A5A5A5;
        }
            .imagelightbox-arrow-left
            {
                left: 2.5em;
            }
            .imagelightbox-arrow-right
            {
                right: 2.5em;
            }
            .imagelightbox-arrow:before
            {
                width: 0;
                height: 0;
                border: 1em solid transparent;
                content: '';
                display: inline-block;
                margin-bottom: -0.125em;
            }
                .imagelightbox-arrow-left:before
                {
                    border-left: none;
                    border-right-color: #000;
                    margin-left: -0.313em;
                }
                .imagelightbox-arrow-right:before
                {
                    border-right: none;
                    border-left-color: #000;
                    margin-right: -0.313em;
                }

        #imagelightbox-loading,
        #imagelightbox-overlay,
        #imagelightbox-close,
        #imagelightbox-caption,
        #imagelightbox-nav,
        .imagelightbox-arrow
        {
            -webkit-animation: fade-in .25s linear;
            animation: fade-in .25s linear;
        }
            @-webkit-keyframes fade-in
            {
                from    { opacity: 0; }
                to        { opacity: 1; }
            }
            @keyframes fade-in
            {
                from    { opacity: 0; }
                to        { opacity: 1; }
            }

        @media only screen and (max-width: 41.250em)
        {
            #imagelightbox-close
            {
                top: 1.25em;
                right: 1.25em;
            }
            .imagelightbox-arrow
            {
                width: 2.5em;
                height: 3.75em;
                margin-top: -2.75em;
            }
            .imagelightbox-arrow-left
            {
                left: 1.25em;
            }
            .imagelightbox-arrow-right
            {
                right: 1.25em;
            }
        }

        @media only screen and (max-width: 20em)
        {
            .imagelightbox-arrow-left
            {
                left: 0;
            }
            .imagelightbox-arrow-right
            {
                right: 0;
            }
        }

• Design 2 (White Background)

• Design 2 (Dark Background)

/* fancyBox Main */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
    padding: 0;
    margin: 0;
    border: 0;
    outline: none;
    vertical-align: top;
}

.fancybox-wrap {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8020;
}

.fancybox-skin {
    position: relative;
    background: #f9f9f9;
    color: #444;
    text-shadow: none;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}

.fancybox-opened {
    z-index: 8030;
}

.fancybox-opened .fancybox-skin {
    -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
       -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.fancybox-outer, .fancybox-inner {
    position: relative;
}

.fancybox-inner {
    overflow: hidden;
}

.fancybox-type-iframe .fancybox-inner {
    -webkit-overflow-scrolling: touch;
}

.fancybox-error {
    color: #444;
    font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
    margin: 0;
    padding: 15px;
    white-space: nowrap;
}

.fancybox-image, .fancybox-iframe {
    display: block;
    width: 100%;
    height: 100%;
}

.fancybox-image {
    max-width: 100%;
    max-height: 100%;
}

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
    background-image: url('https://2.bp.blogspot.com/-V755Gx8-aHo/VvLBeoE0lfI/AAAAAAAAAgI/OpsdezqDFgkS2nN1F5vWYbBvfedfEg04A/s1600/fancybox_sprite.png');
}

#fancybox-loading {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -22px;
    margin-left: -22px;
    background-position: 0 -108px;
    opacity: 0.8;
    cursor: pointer;
    z-index: 8060;
}

#fancybox-loading div {
    width: 44px;
    height: 44px;
    background: url('https://1.bp.blogspot.com/-FBR9kEb_gaI/VvLB3gVvDLI/AAAAAAAAAgU/ha179LldSXYq9ZlC4exnXj77ZY8EPuq2w/s1600/fancybox_loading.gif') center center no-repeat;
}

.fancybox-close {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    z-index: 8040;
}

.fancybox-nav {
    position: absolute;
    top: 0;
    width: 40%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
    background: transparent url('https://2.bp.blogspot.com/-PIoTiFEzeK0/VvLB3HBpVLI/AAAAAAAAAgM/cTIi7zRnHt4ZH3RfyB_Z3aQexOfGAl8ng/s1600/blank.gif'); /* helps IE */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    z-index: 8040;
}

.fancybox-prev {
    left: 0;
}

.fancybox-next {
    right: 0;
}

.fancybox-nav span {
    position: absolute;
    top: 50%;
    width: 36px;
    height: 34px;
    margin-top: -18px;
    cursor: pointer;
    z-index: 8040;
    visibility: hidden;
}

.fancybox-prev span {
    left: 10px;
    background-position: 0 -36px;
}

.fancybox-next span {
    right: 10px;
    background-position: 0 -72px;
}

.fancybox-nav:hover span {
    visibility: visible;
}

.fancybox-tmp {
    position: absolute;
    top: -99999px;
    left: -99999px;
    visibility: hidden;
    max-width: 99999px;
    max-height: 99999px;
    overflow: visible !important;
}

/* Overlay helper */

.fancybox-lock {
    overflow: hidden !important;
    width: auto;
}

.fancybox-lock body {
    overflow: hidden !important;
}

.fancybox-lock-test {
    overflow-y: hidden !important;
}

.fancybox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    display: none;
    z-index: 8010;
    background: url('https://2.bp.blogspot.com/-t6wceVBTl8s/VvLB3S7QVhI/AAAAAAAAAgQ/1I-YNtB_t4kDWjIOwhYl1p9DCzPAiedbQ/s1600/fancybox_overlay.png');
}

.fancybox-overlay-fixed {
    position: fixed;
    bottom: 0;
    right: 0;
}

.fancybox-lock .fancybox-overlay {
    overflow: auto;
    overflow-y: scroll;
}

/* Title helper */

.fancybox-title {
    visibility: hidden;
    font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
    position: relative;
    text-shadow: none;
    z-index: 8050;
}

.fancybox-opened .fancybox-title {
    visibility: visible;
}

.fancybox-title-float-wrap {
    position: absolute;
    bottom: 0;
    right: 50%;
    margin-bottom: -35px;
    z-index: 8050;
    text-align: center;
}

.fancybox-title-float-wrap .child {
    display: inline-block;
    margin-right: -100%;
    padding: 2px 20px;
    background: transparent; /* Fallback for web browsers that doesn't support RGBa */
    background: rgba(0, 0, 0, 0.8);
    -webkit-border-radius: 15px;
       -moz-border-radius: 15px;
            border-radius: 15px;
    text-shadow: 0 1px 2px #222;
    color: #FFF;
    font-weight: bold;
    line-height: 24px;
    white-space: nowrap;
}

.fancybox-title-outside-wrap {
    position: relative;
    margin-top: 10px;
    color: #fff;
}

.fancybox-title-inside-wrap {
    padding-top: 10px;
}

.fancybox-title-over-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
    padding: 10px;
    background: #000;
    background: rgba(0, 0, 0, .8);
}

/*Retina graphics!*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5){

    #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
        background-image: url('https://2.bp.blogspot.com/-f59tFoWHbqw/VvLB4SmY8gI/AAAAAAAAAgY/PWzmVZLWqTcWWFrQJJkOM69XKzpQ7xTaA/s1600/fancybox_sprite%25402x.png');
        background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/
    }

    #fancybox-loading div {
        background-image: url('https://4.bp.blogspot.com/-LH86XZ6LOSE/VvLDfZsH5HI/AAAAAAAAAgo/t3MhJb6mNq4GQFTk2k4RRjgjR1LHBBeXw/s1600/fancybox_loading%25402x.gif');
        background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/
    }
}
 /* fancyBox helper button */

#fancybox-buttons {
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 8050;
}

#fancybox-buttons.top {
    top: 10px;
}

#fancybox-buttons.bottom {
    bottom: 10px;
}

#fancybox-buttons ul {
    display: block;
    width: 166px;
    height: 30px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    border: 1px solid #111;
    border-radius: 3px;
    -webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
       -moz-box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
    background: rgb(50,50,50);
    background: -moz-linear-gradient(top, rgb(68,68,68) 0%, rgb(52,52,52) 50%, rgb(41,41,41) 50%, rgb(51,51,51) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(68,68,68)), color-stop(50%,rgb(52,52,52)), color-stop(50%,rgb(41,41,41)), color-stop(100%,rgb(51,51,51)));
    background: -webkit-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
    background: -o-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
    background: -ms-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
    background: linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#222222',GradientType=0 );
}

#fancybox-buttons ul li {
    float: left;
    margin: 0;
    padding: 0;
}

#fancybox-buttons a {
    display: block;
    width: 30px;
    height: 30px;
    text-indent: -9999px;
    background-color: transparent;
    background-image: url('https://4.bp.blogspot.com/-qU-5UJI6QGU/VvPAKxDIltI/AAAAAAAAAhw/ZEqAL6b0L2ouAnI8ssoBNZDJ4KoRwze9A/s1600/fancybox_buttons.png');
    background-repeat: no-repeat;
    outline: none;
    opacity: 0.8;
}

#fancybox-buttons a:hover {
    opacity: 1;
}

#fancybox-buttons a.btnPrev {
    background-position: 5px 0;
}

#fancybox-buttons a.btnNext {
    background-position: -33px 0;
    border-right: 1px solid #3e3e3e;
}

#fancybox-buttons a.btnPlay {
    background-position: 0 -30px;
}

#fancybox-buttons a.btnPlayOn {
    background-position: -30px -30px;
}

#fancybox-buttons a.btnToggle {
    background-position: 3px -60px;
    border-left: 1px solid #111;
    border-right: 1px solid #3e3e3e;
    width: 35px
}

#fancybox-buttons a.btnToggleOn {
    background-position: -27px -60px;
}

#fancybox-buttons a.btnClose {
    border-left: 1px solid #111;
    width: 35px;
    background-position: -56px 0px;
}

#fancybox-buttons a.btnDisabled {
    opacity : 0.4;
    cursor: default;
}

 /* fancybox thumbnail helper */

#fancybox-thumbs {
    position: fixed;
    left: 0;
    width: 100%;
    overflow: hidden;
    z-index: 8050;
}

#fancybox-thumbs.bottom {
    bottom: 2px;
}

#fancybox-thumbs.top {
    top: 2px;
}

#fancybox-thumbs ul {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

#fancybox-thumbs ul li {
    float: left;
    padding: 1px;
    opacity: 0.5;
}

#fancybox-thumbs ul li.active {
    opacity: 0.75;
    padding: 0;
    border: 1px solid #fff;
}

#fancybox-thumbs ul li:hover {
    opacity: 1;
}

#fancybox-thumbs ul li a {
    display: block;
    position: relative;
    overflow: hidden;
    border: 1px solid #222;
    background: #111;
    outline: none;
}

#fancybox-thumbs ul li img {
    display: block;
    position: relative;
    border: 0;
    padding: 0;
    max-width: none;
}

/* fancyBox Main */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
    padding: 0;
    margin: 0;
    border: 0;
    outline: none;
    vertical-align: top;
}

.fancybox-wrap {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8020;
}

.fancybox-skin {
    position: relative;
    background: rgba(26, 26, 26, 0.70);
    color: #444;
    text-shadow: none;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}

.fancybox-opened {
    z-index: 8030;
}

.fancybox-opened .fancybox-skin {
    -webkit-box-shadow: 0 0px 25px rgba(132, 132, 132, 0.5);
       -moz-box-shadow: 0 0px 25px rgba(132, 132, 132, 0.5);
            box-shadow: 0 0px 25px rgba(132, 132, 132, 0.5);
}

.fancybox-outer, .fancybox-inner {
    position: relative;
}

.fancybox-inner {
    overflow: hidden;
}

.fancybox-type-iframe .fancybox-inner {
    -webkit-overflow-scrolling: touch;
}

.fancybox-error {
    color: #444;
    font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
    margin: 0;
    padding: 15px;
    white-space: nowrap;
}

.fancybox-image, .fancybox-iframe {
    display: block;
    width: 100%;
    height: 100%;
}

.fancybox-image {
    max-width: 100%;
    max-height: 100%;
}

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
    background-image: url('https://2.bp.blogspot.com/-V755Gx8-aHo/VvLBeoE0lfI/AAAAAAAAAgI/OpsdezqDFgkS2nN1F5vWYbBvfedfEg04A/s1600/fancybox_sprite.png');
}

#fancybox-loading {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -22px;
    margin-left: -22px;
    background-position: 0 -108px;
    opacity: 0.8;
    cursor: pointer;
    z-index: 8060;
}

#fancybox-loading div {
    width: 44px;
    height: 44px;
    background: url('https://1.bp.blogspot.com/-FBR9kEb_gaI/VvLB3gVvDLI/AAAAAAAAAgU/ha179LldSXYq9ZlC4exnXj77ZY8EPuq2w/s1600/fancybox_loading.gif') center center no-repeat;
}

.fancybox-close {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    z-index: 8040;
}

.fancybox-nav {
    position: absolute;
    top: 0;
    width: 40%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
    background: transparent url('https://2.bp.blogspot.com/-PIoTiFEzeK0/VvLB3HBpVLI/AAAAAAAAAgM/cTIi7zRnHt4ZH3RfyB_Z3aQexOfGAl8ng/s1600/blank.gif'); /* helps IE */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    z-index: 8040;
}

.fancybox-prev {
    left: 0;
}

.fancybox-next {
    right: 0;
}

.fancybox-nav span {
    position: absolute;
    top: 50%;
    width: 36px;
    height: 34px;
    margin-top: -18px;
    cursor: pointer;
    z-index: 8040;
    visibility: hidden;
}

.fancybox-prev span {
    left: 10px;
    background-position: 0 -36px;
}

.fancybox-next span {
    right: 10px;
    background-position: 0 -72px;
}

.fancybox-nav:hover span {
    visibility: visible;
}

.fancybox-tmp {
    position: absolute;
    top: -99999px;
    left: -99999px;
    visibility: hidden;
    max-width: 99999px;
    max-height: 99999px;
    overflow: visible !important;
}

/* Overlay helper */

.fancybox-lock {
    overflow: hidden !important;
    width: auto;
}

.fancybox-lock body {
    overflow: hidden !important;
}

.fancybox-lock-test {
    overflow-y: hidden !important;
}

.fancybox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    display: none;
    z-index: 8010;
    background: url('https://2.bp.blogspot.com/-t6wceVBTl8s/VvLB3S7QVhI/AAAAAAAAAgQ/1I-YNtB_t4kDWjIOwhYl1p9DCzPAiedbQ/s1600/fancybox_overlay.png');
}

.fancybox-overlay-fixed {
    position: fixed;
    bottom: 0;
    right: 0;
}

.fancybox-lock .fancybox-overlay {
    overflow: auto;
    overflow-y: scroll;
}

/* Title helper */

.fancybox-title {
    visibility: hidden;
    font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
    position: relative;
    text-shadow: none;
    z-index: 8050;
}

.fancybox-opened .fancybox-title {
    visibility: visible;
}

.fancybox-title-float-wrap {
    position: absolute;
    bottom: 0;
    right: 50%;
    margin-bottom: -35px;
    z-index: 8050;
    text-align: center;
}

.fancybox-title-float-wrap .child {
    display: inline-block;
    margin-right: -100%;
    padding: 2px 20px;
    background: transparent; /* Fallback for web browsers that doesn't support RGBa */
    background: rgba(0, 0, 0, 0.8);
    -webkit-border-radius: 15px;
       -moz-border-radius: 15px;
            border-radius: 15px;
    text-shadow: 0 1px 2px #222;
    color: #FFF;
    font-weight: bold;
    line-height: 24px;
    white-space: nowrap;
}

.fancybox-title-outside-wrap {
    position: relative;
    margin-top: 10px;
    color: #fff;
}

.fancybox-title-inside-wrap {
    padding-top: 10px;
    Color : #ffffff;
}

.fancybox-title-over-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
    padding: 10px;
    background: #000;
    background: rgba(0, 0, 0, .8);
}

/*Retina graphics!*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5){

    #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
        background-image: url('https://2.bp.blogspot.com/-f59tFoWHbqw/VvLB4SmY8gI/AAAAAAAAAgY/PWzmVZLWqTcWWFrQJJkOM69XKzpQ7xTaA/s1600/fancybox_sprite%25402x.png');
        background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/
    }

    #fancybox-loading div {
        background-image: url('https://4.bp.blogspot.com/-LH86XZ6LOSE/VvLDfZsH5HI/AAAAAAAAAgo/t3MhJb6mNq4GQFTk2k4RRjgjR1LHBBeXw/s1600/fancybox_loading%25402x.gif');
        background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/
    }
}

/* fancyBox helper button */

#fancybox-buttons {
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 8050;
}

#fancybox-buttons.top {
    top: 10px;
}

#fancybox-buttons.bottom {
    bottom: 10px;
}

#fancybox-buttons ul {
    display: block;
    width: 166px;
    height: 30px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    border: 1px solid #111;
    border-radius: 3px;
    -webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
       -moz-box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
    background: rgb(50,50,50);
    background: -moz-linear-gradient(top, rgb(68,68,68) 0%, rgb(52,52,52) 50%, rgb(41,41,41) 50%, rgb(51,51,51) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(68,68,68)), color-stop(50%,rgb(52,52,52)), color-stop(50%,rgb(41,41,41)), color-stop(100%,rgb(51,51,51)));
    background: -webkit-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
    background: -o-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
    background: -ms-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
    background: linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#222222',GradientType=0 );
}

#fancybox-buttons ul li {
    float: left;
    margin: 0;
    padding: 0;
}

#fancybox-buttons a {
    display: block;
    width: 30px;
    height: 30px;
    text-indent: -9999px;
    background-color: transparent;
    background-image: url('https://4.bp.blogspot.com/-qU-5UJI6QGU/VvPAKxDIltI/AAAAAAAAAhw/ZEqAL6b0L2ouAnI8ssoBNZDJ4KoRwze9A/s1600/fancybox_buttons.png');
    background-repeat: no-repeat;
    outline: none;
    opacity: 0.8;
}

#fancybox-buttons a:hover {
    opacity: 1;
}

#fancybox-buttons a.btnPrev {
    background-position: 5px 0;
}

#fancybox-buttons a.btnNext {
    background-position: -33px 0;
    border-right: 1px solid #3e3e3e;
}

#fancybox-buttons a.btnPlay {
    background-position: 0 -30px;
}

#fancybox-buttons a.btnPlayOn {
    background-position: -30px -30px;
}

#fancybox-buttons a.btnToggle {
    background-position: 3px -60px;
    border-left: 1px solid #111;
    border-right: 1px solid #3e3e3e;
    width: 35px
}

#fancybox-buttons a.btnToggleOn {
    background-position: -27px -60px;
}

#fancybox-buttons a.btnClose {
    border-left: 1px solid #111;
    width: 35px;
    background-position: -56px 0px;
}

#fancybox-buttons a.btnDisabled {
    opacity : 0.4;
    cursor: default;
}

/* fancybox thumbnail helper */

#fancybox-thumbs {
    position: fixed;
    left: 0;
    width: 100%;
    overflow: hidden;
    z-index: 8050;
}

#fancybox-thumbs.bottom {
    bottom: 2px;
}

#fancybox-thumbs.top {
    top: 2px;
}

#fancybox-thumbs ul {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

#fancybox-thumbs ul li {
    float: left;
    padding: 1px;
    opacity: 0.5;
}

#fancybox-thumbs ul li.active {
    opacity: 0.75;
    padding: 0;
    border: 1px solid #fff;
}

#fancybox-thumbs ul li:hover {
    opacity: 1;
}

#fancybox-thumbs ul li a {
    display: block;
    position: relative;
    overflow: hidden;
    border: 1px solid #222;
    background: #111;
    outline: none;
}

#fancybox-thumbs ul li img {
    display: block;
    position: relative;
    border: 0;
    padding: 0;
    max-width: none;
}

Step 9. Configuration :

Design 1 :

Add Following codes Just Above ]]></b:skin>  To remove following items from Design 1.

Note: If you don't want to remove any item from design 1 please skip this step.

1. To Remove Overlay:  #imagelightbox-overlay { display: none; }
2. To Remove Close Button:  #imagelightbox-close  { display: none; }
3. To Remove Arrows:  .imagelightbox-arrow { display: none !important; }
4. To Remove Navigation:  #imagelightbox-nav { display: none; }
5. To Remove Caption:  #imagelightbox-caption { display: none; }

Design 2 :

Add following codes just above </head> To add following items in Design 2.

Note: Use must need to add anyone of the following :

• Simple Image Gallery
• With Button Helper
• With Thumbnail Helper

<script type='text/javascript'>
    $(document).ready(function() {

        $('.post-body a[href]:has(img)').attr('rel', 'gallery').fancybox({

            openEffect: 'fade',
            closeEffect: 'fade',

            prevEffect: 'elastic',
            nextEffect: 'elastic',

            padding: 15,
            arrows: true,
            closeBtn: true,
            helpers: {
                title: {
                    type: 'float',
                },
            },

            beforeShow: function() {
                var alt = this.element.find('img').attr('alt');

                this.inner.find('img').attr('alt', alt);

                this.title = alt;
            },
        });
    });
</script>

<script type='text/javascript'>
    $(document).ready(function() {

        $('.post-body a[href]:has(img)').attr('rel', 'gallery').fancybox({

            openEffect: 'fade',
            closeEffect: 'fade',

            prevEffect: 'elastic',
            nextEffect: 'elastic',

            padding: 15,
            arrows: true,
            closeBtn: false,
            helpers: {
                title: {
                    type: 'inside',
                },
                buttons: {},
            },

            afterLoad: function() {
                this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
            },
        });
    });
</script>

<script type='text/javascript'>
    $(document).ready(function() {

        $('.post-body a[href]:has(img)').attr('rel', 'gallery').fancybox({

            openEffect: 'fade',
            closeEffect: 'fade',

            prevEffect: 'elastic',
            nextEffect: 'elastic',

            padding: 15,
            arrows: false,
            closeBtn: true,
            helpers: {
                title: {
                    type: 'over',
                },
                thumbs: {
                    width: 50,
                    height: 50,
                },
            },

            beforeShow: function() {
                var alt = this.element.find('img').attr('alt');

                this.inner.find('img').attr('alt', alt);

                this.title = alt;
            }
        });
    });
</script>

Design 2 Customization ( Optional ) :

• Adjust the value of openEffect / closeEffect / prevEffect / nextEffect to ( 'elastic', 'fade' or 'none' ) to change Animation effect.
• Adjust the value of padding to adjust image border.
• Adjust the value of arrows / closeBtn to ( true or false ) to ( enable or disable ) respective functions.
• Adjust the value type to ( 'float', 'inside', 'outside' or 'over' ) to change caption style ( See demo caption for information ).

Step 10. Click Save Template.

Addition Features in Lightbox :

Design 1:

Source: Image Lightbox By osvaldas

1. Navigation with touch swipe or touch friendly.
2. Click on image (Left or Right) will navigate to (Previous or Next) Image.
3. Works with keyboard shortcuts (arrows Left/Right and Esc).
4. Silently preload the next image.
5. Support png, jpg, jpeg, gif formats.

Design 2:

Source: fancyBox - jQuery Lightbox

1. Image Slideshow.
2. Click on image (Left or Right) will navigate to (Previous or Next) Image.
3. Toggle image to fullscreen with shortcut key 'f'.
4. Start / Stop slideshow with shortcut key 'space'.
5. Works with keyboard shortcuts (arrows Left/Right and Esc).
6. Different caption styles.

Note : alt attribute value will be considered as caption.

Great! Enjoy Now.

Now click on any image in your blog posts, you will see your own cool design of Lightbox in web as well as mobile version of you blog. For any issues related to above Tutorial Please Comment Below. Stay Updated, Browse Howbloggerz ! :)

Read more ...