Facebook is one of the leading social networks and a means by which many bloggers drive traffic to their blogs. Adding a facebook page like button on your blog can help you get many fans to your facebook fan page.
This tutorial will teach you how to ad a facebook Floating Like widget on your blogger blog. example on the photo below:
Follow the below steps to implement this on your blogger blog…
1. Goto your blogger dashboard
2. Select the blog you want to add it to and navigate to ‘Templates’
3. Click EDIT HTML and then press CTRL F to find the below code
</head>
4. Just above the code above, add the below codes
Some Templates already have the below code. so just make sure yours doesnt have it before implementing it.<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js’ type=’text/javascript’/>
5. Now goto Layout > Add Gadget > HTML/Javascript, then put the below code in it.
6. Save<script type=”text/javascript”> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(“.abtlikebox”).hover(function() {jQuery(this).stop().animate({right: “0”}, “medium”);}, function() {jQuery(this).stop().animate({right: “-250”}, “medium”);}, 500);}); /*]]>*/ </script> <style type=”text/css”> .abtlikebox{background: url(“https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuFC9EXTLDLMdwQ4ezMZPPqeR_waQyHPDOV6hskzGSYDRCdLJiCMQ35vZI4lMqbejIqDYApqHLBXYJlsTBuyDXxhYcxbI0a1IPHHgJHLj7IAn3vWipT0KRcEnBHhatM5FDzQV2P6CSus4/s320/fb1-right.png”) no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .abtlikebox span{bottom: 4px;font: 8px “lucida grande”,tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .abtlikebox span a{color: gray;text-decoration:none;} .abtlikebox span a:hover{text-decoration:underline;} } </style>
<div class=”abtlikebox”>
<div>
<iframe frameborder=”0″ scrolling=”no” src=”http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fetechjournal&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270″ style=”background: #fafafa; border: white; height: 270px; overflow: hidden; width: 245px;”></iframe>Widget by :<a href=”http://www.etechvilla.com.com/”> The eTech Journal</a> </div>
</div>
Customization: Chance etechjournal in the above code to your facebook page usename.
#Conclusion: Over To You Boss!!! What do you think About this Post?? Do you have further clearifications? Feedbacks? Suggestions? Or Inquiry? Why Not Use The comment Box To Communicate With Us? We will be Happy If you Do.
0 Comments