This tutorial will quickly explain you, how to add a fixed-floating twitter follow me badge to your blog's layout.
1. Log in to Blogger
2. Go to Layout -> Edit HTML, and find this code in the template:
</head>3. Immediately ABOVE/BEFORE that code, paste these lines of code:
4. Finally in Layout -> Page Elements -> Add a Gadget (HTML/JavaScript type), add this code:
<!--FOLLOW-ME-STARTS-->
<style type='text/css'>
.feedbacktw {
width: 31px;
height: 136px;
display: block;
font-size: 10px;
text-decoration: none;
background-repeat:no-repeat;
background-image:url(http://i26.tinypic.com/1zb4509.jpg);
position:fixed;
top:35%;
left:2px;
}
.feedbacktw:hover {
width: 31px;
height: 136px;
display: block;
text-decoration: none;
background-repeat:no-repeat;
background-image:url(http://i26.tinypic.com/xpu99c.jpg);
position:fixed;
top:35%;
leftt:10px;
}
</style>
<!--FOLLOW-ME-STOPS-Widget-by-http://rnhckr.com-->
<!--FOLLOW-ME-STARTS--><a style="display:scroll;" href="http://twitter.com/rnhckr" class="feedbacktw"> </a><!--FOLLOW-ME-STOPS-->Change the link in RED color to your own Twitter profile.
The two images used in this hack are designed by me. Presently I have made the images with only black and blue background colors. You may use both/any one in your blog. If you do not want to show a different image on mouse-hover then delete the .feedbacktw:hovercode in step 3, and add only this code:
<!--FOLLOW-ME-STARTS-->
<style type='text/css'>
.feedbacktw {
width: 31px;
height: 136px;
display: block;
font-size: 10px;
text-decoration: none;
background-repeat:no-repeat;
background-image:url(http://i26.tinypic.com/1zb4509.jpg);
position:fixed;
top:35%;
right:2px;
}
</style>
<!--FOLLOW-ME-STOPS-Widget-by-http://rnhckr.com-->
In case you want the same follow-me badge with some other background color (other than black and blue), then tell me the hex-HTML-color code through comments below...
0 comments:
Post a Comment