Blog မွာ Facebook like box slidedoor ထဲ့နည္း

ကိုယ့္ရဲ႕ Blog မွာ Facebook like box ေလးကို Slidedoor ေလးနဲ႕ထဲ့နည္းေလးပါ။
နည္းလမ္းေလးကိုေအာက္မွာၾကည့္ေပးပါ။
အရင္ဆံုးကိုယ့္ရဲ႕ Blog ထဲ့သို Log in ၀င္ပါ၊ေအာက္ပါပံုအတိုင္း Template ကိုႏိုပ္
ပါ

Edit Html ကိုႏိုပ္ပါ

Ctrl + F အကူအညီနဲ႕ </head> ကိုရွာပါ၊ေတြ႕ျပီဆိုရင္

</head> ရဲ႕အေပၚမွာ Cursor ခ်ျပီး ေအာက္ပါ Code မ်ားကူးထဲ့ျပီး Save Template
ကိုႏိုပ္ပါ။

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>

jQuery(document).ready (

function(){jQuery(&quot;#facebook_right&quot;).hover(function(){
 jQuery(this).stop(true,false).animate({right: 0}, 500); },

function(){ jQuery(&quot;#facebook_right&quot;).stop(true,false).animate({right: -249}, 500); }); 

});

</script>

 ျပီးရင္ Layout ကိုေရြးပါ

ေအာက္မွာျပထားတဲ့အတိုင္း Add a Gadget ကိုႏိုပ္ျပီး HTML/JAVA Script ကိုႏုိပ္ပါ

ေအာက္ပါ Code မ်ားကိုကူးထဲ့ပါ။

<style>
img, a { border: 0; }#on {visibility:visible;}#off {visibility:hidden;}#facebook_div {width:245px;height: 310px;overflow: hidden;}
#facebook_right {z-index: 10005;border:2px solid #3c95d9;background-color: #fff;width:245px;height: 290px;position: fixed;right: -249px;}
#facebook_right img {position: absolute;top: 70px;left: -35px;}
#facebook_right iframe {border:0px solid #3c95d9;overflow: hidden;position: static;height: 360px;left:-2px;top:-3px;}
</style><div id="on"><div id="facebook_right" style="top: 30%;">
<div id="facebook_div">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitZcgAbgno-DP2q8eGkufj57VhQSTJ8G3xcbW-HYWjxDNvGD0a9CKBbH5_WvtP19lfXpTtpzIpzgy_I68rynJMpXCbyyUrGpX4cJyLaBDojH0f1HRWQ-SQBvqFqFFtQBGqqoAUQH70bwfA/s1600/FB.png" />

<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FBlogger-Trix%2F110888928990749&amp;
width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true">
</iframe>

<a style=" font-size:9px; color:#3B78CD; text-decoration:none;"href=""></a></div></div></div>

အနီေရာင္ျပထားတဲ့ေနရာမွာကိုယ့္ရဲ႕ fan page link ကိုထဲ့ရမွာပါေအာက္မွာဆက္ၾကည့္ပါ အရင္ဆံုး ျပီးရင္ကိုယ့္ရဲ႕ fan page link ကိုပံုမွာျပထားတဲ့ေနရာမွာကူးထဲ့ျပီး Get Code ႏိုပ္ပါ။

IFRAME ကိုႏိုပ္ျပီးေအာက္ပါ Code မ်ားကိုအနီေရာင္ျပထားတဲ့ Code မွာအစားထိုး
ေပးရမွာျဖစ္ပါတယ္၊ျပီးရင္ Save ပါအဆင္ေျပသြားပါလိမ့္မယ္ဗ်ာ....

အားလံုးအဆင္ေျပပါေစဗ်ာ.......
စလုပ္ကာစမိတ္ေဆြမ်ားအတြက္အၾကံေပးခ်င္တာကေတာ့ကိုယ့္ Blog နဲ႕ Tamplate တူ
တဲ့ အရံ Blog တစ္ခုမွာေသခ်ာနားလည္ေအာင္စမ္းသပ္ျပီးမွ ကိုယ့္ Blog မွာအသံုးခ်ပါ။ 

Posted in: Blog နည္းပညာမ်ား