Hover Effect နဲ႔ Facebook Like Box လုပ္မယ္

ဒါေလးကလည္း ကိုေမာင္ေပါက္ထံမွ ယူလာတာေလးပါ လိုရမယ္ရေပါ့ဗ်ာ တတ္စမ္းၾကည့္ရတာေပါ့ ။ အပ်င္းေျပ ထားစမ္းၾကည့္မယ္ေလ မၾကိဳက္ရင္ ျပန္ျဖဳတ္တာေပါ့ ရွိထားေတာ့ ပိုေကာင္းတာေပါ့ ဟုတ္ဘူး
လား ေပ့ါေတြခ်ည္းဘဲ Rop HipHop ေတြေတာင္ မပါဘူး..။ မဟုတ္ပါဘူးဗ်ာ ေန႔လယ္ခင္းက တင္တဲ့ သီခ်င္း
ေတြထဲမွာ ပါပါတယ္..ဟာ ရႈပ္ကုန္ၿပီ....။ ဘေလာ့ကာသမားေတြ အတြက္ က်ဳပ္အတြက္ေပါ့ဗ်ာ...။။

Hover Effect နဲ႔ Facebook Like Box ဆိုတာ.ဘာလဲဆိုရင္.. Techonological Villa ရဲ႔ ညာဘက္ေဘးမွာ.. Facebook ဆိုတဲ့.. button ေလး.. ေဒါင္လိုက္ရွိေနပါတယ္..။ အဲ့လိုမ်ိဳး.. Like Box ကုိေၿပာတာပါ..။ ဘယ္လိုထည့္ရမလဲဆိုရင္...


- မိမိရဲ႔.. blogger account ကုိ.. sign in ၀င္လုိက္ပါ..။
- template ကိုေရာက္ေအာင္သြားၿပီးေတာ့.. Edit HTML ကုိ..ႏွိပ္လိုက္ပါ..။
- Expand widget ကုိ..အမွန္ၿခစ္ၿခစ္ၿပီးေတာ့.. Ctrl+F နဲ႔ </head> ကိုရွာလိုက္ပါ.။
- </head> ေတြ႔ရင္..သူ႔အေပၚမွာ..ေအာက္က.စာေတြကုိ.. copy ကူးလိုက္ပါ...။

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

- Save လုပ္လိုက္ပါမယ္..။
- ၿပီးရင္.. template ရဲ႔အေပၚက.. Layout ကုိသြားလိုက္ပါ..။
- ညာဘက္ၿခမ္းမွာ..  Add a Gadget ဆိုတာကုိ..ယူၿပီး.. HTML/JavaScript ဆိုတဲ့ဟာေလးကို..ယူလုိက္ပါ..။
- Title မွာ..ဘာမွမၿဖည့္ပါနဲ႔..။ body ေနရာမွာ..ေအာက္က.. code ေတြကုိ.. copy ကူးလိုက္ပါ..။

<style type="text/css">
/*<![CDATA[*/
#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}
.fbplbadge {background-color:#3B5998;display: block;height: 150px;top: 50%;margin-top: -75px;position: absolute;left: -47px;width: 47px;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkY9v1OWPNAEeyPLu-Lhv_0ZfkX6XcjJlUHeeRaYbU1YzL_yzQmPHfGt279DH76I-tSjtrxrkf1PjStlzWFjPn5RxB5yZZHKcwBf2uG1eA5GX2_ljQjYORWNw2O9QzK3nuOVBMY-vwTVE/s1600/vertical-right.png");background-repeat: no-repeat;overflow: hidden;-webkit-border-top-left-radius: 8px;-webkit-border-bottom-left-radius: 8px;-moz-border-radius-topleft: 8px;-moz-border-radius-bottomleft: 8px;border-top-left-radius: 8px;border-bottom-left-radius: 8px;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
    (function(w2b){
        w2b(document).ready(function(){
            var $dur = "medium"; // Duration of Animation
            w2b("#fbplikebox").css({right: -250, "top" : 100 })
            w2b("#fbplikebox").hover(function () {
                w2b(this).stop().animate({
                    right: 0
                }, $dur);
            }, function () {
                w2b(this).stop().animate({
                    right: -250
                }, $dur);
            });
            w2b("#fbplikebox").show();
        });
    })(jQuery);
/*]]>*/
</script>
<div id="fbplikebox" style="display:none;">
    <div class="fbplbadge"></div>
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=YOUR-FACEBOOK-PAGE&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;background:#FFFFFF;" allowtransparency="true"></iframe>
</div>

- YOUR-FACEBOOK-PAGE ေနရာမွာ.. မိမိရဲ႔.. facebook fan page link ကုိထည့္ပါ..။ ဥပမာ - https://www.facebook.com/yourfanpagename အဲ့လိုပံုစံေလးထည့္လိုက္ပါမယ္..။
- ၿပီးရင္ Save လုပ္ၿပီးထြက္လိုက္ပါ..။
- မိမိရဲ႔ blog ကုိၿပန္သြားၾကည့္လိုက္ပါ..။. Facebook Hover Effect ေလး..ေတြ႔ရပါလိမ့္မယ္ ^_^


အဆင္ေျပပါေစ..