Wednesday, November 28, 2012

Angry Birds Social Sharing Widget For Blogger

Social sharing widgets helps  to  get  some quality traffic for your website.You can add this to your blog easily.Im  using  CSS  and HTML for this  tutorial. Check   below link for demo. You   can  get  my  Earlier social network buttons from here

Demo

1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

Select-template

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.

5.Find this code  by using Ctrl+F  ]]></b:skin>

6.  Paste below code Before ]]></b:skin> code

/* Bloggertrix  */
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.bubblewrap li img{
width: 50px; /* width of each image.*/
height: 50px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}

7. Go to blogger  and click drop-down like  1st step and select Layout

8. Click Add Gadget and select 'HTML/Javascript"

9. Paste below code.

<ul class="bubblewrap">

<li><a href="http://www.plus.google.com/107955298793879607964"><img src="http://3.bp.blogspot.com/-b3-ImgxoXZE/ULTdqlQ4TYI/AAAAAAAAF2g/pBhTwnttAKY/s1600/bloggertrix-googleplus.png" title="Add to Facebook" /></a></li>

<li><a href="http://www.facebook.com/bloggertrix"><img src="http://4.bp.blogspot.com/-PL55Jd1MIgw/ULTdpgxpthI/AAAAAAAAF2Y/zqic5hvj2BU/s1600/bloggertrix-facebook.png" title="Add to Facebook" /></a></li>

<li><a href="http://www.youtube.com/Username"><img src="http://4.bp.blogspot.com/-RlxdrBe4ecs/ULTduDJX5gI/AAAAAAAAF24/Pc03FWKq8js/s1600/bloggertrix-youtube.png" title="Add to Youtube" /></a></li>

<li><a href="http://www.twitter/bloggertrix"><img src="http://3.bp.blogspot.com/-NjAWTWrlX5E/ULTdtCeqFeI/AAAAAAAAF2w/sLBX0ttP1rE/s1600/bloggertrix-twitter.png" title="Add to Twitter" /></a></li>

<li><a href="http://feeds2.feedburner.com/bloggertrix"><img src="http://1.bp.blogspot.com/-Cy7I8qvNDg0/ULTdoi-T18I/AAAAAAAAF2Q/qPyAZfmRqU8/s1600/bloggertrix-Rss.png" title="Add RSS Feed" /></a></li>
</ul>
 *Replace urls as your like.

10. Now save your template. You are done.
Read More

Tuesday, November 27, 2012

Greeny CSS Drop Down Menu Bar For Blogger

In this tutorial im gonna explain how to add greeny drop down menu bar for your blogger.Its included
nice drop down menu. you can check it from below demo link.Im using CSS and HTML for this tutorial i already created lot of  menu bar tutorial you can get my all menu bar  here

Demo


1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

Select-template

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

/* The CSS Code for the menu starts here bloggertrix.com */
#bloggertrix_menu1{
height:32px;
background:url(http://3.bp.blogspot.com/-k921F9A9vRo/ULTHP9zp0sI/AAAAAAAAF1U/V_5JBcx37dM/s1600/bloggertrix.com_menubg.png);
display:block;padding:0px 0 0px 0px;
font: 10px Tahoma,Century gothic,verdana, Arial, sans-serif;
font-weight:normal;text-transform:uppercase;overflow:hidden;
width:960px;
}
#bloggertrix_menu{
margin: 0px;padding: 0px 1px;width:998px;
background:url(http://3.bp.blogspot.com/-k921F9A9vRo/ULTHP9zp0sI/AAAAAAAAF1U/V_5JBcx37dM/s1600/bloggertrix.com_menubg.png) ;
height:32px;
}
#bloggertrix_menu ul {
float: left;list-style: none;margin: 0px;
padding: 0px;
}
#bloggertrix_menu li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#bloggertrix_menu li a, #bloggertrix_menu li a:link, #bloggertrix_menu li a:visited {
color: #bfe195;
display: block;
margin: 0px;
padding: 10px 10px 10px 10px;
}
#bloggertrix_menu li a:hover, #bloggertrix_menu li a:active {
background:url(http://3.bp.blogspot.com/-k921F9A9vRo/ULTHP9zp0sI/AAAAAAAAF1U/V_5JBcx37dM/s1600/bloggertrix.com_menubg.png) repeat-x ;
color: #fff;
margin: 0px;
padding: 10px 10px 10px 10px;
text-decoration: none;
}
#bloggertrix_menu li li a, #bloggertrix_menu li li a:link, #bloggertrix_menu li li a:visited {
background:url(http://3.bp.blogspot.com/-k921F9A9vRo/ULTHP9zp0sI/AAAAAAAAF1U/V_5JBcx37dM/s1600/bloggertrix.com_menubg.png) ;
width: 150px;
color: #bfe195;
font-family:Tahoma,century gothic,Georgia,  sans-serif;
font-weight: normal;float: none;margin: 0px;padding: 9px 10px 9px 10px;
border-bottom: 1px solid #5E9F09;
}
#bloggertrix_menu li li a:hover, #bloggertrix_menu li li a:active {
background:#3f6d06;
color: #fff;
padding: 9px 10px 9px 10px;
}
#bloggertrix_menu li ul {
z-index: 9999;
position: absolute;
left: -999em;height: auto;width: 170px;margin: 0px;
padding: 0px;
}
#bloggertrix_menu li li {
}
#bloggertrix_menu li ul a {
width: 140px;
}
#bloggertrix_menu li ul a:hover, #bloggertrix_menu li ul a:active {
}
#bloggertrix_menu li ul ul {
margin: -31px 0 0 170px;
}
#bloggertrix_menu li:hover ul ul, #bloggertrix_menu li:hover ul ul ul,
#bloggertrix_menu li.sfhover ul ul, #bloggertrix_menu li.sfhover ul ul ul {
left: -999em;
}
#bloggertrix_menu li:hover ul, #bloggertrix_menu li li:hover ul,
#bloggertrix_menu li li li:hover ul, #bloggertrix_menu li.sfhover ul,
#bloggertrix_menu li li.sfhover ul, #bloggertrix_menu li li li.sfhover ul {
left: auto;
}
#bloggertrix_menu li:hover, #bloggertrix_menu li.sfhover {
position: static;
}

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

 <div id="bloggertrix_menu1">
<div id="bloggertrix_menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Business</a>
<ul class="children">
<li><a href="#">Internet</a></li>
<li><a href="#">Market</a></li>
<li><a href="#">Stock</a></li>
</ul>
</li>
<li><a href="http://www.bloggertrix.com/">Downloads</a>
<ul class="children">
<li><a href="#">Dvd</a></li>
<li><a href="#">Games</a></li>
<li><a href="#">Software</a>
<ul class="children">
<li><a href="#">Office</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.bloggertrix.com/">Parent Category</a>
<ul class="children">
<li><a href="http://www.bloggertrix.com/">Child Category 1</a>
<ul class="children">
<li><a href="#">Sub Child Category 1</a></li>
<li><a href="#">Sub Child Category 2</a></li>
<li><a href="#">Sub Child Category 3</a></li>
</ul>
</li>
<li><a href="#">Child Category 2</a></li>
<li><a href="#">Child Category 3</a></li>
<li><a href="#">Child Category 4</a></li>
</ul>
</li>
<li><a href="#">Featured</a></li>
<li><a href="#">Health</a>
<ul class="children">
<li><a href="#">Childcare</a></li>
<li><a href="#">Doctors</a></li>
</ul>
</li>
<li><a href="http://www.bloggertrix.com/">Uncategorized</a></li>
</ul>
</div>
</div>

10. Now save your HTML/Javascript'.

    You are done...
Read More

Monday, November 26, 2012

Unique Style Social Sharing Box For Blogger

In this post you can learn, how to add unique social box for your blog.Actually this social box have ncie style. you can check it from demo Im using just CSS and HTML for this tutorial
you can  get  my  earlier Social media post collection  by clicking here

Demo


1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

Select-template

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

/* The CSS Code for the menu starts here bloggertrix.com */

div#socialbox, div#socialbox ul, div#socialbox ul li, div#socialbox ul li p, div#socialbox ul li p img, div#socialbox ul li p span, #socialbox ul li p a{
background: none;border: none;margin: 0;padding: 0;}

div#socialbox{
color: #768a96;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
width:300px;}

div#socialbox ul{
background: url() repeat;
border: 1px solid #d8dcdf !important;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 4px #dfe4e7;
-moz-box-shadow: 0px 2px 4px #dfe4e7;
box-shadow: 0px 2px 4px #dfe4e7;
list-style: none;
margin: 0 !important;
padding: 0;}
    
div#socialbox ul li{
background-image: none;
border-bottom: 1px solid #d8dcdf;
height: 59px;
list-style: none;}
    
div#socialbox ul li:last-child{
border-bottom: none;}
        
div#socialbox ul li p{
padding: 19px 9px 0 9px;}
        
div#socialbox ul li p img{
border: none;
margin-right: 10px;
position: relative;
top: 3px;
vertical-align: baseline;}
            
div#socialbox ul li p span{
color: #425763;
font-weight: bold;}
                
div#socialbox ul li p a.socialbox-button{
background: url(http://1.bp.blogspot.com/-E5QRdIByVg0/ULOer7YwB7I/AAAAAAAAF0Y/V5hNb7e7XLE/s1600/bloggertrix-button.png) no-repeat;
border: 1px solid #d8dcdf;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #425763;
float: right;
font-size: 11px;
font-weight: bold;
line-height: 11px;
padding: 6px 10px;
position: relative;
text-decoration: none;
text-transform: uppercase;
top: -2px;}
                
div#socialbox ul li p a.socialbox-button:hover{
background: url(http://1.bp.blogspot.com/-E5QRdIByVg0/ULOer7YwB7I/AAAAAAAAF0Y/V5hNb7e7XLE/s1600/bloggertrix-button.png) 0 -27px no-repeat;}
                
div#socialbox ul li p a.socialbox-button:active{
background: url(http://1.bp.blogspot.com/-E5QRdIByVg0/ULOer7YwB7I/AAAAAAAAF0Y/V5hNb7e7XLE/s1600/bloggertrix-button.png) 0 -54px no-repeat;}

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

<br />
<div id="socialbox">
<ul>
<li><p>
<a href="http://www.facebook.com/bloggertrix" target="_blank" title="Like on Facebook"><img alt="Facebook" src="http://3.bp.blogspot.com/-k-i66-3QRac/ULOabPh5-dI/AAAAAAAAFzo/8_T6Ux7XwDg/s1600/bloggertrix-facebook.png" /></a>2,482 Fans                                    
<a class="socialbox-button" href="http://www.facebook.com/bloggertrix" target="_blank" title="Like on Facebook">Like</a></p>
<br /></li>

<li><p><a href="http://twitter.com/bloggertrix" target="_blank" title="Follow on Twitter"><img alt="Twitter" src="http://1.bp.blogspot.com/-O8gKTilqhO4/ULOadDY-vjI/AAAAAAAAFz4/7BB73bOJTOU/s1600/bloggertrix-twitter.png" /></a>5,365 Followers                                    
<a class="socialbox-button" href="http://twitter.com/bloggertrix" target="_blank" title="Follow on Twitter">Follow</a>
<br /></p></li>

<li><p><a href="http://feeds.feedburner.com/bloggertrix" target="_blank" title="Subscribe to Feed"><img alt="Feedburner" src="http://1.bp.blogspot.com/-d751wABGYCc/ULOacKr4HaI/AAAAAAAAFzs/z0JUCRsHe1E/s1600/bloggertrix-feedburner.png" /></a>1,094 Subscribers                                    
<a class="socialbox-button" href="http://feeds.feedburner.com/bloggertrix" target="_blank" title="Subscribe to Feed">Subscribe</a>
<br /></p></li>
</ul>
</div>

Replace bloggertrix with your usernames.


10. Now save your HTML/Javascript'.

    You are done...
Read More

Sunday, November 25, 2012

Css Dark Style Drop Down Menu Bar For Blogger

Today im  gonna explain  how to add  another  cool menu bar for  blogger. This is dark style menu  bar with drop down.This  menu bar work with all  web browsers.Im using CSS and HTML for  this menu.i added the demo like for this menu bar too. you can check   it.  you can  get  my  earlier menu  bar post collection  by clicking here
Css-dark-menu
Demo


1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

Select-template

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

/* The CSS Code for the menu starts here bloggertrix.com */
.containerbt {margin: 0 auto;width: 610px;text-align: center;height:300px;}
ul.dark_menu {
 list-style: none;padding: 0; font-family: Arial;font-size: 14px;line-height: 14px;}
ul.dark_menu:after {content: "";clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;}
ul.dark_menu li {float: left;margin: 0 0 0 10px;position: relative;}
ul.dark_menu li:first-child {margin: 0;}
ul.dark_menu li a, ul.dark_menu li a:link {color: #FFFFFF;text-decoration: none;
display: block;padding: 10px 26px;text-shadow: 0 1px 0 #4b433e; background: #362f2c; 
background: -moz-linear-gradient(top, #362f2c 0%, #282321 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#362f2c), color-stop(100%,#282321));background: -webkit-linear-gradient(top, #362f2c 0%,#282321 100%);
background: -o-linear-gradient(top, #362f2c 0%,#282321 100%);
background: -ms-linear-gradient(top, #362f2c 0%,#282321 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#362f2c', endColorstr='#282321',GradientType=0 );
background: linear-gradient(top, #362f2c 0%,#282321 100%);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 #564b46,0 1px 1px #181514;
-moz-box-shadow: inset 0 1px 0 #564b46,0 1px 1px #181514;
 box-shadow: inset 0 1px 0 #564b46,0 1px 1px #181514;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;}
                   
ul.dark_menu li a:hover {
color: #73635e;
text-shadow: 0 1px 1px #000;
background: #282321; 
background: -moz-linear-gradient(top, #282321 0%, #362f2c 99%, #362f2c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#282321), color-stop(99%,#362f2c), color-stop(100%,#362f2c)); 
background: -webkit-linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); 
background: -o-linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); 
background: -ms-linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#282321', endColorstr='#362f2c',GradientType=0 ); 
background: linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); -webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;}

ul.dark_menu li a.selected, ul.dark_menu li a:active {
color: #73635e;background: #282321;
text-shadow: 0 1px 1px #000;
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f;-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f;box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f;
-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;}
ul.dark_menu li ul {display: none;}
ul.dark_menu li ul:before {content: " ";position: absolute;display: block;z-index: 1500;left: 0;top: -10px;height: 10px;width: 100%;}
ul.dark_menu li:hover ul {
position: absolute;display: block;z-index: 1000;left: 0;top: 44px;padding: 5px 0;list-style: none;background: #282321;
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f;-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f;
-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}
ul.dark_menu li ul li {
float: none;margin: 0 10px;border-bottom: 1px solid #191614;border-top: 1px solid #3a3230;}                   
ul.dark_menu li ul li:first-child {
margin: 0 10px;
border-top: 0 none;}             
ul.dark_menu li ul li:last-child {
border-bottom: 0 none;}                    
ul.dark_menu li ul li a, ul.dark_menu li ul li a:link {
color: #73635e;display: block;background: transparent none;padding: 10px 20px 10px 5px;white-space: nowrap;text-shadow: 0 1px 2px #000;-webkit-box-shadow: 0 0 0 rgba(0,0,0,0);-moz-box-shadow: 0 0 0 rgba(0,0,0,0);box-shadow: 0 0 0 rgba(0,0,0,0);
-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;}                
ul.dark_menu li ul li a:hover {text-decoration: underline;background: #2a2523;}

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

 <div class="container">
        <!-- Dark Menu Begin -->
        <ul class="dark_menu">
            <li><a href="#" class="selected">Home</a></li>
            <li>
                <a href="#">Download</a>
                <!-- Sub Menu Begin -->
                <ul>
                   <li><a href="#">Menu Link 1</a></li>
                    <li><a href="#">Menu Link 2</a></li>
                    <li><a href="#">Menu Link 3</a></li>
                    <li><a href="#">Menu Link 4</a></li>
                </ul>
                <!-- Sub Menu End -->
            </li>
            <li>
                <a href="#">Blog</a>
                <!-- Sub Menu Begin -->
                <ul>
                    <li><a href="#">Menu Link 1</a></li>
                    <li><a href="#">Menu Link 2</a></li>
                    <li><a href="#">Menu Link 3</a></li>
                    <li><a href="#">Menu Link 4</a></li>
                </ul>
                <!-- Sub Menu End -->
            </li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <!-- Dark Menu End -->
    </div>

10. Now save your HTML/Javascript'.

    You are done...
Read More

Saturday, November 24, 2012

Social Sharing Buttons With Colorful Hover Effect

Im gonna explain, how to add  social  sharing widget with colorful  hover effect.Actually this widget looks great. you can  keep in on side bar. For this  post   im using   CSS  and  HTML  languages. You  can   link  your  Rss,Facebook,Twitter and Google plus.You can add it  with easy  steps.  get  my  other  social  media
widgets by clicking here

Social+Sharing+Buttons+With+Colorful+Hover+Effect
Demo

1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Layout" Like Below.

3. Click Add Gadget and select 'HTML/Javascript

4. Paste below one of below code.

/*--------Social Sharing Widget ------*/
<style type="text/css">
.socialsharing {
display: block;
margin: 2em auto;
width: 200px;
height:40px;
}
.socialsharing span {
float: left;
display: inline;
margin-right: 8px;
}
.socialsharing span a {
display: block;
width: 32px;
height: 32px;
text-indent: -9999px;
background-color: none;
background: transparent url("http://4.bp.blogspot.com/-6h1-70nsBTI/T-QLQivplSI/AAAAAAAABZg/KfgSsUdfBx4/s1600/social+icon.png") 0 0 no-repeat;
}
#iconTwitter {background-position: -33px -33px;}
#iconFacebook {background-position: -66px -33px;}
#iconRSS {background-position: 0 -33px;}
#iconYouTube {background-position: -99px -33px;}
#iconGooglePlus {background-position: -132px -33px;}
#iconTwitter:hover {background-position: -33px 0;}
#iconFacebook:hover{background-position:-66px 0}
#iconRSS:hover{background-position:0 0}
#iconYouTube:hover{background-position:-99px 0}
#iconGooglePlus:hover{background-position:-132px 0}
</style>

<div class="socialsharing">
<a href="http://www.twitter.com/bloggertrix" id="iconTwitter" target="_blank" title="Follow us on Twitter">Twitter</a>
<a href="http://www.facebook.com/bloggertrix" id="iconFacebook" target="_blank" title="Join us at Facebook">Facebook</a>
<a href="http://feeds.feedburner.com/bloggertrix" id="iconRSS" target="_blank" title="Subscribe our RSS Feed">RSS</a>
<a href="http://www.blogger.com/youtube.com/bloggertrix" id="iconYouTube" target="_blank" title="Follow our YouTube Channel">YouTube</a>
<a href="https://plus.google.com/107955298793879607964/posts" id="iconGooglePlus" target="_blank" title="Follow us at Google+">Google</a></div>

Replace with your URLs where i highligh with red color text.

7. Now save your HTML/Javascript'.

    You are done...
Read More

Friday, November 23, 2012

Add Wordpress Style Author Bio Box For Blogger

In   this  post, im  gonna  explain  how  to  add wordpress style author  bio  box for blogger. You  can  add  this  box every end of y our  blog  post. You  can  change  the code according to your details.i mentioned it with  highlighting the code.So, it will easy  for  you. Other  thing is,  for  this bio box.  you  can  use 80 x 80 pixel  image. you  can get my earlier author bio box from here.

Demo

1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

Select-template

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    <div class='post-footer-line post-footer-line-1'>

6. Paste below code Before <div class='post-footer-line post-footer-line-1'> tag

/* Code for the author box starts here bloggertrix.com */
<style type="text/css">
#postauthor { background: #eef7f8; border: 1px solid #c6d9ed; padding:10px; margin: 15px 0; width:650px; height:90px; font-family:Georgia, "Times New Roman", Times, serif; }
#author-info{float:left; width:410px; padding:0 15px 0 0; border-right:1px solid #ccc; }
#author-info img {background:#fff; border: 1px solid #ddd; float: left; margin-right:10px;padding: 5px;
box-shadow: 0 0 3px #CCC; padding:3px;}#author-info h6 { color: #666; font-size: 18px; font-family:Georgia, "Times New Roman", Times, serif; font:Georgia, "Times New Roman", Times, serif }
#author-info h5 {color:#666; text-transform:none; font-size:12px; letter-spacing:0; font-family: Georgia;}
#author-info p { color: #515151; font-size: 12px; line-height:16px; font-family: Georgia;}
* { margin:0; padding:0;}#author-connect{width:21%; float:right; margin-right:8%; }
a.gplus-s{background: url("http://3.bp.blogspot.com/-YDfIvg3KYeE/T3AvpW2Gy0I/AAAAAAAABKw/zPiGkaX1V4I/s1600/gp-icon.png") no-repeat 0 0px; color: #666;  font-weight: bold;margin: 5px 0px; padding: 0 20px;text-decoration: none;}
</style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;Author Name&quot;'>
<div id="postauthor">
<div id="author-info">
 <img alt='' src='http://2.bp.blogspot.com/-Qh_sHEPX-DY/UK9RmtNQ36I/AAAAAAAAFuo/pVmwYzXaW8o/s1600/author.jpg'  height='80' width='80' /><h6 style="font:Georgia">Article by <a expr:href='data:post.authorProfileUrl' rel='author'><data:post.author/></a></h6>
<h5>AuthorName has Written Many Useful Articles.</h5>
<p>If you like This post, you can follow bloggertrix on <strong> 
<a href="http://twitter.com/bloggertrix" rel="nofollow" >Twitter  </a> </strong>. Subscribe to <strong> Bloggertrix feed via <a href="http://feeds.feedburner.com/bloggertrix" rel="nofollow" >RSS</a> or  <a href="http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix&amp;loc=en_US" rel="nofollow" > EMAIL </a>  </strong>to receive instant updates.</p></div>
<div id="author-connect">
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fbloggertrix&amp;send=false&amp;layout=button_count&amp;width=120&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&amp;appId=230688610312045" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:120px; height:21px;" allowTransparency="true"></iframe>          
<a href="https://twitter.com/bloggertrix" class="twitter-follow-button" data-show-count="false" data-size="small">Follow @bloggertrix</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 
<a href="https://plus.google.com/107955298793879607964" target="_blank" rel="nofollo" class="gplus-s" >Google</a></div></div>
</b:if></b:if>

Replace with red color link with your author image link.
Replace bloggertrix with your twitter ID
Replace bloggertrix with your  feedburner ID
Replace bloggertrix with your  facebook ID
Replace 107955298793879607964 with your  Google plus ID

7.
now click save template. you are done...

Read More

Thursday, November 22, 2012

Attractive Css3 Image Hover Effects

In this post  im  gonna  explain,  how  to  add a pure CSS3 image galley for blogger. It include nice hover effect. In this  gallery, there  have 9 images.Each images have  own style. You can check it by demo link. you can use this gallery on your sidebar.You can get my earlier images post by clicking here.
CSS3+Image+Hover+Effects
Demo

1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

Select-template

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

/* The CSS3 image gallery bloggertrix.com */
.photos {
    width: 300px;
    height: 300px;
    margin: 100px auto;
    position:relative;}
.photos > div {
    background-color: rgba(128, 128, 128, 0.5);
    border: 2px solid #444;
    float: left;
    height: 70px;
    margin: 5px;
    overflow: hidden;
    position: relative;
    width: 70px;
    z-index: 1;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    -webkit-transform:scale(1.0);
    -moz-transform:scale(1.0);
    -ms-transform:scale(1.0);
    -o-transform:scale(1.0);
    transform:scale(1.0);
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.photos > div img{
    width: 100%;
}
.photos > div:hover{
    z-index: 10;
    -webkit-transform:scale(2.0);
    -moz-transform:scale(2.0);
    -ms-transform:scale(2.0);
    -o-transform:scale(2.0);
    transform:scale(2.0);
}
.photos > div div {
    background: url(http://2.bp.blogspot.com/-qVEO5wsEldc/UK2da8k8SoI/AAAAAAAAFrM/fkMs5BixRbU/s1600/hover.gif) repeat scroll 0 0 transparent;
    cursor: pointer;
    height: 100px;
    left: 0;
    opacity: 0.7;
    position: absolute;
    top: 0;
    width: 100px;
    z-index: 15;
    -webkit-transition-duration: 1.5s;
    -moz-transition-duration: 1.5s;
    -ms-transition-duration: 1.5s;
    -o-transition-duration: 1.5s;
    transition-duration: 1.5s;
}
.photos > div:nth-child(1):hover div {
    height: 0%;
}
.photos > div:nth-child(2):hover div {
    height: 0%;
    margin-top: 100px;
}
.photos > div:nth-child(3):hover div {
    width: 0%;
}
.photos > div:nth-child(4):hover div {
    margin-left: 100px;
    width: 0%;
}
.photos > div:nth-child(5):hover div {
    height: 0%;
    margin-left: 150px;
    margin-top: 50px;
    width: 0%;
}
.photos > div:nth-child(6):hover div {
    margin-left: 150px;
    width: 0%;
}
.photos > div:nth-child(7):hover div {
    height: 0%;
    margin-left: 150px;
    margin-top: 50px;
    width: 0%;
    -webkit-transform: rotateX(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
}
.photos > div:nth-child(8):hover div {
    height: 0%;
    margin-left: 150px;
    margin-top: 50px;
    width: 0%;
    -webkit-transform: rotateZ(600deg);
    -moz-transform: rotateZ(600deg);
    -ms-transform: rotateZ(600deg);
    -o-transform: rotateZ(600deg);
    transform: rotateZ(600deg);
}
.photos > div.pair div {
    width: 100px;
}
.photos > div.pair div:nth-child(odd) {
    margin-left: 100px;
}
.photos > div.pair:hover div {
    width: 0%;
}
.photos > div.pair:hover div:nth-child(odd) {
    margin-left: 100px;
}

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

<div class="photos">
            <div>
                <a href="URl link 1" target="blank"><img src="Image URL 1" /></a>
                <div></div></div><div>
    
                <a href="URl link 2" target="blank"><img src="Image URL 2" /></a>
                <div></div><div></div>
           
                <a href="URl link 3" target="blank"><img src="Image URL 3" /></a>
                <div></div><div></div>
            
                <a href="URl link 4" target="blank"><img src="Image URL 4" /></a>
                <div></div><div></div>
           
                <a href="URl link 5" target="blank"><img src="Image URL 5" /></a>
                <div></div><div></div>
            
                <a href="URl link 6" target="blank"><img src="Image URL 6" /></a>
                <div></div><div></div>
            
                <a href="URl link 7" target="blank"><img src="Image URL 7" /></a>
                <div></div><div></div>
            
                <a href="URl link 8" target="blank"><img src="Image URL 8" /></a>
                <div></div> </div>
           
                <div class="pair">
                <a href="URl link 9" target="blank"> <img src="Image URL 9" /></a>
                <div></div> <div></div>
            </div>
        </div>
Replace with your URL and Image URL

10. Now save your HTML/Javascript'.

    You are done...
Read More

Wednesday, November 21, 2012

Multi Color Advanced Css3 Menu Bar For Blogger

In this post, im gonna explain, how to add multi color advanced css3 menu for blogger.Im include
2 styles light color and dark color.Im using CSS3 and HTML for creating this menu bar.Its include
nice hover style too.you can check it form demo page. you can get my earlier menu bar post collection  by clicking here

Demo

1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

Select-template

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

/* The CSS Code for the menu starts here bloggertrix.com */
.cbdb-menu li {
    display: block;
    float: left;
    line-height: 35px;
    list-style:none;
    margin: 0 5px;}
.cbdb-menu li a {
    /* This generators the gradient on top of the solid color */
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, rgba(255,255,255,.5)),
        color-stop(1, rgba(0,0,0,.1))
    );
    background-image: -moz-linear-gradient(
        center top,
        rgba(255,255,255,.5) 0%,
        rgba(0,0,0,.1) 100%
    );
    color: #f4f4f4; /* IE */
    color: rgba(255, 255, 255, 0.8);
    display: block;    
    font: bold 18px "Myriad Pro","Lucida Grande",Helvetica,Arial,sans-serif;        
    outline:none;
    padding: 5px 15px;
    text-decoration: none;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
    -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
    -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);    }
    .cbdb-menu li a:active {
        background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0,rgba(255,255,255,.5)),
            color-stop(.1,rgba(255,255,255,.2)),
            color-stop(.85, rgba(0,0,0,.2)),
            color-stop(100, rgba(0,0,0,.4))
        );
        background-image: -moz-linear-gradient(
            center bottom,
            rgba(255,255,255,.5) 0%,
            rgba(255,255,255,.2) 10%,
            rgba(0,0,0,.2) 85%,
            rgba(0,0,0,.4) 100%
        );
    }
/* Dark Text */
.cbdb-menu li a.dark {
    color: #333; /* IE */
    color: rgba(0, 0, 0, 0.8);
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
}
/*********** COLORS *************/
/* Create your own class for your own colors */
.red {
    background: #B80202;
    border: #B80202 1px solid}
    .red:hover, .red:focus{
        background-color:#e30606
   }
.green {
    background: #46c431;
    border: #46c431 1px solid}
    .green:hover,.green:focus {
        background-color:#44e329
    }
.yellow {
    background: #D9CE1C;
    border: #D9CE1C 1px solid}
    .yellow:hover,.yellow:focus {
     background-color:#eee117}
.cyan {
    background: #23c6de;
    border: #23c6de 1px solid}
    .cyan:hover,.cyan:focus {
     background-color:#18d8f4
    }
.blue {
    background: #3271d9;
    border: #3271d9 1px solid}
    .blue:hover,.blue:focus {
     background-color:#377ef2
    }
   

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

Light menu

css3+light+menu
<ul class="cbdb-menu">

  <li><a href="#" class="red">Home</a> </li>
  <li><a href="#" class="green">Download</a></li>
  <li><a href="#" class="yellow">Design</a></li>
  <li><a href="#" class="cyan">About Us</a> </li>
  <li><a href="http://www.bloggertrix.com/" class="blue">Contact Us</a></li>

</ul>

Dark menu
css3+dark+menu
<ul class="cbdb-menu">
  <li><a href="#" class="red dark">Home</a> </li>
  <li><a href="#" class="green dark">Download</a></li>
  <li><a href="#" class="yellow dark">Design</a></li>
  <li><a href="#" class="cyan dark">About Us</a> </li>
  <li><a href="http://www.bloggertrix.com/" class="blue dark">Contact US</a></li>
  </li>
</ul>

10. Now save your HTML/Javascript'.

    You are done...
Read More

Tuesday, November 20, 2012

Business Trade Blogger Template

forex-business-blogger-template

 Template Name :  Business Trade Blogger Template
  
 Template Author :  http://www.Premiumbtemplates.com/
        
 Designer : Sohan jayasinghe

 Basic Instructions : How to install a Blogger template

 Descriptions : -Fixed, 2 column,2 Menu-bars 1 sidebar, Premium template,
                          Right sidebar,Smooth Menu-bar, wide Smooth Slideshow.3 column Footer
                          Ready for business post, Black,Grey and Blue color ,Round corners.

Read More

Monday, November 19, 2012

Beautiful Rss Feed Subscription Box For Blogger

Today I'm gonna explain how to add beautiful Rss Feed subscription box for blogger.using this widget users can add their emails and subscribe your Rss feed.This is a simple widget,So you can
add it to your blog easily.This is compatible with all browsers. Im using CSS and HTML for this feed box.You can get my earlier Rss feed Post by
clicking here


Beautiful+Rss+Feed+Subscription+Box+For+Blogger

1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Layout" Like Below.

3. Click Add Gadget and select 'HTML/Javascript

4. Paste below one of below code.

<style>

.bordered {
    border: solid #ff7417 2px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 1px 1px #ccc;
    -moz-box-shadow: 0 1px 1px #ccc;
    box-shadow: 0 1px 1px #ccc;       
}
.bordered2 {
height: 25px;
    background-color: #ff7417;
    -webkit-border-top-left-radius: 6px;
    -khtml-border-radius-topleft: 6px;
    -moz-border-radius-topleft: 6px;
     border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -khtml-border-radius-topright: 6px;
    -moz-border-radius-topright: 6px;
     border-top-right-radius: 6px;     
     text-shadow: 0 1px 0 rgba(255,255,255,.5);
     border-top: solid #ffffff 1px;
}
</style>
<div class="bordered">
<div class="bordered2">
<center>
<span style="color: #ffffff; font-size: 16px;"><b>Subscribe Now</b></span></center></div>
<a href="http://feeds2.feedburner.com/bloggertrix" rel="alternate" title="Subscribe now to avail the unthinkable" type="application/rss+xml"><img border="0" alt="" style=" padding-bottom:20px; margin: 0pt 10px 10px 0pt; float: left; width:100px; height:100px;" src="http://1.bp.blogspot.com/-4GQT-yxEq1g/UKnA17_kO8I/AAAAAAAABM4/F0o3EiCuzB8/s1600/RSS-Reader-Book-icon.png"/></a><p><a href="http://feeds2.feedburner.com/bloggertrix" rel="alternate" title="Subscribe to my feed" type="application/rss+xml">Get free email updates </a><span style="color: #ffffff; font-weight: bold;">By submitting your email address here</span></p>
<style>
input.bt {
color:#fff;
font: bold 10px Arial, sans-serif;
background:#F39100;
border:0;
padding:3px;

}
input.bthov {
color:#fff;
font: bold 10px Arial, sans-serif;
border:2px solid #F39100;
padding:3px;
}
</style>
<form action="http://feedburner.google.com/fb/a/mailverify" style="padding: 5px; " target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input style=" color:#ffffff; background: #fff; border:1px solid #ff7417; width: 90px;" name="email" type="text"/>
<input value="bloggertrix" name="uri" type="hidden"/><input value="en_US" name="loc" type="hidden"/> <input onmouseover="this.className='bt bthov'" onmouseout="this.className='bt'" value="GO!" class="bt" type="submit"/></form><br/>
</div>
Replace Bloggertrix with your Feedburner ID

7. Now save your HTML/Javascript'.

    You are done...
Read More

Sunday, November 18, 2012

CSS Chocolate Style Menubar For Blogger

This post will  explain  about how  to add chocolate color  style menu bar for  your blog. This menu  bar include nice hover style  with sub menu.you can  try this menu  bar  for  your  blog. Im  using  CSS  and HTML for this tutorial. you can get my earlier menu bar post collection  by clicking here

Demo

1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

Select-template

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

/* The CSS Code for the menu starts here bloggertrix.com */
#menu10 ul {
    list-style:none;
    font-family: Georgia, serif;
    font-size: 30px;
    letter-spacing: -3px;
    line-height: 1.2em;
    float:left;
    clear:both;
    margin:20px;
    
}
#menu10 ul li{
    float:left;
border:1px solid #5F3B2F;
}
#menu10 ul li a{
    display:block;
    text-decoration:none;
    
    background-color:#955542;
    width:170px;
    text-align:center;
}
#menu10 ul li a span{
    display:block;
}
#menu10 ul li a span.title{
    color:#fff;
    padding-bottom:5px;
}
#menu10 ul li a:hover{

}
#menu10 ul li a:hover span.title{
    font-family: Georgia, serif;
    font-size: 10px;
    font-style: normal;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 2em;
    color:#fff;
    border:1px dashed #fff;
    padding-bottom:3px;
    background-color:#AF6C57;
}
#menu10 ul li a span.text{
    padding:0px 5px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: normal;
    line-height: 1.4em;
    color:#fff;
    background-color:#5F3B2F;
    visibility:hidden;
    border-bottom:1px groove #AF6C57;
}
#menu10 ul li a:hover span.text{
    line-height: 3.4em;
    visibility:visible;
}
   

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

<div id="menu10">
            <ul>
                <li><a href="">
                        <span class="title">Home</span>
                        <span class="text">Who we are</span>
                    </a>
                </li>
                <li><a href="">
                        <span class="title">Download</span>
                        <span class="text">What we do</span>
                    </a>
                </li>
                <li><a href="">
                        <span class="title">About</span>
                        <span class="text">What we talk about</span>
                    </a>
                </li>
                <li><a href="http://www.bloggertrix.com/">
                        <span class="title">Contact</span>
                        <span class="text">How to get in touch</span>
                    </a>
                </li>
            </ul>
        </div>

10. Now save your HTML/Javascript'.

    You are done...
Read More

Saturday, November 17, 2012

Attractive CSS Cloud Label Style For Blogger

In this post im gonna explain how to add nice label /category widget  for blogger  few weeks ago i was posted   about  Attractive  Css3  Labels /  Category  Widget For  Blogger. So,  this  is  also  same  trick. However this is also same trick with different style. Im using CSS for  this  trick  check blow image for example.Earlier i posted about same trick Change Blogger Label Links As Brick / Box Style. Follow below steps to add it to your blog.Its easy.

Attractive+cloud+label+for+blogger


1. Log in to blogger account & Go to Design >> Edit HTML

2. Find this code  by using Ctrl+F  ]]></b:skin>

3.Paste below code Before ]]></b:skin> code

/*-----Custom Labels Cloud widget by www.bloggertrix.com----*/
.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;font-size:10px;color:#666;}

.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.label-size a {
text-transform: uppercase;
float:left;
text-decoration: none;
}.label-size a:hover {
text-decoration: none;
}

4. Now Click  Save Template.

    You are done...
Read More

Friday, November 16, 2012

Add Attractive Animated CSS Buttons For Blogger

Today im  gonna  explain how to add css3 stylish animated  buttons  for your blogger. you can  use
this buttons as  download   buttons, demo buttons, redirect to other page and etc.Im  using  CSS  and
H
TML for this. you can use this button code in to your blogger post too.Check my  earlier post about
Button codes here
.

Stylish+Css+buttons
Demo

1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

Select-template

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

.button{
font:15px Calibri, Arial, sans-serif;
text-shadow:1px 1px 0 rgba(255,255,255,0.4);
text-decoration:none !important;
white-space:nowrap;
display:inline-block;
vertical-align:baseline;
position:relative;
cursor:pointer;
padding:10px 20px;
background-repeat:no-repeat;
background-position:bottom left;
background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png');
background-position:bottom left, top right, 0 0, 0 0;
background-clip:border-box;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
-moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;
-webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
transition:background-position 1s;
}
.button:hover{
background-position:top left;
background-position:top left, bottom right, 0 0, 0 0;
}
.button:active{
bottom:-1px;
}
/* The three buttons sizes */
.button.big { font-size:30px;}
.button.medium { font-size:18px;}
.button.small { font-size:13px;}
/* BlueButton */
.blue.button{
color:#0f4b6d !important;
border:1px solid #84acc3 !important;
background-color: #48b5f2;
background-image: url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
background-image: url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}
.blue.button:hover{
background-color:#63c7fe;
background-image: url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
background-image: url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}
/* Green Button */
.green.button{
color:#345903 !important;
border:1px solid #96a37b !important;
background-color: #79be1e;
background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}
.green.button:hover{
background-color:#89d228;
background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}
/* Orange Button */
.orange.button{
color:#693e0a !important;
border:1px solid #bea280 !important;
background-color: #e38d27;
background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}
.orange.button:hover{
background-color:#ec9732;
background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}
/* Orange Button */
.gray.button{
color:#525252 !important;
border:1px solid #a5a5a5 !important;
background-color: #a9adb1;
background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}
.gray.button:hover{
background-color:#b6bbc0;
background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

(You can use this code anywhere in your post.)
<a class="button big blue" href="Your Link" target="_blank">Live Demo</a>

<a class="button big orange" href="Your Link" target="_blank">Live Demo</a>

<a class="button big green" href="Your Link" target="_blank">Live Demo</a>

<a class="button big gray" href="Your Link" target="_blank">Live Demo</a>
Replace  with your links.

10. Now save your HTML/Javascript'.

    You are done...
Read More

Thursday, November 15, 2012

Sliding Social Sharing Widget For Blogger

In this post, im  gonna explain  how to add  nice social sharing widget for your blog.It has a nice
hover effect. For this  post  im  using pure  CSS and  HTML  languages.You  can  link  your  Rss,
Facebook,Twitter nad Google plus.You can add it with easy  steps. get  my other  social  media
widgets by clicking here

Sharing+buttons+widget
Demo

1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Layout" Like Below.

3. Click Add Gadget and select 'HTML/Javascript

4. Paste below one of below code.

<style>
/*--------Social Sharing Widget ------*/
.socialsharing a {
display:block;
height:50px;width:50px;padding:0 4px;float:left;
background:transparent url(http://4.bp.blogspot.com/-UTkPtPsw9bY/UKRoAPEVZ9I/AAAAAAAAFnM/qDPvUxpNfqM/s1600/Sharing+buttons.png) no-repeat;
-webkit-transition: ease-in 0.2s all;
-moz-transition: ease-in 0.2s all;
-o-transition: ease-in 0.2s all;
-ms-transition: ease-in 0.2s all;
transition: ease-in 0.2s all;
cursor:pointer;
}
.socialsharing a.googleplus {
background-position: 0px -58px;
}
.socialsharing a.googleplus:hover {
background-position: 0px 0px;
}
.socialsharing a.twitter {
background-position: 0px -290px;
}
.socialsharing a.twitter:hover {
background-position: 0px -232px;
}
.socialsharing a.facebook {
background-position: 0px -406px;
}
.socialsharing a.facebook:hover {
background-position: 0px -348px;
}
.socialsharing a.rss {
background-position: 0px -174px;
}
.socialsharing a.rss:hover {
background-position: 0px -116px;
}
</style>
<br />
<div class="socialsharing">
<a class="rss" href="RSS Link" rel="external nofollow" target="_blank"></a>
<a class="googleplus" href="Google profile link" rel="external nofollow" target="_blank"></a>
<a class="facebook" href="Facebook page Link" rel="external nofollow" target="_blank"></a>
<a class="twitter" href="Twitter Link" rel="external nofollow" target="_blank"></a>
</div>
Replace with your URLs where i highligh with red color text.

7. Now save your HTML/Javascript'.

    You are done...
Read More

Wednesday, November 14, 2012

Make Your Blog Optimized for Traffic and Search Visibility

You can advertise your blog on an affiliate program. You can create a guest post on a few  popular  blogs and draw  traffic  that way.  You can  add your blogs address to the bottom of every  email you send,  and you can start a social media campaign to drive traffic to your blog. Another way  you can  get  traffic  is to make it more visible on search  engines.  The truth is that Google is not the first port of call for most Internet users.

Optimized+for+Traffic+and+Search+Visibility

They tend to sign straight onto the website that prompted them to go online in the first place.
They do this by looking at their history, using their favorites, clicking on a desktop icon, or going
to their RSS feeds. Nevertheless if a person is looking/searching for something--their first port
of call will be Google. This is why it is a good idea to have your blog very visible on the search
engines results pages, so that you can mop up the extra traffic that flows onto search engines
after people have finished doing what they originally set out to do online.

Link up your blog
It is a good idea to put at least two links within each of your blog posts, and three internal links
at the bottom of each post. The ones at the bottom of each post should be something like, “If
you liked this, then you will love…..” Try to link to other pages in your blog that are on a similar
topic.

Use plugins to link up your blog
If you are using Magento, Joomla, WordPress (or even a number of others) then there are
plugins available that will help you to link up your website internally. If you really want
to optimize your blog in a serious way then use a plug-in that displays scrolling blog post
suggestions. Preferably, they will scroll down the page with images attached to them. If you do
not have the time to link up all of your past pages then look out for plugins that will do it for
you. There are also plugins that will test all of the links on your blog. If you fix or remove your
broken links then you will go a long way to cleaning up your blogs SEO.

Use images
Use images moderately. In other words do not upload so many pictures that your blog loads
slowly, but do add some. Make sure that each one has a title, ALT text and a description (if
possible). Not only will this help to increase your blogs SEO value, it will also pull traffic from
the Google images search engine too.

Use a compression plug-in
The larger that your blog gets--the longer it will take to load. There are plugins and add-ons
that will compress your blog down, so that only the first three/five posts load. This will vastly
decrease your blogs “page complete time”. The lower your page loading completion time is
then the higher Google will rank you. Google considers the time your page takes to load to be a
very important factor in your SEO.

Remove your adverts
The adverts running on your blog are adding elements, text and images to your blog. They are
weighing it down.

Run online tests
There are many tools online that will point out the good and bad things about your blog. They
will show you your PageRanks, and tell you what is affecting your blog negatively. Try a few
free trials online and find out what is keeping your blog off of the first page of Google’s search
engine results.

Install a comment section
This has its positive and negative sides. The positive side that you should concentrate on is the
fact that it is very good for your on-page SEO. Every time a comment is uploaded onto your
blog, the Google algorithm marks it as an update. This has no positive affect in the short term,
but in the long term, it is very good for your blogs Google ranking.
Older websites and blogs are ranked higher than newer websites and blogs IF they have been
frequently updated whilst they were online. People posting comments are a way of showing
that your site is being updated--even when you are not doing the updating yourself. You can
also pour a little fuel on the fire and answer some of the comments. It is a good way of getting
commenters to come back and comment again.

Author’s bio: My name is Sonia Jackson. I represent the web-site dissertation-writing-help.org. We’ll help you to solve all problems with writing different dissertations and research papers in a short time; we’ll answer all your questions and give you useful advices.

If you would like to write for bloggertrix, check our guest posting guidelines.
Read More

Tuesday, November 13, 2012

Add Mega Floating Social Network Sharing Buttons Bar

In this  tutorial im gonna  explain   how  to  add largest floating social  network  icons.  you  can
add this social icon bar on top, bottom, left and right.Im using CSS and HTML for this.Css code
is too long.Copy paste it well.You can  link this all icons to your profile. Its easy. If you want to get my earlier post about social buttons and icons
, just click here to get it.

Floating+social+icons
Demo

1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

Select-template

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

/* The CSS Code for the menu starts here bloggertrix.com */
/* CoolDoood Social Network Tabs */
.MBC ul, .MBC li, .MBC h3 {
padding: 0;
margin: 0;
list-style: none!important;
}
.MBC {
font-size: 12px;
color: #666;
}
.active.MBC .mbc-slider {
-webkit-box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.6);
}
.MBC a {
text-decoration:none;
}
.MBC-content {
position: relative;
}
.social-tabs li {
padding: 4px;
width: 27px;
height: 26px;
z-index: 10;
}
.active .social-tabs li {
z-index: 10;
-webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6);
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6);
}
.active .social-tabs li.active {
z-index: 11;
-webkit-box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.6);
}
.static .social-tabs {
padding-left: 8px;
}
.static .social-tabs li {
float: left;
margin-right: 2px;
border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
}
.top .social-tabs {
padding-left: 8px;
}
.top.align-right .social-tabs {
padding-left: 0;
padding-right: 8px;
}
.top .social-tabs li {
padding: 3px 4px;
margin-right: 2px;
float: left;
border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
}
.right .social-tabs {
padding-top: 8px;
}
.right .social-tabs li {
margin: 0 0 2px 0;
border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
}
.bottom .social-tabs {
padding-left: 8px;
}
.bottom.align-right .social-tabs {
padding-left: 0;
padding-right: 8px;
}
.bottom .social-tabs li {
padding: 4px 4px 2px 4px;
margin: 0 2px 0 0;
float: left;
border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
}
.left .social-tabs {
padding-top: 8px;
}
.left .social-tabs li {
margin: 0 0 2px 0;
border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
}
.mbc-slider, .MBC-slider {
clear: both;
overflow: hidden;
}
.tab-content {
position: relative;
overflow: hidden;
z-index: 11;
background: url no-repeat center 200px;
}
.tab-content ul {
font-size: 11px;
}
.tab-content .tab-inner {
background: #fff;
overflow: hidden;
}
.tab-inner ul {
padding: 0 10px;
}
.tab-inner .profile {
position: relative;
padding: 10px;
border-bottom: 1px solid #ccc;
background: #ececec;
}
.tab-inner .profile h3 {
margin: 0;
padding: 3px 0 3px 26px;
position: relative;
}
.tab-inner .profile h3 a {
font-size: 14px;
text-decoration: none;
}
.tab-inner .profile h3, .tab-inner .profile h3 a {
color: #555;
text-shadow: 0 1px 0 #fff;
}
.tab-inner .MBC-btn {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
font: bold 12px/14px Arial, sans-serif;
display:inline-block;
text-decoration:none;
outline:none;
padding: 5px 8px;
background: #fcfcfc url repeat-x 0 0;
color: #fff;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}
.tab-inner .MBC-btn:hover{
background-position: 0 100%;
color: #fff;
}
.tab-inner .profile a.avatar{
display:block;
float:left;
text-decoration:none;
outline:none;
margin:0 10px 0 0
}
.tab-inner .profile a.avatar img{
padding:1px;
background: #fff;
border: 3px solid #ccc;
display:block
}
.tab-rss .profile h3 {
background: urlno-repeat 0 4px;
}
.tab-flickr .profile h3 {
background: url no-repeat 0 4px;
}
.tab-delicious .profile h3 {
background: url) no-repeat 0 4px;
}
.tab-twitter .profile h3 {
background: url no-repeat 0 4px;
}
.tab-facebook .profile h3 {
background: url no-repeat 0 4px;
}
.tab-fblike .profile h3 {
background: url no-repeat 0 4px;
}
.tab-fbrec .profile h3 {
background: url no-repeat 0 4px;
}
.tab-google .profile h3 {
background: url no-repeat 0 4px;
}
.tab-youtube .profile h3 {
background: url no-repeat 0 4px;
}
.tab-pinterest .profile h3 {
background: url no-repeat 0 4px;
}
.tab-lastfm .profile h3 {
background: url no-repeat 0 4px;
}
.tab-dribbble .profile h3 {
background: url no-repeat 0 4px;
}
.tab-vimeo .profile h3 {
background: url no-repeat 0 4px;
}
.tab-stumbleupon .profile h3 {
background: url no-repeat 0 4px;
}
.static .mbc-slider, .static .MBC-slider {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.static .tab-content {
padding: 10px;
}
.static .tab-inner {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.top .mbc-slider, .top .MBC-slider {
border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
}
.top .tab-inner {
border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
}
.top .tab-content {
padding: 0 10px 10px 10px;
}
.right .mbc-slider, .right .MBC-slider {
border-radius: 10px 0 0 10px;
-webkit-border-radius: 10px 0 0 10px;
-moz-border-radius: 10px 0 0 10px;
}
.right .tab-inner {
border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
}
.right .tab-content {
padding: 10px 0 10px 10px;
}
.bottom .mbc-slider, .bottom .MBC-slider {
border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
}
.bottom .tab-inner {
border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
}
.bottom .tab-content {
padding: 10px 10px 0 10px;
}
.left .mbc-slider, .left .MBC-slider {
border-radius: 0 10px 10px 0;
-webkit-border-radius: 0 10px 10px 0;
-moz-border-radius: 0 10px 10px 0;
}
.left .tab-inner {
border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
}
.left .tab-content {
padding: 10px 10px 10px 0;
}
.MBC .stream, .mbc .stream {
overflow: hidden;
}
.stream p {
margin: 0;
padding: 0;
}
.tab-inner ul li {
padding: 5px 0 20px 0;
margin: 0;
position: relative;
overflow: hidden;
background: none;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
}
.tab-inner ul li .thumb {
float: left;
margin: 0 10px 0 0;
}
.tab-inner ul li .thumb img {
border: 3px solid #ececec;
padding: 1px;
background: #fff;
}
.tab-inner ul li .logo {
margin-bottom: 3px;
}
.tab-inner ul li .title {
display: block;
font: bold 12px Arial, sans-serif;
margin-bottom: 3px;
}
.tab-inner ul li .title.clear {
clear: both;
}
.tab-inner ul li .text {
display: block;
}
.tab-inner ul li .text br{
display: none;
}
.tab-inner ul li .date {
position: absolute;
bottom: 5px;
left: 0;
font-style: italic;
color: #999;
font-size: 90%;
}
.tab-inner ul li .meta {
display: block;
font-size: 90%;
color: #999;
}
.tab-inner ul li .meta span {
margin: 0 8px 5px 0;
display: block;
float: left;
padding: 0 0 0 15px;
line-height: 12px;
}
.tab-dribbble .tab-inner ul li .thumb img {
margin-bottom: 5px;
}
.tab-lastfm .tab-inner ul li .title {
background: url no-repeat 0 0;
padding-left: 17px;
margin-bottom: 0;
}
.tab-google .tab-inner ul li .title {
margin-bottom: 5px;
}
.tab-vimeo .tab-inner ul li .text {
margin-bottom: 5px;
}
.tab-inner ul li .meta span.plusones {
padding-left: 0;
}
.tab-inner ul li .meta span.shares {
background: url no-repeat 0 0;
padding-left: 20px;
}
.tab-inner ul li .meta span.views {
background: url no-repeat 0 0;
padding-left: 18px;
}
.tab-inner ul li .meta span.likes {
background: url no-repeat 0 0;
padding-left: 16px;
}
.tab-inner ul li .meta span.comments {
background: url no-repeat 0 0;
}
.tab-inner ul li .meta span.users {
background: url no-repeat 0 0;
}
.tab-inner ul li .meta span.videos {
background: url no-repeat 0 0;
padding-left: 16px;
}
.tab-inner ul li.MBC-error {
color: #990000;
}
.MBC-loading {
background: url no-repeat 10px center;
padding: 10px 30px 10px 42px;
}
.controls {
position: absolute;
left: 10px;
height: 20px;
padding: 5px 0;
z-index: 12;
display: none;
background: url) repeat 0 0;
}
.controls ul {
padding: 0 10px;
}
.controls li {
display: inline;
}
.controls a {
display: block;
width: 20px;
height: 20px;
float: left;
margin-right: 4px;
background: url no-repeat 0 0;
}
.controls .prev {
background-position: -40px 0;
}
.controls .next {
background-position: -60px 0;
}
.controls .play {
background-position: 0 0;
}
.controls .pause {
background-position: -20px 0;
}
.controls .mbc-close {
background-position: -80px 0;
}
.controls .prev:hover {
background-position: -40px -20px;
}
.controls .next:hover {
background-position: -60px -20px;
}
.controls .play:hover {
background-position: 0 -20px;
}
.controls .pause:hover {
background-position: -20px -20px;
}
.controls .mbc-close:hover {
background-position: -80px -20px;
}
.static .controls {
bottom: 10px;
}
.top .controls {
bottom: 10px;
}
.right .controls {
bottom: 10px;
right: 0;
}
.bottom .controls {
bottom: 0;
}
.left .controls {
bottom: 10px;
left: 0;
}
.tab-google .tab-inner .google-page {
overflow: hidden;
height: 55px;
border-bottom: 1px solid #ccc;
}
.tab-google .tab-inner .google-page.standard {
height: 117px;
}
.tab-google .tab-inner .google-page.small iframe{
height: 69px;
margin-bottom: 0;
}
.tab-google .tab-inner .google-page.standard iframe{
height: 131px;
margin-bottom: 0;
}
.tab-flickr .tab-inner ul {
padding-top: 5px;
}
.tab-flickr .tab-inner li {
float: left;
padding: 0;
margin: 0 5px 5px 0;
border: none;
}
.tab-flickr .tab-inner li .thumb {
margin: 0;
}
.tab-flickr .tab-inner li img{
height: 70px;
}
.youtube-subscribe {
overflow: hidden;
height: 105px;
width: 100%;
border: 0;
}
.tab-digg .digg-widget .digg-widget-head.premium, .tab-digg .digg-widget .digg-widget-head {
height: auto;
overflow: hidden;
padding: 10px;
position: relative;
white-space: nowrap;
border: none;
border-radius: 0;
-webkit-border-radius: 0;
}
.tab-digg .digg-widget .digg-widget-head h2 {
font-size: 14px;
font-weight: bold;
line-height: 20px;
margin: 0;
overflow: hidden;
padding: 0 0 0 26px;
white-space: nowrap;
text-shadow: 0 1px 0 #fff;
background: url no-repeat 0 0;
}
.tab-digg .digg-widget .digg-widget-head a {
top: 12px;
}
.tab-digg .digg-widget-content {
border-top: 1px solid #ccc;
}
.tab-content.tab-linkedin .tab-inner {
background: #fff url(../images/loader.gif) no-repeat center center;
}
.tab-twitter,.tab-twitter .MBC-btn, li.active.MBC-twitter, li.MBC-twitter:hover{background-color:#4ec2dc;}.tab-facebook,.tab-facebook .MBC-btn, li.active.MBC-facebook, li.MBC-facebook:hover{background-color:#3b5998;}.tab-fblike,.tab-fblike .MBC-btn, li.active.MBC-fblike, li.MBC-fblike:hover{background-color:#3b5998;}.tab-fbrec,.tab-fbrec .MBC-btn, li.active.MBC-fbrec, li.MBC-fbrec:hover{background-color:#3b5998;}.tab-google,.tab-google .MBC-btn, li.active.MBC-google, li.MBC-google:hover{background-color:#2d2d2d;}.tab-rss,.tab-rss .MBC-btn, li.active.MBC-rss, li.MBC-rss:hover{background-color:#FF9800;}.tab-flickr,.tab-flickr .MBC-btn, li.active.MBC-flickr, li.MBC-flickr:hover{background-color:#f90784;}.tab-delicious,.tab-delicious .MBC-btn, li.active.MBC-delicious, li.MBC-delicious:hover{background-color:#3271CB;}.tab-youtube,.tab-youtube .MBC-btn, li.active.MBC-youtube, li.MBC-youtube:hover{background-color:#DF1F1C;}.tab-digg,.tab-digg .MBC-btn, li.active.MBC-digg, li.MBC-digg:hover{background-color:#195695;}.tab-pinterest,.tab-pinterest .MBC-btn, li.active.MBC-pinterest, li.MBC-pinterest:hover{background-color:#CB2528;}.tab-lastfm,.tab-lastfm .MBC-btn, li.active.MBC-lastfm, li.MBC-lastfm:hover{background-color:#C90E12;}.tab-dribbble,.tab-dribbble .MBC-btn, li.active.MBC-dribbble, li.MBC-dribbble:hover{background-color:#F175A8;}.tab-vimeo,.tab-vimeo .MBC-btn, li.active.MBC-vimeo, li.MBC-vimeo:hover{background-color:#4EBAFF;}.tab-stumbleupon,.tab-stumbleupon .MBC-btn, li.active.MBC-stumbleupon, li.MBC-stumbleupon:hover{background-color:#EB4924;}.tab-tumblr,.tab-tumblr .MBC-btn, li.active.MBC-tumblr, li.MBC-tumblr:hover{background-color:#365472;}.tab-deviantart,.tab-deviantart .MBC-btn, li.active.MBC-deviantart, li.MBC-deviantart:hover{background-color:#B8C529;}.tab-linkedin,.tab-linkedin .MBC-btn, li.active.MBC-linkedin, li.MBC-linkedin:hover{background-color:#006DA7;}.social-tabs li {background:#7d7d7d;}

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

<div id="MBC-2" class="MBC right align-top sliding" style="width: 360px; position: fixed; margin-right: -360px; top: 10px; right: 0px; "><div id="social-tabs" class="MBC-content">
<ul class="social-tabs" style="position: absolute; top: 0px; left: 0px; margin-left: -35px; width: 35px; ">
<li class="MBC-twitter first"><a href="#" rel="0" title="twitter"><img src="http://1.bp.blogspot.com/-xBOKgPOlVjY/UBVYAYzsGtI/AAAAAAAACQo/AMDko1yTznw/s320/twitter.png" alt="" rel="twitter"></a></li>
<li class="MBC-facebook"><a href="#" rel="1" title="facebook"><img src="http://1.bp.blogspot.com/--6Q5YLxZUKY/UBVWkh4rn1I/AAAAAAAACPI/HCcVF2YTJEI/s320/facebook.png" alt="" rel="facebook"></a></li>
<li class="MBC-fblike"><a href="#" rel="2" title="fblike"><img src="http://3.bp.blogspot.com/-E8TsQgkPb0A/UBVWk_Q0fRI/AAAAAAAACPU/1RfGobJ8CRo/s320/fblike.png" alt="" rel="fblike"></a></li>
<li class="MBC-fbrec"><a href="#" rel="3" title="fbrec"><img src="http://2.bp.blogspot.com/-eTJffp_XqN4/UBVXYDUCXoI/AAAAAAAACPg/DsDQ5g4R45g/s320/fbrec.png" alt="" rel="fbrec"></a></li>
<li class="MBC-google"><a href="#" rel="4" title="google"><img src="http://1.bp.blogspot.com/-VpucjHQuLWk/UBVXYK-ZfbI/AAAAAAAACPs/WRJ3wLtJSfg/s320/google.png" alt="" rel="google"></a></li>
<li class="MBC-linkedin"><a href="#" rel="5" title="linkedin"><img src="http://1.bp.blogspot.com/-9EjdzY2Cvs8/UBVY0XugIFI/AAAAAAAACRM/W2afpfxj3cI/s320/linkedin.png" alt="" rel="linkedin"></a></li>
<li class="MBC-rss"><a href="#" rel="6" title="rss"><img src="http://2.bp.blogspot.com/-iUNrYWpW988/UBVXYxBHMCI/AAAAAAAACQQ/WOyuBxGREkA/s320/rss.png" alt="" rel="rss"></a></li>
<li class="MBC-delicious"><a href="#" rel="7" title="delicious"><img src="http://1.bp.blogspot.com/--FNvyhhovqU/UBVWkB89feI/AAAAAAAACOk/i1tBmlFgaV0/s320/delicious.png" alt="" rel="delicious"></a></li>
<li class="MBC-youtube"><a href="#" rel="8" title="youtube"><img src="http://4.bp.blogspot.com/-vbN6ifuNgGI/UBVYA3CJNOI/AAAAAAAACRA/YMiLLa8gW6w/s320/youtube.png" alt="" rel="youtube"></a></li>
<li class="MBC-digg"><a href="#" rel="9" title="digg"><img src="http://2.bp.blogspot.com/-lqiOg4rwRyE/UBVWkR21FhI/AAAAAAAACOw/RVl9vY-rU0I/s320/digg.png" alt="" rel="digg"></a></li>
<li class="MBC-pinterest"><a href="#" rel="10" title="pinterest"><img src="http://1.bp.blogspot.com/-O6jVOTHrd2Y/UBVXYus_ZjI/AAAAAAAACQE/KBGD_veEFj8/s320/pinterest.png" alt="" rel="pinterest"></a></li>
<li class="MBC-lastfm"><a href="#" rel="11" title="lastfm"><img src="http://2.bp.blogspot.com/-T-aRYyLuBhs/UBVXYVrtkGI/AAAAAAAACP4/bkwq53L15Z8/s320/lastfm.png" alt="" rel="lastfm"></a></li>
<li class="MBC-dribbble"><a href="#" rel="12" title="dribbble"><img src="http://3.bp.blogspot.com/-JxPFx4fln0s/UBVWkUY6ijI/AAAAAAAACO8/DHtm3WXhL0I/s320/dribbble.png" alt="" rel="dribbble"></a></li>
<li class="MBC-vimeo"><a href="#" rel="13" title="vimeo"><img src="http://4.bp.blogspot.com/-8I2NKLKb2xA/UBVYAsBm5EI/AAAAAAAACQ0/FoMzvNKtMdE/s320/vimeo.png" alt="" rel="vimeo"></a></li>
<li class="MBC-stumbleupon"><a href="#" rel="14" title="stumbleupon"><img src="http://4.bp.blogspot.com/-XutABgjQhno/UBVYAS-3SrI/AAAAAAAACQc/d3_vS_N_vKs/s320/stumbleupon.png" alt="" rel="stumbleupon"></a></li>
</ul><ul class="MBC-slider"><li class="tab-content tab-twitter tab-active" style="height: 535px; width: 350px; position: relative; display: list-item; ">
<div class="tab-inner" style="height: 535px; width: 350px; "></div></li>
<li class="tab-content tab-facebook" style="height: 535px; width: 350px; position: relative; display: none; ">
<div class="tab-inner" style="height: 535px; width: 350px; "></div></li>
<li class="tab-content tab-fblike" style="height: 535px; width: 350px; position: relative; display: none; ">
<div class="tab-inner" style="height: 535px; width: 350px; "></div></li>
<li class="tab-content tab-fbrec" style="height: 535px; width: 350px; position: relative; display: none; ">
<div class="tab-inner" style="height: 535px; width: 350px; "></div></li>
<li class="tab-content tab-google" style="height: 535px; width: 350px; position: relative; display: none; ">
<div class="tab-inner" style="height: 535px; width: 350px; "></div></li>
<li class="tab-content tab-linkedin" style="height: 535px; width: 350px; position: relative; display: none; ">
<div class="tab-inner" style="height: 535px; width: 350px; "></div></li>
<li class="tab-content tab-rss" style="height: 535px; width: 350px; position: relative; display: none; ">
<div class="tab-inner" style="height: 535px; width: 350px; "></div></li>
<li class="tab-content tab-delicious" style="height: 535px; width: 350px; position: relative; display: none; ">
<div class="tab-inner" style="height: 535px; width: 350px; "></div></li>
<li class="tab-content tab-youtube" style="height: 535px; width: 350px; position: relative; display: none; ">
<div class="tab-inner" style="height: 535px; width: 350px; "></div></li>
<li class="tab-content tab-digg" style="height: 535px; width: 350px; position: relative; display: none; ">
<div class="tab-inner" style="height: 535px; width: 350px; "></div></li>
<li class="tab-content tab-pinterest" style="height: 535px; width: 350px; position: relative; display: none; ">
<div class="tab-inner" style="height: 535px; width: 350px; "></div></li>
<li class="tab-content tab-lastfm" style="height: 535px; width: 350px; position: relative; display: none; ">
<div class="tab-inner" style="height: 535px; width: 350px; "></div></li>
<li class="tab-content tab-dribbble" style="height: 535px; width: 350px; position: relative; display: none; ">
<div class="tab-inner" style="height: 535px; width: 350px; "></div></li>
<li class="tab-content tab-vimeo" style="height: 535px; width: 350px; position: relative; display: none; ">
<div class="tab-inner" style="height: 535px; width: 350px; "></div></li>
<li class="tab-content tab-stumbleupon" style="height: 535px; width: 350px; position: relative; display: none; ">
<div class="tab-inner" style="height: 535px; width: 350px; "></div></li>
</ul><div class="controls" style="width: 350px; display: none; "><ul><li><a href="#" class="pause"></a></li>
<li><a href="#" class="prev"></a></li><li><a href="#" class="next"></a></li><li><a href="#" class="mbc-close close"></a></li></ul></div></div></div>

Replace # with your links.There have more, be patient to do it.
You can replace Right with bottom, left,top.

10. Now save your HTML/Javascript'.

    You are done...
Read More