iTechno Planet: Widget

Showing posts with label Widget. Show all posts

August 14, 2011

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

August 13, 2011

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 + "&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 Live Date Script For Blogger

How To Add Live Date Script For Blogger

1.Login to your blogger Dashboard and go to Desing --> Page Elements.

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

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

<script>
/*
Live Date Script- 
© Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions, 100's more DHTML scripts, and Terms Of Use,
visit http://www.dynamicdrive.com
Bloggerized by Sameera http://www.bloggertricksandtoolz.com/
*/

var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")

function getthedate(){
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var hours=mydate.getHours()
var minutes=mydate.getMinutes()
var seconds=mydate.getSeconds()
var dn="AM"
if (hours>=12)
dn="PM"
if (hours>12){
hours=hours-12
}
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
//change font size here
var cdate="<small><font color='000000' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+":"+seconds+" "+dn
+"</b></font></small>"
if (document.all)
document.all.clock.innerHTML=cdate
else if (document.getElementById)
document.getElementById("clock").innerHTML=cdate
else
document.write(cdate)
}
if (!document.all&&!document.getElementById)
getthedate()
function goforit(){
if (document.all||document.getElementById)
setInterval("getthedate()",1000)
}

</script>
<span id="clock"></span>

4.Save java script your 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 Scroll Bar Widget For Your Blogger

How To Add Scroll Bar Widget For Your Blogger

1.Login to your blogger dashboard and go to Desing --& Page Elements.

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

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

<div style="overflow:auto;width:260px;height:300px;padding:10px;"> 
<ul>

<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>

</ul>
</div>

Note: Replace Your Link and Your Text with your contents.

Now You are done.

How To Add Scroll Bar Widget For Your Blogger

<div style="overflow:auto;width:260px;height:300px;padding:10px;"> 
<ul>

<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>

</ul>
</div>

Note: Replace Your Link and Your Text with your contents.

Now You are done.

How To Add JS-Kit Rating to Blogger

Hi,This is very cool gadget. this gadget allow to your visitors to rating your blog posts. so i think this is very important gadget to every bloggers. this gadget given by js-kit.com. i think thsi very cool and charm widget! please read this steps and add this gadget to your blog..Thank You.

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

2.Click on "Expand Widget Templates

3.Scroll down to where you see this

<data:post.body/>

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

Code 1

<div style="float:left; margin-right:3px;"></div>
<div class="js-kit-rating"
expr:path="data:post.url"
expr:permalink="data:post.url"
expr:title="data:post.title">
</div>

Result :

Code 2

<div style="float:left; margin-right:3px;"></div>
<div class="js-kit-rating"
expr:path="data:post.url"
expr:permalink="data:post.url"
expr:title="data:post.title" view="score">
</div>

Result :

5.Now again scroll down to where you see the </body> tag.

6.Add below code just before the </body> tag.

<script src="http://js-kit.com/ratings.js"></script>

7.Save Templates

Now you are done

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 Yahoo! Buzz Button to blogger

Hi! dear visitors. yahoo is the second popular search engine in world. google is the first. yahoo is provide us a cool stuffs like a yahoo mail, yahoo games,auto insurance and more stuffs, so yahoo buzz is a new tool on yahoo. yahoo buzz use for send your blog posts to your yahoo friends using mail. so this is very good gadget for bloggers. so i hope you really like this gadget. please add your comments to this post..thanks for visiting my blog.

Now guys follow the simple steps below to do it:

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

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this.

<div class='post-header-line-1'/>

4.Now add below code right after above line.

<div style='float:right;padding:5px;'><script badgetype='square' src='http://d.yimg.com/ds/badge2.js' type='text/javascript'><data:post.url/></script></div>

5.Now save your template and you are done.

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 Reactions widget in your blogger blog

How To Add Reactions widget in your blogger blog

1.Sign in to blogger account.

2.Go to Design Page.

3.Click on the "edit" link under the blog posts

4.On the pop up window check the "Reactions" widget.Click save.

If you are using the default blogspot template, the widget would appear in your blog.If not you have to add some code to your blog's template To do that follow these steps.

1. Go to edit Html page of your blog.

2.Check the "Expand widget templates"

3.Find the following code in your template:

<data:post.body/>

4.Then immediately after this line add the following code.

<b:if cond='data:top.showReactions'>

<data:top.reactionsLabel/></span>

</td>

</tr></table>

</b:if>

</span>

How To Add “Save Page as PDF” button to Blogger blog

Hey! here is the other important gadget for blogs. many blog reader download your useful post to his/her blog. so this is very hard work. but this gadget help you download posts using pdf file type. this gadget us provided us a site. site name is web2pdf.com this tool is very useful for blog readers. steps are below. i hope you really like this site and post. so add your comments here and share this post with your friends.we will meet again in next post,thank you!

1.First Sign up with Web2PDF

2.Now Configure your "Save Page as PDF" button and click "Generate the JavaScript" button.

3.Then a Javascript code will be generated. Copy This code.

Now follow these simple steps :

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

2. Click on "Expand Widget Templates"

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

4. Immediately after above line, paste the code which you have generated at the Web2Pdf Online website. It's look like below code:


<script type="text/javascript">
var authorId = "XXXXXXXX-XXXX-XXXX-XXX-XXXXXXX";
var pageOrientation = "0";
var topMargin = "0.5";
var bottomMargin = "0.5";
var leftMargin = "0.5";
var rightMargin = "0.5";
</script>
<script type="text/javascript" src="http://web2.pdfonline.com/pdfonline/pdfonline.js">
</script>


5. Click on "Save Templates" and Refresh your site.