Professional Footer Quote Author Box Widget For Blogger

Having an author box and about us page is very much important, because All bloggers and visitors love to know about the person behind the blog .Keeping Author Box in blog footer makes your blog professional and Outstanding .You might have come across such widgets in WordPress blogs and Other websites , but unfortunately there is non for blogger.So,Today I have made this widget for blogger users!!To Get this Widget,we just need to add some code in our Widget box.This widget also helps to get Authorship in Google Search Results.We Highly recommend to place this widget in footer


After working out this post you will end up something like this :

Man
Behind
This Blog

Durai Sankar
I'm the owner and founder of this blog. I reside in Chennai, India and I'm doing my 11th grade...More

How to add this Widget to Blogger:

• Go to Blogger > Layout > Add A Gadget > HTML/JAVASCTIPT
• Paste the following coding inside it:

<style>.quote_box{width:225px;margin-top:12px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6RgYGf1yH463OawisU6r0uCW_DEk3cQD3u76zuc-iFjf7hHFcHSbBsr7HR0Dz-uClxuiac9cLuUIjsshUkhRbtiaG-jpQbBmBTbMJox4ybmpq9N_SniLxcZOGB4SMZrZe3uLhwfRAxIRV/s320/footer+author+quote.PNG) no-repeat 94% 7%;border:1px solid #b6b6b6;position:relative;padding:18px}.quote_box:before{border:15px solid;bottom:-30px;content:'';height:0;right:40px;position:absolute;width:0;border-color:#b6b6b6 transparent transparent #b6b6b6}.quote_box:after{border:14px solid;bottom:-27px;content:'';height:0;position:absolute;right:41px;width:0;border-color:#fff transparent transparent #fff}.quote_content{overflow:hidden}.detail_box{float:left;margin-left:0}.detail_box span{display:block}.detail_box span.name{font-size:17px;line-height:30px}.detail_box span.derole{ color: #666666; font-size: 15px; font-style: italic; line-height: 10px;}.said_box{ font-size: 20px;float:left;margin-top:-130px;margin-left:72px}.said_box span.roleau{ color: #333333; font-size: 16px; font-style: normal; line-height: 20 px;}.custom li.quotes,.custom li.widget.quotes p{margin-bottom:0} </style> <br /> <div class="quote_box"> <div class="quote_content"> <div class="detail_box"> <img alt="Durai Sankar" src="YOUR 125 X 125 IMAGE URL" style="border-radius: 777px 777px 777px 777px;" title="Durai Sankar" /><span class="derole"></span><br /> <span class="derole">Man</span><br /> <span class="derole">Behind</span><br /> <span class="derole">This Blog</span></div>

<div style="text-align: right;"><div class="said_box"> <a href="YOUR GOOGLE + URL" rel="author" target="_blank">Durai Sankar</a><span class="roleau"></span><br /> <span class="roleau">I'm the owner and founder of this blog. I reside in Chennai, India and I'm doing my 11th grade...<a href="YOUR ABOUT US PAGE URL" rel="author" target="_blank">More</a></span></div> </div> </div> </div></div>

Customisation:

• Just Replace Durai Sankar with your name.
• And Replace Other Bold Texts with mentioned above.
• Replace Blue Text with your Description.Thats all!

I hope you liked this widget very much.Please take few seconds to share with your friends.

Cool Follow Us Twitter Bird Widget For Blogger

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

Hi guys. Exposure to social media is a very crucial task to gain reputation. Well, people often don't share others blog on their account because they see not benefit in that. In this post, we would show you a very nice twitter widget bird which is attractive. It is made from Flash javascript. I was just surfing on internet and found this widget on a site so I immediately took out the code from source. Hope you would like it..

Learn more »

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

GET FREE EMAIL UPDATES

Join us for free and get valuable content delivered right through your inbox.

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/AVvXsEi_ZZQj7snZ8gCKQHwsI3kKAMsSNbfyBe6MZ-pllsRX0td9JHQjOVLKP9ZklZW8fv51QaHsjSuBiuRMEz_P4kl_muTRc3ACmtmVA-UUN61zlpW-SBgnYTBVnzAOO-cJhKV6MtOgJn0gKE9O/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/AVvXsEg0B8t6RkaXryjAahBAUUqv0vuSTLo8z9GDwCN_CkISchkNTAPz1ffQoUXGS9U_-z0pF0uxuwbyLgpAjQs8SvqYrxTRSh3vBQOQDUq6fxPeXvQFbzRtx2eeEhDG2xvvQo2n7Fu8k1HFVEIs/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/AVvXsEiDOgAJbKnOvFWQEScA59eGGfhy6NyGrX-TJqYVsCrOVi-JVnOpCgyaKaf75-F8wUj4whKsc2NunnvPM1L96LVUE6I1-Ij_usejmtwnou31hzx_ticK9mfZ3NtOmZDW6K-BAdz2OvvNkBps/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!!!

Beautiful Social Subscription Widget for Blogger

Social widgets is one of important widget in blogger blogs.They makes your users to easily spread your words all around the world.Social network also play a major role in your website traffic.Today I camed with a social widget which looks beautiful , Elegant and adopts with your blog width.This widget enable your user to connect with your blog in all top social sites like Facebook, RSS ,Twitter,Google plus, LinkedIN and Youtube.This widget is used by Chandeep in his blog.Lets see the Demo

• Subscribe to the RSS Feed
• Follow me on Twitter
• Find me on Facebook
• Join me on Google+
• Connect with me on LinkedIn
• Watch me on YouTube

How to Add this Widget to Blogger ?

Adding this widget to blogger is very simple just follow these steps:

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

<div class="btnt-chronicl-social"><ul><li><a class="rss" href="http://feeds.feedburner.com/truebloggertricks">Subscribe to the RSS Feed</a></li> <li><a class="twitter" href="https://twitter.com/tbloggertricks">Follow me on Twitter</a></li> <li><a class="facebook" href="https://www.facebook.com/truebloggertricks">Find me on Facebook</a></li> <li><a class="google" href="https://plus.google.com/100090854666031755159" rel="author">Join me on Google+</a></li> <li><a class="linkedin" href="http://in.linkedin.com/your url">Connect with me on LinkedIn</a></li> <li><a class="youtube" href="http://www.youtube.com/user/username">Watch me on YouTube</a></li>

</ul></div><style type="text/css">.btnt-chronicl-social { width: 100%; } .btnt-chronicl-social ul { border: 1px solid #CCCCCC; margin: 0; padding: 0; } .btnt-chronicl-social ul li { list-style:none; padding: 0; text-transform: none; border-bottom: 1px solid #CCCCCC; border-top: 1px solid #FFFFFF; } .btnt-chronicl-social ul li:first-child { border-top: 0 none; } .btnt-chronicl-social ul li:last-child { border-bottom: 0 none; } .btnt-chronicl-social ul li a { background-color: #F2F2F2 !important; color: #404040; display:block; } .btnt-chronicl-social ul li a:hover { background-color: #fafafa !important; } .btnt-chronicl-social ul li .rss { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 10px center #F87E12; padding: 17.5px 60px; } .btnt-chronicl-social ul li .twitter { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 10px center #4CACEE; padding: 17.5px 60px;} .btnt-chronicl-social ul li .facebook { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 10px center #3B5998; padding: 17.5px 60px; } .btnt-chronicl-social ul li .google { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 10px center #D44937; padding: 17.5px 60px; } .btnt-chronicl-social ul li .linkedin { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/LinkedIn-1.png") no-repeat scroll 10px center #3692C3; padding: 17.5px 60px; } .btnt-chronicl-social ul li .youtube { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Youtube-1.png") no-repeat scroll 10px center #C6312B; padding: 17.5px 60px; } .social-about { display: none; }</style>

Customization:

 Just replace following with your respective URL

•  http://feeds.feedburner.com/truebloggertricks
•  https://www.facebook.com/truebloggertricks
• https://plus.google.com/100090854666031755159
• http://www.youtube.com/user/username 
• http://in.linkedin.com/your url

Thats all!If you liked this widget, please share with your friends.Happy Blogging:)

Mouse Hover Effect Email subscription widget for blogger

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

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:&#39;georgia&#39;;

    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 == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}"/></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

HackingUniversity like Responsive Email Subcription widget for blogger

Hello friends! Today I will tell you how to add a responsive email subscription widget to your blogger blog which is used by HackingUniversity.Subscription widget is one of the most and important widget for all blogs.They makes the readers to stay with your blog post without visiting your site through mails.This Social subscription widget is made with the aim of promoting and increasing traffic of your blog in various manners. As this widget is responsive in nature,It has the potential to boost your subscribers. Your readers will also get an opportunity to connect with you blog with feedburner.Get ready to see the amazing beauty in action which will nurture your blog . Lets see the Demo

How to Add this Widget to Blogger ?

Adding this widget to blogger is very simple just follow these steps:

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

<style type='text/css'>#sidebar-subscribe-box{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYGi3R3S8_3M5n1Xm_nmhCvFaDLTS7iPNiW56zMPG-XYxDxnCLWSYcBdAFXEFpjZ4B38QCbykUlQ5TXvgWyqWT0zNOYRtXnItfgJgEMqjdntS_3u4sX36aXFfah-RerdokcrwQt2uHuYEs/s1600/colored-strip.png) repeat scroll 0 0 transparent;border:1px solid #aaa;border-radius:3px;padding:3px 0}.sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSm3g4edthZtEwGv6zcEOhzf8yTI21zdwKqt0yBzO6WA51wgpMiwo3LdsehfROlfvDC1t9DIfEBEd-mkU46RbXLuYK0KdXvzCa24TLTrEZSGqco5oPlKSVLIP9VB7VJNsQ-HZUUQzV7M3p/s1600/bg-pattern.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}.sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7VGSebpyAe0cWIC7GtRNDEpnw-j8CThdR9lsHVuEdz_sNKy_Cb9OVac-ruopzDafknOUWGPqT3b7O51nBtxiSfJENKpSj-J-tsFhfBgx_p9-8bmzBtpWN660qCDn__k4m4WABngsLG-j4/s1600/sprites.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}.sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}#footer-section{background:#f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-FE_2Z2XSGxterS4tM9OV63bZ_Yv2R69KcC0UFJRDedGLmrjSg9Zj2kfHQcR1ahxzzWu6kwYnoUj8WFpXukx9ztEcrEEripiHp3Xx0LPdNc1YPWqmV6qLLM_iFAcQYsY7P3JZKWkmw5Sm/s0/bg-pattern.png) repeat top left;border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}</style>
<div id="sidebar-subscribe-box"><div class="sidebar-subscribe-box-wrapper"><p>Subscribe to our email newsletter & receive updates right in your inbox.</p><div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=truebloggertricks" class="sidebar-subscribe-box-form" 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 name="uri" type="hidden" value="truebloggertricks" /><input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address :)"/><input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form></div></div></div>

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

Ice Cream Social Sharing Widget below blogger Post

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

For our dear visitors we created a very awesome and professional social sharing widget for blogger which can you add below every post  of your blog and it works perfectly with blogger and you can also add it on your other websites like Wordpress, Joomla, Webs, etc.This Widget contains a spinning effect on mouse hover.

Add Social Sharing Ice Cream Widget

• Login to Blogger > Dashboard
• Click on Drop Down Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML > Proceed > Expand Widget Templates
• Press Ctrl + F and search the code shown below. 

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

• If you can't find above code then Search below code

<div class='post-footer-line post-footer-line-1'>

•  Now Paste Below Code Just After after it.

<b:if cond='data:blog.pageType == "item"'> <style> p#socialicons img { -moz-transition:all .7s ease-in-out; -webkit-transition:all .7s ease-in-out; -o-transition:all .7s ease-in-out; -ms-transition:all .7s ease-in-out; transition:all .7s ease-in-out; } p#socialicons img:hover { -moz-transform:rotate(50deg); -webkit-transform:rotate(50deg); -o-transform:rotate(50deg); -ms-transform:rotate(50deg); transform:rotate(50deg); } </style> <center><p id='socialicons'> <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj9UR9lHwNPhuXQAFl6vIY3jaUTEDaJ2WDAjUv_W9XTP79fabG7f1yfFwGc29b3jst7zc9pc7-nLZlihQnZyc9AYj2p0k_dtjAxPIJ8Z6Rx3W26P4-KBtzKVf0H3kSsEQF5NlyWjIIOAP5/s1600/facebook.png' title='Share on Facebook'/></a> <a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqZ_IBhqewrLPPR6kgek3RZ_9ItaLyFgLHdTGJSheGwiUHF7v85WC_HubfDqJmZ6hrAvQZIG___eeHjdwXXAx2n4fwwM23aPUODlDtJneBYl0ihT8h2Cg0pt5nghHNBUGiEI6OZCn42Hfm/s1600/twitter.png' title='Share on Twitter'/></a> <a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9hPy5HMLxJ6XMVjDhElaXvDGskGBdvkZlmmQvW-2VcFDpOZ2NAempNOWIgR6f6PpEFA8TwQk9zKDmfQeDvZrjoWmgtB33YnvcOqMnlde7ydgmjAiSttrjFwDpEQxwI_MeTB7DT1dLjbwk/s1600/digg.png' title='Share on Digg'/></a> </p></center></b:if>

• Save Your Template.
• Say Bingo and You are Done.

Posted by Guest Author,Hemant Verma
Hello This is Hemant Verma ,from Delhi, I like to make blogger hacks, Design Blogger template, Web Developing and Designing.
Visit My Blog Widget Generators | Follow Me On Twitter Or Facebook

Spiceupyourblog like floating sharing widget for blogger

Hi friends, After publishing spiceupyourblog template, I made this widget by compressing the codes and credit goes to a lot of people for this widget. The widget is named as "Spiceupyourblog like floating sharing widget". Because, You can see a widget like this in spiceupyourblog which is made by Paul Crowe but he hasn't shared how to make that. I tried a lot to make that but I can't. At last, I made that and I am using that now. And also, this widget has a specialty. This is completely No CSS widget.

Preview : 

     

I think you all had liked the widget by seeing the demo. This widget design is actually made by Paul Crowe of Spice Up Your Blog; but he only knows the code for making that. I had made the code myself like that. For share buttons, I had used the AddThis buttons. Actually, I had customized the AddThis floating buttons like that of spice up your blog.

Installation Notes

• Go to blogger.
• Go to the layout tab.
• Click on Add A Gadget button anywhere or click on any HTML/JavaScript widget.
• If you had clicked on Add a Gadget button, please choose HTML/JavaScript  and paste the code given below or if you clicked on an existing HTML widget, just paste the code below the ending of that code.

Dark Theme

<!-- TrueBloggerTricks AddThis Floating Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_counter_style"  style="position: fixed; left: 160px; top: 150px; background:#000; border:2px solid #ddd;">
<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi89MW76-ZhLHOJyxtYDkHvYqijdidWpC_wrJgTZvs1jeR6DA7b1CU55pdGQaDYy387PV4e1PXB-zOkhBoxLDXKq-c1cyOQtGxqd_iLx4M5u-E5tlAYh22uxcATxCilsoQsquUBVUsiVuY/s1600/please-share-this-post.png" /></center>
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<a class="addthis_button_pinterest_pinit"></a>
<br />
<a class="addthis_counter"></a><br />
<a href="http://feeds.feedburner.com/truebloggertricks" rel="nofollow" target="_blank" title="Subscribe To Our Rss Feed"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVMxW3cAkenG1YEPxuURV_jYwNXmFq-LtXi2bRqg5AThyphenhyphenbjg8wHA9pj5IZICdnX6eGsOH1ehJPPheIjwMS1CHjfvZc7zDMzZxLYO8gRhqToqoT3p2UQyMDc2yn6qvpRwDFywsP0fQAFww/s1600/rss-updates.png" /></a>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=truebloggertricks&loc=en_US" rel="nofollow" target="_blank" title="Subscribe To Our Rss Feed"><img align='left' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAWC5EquEhzEZAr1Kq7b9XJnOqJq6THX8PNjcF-GzEAtZHeik71U0OisyzZy_bKYwrtxOlfYA-tYrrqGyVbRKhqfMfC8W-lq41GRESGzc4LV2qDfcBgFY5Yi2UrnwPFmnptMv0G4gW_KY/s1600/email-updates.png" /></a><br /><br /><br />
<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://truebloggertricks.blogspot.com' target='blank' style='color:#CAC8C8;'>Widgets</a></p></div> <script src='http://s7.addthis.com/js/300/addthis_widget.js' type='text/javascript'/></script>
<!-- TrueBloggerTricks AddThis Floating Button ENDS -->

• left: 160px; top: 150px; background:#000; border:2px solid #ddd; - Change these positions and background colors according to your blogger template.
• http://feeds.feedburner.com/truebloggertricks - Change this to your Feed URL
• http://feedburner.google.com/fb/a/mailverify?uri=truebloggertricks&loc=en_US - Change this to your FEED URL

The above code I had provided can be used only for those who want the dark themes for their floating widget.

White Theme

<!-- TrueBloggerTricks AddThis Floating Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_counter_style"  style="position: fixed; left: 250px; top: 280px; background:#fff; border:2px solid #ddd;">
<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9HHwYVxgaQztOoZqfMSQhG5VVF2K0isnkEiWq3qBwVkDshwsd3bVnC-ebLiBL4Arqfag6UsX3sqcvDDnsbhrd8j7W3shz7AK153CiX9ycJ7eALqIBW-YfPMvJJvL-ymikVZi2LygNV8Q/s1600/12.png" /></center>
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<br />
<a class="addthis_counter"></a><br />
<a href="http://feeds.feedburner.com/truebloggertricks" rel="nofollow" target="_blank" title="Subscribe To Our Rss Feed"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVMxW3cAkenG1YEPxuURV_jYwNXmFq-LtXi2bRqg5AThyphenhyphenbjg8wHA9pj5IZICdnX6eGsOH1ehJPPheIjwMS1CHjfvZc7zDMzZxLYO8gRhqToqoT3p2UQyMDc2yn6qvpRwDFywsP0fQAFww/s1600/rss-updates.png" /></a>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=truebloggertricks&loc=en_US" rel="nofollow" target="_blank" title="Subscribe To Our Rss Feed"><img align='left' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAWC5EquEhzEZAr1Kq7b9XJnOqJq6THX8PNjcF-GzEAtZHeik71U0OisyzZy_bKYwrtxOlfYA-tYrrqGyVbRKhqfMfC8W-lq41GRESGzc4LV2qDfcBgFY5Yi2UrnwPFmnptMv0G4gW_KY/s1600/email-updates.png" /></a><br /><br /><br />
<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://truebloggertricks.blogspot.com' target='blank' style='color:#CAC8C8;'>Widgets</a></p></div> <script src='http://s7.addthis.com/js/300/addthis_widget.js' type='text/javascript'/></script>
<!-- TrueBloggerTricks AddThis Floating Button ENDS -->

•  left: 250px; top: 280px; background:#fff; border:2px solid #ddd  - Change these positions and background colors according to your blogger template.
• http://feeds.feedburner.com/truebloggertricks - Change this to your Feed URL
• http://feedburner.google.com/fb/a/mailverify?uri=truebloggertricks&loc=en_US - Change this to your FEED URL

Transparent Theme

<!-- TrueBloggerTricks AddThis Floating Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_counter_style"  style="position: fixed; left: 230px; top: 300px; background:none; border:2px solid #ddd;">
<center><img width="100%" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9HHwYVxgaQztOoZqfMSQhG5VVF2K0isnkEiWq3qBwVkDshwsd3bVnC-ebLiBL4Arqfag6UsX3sqcvDDnsbhrd8j7W3shz7AK153CiX9ycJ7eALqIBW-YfPMvJJvL-ymikVZi2LygNV8Q/s1600/12.png" style="background:#fff;"/></center>
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<br />
<a class="addthis_counter"></a><br />
<a href="http://feeds.feedburner.com/truebloggertricks" rel="nofollow" target="_blank" title="Subscribe To Our Rss Feed"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVMxW3cAkenG1YEPxuURV_jYwNXmFq-LtXi2bRqg5AThyphenhyphenbjg8wHA9pj5IZICdnX6eGsOH1ehJPPheIjwMS1CHjfvZc7zDMzZxLYO8gRhqToqoT3p2UQyMDc2yn6qvpRwDFywsP0fQAFww/s1600/rss-updates.png" /></a>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=truebloggertricks&loc=en_US" rel="nofollow" target="_blank" title="Subscribe To Our Rss Feed"><img align='left' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAWC5EquEhzEZAr1Kq7b9XJnOqJq6THX8PNjcF-GzEAtZHeik71U0OisyzZy_bKYwrtxOlfYA-tYrrqGyVbRKhqfMfC8W-lq41GRESGzc4LV2qDfcBgFY5Yi2UrnwPFmnptMv0G4gW_KY/s1600/email-updates.png" /></a><br /><br /><br />
<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://truebloggertricks.blogspot.com' target='blank' style='color:#CAC8C8;'>Widgets</a></p></div> <script src='http://s7.addthis.com/js/300/addthis_widget.js' type='text/javascript'/></script>
<!-- TrueBloggerTricks AddThis Floating Button ENDS -->

• left: 230px; top: 300px; background:none; border:2px solid #ddd;  - Change these positions and background colors according to your blogger template.
• http://feeds.feedburner.com/truebloggertricks - Change this to your Feed URL
• http://feedburner.google.com/fb/a/mailverify?uri=truebloggertricks&loc=en_US - Change this to your FEED URL

Best Placement Tip

I think you would get more shares if you place this widget in the left side because many of my friends said they like to see the floating widget in the left side and also most of the sites use the floating widget in the left side. So you too can.

How to add Cool metro style Social Sharing Widget below Blog Post

Social Media play a very important role for every blog or website. With the help of social media, it can get more traffic, visitors and readers to your blog or website. Every social media have unique social sharing buttons designed by their developers. Therefore, we need to add these social sharing buttons in our blog or website to gain more traffic, visitors and readers. Actually, I already shared many kinds of social sharing buttons here in TrueBloggerTricks. And today, I'm gonna share to you another style. It is different from all others because each button has a different background. These social sharing buttons contains twitter tweet, facebook like and google +1. So, If you want to add this widget below your blogger blog post, then just follow the steps given below.

Steps to Add This Widget Below Your Blog Post

Steps.

• Login to your Blogger Dashboard.
• Click the drop-down menu and select Template.
• Backup your Template before making any changes.
• Click Edit HTML ---> Proceed ---> Expand Widget Templates.
• Click Ctrl+F and search the code below:

<data:post.body/>

If you have more than one of this in your template and confused about which one to use, search for <div class='post-footer-line post-footer-line-1'/> instead.

• Just below/after the <data:post.body/> or <div class='post-footer-line post-footer-line-1'/>, Paste the code below:

<b:if cond="data:blog.pageType == &quot;item&quot;">
<style>
.promote_post_bg {
    height: 103px;
    background: url(http://1.bp.blogspot.com/-0XK7JZR6VAw/UIC9BwXIMyI/AAAAAAAAAN4/NjbbeWgyV5M/s1600/Cool+Social+Sharing+Widget.png) 0 -7px no-repeat;
    width: 500px;
    margin-left: 65px;}
.promote_twitter {
    width: 130px;
    height: 38px;
    float: left;
    margin: 0 39px 0 0;
    padding: 65px 0 0 13px;
    text-align: center;}
.promote_facebook {
    width: 115px;
    height: 40px;
    float: left;
    margin: 0 39px 0 0;
    padding: 63px 0 0 28px;
    text-align: center;}
 .promote_google {
    width: 65px;
    height: 40px;
    float: left;
    margin: 0 39px 0 0;
    padding: 65px 0 0 28px;
    text-align: center;
}
</style>
<div class="promote_post_bg">
<div class="promote_twitter">
<a class="twitter-share-button" data-via="tbloggertricks" href="https://twitter.com/share">Tweet</a>
<script>
                !
                function (d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0];
                    if (!d.getElementById(id)) {
                        js = d.createElement(s);
                        js.id = id;
                        js.src = "//platform.twitter.com/widgets.js";
                        fjs.parentNode.insertBefore(js, fjs);
                    }
                }(document, "script", "twitter-wjs");
         
</script></div>
<div class="promote_facebook">
<fb:like action="like" colorscheme="light" expr:href="data:post.canonicalUrl" font="verdana" layout="button_count" send="false" show_faces="false"></fb:like>
<div>
<b:if cond="data:post.isFirstPost">
<script>
                        (function (d) {
                            var js, id = 'facebook-jssdk';
                            if (d.getElementById(id)) {
                                return;
                            }
                            js = d.createElement('script');
                            js.id = id;
                            js.async = true;
                            js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
                            d.getElementsByTagName('head')[0].appendChild(js);
                        }(document));
                 
</script>
</b:if></div>
</div>
<div class="promote_google">
<g:plusone annotation="none" size="medium"></g:plusone>
<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></div>
</div>
</b:if>

• Now click Save Template.

Need Help? If you are facing any problem to implement these sharing buttons in your blog. Please feel free to add your comment. I will try to resolve it in time. I hope you enjoyed this tutorial! Looking forward for your feedback. Thanks!

How to add unique like and tweet box for all post in blogger homepage

Today, this easy tutorial will guide you "How to Add Facebook Like and Twitter Tweet Buttons Box On Every Single Post On Blogger Blog Homepage?". I am sure your readers will like these buttons on your blog. Because social networking is the most powerful way for increase traffic to your blog.

Facebook Like, Twitter Tweet and Google +1 are the three main online systems for spreading your post all over the world, more likes and tweets you have more post is shared and you will get more views. Make your blog more attractive by adding these buttons with the help of simple CSS code.

How to Add Like & Tweet Box On Every Single Post On Blogger Homepage

• Go to Blogger Dashboard > Template > Edit HTML > Proceed
• Take Backup Of Your Template Before Make Any Changes
• Now Click Expand Widget Templates and Press Ctrl + F and Search For ]]></b:skin> Code and Paste The Below Code Right Above It.   
  
  

   .post-homepage-share{box-shadow: 0 5px 5px -5px #999;-webkit-box-shadow: 0 5px 5px -5px #999;-moz-box-shadow: 0 5px 5px -5px #999;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;float:right;width:130px;height:65px;background: #f9f9f9;border:1px solid #ddd;margin:5px 0 0 10px;padding:5px 10px 2px 0}

• 3. Now again make a search for <div class='post-header'> and paste the below code right below it.

<b:if cond='data:blog.pageType != &quot;item&quot;'><div class='post-homepage-share'><span style='float:right'><a class='twitter-share-button' data-count='vertical' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'/></span><span style='float:right;padding-right:5px'><div class='fb-like' data-font='verdana' data-layout='box_count' data-send='false' data-show-faces='false' expr:href='data:post.url'/></span></div></b:if>

• If you already had facebook and twitter pulgin avoid this step.Place this code before </head>

 <script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>

Now codes are placed and you can save your template, now refresh your blog and see if like and tweet box has loaded or not, if you think that the box is getting too much up or too much low you can change the margin value in the above code in red color.

Note : Using these Like and Tweet for every single post on your blog may make your blog a little slow, as everytime a person loads your homepage additional requests for like and tweet buttons will be carried out so try using it if it fits best than enjoy :)

How to Add Google+ Page Badge to your Blogger blog

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.

<!-- Google +1 script --> <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> <!-- Link blog to Google+ page --> <a style='display: block; height: 0;' href="PUT YOUR G+ PAGE URL HERE" rel="publisher">&nbsp;</a> <!-- Google +1 Page badge --> <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

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&amp;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&amp;colorscheme=light&amp;header=false&amp;height=179&amp;href=https%3A%2F%2Fwww.facebook.com%2FTrueBloggerTricks&amp;locale=en_US&amp;sdk=joey&amp;show_faces=true&amp;stream=false&amp;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.