.png "English"){kind=small}
Posts
NEW 7 FLYING TWITTER BIRD WIDGET FOR BLOGGER
How Create a Subscribe Box to Blogger / Website
In this tutorials,I will explain to you how create a Subscribe Box with Feedburner Email subscription,Feed subscription and Social networking buttons(Digg ,Twitter,Facebook ,Stumbleupon,Delicious).You can easily add or remove social buttons to this widget and setup your email subscription.If you like to add this widget to your blog or a website,then follow the steps given below.
1.Log in to your dashboard--> Design- ->Page Elements.
2.Click on 'Add a Gadget' on the sidebar.
3.Select 'HTML/Javascript' and add the code given below and click save.
<style type="text/css">
#subscribe-box {
overflow: hidden;
margin: 10px 0 0 0;
}
#subscribe-box a.subscribe-sec {
display: inline-block;
display: -moz-inline-stack;
width: 40px;
padding-top: 38px;
zoom: 1;
}
#subscribe-box a.subscribe-sec:hover {
color: #660000;
}
</style>
<form action="http://feedburner.google.com/fb/a/mailverify" style="border:1px solid #ccc;padding:3px;" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Get Notified When We Update !!!</p><p><input style="width:180px" name="email" type="text" value="Enter your email address:" onclick="this.value='';" /><input value="FEEDBURNER-ID" name="uri" type="hidden" /><input value="en_US" name="loc" type="hidden" /><input value="Subscribe" type="submit" /></p>
<p><div id="subscribe-box">
<a title="Delicious" href="http://delicious.com/DELICIOUS-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkxfnhh7-uAKY8tKjJ0svA-fSAwQY38g-JDQmNGDsiF49J7OM819B6g6Tm2aFL5TDoziws6zzJADcKkaUfo4pwOvCeVh6CzuXEKxI_Xei-siCeon8GSyemi7mUgqKgTCoyqv3GTXHfjaFm/s1600/delicious.png) center top no-repeat"></a>
<a title="Twitter" href="http://twitter.com/TWITTER-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu52ESzSScsOm-BTTwtPLw8sA6yAO4edPjUFv3rpTDZ439gADMIFgGIgAqmGGTO4kv0sC9q3PuEaaXYqTeiF_0dHjpqtH-V53eh3pIRQV5oz18pEg8dLYXuUdMjLQa0RQBUNLFyeU99rvC/s1600/twitter.png) center top no-repeat"></a>
<a title="Digg" href="http://digg.com/users/DIGG-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha0XLArd8ynR9vGUCG4T4ZspNsT43EmtWAPkI-MA4dvLeKm3Sq5TWZPGGzIMublqF8d176ACHuPc2GRkrsbdulKd2dWeoNsQlSMVDqPsZLiHiXm34grdJk185uW38y8k1Kzdl5KFhtDPuG/s1600/digg.png) center top no-repeat"></a>
<a title="Facebook" href="http://www.facebook.com/FACEBOOK-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg9aXNUkiG-FuPOpFOJajQor-P_BuTbqb41SYM8qmKFkzfQwict9BHbz5Tv_JDhXcrat8O_TQrhlvSY2G1QeWk7GRlHp6iinVoHW5ei39Re43fZWT1pUNJi4Zvo4osx8lUbSOGbSdO3Pk7/s1600/facebook.png) center top no-repeat"></a>
<a title="Stumbleupon" href="http://www.stumbleupon.com/stumbler/STUMBLEUPON-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQUyo3bklFSVpd8OCaDK0kcSy_YpPuSg-29ztJwnhZIhAgvy7riGcsZIWj2f9ZPK-rbvUK3rIcckH9pjVAVI_5KpouIHS73wTzlpUFjTh6_djluI-OSbOSOuWWOo2GhCYkR_DP9s2M5UFe/s1600/stumbleupon.png) center top no-repeat"></a>
<a title="RSS Feed" href="http://feeds.feedburner.com/FEEDBURNER-ID" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0lWJ6_ce_b16ZOhDmE1upH84XdljON6tTGEnttiRwuhL_zm0PGInkEZSqWFEPzCdMi5Unv0tmwOAgiYWh4m8pEUXp5OZYcNZpwa8clebcb3CeSJ3TIgDLzIAnMObSIPqDMVgeqbRIc4T8/s1600/rss.png) center top no-repeat"></a>
</div></p>
</form>
Note : Remember to REPLACE,
FEEDBURNER-ID with your feedburner ID.
DELICIOUS-USERNAME with your delicious username.
TWITTER-USERNAME with your twitter username.
FACEBOOK-USERNAME with your facebook username.
STUMBLEUPON-USERNAME with your stumbleupon username.
Look at the example given below.
FEEDBURNER-ID with your feedburner ID.
DELICIOUS-USERNAME with your delicious username.
TWITTER-USERNAME with your twitter username.
FACEBOOK-USERNAME with your facebook username.
STUMBLEUPON-USERNAME with your stumbleupon username.
Look at the example given below.
<style type="text/css">
#subscribe-box {
overflow: hidden;
margin: 10px 0 0 0;
}
#subscribe-box a.subscribe-sec {
display: inline-block;
display: -moz-inline-stack;
width: 40px;
padding-top: 38px;
zoom: 1;
}
#subscribe-box a.subscribe-sec:hover {
color: #660000;
}
</style>
<form action="http://feedburner.google.com/fb/a/mailverify" style="border:1px solid #ccc;padding:3px;" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/WyNa', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Get Notified When We Update !!!</p><p><input style="width:180px" name="email" type="text" value="Enter your email address:" onclick="this.value='';" /><input value="blogspot/WyNa" name="uri" type="hidden" /><input value="en_US" name="loc" type="hidden" /><input value="Subscribe" type="submit" /></p>
<p><div id="subscribe-box">
<a title="Delicious" href="http://delicious.com/wam8387" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkxfnhh7-uAKY8tKjJ0svA-fSAwQY38g-JDQmNGDsiF49J7OM819B6g6Tm2aFL5TDoziws6zzJADcKkaUfo4pwOvCeVh6CzuXEKxI_Xei-siCeon8GSyemi7mUgqKgTCoyqv3GTXHfjaFm/s1600/delicious.png) center top no-repeat"></a>
<a title="Twitter" href="http://twitter.com/btipandtrick" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu52ESzSScsOm-BTTwtPLw8sA6yAO4edPjUFv3rpTDZ439gADMIFgGIgAqmGGTO4kv0sC9q3PuEaaXYqTeiF_0dHjpqtH-V53eh3pIRQV5oz18pEg8dLYXuUdMjLQa0RQBUNLFyeU99rvC/s1600/twitter.png) center top no-repeat"></a>
<a title="Digg" href="http://digg.com/users/wam8387" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha0XLArd8ynR9vGUCG4T4ZspNsT43EmtWAPkI-MA4dvLeKm3Sq5TWZPGGzIMublqF8d176ACHuPc2GRkrsbdulKd2dWeoNsQlSMVDqPsZLiHiXm34grdJk185uW38y8k1Kzdl5KFhtDPuG/s1600/digg.png) center top no-repeat"></a>
<a title="Facebook" href="http://www.facebook.com/btipandtrick" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg9aXNUkiG-FuPOpFOJajQor-P_BuTbqb41SYM8qmKFkzfQwict9BHbz5Tv_JDhXcrat8O_TQrhlvSY2G1QeWk7GRlHp6iinVoHW5ei39Re43fZWT1pUNJi4Zvo4osx8lUbSOGbSdO3Pk7/s1600/facebook.png) center top no-repeat"></a>
<a title="Stumbleupon" href="http://www.stumbleupon.com/stumbler/wam83879" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQUyo3bklFSVpd8OCaDK0kcSy_YpPuSg-29ztJwnhZIhAgvy7riGcsZIWj2f9ZPK-rbvUK3rIcckH9pjVAVI_5KpouIHS73wTzlpUFjTh6_djluI-OSbOSOuWWOo2GhCYkR_DP9s2M5UFe/s1600/stumbleupon.png) center top no-repeat"></a>
<a title="RSS Feed" href="http://feeds.feedburner.com/blogspot/WyNa" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0lWJ6_ce_b16ZOhDmE1upH84XdljON6tTGEnttiRwuhL_zm0PGInkEZSqWFEPzCdMi5Unv0tmwOAgiYWh4m8pEUXp5OZYcNZpwa8clebcb3CeSJ3TIgDLzIAnMObSIPqDMVgeqbRIc4T8/s1600/rss.png) center top no-repeat"></a>
</div></p>
</form>
You have done this.
________________________________________________________________________
Add Login Box / Login Form code For Blogger Blog
In this post we will learn how to add the Login box in your blogger/blogspot blog. Blogger Users here we go with the steps.
I hope you know how to add widgets to your blog.
1. Log in to your dashboard–> layout
2. Click on “Add a Gadget” where you need to place the login box or form.
3. A Pop-up window will open and select the Click on “Add a Gadget” and select “HTML/Java Script”.
4. Copy the code below and Paste Inside the box.
Note : (Make Sure you copy only the content from form to /form)
5. Save the Html/Javascript and go on to your page to see how it looks.
6. If you have some idea on html, play with the variables used above to make the login box/ login form suitable for your blog.
If you have done everything correct, you should have the followng box in your blog as below.
________________________________________________________________________
How To Add Share Widget to Blogger
In this tutorial, I am going to show how to add a useful
Now follow the steps given below to add this share box for your blog.
1.Login to your blogger Dashboard and go to --> Design- -> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see below code:
4.Now Copy Share Box code given below and paste it just below the above code.
NOTE: If you can't find <div class='post-header-line-1'/> in your template, paste your "Twitter tweet button" code just before <data:post.body/> .
<b:if cond='data:blog.pageType == "item"'> <style type='text/css'> .multisharebox { background: none repeat scroll 0 0 #EFEFEF; float: right; margin: 5px 0px 3px 10px; padding: 0 5px 0; text-shadow: 0 1px 0 #FFFFFF; width: 260px; border:4px solid #d8dfea; } .fb-like-boxtop { background: none repeat scroll 0 0 #EDEFF4; border: 1px solid #D8DFEA; color: #000000; float: right; font-size: 11px; margin: 0 0; padding: 5px 10px; text-align: left; width: 230px; } .fb-like-boxtop a { color: #000000; text-decoration:none; } .fb-like-boxtop a:hover { color: #000000; text-decoration:underline; } .fb-like-box { background: none repeat scroll 0 0 #EDEFF4; border: 1px solid #D8DFEA; color: #000000; float: right; font-size: 11px; height: 60px; margin: 5px 0; overflow: hidden; padding: 5px 10px; text-align: left; width: 230px; } </style> <!-- Perfect Share Box : Created by www.bloggertipandtrick.net --> <div class='multisharebox'> <table><tr> <td><table><tr> <td><a class='twitter-share-button' data-count='vertical' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'/> <b:if cond='data:post.isFirstPost'> <script src='http://platform.twitter.com/widgets.js' type='text/javascript'> </script> </b:if></td> <td><script expr:src='"http://www.stumbleupon.com/hostedbadge.php?s=5&r=" + data:post.url'/></td> <td><a class='google-buzz-button' data-button-style='normal-count' data-locale='en_IN' expr:data-url='data:post.url' href='http://www.google.com/buzz/post' rel='nofollow' title='Post on Google Buzz'/> <script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/></td> <td><a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/> <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></td> </tr></table></td> </tr><tr> <td><div class='fb-like-boxtop'><a expr:href='data:post.sharePostUrl + "&target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' expr:title='data:top.blogThisMsg' target='_blank'>BlogThis!</a> | <a expr:href='data:post.sharePostUrl + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'>Email This!</a> | <a href='javascript:window.print();'>Print This!</a> | <b:if cond='data:post.allowComments'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 0'>No comments</b:if><b:if cond='data:post.numComments == 1'>1 comment</b:if><b:if cond='data:post.numComments >= 2'><data:post.numComments/> comments</b:if></a></b:if></div></td> </tr><tr> <td><div class='fb-like-box'> Do you like this post? <iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=230&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:230px; height:40px;'/> </div></td> </tr></table> </div> <!-- Perfect Share Box : Created by www.bloggertipandtrick.net --> </b:if>
Note :
This share box now will add to your Blogger post pages only. If you want to show it in every pages, then simply remove green lines from the code.
5. Save your template and you are done.
________________________________________________________________________
How To Change Mouse Cursor in Blogger Blog to Animated cursors
Now find (CTRL+F) this code in the template:
And immediately before it, paste this code:
</head>
And immediately before it, paste this code:
<style type="text/
And now click Save Template
How to add Facebook Pop Out Like Box with Smooth Jquery Hover Effect
Numbered Page Navigation For Blogger New Script
0 comments:
Post a Comment