Remove dir="ltr" trbidi="on" from Blogger Posts

Updated on: July 21, 2016

All of you create posts in blogger, but have you ever notice that whenever you create a new post blogger by default add code <div dir="ltr" style="text-align: left;" trbidi="on"> at the top/starting of your blog post (in post HTML). Now the questions are, Why blogger automatically adds that piece of code in your posts? What is the use of that code? Can we remove that code? What happen if we remove that code?

Actually the "ltr" and "trbidi" settings are used by blogger to support both "ltr" and "rtl" justified languages. This piece of code helps your readers to read translated Arabic, Syriac and Mandaean (or rtl) languages properly on your blog. This code is not necessary and you can remove this code from your post.

PROS :-

• Make your post code clean and tidy.
• Remove override CSS code style="text-align: left;".
• Your readers can still translate your page by using tools like Google translator.
• You can reverse the setting at any time (default setting).

CONS :-

• Your blog can no more support translated "rtl" languages.

In 2015 blogger have officially provided the option to remove <div dir="ltr" style="text-align: left;" trbidi="on"> from posts with blogger setting. Yes! now it is so easy to remove the above code with only 3 easy simple steps.

How to Remove the code dir="ltr" trbidi="on" from all posts

Step 1. Login to your blogger account, then navigate to Settings > Language and formatting.
Step 2. In the section "Enable transliteration" select disabled.

Step 3. Click Save settings.

Note: The code will no longer exist whenever you create new post but you have to manually edit the post HTML to remove code from already published posts.

That's all!

Refresh your blog posts list and create a new post. Switch to HTML, and you will find no such code in your blog. Don't thank me, thank blogger for giving us control. For any issues related to above Tutorial Please Comment Below. Stay Updated, Browse Howbloggerz! :)

Read more ...

How to Increase Video Size in Blogger Posts

Updated on: July 16, 2016

Embedding a YouTube video in your blog post is the best practice to make your post content rich and visually effective. Moreover adding videos in your post helps you to decrease the bounce rate and increases your revenue.

We can easily add videos on our posts by using blogger post editing tool bar but by default blogger post's video size is small and doesn't fill the whole post width, that small size can affect your video impact on readers. So, to increase the size of your blogger video (By maintaining its ratio) so that viewers can see clearly just follow the give tutorial with images.

Steps: How To Change YouTube Video Size

Step 1. Login to your blogger account > Dashboard > Template > Edit HTML

Step 2. Click anywhere inside the code and find the following code (use Ctrl + F):

</head>

Step 3. Just above it place the following code:

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'></script>
<script>
$('.YOUTUBE-iframe-video').ready(function(){
$('.YOUTUBE-iframe-video').parent().css({
    'position': 'relative',
    'padding-bottom': '56.25%',
    'height': '0',
    'clear': 'both',
    'text-align': 'center',
    'margin': '20px 0'
});

$('.YOUTUBE-iframe-video').css({
    'position': 'absolute',
    'top': '0',
    'left': '0',
    'width': '100%',
    'height': '100%',
});
});
</script>

Step 4. Click Save template.

Done !

All of your embedded YouTube videos will be of full size and responsive with your post width. If you have and issue related to above tutorial comment below. Stay Updated, Browse Howbloggerz ! :)

Read more ...

5 Steps to Add Signature to Blogger Posts (with Demo)

Do you want to add a signature text or image to your Blogger posts? Post signature is usually a text or an image at the end of each post, adding custom signature to your blogger posts not only give it certain flair but also gives a visible stamp of your authority over your blog content. You can manually insert signature to new blog posts but what about old post, its not easy to add signature manually in already published posts specially if they are in hundreds.

Don't worry your are howbloggerz user, nothing is impossible here. I have created a set of CSS and HTML code to automatically add signature in old and upcoming new posts. The best part about this method is that you can edit your signature at any time and the changes will reflect on every post.

There are two types of signature you can add either text or image and both have different way of installing therefore i have added instruction for both types with images and created a demo to make you have a look.

DEMO

How to Add Signature to Blogger Posts

Step 1. Login to your blogger account > Dashboard > Template > Edit HTML

Step 2. Click anywhere inside the code and find the following code ( use Ctrl + F ) :

<div class='post-footer'>

Note : There are two occurrence of the above code. 1st occurrence for mobile view and second for desktop.


Step 3. Just above <div class='post-footer'> Place the following code:

• To Add Text Signature

• To Add Image Signature

     <style type="text/css">
.hbz-signature {
     font-size: 22px;
     font-family: Papyrus,fantasy;
     text-shadow: 5px 2px 2px #dddddd;
     margin-top : 30px;
     text-color: #222222;
}

.hbz-signature span {
     font-size: 14px;
     vertical-align: top;
}
    </style>
    <div class="hbz-signature"><span>By</span> You Name</div>

    <style type="text/css">
.hbz-signature {
     margin-top: 30px;
}

.hbz-signature img {
     background: transparent none repeat scroll 0% 0%;
     border: medium none;
     box-shadow: none;
}
    </style>
    <div class="hbz-signature"><img src="Your Signature Image URL"  alt="Your Image Name"/></div>

 Step 4. Configuration of Code:

For Text Signature:

• Adjust the value 22 to change font size of text.
• Replace the value Papyrus,fantasy to change the font family of the text (List of Font Family).
• Replace the value #dddddd to change text shadow color (Color Codes).
• Replace the value #222222 to change text color.
• Replace You Name with your name or with any other text.

For Image Signature:

Note: To create your Signature image you can use photo editing software on your mobile or machine, or the online Pixlr editor.

If you don't know much about editing, you can use tool Mylivesignatue (Recommended).

• Replace Your Signature Image URL with the URL of the image.
• Replace Your Image Name with name of the image.

Read : How to Get the URL of an Image

Step 4. Click Save template.

That's all!

Now go through your blog and see you signature text or image on each blogger post. Coding usually depends on the template you are using, therefore if you have and issue related to above tutorial comment below. Stay Updated, Browse Howbloggerz ! :)

Read more ...

Removing Hyperlinks From Blogger Post Images

By default Blogger creates a link to the image whenever an image is uploaded to a Blogger post. Sometimes, however, you might want to remove the link to prevent the image from being clickable. A common reason would be to safeguard your image. If you are worried about your image being copied you can prevent it from appearing full size by disabling the link. When you remove the hyperlink off an image from your post, your post image won't be clickable anymore, preventing readers from accessing the larger version of the image.

If you are using a custom Blogger template, then you probably have noticed that few of the third-party developed templates does not supports Lightbox functionality, which causes images to be opened in a new tab window whenever they are clicked by the users. Since, Blogger use Picasa web album to host your blog’s images, so whenever user clicks on an image present on your site it ultimately takes them to a different destination, which causes increase in the bounce rate and decrease in the ad sales because your users are not converting they are coming from one end and leaving from the other.

Recently, one of our users asked us that How to Remove Hyperlinks from Post Images in Blogger? The easiest way to remove hyperlinks for post images in blogger is to simply revert to the HTML Tab in the blogger post editor and remove the hyperlink <a href>. However, what if you have to edit large numbers of posts? don't worry, we have prepared set of codes with CSS and JavaScript tweak, not HTML one to automatically remove links. Today in this tutorial, we will show you How to manually or automatically Remove Hyperlinks from single Post image or from Homepage page / Specific post / Specific page / or from all posts in blogger with step by step instructions and images.

Removing Hyperlinks from Posts Images

If you just want to disable the hyperlink from a single image in Blogger try this method. I have found that it removes the link but it will not reinstate it once removed so be sure you want to remove the link before you start otherwise you will need to reinstate the link manually. I suggest you backup before you start.

Removing Hyperlinks Manually / from Single Image

1. By Using Blogger Compose Editor Toolbar ( Easy ) 

Step 1. Login to your blogger account, then navigate to edit post ( From which you want to remove image hyperlink ).

Step 2. Make sure Compose is selected, then select the picture and then click on Link in Toolbar.

Step 3. Click on Publish / Update.

2. By Using Blogger Post HTML Editor

Step 1. Login to your blogger account, then navigate to edit post ( From which you want to remove image hyperlink ).

Step 2. Make sure HTML is selected, then Find the image hyperlink code.

Note : Their may be more than one Image hyperlink depends upon the number of images in post. Code may vary little because every image have different URL.

Code look like this :

<a href="https://4.bp.blogspot.com/-pqkPpEx7KNY/VxYXv655rRI/AAAAAAAAAmk/HCKXZFHvtCobFrpozByEUuclA7MAjEBYQCKgB/s1600/Vintage-Camera.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="https://4.bp.blogspot.com/-pqkPpEx7KNY/VxYXv655rRI/AAAAAAAAAmk/HCKXZFHvtCobFrpozByEUuclA7MAjEBYQCKgB/s320/Vintage-Camera.jpg" width="320" /></a>

Step 3. Now remove the hyperlink around the img tag ( Blue color code ).

<a href="https://4.bp.blogspot.com/-pqkPpEx7KNY/VxYXv655rRI/AAAAAAAAAmk/HCKXZFHvtCobFrpozByEUuclA7MAjEBYQCKgB/s1600/Vintage-Camera.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="https://4.bp.blogspot.com/-pqkPpEx7KNY/VxYXv655rRI/AAAAAAAAAmk/HCKXZFHvtCobFrpozByEUuclA7MAjEBYQCKgB/s320/Vintage-Camera.jpg" width="320" /></a>

Step 4. Click on Publish / Update.

Removing Hyperlinks Automatically From Post Images

Step 1. Login to your blogger account, then navigate to Template > Edit HTML.

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

</head>

Step 3. Copy and paste the following code just above it to disable Hyperlinks from :

• All posts

• Homepage

• All pages

• Specific post & page

<b:if cond='data:blog.pageType == "item"'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function() {
$('.post-body a[href]:has(img)').css({"cursor": "default" , "pointer-events": "none" , "-webkit-user-select": "none" , "-khtml-user-select": "none" , "-moz-user-select": "none" , "-o-user-select": "none" , "user-select": "none"})
.click(function() { return false; });
});
</script>
</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function() {
$('.post-body a[href]:has(img)').css({"cursor": "default" , "pointer-events": "none" , "-webkit-user-select": "none" , "-khtml-user-select": "none" , "-moz-user-select": "none" , "-o-user-select": "none" , "user-select": "none"})
.click(function() { return false; });
});
</script>
</b:if>

<b:if cond='data:blog.pageType == "static_page"'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function() {
$('.post-body a[href]:has(img)').css({"cursor": "default" , "pointer-events": "none" , "-webkit-user-select": "none" , "-khtml-user-select": "none" , "-moz-user-select": "none" , "-o-user-select": "none" , "user-select": "none"})
.click(function() { return false; });
});
</script>
</b:if>

<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "URL-HERE"'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function() {
$('.post-body a[href]:has(img)').css({"cursor": "default" , "pointer-events": "none" , "-webkit-user-select": "none" , "-khtml-user-select": "none" , "-moz-user-select": "none" , "-o-user-select": "none" , "user-select": "none"})
.click(function() { return false; });
});
</script>
</b:if>

Step 4. Configuration for Specific post and page only :

Replace URL-HERE with the page / post URL. For example :

If your post URL is : http://www.howbloggerz.blogspot.com/2016/04/removing-hyperlinks-from-blogger-post-images.html
Then add only : 2016/04/removing-hyperlinks-from-blogger-post-images.html

OR

If your page URL is : http://www.howbloggerz.blogspot.com/p/write-for-us.html
Then add only : p/write-for-us.html


Step 5. Click Save Template.

Enjoy!

Now view your blog post images and try a click over it :), as it is impossible to have one global code that works for all templates. If it doesn't work on your template, leave a comment and I'll prepare one that will work for you. Stay Updated, Browse Howbloggerz! :)

Read more ...

How To Backup And Restore Blogger Posts And Template

Has fear of losing data of your blog posts? Must backup your All blog posts to save your years of hard-work or to Import or Export your blog posts to other platform.

Thinking to make any changes in your blog template? Remember to backup your Template each time before it to preserve your blog design and layout if you ran into any problem in your edit.

So, If you want to backup and restore your blogger posts and template to prevent inconvenience to your users. Follow the given step by step tutorial with images :

How To Backup And Restore Template : 

Step 1. Login to your Blogger account, then go to Template > Backup / Restore.

Step 2. To Backup Template: Click Download full template and save the xml file.

Now you have Backup of your Template

Step 3. To Restore Template: Click Browse... , select the xml file ( Backup file ) and Click Upload.

Now you have successfully Restored your Template.

How To Backup And Restore Blogger Posts :

To Backup Blog content :

Step 1. Login to your Blogger account, then go to Settings > Other > Back up content.

Step 2. Click Save to your computer and save the xml file.

To Restore Blog content :

Step 1. Login to your Blogger account, then go to Settings > Other > Import content.

Step 2. Solve the  CAPTCHA ( if any ) Click Import from computer and select the xml file.

That's it !

You have successfully backup and restored your blogger Template and content included posts, pages and comments. For any issues related to above tutorial comment below. Stay Updated, Browse Howbloggerz ! :)

Read more ...

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 ...