သင့္ဘေလာ့မွာ Follow us tool bar ထည့္သြင္းမယ္။

သင့္ဘေလာ့မွာ Follow us tool bar ထည့္သြင္းမယ္။

အထက္ကေဖၚျပပါ ပံုေလးအတိုင္း သင့္ဘေလာ့ေလးကို တန္ဆာဆင္မယ္ေလ။
လိုအပ္ခ်က္ေတြကေတာ့ သင့္မွာ mail အေကာင့္တစ္ခုရိွရမယ္။ Facebook အေကာင့္တစ္ခုရိွရမယ္။
(  facebook မွာ group တစ္ခုဒါမွမဟုတ္ page တစ္ခုရိွရင္ပိုေကာင္းတယ္၊) ေနာက္ျပီး twitter အေကာင့္
တစ္ခုရိွရမယ္။ ေနာက္အေရးၾကီးဆၤုးကေတာ့ Blogger အေကာင့္တစ္ခုရိွရမယ္...ေနာက္တာပါ Blogger
မရိွပဲဘယ္ လို ဘေလာ့ေရးမလဲ။
ကဲလိုရင္ကိုစလိုက္ၾကရေအာင္။ အေျခခံေတြပံုနဲ႕ ျပမေနေတာ့ဘူးေနာ္။နားမလည္ရင္ ဒီမွာ သြားျပီးအရင္
ဖတ္လိုက္ အဲဒီမွာအေျခခံအနည္းငယ္ေရးထားတယ္။

အဆင့္ (၁)


Ctrl+F ကိုႏွိပ္ျပီးေအာက္ပါကုတ္ကိုရွာလိုက္ပါ။
code:

]]></b:skin>

ေနာက္ျပီအဲဒီကုတ္ကိုေတာ့ရင္ သူ႕အေပၚမွာကပ္လွ်က္ေအာက္ေဖာ္ျပပါ ကုတ္ေတြကို ေကာ္ပီကူးထည့္ပါ။

code: 

#social {
  width: 98%;
  height: 45px;
  margin: 0;
  padding: 10px 5px 5px 30px;
  list-style: none;
  border-right:solid 1px #853529;
  position: relative;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD1Kz_udc7qB19uk4VkySpmvtj6QxpkLh01-U76H6h4P7VASx8GEOrHzvfYDXipPgqbdd8fjx1nTEve22fEAAtSpcTHns4hP5RY3Mcbpv5Y2ShbQgGdIBnz-77d2N9pUVaUz-1q9LR_Bk/) no-repeat left top;
  }

#social p{
  font-size:1.5em;
  color:#FFFB98;
  font-weight:bold;
  float:left;
  margin: 10px 10px 0 0;
  text-shadow: 1px 1px 0px #000000;
  filter: dropshadow(color=#000000, offx=1, offy=1); 
  }

.abt{
  font-size:0.8em;
  color:#787878;
  float:right;
  margin: 0 -30px 0 0;
  text-shadow: 1px 1px 0px #ffffff;
  filter: dropshadow(color=#ffffff, offx=1, offy=1); 
  }

#social li {
  width: 32px;
  height: 32px;
  float: left;
  margin-right: 3px;
  }

#social li a {
  float: left;
  display: block;
  width: 100%;
  height: 100%;
  text-indent: -1000em;
  background-repeat: no-repeat;
  text-decoration: none;
  }

#social #rss {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt5Ak8WHQS8cs5dsNyV0V0Aj4P8FDhWV2F5iFgGomlThojMEeghLXatMegzZb_ZAAB_hfcP2gqthvb8HqUlSjkqCNpVrMBtVKfYYfqTUQP2fiQFVjKXM-MmJ-A7gvE4iM5WA-9h-_L4JQ/s400/allblogtools_rss.png);
  }

#social #facebook {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxGFLCrdyfZfSKy0pOIaJq69vMw8P6xgM0K94uDNJMHQG9jqA5u4HFyYNiE7RwB3d92AbziKeKtPwy3eOXwsKHixw6QWP1oI3CqDk_yd_GjIqz1tNp35p-T3lhT_31u4QjtjBNRjnVQ7E/s400/allblogtools_facebook.png);
  }
  #social #twitter {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVIa0BxkLFJBufZheEtseQtRv-ATimEkyR8OSksrgDx5mgzP9t3ZHUp3kYGo7-C91FMYMoZuyhqLp9EixXwT0o-Mv809KQPKSg1gj8y80a0HczTSm1AlE6h8tpgeL-KQyXcy67KCyzImY/s400/allblogtools_twitter.png);
  }
  #social #mail {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe7nZK1vgcI0Aa4AL2H7jIkDlPzsD-orJFDmYuw9XYDoHawGpuGEaZJUu7pIVpwHl0IqeWXZchReguybVHGADfu_UWDKpTuIbX1e5YmUm7zvXbZYttWloJAm5YI9tQK13aMEQQedP0Hv8/s400/allblogtools_email.png);
  }

span.tooltip {
  background: #575757;
  padding: 3px;
  display: block;
  width: 140px;
  border: 1px solid #000000;
  position: absolute;
  margin-top:-40px;
  color: #F0F0F0;
  font-size:10px;
  text-indent: 0;
  font: Arial, sans-serif;
  text-align: center;
  -webkit-box-shadow: inset 2px 2px 2px #616161;
  -moz-box-shadow: inset 2px 2px 2px #616161;
  box-shadow: inset 2px 2px 2px #616161; 
  -moz-border-radius: 5px;
  border-radius: 5px; 
  }

အဆင့္(၂)

ျပီရင္ေနာက္တစ္ဆင့္အေနနဲ႕ ေအာက္ပါကုတ္ကိုရွာလိုက္ပါဦး

code:

</body>

ရွာျပီးရင္ေအာက္ေဖာ္ျပပါကုတ္ေတြကိုလဲ  သူ႕အေပၚကေနေကာ္ပီကူးထည့္လိုက္ပါဦး။

code:

<script type='text/javascript'>
  window.setTimeout(function() {
  document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
  }, 10);
  </script>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
  <script type='text/javascript'>
  //<![CDATA[
  $(document).ready(function() {

 $('#social li').each(function() {

  var $li = $(this);
  var title = $li.find('a').attr('title');

  $li.find('a').removeAttr('title');

  $('<span class="tooltip"/>').text(title).appendTo($li.find('a')).hide();


  $li.find('a').mouseover(function() {


  var top = $(this).position().top;
  var left = $(this).position().left;

  $(this).find('span').fadeIn()({
  top: top,
  left: left
  }, 'slow'); 

  });

  $li.find('a').mouseout(function() {


  $(this).find('span').fadeOut('slow');


  });

  });


});

//]]>
  </script>

အဆင့္(၃)

ေနာက္ဆံုးအဆင့္အေနနဲ႕ Design>page elements>add a gadget>Html / JavaScript ကိုသြားလိုက္ျပီးေအာက္က ကုတ္ေတြ

ကိုေကာ္ပီကူးထည့္လိုက္ပါ။ 

code:

<ul id="social">
  <p>Follow Us </p>
  <li><a href="http://BLOG-NAME.blogspot.com/feeds/posts/default?alt=rss" id="rss" title="Follow Our Feeds">Rss</a></li>

<li><a href="MailLink#" id="mail" title="Subscribe To Our News Letter">Mail</a></li>

<li><a href="FaceBookLink#" id="facebook" title="Be Our FaceBook Fan">Facebook</a></li>

<li><a href="TwitterLink#" id="twitter" title="Follow Us On Twitter">Twitter</a></li>
  </ul>

မွတ္ခ်က္ 

BLOG-NAME 

ေနရာမွသင့္ဘေလာ့နာမည္ထည့္ပါ။

MailLink# 

ေနရာမွာ email လိပ္စာထည့္ပါ။အျပည့္အစံုးထည့္ေပးပါ။ ဥပမာ http://mail.google.com ေပါ့

FaceBookLink# 

ေနရာမွာသင့္ facebook လိပ္စာထည့္ပါ။ ကၽြန္ေတာ့မွာ page ရိွလို႕အဲဒါေလးထည့္ထားတယ္။

ဥပမာ http://www.facebook.com/pages/Shwe-Ko-Yan-Taw/211874618884355?sk=wall 

TwitterLink# 

ေနရာမွာ သင့္ Twitter အေကာင့္လိပ္စာထည့္ပါ။

ဥပမာ http://www.twitter.com/shwekoyantaw/

အဆင္ေျပပါေစ 

လိုတာရိွေမးပါ။