How To Add Awesome Custom Facebook Like Box To Blogger

ဒီိေန႔တင္ေပးတဲ့ ပုိ႔ေလးကေတာ့ Blog မိတ္ေဆြမ်ားအတြက္ Facebook Like Box ေလးကုိ လွလွပပ နဲ႔ Size ေသးငယ္ေအာင္ ထည့္နည္း/လုပ္နည္းေလးပါ။ ဒီလုိပုံစံထည့္ခ်င္အားျဖင့္ ကုိယ့္ရဲ႕ Site ေတြမွာ Widget ေတြပုိလွေစပါတယ္။ သိၿပီးၾကေသာ မိတ္ေဆြေတြလည္း မ်ားေတာ့မွာပါ။ မသိေသးတဲ့ မိတ္ေဆြေတြ အခက္အခဲမျဖစ္ေအာင္ လုိတာထက္ပုိ တင္ေပးလုိက္တာပါ။ ေအာက္မွာ Demo သြားၾကည့္လုိ႔ရေအာင္ Link နွင့္ တကြ လုိအပ္တဲ့ Cond ကုိလည္း ထားေပးပါတယ္။

၁။Sign In Blogger

၂။ Layout

၃။ Add a Gadget

၄။ HTML/JavaScript

၅။ ေအာက္က ေပးထာတဲ့ Cond ေလးကုိထည့္ေပးလုိက္ပါ။

<center>

<style>.Mr ThangMing {

width: 320px;

height: 150px;

border-radius: 3px;

position: relative;

background-color:#f4f4f4;

padding:5px 10px 15px 0;

}

.mrthangmingfb, .mrthangmingfb:before, .mrthangmingfb:after {

background: #f4f4f4;

border: 1px solid #ccc;
}
.mrthangmingfb:before, .blogtrixfb:after {

content: "";

position: absolute;

bottom: -3px;

left: 2px;

right: 2px;

height: 1px;

border-top: none;

}

.mrthangmingfb:after {

left: 4px;

right: 4px;

bottom: -5px;

box-shadow: 0 0 2px #ccc;

}

</style>

<div class="Mr ThangMing">

<div style="height: 155px; overflow: hidden;">

<fb:like-box class=" fb_iframe_widget " data-border-color="#f4f4f4" data-header="false" data-height="250" data-show-faces="true" data-stream="false" data-width="300" href="https://www.facebook.com/tmblogtechnology"><iframe class="fb_ltr" id="f5741c08" name="fdd6ca2ec" scrolling="no" src="http://www.facebook.com/plugins/likebox.php?border_color=%23f4f4f4&amp;channel=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%23cb%3Df2babfba84%26origin%3Dhttp%253A%252F%252Fwww.tmblogtechnology.com%252Ff1ae6f85bc%26relation%3Dparent.parent%26transport%3Dpostmessage&amp;colorscheme=light&amp;header=false&amp;height=300&amp;href=https%3A%2F%2Fwww.facebook.com%2Ftmblogtechnology&amp;locale=en_US&amp;sdk=joey&amp;show_faces=true&amp;stream=false&amp;width=320" style="border-bottom-style: none; border-color: initial; border-image: initial; border-left-style: none; border-right-style: none; border-top-style: none; border-width: initial; height: 250px; overflow-x: hidden; overflow-y: hidden; width: 320px;"></iframe></fb:like-box>

</div>

</div>

<div id="fb-root">

</div>

<script>(function(d, s, id) {

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) return;

js = d.createElement(s); js.id = id;

js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));

</script></center>

</div>

၆။ ထည့္ၿပီးရင္ Save Template ကုိနုိပ္ေပးလုိက္ပါ။

မွတ္ခ်က္။   ။ https://www.facebook.com/tmblogtechnology ေနရာမွာ မိမိ၏ FB အမည္နဲ႔ အစားထုိးေပးပါ။ ၿပီးရင္ height="250 /width="300" ေတြကုိလည္း မိမိႀကဳိက္သလုိ Size ျပင္နုိင္ပါတယ္။