Blog မွာ Floating Social Sharing Bar ဘယ္လုိထည့္မလဲ

ပထမဦးဆုံး  း း း း း း း း း း း (Blog ကို Backup လုပ္ထားပါ)
================

1) ကုိယ့္ရဲ႕ Blog ကုိ Blogger Dashboard ကုိေရာက္ေအာင္ Login ၀င္ပါ။

2) "More Option" Dropdown menu ကုိ click ျပီး Template ကုိ ေရြးပါ။

3) ေနာက္တစ္ခါ Edit Html ====> Proceed ကုိ ႏွိပ္ပါ။

4) ေပၚလာတဲ့အထဲက ေပၚဆုံးနားမွာ  "Expand Template Widgets" ကုိအမွန္ျခစ္ပါ။

THE JQUERY PLUGIN!
===============

အခုထည့္မယ့္ Floating Social Sharing Bar Widget က jquery ကုိ အေျခခံထားတာျဖစ္ပါတယ္၊ ကုိယ့္ရဲ႕ Blog မွာ Jquery plugin ရွိကုိရွိပါမယ္။ ကုိယ့္ရဲ႕ Blog မွာ jquery ရွိရင္ ဒီအဆင့္ကုိ ထားခဲ့ပါ။ JQuery မရွိဘူးဆုိရင္ ေအာက္က code ေတြကုိ  </head> မတုိင္ခင္ copy လုပ္ျပီးထည့္ေပးပါ။

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>

Social Script 
========

ေအာက္မွာ ေပးထားတဲ့ Code ေတြကုိ </head>  မတုိင္ခင္ copy လုပ္ျပီးထည့္ေပးပါ။

 

<b:if cond='data:blog.pageType == "item"'><style type='text/css'>/*<![CDATA[*/ #w2bSocialFloat {clear:both;padding: 6px 0;display:block;background:#FFFFFF;} #w2bSocialFloat td{padding:4px;margin:0;border:none;} #w2bSocialFloat td iframe{max-width:82px;width:82px !important;} #w2bSocialFloat.w2bFloatSocial{position: fixed;top:0;z-index:9999999;border-bottom:1px solid #ccc;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);} /*]]>*/ </style><script type="text/javascript">/*<![CDATA[*/ // Set the Top Offset $theOffset = 0; jQuery(document).ready(function(b){var a=b("#w2bSocialFloat");a.wrap('<div id="w2bSocialPlaceholder"></div>').closest("#w2bSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#w2bSocialFloat iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass("w2bFloatSocial"):a.removeClass("w2bFloatSocial");f=b(".post");if(f.length!=0){c=f.outerHeight()+f.offset().top;d>=c?a.stop().animate({top:"-150px"}):a.stop().animate({top:$theOffset+"px"})}else d>=e?a.css("top",$theOffset+"px"):a.css("top","0")})}); /*]]>*/ </script><script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/w2b-blogger-pinit.js"></script><script type="text/javascript">/*<![CDATA[*/ // Twitter (function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a,d)}})(document,"script","twitter-wjs"); // Google + (plus) (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})(); // Stumbleupon (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})(); // Digg (function(){var a=document.createElement("SCRIPT"),b=document.getElementsByTagName("SCRIPT")[0];a.type="text/javascript";a.async=true;a.src="http://widgets.digg.com/buttons.js";b.parentNode.insertBefore(a,b)})(); /*]]>*/ </script> <center><div><form name="copy"><div align="center"><input value="Select all" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"> <textarea rows="8" cols="60" name="txt" ><b:if cond='data:blog.pageType == "item"'><div id="w2bSocialFloat" class="w2bSocialFloat"><table width="100%" class="w2bSocialFloat"><tr> <td> <a href="https://twitter.com/share" class="twitter-share-button" expr:data-url="data:post.url" expr:data-text="data:post.title">Tweet</a> </td> <td> <iframe expr:src=""//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21"" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe> </td> <td> <div expr:id=""w2bPinit-" + data:post.id" style="display: none;visibility: hidden;height: 0;width:0;overflow: hidden;" class="w2bPinitButton"> <data:post.body/> <script type="text/javascript"> w2bPinItButton({ url:"<data:post.url/>", thumb: "<data:post.thumbnailUrl/>", id: "<data:post.id/>", defaultThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZMN15xRFLweoD1gedj8tjroGZ-0yqzUkJzyTyB4rhodeqehfNjxuTcQBqfALW5-h86SPzwobL64UTW610K8-GsyDmj9fQu6dLb8qhkBcu_PHoI85Uh2jUT3PzSV1pRXO1WyKd8xxf_K4i/s1600/w2b-no-thumbnail.jpg", pincount: "horizontal" }); </script> </div></td> <td> <div class="g-plusone" data-size="medium" expr:data-href="data:post.url"></div></td> <td> <su:badge layout="1" expr:location="data:post.url"></su:badge> </td> <td> <a class="DiggThisButton DiggCompact"></a> </td> </tr></table></div></b:if>

SOCIAL BUTTONS WIDGET Codes!!

=====================

ဒါကေတာ့ ေနာက္ဆုံးပါဘဲ ဒီ code ေတြ ထည့္ျပီးသြားရင္ျပီးပါျပီ။

ေအာက္မွာ ေပးထားတဲ့ code ေတြကုိ <data:post.body/> မတုိင္ခင္ copy လုပ္ျပီးထည့္ေပးပါ။ <data:post.body/> ကုိသုံးခါေတြ႕ပါလိမ္မယ္။

ေအာက္မွာေပးထားတဲ့ စာေၾကာင္းႏွစ္ေၾကာင္းကုိရွာ ပါ။

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<data:post.body/>

ေအာက္မွာ ေပးထားတဲ့ code ေတြကုိ စာေၾကာင္းႏွစ္ေၾကာင္း ၾကားမွာထည့္ေပးပါ။

 

<b:if cond='data:blog.pageType == "item"'><div id="w2bSocialFloat" class="w2bSocialFloat"><table width="100%" class="w2bSocialFloat"><tr> <td> <a href="https://twitter.com/share" class="twitter-share-button" expr:data-url="data:post.url" expr:data-text="data:post.title">Tweet</a> </td> <td> <iframe expr:src=""//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21"" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe> </td> <td> <div expr:id=""w2bPinit-" + data:post.id" style="display: none;visibility: hidden;height: 0;width:0;overflow: hidden;" class="w2bPinitButton"> <data:post.body/> <script type="text/javascript"> w2bPinItButton({ url:"<data:post.url/>", thumb: "<data:post.thumbnailUrl/>", id: "<data:post.id/>", defaultThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZMN15xRFLweoD1gedj8tjroGZ-0yqzUkJzyTyB4rhodeqehfNjxuTcQBqfALW5-h86SPzwobL64UTW610K8-GsyDmj9fQu6dLb8qhkBcu_PHoI85Uh2jUT3PzSV1pRXO1WyKd8xxf_K4i/s1600/w2b-no-thumbnail.jpg", pincount: "horizontal" }); </script> </div></td> <td> <div class="g-plusone" data-size="medium" expr:data-href="data:post.url"></div></td> <td> <su:badge layout="1" expr:location="data:post.url"></su:badge> </td> <td> <a class="DiggThisButton DiggCompact"></a> </td> </tr></table></div></b:if>

ျပီးသြားပါျပီ Blog ကုိ Save လုပ္ျပီး ကုိယ့္Blog ရဲ႕ post တစ္ခုခုကုိ ဖြင့္ၾကည့့္္ၾကည့္ပါ။

အားလုံး အဆင္ေျပၾကပါေစ။ေက်းဇူးတင္ပါတယ္။