Add Social network Plugin

1.Facebook Floating:
This feature is enabling people to see the facebook like button whenever they browse on your site. You can get this on ColoBlogs just cop an paste the codes that made by ColoBlogs no need of knowledge, we wil tell you every step you should follow.
Look the following Screenshot, this happen before the mouse is hovered on it:

And when someone place a mouse on it, automatically it open and Like button appear. Look The followng shot. If you want to see demo, look at Right side of this page and hover it.

The following are the steps you should follow in order to make this on your blog.

Go to your blog dashboard. GO to Layout
Go to Add Gadget.
The window will pop-up, and then choose HTML/JavaScript
You are almost done! Now You will see form to fill it out,
On Title Write Anything Example Facebook Like. Then in Content Copy and Paste Code Below

<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".theblogwidgets").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .theblogwidgets{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqn3hqNMhE2jMOrBJDBeM1Fp44IgN8xfbju2VThZbbzFBZdWAwBnMf-azeovLuXC8U7ZU0m7CKtIPvsmlgmU5Ll3ISMg4fl9UuEh2xUBwnY9GxjEsqK5hwvnYaaCjP9uRiIRUwpw7wMVv4/") 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%;} .theblogwidgets div{ padding: 0; margin-right:-8px; border:4px solid  #3b5998; background:#fafafa;} .theblogwidgets span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .theblogwidgets span a{color: gray;text-decoration:none;} .theblogwidgets span a:hover{text-decoration:underline;} } </style><div class="theblogwidgets" style="">
<div>
 <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fcoloblogs&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;color:000;"></iframe><span><center>
<a style="color:#a8a8a8;font-size:8px;" href="http://faceupward.com">Face Upward</a> - <a style="color:#a8a8a8;font-size:8px;" href="http://www.colloblogs.blogspot.com">Create a Blog! Free</a></center>
</span></div>
</div>

The button will be added but won't function. So in order to allow it functioning you must configure it. Go to Template > Edit HTML.

Now you are editing your template! Be careful but don't afraid. So edit your template and press CTRL +F This means you are searching code on your template. Search for <head> then paste the following code just above(in front of) it

Add Social network Plugin

How to Customize

No comments:

Post a Comment