September 2013 ~ New Blogger Tricks

Saturday, 28 September 2013

Add Custom Page Link In Address Bar Of Blogger Blog

Posted By: Datta Gsr on 00:45 No comments

Are You Created New Page ?
In address Bar It Is Showing as /p/blog-page.html Instead Of Original Name ??

Change The Link Of Any Page Easily As You Like By Following

First Go To pages Tab on Blogger
Click On New Page >> Blank Page and Enter The Page Title As You Like
Now Click On Publish Without Writing Any Thing On That Page
Now Check The Page Link It Will Definitely The Name You Entered
Now Edit The Page And Write On That Page.

If You Want To Share This On Your Blog Give A Link Back to Our Site

This Is A Simple Blogger Trick,if still you are getting any single problem then feel free to mention it via comments,We will reply as soon as possible.

Beautiful Page Navigation for Blogger Blog

Posted By: Datta Gsr on 09:28 1 comment

Blogger Page Navigation is an awesome trick to navigate your Blogger Blog Pages.By using this In your blog visitors can easily go to an appropriate page.By default Blogger allows Older Posts and Newer Posts link to Navigate between Blog pages.It is very difficult for your users to navigate deeper into your Blog's Posts, so the Page Navigation helps us to solve this problem.

So add This To Your Blog By Following Simple Steps Below

Log In to your Blogger Account
Go To Layout Tab And Select Add a Widget
Then select HTML/JavaScript And Paste The Below Code Inside It

<style type='text/css'>#blog-pager{height: 28px; padding: 10px 0 0;overflow:hidden;text-align:center;}.showpageArea a {text-decoration:underline;font-size: 16px; text-align: center;}.showpageNum a {font-size:16px;text-decoration:none;border: 1px solid #cccccc;margin:0 5px;padding:5px;}.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}
.showpagePoint {font-size:16px;text-decoration:none;border: 1px solid #cccccc;background: #216FD9;margin:0 5px;padding:5px;color:#ffffff;}
.showpageOf {text-decoration:none;padding:5px;margin: 0 5px;}.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:5px;}.showpage a:hover {text-decoration:none;background: #cccccc;}.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}</style><script style='text/javascript'>var pageCount=7; var displayPageNum=5;var upPageWord="Previous";var downPageWord="Next";</script><a href="http://www.newblogger-tricks.com" style="font-size:0pt">Nbt Widgets</a><script style='text/javascript' src='http://newbloggertricks.googlecode.com/svn/newbloggertricks-page-nav-v2.js'></script>

Customization :

If You Want To Change The No.Of Posts Appear per page

Change pageCount=7
Go to Settings >> Posts and Comments and Change as Show In Fig

Finally save your Widget and visit your Blog You Will Find The Page Navigation At The end Of Page.We have kept the installation one step installation,if still you are getting any single problem then feel free to mention it via comments,We will reply as soon as possible.

Add Email Subscription Widget With Social Media Below Blogger Posts v.3

Posted By: Datta Gsr on 05:48 No comments

This widget will surely increase number of your social subscribers.If you are writing good posts and expecting more number of subscribers then this widget will surely help you.It contains an email subscription form,facebook like button,twitter follow button and some beautiful social icons at the right of the widget.This widget can be installed in one step,you just have to copy and paste code in your template.Now lets see how to add it into blogger blog?

Subscription Widget With Social Media Widget Generator

In Customize Field Enter The All The User Names In Corresponding Boxes
Click on Generate Button
You Can Watch Demo (In New Tab) By Clicking on Demo
Copy The Generated Code And Follow Below Steps

Copy The Generated Code And Follow below Steps

First go to Blogger Dashboard > Template
Download a copy of your template
Click on Edit HTML
Find below code in your template (Want help to find code Click Here)

<data:post.body/>

If You Find Three <data:post.body/> Then Add The Code After or Below 2nd One

Finally save your template and visit your any post you will watch this widget after posts ends.I have kept the installation one step installation,if still you are getting any single problem then feel free to mention it via comments,I will reply as soon as possible.

Direct Mode :

How To Add Email Subscription Form To Blogger?

First go to Blogger Dashboard > Template
Download a copy of your template
Click on Edit HTML
Find below code in your template (Want help to find code Click Here)

<data:post.body/>

Add below piece of code just after/below of above code,If You Find 3 <data:post.body/> Then Add Below Code After 2nd One

<b:if cond='data:blog.pageType == "item"'> <style type="text/css"> form.feedburner { margin: 20px 0 0; display: block; clear: both; } .TechnoFusionstyle { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWv6F7RNAi4H2jxzyD6p0dCiBPVmk_8jMCIh_ugZi5_ztA-kXNksMGgeYNhfKzeMXEp5lYPlnpQl3-3fQe6xUgjs4cR3WUYVuvqEMLbY1e6d1o5lHum7_8XiQtQZSRIGA8f4Iru5w8Bjnw/s1600/TechnoFusion.info-email-icon.png) no-repeat scroll 4px center transparent; padding: 7px 15px 7px 35px; color: #666; font-weight: bold; text-decoration: none; border: 1px solid #D3D3D3; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 1px 1px 2px #CCC inset; -webkit-box-shadow: 1px 1px 2px #CCC inset; box-shadow: 1px 1px 2px #CCC inset; } .technofusionsubmit { color: #666; font-weight: bold; text-decoration: none; padding: 6px 15px; border: 1px solid #D3D3D3; cursor: pointer; -moz-border-radius: 4px; -webkit-border-radius: 4px; -goog-ms-border-radius: 4px; border-radius: 4px; background: #fbfbfb; background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fbfbfb), color-stop(100%, #f4f4f4)); background: -webkit-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%); background: -o-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%); background: -ms-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=' #FBFBFB' , endColorstr=' #F4F4F4' , GradientType=0); background: linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%); } #TechnoFusion-widget { -moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; -goog-ms-border-radius: 10px 10px 10px 10px; border-radius: 10px; background: none repeat scroll 0 0 transparent; border: 1px solid #D3D3D3; padding: 8px; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; width: 480px; -webkit-box-shadow: inset 0px 0px 8px rgba(50, 50, 50, 0.75); -moz-box-shadow: inset 0px 0px 8px rgba(50, 50, 50, 0.75); box-shadow: inset 0px 0px 8px rgba(50, 50, 50, 0.75); -webkit-box-shadow: inset 0px 5px 0px 0px #D8D8D; } #TechnoFusion-widget:hover { background: none repeat scroll 0 0 #FFF; -moz-box-shadow: 1px 1px 2px #CCC inset; -webkit-box-shadow: 1px 1px 2px #CCC inset; box-shadow: 1px 1px 2px #CCC inset; } #TechnoFusion-widget td { padding: 3px 0; } </style> <center> <br/> <div id='TechnoFusion-widget'> <div id='emailwidget'> <table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'> <tbody> <tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'> <td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'> <p style='color:#666; font-weight: bold; font-size: 18px; margin:0px 0px 5px 0px;font-family:georgia;font-style:italic; '>Get free daily email updates! </p> <form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=ablod', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'> <input name='uri' type='hidden' value='newblogger-tricks' /> <input name='loc' type='hidden' value='en_US' /> <input class='TechnoFusionstyle' name='email' onblur='if (this.value == "") {this.value = "Enter your email…";}' onfocus='if (this.value == "Enter your email…") {this.value = ""}' type='text' value='Enter your email…' /> <input alt='' class='technofusionsubmit' title='' type='submit' value='Submit' /> </form> </td> <td style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'> <p style='color:#666; font-weight: bold; font-size: 14px; margin:0px 0px 5px 0px;font-family: georgia; '>Follow us! </p> <a href='http://feeds.feedburner.com/newblogger-tricks' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje4jgIY6xQNiV6N4KY55ye3D2ZpLJ0CdcGyYuV2Dz_Up9HJcPJ4u-3owU8vGMtfckq38c91o9L_mmW4f0i3cm2RitHgFaMCj4-5tdiz28AiFOHkPfZzr5S6iwiUE7x0l6ZDIa96Z8iXFwy/s1600/TechnoFusion.info-rss.png' /> </a> <a href='http://twitter.com/newbloggertrix' rel='nofollow' target='_blank' title='Follow us on Twitter'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlESdDSLr3gHTJjlpVDMkf5J8x098vIMMfqbkhkQJZ-201ogHf96W3Pnba7dg3nDIJO-goYLYeaQlU5awlQVuTb_C6lzfwAoaUt6PIXnDFuqK0h4EdjRgstZyWjRT-hlV8P4p76_5pIz5H/s1600/TechnoFusion.info-twitter.png' /> </a> <a href='http://www.facebook.com/newbloggertricks' rel='nofollow' target='_blank' title='Follow us on Facebook'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuZ2EQn_juHdnYdLPjucx1QwfMtdWTBDXj-uFbhfia7H4SEhXK4xnClJtvtAMzchgy5FGajR3ly1woQnKpFlG5G1BpP4PBBzQlKViAURps18SjZ0cmHBrITscNkrzNPxgR03WMiL2yp18Z/s1600/TechnoFusion.infoTechnoFusion.info-fb.png' /> </a> <a href='https://plus.google.com/116453328301201221048/' rel='nofollow' target='_blank' title='Follow us on Google+'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5uMNkfxVhyphenhyphenVvIAMw9-OUdGP21ndoGhkAsBjmNQPGce_Y3SVvsU-NXuXvXMa7IU7WftX-_-TXVxm-7wu-70BQkep_sOF9NtL92Z8qxJrNfU2n2BRgTMlztS1X4xUg_v4CJ9rPCvQEZ2hQh/s1600/TechnoFusion.info-gplus.png' /> </a> </td> </tr> </tbody> </table> <div align='right'> <span style='font-style: italic; font-size: 8px; color: solid #ffffff;'> <a href='http://newblogger-tricks.blogspot.in/2013/09/add-email-subscription-widget-below.html'style='text-decoration: none;'target='_blank'><font color='#000' decoration='none'>[Get this widget] </font></a></span></div><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fnewbloggertricks&send=false&layout=standard&width=450&show_faces=true&action=like&colorscheme=light&font=verdana&height=30" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:30px;" allowtransparency="true"></iframe> <a class='twitter-follow-button' href='http://twitter.com/newbloggertrix' rel='nofollow'></a> <script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script> </div></div></center></b:if>

Replace all(three) newblogger-tricks with your Feedburner Username

Replace all(two) newbloggertricks with your Facebook Username
Replace all(two) newbloggertrix with your Twitter Username
Replace 106527290580119996124 with your Google + ID

Awesome Recent Comments Widget With Avatars for Blogger (Single Step)

Posted By: Datta Gsr on 05:35 No comments

Recent Comment Widget Helps You To Get More Comments On Your Blog

So We Are Released Recent Comments Widget With Avatars for Blogger.Just In One Click You Will Add It To Your Blog...

Add Multi Colored Popular Posts Widget for Blogger

Posted By: Datta Gsr on 02:55 No comments

This Is a Widget Which Gives Multi Coloring To Our Old Popular Post Widget..

Steps To Add This To Your Blog Post

Go To Blogger >> Template >> Backup Your Template
Click Edit HTML >> Search For ]]></b:skin> (Want help to find Click Here)
Now Paste The Following code Above/Before ]]></b:skin>

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}

#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;left:-27px;padding:10px}

#PopularPosts1 ul li:first-child{background:#ff4c54;width:97%}

#PopularPosts1 ul li:first-child:after{content:"1"}

#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}

#PopularPosts1 ul li:first-child + li:after{content:"2"}

#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}

#PopularPosts1 ul li:first-child + li + li:after{content:"3"}

#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}

#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}

#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}

#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}

#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}

#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}

#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}

#PopularPosts1 ul li:first-child:after,

#PopularPosts1 ul li:first-child + li:after,

#PopularPosts1 ul li:first-child + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}

#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}

#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}

#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

#PopularPosts1 img{

-moz-border-radius: 130px;

-webkit-border-radius: 130px;

border-radius: 130px;

-webkit-transition: all 0.3s ease;

-moz-transition: all 0.3s ease;

transition: all 0.3s ease;

padding:4px;

border:1px solid #fff !important;

}

#PopularPosts1 img:hover {

border-radius: 0 0 0 0;

-moz-transform: scale(1.2) rotate(-711deg) ;

-webkit-transform: scale(1.2) rotate(-711deg) ;

-o-transform: scale(1.2) rotate(-711deg) ;

-ms-transform: scale(1.2) rotate(-711deg) ;

transform: scale(1.2) rotate(-711deg) ;

}

Now Save The Template
Go To Your Blog And Check

We have kept the installation one step installation,if still you are getting any single problem then feel free to mention it via comments,We will reply as soon as possible.

Add Mashable Sharing Widget For Blogger v.2 (One Step Process)

Posted By: Datta Gsr on 02:37 No comments

We Are already Discussed About Mashable Sharing Widget V.1 Now I am Going To Give a new Method V.2 to Add In A One Step Process

In Customize Field Replace All The Names With Corresponding Usernames Of Your Profile
Click on Generate Button and Add To Blogger Button Respectively.
Another page will appear follow simple instruction that set.
You Can Watch Demo (In New Tab) By Clicking on Demo

We have kept the installation one step installation,if still you are getting any single problem then feel free to mention it via comments,We will reply as soon as possible.

Add Left Side Static Facebook Pop Out Like Box with Jquery Hover Effect (One Step Adding)

Posted By: Datta Gsr on 04:30 3 comments

Add Left Side Static Facebook Pop Out Like Box with Jquery Hover Effect. As it is a eye catching widget, it will attract more and more visitor to like your Facebook page.

As We Launched Add To Blogger Widget you can easily Add This Widget By Clicking On Add To blogger And Simply Following Instructions

In Customize Field Replace “newbloggertricks” with your own facebook page name (Not your own profile name)
Click on Generate Button and Add To Blogger Button Respectively.
Another page will appear follow simple instruction that set.
You Can Watch Demo (In New Tab) By Clicking on Demo

We have kept the installation one step installation,if still you are getting any single problem then feel free to mention it via comments,We will reply as soon as possible.

Add Email Subscription Widget Below Blogger Posts v.1

Posted By: Unknown on 07:10 5 comments

Email Subscription Widget Below Blogger Posts Increases Your Feed Count As It Appears Under Every Post. Just Follow Simple Instructions To Add This To Your Blog

Widget Generator :

In Customize Field Enter Your Feed Burner ID In Corresponding Box
Click on Generate Button
You Can Watch Demo (In New Tab) By Clicking on Demo
Copy The Generated Code And Follow Below Steps

Copy The Generated Code And Follow below Steps

First go to Blogger Dashboard > Template
Download a copy of your template
Click on Edit HTML
Find below code in your template (Want help to find code Click Here)

<data:post.body/>

If You Find Three <data:post.body/> Then Add The Code After or Below 2nd One

Direct Mode :

First go to Blogger Dashboard > Template
Download a copy of your template
Click on Edit HTML
Find below code in your template (Want help to find code Click Here)

<data:post.body/>

If You Find Three <data:post.body/> Then Add Below Code After or Below 2nd One

<style>
.topsubsbox {
background: none repeat scroll 0 0 #292929;
border-radius: 0px 0px 0px 0px;
color: #FFFFFF;
font-size: 14px;
height: auto;
margin-left: -7px;
padding: 15px;
transition: border-radius 0.5s ease 0s;
width: auto;
}
.topsubsbox:hover {
border-radius: 0px 30px 0px 30px;
}
.topsubsbox p {
line-height: 21px;
text-align: justify;
width: auto;
}
.subsbox {
float: right;
margin: 0 106px;
}
#subbox {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjffWW2hBeuq3Z0YmSn0a8pD5EQuV01acFyuVR35I6bFWGXhBcGPBK4LT79IitHcjjSCwpzPELynClzPF10xX9cW8Sq0v8M6Ljb5ABteiOTmzzwg3Hb68LIw5kIgIjdIPQzteKr0cIItxCT/s1600/subscribe-email.png") no-repeat scroll right center white;
color: #888888;
padding: 10px;
width: auto;
}
#subbutton {
background: none repeat scroll 0 0 #0089E0;
border: 1px solid #292929;
border-radius: 0px 0px 0px 0px;
color: #FFFFFF;
font-weight: bold;
height: 40px;
margin-top: 15px;
text-transform: uppercase;
transition: border-radius 0.5s ease 0s;}
#subbutton:hover {
border-radius: 18px 0px 18px 0px;}
</style>
<br />
<div class="topsubsbox">
<div style="font-family: oswald; font-size: 20px; letter-spacing: 1px; text-align: center;">
Don't Miss a Single Post ! Join Us Now !</div>
<div class="subsbox">
<form action="http://feedburner.google.com/fb/a/mailverify" id="subscribe" method="post" onsubmit="window.open( 'http://feedburner.google.com/fb/a/mailverify?uri=newblogger-tricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input id="subbox" name="email" onblur="if ( this.value == '' ) { this.value = 'your email address';}" onfocus="if ( this.value == 'your email address') { this.value = ''; }" type="text" value="your email address" />
<input name="uri" type="hidden" value="newblogger-tricks" />
<input name="loc" type="hidden" value="en_US" />
<input id="subbutton" type="submit" value="Send Updates!" />
</form>
</div>
<br />
<div style="color: #05a4d5; font-size: 9px; letter-spacing: 2px; margin-top: 25px; text-align: center;">
Note: Don't forget to click the confirmation link (in your email) to verify Your Entry!</div>
</div>
<div style="clear: both;">

Replace newblogger-tricks with your Feedburner Username

Add Email Subscription Widget With Social Media Below Blogger Posts v.1

Posted By: Datta Gsr on 08:40 No comments

We Already Discussed About Email Subscription Widget Below Blogger Posts v.1 Now We Are Going To Tell About New Method

Update: Added One step Code Generator

Copy The Generated Code And Follow below Steps

First go to Blogger Dashboard > Template
Download a copy of your template
Click on Edit HTML
Find below code in your template (Want help to find code Click Here)

<data:post.body/>

If You Find 3 <data:post.body/> Then Add The Code After or Below 2nd One

Direct Mode :
How To Add Email Subscription Form v.2 To Blogger?

<style>
#nbt-subs-box {
background: #F1F1F1;
margin: 0 auto;
padding: 10px;
border: none;
border-radius: 10px;
width:350px;
height:270px;
}
#nbt-subs-box h2 {
font-size: 27px!important;
text-align:center;
font-style: italic;
font-variant: small-caps;
}
#nbt-subs-box h3 {
font-size: 15px;
font-family: arial, sans-serif;
text-align:center;
font-style: italic;
font-variant: small-caps;
}
#nbt-subs-box div.row {
text-align:center;
margin-bottom:10px;
}
#nbt-subs-box img{
display:inline-block;
border:none;
}
#nbt-subs-box .email {
clear:none;
}
.email {
clear: both;
width: 100%;
margin: 10px 0;
}
.emailform {
position: relative;
width: 300px;
background:#FFF;
margin: 0 auto;
-webkit-box-shadow: 1px 1px 2px #dfdfdf;
-moz-box-shadow: 1px 1px 2px #dfdfdf;
box-shadow: 1px 1px 2px #dfdfdf;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: 1px solid #ddd;
}

.emailinput {
height:30px;
margin: 0 auto;
padding: 8px 40px 8px 10px;
border:none;
background: none;
font-family: georgia;
font-style: italic;
font-size: 16px;
color: #666;
}
.emailinput {
padding-right: 30px !important;
width: 260px !important;
}
.emailbutton {
-webkit-border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-radius-top-right: 4px;
-moz-border-radius-bottom-right: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
-webkit-border-top-left-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-top-left: 0px;
-moz-border-radius-bottom-left: 0px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
padding: 9px;
position: absolute;
right: -3px;
top: -1px;
bottom: -1px;
display:block;
line-height:16px;
}
.emailbutton {
padding: 14px !important;
}

.emailbutton, .formbutton {
background: #f7f8f9;
background: -webkit-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background: -moz-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background: -o-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background: -ms-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background: linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f7f8f9",
endColorstr="#e9e9e9",GradientType=0 );
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 6px 12px;
margin:0;
-webkit-box-shadow: 0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow: 0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
box-shadow: 0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
color: #888 !important;
text-shadow: 0 1px 0 #fff;
line-height: 1.2;
cursor: pointer;
font-size: 13px;
font-weight: bold;
text-decoration: none !important;
}
.emailbutton:hover, .formbutton:hover {
background: #f1f1f1;
background: -webkit-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background: -moz-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background: -o-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background: -ms-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background: linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f1f1f1",
endColorstr="#e0e0e0",GradientType=0 );
text-decoration:none !important;
}
</style>

<div id='nbt-subs-box'>
<h2>Do you Like this Article</h2>
<div class='row'>
<div class='fb-like' data-href='http://www.facebook.com/newbloggertricks' data-send='true' data-width='300' data-show-faces='false'></div>
</div>
<div class='row'>
<a href="http://feeds.feedburner.com/newblogger-tricks" title="Suscribe to RSS feed"><img class='middle' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqrMT7TUuL_aGHIAe84Oiz3Q9g6lpS1F9QmUeSZIHRe2yksuG0_3OQGVmTX0BSY-m6t3U9deTGsKkL_su_q93VedtN02b5pgJwbmBPkZIviP7ZmxsR8McOBIDJcGIlDBY_a2znay2hpB7c/s1600/nbt-RSS.png" alt='rss'/></a>
<a href="http://twitter.com/newbloggertrix" title="Follow me on Twitter"><img class='middle' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAyXRzBiG6TexacyC1iXyamB5qE3qHLQQCEDltjwzIIHlPo45q84kZ2kmBpKpuq6sQKUTu4QAU4IH6TNyb-8KZaS-Ngj6_62TYxlUp3wpDd2wWZl1lgeYmqBh88L2PE_4X_iljhg4Rj5pJ/s1600/nbt-Twitter.png" alt='twitter'/></a>
<a href="http://www.facebook.com/newbloggertricks" title="Became Fan on Facebook"><img class='middle' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCpdu_vHK8wn3bIu9whhN6N5Ix3mucLMRtQa3QWV4ZdaW3eUCEAc8oiqfWXyWtq-Ue-cIx4d9rhShrtt0sWlWB16CESXdCx9XvRdV0sAw-OaIJ5COuMMwRR3V-9K7AygpHPQ7lAhep11l8/s1600/nbt-FaceBook.png"/></a>
<a href="http://www.stumbleupon.com/stumbler/gsrdatta/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSR9jhMAIyoP_i77U_1bYTaVGUEvDKmxoBezB_DdkcH_4sU8KKuO62Nc9Dh0U_XxcNxNzXGne8QO3jtr_cO4vnie4ArH7iMfxlt8Bh-ZEL4dB9ikaXgoVQKNPHH7Me35aV1G1E8OnbQoLS/s1600/nbt-Stumbled.png" alt='stumbleupon'/></a>
</div>
<div class='row'>
<h3>Get Subscribe to Free Email Updates!!</h3>
</div>
<div class='row'>
<div class='email'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' target='popupwindow' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=newblogger-tricks", "popupwindow", "scrollbars=yes,width=550,height=520");return true' class='emailform'>
<input type='hidden' value='newblogger-tricks' name='uri' />
<input type='hidden' name='loc' value='en_US' />
<input type='text' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' value='Enter your email...' name='email' class='emailinput' />
<input type='submit' class='emailbutton' value='SignUp' title=""/>
</form>
</div>
</div></div>

Replace all(three) newblogger-tricks with your Feedburner Username
Replace all(two) newbloggertricks with your Facebook Username
Replace newbloggertrix with your Twitter Username
Replace gsrdatta with your stumbleupon username

Add Rainbow Animation To Links For Your Blogger Blog

Posted By: Datta Gsr on 06:31 No comments

This is a simple Blogger Blog Trick,Changing the color of Link when Mouse over it.7 colors are changing like animation when hover the link.

Hover On Any Link To See on demo site

Follow the simple steps below..

Sign in To Your Blogger Account and Select Blog That You Want To ADD This Widget then goto
Template Tab >> Edit HTML
Then Add The Below Code Above or Before </head> (Want help to find Click Here)

<script type='text/javascript'>//<![CDATA[var rate = 20;if (document.getElementById)window.onerror=new Function("return true")var objActive; // The object which event occured invar act = 0; // Flag during the actionvar elmH = 0; // Huevar elmS = 128; // Saturationvar elmV = 255; // Valuevar clrOrg; // A color before the changevar TimerID; // Timer IDif (document.all) {document.onmouseover = doRainbowAnchor;document.onmouseout = stopRainbowAnchor;}else if (document.getElementById) {document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);document.onmouseover = Mozilla_doRainbowAnchor;document.onmouseout = Mozilla_stopRainbowAnchor;}function doRainbow(obj){if (act == 0) {act = 1;if (obj)objActive = obj;elseobjActive = event.srcElement;clrOrg = objActive.style.color;TimerID = setInterval("ChangeColor()",100);}}function stopRainbow(){if (act) {objActive.style.color = clrOrg;clearInterval(TimerID);act = 0;}}function doRainbowAnchor(){if (act == 0) {var obj = event.srcElement;while (obj.tagName != 'A' && obj.tagName != 'BODY') {obj = obj.parentElement;if (obj.tagName == 'A' || obj.tagName == 'BODY')break;}if (obj.tagName == 'A' && obj.href != '') {objActive = obj;act = 1;clrOrg = objActive.style.color;TimerID = setInterval("ChangeColor()",100);}}}function stopRainbowAnchor(){if (act) {if (objActive.tagName == 'A') {objActive.style.color = clrOrg;clearInterval(TimerID);act = 0;}}}function Mozilla_doRainbowAnchor(e){if (act == 0) {obj = e.target;while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {obj = obj.parentNode;if (obj.nodeName == 'A' || obj.nodeName == 'BODY')break;}if (obj.nodeName == 'A' && obj.href != '') {objActive = obj;act = 1;clrOrg = obj.style.color;TimerID = setInterval("ChangeColor()",100);}}}function Mozilla_stopRainbowAnchor(e){if (act) {if (objActive.nodeName == 'A') {objActive.style.color = clrOrg;clearInterval(TimerID);act = 0;}}}function ChangeColor(){objActive.style.color = makeColor();}function makeColor(){// Don't you think Color Gamut to look like Rainbow?// HSVtoRGBif (elmS == 0) {elmR = elmV; elmG = elmV; elmB = elmV;}else {t1 = elmV;t2 = (255 - elmS) * elmV / 255;t3 = elmH % 60;t3 = (t1 - t2) * t3 / 60;if (elmH < 60) {elmR = t1; elmB = t2; elmG = t2 + t3;}else if (elmH < 120) {elmG = t1; elmB = t2; elmR = t1 - t3;}else if (elmH < 180) {elmG = t1; elmR = t2; elmB = t2 + t3;}else if (elmH < 240) {elmB = t1; elmR = t2; elmG = t1 - t3;}else if (elmH < 300) {elmB = t1; elmG = t2; elmR = t2 + t3;}else if (elmH < 360) {elmR = t1; elmG = t2; elmB = t1 - t3;}else {elmR = 0; elmG = 0; elmB = 0;}}elmR = Math.floor(elmR).toString(16);elmG = Math.floor(elmG).toString(16);elmB = Math.floor(elmB).toString(16);if (elmR.length == 1) elmR = "0" + elmR;if (elmG.length == 1) elmG = "0" + elmG;if (elmB.length == 1) elmB = "0" + elmB;elmH = elmH + rate;if (elmH >= 360)elmH = 0;return '#' + elmR + elmG + elmB;}//]]></script>