Cara Membuat Widget Social Media Simple Keren di Blog

future404-azbunz.blogspot.com- Hay sahabat azbunz, kali ini saya akan membagikan Tutorial Cara Membuat Widget Social Media Simple Keren di Blog sangat mudah dan gampang di terapkan untuk blogger pemula. Widget ini saya sediakan seperti ( Fanspage, g+, Twitter, Dapatkan Update Lewat Email, Join This Site, Jumlah User Online).

Jika ingin melihat tampilannya. contohnya seperti dibawah ini

Tertarik untuk membuat Widget Social Media seperti itu? Ingin memasangnya?
caranya gampang

1. Login Blogger.
2. Pergi ke Tata Letak > Tambah Gadget > HTML/Javascript
3. Dan masukkan kode dibawah ini

<style>
        /* Social Widget */
        #ForYouFree-bar {
            border: 0;
            margin-bottom: 10px;
            margin: 0 auto;
                width:300;
        }
        .fb-likebutton {
            background: #fff;
            padding: 10px 13px 0 10px;
            border-right: 1px solid #D8E6EB;
           border-left: 1px solid #D8E6EB;
           border-bottom: 1px solid #D8E6EB;
            margin:0px;
                height:45px;
        }
        .googleplus {
            background: #F5FCFE;
            border-top: 1px solid #FFF;
            border-bottom: 1px solid #ebebeb;
            border-right: 1px solid #D8E6EB;
            border-left: 1px solid #D8E6EB;
            border-image: initial;
            font-size: .90em;
            font-family: "Arial","Helvetica",sans-serif;
            color: #000;
            padding: 9px 11px;
            line-height: 1px;}
        .googleplus span {
            color: #000;
            font-size: 11px;
            position: absolute;
            display:inline-block;
            margin: 9px 70px;}
        .g-plusone {    float: left;}
    .gplus {
            background: #fff;
            padding: 0px;
            border: 0px solid #C7DBE2;
            margin-bottom:-13px;}

        .twitter {
            background: #EEF9FD;
            padding: 10px;
            border: 1px solid #C7DBE2;
            border-top: 0;}
</style>

    <!--begin of social widget-->
<div style="margin-bottom:10px;">
<div id="ForYouFree-bar" >

    <!-- Google Plus-->
    <div class="gplus"> <link href="http://plus.google.com/TULIS ID BLOG ANDA" rel="publisher" />

    <!-- Place this tag where you want the badge to render -->
<g:plus href="http://plus.google.com/TULIS ID BLOG ANDA" width="300" height="69" margin="0px" theme="light"></g:plus>
</div>

    <div class="fb-likebutton">
    <!-- Facebook -->
    <iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com/TULIS NAMA FANPAGE ANDA&amp;send=false&amp;layout=standard&amp;width=230&amp;show_faces=false&amp;font=arial&amp;colorscheme=light&amp;action=like&amp;height=80&amp;appId=142184962628769" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:230px; height:80px;" allowtransparency="true"></iframe>
</div>

    <div class="googleplus">
    <!-- Google -->
<g:plusone size="standard" annotation="inline" width="300" href="TULIS LINK BLOG ANDA"></g:plusone>
</div>

    <div class="twitter">
    <!-- Twitter -->
<a class="twitter-follow-button" data-lang="id" data-show-count="true" href="https://twitter.com/TULIS NAMA TWITTER ANDA">Ikuti @TULIS NAMA TWITTER ANDA</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>

</div></div>

<div style="display: inline-block; text-align: left;"><h8 style="display: block; font-family: 'calibri'; font-size: 17px; font-weight: bold;">Dapatkan Update lewat Email</h8><small><i>Untuk mendapatkan informasi terbaru dari blog ini silahkan <a href="http://feeds.feedburner.com/TULIS NAMA FEEDBURNER ANDA" target="_blank" title="feedburner"><b>klik disini</b></a>, atau berlangganan lewat email dibawah ini.</i></small><form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=future404', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="future404" /><input name="loc" type="hidden" value="fr_FR" /><input class="emailtext" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" type="text" value="Enter your email..." /><input alt="" class="sub-button" title="" type="submit" value="Enter" /></form><p></p></div>

<a href="http://www.blogger.com/follow-blog.g?blogID=TULIS ID BLOG ANDA"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqCPyZShxtgV7pyqUuC0Axlk6Uz6uWz34aEAR-yYa-LyU92xivO7hpFz8b02rEH1WdvisUaHdZ4_lSCENcxCgg0aFy549l5HgJi2z0H06A6T7WFbb1bAAd4La8c1_mQkQlBjdlyrY9uG4/s1600/Follow+my+blog.gif" /></a>

<script id="_wauont">var _wau = _wau || []; _wau.push(["small", "l0hgo7pv2y1l", "ont"]);
(function() {var s=document.createElement("script"); s.async=true;
s.src="http://widgets.amung.us/small.js";
document.getElementsByTagName("head")[0].appendChild(s);
})();</script>

4. Ganti warna teks yang sudah saya tandai di atas ini.
5. SAVE/ SIMPAN

Sekian Tutorial Cara membuat widget social media simple keren di blog, Jika Script diatas tidak berfungsi silahkan comment dibawah ini. Dan jika anda suka artikel ini Like & Share atau Follow Saya agar blog ini baik kedepannya.