Blogger Buzz

Date header-style into blogspot blogs

<div dir="ltr" style="text-align: left;" trbidi="on">
This can be a really cool addition to your blog and something that can be customized to suit your layout and design. What we are going to do in this tutorial is changing the Blogger date header background color with some simple CSS adjustments that will make the date header to float on the left side of your post and to be partially out of the structure like a banner with a colorful appearance. 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVTfj29h19BK5FnV-znfxb0NV4U03ejr-4N1HjKnloDhzGlAMTWaKBH1BqWPx946BcR7FjGxZ1wrGi9fE3CM_LM14yc_huv41Yx-2XAUFORcJTvG3fj-caYmAKEsAEobPXFxxQWd5MDldW/s1600/blogger-date-header-style.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="stylish blogger date header" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVTfj29h19BK5FnV-znfxb0NV4U03ejr-4N1HjKnloDhzGlAMTWaKBH1BqWPx946BcR7FjGxZ1wrGi9fE3CM_LM14yc_huv41Yx-2XAUFORcJTvG3fj-caYmAKEsAEobPXFxxQWd5MDldW/s1600/blogger-date-header-style.png" title="how to customize blogspot blogger date header" /></a></div>
 
<h3>
Customize the Blogger Date Header of a Blogspot Blog</h3>
<div>
 
Step 1. Log in your <a href="http://blogger.com/" rel="nofollow">Blogger Dashboard</a>, go to Template > Edit HTML (don't forget to make a back-up of your current template by clicking on the Backup/Restore button) 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0WFm2maQ8jfFGzqbdJ8qG0m82l3i-6nCIWTLxSPJ6NpJ9dmillvV-rPJE62D7RnZ-TFXGGZd-2Xq901cguD0-uz96btz9JdSLO7o74YTmBCq0turA9hja8rumEqnYx4F5tK-20EwjbI2m/s1600/remove-blogger-labels.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="132" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0WFm2maQ8jfFGzqbdJ8qG0m82l3i-6nCIWTLxSPJ6NpJ9dmillvV-rPJE62D7RnZ-TFXGGZd-2Xq901cguD0-uz96btz9JdSLO7o74YTmBCq0turA9hja8rumEqnYx4F5tK-20EwjbI2m/s1600/remove-blogger-labels.png" width="320" /></a></div>
 Step 2. Click anywhere inside the code area and search (CTRL + F) for the following code: 
<blockquote class="tr_bq">
.date-header span</blockquote>
Below this code you should see a few lines like these: 
<blockquote class="tr_bq">
.date-header span { 
  background-color: $(date.header.background.color); 
  color: $(date.header.color); 
  padding: $(date.header.padding); 
  letter-spacing: $(date.header.letterspacing); 
  margin: $(date.header.margin); 
}</blockquote>
 
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB4Ft9K_IMlzx82rkNQxKJHqbA-_iW6DYggT6ouBzqhy-__iUH6-DR8m-GqnHQO1c_I_2L89ZIye3LMeBhIZM4776oy4875o1ROGKdBnAnmDzOaBRSCTT5EGaX-kZbHyTUAldFuEGXSIUH/s1600/blogger-date.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="date header, blogger" border="0" height="227" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB4Ft9K_IMlzx82rkNQxKJHqbA-_iW6DYggT6ouBzqhy-__iUH6-DR8m-GqnHQO1c_I_2L89ZIye3LMeBhIZM4776oy4875o1ROGKdBnAnmDzOaBRSCTT5EGaX-kZbHyTUAldFuEGXSIUH/s1600/blogger-date.png" title="how to customize blogger date header" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Screenshot</td></tr>
</tbody></table>
 
Step 3. You need to replace the code above with this one: 
<blockquote>
.date-header { 
margin: 0px 0px -50px -190px; 
} 
.date-header span { 
background-color: #DDEDAA; 
color: #444; 
padding: 16px; 
border-radius: 70%; 
border: 3px solid #bada55; 
} 
.date-header:before { 
background: none repeat scroll 0 0 #FCFCFC; 
border: 10px solid #FFBD54; 
border-radius: 100%; 
bottom: -50px; 
content: ""; 
display: block; 
height: 30px; 
position: absolute; 
width: 30px; 
z-index: 10; 
margin-left: 140px; 
} 
.date-header:after { 
background: none repeat scroll 0 0 #F9F9F9; 
border: 7px solid #bada55; 
border-radius: 100%; 
bottom: -17px; 
content: ""; 
display: block; 
height: 15px; 
position: absolute; 
width: 15px; 
z-index: 10; 
margin-left: 166px; 
}</blockquote>
Customization 
 
- to change the background color of the date header, replace #DDEDAA with the hex code of your color 
- to change the date font color, replace #444; 
- to change the border color of the bigger circle below the date header, replace #FFBD54 
<div>
- to change the border color of the smaller circle, replace #bada55</div>
<div>
<div>
- to set the distance between date and post, change the -190px from margin-left 
 </div>
</div>
<div>
Step 4. Click on the Save template button to save the changes. 
So this is how you can add a new style to the blogger posts date header. Please keep in mind that codes vary from template to template - if you're having a customized template, then you might have a different CSS selector for the date header. </div>
</div>
</div>

Blog Design posts Date header-style into blogspot blogs

This can be a really cool addition to your blog and something that can be customized to suit your layout and design. What we are going to do in this tutorial is changing the Blogger date header background color with some simple CSS adjustments that …

How to remove labels from blog posts

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMgHFEhsk20tPMx0yVVYQt2i1vaEPIoksQQLH0o_8IYle2sJF2yGpMfgd72ZChISnMsWqJ_PKA7WrauvZnTM01KqAgOHFbdFB5b9H_jvl-VilaCwHcCtJTP2YxLF0NaOoNQUvbQQPTZWHE/s1600/removing+blogger+labels+blogspot+tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="142" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMgHFEhsk20tPMx0yVVYQt2i1vaEPIoksQQLH0o_8IYle2sJF2yGpMfgd72ZChISnMsWqJ_PKA7WrauvZnTM01KqAgOHFbdFB5b9H_jvl-VilaCwHcCtJTP2YxLF0NaOoNQUvbQQPTZWHE/s200/removing+blogger+labels+blogspot+tutorial.png" width="200" /></a></div>
 
Many bloggers might find labels below posts (or post titles) unnecessary, as long as they are already in the blog's sidebar. In this tutorial we will learn how to remove them manually. To hide labels from the blogger post footer (or below post title), we could simply uncheck the "Labels" option, however, sometimes this setting might not work properly in certain templates and then we'll have to remove it manually from our template. 
How we are going to do this? 
 
Hide labels from Blogger 
 
Step 1. Click on the 'Template' option and then go to the 'Edit HTML' button. 
 
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PPi2VMehKn33gUz6arnSMgghenge9AHtEa-6RlusZovbucGXRkBGGnLCGmVEzsepXFEb4QzMiE_jr0phSPU55ywzjNCy28kKbYWZtiCjGiNuQ6OsoQVSD5HH5BSISgVWcEY0fWXRcA5k/s1600/edit+html.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="hide labels from blogger" border="0" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PPi2VMehKn33gUz6arnSMgghenge9AHtEa-6RlusZovbucGXRkBGGnLCGmVEzsepXFEb4QzMiE_jr0phSPU55ywzjNCy28kKbYWZtiCjGiNuQ6OsoQVSD5HH5BSISgVWcEY0fWXRcA5k/s1600/edit+html.jpg" title="hide labels from blogger" width="320" /></a></div>
 
Step 2. After you clicked on the Edit HTML button, click anywhere inside the code area and search by using the CTRL + F keys the </head> tag. 
 
Step 3. Just above the </head> tag, add the following code: 
<blockquote class="tr_bq">
<style> 
.post-labels {display: none;} 
</style></blockquote>
Step 4. Click the Save Template button to save the changes and you're done ;)</div>

Blog Design how to posts How to remove labels from blog posts

Many bloggers might find labels below posts (or post titles) unnecessary, as long as they are already in the blog's sidebar. In this tutorial we will learn how to remove them manually. To hide labels from the blogger post footer (or below post title…

5 Easy Ways to Improve the SEO of a blog for Boost Traffic

<div dir="ltr" style="text-align: left;" trbidi="on">
5 easy ways to improve the SEO of a blog  
 
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Ubyc1Gnbwr9rwUES3WucCzgvrl74DIWv3HmJ5i10SOJw6SYkr_6GbPl9rXLNB8aGkGlcdqCmFXKwWo11OBg1tHxlYCpA64H3QeO4NXOOSNDnD2Mi3vMyLOickS0gk0FwA8S7Y7OB79Em/s1600/ways-to-improve-seo-of-a-blog-and-boost-traffic.png" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img alt="improve seo, seo tips, boost traffic" border="0" height="148" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Ubyc1Gnbwr9rwUES3WucCzgvrl74DIWv3HmJ5i10SOJw6SYkr_6GbPl9rXLNB8aGkGlcdqCmFXKwWo11OBg1tHxlYCpA64H3QeO4NXOOSNDnD2Mi3vMyLOickS0gk0FwA8S7Y7OB79Em/s1600/ways-to-improve-seo-of-a-blog-and-boost-traffic.png" title="5 easy ways to improve the seo of a blog & boost traffic" width="200" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">SEO tips for a better search engine ranking</td></tr>
</tbody></table>
A blogger needs to know at least the minimum on SEO. For it, you don't need to be an SEO expert but you need to know the minimum so that your posts are well indexed in search engines. 
 
The phrase "content is king" is one of the widest spread Internet memes and is used by many bloggers, with the idea that you should focus on having quality content, while the rest don't matter much. This is not true. Quality content is important, but that shouldn't be the only concern of a blogger today. In addition to producing quality content, your text needs to be optimized for search engines. 
 
<h2>
5 easy ways to improve the SEO of a blog</h2>
In this post, I will talk about of what would be the basics that any blogger needs to learn about SEO and other simple SEO knowledge. Below are 5 tips to improve the SEO of your blog: 
 
<h2>
1. Define the keyword</h2>
When you write a post, it is necessary to choose the keyword (or term) suitable for your text. What you want is that this keyword or term to be searched on Google and then get your post among the top. For this, it is necessary to use this keyword a few times in the text. 
 
For example, here the keyword could be SEO, but this term is too generic and I could hardly get in the top for this search. Then I'll work with a term or a long tail keyword, so that this post will rank for the term "easy ways to improve the SEO of a blog". I will use this term a few times, but without exaggeration. 
 
<h2>
2. Use the keyword in the post title </h2>
Now that I have defined the keyword, I will use it in the post title. This step is very important and certainly will help you to get a better rank in search engines. As you can see, what I have in my title is the easy ways to improve the SEO of a blog keyword, along with other words to form an attractive and optimized title for SEO. 
 
<h2>
3. Use the keyword in the H2 tags</h2>
You must also use heading tags (h2, h3) in your posts. In this post, I am using the keyword "easy ways to improve the SEO of a blog" in a H2 header. Do this always, because it also helps to become well positioned in the search results. If you don't know or don't understand what are the header tags, I would suggest to do a further research on this subject. 
 
<h2>
4. Use the keyword in the text</h2>
You must use your keywords throughout the text. Especially in the first paragraph (please note that I have repeated the title in italics on the first line). But be careful when doing this, there is a maximum and minimum limit for that. Your text needs to be between 1 and 4.5% of occurrences of the keyword. Less than that will have no effect and more than that can alert the search engines and your text might be considered spam. 
 
<h2>
5. Write posts with more than 300 words</h2>
Posts under 300 words have little chance to be among the top results in search engines. Of course, you will be able to rank for multiple keywords that are less popular with less than 300 words text, but for the most competitive keywords that have the potential to bring a greater number of visits, it will be nearly impossible. 
 
Thus, it is recommended to write posts with more than 300 words. It's not hard when you really understand the subject you're talking about. 
 
<h2>
Conclusion</h2>
As you can see, with some simple SEO techniques you can improve traffic coming to your blog from search engines. I hope you enjoyed these 5 easy ways to improve the SEO of a blog. 
 
If you have any questions, leave a comment below.</div>

SEO 5 Easy Ways to Improve the SEO of a blog for Boost Traffic

5 easy ways to improve the SEO of a blog SEO tips for a better search engine ranking A blogger needs to know at least the minimum on SEO. For it, you don't need to be an SEO expert but you need to know the minimum so that your posts are well index…

What is the difference between padding and margins?

<div dir="ltr" style="text-align: left;" trbidi="on">
For those who would like to know more about HTML and CSS, today we will see about the difference between margin and padding CSS properties which allow us to add blank space between the HTML elements, preventing the elements from getting 'stuck' together. 
 
Although both possess similar functions, each has its particularity.  
<ol>
<li>Padding determines the inner margins, being responsible for determining the distance between the content of a given element and its border. </li>
<li>Margin is applied to the outside of an element affecting how far the element is away from other elements.</li>
</ol>
For more info, please take a look at the picture below: 
 
 
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZPHQNAgHiJuz5wiez3n2cZ2jGS_9EEJiGqvjjiSBnvGL9exsojz6Uw-6GnQfx2DSdWME1lilyzYXWmMmqgc2fL7hdqume45vRguHsolY4wmIyvvuOK9-eLjym93WXo06nNMkrE4KlBds7/s1600/difference-between-margin-padding-css-propriety-tutorial.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="padding and margin, css proprieties" border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZPHQNAgHiJuz5wiez3n2cZ2jGS_9EEJiGqvjjiSBnvGL9exsojz6Uw-6GnQfx2DSdWME1lilyzYXWmMmqgc2fL7hdqume45vRguHsolY4wmIyvvuOK9-eLjym93WXo06nNMkrE4KlBds7/s1600/difference-between-margin-padding-css-propriety-tutorial.png" title="What is the difference between padding and margin" width="362" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Difference between margin and padding</td></tr>
</tbody></table>
 
Just as you have the option to define the borders for each side of your HTML elements (eg. borders in the sidebar), you can do the same with the margin and padding properties. All you need to to do is to change the top, right, bottom and left values??. 
These values ??that you can select include: pixels (px), centimeters (cm), millimeters (mm). em units (em), x-height (ex), inches (in), picas (pc) and point sizes (pt). 
 
By using margin and padding, you should add each value set in the four corners, as follows: top, right, bottom, left and each value must refer to each side of the HTML element. The first value is for the top, and they follow a clockwise direction, so the value would be close to the right, then bottom and finally, left. 
 
Example 1:  
 
padding:5px 15px 5px 15px; 
- top padding is 5px  
- right padding is 15px  
- bottom padding is 5px  
- left padding is 15px   
 
margin: 10px 5px 10px 5px; 
- top margin is 10px 
- right margin is 5px 
- bottom margin is 10px 
- left margin is 5px 
 
If you define a single value, the distance applies to all sides, so it will be applied to the 4 sides of the HTML element that you want to modify. 
 
Example 2: 
padding: 5px (top and bottom) 15px (left and right); 
margin: 10px (top and bottom) 5px (left and right); 
 
If it helps to do it visually, think of an A4 page of type inside a picture frame. The margin is the space between the edge of the sheet of paper and the other elements (the parts of the frame) and the padding would be the space between the edge of the sheet and where the type starts on the page. The border would be the edge of the sheet of paper. 
 
It's probably easier to understand if you have borders, then it also becomes obvious which one to use. Do you want the "space" after the border (outside the element = margin) or before the border (inside the element = padding). </div>

css how to What is the difference between padding and margins?

For those who would like to know more about HTML and CSS, today we will see about the difference between margin and padding CSS properties which allow us to add blank space between the HTML elements, preventing the elements from getting 'stuck' toge…

Add a Custom jQuery Lightbox To Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
If you are not satisfied with the default lightbox set up by Blogger, here's another amazing way to show off your images. I have already shown you in one of my previous tutorials <a href="http://buzzblogger1.blogspot.com/2013/03/how-to-customize-bloggers-lightbox.html" rel="nofollow" style="color: blue;" target="_blank">how to customize the Blogger lightbox</a> by changing the background color, borders or text color, but this tutorial will show you how to replace it entirely with a really cool jQuery Lightbox plugin that is very popular among bloggers. 
 
What this lightbox does is to display larger versions of the images that will pop up into a larger box when we click on them and lets us to easily navigate through a set of images using the previous and next buttons. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRHh-ZNZmqrwq-XuddZ7puNoPKnk3yOuKEjAIWmU3t1euF7j6L-u6nSSzLKWGpzcRnLvsXIgSpXL-PIyvI5J1v0knbUU0u-MlEJl1qbiJBB8DRP4j90p5I8LBvmnFT6T7OIR0xAtvT-mXX/s1600/custom-blogger-jquery-lightbox-for-displaying-images.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="jquery lightbox, blogger plugins" border="0" height="267" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRHh-ZNZmqrwq-XuddZ7puNoPKnk3yOuKEjAIWmU3t1euF7j6L-u6nSSzLKWGpzcRnLvsXIgSpXL-PIyvI5J1v0knbUU0u-MlEJl1qbiJBB8DRP4j90p5I8LBvmnFT6T7OIR0xAtvT-mXX/s1600/custom-blogger-jquery-lightbox-for-displaying-images.png" title="add a custom jquery lightbox to blogger" width="320" /></a></div>
 
To see a demo of it, please visit this page and click on any image to enlarge. 
 
 
<h3>
Adding jQuery Lightbox to Blogger</h3>
Step 1. From your <a blogger.com="" href="https://www.blogger.com/null" http:="" rel="nofollow" style="color: blue;" target="_blank">Blogger Dashboard</a>, click on Template > Edit HTML  
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVYVa22C5i1Kn6zBVvyxEsUczaaacN9xsHDVOfWL9_ch0t3hdwuHu8b6z6KLw3nKN2Gs7GjqI3DRfsSnD_bqMjtimTHp47XB3NbH31UB2D9jsOQKcObRfbYAnVXeYR3rC2v_TWXmVj3fa9/s1600/blogger_blogspot_template_edit_html_tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PPi2VMehKn33gUz6arnSMgghenge9AHtEa-6RlusZovbucGXRkBGGnLCGmVEzsepXFEb4QzMiE_jr0phSPU55ywzjNCy28kKbYWZtiCjGiNuQ6OsoQVSD5HH5BSISgVWcEY0fWXRcA5k/s1600/edit+html.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Blogger Edit HTML" border="0" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PPi2VMehKn33gUz6arnSMgghenge9AHtEa-6RlusZovbucGXRkBGGnLCGmVEzsepXFEb4QzMiE_jr0phSPU55ywzjNCy28kKbYWZtiCjGiNuQ6OsoQVSD5HH5BSISgVWcEY0fWXRcA5k/s1600/edit+html.jpg" title="how to add a custom jquery lightbox to blogger " width="320" /></a></div>
 
Step 2. Click anywhere on the code area and press the CTRL + F keys to open the search box. 
Paste the following tag inside the search box and hit Enter to find it: 
<blockquote class="tr_bq">
]]></b:skin></blockquote>
Step 3. Choose a style from below and just above the ]]></b:skin> tag, paste the CSS code: 
 
Lightbox with white background: 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisddKeZTsqChcwBFnHaxDzVN5MSgA9uFWeNXOCaR4XC2HWBuj4mVmwRP9Ju5BbCBQ-YR94WiFyjBR4kq1DxpPtiqjRdqj57HaiQc6hAcQNS2fzafeXqjUsutfXiVLH-180E5jF04uRtxZZ/s1600/jquery-lightbox-with-white-background.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="jquery lightbox white" border="0" height="242" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisddKeZTsqChcwBFnHaxDzVN5MSgA9uFWeNXOCaR4XC2HWBuj4mVmwRP9Ju5BbCBQ-YR94WiFyjBR4kq1DxpPtiqjRdqj57HaiQc6hAcQNS2fzafeXqjUsutfXiVLH-180E5jF04uRtxZZ/s1600/jquery-lightbox-with-white-background.png" title="add a custom jquery lightbox to blogger" width="320" /></a></div>
<blockquote class="tr_bq">
#jquery-overlay{position:absolute;top:0;left:0;z-index:90;width:100%;height:500px;} 
#jquery-lightbox{position:absolute;top:10%;left:0;width:100%;z-index:100;text-align:center;line-height:0;} 
#jquery-lightbox a,#jquery-lightbox a:hover{border:none;} 
#jquery-lightbox a img{border:none;} 
#lightbox-container-image-box{position:relative;background-color:#fff;max-width: 960px;max-height: 560px;margin:0 auto;} 
#lightbox-container-image{padding:10px;} 
img#lightbox-image {max-height: 540px;max-width: 940px;} 
#lightbox-loading{position:absolute;top:40%;left:0%;height:25%;width:100%;text-align:center;line-height:0;} 
#lightbox-nav{position:absolute;top:0;left:0;height:100%;width: 100%;z-index:10;} 
#lightbox-container-image-box > #lightbox-nav{left:0;} 
#lightbox-nav a{outline:none;} 
#lightbox-nav-btnPrev,#lightbox-nav-btnNext{width:49%;height:100%;zoom:1;display:block;} 
#lightbox-nav-btnPrev{left:10%;float:left;} 
#lightbox-nav-btnNext{right:10%;float:right;} 
#lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;background-color:#fff;margin:0 auto;line-height:1.4em;overflow:auto;max-width: 940px;;padding:0 10px 0;} 
#lightbox-container-image-data{padding:0 10px;color:#555;} 
#lightbox-container-image-data #lightbox-image-details{width:70%;float:left;text-align:left;} 
#lightbox-image-details-caption{font-weight:bold;} 
#lightbox-image-details-currentNumber{display:block;clear:left;padding-bottom:1.0em;} 
#lightbox-secNav-btnClose{width:66px;float:right;padding-bottom:0.7em;}</blockquote>
Lightbox with dark background: 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSPKmYelj_d-Y04BXc1UG9nZQ_rRORj2m9XitnNK1dlu0soKCX06m7rU23c1xbzTEA9_QaNJWGS6yOgB_F-YfbuW2u7nhdv-oi9rpdfWfE3gH6ju-EOpKOPgXUiSsy-W8yFKovDK0iOhw0/s1600/jquery-lightbox-with-dark-background.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="jquery lightbox dark" border="0" height="244" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSPKmYelj_d-Y04BXc1UG9nZQ_rRORj2m9XitnNK1dlu0soKCX06m7rU23c1xbzTEA9_QaNJWGS6yOgB_F-YfbuW2u7nhdv-oi9rpdfWfE3gH6ju-EOpKOPgXUiSsy-W8yFKovDK0iOhw0/s1600/jquery-lightbox-with-dark-background.png" title="add a custom jquery lightbox to blogger" width="320" /></a></div>
<blockquote class="tr_bq">
#jquery-overlay{position:absolute;top:0;left:0;z-index:90;width:100%;height:500px;} 
#jquery-lightbox{position:absolute;top:10%;left:0;width:100%;z-index:100;text-align:center;line-height:0} 
#jquery-lightbox a,#jquery-lightbox a:hover{border:none} 
#jquery-lightbox a img{border:none;} 
#lightbox-container-image-box{position:relative;background-color:#000;max-width: 960px;max-height: 560px;margin:0 auto} 
#lightbox-container-image{padding:10px;} 
img#lightbox-image {max-height: 540px;max-width: 940px;} 
#lightbox-loading{position:absolute;top:40%;left:0%;height:25%;width:100%;text-align:center;line-height:0} 
#lightbox-nav{position:absolute;top:0;left:0;height:100%;width: 100%;z-index:10} 
#lightbox-container-image-box > #lightbox-nav{left:0;} 
#lightbox-nav a{outline:none} 
#lightbox-nav-btnPrev,#lightbox-nav-btnNext{width:49%;height:100%;zoom:1;display:block} 
#lightbox-nav-btnPrev{left:10%;float:left} 
#lightbox-nav-btnNext{right:10%;float:right} 
#lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;background-color:#000;margin:0 auto;line-height:1.4em;overflow:auto;max-width: 940px;;padding:0 10px 0} 
#lightbox-container-image-data{padding:0 10px;color:#fff} 
#lightbox-container-image-data #lightbox-image-details{width:70%;float:left;text-align:left} 
#lightbox-image-details-caption{font-weight:bold} 
#lightbox-image-details-currentNumber{display:block;clear:left;padding-bottom:1.0em} 
#lightbox-secNav-btnClose{width:66px;float:right;padding-bottom:0.7em}</blockquote>
Step 4. Now find the </head> tag and just above it, add the following scripts: 
 
Lightbox with white background: 
<blockquote class="tr_bq">
   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/> 
    <script src='http://helplogger.googlecode.com/svn/trunk/custom-lightbox-for-blogger.js' type='text/javascript'/></blockquote>
Lightbox with dark background: 
<blockquote class="tr_bq">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/> 
    <script src='http://helplogger.googlecode.com/svn/trunk/custom-lightbox-for-blogger-black.js' type='text/javascript'/></blockquote>
Step 5. Click on the Save template button. 
 
Now we need to disable the original Blogger lightbox so that it doesn't interfere with this one that we just added. Go to Settings > Posts and comments and on the right side you will see the "Showcase images with Lightbox" section. Select "No" and click on the Save settings button on the upper right side. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdPuID3-RadlYuunaV29yMi3-OHwQ-KNAcpE6c3yH63m66hBV8o-OF1jMUKREa9D2zHwdnMO6Gk_YKt5WF9TLLQNyDSJePSs8DRqk0nZ1lU-IaXkbV1FQTvXCRPTzV-FsK_Fsj0LkdkDd7/s1600/disable-blogger-lightbox.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="disable blogger lightbox" border="0" height="287" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdPuID3-RadlYuunaV29yMi3-OHwQ-KNAcpE6c3yH63m66hBV8o-OF1jMUKREa9D2zHwdnMO6Gk_YKt5WF9TLLQNyDSJePSs8DRqk0nZ1lU-IaXkbV1FQTvXCRPTzV-FsK_Fsj0LkdkDd7/s1600/disable-blogger-lightbox.png" title="Add a custom jquery lightbox to blogger" width="400" /></a></div>
 
Now view your blog and click on any image to see the lightbox in action.</div>

Blog Design Image Effects jQuery Add a Custom jQuery Lightbox To Blogger

If you are not satisfied with the default lightbox set up by Blogger, here's another amazing way to show off your images. I have already shown you in one of my previous tutorials how to customize the Blogger lightbox by changing the background color…