Follow Following Steps To Add Above Widget
1.Go To Blogger.
2.Sing In>>Layout/Design>>Add Gadget>>Html/Java Script
3.Paste Dollowing Code There(Leave Title Blank)
CODE:
<div class="border-rotate">
<a class="facebook" href="http://www.facebook.com/Allin1web?bookmark_t=page"></a>
<a class="twitter" href="https://twitter.com/Allin1web"></a>
<a class="googlep" href="https://plus.google.com/Your User No."></a>
</div>
<style>
.border-rotate {list-style-type:none;position:fixed;right:-1px;top:35%;border:1px solid #c4c4c4;background:#f2f2f2;border-top-left-radius:10px;border-bottom-left-radius:10px;}
.facebook {background:url(http://3.bp.blogspot.com/-tAZL7MKp3CA/UW92PJX09WI/AAAAAAAABqM/GjQKdQ8TDkY/s1600/border+buttons.png);width:40px;height:40px;background-position: 0px 0px;display:block;zoom:1.2;margin:5px;}
.facebook:hover {background:url(http://3.bp.blogspot.com/-tAZL7MKp3CA/UW92PJX09WI/AAAAAAAABqM/GjQKdQ8TDkY/s1600/border+buttons.png);width:40px;height:40px;background-position: 0px -150px;}
.twitter {background:url(http://3.bp.blogspot.com/-tAZL7MKp3CA/UW92PJX09WI/AAAAAAAABqM/GjQKdQ8TDkY/s1600/border+buttons.png);width:40px;height:40px;background-position: 0px -50px;zoom:1.2;display:block;margin:5px;}
.twitter:hover {background:url(http://3.bp.blogspot.com/-tAZL7MKp3CA/UW92PJX09WI/AAAAAAAABqM/GjQKdQ8TDkY/s1600/border+buttons.png);width:40px;height:40px;background-position: 0px -200px;}
.googlep {background:url(http://3.bp.blogspot.com/-tAZL7MKp3CA/UW92PJX09WI/AAAAAAAABqM/GjQKdQ8TDkY/s1600/border+buttons.png);width:40px;height:40px;background-position: 0px -100px;zoom:1.2;display:block;margin:5px;}
.googlep:hover {background:url(http://3.bp.blogspot.com/-tAZL7MKp3CA/UW92PJX09WI/AAAAAAAABqM/GjQKdQ8TDkY/s1600/border+buttons.png);width:40px;height:40px;background-position: 0px -250px;}
</style>
Customization<a class="facebook" href="http://www.facebook.com/Allin1web?bookmark_t=page"></a>
<a class="twitter" href="https://twitter.com/Allin1web"></a>
<a class="googlep" href="https://plus.google.com/Your User No."></a>
</div>
<style>
.border-rotate {list-style-type:none;position:fixed;right:-1px;top:35%;border:1px solid #c4c4c4;background:#f2f2f2;border-top-left-radius:10px;border-bottom-left-radius:10px;}
.facebook {background:url(http://3.bp.blogspot.com/-tAZL7MKp3CA/UW92PJX09WI/AAAAAAAABqM/GjQKdQ8TDkY/s1600/border+buttons.png);width:40px;height:40px;background-position: 0px 0px;display:block;zoom:1.2;margin:5px;}
.facebook:hover {background:url(http://3.bp.blogspot.com/-tAZL7MKp3CA/UW92PJX09WI/AAAAAAAABqM/GjQKdQ8TDkY/s1600/border+buttons.png);width:40px;height:40px;background-position: 0px -150px;}
.twitter {background:url(http://3.bp.blogspot.com/-tAZL7MKp3CA/UW92PJX09WI/AAAAAAAABqM/GjQKdQ8TDkY/s1600/border+buttons.png);width:40px;height:40px;background-position: 0px -50px;zoom:1.2;display:block;margin:5px;}
.twitter:hover {background:url(http://3.bp.blogspot.com/-tAZL7MKp3CA/UW92PJX09WI/AAAAAAAABqM/GjQKdQ8TDkY/s1600/border+buttons.png);width:40px;height:40px;background-position: 0px -200px;}
.googlep {background:url(http://3.bp.blogspot.com/-tAZL7MKp3CA/UW92PJX09WI/AAAAAAAABqM/GjQKdQ8TDkY/s1600/border+buttons.png);width:40px;height:40px;background-position: 0px -100px;zoom:1.2;display:block;margin:5px;}
.googlep:hover {background:url(http://3.bp.blogspot.com/-tAZL7MKp3CA/UW92PJX09WI/AAAAAAAABqM/GjQKdQ8TDkY/s1600/border+buttons.png);width:40px;height:40px;background-position: 0px -250px;}
</style>
- Change red colour Allin1-web & Your User No with your Facebook page URL,Twitter User ID & Google+ User No.
- Change Position From Right To Left.
5.You Are Done.
Related Widget:
No comments:
Post a Comment
Notice: Don't add "backlink". Text with Link will automatically Removed.