This is new
version
with updated. It have nice style. you can check it
from demo Im using just CSS and HTML for this
tutorial
with updated. It have nice style. you can check it
from demo Im using just CSS and HTML for this
tutorial
1.
Log in to blogger account and Click drop down.
2. Now select "Template"
Like Below.
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
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsiB0FYUUTx1bYtpP6c943KDGvJdJopvctRch2GnzLp_1XHEH7Mn0FkQj3PLAY5xFB7nOtpCE70X3YllRZmvILKZU47vy-iEZnys-WoBDe2jM_wY-wiqKJqm5XD1Axb2-cr04SQgx2hjM/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsiB0FYUUTx1bYtpP6c943KDGvJdJopvctRch2GnzLp_1XHEH7Mn0FkQj3PLAY5xFB7nOtpCE70X3YllRZmvILKZU47vy-iEZnys-WoBDe2jM_wY-wiqKJqm5XD1Axb2-cr04SQgx2hjM/s1600/bloggertrix-button.png)
0 -27px no-repeat;}
div#socialbox ul li p
a.socialbox-button:active{
background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsiB0FYUUTx1bYtpP6c943KDGvJdJopvctRch2GnzLp_1XHEH7Mn0FkQj3PLAY5xFB7nOtpCE70X3YllRZmvILKZU47vy-iEZnys-WoBDe2jM_wY-wiqKJqm5XD1Axb2-cr04SQgx2hjM/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><a
href="http://www.facebook.com/bloggertrix" target="_blank"
title="Like on Facebook"><img alt="Facebook"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7I337OGP_WxMDbPLMWWLvIwKZEfjHqNVwDEqDeJZ5sIL1IbwMoSoI7IomvXkXRIbUa4ATZ6oYZ-6ylnbdCDdZkXoStkRzJOXboYdsjK6qHnHYTsj1Takamy91RY6HKC9rldJCA9ReAB4/s1600/bloggertrix-facebook.png"
/></a>2,563 Fans
<a class="socialbox-button"
href="http://www.facebook.com/bloggertrix" target="_blank"
title="Like on Facebook">Like</a><br />
</li>
<li><a
href="http://twitter.com/bloggertrix" target="_blank"
title="Follow on Twitter"><img alt="Twitter"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPbS9dasUKnWFPdUk6UJrjBHxuGsAOUqJSNTA7O3qd9Xt7AlbyWzr36145b-tb9sNs_XBJiMwyseiLKnWn2gBrxWIQBRKiBXuVJlhAiEYm8rZpw-puTPYwfaSXHkhxsqXn_uSISgJVrWQ/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>
</li>
<li><a
href="http://feeds.feedburner.com/bloggertrix"
target="_blank" title="Subscribe to Feed"><img
alt="Feedburner"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibUOArp6o7yM32VGmiuOH09aPDOFhWG8_4MUM_hiBHQcexb2zkj3y5bh2vkUhMhDYj4L5yURj_VBC3oOdstZFAW9qHo_igMbap7hC2poyWdqXDUnmFXNrIQ3JRH6wuuuTy-IYLl3ie-Lk/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>
</li>
<li><a
href="http://www.plus.google.com/107955298793879607964"
target="_blank" title="Subscribe to Feed"><img
alt="Feedburner"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGkdhJ2JPvwMqy1Q0CY8p0NVrKicYsnbsFhu6_jqf4BVEdbhRa0zHQ2d30TwGf1i3fbYksuzMNGFgq0Z2u8670w9NbKflRb28WVs6ST_J-yU9XVdnjMvBrCesc0jK4WlJ36WuBbXygEYo/s1600/Google-plus-icon.png"
/></a>1,151 Followers
<a
class="socialbox-button"
href="http://www.plus.google.com/107955298793879607964"
target="_blank" title="Subscribe to
Feed">Follow</a>
</li>
<li><a
href="http://pinterest.com/bloggertrix/"
target="_blank" title="Subscribe to Feed"><img
alt="Feedburner"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja2-LyTuJ0ll0GuXF3y_i9knzt8rIJFylMASk0vC2CUYBoFBpuPg5aBFGaVYnOoRPDTzQ2CRzetJ0NFAqd0YrQ_KzfcMr4Eor3TIbZeY5wWpD-SKo7tqSg0g1NktZ63G3w3jSp9w9JQwA/s1600/Pinterest-icon.png"
/></a>112 Pinterest
<a
class="socialbox-button" href="http://pinterest.com/bloggertrix/"
target="_blank" title="Subscribe to
Feed">Pinterest</a>
</li>
</ul>
</div>
Replace bloggertrix with your usernames.
10. Now save your HTML/Javascript'.
You are done...
0 comments
If you find some links broken then tell me by commenting, I'll repair.
Please don't spam as it will be deleted.
If you like this post please share it with your friends.