All in One Social Sharing Board For Blogger

This is a very charming and adorable social widget. This is a beautiful All in One Social Sharing Board For Blogger. This is all in one shakable style social sharing and subscribing widget.It contains Facebook like button,Google+ recommend button,Twitter follow button and subscribe by email.com also I have added a add-this social sharing buttons at bottom.This widget can now be used in every blogspot blog just with an extremely easy installation steps.

How To Add This Widget On Blogger

•     Go to your Blogger Dashboard > Design > Page Layout.
•     Then choose Add A Gadget > HTML/JavaScript.
•     Paste below code and save it.

<style>
/* MMFWU Social Widget  */


#MMFWU-mashable-bar {
border: 0;
margin-bottom: 10px;
margin: 0 auto;
width:300px;
}

.fb-likebox {
background: #fff;
padding: 10px 10px 0 10px;
border: 1px solid #D8E6EB;
margin-top: -2px;
height:65px;
}

.googleplus {
background: #F5FCFE;
border-top: 1px solid #FFF;
border-bottom: 1px solid #ebebeb;
border-right: 1px solid #D8E6EB;
border-left: 1px solid #D8E6EB;
border-image: initial;
font-size: .90em;
font-family: "Verdana","Helvetica",sans-serif;
color: #000;
padding: 9px 15px;
line-height: 1px;}
.googleplus span {
color: #000;
font-size: 11px;
position: absolute;
display:inline-block;
margin: 9px 70px;}
.g-plusone {    float: left;}
.twitter {
background: #EEF9FD;
padding: 10px;
border: 1px solid #C7DBE2;
border-top: 0;}
#mashable {
background: #EBEBEB;
border: 1px solid #CCC;
border-top: 1px solid white;
padding: 2px 8px 2px 3px;
text-align: right;
border-image: initial;}
#mashable .author-credit {}
#mashable .author-credit a {
font-size:10px;
font-weight: bold;
text-shadow: 1px 1px white;
color: #1E598E;
text-decoration:none;}
#email-news-subscribe .email-box{
padding: 5px 10px;
font-family: "Verdana","Helvetica",sans-serif;
border-top: 0;
border-right: 1px solid #C7DBE2;
border-left: 1px solid #C7DBE2;
border-image: initial;
height:35px;}
#email-news-subscribe .email-box input.email{
background:#FFFFFF;
border: 1px solid #dedede;
color: #999;
padding: 7px 10px 8px 10px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
border-image: initial;
font-family: "Verdana","Helvetica",sans-serif;}   
#email-news-subscribe .email-box input.email:focus{color:#333}   
#email-news-subscribe .email-box input.subscribe{
background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
-pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
font-family: "Verdana","Helvetica",sans-serif;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #cc7c00;
color:white;
text-shadow:#d08d00 1px 1px 0;
padding:7px 14px;
margin-left:3px;
font-weight:bold;
font-size:12px;
cursor:pointer;
border-image: initial;}
#email-news-subscribe .email-box input.subscribe:hover{
background: #ff9b00;
background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00);
background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
outline:0;-moz-box-shadow:0 0 3px #999;
-webkit-box-shadow:0 0 3px #999;
box-shadow:0 0 3px #999
background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));
background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);
-pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #cc7c00;
color:#FFFFFF;
text-shadow:#d08d00 1px 1px 0}   
#other-social-bar {
background-color: #D8E6EB;
box-shadow: 0 1px 1px #FFFFFF inset;
padding: 5px;
font-family: "Verdana","Helvetica",sans-serif;
font-weight:bold;
overflow: hidden;
border: 1px solid #B6D0DA;
height:35px;
}
</style>

<!--[if IE]>
<style>
#email-news-subscribe .email-box input.subscribe{
background: #FFCA00;
}
</style>
<![endif]-->
<!--begin of social widget--> <div style="margin-bottom:10px;"> <div id="MMFWU-mashable-bar" ><!-- Begin Widget --> <div class="fb-likebox"> <!-- Facebook --><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><div class="fb-like-box" data-href="http://www.facebook.com/MMFWU" data-width="280" data-height="88" data-show-faces="false" data-stream="false" data-header="false"></div></div><div class="googleplus"> <!-- Google --><span>Recommend Us!</span><div class="g-plusone" data-size="medium"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> </div> <div class="twitter"> <!-- Twitter --> <iframe title="" style="width: 300px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp;align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp;lang=en&amp;link_color=&amp;screen_name=saifullah&amp;show_count=&amp;show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div><div id="email-news-subscribe"> <!-- Email Subscribe --><div class="email-box"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=MMFWU', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input class="email" type="text" style="width: 150px; font-size: 12px;" id="email" name="email" value="Your Email Here.." onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;" onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;" /><input type="hidden" value="MMFWU" name="uri" /><input type="hidden" name="loc" value="en_US" /><input class="subscribe" name="commit" type="submit" value="Subscribe" /></form></div></div><div id="other-social-bar"><!-- Other Social Bar --><!-- AddThis Button BEGIN --><div class="addthis_toolbox addthis_default_style addthis_32x32_style"><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_preferred_6"></a><a class="addthis_button_compact"></a><a class="addthis_counter addthis_bubble_style"></a></div><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4f22ed8a16c66e93"></script><!-- AddThis Button END --></div></div></div><!--Social Media Sharing Widget By totalallpixz1080p.blogspot.com-->


Changes user names

    Now replace blue color MMFWU with your facebook fanpage username.
    Replace red color Saifullah  with your twitter username.
    Replace these red color MMFWU two usernames with your feedburner username.

Beautiful Subscription Box Widget for Blogger

This is a Beautiful Subscription Box Widget for blogger post. This post is about how to add a Subscription Box. Subscription box contains Facebook, Twitter, RSS Feed, e-mail subscription. This widget is based on a wooden theme. Facebook, Twitter, RSS Feed links are shown as Natural Wooden Sticky Boards.

So come with me and start how to add Beautiful Subscription Box Widget for blogger.

• Go to Blogger Dashboard
• Go to Layout
• Select Add a Gadget
• You can type title any
• And Copy the following code in the content.

<style type="text/css">
 /* Delete form Here*/ 
img.beintouch:hover {
    background: none repeat scroll 0 0 #D6D6D6;
    border-radius: 16px 16px 16px 16px;
    box-shadow: 0 0 10px #565656;
}
/* Delete to Here*/
.emailtext {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNW7IgRUWlLKyQOZ0eqvQPalcNt8neqUq-_Odlbr-KcNea_zAoFvGcpq9-tPMvrHHQDBT-sIPJDug4yWGcxJ5ZVRJcITsRiP7vTMYmEzaY0UTHwlIdF7BxT6kiinS73wJHd_3T0m2qVzs/s1600/mailbox.png") no-repeat scroll 4px center transparent;
    border: 1px solid #7E4E27;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 1px 1px 4px #7E4E27 inset;
    color: #444444;
    font-weight: bold;
    margin-left: 2px;
    padding: 7px 15px 7px 35px;
    text-decoration: none;
    width: 176px;
}
.ebutton {
    background: -moz-linear-gradient(-45deg, #3C1F0E 0%, #D28A47 30%, #F9E183 30%, #D28A47 55%, #3C1F0E 100%) repeat scroll 0 0 transparent;
    border: 1px solid #D3D3D3;
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF;
    cursor: pointer;
    font-weight: bold;
    margin-left: -18px;
    margin-top: 5px;
    padding: 6px 15px;
    text-decoration: none;
    text-shadow: 1px 1px 0 #000000;
}
</style>
<table align="center" width="317px" cellspacing="0px" cellpadding="1px"><tbody>
<tr><td><a target="_blank" rel="nofollow" href="http://www.facebook.com/pages/BlogTipzNTricks"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSaKciHOA15YrFG-DHdX0mBT532Jt9a9jwSqLj1oCYSh_-ZuTeOL3PcUmDtmvE4WVIjguUs-XC9Z1W0Q3lmh3yahTNXZNRU7oJT_BgXa76eD1oc_uCByzis8QZdqgfwog_q4szsg0smRJp/s1600/fb+makemoneyfreewithus.png" class="beintouch" /></a></td><td><a target="_blank" href="http://twitter.com/rightevery/" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5QQrPvXjerLOo-wWNlhsvqX9nHwz6xb1EoITKR0XthHoVWGCCGCHd3SfjPOqpA_b22igXHKUkj2cuGveA3P5fcX34Tdn19jfXa2GabZtH_CkqJuBEn97mO99WL4RTjYUsDclVZCXOHsdf/s1600/tweet+makemoneyfreewithus.png" class="beintouch" /></a></td><td><a target="_blank" href="http://feeds.feedburner.com/BlogTipzNTricks" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi4Vvd2Pt-P4W85oGQ4PenxHHpdJH89xZJa-R8-STsy7FduO87-2QfobttX9M8Njob7tK9_RL-Z9zHqH_wjSgqq9Aaff_1Ni1DEirnVQnKF3BLsRS0BrVKRCXCxuvdt98uQLOCWTv1AJhp/s1600/makemoneyfreewithus.png" class="beintouch" /></a><a href="http://netoopsblog.blogspot.com"></a></td></tr>
</tbody></table>
<div>
Get Latest Tips via e-mail</div>
<form target="popupwindow" style="margin: 0pt;" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=BlogTipzNTricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" class="emailform" action="http://feedburner.google.com/fb/a/mailverify">
<input type="hidden" value="BlogTipzNTricks" name="uri" />
<input type="hidden" value="en_US" name="loc" />
<input type="text" value="Enter your email..." onfocus="if (this.value == "Enter your email...") {this.value = ""}" onblur="if (this.value == "") {this.value = "Enter your email...";}" name="email" class="emailtext" />
<input type="submit" value="Subscribe" title="" class="ebutton" alt="" />
</form>

Change the Red highlighted code with FACEBOOK PAGE URL, TWTTER, FEED URL, FEED ID respectively.

More Traffic with Read More Button

Hi friends! we try to every day to new way for getting a hug traffic for our blogs. To day i share with you a useful tip for gaining a huge traffic with Read More button. Read more is used cut the full article into two pieces and First piece of Text and images display in the Homepage. Here I am going to show you how to Automatically put read more to Blogger posts. In this Automatic read more hack everything is automatic and you need not bother about the too long length of posts.Let us see how to do it..

Features are

•     You can also limit the length of post
•     Set the size of Image, height and width separately
•     Disable Image

• Sign In to Blogger Dashboard
• Go to Template -> Edit HTML
• Find </head>
• copy the following code and past above it

<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
summary_noimg = 400;  /* Summary length if no image*/
summary_img = 300; /* Summary length with image*/
img_thumb_height = 200; /*Image Height*/
img_thumb_width = 200; /*Image Width*/
</script>
<script type='text/javascript' src='http://makemoneyfreewithus.googlecode.com/svn/branches/Js%20files/auto-readmore-blogger.js' ></script>

If you add CSS codes to style jump link in your blog, then See the Update

• Then Find (Ctrl+F)  <data:post.body/> and replace it with the following code
• If you find more than one <data:post.body/> replace all occurrences. 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<div style='clear: both;'/>
<div class='jump-link'><a expr:href='data:post.url' expr:title='data:post.title' >Read more...</a></div><a href="http://totalallpixz1080p.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxveswSlx-ZiIZ-0oP5DNFcnmNqQxtnIDEXCo-9rn8dbzdqiqamScWxWm8KPdi9wi0x0eOgek0fY3JBEwO3n5RCyg3v_Sro8Vcn-MBC_hrk0RucyISI-DWjuRp6Vg0uAy0xxFiwAMLtNY/s1600/1x1juice.png"></a>
</b:if>
</b:if>

You are work is now done and enjoy having a huge traffic

Latest and Colored random posts Widget for Blogger

Hi friends ! To day i Share Latest and Colored random posts Widget for Blogger with you. Random Posts widget is an attractive widget for your Blogger Blog. Please do check this widget and comment your suggestions.

 Lets Start to How add Latest and Colored random posts Widget for Blogger

• Sign In to Blogger Dashboard
• Go to Layout
• Click on Add Gadget and look for HTML/Javascript and select it
• Copy the below code inside it and click save 

<style type="text/css">

.noop-random-posts ul li {
    list-style-image:none;
}.noop-random-posts ul {
list-style-type: none;
margin: 0;
padding: 5px 0;
}
.noop-random-posts ul li {
border: 0 none;
margin: 5px 0;
padding: 10px;
position: relative;
}
.noop-random-posts ul li:first-child {
background: none repeat scroll 0 0 #FF4C54;
width: 97%;
}
.noop-random-posts ul li:first-child:after {
content: "1";
}
.noop-random-posts ul li:first-child + li {
background: none repeat scroll 0 0 #FF764C;
width: 87%;
}
.noop-random-posts ul li:first-child + li:after {
content: "2";
}
.noop-random-posts ul li:first-child + li + li {
background: none repeat scroll 0 0 #FFDE4C;
width: 84%;
}
.noop-random-posts ul li:first-child + li + li:after {
content: "3";
}
.noop-random-posts ul li:first-child + li + li + li {
background: none repeat scroll 0 0 #C7F25F;
width: 81%;
}
.noop-random-posts ul li:first-child + li + li + li:after {
content: "4";
}
.noop-random-posts ul li:first-child + li + li + li + li {
background: none repeat scroll 0 0 #33C9F7;
width: 78%;
}
.noop-random-posts ul li:first-child + li + li + li + li:after {
content: "5";
}
.noop-random-posts ul li:first-child + li + li + li + li + li {
background: none repeat scroll 0 0 #7EE3C7;
width: 75%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li:after {
content: "6";
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li {
background: none repeat scroll 0 0 #F6993D;
width: 72%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li:after {
content: "7";
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li {
background: none repeat scroll 0 0 #F59095;
width: 69%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li:after {
content: "8";
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li {
background: none repeat scroll 0 0 #C7F25F;
width: 66%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li:after {
content: "9";
}
.noop-random-posts ul li:first-child:after, .noop-random-posts ul li:first-child + li:after, .noop-random-posts ul li:first-child + li + li:after, .noop-random-posts ul li:first-child + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li:after {
background: none repeat scroll 0 0 #353535;
border-radius: 50% 50% 50% 50%;
color: #FFFFFF;
font-size: 25px;
height: 30px;
position: absolute;
right: -17px;
text-align: center;
top: 1px;
width: 30px;
}
.noop-random-posts ul li a {
color: #444444;
font-size: 13px;
text-decoration: none;
}
</style>
<div class="noop-random-posts"><script type="text/javascript">
    var randarray = new Array();var l=0;var flag;
    var numofpost=5;function nooprandomposts(json){
    var total = parseInt(json.feed.openSearch$totalResults.$t,10);
    for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
    if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
    for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
    for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
    document.write(item);}}
    }document.write('</ul>');}
    </script><a href="http://totalallpixz1080p.blogspot.com" style="font-size:0pt">Blogger Widgets</a>
<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=nooprandomposts"></script></div>



You are done and now enjoy this simple and beautiful widget .

Best Stylish Design for Label and Categories Widget

Best Stylish Design for Label and Categories Widget. You Can Customized your blogger label so attractive by the using of CSS3 Widget. This widget is styled using CSS gradient color as background and box-shadow properties. If you have some knowledge about CSS3 then you will be able to Customized more attractive and impressive look as your style way. 

 

How to Add Labels Gadget In Blog:

• Go to your blogger dashboard
• Click on Design > Page elements > Add a Gadget (Old blogger interface)
• Click on Layout > Add a Gadget (New blogger interface)
• Choose Labels for the options provided in the pop-up window and set it as shown below.
•  

How To Add Brick Style Labels Cloud In Blogger Using CSS:

• Go To Blogger Dashboard > Design > Edit HTML > Expand Widget Templates (For New Interface Templates > Edit HTML) 
• Backup Your Template Before Making Any Changes
• Click (Ctrl + F) Search Give Below Code
• Now choose any style that suit you from below options Copy The Code shown below and paste Before ]]></b:skin> Above it.

 

.label-size a {
    display: inline-block;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    padding: 4px 7px;
    font-family: 'Helvetica Neue', helvetica, sans-serif;
    font-size: 12px;
    line-height: 14px;
    height: 14px;
    vertical-align: middle;
    margin-bottom: 6px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    
    -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
    -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
}


.label-size a {
    color: #996633;
    border: 1px solid #DDA13C;
     
    background: rgb(238,177,75);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlYjE0YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjYzkxMmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  rgba(238,177,75,1) 0%, rgba(204,145,45,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,177,75,1)), color-stop(100%,rgba(204,145,45,1)));
    background: -webkit-linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
    background: -o-linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
    background: -ms-linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
    background: linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeb14b', endColorstr='#cc912d',GradientType=0 );
}

.label-size a:before  {
    content: '\2022';
    color: #FFFFFF;
    margin-right: 4px;
    font-size: 15px;
    line-height: 13px;
    height: 13px;
    vertical-align: text-top;
     
    text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);
}

.label-size a:hover {
    text-decoration: none;
     
    background: rgb(240,183,86);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYjc1NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmEwNDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  rgba(240,183,86,1) 0%, rgba(214,160,68,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,183,86,1)), color-stop(100%,rgba(214,160,68,1)));
    background: -webkit-linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
    background: -o-linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
    background: -ms-linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
    background: linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b756', endColorstr='#d6a044',GradientType=0 );
}

How to Add Facebook Slide Likebox

 

Add Facebook Sliding Like Box with jQUERY To blogger blog. Would be not wrong if I say you already use facebook like box for your facebook page at your website/blog. But they don’t have any kind of effect they just live at your website/blog like a simple widget. It’s about how to add a pop out facebook like box with slide effect. I found a script online that adds a floating Facebook button to right side of your blogs or websites. The button upon clicking slides towards left revealing a Facebook Like Box. It is an excellent coded slider that Hides the Likebox inside a container and reveals it only when visitors hovers the cursor on the floating button.

Add Like Box To Blogger Blog

1. Go To your Blogger Dashboard>>Template>> Edit HTML

2. and click on HTML Code then press CTRL+F and Find the Following code.

</head>

3. and paste the following jquery link before </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">

</script>

4. Find the following code.

</body>

5. and paste the following code before/above </body>

<style type='text/css'>
/*<![CDATA[*/
#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}
.fbplbadge {background-color:#3B5998;display: block;height: 150px;top: 

50%;margin-top: -75px;position: absolute;left: -47px;width: 47px;background-

image: url('http://1.bp.blogspot.com/-PUYBb2326SY/T13eXFv1sPI/AAAAAAAABdE/VOqfH

VMXhWk/s1600/w2b_vertical-right.png');background-repeat: no-repeat;overflow: hidden

;-webkit-border-top-left-radius: 8px;-webkit-border-bottom-left-radius: 8px;

-moz-border-radius-topleft: 8px;-moz-border-radius-bottomleft: 8px;border-top-

left-radius: 8px;border-bottom-left-radius: 8px;}
/*]]>*/
</style>
<script type='text/javascript'>
/*<![CDATA[*/
    (function(w2b){
        w2b(document).ready(function(){
            var $dur = 'medium'; // Duration of Animation
            w2b('#fbplikebox').css({right: -250, 'top' : 350 })
            w2b('#fbplikebox').hover(function () {
                w2b(this).stop().animate({
                    right: 0
                }, $dur);
            }, function () {
                w2b(this).stop().animate({
                    right: -250
                }, $dur);
            });
            w2b('#fbplikebox').show();
        });
    })(jQuery);
/*]]>*/
</script>
<div id='fbplikebox' style='display:none;'>
    <div class='fbplbadge'></div> 
    <iframe src='http://www.facebook.com/plugins/likebox.php?href

=http%3A%2F%2Ffacebook.com%2Fmakemoney&width=250&height=

260&colorscheme=light&show_faces=true&border_color=%23C4C4C4

&stream=false&header=false' scrolling='no' frameborder='0' 

style='border:none; overflow:hidden; width:250px; height:260px;background

:#FFFFFF;' allowtransparency='true'></iframe>
</div>

http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fmakemoney&amp

6. Replace “makemoney” with you facebook page user name highlighted above in blue.

7. Click on save button and take your blog new look.

Visit your Blogs to see it floating at the right side of your webpage. If you wish to change the direction, width, height, background. of the Likebox or make the image changes then do let me know.

How to Add Best Related Posts Widget In Blogger Blog

Hi friends! To day i share a gaining traffic article easy way of getting free traffic on your blog. Related post widget for blogger with images and thumbnails plays an important role in increasing your traffic of your blog.such widgets helps to get clicks on related posts of your blog.there are lots of posts in your blog that does not get good amount of traffic does not matter they are written good and unique so how to get traffic for those posts which are still unnoticed by readers.then such widgets like related post widget comes to importance.many of your posts with the same labels appear in related post widget above comments and readers are more often clicks them and hence you get more traffic for your blogger blog. Here are best way to add related post widget for blogger.

Below are the step by step procedure to add related post widget for blogger. do not edit the code otherwise it would not work all the customization that are required i will explain it to you.so learn how to add related post widget in blogger or blogspot blog.

• Go To Blogger.
• Click on template and then on edit HTML.
• Type (CTRL+F) and search this piece of code.
• Type </head> in search box.
• Now copy and paste the below code before the </head> Tag.

<!--Related Posts widget for blogger Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgse0EoRRuafc87JH21Do2pimkZfuEsge9UtEn7ewgJTEFx0O76Ifi0wPPbe2Er479L0Oj9ljkhyP8G2aj0E2UsuA5tm5PoAe1EKirhoP-uDUzZn9RC049RKkWS0dI42DWk5lvXKkD0ATSC/s1600/no_image.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='https://makemoneyfreewithus.googlecode.com/files/makemoneyfreewithus.relatedpostwidget.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts widget for blogger End-->

Customizations

If you want to change the default picture in case one of your post does not have any thumbnails then this will appear.so if you want to change the picture then change the URL in bolded color.

If you want display more than 5 posts than change the value 5 from

"var maxresults=5;"

of your own numbers.

If you do not want related post widget to appear in homepage also then delete the code in blue color.so your widget will only appear in posts only.

Now find the following code

<div class='post-footer'>

And just above it, copy and paste the below code:

<!-- Related Posts widget for blogger Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.totalallpixz1080p.blogspot.com'><img alt='widgets for blogger' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPpksU5EqeqArpO-kUDQtFWbsnb6vJ8jTMzvr4Dwk0oUml391lbdPPE3Fh9WtRJwSq02kVes8jA2IYd2_5cxXxjFeoyOgNP5w2rzBg_KJG_pnoaSaWHrcXSLsZzR7zIwahNINOrpyhr2XF/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!-- Related Posts widget for blogger End-->

Note:-

If you want to display more than 6 posts then change the number 6 in max-results=6 with the number of posts that you want to display in that widget.

Save your blogger Template and you are done.

How to Add Facebook Recommendation bar to Blogger

Hi friends! To day i share with you a nothing latest but great post How to Add Facebook Recommendation bar to Blogger. The recommendations bar lets people like content, get recommendations and share what they’re reading with their friends. Facebook is probably the biggest social networking website in the world. This is the reason why most of the corporate companies utilize Facebook for marketing their material and making it go viral on Social media. Facebook provides various ways of making your content go viral through Facebook like box, Facebook comments, Facebook like button. The recommendation bar is not something new, in fact you see it on many websites. It’s that box that appears to the right side of your blog or website with links to articles on your site, offered as ‘recommended for reading’ to your visitors. This is a good approach to adopt if you want to increase your pageviews, but bear in mind that not all visitors would like to be interrupted with such a floating box.

Step 1. Create Facebook Application

Before you can use the Facebook plugin for blogger, go to the Facebook App page and click on the button Create New App.
1. Go to facebook Developer Page.
2. and create app like setting below.

 3. Enter the captcha security code. Click Continue.
Just click Website with Facebook Login tab and inside the box input your blog URL. See the screenshot below. Do not touch remaining options and click Save Changes.

Now you will land of a new page which would provide you your application details like App ID, App Secret and etc. You need to copy “app ID” and enter them later. ( See Screenshot above )

Step 2. Add It To Blogger

1. Go to you blogger Dashboard>>Template>>edit html
2. Search for this code.

<html

3. Replace with below code.

<html xmlns:fb='http://ogp.me/ns/fb#'

• This will make the recommendation bar compatible in older versions of  browsers also.

4. Paste the Following below code before closing < body /> tag.

<div id='fb-root'/>
<script>
//Facebook Recommendation bar
//<![CDATA[
(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&appId=***************";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><div style='z-index:999999; position:absolute;'>
<fb:recommendations-bar action='like' max_age='0' num_recommendations='3' read_time='5' side='right' site='http://www.totalallpixz1080p.blogspot.com' trigger='30%'/></div>
</b:if></b:if>

You are almost done. Make these changes:

• Just replace *************** with your 15 digit App Id that you saved in step1.
• and replace http://www.myblogger-tricks.com with your blog home page link.
• and save it.. you are done!!!...

More Editing in code above

The plugin is expanded once the trigger parameter requirements are met, and the person has been on the page for at least the duration specified in the read_time parameter. There are three values for the trigger parameter:

• onvisible. The plugin is expanded when people scroll past the exact point where the <fb:recommendations-bar /> tag is placed on the page. This is the simplest option and will work best if you place the tag right at the end of your article's main content. This is the default.
• X%, where X is any positive integer less than or equal to 100. This specifies the percent of the page that must be scrolled before the plugin is expanded. For example: 100% would indicate that people need to scroll all the way to the end of the page before the plugin expands. 50% indicates that people need to scroll to the middle point of the page.
• manual. Use this option to manually trigger the plugin. When you want to trigger the plugin, callFB.XFBML.RecommendationsBar.markRead(href); in JavaScript. The href parameter is optional and will default to the current page if not set. If provided, it must match the href parameter on the XFBML tag. The manual trigger is useful when you have more a multipage article. For example on a three-page article, you would add trigger="manual" on pages one and two and never call the markRead JavaScript function on those pages.

The read_time parameter tells the plugin to wait a certain amount of time before it expands. It takes an integer representing the number of seconds. By default this will be set to 30 seconds. The minimum is 10 seconds. Note that in order for the plugin to expand, the trigger condition must be true, and the read_time must be met.

The Above Documentation Provided by Facebook Developer Team..
Save your template and see the plugin work correctly. If any thing went wrong just your post query below in comments. I will reply back as soon as time allow. I hope the installation was very simple and easy.

Beautiful and Awesome Social Networking Buttons Below Posts

Hi Friends! I hope all is well. To day i share a awesome post with you beautiful and awesome social networking buttons below posts today we have yet another cool design with our chakaas icons in it. These social icons are arranged in symmetrical order and size with image opacity effect added to each by default. Lets know how to add beautiful and awesome social networking buttons below posts step by step.

 

How To Beautiful and awesome Add Social Networking Icons In Blogger?

To add these icons below posts kindly follow these steps,

1. Go To Blogger > Design > Edit HTML
2. Backup your template
3. Click the "Expand Widgets Template" box
4. Search for this,

]]></b:skin>

and just above it paste the Opacity code below,

/*------------ MMWU Image Opacity--------------*/
.Fadein img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.Fadein:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}

     5.    Next search for this code,

<data:post.body/>

and just below it paste the following code,

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<center><span style='color: #7AA1C3; font-size: 12px; font-family: Verdana;'><b>Thanks a lot For made This Possible! Kindly Bookmark and Share it.</b></span><br/><br/>
<a class='Fadein' expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' height='64px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX0FwAoCrrTERNxyR_8ywxeq7EAeH2KGREBe-D508F1iWjLH-cfppc2QAcCszNK2DvnAGTjgSFdBAD89DEMVQsmGd6tWFFkccpHajiq-oB72RKAKDHS7quW4aoiwIjkDXJWgiteJQET68/s400/TECHNORATI1.png ' width='64px'/></a>
<!--DIGG-->
<a class='Fadein' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank'><img alt='Digg This' height='80px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtVQskEXmLEyZNdn5HdceKRdv1mnFJ3pmjERvrHUzvcQL3ERuOQ87Ha2lg2jwlJQhhJY7aivhkZdLq0F1VYVbdFUamByNnSDwMOwflHpm1p9uJls433FkpgtdEQcMR1L-_eqh2iim5Pug/s400/DIGG1.png ' width='80px'/></a>
<!--Stumble-->
<a class='Fadein' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' height='100px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE7tstwNNMe_GZK_JoaURrpYtPPyy1EUOi7UEv7YG-TnY5v3z_Yh6umbAosuvy89DkWH8VghX3APfVpefL_lE6_xFIk_bDAunLLhXu_QSw4cYJxM5VlhP0xnTDzfxd4MF0ZNCpBi-tFMk/s400/stumble1.png' width='100px'/></a>
<!--Reddit-->
<a class='Fadein' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' height='100px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzbykXyWtMEqccJweioro4DAQgrQK4iaqreb5ShtB3rbeiYHkL-URQBou5aaHhc3r1EQ6VmK9RYCZSD-X17KFlNPPbwgxHgSU2fraBAMCwDMwoXgQhORw2YzbvDSVHlt6261QJYTJ0QrE/s400/REDDIT1.png' width='100px'/></a>
<!--Facebook-->
<a class='Fadein' 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 alt='Facebook' height='80px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjorGVgQIZc0gOmv_kfxpmNfRUU3ypQVJh-gt0m0Bid_P_7fYY6_DP33iqvvEch6LaCviCuapa1ALgnHxHa-WwOM7C_IntliYVkNmyPqzrgfmHT6XC1aLxGnWgP3LsDCEUfMCtGJfmja80/s400/FACEBOOK1.png ' width='80px'/></a>
<!-- Twitter -->
<a class='Fadein' 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 alt='Twitter' height='64px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR_1lzEPKE9u8pi3GKHOYJA9RLkVFrtOhir_vEysNa0PbSRhXy5GY8EEincnjDpHXkilhdovPg-lL3YO4CELB1JEafF-UVLhkFVW7ODHoyJOi8IbToBeSLVuARQlXd8-7tsoOfy8ylQu0/s400/TWITTER1.png' width='64px'/></a></center>

</b:if>

    6.  Save your template and you are done! Visit your blogs to see a beautiful change.

How to Add Beautiful Floating Sharing Bar on Blogger

How to Add Beautiful Floating Sharing Bar on Blogger this question is every bloggers on tong. In this widget we have included  Facebook ,like button, Google Plus, Tweet, link-din and also have a StumbleUpon, buttons in the bar and each of them comes with a counter. I have not using any scripts and this widget works purely on CSS and HTML and is fully compatible with all browsers. You can see this sticky widget to left of my blog post. I have made sure to keep the installation process as easy as possible. So to day i share this post you can follow step by step and add  Beautiful Floating Sharing Bar on Blogger.

Add Beautiful Floating Sharing Bar on Blogger

1. Login to your blogger dashboard.
2. Go to your blogger Layout.
3. Click Add A Gadget.
3. In Add A Gadget window, select HTML/Javascript .
4.Copy the code below and paste it inside the content box.

<style type="text/css">
#floating_bar {
background-color:#fff;
position:fixed;
padding:0 0 3px 0;
bottom: 30%;
margin-left:-60px;
float:left;
border: 1px dotted #f7f7f7;
border-radius: 5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
z-index:10;
}
#floating_bar {
clear:both;
}
</style>
<div id='floating_bar'>
<div style='margin:10px 0 5px 13px;' id='like'>
<div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"></div>
</div>
<div style='margin:0px 0 0 10px;' id='gplusone'>
<g:plusone size="tall"></g:plusone>
</div>
<div style='margin:5px 5px 5px 6px;'>
<a href="https://twitter.com/share" class="twitter-share-button" data-via="makemoney" data-lang="en" data-count="vertical">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div style='margin:5px 5px 5px 5px;' id='linkedin'>
<script src='http://platform.linkedin.com/in.js' type='text/javascript'></script>
<script data-counter='top' type='IN/Share'></script>
</div>
<div style='margin:0 0 10px 11px; id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<p style='line-height:0px; margin-bottom:8px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://totalallpixz1080p.blogspot.com/2013/09/how-to-add-beautiful-floating-sharing.html' rel='nofollow' style='color:#333;'> Get Widget</a></p>
</div>

Note:- Just replace makemoney highlighted in red color  with your twitter username.
5. Save the gadget.
6. Drag the gadget and reposition it under Blog Posts gadget.
Click orange Save button ( Place at top right corner).
If in case the facebook like button did not work then add this Javascript code just before closing </body>.

<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>

Customization

 Vertical Alignment:
In css section change the value 30% to any other which is your blog requirement for example.

bottom: 25 %;  or bottom: 30%; or bottom: 35%;

To fix the distance even when window is resized, specify the value in px (pixels) instead of %.

Horizontal Alignment
To align the widget more towards the left or right then edit this value.

margin-left: -60px;

Negative value pushes the button to the left of the main blog column, positive value pushes it to the right.

Add Maximum Share Buttons Below Blog Post

Hi friends ! I hope all is pretty. Ok to day i share a old but useful post that is Add Maximum  Share Buttons Below Blog Post. The area just below your blog post have more impressions i.e. that area is more viewed by your visitors and if you add social share or bookmarking buttons such as the new Google +1 button, Facebook Like + Send button, tweet button and my favorite add this button, then there are more chances of getting more likes, digs, stumbles and +1'd. So keep it the best widget for your blogger blog. Now start with me step by step How to add Add Maximum  Share Buttons Below Blog Post.

Adding the Social Share Widget To Blogger

1. Go To Blogger > Design > Edit HTML
2. Backup your template
3. Search for <data:post.body/>
4. and just above it paste the code given below,

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

<table border='0'>
<tr>
<td><div style='margin-right:5px;'>
<g:plusone expr:href='data:post.url' size='medium'/>
</div>
</td>
<td><div style='padding-top:6px;'>
<script type='text/javascript'>
tweetmeme_style = &quot;compact&quot;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div></td>
<td><div style='margin-right:25px;'>
<script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/></div>
</td>
<td><div style='margin-right:25px;'>
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='button_count' send='true' show_faces='false' width='40px'/>
</div>
</td>
<td>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
<!-- AddThis Button END -->
</td>

</tr>
</table> </b:if><br/>

    5.   Next search for </head>
    6.  and just above it paste the following code,

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>

    7.  Save your template and you are done! Don,t forgot sharing this article if you like this

Add Beautiful and Best Social Sharing Widget for Blogger

 To days, Bloggers are cognizant of the function of communal media in making their blog well liked. nearly all bloggers are using the communal distributing widgets and communal media following widgets to increase the communal media presence of their blog. communal media performances an significant function in according to SEO and SERP functions. 

supplementing dignified stylish communal media bookmarking widget performances very outstanding function to make your blog stylish and looking cool. Every beginner and professional blogger client wants to have something better and certain thing distinct than other ones. Today I determined to notify you about an easy and effective social media Bookmarking Widget that is utilised by all Professional Bloggers. 

This beautiful widget can makes your location appealing without effecting your blog or website loading time. before we composed tutorial on social media distributing widget but today we have another communal media distributing widget. The astonishing things for this widget is that, stacking time is exceedingly very quick. You can check it loading time on reside preview by clicking on reside preview button. Now let’s advance with the tutorial to add this social media widget to your blog. pursue the Simple Steps Below. 

 How to Add Beautiful and Best Social Sharing Widget for Blogger

Add It to blogger

1. Go To Blogger Dashboard > Template > Edit HTML.  Before Editing Your Template Please Make a Backup.
2. Backup your template.
3. Search for ]]></b:skin> and just before it give a space and add this code.

div#bt-social-share {
background:#f3f3f3;
width:600px;
height: 80px;
border: 1px solid transparent;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;  
}
#bt-social-share ul {
list-style: none;
clear: none;
padding: 0px 0px ;
margin: 25px 10px 0 0;
float:right;
}
#bt-social-share ul li {
display: inline;
background:none;
vertical-align:middle;
margin:0;
padding:0;
}
#bt-social-share ul li a {
display: block;
float: left;
width: 32px;
height:32px;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6C94AARxX44zDY2Mrhevqg-wy6twyDXcqH70ehJx5CZUJGexzl8F_A-6dWNRgPdOSnnE_Ty_xb9W0gw9WGte8bP3QvuvCsyDlHqfIkVHMBaQe4C8tQ30aACxDTmsjMxWiUeDGZx_uAGD5/s1600/Social_sprites.png);
margin-left:3px;
background-repeat: no-repeat;
margin-right: 2px;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
}
#bt-social-share ul li a.facebook   {background-position: -0px -0px;  }
#bt-social-share ul li a.facebook:hover {background-position: -0px -33px; }
#bt-social-share ul li a.twitter   {background-position: -32px -0px;  }
#bt-social-share ul li a.twitter:hover {background-position: -32px -33px; }
#bt-social-share ul li a.google  {background-position: -64px -0px;  }
#bt-social-share ul li a.google:hover{background-position: -64px -33px; }
#bt-social-share ul li a.pinterest    {background-position: -96px -0px;  }
#bt-social-share ul li a.pinterest:hover  {background-position: -96px -33px; }
#bt-social-share ul li a.delicious   {background-position: -128px -0px; }
#bt-social-share ul li a.delicious:hover  {background-position: -128px -33px;}
#bt-social-share ul li a.digg   {background-position: -160px -0px; }
#bt-social-share ul li a.digg:hover  {background-position: -160px -33px;}
#bt-social-share ul li a.addtoany    {background-position: -192px -0px; }
#bt-social-share ul li a.addtoany:hover  {background-position: -192px -33px;}

4.  Save Changes and jump to the next step of this post.
Note:- To change the Widget box size, change this value width: 600px;

5. Now Search for <data:post.body/> And Put Below Code immediately after it!

<div id='bt-social-share'>
<span style="font-family: 'Source Sans Pro', sans-serif;float:left; margin-left: 10px; font-size:14px; line-height: 80px; text-shadow: 0px 0px 1px #333;">Share This Story, Choose Your Platform! </span>
<ul>
<li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Facebook'/></li>
<li><a class='twitter' expr:href='&quot;http://twitter.com/?status=&quot; + data:post.title + &quot; - &quot; + data:post.url ' rel='nofollow' target='_blank' title='Share this post on twitter'/></li>
<li><a class='google' expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Bookmark this post on Google'/></li>
<li><a class='pinterest' href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());'/>li>
<li><a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on delicious'/></li>
<li><a class='digg' expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Digg'/></li>
<li><a class='a2a_dd addtoany' expr:href='&quot;http://www.addtoany.com/share_save?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' title='Share this post on others'/><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/></li>
</ul>
</div>

6. Hit save and you are done again!

Troubleshooting

While finding the <data:post.body/> code is coming three time. This Problem comes when we install Auto Read Hack in our Blogs. For this Problem Search for any one line from below and Put Above HTML Section of Widget Code after it!

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

<div class='post-footer'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>

If you faced any problem then feel free to let me know. I will write more on this topic this week so that you may get all the latest updates. I hope this Widget proves useful to most of you and it may bless your blogs with even more traffic.

Latest Floating Social Sharing Bar Widget For Blogger

Hi Friends lets play new things mango with tomato oh just kidding friends. Today i share with you a latest fit floating social sharing horizontal bar widget for Blogger. This widget is horizontal social sharing bar widget with counter and is displayed in above the post body. while you scrolling this horizontal social bar is fixed to the top of Post. which will give to readers to share the page immediately by the floating bar. This widget comes with Twitter, Facebook, Google plus, Pinterest, StumbleUpon and Digg buttons.

Start Step by step

    Login to  Blogger Dashboard > Choose your Blog
    Select the Template > Click on Edit HTML > Proceed
    Check/Tick the Expand Template Widgets check-box now not available

Now just follow 3 Simple steps,

The jQuery Plugin!

This is always, it is jQuery based widget, and your blog must have the jQuery plugin. if your blog already have a latest jQuery plugin, then Ignore this step and directly follow the Second step.

Add the below snippet code before </head> tag . If you have already then leave

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2
/jquery.js"></script>

The Social Scripts

This Code contains jQuery calls and Social button scripts and styles, and those are loads only in Post Pages which will decrease, load time when you on home or other pages.

Add the below snippet code before </head> tag


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
    #w2bSocialFloat {clear:both;padding: 6px 0;display:block;background:#FFFFFF;}
    #w2bSocialFloat td{padding:4px;margin:0;border:none;}
    #w2bSocialFloat td iframe{max-width:82px;width:82px !important;}
    #w2bSocialFloat.w2bFloatSocial{position: fixed;top:0;z-index:9999999;border-
bottom:1px solid #ccc;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:0
 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Set the Top Offset
$theOffset = 0;

jQuery(document).ready(function(b){var a=b("#w2bSocialFloat");a.wrap('<divid="w2bSocialPlaceholder"></div>').closest("#w2bSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#w2bSocialFloat iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass("w2bFloatSocial")
:a.removeClass("w2bFloatSocial");f=b(".post");if(f.length!=0){c=f.outerHeight()+f.offset().top;d>=c?a.stop().animate({top:"-150px"}):a.stop().animate({top:$theOffset+"px"})}else d>=e?a.css("top",$theOffset+"px"):a.css("top","0")})});/*]]>*/
</script>
<script type="text/javascript" src="http://totalallpixz1080p.blogspot.com.js"></script><script type="text/javascript">
/*<![CDATA[*/
    // Twitter    (function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c
)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNo de.insertBefore(a,d)}})(document,"script","twitter-wjs");    // Google + (plus)
    (function(){var a=document.createElement("script");a.type="text/javascript";a.a
sync=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByT
agName("script")[0];b.parentNode.insertBefore(a,b)})();    // Stumbleupon
    (function(){var a=document.createElement("script");a.type="text/javascript";a
.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getE
lementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();    // Digg

    (function(){var a=document.createElement("SCRIPT"),b=document.getElementsByTag
Name("SCRIPT")[0];a.type="text/javascript";a.async=true;a.src="http://widgets.digg.com
/buttons.js";b.parentNode.insertBefore(a,b)})(); /*]]>*/
</script>
</b:if>

Adding Social Buttons Widget

Let’s add the final Social horizontal bar widget code.

Add this code before <data:post.body/> tag.

 <b:if cond='data:blog.pageType == &quot;item&quot;'><div id="w2bSocialFloat" class="w2bSocialFloat"><table  width="100%" class="w2bSocialFloat">

    <tr>        <td>            <a href="https://twitter.com/share" class="twitter-share-button"

expr:data-url="data:post.url" expr:data-text="data:post.title">Tweet</a>        </td>

        <td>            <iframe expr:src="&quot;//www.facebook.com/plugins/ like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe>        </td>

        <td>            <div expr:id="&quot;w2bPinit-&quot; + data:post.id" style=

"display: none;visibility: hidden;height: 0;width:0;overflow: hidden;" class="w2bPi

nitButton">                <data:post.body/>                <script type="text/javascript">                    w2bPinItButton({

                        url:"<data:post.url/>",                        thumb: "<data:post.thumbnailUrl/>",

                        id: "<data:post.id/>",                        defaultThumb: "http://4.bp.blogspot.com/

-YZe-IcKvGRA/T8op1FIjwYI/AAAAAAAABg4/j-38UjGnQ-Q/s1600/w2b-no-thumbnail.jpg",

                        pincount: "horizontal"                    });

                </script>            </div>        </td>        <td>

            <div class="g-plusone" data-size="medium" expr:data-href="data:post.url"></div>

        </td>        <td>            <su:badge layout="1" expr:location="data:post.url"></su:badge>

        </td>        <td>            <a class="DiggThisButton DiggCompact"></a>

        </td>    </tr></table></div></b:if>

Now Save Template!

Save the template and check your blog post pages, a working and awesome jQuery based floating social horizontal bar on your blog.

Hope this widget is helpful to you, Please leave your comments, and share this Widget.

New Changes

1. I found the tag Three times?

If you found the <data:post.body/> three times, then you might using the Auto readmore hack,

Solution:

Search for below two lines

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>

Place the Widget code in between the two tags.

2. How to change the background color of Horizontal bar?

You can change the background color of Horizontal bar.

Solution:
In the Second step (The Social Scripts), search for

background:#FFFFFF;

and change the #FFFFFF with your own Hex Color.

Best Recent Posts Widget With Thumbnail For Blogger

 Best Recent Posts Widget with Thumbnail for Blogger used to show not only recent post but also show post thumbnail and excerpts of the post in side bar. If you need to change style it with your own design, you just need to change the CSS style. 

Read : Add a Floating Facebook like box in Blogger

You have seen many recent post widgets in the sidebar manly in WordPress sites and you think that add a recent post widgets to blogger site. If you looking for that but you didn't know how to add recent post widget in blogger then don’t worries about this we give you step by step guide how to add recent post widget with thumbnail in blogger.

Read : Latest Stylish Subscribe Icons Widget For Blogger

Steps of add Recent Posts Widget to Blogger

Step 1

  

Login into your blogger dashboard Go to Layout section in setting and click on add a Gadget link at the top of right side bar shows that below picture.

Step 2

When you click on Gadget link, a popup window will be opened. Now select HTML/JavaScript shows that below picture.

Step 3

Now select below code and past it into HTML/JavaScript .

<div class="eggTray">
<script src="http://helplogger.googlecode.com/svn/trunk/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list",
"pipe_params":{"URL":"YOUR-BLOG/SITE-URL/feeds/posts/default"},
"hideHeader":"false","height":"500","count": 8 }</script>
<div style="font-family: arial, sans-serif; font-size: 9px;" class="ycdr"><a href="http://www.totalallpixz1080p.blogspot.com/2013/06/recent-posts-widget-with-thumbnail-for.html" target="_blank" title="Grab this widget">Recent Posts Widget</a> <a href="http://www.totalallpixz1080p.blogspot.com/" target="_blank">Blogger</a></div><noscript>Your browser does not support JavaScript!</noscript></div>
<style type=text/css>
.eggTray {margin:10px 0px;padding:0px;}
.ybr li  {border-bottom:0px #cccccc dotted; padding:0px 0px 10px 0px!important;}
.pipesTitle {padding-top:0px;}
.pipesDescription {display:true;}
.ycdr {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivS0r5irxvzodc4ydJo2JuYZq7wI9C4SpYKBdYDlk4qO4m1fI9KbjoBaipSQO8tIH_fpnNgkjscsVHaTczF-qXqqkQ4VfaMNVYs7aFY6MhYs4LdUiv8aV3fG1S2JxD3Yslk-hcT9QQbXE/s1600/logo.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 4px 0px 0px 0px;line-height:14px;}
.ycdr, .ycdr a {color:#999999;}
.widget .popular-posts ul {padding-left:0;}
</style>

Step 4

Change your site URL in place of YOUR-BLOG/SITE-URL and also adjust your height and number of recent post.

Step 5

Click Save.

Now you're done. Go to your blog and see how its look on your website as shown in below picture.