ဒီေန႔တင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ 3 In 1 Slide Out Social Subscribing Widget ေလးထည့္နည္းေလးပါ။ တစ္နည္းအားျဖင့္ Facebook Like Box , Twitter Follow Box ႏွင့္ Google+1 တုိ႔ကုိ တစ္ပ်ဥ္းတည္း ဘေလာ့ဆုိဒ္ ညာဘက္ေဒါင့္ မွာ ထည့္နည္းေလးပါ။ ႀကဳိက္ၾကမယ္လုိ႔လည္း ေမွ်ာ္လင့္ထားပါတယ္။ ေအာက္မွာ Demo သြားၾကည့္လုိ႔ရေအာင္ link ႏွင့္ တကြ လုိအပ္တဲ့ Cond ေတြလည္း ထားေပးပါတယ္။ အဆင္မေျပတာေလးမ်ားရွိခဲ့ပါက Comment Box မွာ ျပန္ေမးလုိ႔ရပါတယ္။ က်ေနာ္အတတ္နုိင္ဆုံး ျပန္စစ္ေဆးေပးမွာပါ။
၂။ Layout
၃။ Add a Gadget
၄။ HTML/JavaScript
၅။ ေအာက္က ေပးထာတဲ့ Cond ေလးကုိထည့္ေပးလုိက္ပါ။
<style>img, a { border: 0;}#on { visibility: visible;}#off { visibility: hidden;}#facebook_div { width: 196px; height: 340px; overflow: hidden;}#twitter_div { width: 246px; height: 240px; overflow: hidden;}#google_plus_div { width: 290px; height: 250px; overflow: hidden; margin-left: 5px; margin-top: 1px;}#MTM_div { width: 300px; height: 97px; overflow: hidden;}/* right side style */ #facebook_right { z-index: 10005; border: 2px solid #3c95d9; background-color: #fff; width: 196px; height: 353px; position: fixed; right: -200px;}#facebook_right img { position: absolute; top: -2px; left: -35px;}#facebook_right iframe { border: 0px solid #3c95d9; overflow: hidden; position: static; height: 360px; left: -2px; top: -3px;}#twitter_right { z-index: 10004; border: 2px solid #6CC5FF; background-color: #6CC5FF; width: 246px; height: 240px; position: fixed; right: -250px;}#twitter_right_img { position: absolute; top: -2px; left: -35px; border: 0;}#google_plus_right { z-index: 10003; background-color: #F2F2F2; border: 2px solid #006ec9; border-top: 2px solid #0056a0; border-bottom: 2px solid #0056a0; border-right: 2px solid #0056a0; border-left: 2px solid #0056a0; width: 290px; height: 250px; position: fixed; right: -294px;}#google_plus_right_img { position: absolute; top: -2px; left: -33px; border: 0;}#MTM_right { z-index: 10003; border: 2px solid #303030; background-color: #fff; width: 300px; height: 97px; position: fixed;}#MTM_right img { position: absolute; top: -2px; left: -101px;}/* left side style */ #facebook_left { z-index: 10005; border: 2px solid #3c95d9; background-color: #fff; width: 196px; height: 250px; position: fixed; left: -200px;}#facebook_left img { position: absolute; top: -2px; right: -35px;}#facebook_left iframe { border: 0px solid #3c95d9; overflow: hidden; position: static; height: 360px; right: -2px; top: -3px;}#twitter_left { z-index: 10004; border: 2px solid #6CC5FF; background-color: #6CC5FF; width: 246px; height: 250px; position: fixed; left: -250px;}#twitter_left_img { position: absolute; top: -2px; right: -35px; border: 0;}#google_plus_left { z-index: 10003; background-color: #006ec9; border: 2px solid #006ec9; border-top: 2px solid #0056a0; border-bottom: 2px solid #0056a0; border-left: 2px solid #0056a0; border-right: 2px solid #0056a0; width: 290px; height: 250px; position: fixed; left: -294px;}#google_plus_left_img { position: absolute; top: -2px; right: -33px; border: 0;}</style><script src="http://code.jquery.com/jquery-latest.js"></script><script src="http://apis.google.com/js/plusone.js" type="text/javascript"></script><script type="text/javascript">jQuery(document).ready(function () { jQuery("#facebook_right").hover(function () { jQuery(this).stop(true, false).animate({ right: 0 }, 500); }, function () { jQuery("#facebook_right").stop(true, false).animate({ right: -200 }, 500); }); jQuery("#twitter_right").hover(function () { jQuery(this).stop(true, false).animate({ right: 0 }, 500); }, function () { jQuery("#twitter_right").stop(true, false).animate({ right: -250 }, 500); }); jQuery("#google_plus_right").hover(function () { jQuery(this).stop(true, false).animate({ right: 0 }, 500); }, function () { jQuery("#google_plus_right").stop(true, false).animate({ right: -294 }, 500); });});</script><br /><div id="on"> <div id="facebook_right" style="top: 12%;"> <div id="facebook_div"> <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_3zDRm_dFSEHAv0GgriXt3LQz5E1GK700lDb5JSaeebcwrgGrEAByfBITpIKhNVWyPHWkQL9gzXQQzHEzHAlzSEz4BDkmBVa-g3F0947JouO6rLBHHGVwdlkEkqkvXRts0G5tcpCZUjnC/s1600/MTMfacebook_right.png" /> <iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftmblogtechnology&width=200&height=346&colorscheme=light&show_faces=true&border_color&stream=false&header=false" style="border: none; height: 346px; overflow: hidden; width: 200px;"></iframe> </div> </div></div><div id="on"> <div id="twitter_right" style="top: 28%;"> <div id="twitter_div"> <img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFbppv0twk-G6CxVK0rP9-HkkWFOwlcLlpxv3ERCfBbx8rDFqFuQCcaGaIymep1hkzk5HQi5V5L_BnWay16h0pveeWwI6_4UshaKX-AcYiklMBV5m4bczTNU30aBp01sUmtBhgwUzD65fd/s1600/MTMtwitter_right.png" /> <script type='text/javascript'>function fanbox_init(screen_name){document.getElementById('twitterfanbox').innerHTML='<iframe name="fbfanIFrame_0" frameborder="0" allowtransparency="true" src="http://s.moopz.com/connect.html?user='+screen_name+'" class="FB_SERVER_IFRAME" scrolling="no" style="width: 300px; height: 250px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; "></iframe>';}</script> <div id="twitterfanbox"> <script type="text/javascript">fanbox_init("johnthangming");</script> </div> </div></div><div id="on"> <div id="google_plus_right" style="top: 45%;"> <div id="google_plus_div"> <img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuYreIZVsUvREHwxKQhXYEzSNMtOZ1lCFk3X5mxR0qrXi6HNQ_qdVRlckggRZQrXzHL7c_kCpFMTByA4gDovgU5qI_nAJiKUfg2Po4R6xpTOGbcg5y8Hb88mqX9eFyF6u-Sq8i5T2AKD8/s1600/MTMgoogle_plus_right.png" /> <div style="float: left; margin: 10px 10px 10px 0;"> <a href='http://mrthangming.blogspot.com'><img alt='Tips Tricks And Tutorials' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji-g9g7ndU2FvCk3YyBSDYj6b6jY6rzNoD5hnboT8WD9H8asx4ukLRl2_QEOa2EvykEMdqOHhEUbJP1eD_elhNAoi4Wp58CzmYe9tuwVmQfwjHQdQXp0w8PzynsvF4O06ATVg6NUHTx2Fe/s1600/best+blogger+tips.png'/></a> <div class="g-plus" data-action="followers" data-height="250" data-href="https://plus.google.com/108100949889665305918" data-source="blogger:blog:followers" data-width="270"> </div> <script type="text/javascript"> (function() { window.___gcfg = {'lang': 'en'}; var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> </div> </div> </div></div></div>
၆။ ထည့္ၿပီးရင္ Save Button ေလးကုိ နုိပ္ေပးလုိက္ပါ။
မွတ္ခ်က္။ ။ ေအာက္ပါ ေဖာ္ျပပါ ေနရာ ေတြမွာ မိမိ၏ အမည္ ေျပာင္းေပးရပါမယ္။
(၁) http%3A%2F%2Fwww.facebook.com%2Ftmblogtechnology
(၂) fanbox_init("johnthangming")
(3) https://plus.google.com/108100949889665305918
ေျပာင္းေပးရမွာက အျပာေရာင္ Link ကုိသာ ေျပာင္းေပးရမွာပါ။ ရွာရလြယ္ ေအာင္ အခုလုိေဖာ္ျပေပးလုိက္တာပါ။
Post a Comment Blogger Facebook
အခုစာဖတ္သူၾကည့္ေနတဲ့ ပုိ့(စ္) ေလးမွာ ဘယ္လုိထင္ျမင္ခ်က္ရွိလဲ? စာဖတ္သူရဲ့ထင္ျမင္ခ်က္ကုိ ဤေနရာေလးမွာ ေရးခ်ၾကည့္ပါလား။..~!!!
EmoticonClick to see the code!
To insert emoticon you must added at least one space before the code.