Cara Memasang Widget Social Media

Selamat Pagi teman teman Blogger,hari ini saya akan berbagi tentang Widget Social Media yang saya pakai,letaknya ada di sidebar sebelah kanan,kalian bisa melihat demo nya secara live :v,dan cara memasang Widget ini juga cukup mudah,hanya saja Widget ini masih belum dikembangkan artinya Widget ini masih V1,Widget ini adalah Prototype dari punya Kang-Mousir,tapi saya buat lebih simple

Nah,di V2 nanti akan saya beri Sosmed Twitter dan fitur menarik lainnya,baiklah langsung saja kita ke tutorial

Cara Memasang Widget Social Media

1.Pertama-tama masuk ke Blogger
2.Masuk ke Template dan pilih Edit HTML
3.Cari kode </body> lalu letakan kode dibawah ini diatas </body>

<script type='text/javascript'>
//<![CDATA[
(function(){var fb1=document.createElement('script');fb1.type='text/javascript';fb1.async=true;fb1.src='http://connect.facebook.net/id_ID/all.js#xfbml=1','facebook-jssdk';var fb2=document.getElementsByTagName('script')[0];fb2.parentNode.insertBefore(fb1,fb2)})();(function(){var tw1=document.createElement('script');tw1.type='text/javascript';tw1.async=true;tw1.src='http://platform.twitter.com/widgets.js';var tw2=document.getElementsByTagName('script')[0];tw2.parentNode.insertBefore(tw1,tw2)})();(function(){var gp1=document.createElement('script');gp1.type='text/javascript';gp1.async=true;gp1.src='https://apis.google.com/js/plusone.js';var gp2=document.getElementsByTagName('script')[0];gp2.parentNode.insertBefore(gp1,gp2)})();
//]]>
</script>

4.Setelah itu klik Save Template
5.Selanjutnya,masuk ke Tata Letak dan pilih Tambahkan Widget lalu pilih HTML/Javascript
6.Copy kode dibawah ini dan pastekan di widget

<div style='background:#fff;margin:0;border:1px solid #ccc;border-bottom:none;border-top:none'>
<div style='background:#fff;margin:0;'>
<div class="fb-like-box" data-href="https://www.facebook.com/masdeeons" data-colorscheme="light" data-show-faces="false" data-header="true" data-stream="false" data-show-border="false"></div></div>
<div style='margin-right:5px;float:left;padding:0px 6px'><a href="http://www.alexa.com/siteinfo/masdeeons.com"><script type="text/javascript" src="http://xslt.alexa.com/site_stats/js/s/a?url=masdeeons.com"></script></a></div>
<div style='margin-right:5px;float:left;padding:0px 6px'><!-- Histats.com  START  (standard)-->
<script type="text/javascript">document.write(unescape("%3Cscript src=%27http://s10.histats.com/js15.js%27 type=%27text/javascript%27%3E%3C/script%3E"));</script>
<a href="http://www.histats.com" target="_blank" title="advanced web statistics" ><script  type="text/javascript" >
try {Histats.start(1,3277772,4,605,110,55,"00011100");
Histats.track_hits();} catch(err){};
</script></a>
<noscript><a href="http://www.histats.com" target="_blank"><img src="http://sstatic1.histats.com/0.gif?3277772&amp;101" alt="advanced web statistics" border="0" /></a></noscript>
<!-- Histats.com  END  --></div>
<div style='margin-right:50px;float:right;padding:0px 0px'>
<script id="_waun1x">var _wau = _wau || [];
_wau.push(["colored", "wazft206cpzi", "n1x", "ffc20e000000"]);
(function() {var s=document.createElement("script"); s.async=true;
s.src="http://widgets.amung.us/colored.js";
document.getElementsByTagName("head")[0].appendChild(s);
})();</script></div>
<marquee><a href="http://www.blogger.com/follow-blog.g?blogID=2925153865352353416" 
target="_blank" title="Klik here to follow this blog">
<img alt="Folower Button" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk7aPu0zmPZhyphenhyphengVVuBInp1_Dcp3951yWQc06vD56Yeg0oVM3phqqjzFFx41iOiCFqchRbtSWxu22gl3_10Dus8vHOONZZIKD4CtBiAm3wtcBk4zQ1_MuCI104zrSZLsBJrjCwydDle9OJ6/s1600/Follow+my+blog.gif" 
title="Click here to follow this blog" /></a></marquee>
<center><div class="g-follow" data-annotation="bubble" data-height="20" data-href="//plus.google.com/u/0/106549472524820373661" data-rel="author"></div><div class="g-plusone" data-size="medium" data-count="true" data-width="100" data-href="http://www.masdeeons.com"></div></center>
<section class="technopcarea-newsletter">
<div class="technopcarea-newsletter-form">
<fieldset>
<div style='color:#fff;font-family:&#39;Oswald&#39;,Tahoma,Sans-serif;font-size:16px;font-weight:200'>
<center><a>
      Subscribe Via Email <i>GRATIS</i>.
      </a></center></div>
<div class="fields">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=masdeeons-blog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="email" id="email" name="email" onblur="if (this.placeholder == &quot;&quot;) {this.placeholder = &quot;Enter your email here..&quot;;}" onfocus="if (this.value == &quot;Masukkan Email..&quot;) {this.value = &quot;&quot;}" type="text" placeholder="Masukkan Email.." />
          <input name="uri" type="hidden" value="masdeeons-blog" />
          <input name="loc" type="hidden" value="en_US" />
          <input class="subscribe" name="commit" type="submit" value="Subscribe" />
        </form>
</div>
</fieldset>
<div style='padding:90px 80%;color:#fff;font-family:Arial;font-size:12px;'>
</div></div>
</section>
<style>
input[type=&quot;text&quot;]{font-family:arial}
.technopcarea-newsletter-form{background:none repeat scroll 0 0 #1E293B;float:left;height:110px;position:relative;width:100%}
.technopcarea-newsletter-form fieldset{height:38px;left:10%;position:absolute;top:10%;width:80%;border:none}
.technopcarea-newsletter-form fieldset h2{color:#FFF;font-family:Sniglet;font-weight:300;width:100%;margin:0 0 1.5625em;font-size:16px}
.technopcarea-newsletter-form fieldset .fields{position:relative}
.fields .email{border-radius:10px 0 0 10px;outline:0 none;width:84%;border:0;left:0;position:absolute;padding:10.5px}
.fields .subscribe{background:none repeat scroll 0 0 #F0553B;border:medium none;border-radius:0 10px 10px 0;color:#FFF;right:0;position:absolute;padding:11px;transition:all ease 0.6s}
.fields .subscribe:hover{background:none repeat scroll 0 0 #161616}
</style>
</div>

Jangan di save dulu,kalian harus mengedit :
1.Ganti teks berwarna merah dengan URL Facebook anda (Facebook Fanspage)
2.Ganti teks berwarna hijau dengan URL Blog anda (Alexa)
3.Ganti teks berwarna biru dengan Counter Code Histats anda (Histats)
4.Ganti teks berwarna ungu dengan Blog ID anda (Join This Site)
5.Ganti teks berwarna pink dengan URL Google+ anda dan URL Blog anda (Google+)
6.Ganti teks berwarna orange dengan ID Feedburner anda (FeedBurner)

Lalu silahkan Save dan lihat blog kalian masing masing

Cukup sekian dari post ini,semoga dapat menambah informasi bagi anda.