Tricks2Blogging

How to Make page number in Blogger

1. Go to Design 
2. Page Element
3. Click Add Gadget and select HTML/Javascript
4. Paste below code

<style type='text/css'>

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
border:1px solid #aeaeae;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageNum a:hover {
background-color:#0a8be5;
border:1px solid #000000;

}
.showpagePoint {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#aeaeae none repeat scroll 0 0;
border:1px solid #aeaeae;
color:#333333;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageOf {
margin:0 3px 0 0;
padding:3px 7px;
text-decoration:none;
}
.showpage a {
border:1px solid #aeaeae;
padding:3px 7px;
text-decoration:none;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link, .showpage a:link {
color:#333333;
text-decoration:none;
}

</style>


<script type='text/javascript'>

var home_page_url = location.href;

var pageCount=1;
var displayPageNum=3;
var upPageWord ='Previous';
var downPageWord ='Next';

function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);

var title = post.title.$t;

if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
  thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;
}
}
itemCount++;

}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
 upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}else{
 upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
  html += '<span class="showpageNum"><a href="/">1</a></span>';

}else{
 html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}

if(thisNum>1){
html = ''+upPageHtml+' '+html +' ';
}

html = '<div class="showpageArea"><span  class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += '</div>';

var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}

}

function showpageCount2(json) {

var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
var thisUrl = home_page_url;

for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);

var title = post.title.$t;

if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
 thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;

}
}
itemCount++;
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
 upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
 upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
 html = labelHtml+'1</a></span>';
}else{
 html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}

if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span  class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += '</div>';

var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}

}

</script>
<script type='text/javascript'>

var thisUrl = home_page_url;
if (thisUrl.indexOf("/search/label/")!=-1){
if (thisUrl.indexOf("?updated-max")!=-1){
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));
}else{
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));
}
}

var home_page = "/";
if (thisUrl.indexOf("?q=")==-1){
if (thisUrl.indexOf("/search/label/")==-1){
document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')
}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')
}
}
</script><a href='http://bit.ly/t2Blog'>_</a>

Now SAVE it...EnjoyComment If Any Problem

How To Awesome Floating Sharing Horizontal Bar for blogger

1. Goto blogger dashboard 
2. Template ->Backup template [Recommended]
3. dashboard ->Template
4. Edit Template -> Expand  

<b:includable id='post' var='post'>

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style>
.hb_social_floating {
    position: fixed;
    bottom: 10%;
    margin-left: -60px;
    float: left;
    width: 60px;
    background-color: #f7f7f7;
    padding: 5px 0 0px 0px;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    z-index: 9999px !important;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.hb_social_floating .hb_side_social_button {
    margin-bottom: 5px;
    float: none;
    height: auto;
    width: 60px;
}

.hb_social_floating .st_twitter_vcount, .hb_social_floating.st_plusone_vcount, .st_email {
    margin-left: 5px;
}

.hb_social_floating .st_fblike_vcount {
    margin-left: 5px;
}

.hb_social_floating .stButton_gradient {
    background: none !important;
    height: 21px !important;
    padding-left: 0 !important;
}

.hb_social_floating .chicklets, .hb_social_floating .stMainServices {
    background: url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_rtuS9EexnXZFH3gTcRr9r7cZ44ogqN7kJgrBjLnh8hGu3HjjgrzWTmx6Ws-7o07qssKXdRn1opYbaSL1ahxnZxJH3fH76aMrTXfMSuyBP5yFt28WYDQ4F9CE9bvom-___VCmPpFQ6-U/s1600/gc_social_sprite.png&#39;
    ) no-repeat !important;
    height: 19px !important;
    width: 45px !important;
    padding: 0 !important;
}

.st_email .chicklets {
    background-position: 0 -77px !important;
    background-image: url(&#39;
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_rtuS9EexnXZFH3gTcRr9r7cZ44ogqN7kJgrBjLnh8hGu3HjjgrzWTmx6Ws-7o07qssKXdRn1opYbaSL1ahxnZxJH3fH76aMrTXfMSuyBP5yFt28WYDQ4F9CE9bvom-___VCmPpFQ6-U/s1600/gc_social_sprite.png&#39;
    ) !important;
}

.hb_social_floating .st_twitter_vcount .st-twitter-counter {
    background-position: 0 -58px !important;
}

.hb_social_floating  .stButton_gradient {
    border: none !important;
}

.hb_social_floating .stBubble_count {
    width: 44px !important;
    font-size: 15px !important;
    font-weight: normal !important;
    padding-top: 7px !important;
    height: 23px !important;
    background: none !important;
}

.hb_social_floating .st_twitter_vcount .stBubble_count {
    color: #00a6df;
    background-color: #f8fbfc !important;
}

.st_fblike_vcount {
    margin-bottom: 0px;
    display: block;
}

.st_twitter_vcount {
    margin-bottom: 3px;
    display: block;
}

.st_email {
    margin-bottom: 5px;
    margin-top: 3px;
    display: block;
}

.hb_social_floating .stBubble {
    background-position: 21px 31px !important;
    height: 35px !important;
}
</style>

<div class='hb_social_floating'>
 <script type='text/javascript'>var switchTo5x=true;</script>
 <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
    <script type='text/javascript'>stLight.options({onhover:false});</script>
 <span class='st_fblike_vcount' displaytext=''/>
 <span class='st_twitter_vcount' displaytext='' st_via='twitter_name'/>
 <div style='margin:5px 0 0px 0;'>
  <center><a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
  <a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>
  <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;);
e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
document.body.appendChild(e);
}
  </script>
  </center>
 </div>
 <div style='margin:0px 0 0 5px;'>
  <span class='st_plusone_vcount' displaytext=''/>
 </div>
 <div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
  <a class='addthis_counter'/>
 </div>
 <script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
     ui_cobrand: &quot;Helper Blogger&quot;,
ui_header_color: &quot;#ffffff&quot;,
     ui_header_background: &quot;#CF152A&quot;
}
 </script>
 <span class='st_email' displaytext=''/>
 <p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'>
  <a href='http://www.tricks2blogging.blogspot.com/' style='color:#CAC8C8;'>Widgets</a>
 </p>
</div>
</b:if></b:if>

REplace the Twitter Name With Your Twitter NameComment If you have any suggestion Or problem

Add awesome  Scrolling Recent Posts Widget For Blogger

1. Go to Blogger Dashboard -> Template
2. Click on Edit HTML
3. Click Proceed button
4. Then
5. Find below code in your template

</head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

<style type="text/css" media="screen">
<!--

/* ========== Scrolling Recent Posts Widget By www.tricks2blogging.blogspot.com ======== */

#tricks2blogging-widget {
    overflow: hidden;
    margin-top: 5px;
    padding: 0px 0px;
    height: 385px;
}

#tricks2blogging-widget ul {
    width: 295px;
    overflow: hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin: 0px 0px;
}

#tricks2blogging-widget li {
    width: 282px;
    padding: 5px 5px;
    margin: 0px 0px 5px 0px;
    list-style-type: none;
    float: none;
    height: 80px;
    overflow: hidden;
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFhENPCWH2Bv07Hy380aiciJWo36FxTIi9Zw-qjq6jG68aS0rdFdqXtunDXXls2i_auxOZeUVsH3m0v5TGUW9Y4w-9WhN-nnJkySR3SDcdez_COJpmsU1IlQOrInAZ0d598vgIU_8_l8o/s1600/blogger-post.jpg) repeat-x;
    border: 1px solid #ddd;
}

#tricks2blogging-widget li a {
    text-decoration: none;
    color: #4B545B;
    font-size: 15px;
    height: 18px;
    overflow: hidden;
    margin: 0px 0px;
    padding: 0px 0px 2px 0px;
}

#tricks2blogging-widget img {
    float: left;
    margin-top: 10px;
    margin-right: 15px;
    background: #EFEFEF;
    border: 0;
}

#tricks2blogging-widget img {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    padding: 4px;
    background: #eee;
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
    background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
    -moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
    box-shadow: 0 0 3px rgba(0,0,0,.7);
}

#
tricks2blogging-widget img:hover {
    -moz-transform: scale(1.2) rotate(-350deg);
    -webkit-transform: scale(1.2) rotate(-350deg);
    -o-transform: scale(1.2) rotate(-350deg);
    -ms-transform: scale(1.2) rotate(-350deg);
    transform: scale(1.2) rotate(-350deg);
    -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}

.spydate {
    overflow: hidden;
    font-size: 10px;
    color: #0284C2;
    padding: 2px 0px;
    margin: 1px 0px 0px 0px;
    height: 15px;
    font-family: Tahoma,Arial,verdana, sans-serif;
}

.spycomment {
    overflow: hidden;
    font-family: Tahoma,Arial,verdana, sans-serif;
    font-size: 10px;
    color: #262B2F;
    padding: 0px 0px;
    margin: 0px 0px;
}

/* ========== Scrolling Recent Posts Widget By www.tricks2blogging.blogspot.com
 ======== */

-->
</style>

<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDI3HkDBnJZ9lCavLsJkVs07ZZZRTm-rqh-Cnxga_Js9QFQMcD-E5WXbYm1bhZewq2vsELH75ye1AXd9o5QWdFprsARsMtj04nANPbd4hFeah4sgEbC4vlfURxiqhbjpOHlOsBvAeDHvM/s1600/no-thumbnail.png.jpgg";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDI3HkDBnJZ9lCavLsJkVs07ZZZRTm-rqh-Cnxga_Js9QFQMcD-E5WXbYm1bhZewq2vsELH75ye1AXd9o5QWdFprsARsMtj04nANPbd4hFeah4sgEbC4vlfURxiqhbjpOHlOsBvAeDHvM/s1600/no-thumbnail.png.jpg";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDI3HkDBnJZ9lCavLsJkVs07ZZZRTm-rqh-Cnxga_Js9QFQMcD-E5WXbYm1bhZewq2vsELH75ye1AXd9o5QWdFprsARsMtj04nANPbd4hFeah4sgEbC4vlfURxiqhbjpOHlOsBvAeDHvM/s1600/no-thumbnail.png.jpg";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDI3HkDBnJZ9lCavLsJkVs07ZZZRTm-rqh-Cnxga_Js9QFQMcD-E5WXbYm1bhZewq2vsELH75ye1AXd9o5QWdFprsARsMtj04nANPbd4hFeah4sgEbC4vlfURxiqhbjpOHlOsBvAeDHvM/s1600/no-thumbnail.png.jpg";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDI3HkDBnJZ9lCavLsJkVs07ZZZRTm-rqh-Cnxga_Js9QFQMcD-E5WXbYm1bhZewq2vsELH75ye1AXd9o5QWdFprsARsMtj04nANPbd4hFeah4sgEbC4vlfURxiqhbjpOHlOsBvAeDHvM/s1600/no-thumbnail.png.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://www.tricks2blogging.blogspot.com";
limitspy=4;
intervalspy=4000;
</script>
<div id="tricks2blogging-widget">
<script src='http://tricks2blogging.googlecode.com/svn/trunk/recent-posts-spy.js' type='text/javascript'></script><a href='http://www.tricks2blogging.blogspot.com'>_</a>
</div>

How To Add Numbers To Blogger Threaded Comments?

1. Go to Blogger Dashboard > Template
2. BackUp your template
3. Click On Edit HTML
4. Then Proceed
5. Now search for below code,

]]></b:skin>

.comment-thread ol {
    counter-reset: countcomments;
}

.comment-thread li:before {
    content: counter(countcomments,decimal);
    counter-increment: countcomments;
    float: right;
    font-size: 22px;
    color: #555555;
    padding-left: 10px;
    padding-top: 3px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6MM5VU_S3AkLcRThX4fjTNNVIgp7ZH7XilfGnbESQOXPUqDKcyUk4_xpPItv9KkWZvzt2mUavgArq8Oy_DHoRPIr-gGEe32TS-_3EiE_ZPD3LZmo77-MlQkWaQtgaCl4F-RTDIep_QlU/s1600/comment+bubble2.png) no-repeat;
    margin-top: 7px;
    margin-left: 10px;
    width: 50px;
 /*image-width size*/
    height: 48px;
 /*image-height size*/
}

.comment-thread ol ol {
    counter-reset: contrebasse;
}

.comment-thread li li:before {
    content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin);
    counter-increment: contrebasse;
    float: right;
    font-size: 18px;
    color: #666666;
}

Now Save Your Template

To change The Comment Bubble Style Change The Green URL With the Below Link

Different Styles Of Comment Bubble

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6MM5VU_S3AkLcRThX4fjTNNVIgp7ZH7XilfGnbESQOXPUqDKcyUk4_xpPItv9KkWZvzt2mUavgArq8Oy_DHoRPIr-gGEe32TS-_3EiE_ZPD3LZmo77-MlQkWaQtgaCl4F-RTDIep_QlU/s1600/comment+bubble2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-fNKBESs98K8vHZAM7GDSnam1oSPOFMTcF-5CDwSiksdq8pX83WN2Fn0-kYSaQPCR2RNpZ_-Td8Dl1wkMLgkzH897-NS1GUR8N2o6VwNF49l46cfmh937Qxylw-nnXbETROANKWGDWpk/s1600/cloud.png

http://2.bp.blogspot.com/-2psafDYuhAY/UFbiEJ300EI/AAAAAAAABiE/

0t8KHfBU8rs/s1600/round.png

HOW TO INCREASE YOUR PAGERANK- [NEWELY UPDATED]

SEO Process :Blogger Is Now SEO Friendly

1. Go to Settings option from Blogger Dashboard.
2. Then select Search Preferences option.
3. Search Preference will look like this

Now SAve ItNow a new option  Search description will be activated in post editor section.Also you can add metatag description for each and every post in your blog.

5.Next in the custom page not found option.. enter the message to be appeared if  broken link is found.And  next in the redirect url you can redirect the broken link pages to another url.

6.In Crawlers and Indexing section,do not make any changes to robots.txt option.In the Custom robots header tags check yes option and click  all and noodp in Homepage,HomepageArchive and Search pages,Default for Posts and Pages

Subscription Box With Social Networking Icons For Blogger

1. Go To Blogger - Design
2. In Page Elements choose Add a gadget
3. Choose HTML/JAVASCRIPT option

<div class='widget-content'>
<table align="center" width="317px" cellspacing="0px" cellpadding="1px"><tbody><tr><td><a target="_blank" rel="nofollow" href="http://www.facebook.com/tricks2Blogging"><img src="http://2.bp.blogspot.com/-qMRqkcoAT0s/Tz06uOJ0WII/AAAAAAAAAHY/
gLqbjiBuBfc/s1600/
woden+board+facebook_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://twitter.com/tricks2Blogging/" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwpAHmkzuxEuQJKZHbxmqndwYVfshLcZRy5XGywgn14VMrkNL4j0hOfWB713wOqGF_mciV_wYB9P6iwfOlGxvDMec9LI4IEZHHkyCDK95Mvk96CH8ZWtNLx7hGfBhlBYigm6Aw8m4Hbuk/s1600/
woden+board+twitter_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://feeds.feedburner.com/tricks2Blogging" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk_koi-pUv1P14go_jKHhn9rFGbz3aUnExQo-Y1MHT9w_ZGWgnbTytIy38P2Zb-tRn6yJt72Ix8vYP_7RlbopUI3xGtVwuaL3Fk-tq0hZpQ7ZI7dKtFdNdbv_xT6hoCG7FQNo8z9F5CEQ/s1600/woden+board+RSS1_netoops.png" class="beintouch" /></a></td></tr></tbody></table>
<style type="text/css">
img.beintouch:hover{
    background: none repeat scroll 0 0 #D6D6D6;
    border-radius: 16px 16px 16px 16px;
    box-shadow: 0 0 10px #565656;
}
.emailtext {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCsMkeZopSKLSpliAGh0uooMvBRQP-0C7N2W_ZrbVtEnss2kafQV6FIcMjHcsiSirRoVCT1XV5jtC4X4R3JGdb3uXWQHK7CRUeaK07n3TBGKzIWCWfxqnGL_eKvQN_uowWdp9ZzykOdFc/s1600/mailbox.png") no-repeat scroll 4px center transparent;
    border: 1px solid #D3D3D3;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 1px 1px 2px #CCCCCC inset;
    color: #444444;
    font-weight: bold;
    padding: 7px 15px 7px 35px;
    text-decoration: none;
width:176px;
margin-left:2px;
}
.ebutton {
   background: -moz-linear-gradient(center top , #FBFBFB 0%, #F4F4F4 100%) repeat scroll 0pt 0pt transparent;
background: -webkit-linear-gradient(top , #FBFBFB 0%, #F4F4F4 100%);
background: -o-linear-gradient(top , #FBFBFB 0%, #F4F4F4 100%);
background-color:#abab12;
     border-radius: 4px 4px 4px 4px;
     border: 1px solid #D3D3D3;
     color: #444444;
     cursor: pointer;
     font-weight: bold;
     margin-left: -18px;
     margin-top: 5px;
     padding: 6px 15px;
     text-decoration: none;
}
</style>
<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=FreeclassifiedsAndSeoSites', '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="FreeclassifiedsAndSeoSites" name="uri" />
<input type="hidden" value="en_US" name="loc" />
<input type="text" value="Enter your email..." onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" name="email" class="emailtext" />
<input type="submit" value="Subscribe" title="" class="ebutton" alt="" />
</form>
</div>

Replace The Red Green Blue Codes with your Facebook, Twitter, feed burner codes

How To Add Subscribe Box And Social Sharing Button Below Blogger Posts

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

<data:post.body/>

<body>
       <div class='widget-content'>
<div style='background-image: url(&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAk_UpZMybwdLn9LlaxwqI5LafMN1OOmeaA9YD3h78h6LJSPrmUPu2UlaojqvDMmIAs5XM6ariANOREEP741OodtfaUQoOQLkefl_b7zi6bdAhBbNQowDluHDkKtZcRJsQ81jTrOEy8lw/s1600/subscribe.jpg&apos;); height: 161px;'>
<div style='padding:70px 210px 0 75px;float:left;'>
<div style='float:left; margin-right:5px; margin-top:2px;'>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size='tall'/>
<!-- Place this render call where appropriate -->
<script type='text/javascript'>
  (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script></div><iframe frameborder='0' height='240' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FTricks2Blogging&amp;send=false&amp;layout=box_count&amp;width=60&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=90' style='overflow: hidden; width: 60px; height: 90px;' width='320'/></div><div style='padding: 70px 0 0 80px;'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ChangeIt&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><p><input gtbfieldid='2' maxlength='100' name='email' onfocus='this.value = &apos;&apos;;' size='25' style='width: 140px; height: 21px; font-size: 11px; color: rgb(51, 51, 51);' type='text' valign='middle' value='Enter your email address'/>
<input name='uri' type='hidden' value='
ChangeIt'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='submit' type='submit' value='             Subscribe             '/>
</p>
</form></div></div></div>
    </body>

How to Add RSS And Email  Subscription Widget For Blogger

1. Go To Blogger - Design
2.  In Page Elements choose Add a gadget
3.  Choose HTML/JAVASCRIPT option

• And add the following code,

<style>
#submit_btn {float: right;}
.email-rss {
padding-top: 15px;
padding-right: 50px;
padding-bottom: 15px;
padding-left: 10px;
color: #333;
height: 200px;
height: auto;
min-height: 200px;
border: 1px solid #ccc;
background: #dfdfdf url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0_XrkW_RD7x4Aaj_WKLDeqigsHTc3Fbx9uYcuR_hODCRO0h_6FaWNqQ8NHaqMeZJEtJ0Zsixhs097z1q8FgJQAkLDUZHxyGIklKFqJAzDpXSvl7fRmpA01ze2CcYmRduEC5ZgRMWfoNyf/) center -20px no-repeat;
margin-bottom: 5px;
}
.email-rss .first {width: 150px;}

.sidebar-section .widget {
border: 1px solid #ccc;
padding: 10px 0 10px 10px;
margin: 5px 0;
}
.twitter-feed h2, .email-rss h2 {
margin-top: 0;
padding-bottom: 80px;
font-size: 28px;
}
.email-rss h2 {padding-bottom: 30px;}
.footer {
font-size: 13px;
margin-bottom: 0px;
padding-top: 15px;
padding-bottom: 10px;
font-weight: bold;
color: #FCFCFC;
padding-right: 50px;
}
.right-col-footer-inner {padding: 0 0 0 20px;}
#twitter_update_list li {
padding-top: 10px;
padding-bottom: 10px;
list-style-image: none;
list-style-type: none;
}
#twitter_update_list li a {
color: #FFFFFF;
}
.space {
padding-right: 5px;
padding-left: 15px;
}
.phone-email-wrap, .innards {
float: left;
padding: 5px;
background: #dfdfdf;
outline: 1px solid #ccc;
width: 680px;
color: #333;
}
.form-wrap {
position: relative;
float: right;
margin-right: 5px;
}
.form-bubble {
position: absolute;
left: -176px;
top: -70px;
background-color: transparent;
background-image: url(images/bubble-bg.png);
background-repeat: no-repeat;
background-position: left top;
height: 60px;
width: 280px;
font-size: 11px;
text-transform: uppercase;
color: #2B2B2B;
display: none;
padding-top: 5px;
padding-right: 50px;
padding-bottom: 15px;
padding-left: 10px;
}
input#email-element {
background-color: #FFFFFF;
background-image: url(images/form-bg.png);
background-repeat: repeat-x;
background-position: left top;
border: 1px solid #BABABA;
width: 200px;
padding-top: 5px;
padding-right: 2px;
padding-bottom: 5px;
padding-left: 2px;
margin-right: 10px;
}
.form-register {
line-height: 15px;
}
.email-submit {
background-image: url(images/send-but-on.png);
background-repeat: no-repeat;
background-position: left top;
display: inline-block;
height: 29px;
width: 55px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
.email-submit:hover {
background-image: url(images/send-but.png);
cursor: pointer;
}
.update-button {
background-image: url(images/ud-button1.png);
background-repeat: no-repeat;
background-position: left top;
height: 29px;
width: 123px;
display: block;
margin-top: 1px;
}
.update-button:hover {
background-image: url(images/ud-button2.png);
}
.register-success {
font-size: 12px;
color: #009900;
}
.form-error {
color: #CC0000;
}
.sb-rss {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5PxGDkUyFaTKthdGdApciaWIrJoIKt5qR-9BAG0YXjDiQ35eKdlTfyezADWTiYmJVQDGWxUZTyq2RIkIaOWXBXvzeEEkS2orTLOuJ2NhLUjv28TeogaKBO4_IeY6jlosi0Wnf4iJivDY/s800/rss.png) left no-repeat; padding-left: 20px; margin-right: 1em; font-weight: bold;}
.sb-email {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAIeyeHw-gk1KuThyEl8eFNa9ScvAhsKjhgULLUpk-v8Dt7OGpFOEu0jJ_5h8jPCsR4iyLc1gP0U_BJCH3MyVXeuyHsVxEKoyWlXqGPvC1FML4MnGAvmsEG4H5dV0NsrkoD3O2Z11Unk0/s800/email.png) left no-repeat; padding-left: 20px; font-weight: bold;}
.phone-email-wrap {margin-right: 20px; width: 645px;}
</style>
<div class='clearfix email-rss'>

<h2>Get Updates!</h2>
<p class='first'>Subscribe to Tricks2Blogging title by email for updates to your inbox:</p>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=Tricks2Blogging&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' target='popupwindow'><p><input name='email' style='width:258px; border: 1px solid #ccc; padding: 5px; font-size: 1.2em; color: #434343; font-weight: bold;' type='text' value='Enter your email address'/></p><input name='uri' type='hidden' value='
Tricks2Blogging'/><input name='loc' type='hidden' value='en_US'/></form>

<p>Be informed of new posts by <a href='http://feeds.feedburner.com/Tricks2Blogging'>subscribing to the RSS feed in your feed reader or by email</a>.</p>
<p><a class='sb-rss' href='http://feeds.feedburner.com/Tricks2Blogging'>RSS</a>
<a class='sb-email' href='http://feedburner.google.com/fb/a/mailverify?uri=Tricks2Blogging&loc=en_U'>Email</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class='right'><a href='http://feeds.feedburner.com/Tricks2Blogging
'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/Tricks2Blogging
?bg=C98E71&fg=000033&anim=0' style='border:0' width='88'/></a></span></p>
</div>

Now Save It

Sharing Widgets Below Posts That Rotates On Hover

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

  ]]></b:skin>

/*------------ Social Media Buttons Style --------------*/

.cas{
 width: 800px;
 margin: 0 auto;
}

.cas img {
 margin: 10px;
 border: 5px solid #eee;
 -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
 -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
 box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
 -webkit-transition: all 0.5s ease-out;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
}

.cas img:hover {
 -webkit-transform: rotate(-7deg);
 -moz-transform: rotate(-7deg);
 -o-transform: rotate(-7deg);
}

<data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<center><span style='color: #7AA1C3; font-size: 12px; font-family: Verdana;'><b>Kindly Share This Post And Stay Connected .</b></span><br/><br/>

<a class='cas' 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='125px' src='http://2.bp.blogspot.com/-5j3t_fvH21U/T5wiy3ViPuI/AAAAAAAAAMo/
J0cXAqgKaAw/s1600/facebook.png ' width='125px'/></a>
<a class='cas' 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='125px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9Qnn1l0bsRj75Dx_9YH22kXQkfOAWEQtR5nnoosdcpC1ECNKfsVr7W643juXWBXTbE2MGGvhgaxSsjS9LuglVtoDY37HavY51LMoWpktNRQKcMkuaXtpWlGIoi2cDqCCU_3dDRx0xxhkp/s1600/twitter.png ' width='125px'/></a>
<a class='cas' expr:href='&quot;http://www.linkedin.com/shareArticle?url=&quot;  + data:post.url' rel='external nofollow' target='_blank'><img alt='Linkedin' height='125px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK4RFytsBN-4OP1P2cBfabCmET7bZ90kl78oiOKYWnscPvuFAuUkLiC497KHn1bS61nXiiZst_ZbMb8NReEiTyTRbCO0fSx_Jn0gV8El6Hj3StrycxKuZ-FZT5aC4CqyBKyd53GT8gJAw4/s1600/linked+in.png ' width='125px'/></a>
</center>
</b:if>

Add Sharing Widget With Multi Colour Effects on Hover

1. Go To Blogger - Design
2. In Page Elements choose Add a gadget
3. Choose HTML/JAVASCRIPT option

<style>
.box {
-moz-box-shadow: inset 10 0 5px 15px #888;
-webkit-box-shadow: inset 10 0 5px 5px#888;
box-shadow: inset 10 0 5px 5px #888;
background: #f2f2f2;
font-family: verdana;
text-shadow: 1px 1px 1px white;
height:auto;
padding-left: 10px;
}
.topbox h3{
font-family: Times new roman;
padding-top: 10px;
padding-left: 6px;
font-size: 14px;
margin-bottom: 0px;
text-transform: uppercase;
text-shadow:1px 0px 0px #2f2f2f;
box-shadow: 0 4px 2px -2px gray;
}
.myaligntop{
vertical-align:text-top;
}

.twitter {
	display: block;
	width: 300px;
	height: 50px;
	background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZYcFhVCRfeFNZ7rafmdvwn_uXmIveE3jlRsY5O5y0k6n3k7RLnQz6DJbS5QNjJNRU4NqkkLk5CXOK87oXm2DxIhtcIHlkPaxFINfCRZcWunqjJk2zVpkVjVGwZFaUx9lbbEVvQwSTFpHm/s1600/BannerTwitter11.png') bottom;
	text-indent: -99999px;
}
.twitter:hover {
	background-position: 0 0;
}

.google {
	display: block;
	width: 300px;
	height: 50px;
	background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgb7tiRCvK2vjxvaxdiQQDp5aAjFrxa4n5FXMpCdcQCQpZM7zVUbMUxSvXFXJIOChssR5uGoTDgxg_uX51s0TnPLfoqkdjEhh2v-By5kK6sssidMXKhx0gB_B7iQ8FoB6AEKu5G3ysP-Zl/s1600/BannerGooglePlus11.png') bottom;
	text-indent: -99999px;
}
.google:hover {
	background-position: 0 0;
}

.facebook {
	display: block;
	width: 300px;
	height: 50px;
	background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd49gnAo1WWTOcIAXHxTXL9LBMlLptpCwrAxu21TlwMVb6FYmWXHEt-dwAeStOZfCUu8gClMf_aFQuULq_rt0kTPVwMHCNA9oX6eR0RbEhyK7NJCBNvA5ZFkBvc55FoBqac79IVIqd-b4-/s1600/BannerFacebook11.png') bottom;
	text-indent: -99999px;
}
.facebook:hover {
	background-position: 0 0;
}

.stumbleupon {
	display: block;
	width: 300px;
	height: 50px;
	background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCaUMHCXKunyi1co-GSJVMe1eqwZWwB9cgNtxDxth7SCLLjl53CgOB4KxJH__BL-zReT0wY4wbmAeZqmCKZWjS_NCuwZsFJtobPmWrh-9bOdd4ccPSXGeavKTED0rCO8QFYW3_dJTxqUD5/s1600/
BannerStumbleUpon11.png') bottom;
	text-indent: -99999px;
}
.stumbleupon:hover {
	background-position: 0 0;
}
</style>
<td class="box">
<table border="0" width="100%" style="border-collapse: collapse">
<tr>
<td>
<a class="twitter" href="https://twitter.com/tricks2Blogging" rel="nofollow">Twitter</a>
<a class="google" href="https://plus.google.com/u/0/108636145831102184488
" rel="nofollow">Google Plus</a>
<a class="facebook" href="http://www.facebook.com/tricks2blogging" rel="nofollow">Facebook</a>
<a class="stumbleupon" href="http://www.stumbleupon.com/" rel="nofollow">StumbleUpon</a>
</td>

Replace The RED Codes with your URl