Parse Html Code

By parse this code we can add the code  HTML  in the comment box. Here is the code  HTML  base would be converted automatically into a simple form that can be put into the post, comment box, etc. as described earlier.

 © iTechnoplanet.blogspot.com Webmaster Tools | Blogger Tool

Html Color Codes Generator

Instructions:

• First drag the bar on the "Hue" selector to the area of your desired colour palate. 
• Then click inside the Brightness/Saturation area and drag the cursor until you have achieved your desired colour. The "Swatch" bar shows you the final colour result.
• The hexadecimal colour code is generated in the "Hex" box. Simply copy the six digit code i.e #000000
• That’s it!

Enjoy!!!!

How To Add Energy Saving Mode For Your Blogger

 How To Add Energy Saving Mode For Your Blogger

1.Login to your blogger dashboard--> Design- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'/>

4.Click on Save template.

5.now go your blogger dashboard and go to Desing --&-- Page Elements.

6.Click on 'Add a Gadget' on the sidebar.

7.Select 'HTML/Javascript' and add the one of code given below

<script language="javascript" type="text/javascript" src="http://www.onlineleaf.com/savetheenvironment.js?time=120"></script>

Note: Replace ?time=120 with the number of seconds you would like to define the time interval.which will set the time of inactivity to 2 minutes (120 seconds)

8.Now save your "HTMl JavaScript" You are done..

Cheers

How To Add Page Popularity and Top popular pages widget

Hey! bloggers you know we have a popular post widget to find popular posts in our blog. but you know we have a gadget to find a popular posts in our website/blog. no. dont worry! today i'm explain you how to add popular pages finder gadget to blogger sidebar! this gadget similer to popular post. i hope you really like this gadget! if you like this gadgte please read following steps to know how to add this gadgte to your blog. and thank you for visitng my blog.we will meet again in next post..

1.Log in to your dashboard-->Design- -> Edit HTML

2.Click on "Expand Widget Templates

3.Scroll down to where you see this

Add Page Popularity Widget

Paste the below code just after
<p><data:post.body/></p>


<img expr:src='"http://foxrecord.appspot.com/rating?url=" + data:post.url + "&amp;title=" + data:post.title' />




Add Top popular pages widget

Paste the below code just after 

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

<script src="http://foxrecord.com/scripts/gettop.js" type="text/javascript"></script>

4.Click on "Save Templates" and you are done.

How To Add Page Load Timer Show Script to Your Blog

How To Add Page Load Timer Show Script to Your Blog

1.Log in to your dashboard--> Desing- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see </head> tag.

4.Now add below code before </head> tag.

<!-- page load timer -->
<script type='text/javascript'>
var d = new Date();
var starttime = d.getTime(); //Get the start time
</script>

5.Now find </body> tag.

6.add below code before </body> tag.

<!-- page load timer start -->
<script type='text/javascript'>
var d2 = new Date();
var endtime = d2.getTime(); //Get the end time
//Find the difference between the start and end times
var totaltime = (endtime - starttime)/1000;
//Round 2 decimal places
var result = Math.round(totaltime*100)/100;
//Output results to a &quot;P&quot; element
document.getElementById(&quot;loadtime&quot;).innerHTML = &quot;Page loaded in: &quot;+ result +&quot; seconds&quot;;
</script>
<!-- page load timer end -->

7. Click On "Save Template" You are done.

How To Add HTML Picture Codes to Blogger / Basic

How To Add HTML Picture Codes to Blogger / Basic

1.Login to your Bogger Dashboard and go to Design >> & Page Elements.

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3cl7bATinvPDzr46d4yCD0d6e5hiY_kY-CG2Yfo92AQieVSf4FTh5wNfY0TMgQ_a6JXxRsjKNg4MeVyjscUe6icp24Oi3MM32agqVWdrkEQsx93SBzaxfTB8YdrGY34TzGbROd81OQnY/" width="125" height="125" alt="Blogger tricks and toolz" />

Look at the example below:



4. Now Click on Save "Html Java Script" and You are done..

Cheers







Picture From : www.Bloggertrickandtoolz.com

How To Add Author info Widget in Blogger

How To Add Author info Widget in Blogger

1.Log in to your dashboard-->Desing- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this: ]]></b:skin> Tag.

4.Copy below code and put it before ]]></b:skin>

.author_info {
float: left;
width: 533px;                 /* Set Width of Widget As you want */
padding: 10px;
border: 1px solid #a1cb26;    /* Border of Widget */
margin-bottom: 15px;
margin-top: 15px;
background: #F0FDC6;          /* Background Color of Widget*/
}
.author_info h3 {
font-size:17px;
color:#001530;                /* Text color of "This Post is Written" by */
margin-bottom: 5px;
}
.author_photo {
float: left;
margin: 0 10px 0 5px;
}
.author_photo img {
border: 3px solid #ccc;       /* Border color of Image*/
 height: 100px; width:100px;  /*Height and Width of Avatar of Author */
}

5.Now Scroll down to where you see this: <data:post.body/>

6.Add Following code after <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='author_info'>
<div class='author_photo'>
<img alt='author' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpjXujFQbR1tSalJQUxCsubU3XO1wRnH4NEWbVtJUyzca5hvOQIhrewvO3zUVRY2RIe5LGdYO5sy1LGdonnur93rzQ_DZK7o45xiEm7RBS_tUe47TQ46TkH88UFfpo2jbfIfsS7DWiaCo/'/></div>
<h3>This post is written by:<a href='http://www.bloggertricksandtoolz.com'>Sameera</a> </h3>

<p>I am Sameera and write trick and tips on blogger, wordpress and different hacks. <a href='http://www.bloggertricksandtoolz.com/about'>Click Here</a> to Know more about Author.</p><p>If you like This post, you can follow bloggertricksandtoolz.com on <a href='http://twitter.com/bloggertoolz'><b>Twitter</b></a> or Be fan on <a href='http://www.facebook.com/pages/Blogger-Tricks-And-Toolz/142779799101916' target='_blank'><b>Facebook</b></a>.</p>
</div>

</b:if>

Note: Change Read color to with your content and change green color to your prefered Text.

7. Click Save Template and you are almost done.

Cheers

How To Add Animate Scrolling Text on Your Browser Title Bar

Hi! how day! here is the another new javascript gadget.. " How to add animated scrolling text to browser title bar" i think this is very cool gadget.. so many visitors amazing see this gadget!!! please read the below information and add this gadget to your blog today... so this is very cool gadget to decorate your blog look.. try this today!! thanks!

1.Login to your blogger dashboard--> Desing- -> Edit HTML

2.Scroll down to where you see <head> tag

3.Copy below code and paste it just before the <head> tag

<script type='text/javascript'> 
//<![CDATA[
msg = "Type Your Text Hear";
msg = " .................................. " + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
//]]>
</script>

4.Now Click on "Save Templates" Now your Done

Picture from http://www.blogger.com

How To Add Automatic Read More With Thumbnail For Blogger

Hi friends. are you like to show summary of post on front page of  blogger. is it too complicated ?? ok then go for this step.. this step really works!... Read More Function helps us to reduce the loading time of our blog.Look at my home page you can find a difference in the posts showing here and when you visit on the post item page. its automatically generates thumbnail for the post based on the images inside the posts which is quite cool. ok Friends... I think all you guys will love this blogger hack! read below steps to do this cool blogger hack..we will meet again in next post.Thank you.

How To Add Automatic Read More With Thumbnail For Blogger

1. Login To Your Blogger Dashboard--> Desing--> Edit HTML

2. Scroll Down To Where You See </head> tag .

3. Now Add Below Code Before </head> tag.

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

4. Scroll down to where you see <data:post.body/> tag.

5. Copy below code and paste it just after <data:post.body/>.

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi05n482HB_9ZMZjxTb0wEHzOnEn8waMHrhJaAw5mSktqogwyx3yXTQ_PVKTV_vAYDhFUwpVrhWbIVs_o5Myn8P69uUGtvkdmpSgCWSK4jRgS01FjANKljMEi51_zTYooajl_UvmUU8Yak/'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Note : Adjust description shown
summary_noimg = 430;
summary_img = 340;

Change The Height And Width of Image Thumbnail
img_thumb_height = 100;
img_thumb_width = 120;


6. Now Click On 'SaveTemplate' You are done...

Save And Share Blogger Posts Social Bookmarking Widget

Save And Share Blogger Posts Social Bookmarking Widget

1.Log in to your dashboard--> Desing- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see ]]></b:skin> tag.

4.Copy below code and paste immediately before it ]]></b:skin>

#bookmarks-footer {
padding: 0px 10px 0px 0px;
text-align: center;
overflow: hidden;
}
#bookmarks-footer a {
text-decoration:underline;
font-size:80%;
}
#bookmarks-footer a:hover {
text-decoration:none;
}
#bookmarks-footer span {
font-size: 27px;
line-height: 48px;
font-weight: bold;
padding-right: 5px;
}
#bookmarks-footer .stumble { background: url(http://i45.tinypic.com/20ua5j4.jpg) center top no-repeat;padding-top: 50px; display: block; width: 48px; float: left;margin-right:10px; }
#bookmarks-footer .digg{ background: url(http://i48.tinypic.com/30ldvmd.jpg) center top no-repeat;padding-top: 50px; display: block; width: 48px; float: left;margin-right:10px; }
#bookmarks-footer .tweet { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfFwxeJM62B1sOQDmFY1aO7oxYX1pAQnRZlE2u0S9rLadoK7QUxcBhEwZoIPVq7fYxIGlac_labIKipz9hDl0UNwN4Y2iiLa_wWW7LvBsT0awkZv-xpJ7K6BMUOD4ahEw22cKKk8D77u4/) center top no-repeat;padding-top: 50px; display: block; width: 48px; float: left;margin-right:10px; }
#bookmarks-footer .save { background: url(http://i48.tinypic.com/jl3v3q.jpg) center top no-repeat;padding-top: 50px; display: block; width: 48px; float: left;margin-right:10px; }
#bookmarks-footer .reddit { background: url(http://i45.tinypic.com/xgmwdf.jpg) center top no-repeat;padding-top: 50px; display: block; width: 48px; float: left;margin-right:10px; }
#bookmarks-footer .more { background: url(http://i49.tinypic.com/2mxeds8.jpg) center top no-repeat;padding-top: 50px; display: block; width: 48px; float: left; }

5.Now find this code: <data:post.body/> and replace it with the bellow code

<data:post.body/>

<div id='bookmarks-footer'>
<h3>Save and Share!</h3>
<a class='save' expr:href='&quot;http://del.icio.us/post?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on del.icio.us'>Save iT</a>
<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Digg this!'>Digg this</a>
<a class='stumble' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'>Stumble It</a>
<a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Reddit'>Reddit It</a>
<a class='tweet' expr:href='&quot;http://twitter.com/home?status=Reading: &quot; + data:blog.title + &quot; - &quot; + data:post.url + &quot; (@BBW)&quot;' rel='nofollow' title='Tweet This!'>Twitter</a>
<a class='more' href='http://www.addtoany.com/share_save'>More</a>
</div>

6. Click on "Save Template" You are Done.

Cheers.!

Add Delicious Bookmark Buttons With Counter For Blogger

Add Delicious Bookmark Buttons With Counter For Blogger

1.Log in to your dashboard--> desing- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this <data:post.body/> Tag.

4.Copy below code and paste it just after the line <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='share-delicious'>
<div class='delicious' id='delic'>0</div>
<div class='delicious-b'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='blank'>delicious</a></div>
<script type='text/javascript'>
function delic(info) { 
if(!info[0]) return;
var num = info[0].total_posts;
if(!num) return; 
var delic = document.getElementById(&#39;delic&#39;);
delic.innerHTML = &#39;&#39; + num;
delic.style.textIndent = 0;
delic.style.paddingRight= &#39;6px&#39;;
}
</script>
<script expr:src='&quot;http://badges.del.icio.us/feeds/json/url/data?url= &quot; + data:post.url + &quot;&amp;callback=delic&quot;'/>
</div>
</b:if>
<div class='clear'/>

5.Now Scroll down to where you see ]]></b:skin> tag .

6.Copy below code and paste it just before the ]]></b:skin> tag.


Style 1:

.share-delicious{
width:50px;
height:63px;
text-align:center;
}

.delicious{
width:50px;
height: 45px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRBGYErGZY4OAGO0Z0ZWQlf1LjZVZyykAZTM3ECkZMHo1UuZVFaDpxy_p3XChMxgupNP1ZimsyJKE-kK3aDBmmK9zxOTQFkdH9DmFd0G2oZVBSGc11mgexBN10fsnpO731XWI-fQRBHFI/s1600/del+above.png) no-repeat;
font-weight: bold;
font-size: 16px;
font-family:arial;
color:#adadad;
margin:0 auto;
line-height:36px; 
}
.delicious-b{
font-size:10px;
text-transform:none;
color:#FFF;
margin:0 auto;
width:50px;
height:17px;
line-height: 17px;
}
.delicious-b a:link, .delicious-b a:visited{
color:#FFF;
font-weight:normal;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQTKl10faX-8E8J8cLljpVXH6lTdA7z09o5kf2SPpsJLFc_W3Tiv8iwr53Z7A3IW78Tc0dsojKxz5t8HBWGb07sxnVh3P6JKM18i82xc4BAS9AacGYa0uArsEY4JwtIJYNzA-Xz6PqF3E/s1600/del+new.png) no-repeat;
display: block;
text-decoration:none;
}
.delicious-b a:hover{
color:#11788b;
font-weight:normal;
text-decoration:none;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQTKl10faX-8E8J8cLljpVXH6lTdA7z09o5kf2SPpsJLFc_W3Tiv8iwr53Z7A3IW78Tc0dsojKxz5t8HBWGb07sxnVh3P6JKM18i82xc4BAS9AacGYa0uArsEY4JwtIJYNzA-Xz6PqF3E/s1600/del+new.png) no-repeat center -17px;
display: block;
}

Style 2:

.share-delicious{
width:100px;
height:19px;
text-align:center;
font-family:arial;
}
.delicious{
width:46px;
height: 19px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRvIdDj9bBzH1ksgLSXzZckgEg0g8jaMaSRHc9qOBpl0Tm3jOko2PAqEFUO-ucoWOX2W-C5On6ZR8VtUOJ1iZEX1PU3p0D9nPus2OwJlPbDGS_LJ1GMQtO1PWIfRKqrx1pPcqn2DfdSs4/s1600/comp+del.png) no-repeat;
font-weight: bold;
font-size: 13px;
color:#999;
margin:0 auto;
line-height:18px; 
float:left;
}
.delicious-b{
font-size:10px;
text-transform:none;
color:#FFF;
margin:0 auto;
width:50px;
height:17px;
line-height: 17px;
float:left;
}
.delicious-b a:link, .delicious-b a:visited{
color:#FFF;
font-weight:normal;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQTKl10faX-8E8J8cLljpVXH6lTdA7z09o5kf2SPpsJLFc_W3Tiv8iwr53Z7A3IW78Tc0dsojKxz5t8HBWGb07sxnVh3P6JKM18i82xc4BAS9AacGYa0uArsEY4JwtIJYNzA-Xz6PqF3E/s1600/del+new.png) no-repeat;
display: block;
text-decoration:none;
}
.delicious-b a:hover{
color:#11788b;
font-weight:normal;
text-decoration:none;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQTKl10faX-8E8J8cLljpVXH6lTdA7z09o5kf2SPpsJLFc_W3Tiv8iwr53Z7A3IW78Tc0dsojKxz5t8HBWGb07sxnVh3P6JKM18i82xc4BAS9AacGYa0uArsEY4JwtIJYNzA-Xz6PqF3E/s1600/del+new.png) no-repeat center -17px;
display: block;
}

7.Now click on "Save template" you are done.

Cheers.

How To Add the Feedback Button to Your Blogger



1.Log in to your dashboard--> Desing- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this </head> Tag

4.Copy below code and paste it just after above code.

/* FEEDBACK SIDE TAB START http://btricks-tools.blogspot.com /* 
#fadeinbox {
  display:scroll;
  position:fixed;
  center:5px;
  left:0px;
  top:200px;
  }
/* FEEDBACK SIDE TAB End http://btricks-tools.blogspot.com/*

5. Save your template.

6.Now go to Desing --&-- Page Elements.

7.Click on 'Add a Gadget' on the sidebar.

8.Select 'HTML/Javascript' and add the one of code given below

<div id='fadeinbox'>
<a href='Your link' target='blank' title='Feedback or Requests'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-dBHEQuIoc2QYKfuNFsfBbOAfPjO_k_R7LWKKtrDDTR5hdmVkTAutOQwVePS-GszXRtTNl8iztj5OJDcsF-SuXGdJuDY6yQiMrXMWH8NMQxyOp8p1SMKGwG5HUMPTOVM59wCZek4Y5WA/'/></a>
</div>

9.Click on Save Javascript you are done..

Cheers..

How To Add Syntax Highlighter to Blogger

Hi! how are you? today i'm gonna give you cool gadget for your blog.. As we know it is really hard to post any source code to the blogger. so after i'm doing some google search. first i came a cool javascript. so today i'm give you this javascript. NOTE - PLEASE BACK UP YOUR BLOG TO BEFORE DO THIS. i hope you really like this cool syntax highlighter. please add your comments. happy day!

Follow the simple steps below to do it:

1.Login to your blogger dashboard--> Desing- -> Edit HTML

2.Scroll down to where you see ]]></b:skin> tag

3.Copy below code and paste it just before the ]]></b:skin> tag

.dp-highlighter
{
font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;
font-size: 12px;
background-color: #E7E5DC;
width: 99%;
overflow: auto;
margin: 18px 0 18px 0 !important;
padding-top: 1px; /* adds a little border on top when controls are hidden */
}

/* clear styles */
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span
{
margin: 0;
padding: 0;
border: none;
}

.dp-highlighter a,
.dp-highlighter a:hover
{
background: none;
border: none;
padding: 0;
margin: 0;
}

.dp-highlighter .bar
{
padding-left: 45px;
}

.dp-highlighter.collapsed .bar,
.dp-highlighter.nogutter .bar
{
padding-left: 0px;
}

.dp-highlighter ol
{
list-style: decimal; /* for ie */
background-color: #fff;
margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */
padding: 0px;
color: #5C5C5C;
}

.dp-highlighter.nogutter ol,
.dp-highlighter.nogutter ol li
{
list-style: none !important;
margin-left: 0px !important;
}

.dp-highlighter ol li,
.dp-highlighter .columns div
{
list-style: decimal-leading-zero; /* better look for others, override cascade from OL */
list-style-position: outside !important;
border-left: 3px solid #6CE26C;
background-color: #F8F8F8;
color: #5C5C5C;
padding: 0 3px 0 10px !important;
margin: 0 !important;
line-height: 14px;
}

.dp-highlighter.nogutter ol li,
.dp-highlighter.nogutter .columns div
{
border: 0;
}

.dp-highlighter .columns
{
background-color: #F8F8F8;
color: gray;
overflow: hidden;
width: 100%;
}

.dp-highlighter .columns div
{
padding-bottom: 5px;
}

.dp-highlighter ol li.alt
{
background-color: #FFF;
color: inherit;
}

.dp-highlighter ol li span
{
color: black;
background-color: inherit;
}

/* Adjust some properties when collapsed */

.dp-highlighter.collapsed ol
{
margin: 0px;
}

.dp-highlighter.collapsed ol li
{
display: none;
}

/* Additional modifications when in print-view */

.dp-highlighter.printing
{
border: none;
}

.dp-highlighter.printing .tools
{
display: none !important;
}

.dp-highlighter.printing li
{
display: list-item !important;
}

/* Styles for the tools */

.dp-highlighter .tools
{
padding: 3px 8px 3px 10px;
font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: silver;
background-color: #f8f8f8;
padding-bottom: 10px;
border-left: 3px solid #6CE26C;
}

.dp-highlighter.nogutter .tools
{
border-left: 0;
}

.dp-highlighter.collapsed .tools
{
border-bottom: 0;
}

.dp-highlighter .tools a
{
font-size: 9px;
color: #a0a0a0;
background-color: inherit;
text-decoration: none;
margin-right: 10px;
}

.dp-highlighter .tools a:hover
{
color: red;
background-color: inherit;
text-decoration: underline;
}

/* About dialog styles */

.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
.dp-about td { padding: 10px; vertical-align: top; }
.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
.dp-about .title { color: red; background-color: inherit; font-weight: bold; }
.dp-about .para { margin: 0 0 4px 0; }
.dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }

/* Language specific styles */

.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }
.dp-highlighter .string { color: blue; background-color: inherit; }
.dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }
.dp-highlighter .preprocessor { color: gray; background-color: inherit; }

5.Now Scroll down to where you see </head> tag

6.Copy below code and paste it just before the </head> tag

<!-- Add-in CSS for syntax highlighting -->
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>

7.Now again Scroll down to where you see </body> tag

8.Copy below code and paste it just before the </body> tag

<!-- Add-in Script for syntax highlighting -->
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

9.Now Click on "Save Templates".

10.Whenever you have to write some codes in your posts, click on "Edit Html" tab of your post editor and write the codes between the following tags

<pre name="code" class="cpp">

...Put your html-code here...

</pre>

Now your Done

How To Add Three Columns To Your Blogger Footer Section

Hey! Friends`are you know how to add 3 coulmns to your blogger footer section..many websites and blogs has three column footer.  footer section will provide more valuable space for blog widgets, and also contribute a modern "Web 2.0" appeal for your blog design. there are only 6 steps to do this..this footer hack is specially for blogs that have different  widths and styles.ok..try this very easy tutorial.. i hope you like this blogger hack..thankyou..

1.Log in to your Dashboard--> Desing- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this

<div id='footer-wrapper'>

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

</div>

4.Replace the line <b:section class='footer' id='footer'/> of above code with below code

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

5.Now find the </b:skin> tag in your template

6.Immediately before above line, add the below lines of code

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}

7.Now Save Templates,Your Are done

How To Add a Floating Back To Top Button for Blogger

H! Friends` today i'm gonna give you another cool trick for you.. it' is a  Floating Back To Top button. are you know what is the floating back to top button mean.. Once added the Button Will float down the page as the reader scrolls n reset at the foot of the page until needed. here we will use image back to top button.  you can change it picture anytime..please read the following steps in below.. i hope you like this widget!! thankyou..

1.Log in to your Dashboard--> Desing- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this

</body>

4.Copy below code and paste it just before the </body> tag

<a href='#' style='position: fixed; bottom:5px;Right:5px;' title='Back To Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk6rHA0qJ4Hd9iUM2_pElcy3ie-_UJkCyHzsbTQLAipwS09dRBuZPNC_YAzhwq09gA18Ccqe2D1dahyOwYkP_3a8T8XOf5vn2k_w6xpYdLF7dotUkyAxPrDTNwjhForyuVrOc2fIyBejU/' style='border: none;'/></a>

Note: Change the name as you like, And Change the image as you like,

5. Now Save Template, You are Done

Picture from http://icons.mysitemyway.com/free-clipart-icons/1/blogger-logo-icon-id/125732/style-id/907/matte-white-square-icons/social-media-logos/

How To Open All Link New Window For Blogger

Hi` friends today im gonna show you How To Open All Link New Window For Blogger.this is very cool system open to our blogger link new window.i hope your are realy like this code. :D so if you want to add this cool system your blog..? please follow below step and please share this post with your freinds..thanks you..have a good day..

How To Open All Link New Window For Blogger

1. Login To Your Blogger Dashboard--> Desing--> Edit HTML

2. Scroll Down To Where You See <head> tag .

3. Now Add Below Code Before <head> tag.

<base target='_blank'/>

4. Now Click On 'Save Template' You are done...


Picture from http://saamgeadaviya.blogspot.com/2010/09/new-window-open.html