Creating Facebook Like Box Drift with Close Button

On this occasion we will discuss Grid Drift Fans Facebook Page. Facebook fan page like box will appear and float on the blog in a fixed position. Facebook Like Box will adhere to the bottom or to the top if the page scroll. Box is equipped with a close button to disable the gadjet. Well curious how it looks on your blog follow these steps:

1. Log in to Blogger

2. Go to Design -> Page Elements
3. Add gadjet
4. Choose HTML / JavaScript
5. Enter the following code in HTML / JavaScript files:

<style type="text/css">#topbar{position:absolute;padding-left:-100px;background-color: transparancy;width: 300px;visibility: hidden;z-index: 100;}</style><script type="text/javascript">var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser sessionvar startX = 30 //set x offset of bar in pixelsvar startY = 5 //set y offset of bar in pixelsvar verticalpos="fromtop" //enter "fromtop" or "frombottom"function iecompattest(){return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body}function get_cookie(Name) {var search = Name + "="var returnvalue = "";if (document.cookie.length > 0) {offset = document.cookie.indexOf(search)if (offset != -1) {offset += search.lengthend = document.cookie.indexOf(";", offset);if (end == -1) end = document.cookie.length;returnvalue=unescape(document.cookie.substring(offset, end))}}return returnvalue;}function closebar(){if (persistclose)document.cookie="remainclosed=1"document.getElementById("topbar").style.visibility="hidden"}function staticbar(){barheight=document.getElementById("topbar").offsetHeightvar ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;var d = document;function ml(id){var el=d.getElementById(id);if (!persistclose || persistclose && get_cookie("remainclosed")=="")"visible"if(d.layers);el.sP=function(x,y){"px";"px";};el.x = startX;if (verticalpos=="fromtop")el.y = startY;else{el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;el.y -= startY;}return el;}window.stayTopLeft=function(){if (verticalpos=="fromtop"){var pY = ns ? pageYOffset : iecompattest().scrollTop;ftlObj.y += (pY + startY - ftlObj.y)/8;}else{var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;ftlObj.y += (pY - startY - ftlObj.y)/8;}ftlObj.sP(ftlObj.x, ftlObj.y);setTimeout("stayTopLeft()", 10);}ftlObj = ml("topbar");stayTopLeft();}if (window.addEventListener)window.addEventListener("load", staticbar, false)else if (window.attachEvent)window.attachEvent("onload", staticbar)else if (document.getElementById)window.onload=staticbar</script><br /><div class="clear"></div><div id="topbar"><div style="text-align: right;"><a href="" onclick="closebar(); return false"><img src="" /></a></div><center><div style="background: #fff;">
<span >Widget by: <a style=" font-weight:bold" href=" ">Twesco Magazine</a></span></div></center></div>

6. Replace the red code with code like box facebook fan of yours,
7. Save your template and see the results

Posted by Rian Priyadi On September 17, 2012 0 Comments
Jika artikel ini bermanfaat,bagikan kepada rekan melalui:

Posting Komentar

and ANONIM user Comment