How to Add Google Plus Slide Out Hover Widget to Blogger

ဒီေန႔တင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့မွာ Google Plus Slide Out Hover ေလးထည့္နည္းေလးပါ။ သိၿပီးၾကေသာ ဘေလာ့မိတ္ေဆြမ်ားလည္းမ်ားေတာ့မွာပါ။ မသိေသးတဲ့ ဘေလာ့မိတ္ေဆြမ်ားအတြက္ လုိအပ္နုိင္တယ္ထင္လုိ႔ ထပ္မွ်ေ၀ေပးလုိက္ပါတယ္။ ႀကဳိက္ၾကမယ္လုိ႔လည္းေမ်ာ္လင့္ပါတယ္။ ေအာက္မွာ Demo(နမူနာ) သြားၾကည့္ လုိ႔ရေအာင္ Link(လင့္(ခ္)) နွင့္ တကြ လုိအပ္တဲ့ Cond ေတြလည္း ထားေပးပါတယ္။

၁။Sign In Blogger

၂။ Layout

၃။ Add a Gadget

၄။ HTML/JavaScript

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

<style>  .MTM-gplusslide {  	position: fixed;  	z-index:9;  	top: 100px;  	left: 0;  	-webkit-transition-duration: 1s;  	-moz-transition-duration: 1s;  	-o-transition-duration: 1s;  	transition-duration: 1s;  }  .MTM-gpluscontainer {  	height:270px;  	width:291px;  	border:2px solid #FF0000;  	;  	border-radius:5px;  	-moz-border-radius:5px;  	-webkit-border-radius:5px;  	background:#dcdcdc;  	position: fixed;  	z-index:9;  	top: 100px;  	left: -295px;  	-webkit-transition-duration: 1s;  	-moz-transition-duration: 1s;  	-o-transition-duration: 1s;  	transition-duration: 1s;  }  .MTM-gplusslide:hover {  	left:295px;  }  .MTM-gplusslide:hover .MTM-gpluscontainer {  	left: 0;  }  </style>  <div class="MTM-gplusslide">    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOIrTTrCxQwxNJ1FyAGTOw2-1TEwA5PeOsnh7wV_Og7DY2mFcH3KHJhMUYyfo1VeTtCfuAl39VMRk-pdrHsHplU2yVf0vfu1acpVj593a8L9KM-aE8li9vHMp5NA2KvyKXjAYnHbbQGnk/s1600/GP-Slide.png" />    <div class="MTM-gpluscontainer">  <center><b><span style="background-color: red; color: white;">&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;Add Me In Your Circle &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</span></b> <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><center><span style="font-size: x-small;"><a href="http://mrthangming.blogspot.com/2013/04/how-to-add-google-plus-slide-out-hover.html">Get This</a></span></center></div>

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

မွတ္ခ်က္။   ။https://plus.google.com/108100949889665305918 ေနရာမွာ မိိမိ၏ Google Plus ID ကုိ ထည့္ေပးလုိက္ပါ။ Google Plus ID ကုိ မရွာတတ္တဲ့ မိတ္ေဆြေတြရွိခဲ့ရင္ ေအာက္ပုံ ကုိၾကည့္ပါ။