Adding Light Box To Blogger Images Fixed and working.

What’s New About This Widget

* First of all we add the widget code to our template,
* You’ll be able to (Link) this widget to your single images in blogger.
* You can use it to make photo gallery.
* You can make Slide show with it.
* You can add it to your (links).

How Is It Work

First of all we add the widget code to our template,
Then when we add an image to a new post we have to {Link} it to the widget by adding a tiny code to it by changing the post writing mode from compose to html don’t worry it’s easy, continue reading to figure it out  
Step 1

</head>

 
And Before it add the following code.

<!--Code-By-AllBlogTools-->

<link href='http://www.mydatanest.com/files/allblogtools/29603_izeup/lytebox.css' media='screen' rel='stylesheet' type='text/css'/>

<script src='http://www.mydatanest.com/files/allblogtools/29602_xemqf/lytebox.js' type='text/javascript'/>

<!--Code-By-AllBlogTools-->

Now we’ve add all require codes to the template, lets know how to use it.

Step 2 – How To Use

The way to make this widget works in your blog is very easy but you have to know what you do,
What you have to do is : add a small code to the images code. and you can find the images code in post writing area when you change the mode from compose to edit html.

Step 2.1 – Add It To Single Image

Go to blogger account, start writing your post in normal mode (compose)
And once you add an image to your post, please change your mode to edit html, see previous imsge
You’ll find the image code looks like the following.

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqS_p8Hh78DQHjasacAkFGDxFOjtpWQT67g8LSWtVlr87pw5YeQS9Y22eaHLEvMTNudnvQzFk5CSV2XApuNDeBNtCiHTj2JOjEu4he81bDK4gETdu1yoQgu3skH4-4ZfJ90J7wrCMXVl8U/s1600/3924705805_15d638ca8d_o.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 324px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqS_p8Hh78DQHjasacAkFGDxFOjtpWQT67g8LSWtVlr87pw5YeQS9Y22eaHLEvMTNudnvQzFk5CSV2XApuNDeBNtCiHTj2JOjEu4he81bDK4gETdu1yoQgu3skH4-4ZfJ90J7wrCMXVl8U/s400/3924705805_15d638ca8d_o.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>

What we’ll need to add for this code is the next part

rel="lytebox" 

Example Code For Single Image : 

<a rel="lytebox" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqS_p8Hh78DQHjasacAkFGDxFOjtpWQT67g8LSWtVlr87pw5YeQS9Y22eaHLEvMTNudnvQzFk5CSV2XApuNDeBNtCiHTj2JOjEu4he81bDK4gETdu1yoQgu3skH4-4ZfJ90J7wrCMXVl8U/s1600/3924705805_15d638ca8d_o.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 324px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqS_p8Hh78DQHjasacAkFGDxFOjtpWQT67g8LSWtVlr87pw5YeQS9Y22eaHLEvMTNudnvQzFk5CSV2XApuNDeBNtCiHTj2JOjEu4he81bDK4gETdu1yoQgu3skH4-4ZfJ90J7wrCMXVl8U/s400/3924705805_15d638ca8d_o.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a> 

 And you are done.

Step 2.2 – How To Make Photo Group Gallery

We’ll do the same as the previous step, but instead of adding Only

rel="lytebox"

we’ll have to add a name for this code so it’ll be

rel="lytebox[groub1]"

when you add this code for more than one image, all the images will open as a group.
Example Code For Images Album : 

rel="lytebox[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqS_p8Hh78DQHjasacAkFGDxFOjtpWQT67g8LSWtVlr87pw5YeQS9Y22eaHLEvMTNudnvQzFk5CSV2XApuNDeBNtCiHTj2JOjEu4he81bDK4gETdu1yoQgu3skH4-4ZfJ90J7wrCMXVl8U/s1600/3924705805_15d638ca8d_oddjpg">

rel="lytebox[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqS_p8Hh78DQHjasacAkFGDxFOjtpWQT67g8LSWtVlr87pw5YeQS9Y22eaHLEvMTNudnvQzFk5CSV2XApuNDeBNtCiHTj2JOjEu4he81bDK4gETdu1yoQgu3skH4-4ZfJ90J7wrCMXVl8U/s1600/3924705805_15d638ca8d_oddjpg">

Step 2.2 – How To Make A Slide Show

Instead Of adding

rel="lytebox[groub1]"

We’ll add

rel="lyteshow[groub1]"

 
For links we use rel="lyteframe" before href of the link
thanks if you have any problem email me or comment here.
demo:Saab Pakistani 2000

Three colum footer for blogger blogs

Creating the new columns

Here are the four steps needed to transform the footer section of your blog template:

1. Back up your existing blog template!
   
   Before making any modifications to your blog template, it is essential that you make a back up of your existing template. Then if you make any mistakes, or decide you don't like the new look, you can easily revert back to this design.
   
   To back up your existing template, go to Template>Edit HTML in your Blogger dashboard, and click on the "Download Full Template" link near the top of the page. You can then save your existing XML template file to your computer.
2. Move all existing widgets from the existing footer section
   
   In the Layouts section of your Blogger dashboard, move all widgets which are present in your footer section into your sidebar (or other section) instead. This is only temporary, as you can move them back later once we have finished adding your new footer section. Most importantly, this ensures that you don't lose these widgets during the modification, and makes it much easier to complete.
3. Add extra code to your footer section.
   
   Go to Template>Edit HTML in your Blogger dashboard, and do not check the "expand widget templates" box (this simplifies the process).
   
   Now you need to find this section in your template:

<div id='footer-wrapper'>

<b:section class='footer' id='footer'/>

</div>

Please note that this particular section may be called something slightly different in your template, eg: "footer-wrap" or "footer". In the case of Rounders templates, you may notice that there are in fact two DIV sections around the footer section. In any case, all we need to change is the line highlighted in red.

Replace the entire line highlighted in red with the code below: 

<div id='footer-column-container'>



        <div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>



            <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>

        </div>



        <div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>

            <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>

        </div>



        <div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>



            <b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>

        </div>



<div style='clear:both;'/>

<p>

<hr align='center' color='#5d5d54' width='90%'/></p>

<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>



<b:section class='footer' id='col-bottom' preferred='yes'>

<b:widget id='Text2' locked='false' title='' type='Text'/>

</b:section>



</div>

<div style='clear:both;'/>



</div>

• is a good idea to save your template at this stage, before we add just one small section of code to style the new footer section and ensure that the widgets don't get pushed beneath each other when you add them later.
• Adding style for the new footer section
  
  Once again, open the Edit HTML section in your Blogger dashboard. This time, you need to find the closing "" tag, which is where the style section of your template ends.
  Immediately before this line, add the following lines of code: 

• #footer-column-container {
  
  clear:both;
  
  }
  
  
  
  .footer-column {
  
  padding: 10px;
  
  
  
  }

  
  

• And save your template again. The style in these lines of code ensure that the footer column don't get too bunched up, or slide beneath each other in the layout of your template.
• Now you have finished adding these new sections to your footer, go to the Layout section of your Blogger dashboard (Template>Layout), and you will see the three new column, plus a lower section which spans the width of all three column, to which you can now add new widgets!
• I added a horizontal line to the footer section to ensure that there is a clear distinction between content in the footer columns and content in the wider section beneath. If you would like to change the color of this line, you can do so by replacing the hex color values in the line below (highlighted in red) with a different color:

• <hr align='center' color='#5d5d54' width='90%'/>

  
  

Height Fixer For Blogger

Making the Sidebar and the Post Area to be of Same Height

Some of the simple blogger templates use CSS to set the background color of the sidebar and the main post part.In this case,the heights of these two columns can be different making it look a little awkward.In many cases you may want to make both of these columns of the same height.
If you didn't understand what i am talking of,then i will show you some demos.
Check out the sidebars of both

Blog Without Height Fixing – Link
Blog After Height Fixing – Link
The height adjustment can be done using a very simple javascript code.Actually i had to make something like this for another site of mine.So i thought of sharing this with you guys,
Here is the height fixing script.

<script type='text/javascript'>
<!--
onload=function() {

var mh = document.getElementById('main-wrapper').offsetHeight;
var sh = document.getElementById('sidebar-wrapper').offsetHeight;
if(sh>mh) mh=sh;
document.getElementById('main-wrapper').style.height = document.getElementById('sidebar-wrapper').style.height = mh+ 'px'
 }
//-->
</script>

What does this height fixer do?

When the page is fully loaded,this javascript code will get executed(as we have used onload). Now the variable mh will get the value of the height of the div with id main-wrapper.The variable sh will get the value of the height of the div with id sidebar-wrapper,Next we make a check.We check if sh is greater than mh.The greater of these values will be assigned to the variable mh
Now we set the height of both the divs[div with id sidebar-wrapper and the div with id main-wrapper]  as sh pixels. So what does this actually do?? This script checks which of these divs have a larger height and assigns that larger height to both of these divs thus making both of them of equal height.

Where to place this height Fixer Code?

The height fixer code can be placed anywhere in the head section of your template.If you are still confused about where to place the code,then place it just above

</head>

Where else Can i Use this Script?

This script can be used anywhere where you need to adjust the height of two divisions(divs) to be the same.In that case don’t forget to change main-wrapper and sidebar-wrapper in this script with the respective ids of those divs.That means you can use this script to adjust the height of any two columns and make them of same height.
Why is the script having so many complex characters like < > etc?.
This is a parsed javascript.Blogger has problems with normal javascript(you might know this if you have tried to add the adsense code into the template).

Does this work on All Browsers?

This is a a very simple javascript code and it will work on all browsers.

 

Highlight Author Comment in Blogspot

This trick is to give a Highlight Author Comment . This will make the blog's owner comments looks different from the visitors comments. It's very usefull and interesting blogger hack tips. You can see the example in my blog. Here is what to do to make a "Highlight Author Comment" effect in Blogspot.

1. Login to blogger, then choose "Layout --> Edit HTML". Don't forget to backup your template first.
2. Check the "Expand Widget Templates" box.
3. Copy this script and put it before

]]></b:skin>

 
or copy to your CSS area.

.comment-body-author {

background: #E6E6E6; /* Background color*/

color: #000; /* Text color*/

border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;

margin:0;

padding:0 0 0 20px; /* Posotion*/

}

4. Then find this code:

<dl id='comments-block'>



<b:loop values='data:post.comments' var='comment'>



<dt class='comment-author' expr:id='"comment-" + data:comment.id'>



<a expr:name='"comment-" + data:comment.id'/>



<b:if cond='data:comment.authorUrl'>



<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>



<b:else/>



<data:comment.author/>



</b:if>



said...



</dt>







<b:if cond='data:comment.author == data:post.author'>


<dd class='comment-body-author'>


<p><data:comment.body/></p>


</dd>


<b:else/>







<dd class='comment-body'>



<b:if cond='data:comment.isDeleted'>



<span class='deleted-comment'><data:comment.body/></span>



<b:else/>



<p><data:comment.body/></p>



</b:if>



</dd>







</b:if>







<dd class='comment-footer'>



<span class='comment-timestamp'>



<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>



<data:comment.timestamp/>



</a>



<b:include data='comment' name='commentDeleteIcon'/>



</span>



</dd>



</b:loop>



</dl> 

5. The red color text is the code that you have to add to your script. The position must be right.
6. And then save your template.

* You have to login into your blogger account before to give comments. 

Removing The Blogger Bar

I hated the blogger bar across the top of my Web site because it didn’t really go with my template and I already had a Google search bar integrated. So I went on a mission to remove it and de-bloggerify my blog. I searched far and wide and for some reason kept hitting a dead end. It turns out that the code used to change the old blogger templates no longer works! So after tracking down the CSS changes here is how I did it:

All you need to do is add the following CSS to your template under edit HTML. You need to put in anywhere in your template between the tags.

#navbar-iframe { height:0px; visibility:hidden; display:none; }