AtoZ Buzz

Showing posts with label Sidebar widgets. Show all posts

Wordpress like Email Subscription widget for blogger

Hello Friends!Today I will tell you how to add a email subscription widget like in wordpress blogs.Email subscription is a very popular way to subscribe any blog/website and get updates directly in the mailbox,that's why you may always notice that number of feeds subscribers is always more that any other social social network subscribers.This widget is fully adapted from wordpress.This an awesome email subscription widget which can be used to increase your feedburner subscribers and also makes your blog look professional and smart looking.As always I have tried my best to make this tutorial with a one step installation.You just have copy and paste the code.Now lets see the live working of this widget.

Demo

How to add this Widget to Blogger

To add this widget,Just Follow below simple steps:

Go to your Blogger Dashboard
Then Go To Layouts----> Add A Widget-----> Html Javascript
Just paste these Codes in your respective gadget box.

<center>
<div align="center" id="truebloggertricks-Subscribe-wrapper">
<div id="ig-subscription-optin" style="border: 3px solid #000000; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55AAEE', endColorstr='#003366',GradientType=0 ); width: 240px;">
<h3 id="truebloggertricks-title-text" style="color: white; font-size: 20px;">
GET FREE EMAIL UPDATES</h3>
<div id="truebloggertricks-sub-title-txt" style="color: white; font-size: 14px;">
Join us for free and get valuable content delivered right through your inbox.</div>
<br />
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=truebloggertricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="name" id="truebloggertricks_Subscriber_name" name="name" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Enter First Name" /><br />
<input class="email" id="truebloggertricks_Subscriber_email" name="from" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="width: 130px;" type="text" value="Enter Email Address" /><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<input name="uri" type="hidden" value="truebloggertricks" /><input name="loc" type="hidden" value="en_US" /> <input id="truebloggertricks_Submit_Text" style="height: auto; padding: 5px 0;" type="submit" value="Get Access Today!" /></form>
</div>
</div>
</center>

<style>#ig-subscription-optin {margin: 0px;padding: 10px;background: #2A6DA9;

background: -moz-linear-gradient(top, #5AE, #036);background: -webkit-gradient(linear, left top, left bottom, from(#5AE), to(#036));height: auto!important;color: white !important;padding: 20px 15px !important;

text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif !important;margin: 10px;margin: 0px;padding: 10px;

margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;padding: 5px;border: none;}#ig-subscription-optin p {margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;

padding: 5px;border: none;}#ig-subscription-optin input.name {

background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg086gOrs0i4jqxtJbzBwdoLrIUFUz7ANofk-A-gIBWpfqXYCMIVjXdE9yVbmdWb0aiCbrrHRP-Tp7cFmYVN5UkZpC3Hqzj0Jv0HKs8or30AGhW-mcq48ZPvVcIwd9JoyZAVvF6x_ToBMOe/s1600/subscribe-name.png) no-repeat center right;}

#ig-subscription-optin input[type="text"] {border: 1px solid #111 !important;

font-size: 15px !important;margin-bottom: 10px !important;padding: 8px 28px 8px 10px !important;width: 80% !important;height: auto !important;}

#ig-subscription-optin input.email {background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTXKofrovDFsUqtHR8ohbO_qskRXQYzinbyKz6c8QkoZISYWqc9WVa-88mDa0km0K1zhzefFW2KFTFeOggtFDWe5_g9QnEKEKlFEL5XryUWiZ_-JFTz_EpYOOtt-yO2XAF0MFFLMh9qkwy/s1600/subscribe-email.png) no-repeat center right;}#ig-subscription-optin input {

font-family: Georgia, Times, "Times New Roman", serif;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow: 0 2px 2px #111;-moz-box-shadow: 0 2px 2px #111;-webkit-box-shadow: 0 2px 2px #111;margin: 0px;padding: 0px;}#ig-subscription-optin h3 {margin-top: 10px !important;margin-bottom: 8px !important;margin-left: 10px !important;margin-right: 10px !important;

font-weight: bold !important;line-height: 26px !important;letter-spacing: normal;

text-transform: none;text-decoration: none;

text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif;

border: none;padding: 0px !important;float: none;}input:hover[type="submit"] {

background-color: #0094D2;border: 1px solid #0094D2;color: white;text-decoration: none;}input[type="submit"] {background-color: #00A7ED;border: 1px solid #0094D2;

color: white;cursor: pointer;font-family: 'Droid Sans', sans-serif !important;font-size: 13px;font-weight: normal;padding: 5px;text-decoration: none;}input {

color: #333;font-family: 'Droid Sans', sans-serif;}#ig-subscription-optin input[type="submit"] {background: #960E17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiunBvgLRyJWRpKQcok8p4ZONIcUM3SCm3NWk8gLrvVI_APCqVgLmMvW6xObaUGbX27hyZuAG9Gu7Ux67ZbK77xZ4ZG_JsGXZtI8TquS9QZJA8m5eTSKdfBHBXbGHo6zoKMS8hGUBm8VaRx/s1600/subscribe-red.png) repeat-x top;border: 1px solid #111 !important;color: white;cursor: pointer !important;font-size: 18px !important;font-weight: bold !important;

padding: 6px 0 !important;text-shadow: -1px -1px #3A060A !important;width: 90% !important;height: auto !important;line-height: 24px !important;}

#ig-subscription-optin input[type="submit"]:hover {color: #FFA5A5;}</style></div>

In above Codes,Replace truebloggertricks with your feedburner username.
It all folks! Enjoy this beautiful widget in your blog.Happy Blogging!!!

Mouse Hover Effect Email subscription widget for blogger

in: Blog design Guest Post Sidebar widgets Social widgets widgets 5 Comments

This post is written by our guest author.Check how to become a guest author in True Blogger Tricks

Mouse Hover Effect Email subscription widget for blogger

Hello Friends I Am Rajat A Co- Author At TrueBloggertricks. Today I am sharing how to add an stylish mouse hover effect subscribe us widget which is used by lordhtml. It is A cool and simple widget that you can easily add in your blogger sidebar. Please Continue..

How To Add An Subscribe Us Widget Like Lord Html

Go TO Your Blogger Dashboard
From The Drop Down Menu Choose Layouts
Then CLick On Add A Gadget
From The Pop Out Menu And Choose Html/Javascript
THen Paste The Below COding

<style>

.subscriptionboc

{

border-style:solid;

border-width:2px;

border-color:#000;

padding:20px;

width:250px;

background:#fff;

transition: box-shadow .777s;

-webkit-transition: box-shadow .777s;

-moz-transition: box-shadow .777s;

-o-transition: box-shadow .777s;

-ms-transition: box-shadow .777s;

}

.subscriptionboc:hover

{

-moz-box-shadow: inset 0 0 10px #000000;

-webkit-box-shadow: inset 0 0 10px #000000;

box-shadow: inset 0 0 10px #000000;

}

.paratraf

{

font-size:20px;

font-family:'georgia';

text-align:center;

color:#000;

}

.feed-links{display:none;}

.enteremail

{

background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/btnt-custom-theme/email.png") no-repeat scroll 10px center #FFFFFF;

border-radius: 4px 4px 4px 4px;

box-shadow: 0 0 3px rgba(0, 0, 0, 0.05) inset;

color: #8B8B8B;

padding: 10px 40px;

border-style:solid;

border-width:2px;

border-color:#CACACA;

}

.forspace

{

padding:15px;

}

.button45

{

background: -moz-linear-gradient(center top , #30A146 0%, #249334 100%) repeat scroll 0 0 transparent;

border: 0 none;

border-radius: 4px 4px 4px 4px;

color: #FFFFFF;

cursor: pointer;

font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;

font-weight: bold;

padding: 10px 40px;

text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);

background:#249334;

border: 0 none;

border-radius: 4px 4px 4px 4px;

color: #FFFFFF;

cursor: pointer;

font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;

font-weight: bold;

padding: 10px 40px;

text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);

}
</style>
<div class="subscriptionboc">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow"onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=truebloggertricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><div class="paratraf">For Latest news And Updates Sign Up</div><p> <div class="forspace">
<center>
<input class="enteremail" type="text" style="width:140px" name="email" value="Enter your email..." onfocus="if (this.value == "Enter your email...") {this.value = ""}"/></center></div>
</p>

<input type="hidden" value="truebloggertricks" name="uri"/>

<input type="hidden" name="loc" value="en_US"/>
<center>
<input class="button45" type="submit" value="Sign Up" /></center></form>
</div>

In The above coding replace truebloggertricks with your feedburner username

Thats All Save The Widget

Posted by Guest Author,Rajat Garg
Hello This is Rajat ,from India, I like to explore the ways of blogging, smart earning methods,Likes to clone templates.
Visit My Blog My Premium Lab | Follow Me On Twitter Or Facebook

Being viewed or Random post widget like spiceupyourblog for blogger

in: Post widgets Sidebar widgets Traffic widgets 37 Comments

Hi friends, today I had made an interesting widget for you all. This is really interesting. Its titled as "Being Viewed". You can give him any title but the title was choose by Paul Crowe. Actually he had created the widget but hasn't shared the trick or code of the widget. So I thought that everything we knew must be known to all. So I was creating the widget for these 2 days and at last, success was the result and so I was happy.

Live Demo:

The images and post showing above updated every-time and they are showing the posts which are being viewed at the moment.

What Are The Main Advantages Of The Widget ?

Shows Random Posts.
Shows the Name Of The Author.
Shows the number of comments.
Summary Showing Enabled.
CSS Added.
Hover effect for images.

Installing It On Your Blog

This is actually a widget which is re-sizes automatically and also you don't have to add any extra codes on your template too. Just follow these steps :

Go to blogger.
Open layout tab.
Click on Add A Widget button anywhere on the blogger layout.
Give any title you want [ eg: Being Viewed, Recently Viewed, Now Viewing etc. Its up to you. ].
In the content column, paste the code given below :

<style type="text/css"></style>
<script type="text/JavaScript">

</script><script type="text/JavaScript" src="../../feeds/posts/summary?max-results=0&alt=json-in-script&callback=Get_Total_Post"></script><script type="text/JavaScript" src="../../feeds/posts/summary?start-index=50&max-results=1&alt=json-in-script&callback=Random_Post_Show"></script>

You can also display more or less post by changing 5 in the script
Don't feel afraid by seeing such a large code. Its works fine.

Please use this widget on your blog and this widget is completely link free too. So this widget will not link to any other blog. This widget will give you an increase in the total blog traffic.

Best floating social bookmarking widget for blogger

in: Sidebar widgets Traffic widgets 13 Comments

Now I'm going to Publish an Updated Version Of the Previous Floating Bar. The New Version of this Widget Is Fast loading, Minimal Look and has the Floating Feature like the previous version. This Widget contains Sharing Buttons Of Popular Social Networks like Twitter, Facebook, Google+, StumbleUpon and Pinterest. It's Also Integrated this widget with Add This Plugin So, now with the new version we can share our content to more than 300 Social Sharing sites. OK Lets see How to add this social bookmarking widget for blogger.Before that We can see the live demo of this widget.

Live Demo:-

How to add this Social Bookmarking widget on your blog?

It's Easy to Install this widget in your blogger blog. To add it just follow the simple steps given below.

In Dashboard Go to Template > Edit HTML Button
Ignore the Warning and Click the Proceed button
Then Click Expand Widget Templates
Search for <b:includable id='post' var='post'>
Below that place the following code

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style type='text/css'>
/*<![CDATA[*/
#btnt-social { bottom: 10%; margin-left: -50px; position: fixed; }
#btnt-social ul { list-style: none;clear: none;padding: 0px 0px ;margin: 5px 0;}
#btnt-social ul li { display: inline;background:none;margin:0;padding:0;}
#btnt-social ul li a { display:block; width: 32px; height:32px; margin: 5px 0; }
#btnt-social ul li a.twitter { background: urlundefined"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAFWGeJtLDb51g6noW0NSWW-jLwdYTjS3mnC763CCae54i5ywg_Hff4kF9Wvac_8-UBb960FTeTxrnOasK19ubPNuNhqCqcChJY-2aUdDZYd6ftjWa_j9OlMGhbbUNqBPqBuDM5PqReIhE/s32/twitter.png") repeat scroll 0 0 transparent; }
#btnt-social ul li a.facebook { background: urlundefined"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzCR34DKLCRD3HYx6OJfwYFFYeSEOvlVQJDpeijFdPnVQKg_ws9u39SBAlLfhFVKmNNg9AszgoXohZa7E8Nrsv2Eswr9SzKUefDcWXoWR9fXlrSljNZwo0NZxB3ju2qHa0zfToKkxiZ3eF/s32/facebook.png") repeat scroll 0 0 transparent; }
#btnt-social ul li a.stumbleupon { background: urlundefined"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNsVFx3EvhjQxF33_HlOTEyIT97tuz6mMQj1Vp9uzeKKQttdfEfGERLLjJUgXyJ9pooQzQjByNfI5GsfVGdiz0VE0lkD90FYyYKf3Tb3K3VDMzwMrnM5SFnqErwLlVF8tIJrQSdM1yV7Aq/s32/stumbleupon.png") repeat scroll 0 0 transparent; }
#btnt-social ul li .google-plus { background: urlundefined"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ2vmDmx_dOIyKcOX7Ku4662lmhCTQqwbMDxNz2bFpzzTM1zKdJcwA88eg3mqsfNW9kmEDE1-t3Khh8zNHg7vBeIJitJA-1iyjdsAETD_C49Q4HEd2beo505zpyv95zDV2-p8W1p3pv5bi/s1600/g-plus.png") repeat scroll -1px 0 transparent; }
#btnt-social ul li a.pin-it-button { background: urlundefined"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgko3YhhVT0WcB8xpLRWQIL6woUWpp1GGH0RtW4L1cpQXnCSuMgNyustynNxVw2AVewl7VAR8ksqrr2gwXJ0Ec8Mr989t5LENkq-_s377OaJmiMGzG9cjlnsixZZfN-V-ibSqt5RmYkGsB/s32/pinterest.png") repeat scroll 0 0 transparent; }
#btnt-social ul li .addthis_32x32_style .dummy .at300bs, #btnt-social ul li .addthis_32x32_style .at300bs, #btnt-social ul li .addthis_32x32_style .at15t { background: urlundefined"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLGJ-Wi7uT27fz2yy8snSnYbkVRCsvhM_lcglyQnNtEyJGWeYyzI38u7mi8w52icC3KaMTt-aoPKw3KnHbVQNcpdLe8-60Sm0o0ccf8m2c8wYda34vm8Z7aFcOYE517cCb2BV8CiuvhD3W/s32/sharethis.png") repeat scroll 0 0 transparent; }
/*]]>*/
</style>
<div id='btnt-social'>
<ul>
<li><a class='twitter' expr:href='"http://twitter.com/?status=" + data:post.title + " - " + data:post.url ' rel='nofollow' target='_blank' title='Share this post on twitter'/></li>
<li><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Facebook'/></li>
<li><a class='stumbleupon' expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Stunbleupon'/></li>
<li><a class='google-plus' expr:href='" http://plus.google.com/share?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Google+ '/></li>
<li><a class='pin-it-button' href='javascript:voidundefinedrun_pinmarkletundefined))'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarkletundefined) {
var e=document.createElementundefined'script');
e.setAttributeundefined'type','text/javascript');
e.setAttributeundefined'charset','UTF-8');
e.setAttributeundefined'src','http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.randomundefined)*99999999);
document.body.appendChildundefinede);
}
</script></li>
<li><div class='addthis_toolbox addthis_32x32_style'>
<a class='addthis_button_compact'/>
</div>
<script src='http://s7.addthis.com/js/300/addthis_widget.js' type='text/javascript'/></li>
</ul>
</div>
</b:if></b:if>
Now save your template And you can see your post page to check it.

Note:- This floating bar would display on post pages only and wont display on homepage.

If you want display on homepage, remove

<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:blog.pageType != "static_page"'>

</b:if></b:if>

About The Author

This post is written by chandeep of blogtipsntricks.com

How to Add Google+ Page Badge to your Blogger blog

in: Sidebar widgets Social widgets widgets 2 Comments

The badge lets users add your Google Plus page to their circles without leaving your blog,its like Facebook’s Like Box, but better. Google+ badge will not only promote your awesome blog on Google+ , but will help it rank in Google search results as well.

Adding Google+ page badge

Go to Design > Page Elements.
Click Add Gadget and select HTML/Javascript gadget.
Copy the code below , paste it in that box.

<script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script>  <a style='display: block; height: 0;' href="PUT YOUR G+ PAGE URL HERE" rel="publisher"> </a>  <g:plus href="PUT YOUR G+ PAGE URL HERE" height="131" width="300" theme="light"></g:plus>

Replace PUT YOUR G+ PAGE URL HERE with the URL of your Google+ page.
To get the page URL: Login to Google+ > Switch to your page via the dropdown menu on top left corner of your screen right under your profile name > Get the URL from your browser’s address bar.

II) Customizing Google + page badge

Currently you can only customize the size of the badge, by setting the size attribute on the badge tag in line 12.

Size	Badge	Size attribute
Big		`badge`
Small

Professional facebook likebox

in: Facebook Sidebar widgets Social widgets widgets

Facebook is a big social site.There are millions of users of Facebook .So every blog must have a facebook like box to get popularity and traffic.There are many ways to add facebook likebox in your blog.But today I am giving a facebook likebox which looks soo cool and every one likes them.

Live Demo:

Add Professional Facebook Like Box Widget In your Blog

Adding this widget is very easy, just follow the steps below.

• Go to your Blogger Dashboard and select the blog in which you want to add this widget.

• Go to Design > Page Element.

• Add a new HTML/Javascript gadget and paste the below code in that gadget.

<style>.truebloggertricksFB {
width: 280px;
height: 150px;
border-radius: 3px;
position: relative;
background-color:#f4f4f4;
padding:5px 10px 15px 0;
}
.truebloggertricksFB, .truebloggertricksFB:before, .truebloggertricksFB:after {
background: #f4f4f4;
border: 1px solid #ccc;
}
.truebloggertricksFB:before, .truebloggertricksFB:after {
content: "";
position: absolute;
bottom: -3px;
left: 2px;
right: 2px;
height: 1px;
border-top: none;
}
.truebloggertricksFB:after {
left: 4px;
right: 4px;
bottom: -5px;
box-shadow: 0 0 2px #ccc;
}
</style>

<div class="truebloggertricksFB">
<div style="height:155px;overflow:hidden">
<fb:like-box href="http://www.facebook.com/TrueBloggerTricks" data-width="300" data-height="179" data-show-faces="true" data-border-color="#f4f4f4" data-stream="false" data-header="false" class=" fb_iframe_widget "><span><iframe id="f5741c08" name="fdd6ca2ec" scrolling="no" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; overflow-x: hidden; overflow-y: hidden; height: 179px; width: 300px; " class="fb_ltr" src="http://www.facebook.com/plugins/likebox.php?border_color=%23f4f4f4&channel=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%23cb%3Df2babfba84%26origin%3Dhttp%253A%252F%252Fwww.btsnts.com%252Ff1ae6f85bc%26relation%3Dparent.parent%26transport%3Dpostmessage&colorscheme=light&header=false&height=179&href=https%3A%2F%2Fwww.facebook.com%2FTrueBloggerTricks&locale=en_US&sdk=joey&show_faces=true&stream=false&width=300"></iframe></span></fb:like-box>
</div>
</div>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

• Now replace the Facebook page URL with yours. URL is given in the code as https://www.facebook.com/TrueBloggerTricks. Paste your URL in place of Techsenser which is given two times in the code.

• Now save your gadget and view your blog.

Get Ads Box with cool CSS effect as used in Spice Up Your Blog

in: Clones Sidebar widgets widgets 6 Comments

Click to enlarge the image (on the image)

Hi guys as every one knows these days the Spice Up Your Blog ads widget for the blogs are very hot to be seen and look well equipped ad box with some cool rates going high well with this post you can also get the same kind of ad widget as shown in the image beside even at your blog. This widget has got cool CSS effect so that it makes all the advertisers think that this blog is well designed and developed and get cool advertisers.First see the demo:

Demo

To do this just follow the steps given below:

Step 1. Go to your Blogger Dashboard => Template => Click Edit HTML => Search ]]></b:skin> and paste the following code in the content area before the above given code asked to search for.

/* -------------------Ads------------------*/
div.bsap_125 a{width:125px;display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;float:left;line-height:100%;margin:0 4px 10px 0;}
div.bsap_125 img{border:2px solid #ddd;clear:right;padding:5px;}
div.bsap_125 a.adhere{color:#666;font-weight:bold;font-size:12px;border:2px solid #ccc;background:#e7e7e7;text-align:center;width:125px;height:125px;line-height:1000%;}
div.bsap_125 a.adhere:hover{border:2px solid #999;background:#ddd;color:#333;}
html>

body div.bsap_125 a.adhere{width:123px;height:123px;}
div.bsap_468 a{width:468px;display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;line-height:100%;margin:0;}
div.bsap_468 img{border:0;clear:right;}
div.bsap_468 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;width:468px;height:60px;line-height:480%;}
div.bsap_468 a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}
html>

body div.bsap_728 a.adhere{width:726px;height:90px;}
div.bsap_728 a{width:468px;display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;line-height:100%;margin:0;}
div.bsap_728 img{border:0;clear:right;}
div.bsap_728 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;width:128px;height:90px;line-height:730%;}
div.bsap_728 a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}
html>

body div.bsap_336 a.adhere{width:334px;height:280px;}
div.bsap_336 a{width:468px;display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;line-height:100%;margin:0;}
div.bsap_336 img{border:0;clear:right;}
div.bsap_336 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;width:336px;height:280px;line-height:2200%;}
div.bsap_336 a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}
html>

body div.bsap_468 a.adhere{width:466px;height:58px;}
.bsap a{text-shadow:1px 1px 1px #111!important;color:#eee!important;overflow:visible!important;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-o-transition:all .2s ease;border:0 none!important;-webkit-border-top-left-radius:80px;-webkit-border-bottom-right-radius:80px;-moz-border-radius-topleft:80px;-moz-border-radius-bottomright:80px;border-top-left-radius:80px;border-bottom-right-radius:80px;margin:0 10px 10px 0 !important;padding:7px!important;}
.bsap a:hover{-webkit-border-top-left-radius:40px;-webkit-border-bottom-right-radius:40px;-moz-border-radius-topleft:40px;-moz-border-radius-bottomright:40px;border-top-left-radius:40px;border-bottom-right-radius:40px;}
.bsap a img{border:0 none!important;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.5);-moz-box-shadow:0 0 8px rgba(0,0,0,0.5);box-shadow:0 0 8px rgba(0,0,0,0.5);padding:3px!important;}
.bsap .even{margin-right:0!important;}
.bsap .ad1{background:#e42b2b!important;}
.bsap .ad2{background:#ff8400!important;}
.bsap .ad3{background:#a800ff!important;}
.bsap .ad4{background:#49a7f3!important;}
.bsap .ad5{background:#41d05f!important;}
.bsap .ad6{background:#B24700!important;}
.bsap .ad7{background:#FFE500!important;}
.bsap .ad8{background:#007D47!important;}
.bsap .ad9{background:#330000!important;}
.bsap .ad10{background:#990000!important;}
.bsap .ad11{background:#f70000!important;}

Step 2: Click Save Template
Step 3: Go to "Layout - Page Elements"=>Click on Add Gadget=>create new HTML / JavaScript widget
Step 4: Copy the code in the field below and paste it in the new widget created:

The size of 125x125

<center>
<div id="bsap_125" class="bsap_125 bsap">
<a href="http://AddURL" class="ad1" title="Ad Title" id="bsa_1451626" target="_blank"> <img src = "http://Imageurl "alt ="AdName"height =" 125 "width =" 125 "/> </ a>
<a href="http://AdURL" class="ad2 even" title="Ad Title" target="_blank"> <img src = "http://AdURL"alt =" AdName "height =" 125 "width =" 125 "/> </ a>
<a href="http://AdURL" class="ad3" title="AdTitle" target="_blank"> <img src = "http://Ad Image URL "alt =" AdName "height =" 125 "width =" 125 "/> </ a>
<a href="http://AdURL" class="ad2 even" title="Ad Title" target="_blank"> <img src = "http://AdURL"alt =" AdName "height =" 125 "width =" 125 "/> </ a>
</ Div>
</ Center>

The size of 468x60

<div id="bsap_468" class="bsap_468 bsap">
<span class="bsap_468 bsap"> <a href="AdURL" title="Advertise Here" class="adhere ad4" target="_blank"> Advertise Here </ a> </ span>
</ Div>

The size of 728x90

<div id="bsap_728" class="bsap_728 bsap">
<span class="bsap_728 bsap"> <a href="ADURL" title="Advertise Here" class="adhere ad1" target="_blank"> Advertise Here </ a> </ span>
</ Div>

The size of 336x280

<div id="bsap_336" class="bsap_336 bsap">
<span class="bsap_336 bsap"> <a href="ADURL" title="Advertise Here" class="adhere ad1" target="_blank"> Advertise Here </ a> </ span>
</ div>

Use the code below to add a picture

< img src="ImageURL" alt="AD Name" <img height="125" width="125" />
Orange Blocks Size color banner, change the numbers according to the code used.

P.S. The one Highlighted with purple should be changed with any thing you like among ad1 - ad11 (It changes the color of the background image)
And the one with red to be changed as directed.

Hopefully helpful, Good luck. If you any doubts please ask by commenting below....

Cool Social Media Sharing Touch Me Widget

in: Sidebar widgets Social widgets 17 Comments

This cool widget calls "Touch Me". Its named such due to its appealing look that forces a visitor to roll hover the cursor over the icons and hit follow! :) This gadget is neatly structured using buttons from popular services like Google Plus, Facebook, Twitter and RSS.First see the demo

DEMO:

How To Add Cool Social Media Sharing Touch Me Widget To Blogger?

1. Go To Blogger Dashboard > Layout.

2. Choose "Add a Gadget".

3. Select HTML/JavaScript.

4. Copy and paste below code inside it:

<style> /*--------http://truebloggertricks.blogspot.in/ Touch Me Sharing Widget ------*/ .touchme a { display:block; height:50px; width:50px; padding:0 4px; float:left; background:transparent url(http://beautifulbloggerwidgets.googlecode.com/files/Sharing%20Touch%20Me.png) no-repeat; -webkit-transition: ease-in 0.2s all; -moz-transition: ease-in 0.2s all; -o-transition: ease-in 0.2s all; -ms-transition: ease-in 0.2s all; transition: ease-in 0.2s all; cursor:pointer; } .touchme a.googleplus { background-position: 0px -58px; } .touchme a.googleplus:hover { background-position: 0px 0px; } .touchme a.twitter { background-position: 0px -290px; } .touchme a.twitter:hover { background-position: 0px -232px; } .touchme a.facebook { background-position: 0px -406px; } .touchme a.facebook:hover { background-position: 0px -348px; } .touchme a.rss { background-position: 0px -174px; } .touchme a.rss:hover { background-position: 0px -116px; } </style> <p style="display:none;">Cool Social Media Sharing Touch Me Widget by <a href="http://truebloggertricks.blogspot.in/2012/08/cool-social-media-sharing-touch-me.html">Blogger Widgets</a></p> <div class='touchme'>  <a class='rss' href="YOUR RSS LINK" rel='external nofollow' target='_blank'></a>  <a class='googleplus' href="YOUR GOOGLE PROFILE LINK" rel='nofollow' target='_blank'></a>  <a class='facebook' href="YOUR FACEBOOK LINK" rel='nofollow' target='_blank'></a>  <a class='twitter' href="YOUR TWITTER LINK" rel='nofollow' target='_blank' ></a> </div>

Thats all!!

Spiceupyourblog like Social Buttons With Rotate Spin Effect

in: Sidebar widgets Social widgets

Today, I am back with beautiful 3D Social Buttons With Rotate Spin Effect For Blogger Blogs. You can see live demo on my Beautiful Blogger Widgets. These buttons created with the help of useful CSS trick. With CSS rotate when you place your cursor over each icon they spin 360 degrees, they spin back 360 when the cursor is removed.

You will see hover effect on these buttons.These buttons are related to your RSS feed, Email RSS, Facebook, Twitter, Google+, Pinterest and Feedburner reader count.

Live Demo 3D Social Buttons With Rotate Spin

How To Add 3D Social Buttons With Rotate Spin Effect To Blogger?

1. Go to Blogger Dashboard > Layout.
2. Click 'Add A Gadget' > HTML Javascript.
3. Copy and paste below code in HTML Javascript Gadget.

<style> #social a:hover { background-color: transparent;opacity:0.7; } #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center> <div id="social"><a title="Grab Our Rss Feed" href="YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjghmulapZsazZWihdw9jffDNC02bbrCEOUZjkoZ6f7ONhQqKQMoqSC7PVRiY2QZr6LoKBuCR7wcL-0Z3uYt18wJeMcPEPgIey6IZlJluctBTzA6TbML7w-NURvFIhXL1t4-Wjj8AOQJAxQ/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Get Free Updates Via Email" href="YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR-S90BMlrSmGTo1eAv7DtUSI1R_hBaQWmSvBePHxfSUZ_TAQf_DAP17IYNiaUEf-frPNgQxuCSjjMB5oTa4LrtwYNXgymHk25GX3xpfNwRzHHcEJ9GfcxSiQg3r48Sr04YGb408HQHDUK/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Like Our Facebook Page" href="YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7k_nHIPcVpLCk58S46q6Fk-XFS5SBGdKP7Je3tDUwvXUB_6krfRqWPTgPcrsr2l3JPw1b5t1AMFqAaTocNoE7U0HVrs8rGbuFuiHxx5CZfIVBhliYeOjDt_9CY2lvzsSuVK0KLS8Ga6kD/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Follow Our Updates On Twitter" href="YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKuFHoBWVkM6nFK7RWThzQLDpzvs-uBMkwKxzD6hhBOs5nSr9cRhy2L9PDKykQdLDs4K3y-QTjxaVsJ966zRFf7Ihox-i31sOLo_IRiTqYyU9D7VbP5F81eOmzPqLMu8XmHMS9fCwzKuwZ/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a title="Follow Us On Google+" rel="nofollow" href="YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzWQgnZl_d1fsaHVE-SzrG4CKpVFEPrYXeAuFE9mAWfY-gjJ5EA_YIxqM3I8qrDM0ZwRnFj3KO-D6plDFr0fc5lLLe7s3o7ICgRAIlaameKFybA2Jbau4ErbY4xJvYanhkNI2RGa-l3pVb/s1600/GOOGLE-PLUS-48x48.png"/></a><a title="Follow Our Pins" rel="nofollow" href="YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGETl4DzO5p7hkfeATMeDsCeuWq8an5n8VkQsOUgQsFr9-5FAnPvaJM-l9RSnVvyKIK4-pmKXqpQFD2IwzxhJItIm0FJrFlqYbyb7N5FyYM7o1f_AufgHC3dgoj_y3nPd0o2tjwpezNQNx/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a></div> <br/> <a href="YOUR-FEEDBURNER-URL-HERE" target="_blank"><img alt="Blogger Widgets" src="http://feeds.feedburner.com/~fc/truebloggertricks?bg=FF9999&fg=444444&anim=1" style="border:0" /></a> </center>

Note: Replace the following sections with your social profiles and feed URLs.

YOUR-FEED-URL-HERE
YOUR-EMAIL-RSS-URL-HERE
YOUR-FACEBOOK-PAGE-URL-HERE
YOUR-TWITTER-URL-HERE
YOUR-GOOGLE-PLUS-URL-HERE
YOUR-PINTEREST-URL-HERE
YOUR-FEEDBURNER-URL-HERE

4. Save it.

That's it you have a very cool subscribe section on your blog. Thanks for reading it.

Add Twitter Follow Box in Blogger or Wordpress Blogs

in: Sidebar widgets Social widgets

Twitter follow box is somewhat similar too the facebook like box and gives your reader an easy option to follow you by just clicking on that small follow button. As you can see in the image on the right this is what your box will look like when you will apply the code in your blogger or wordpress blogs.
So now adding this box is really simple just add the below code as mentioned and you will have this box working out perfectly.

First see the demo:

How to add this?

1. Go to Blogger > Design > Layout.

2. Click on Add a Gadget and add a HTML/JavaScript Gadget.

<script type="text/javascript"
src="http://s.moopz.com/fanbox_init.js"></script><div
id="twitterfanbox"></div><script
type="text/javascript">fanbox_init("durai50sankar50");</script>

3. Now just add the above code into that gadget and replace the red word with your twitter username and leave rest of the code as it is and click on Save.
4. Now just refresh your blog and check out this gadget, well now test it by clicking on the follow button and becoming a follower to your own name :)