1 Apr 2015

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

Contoh Widget Social Media


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.

23 komentar:

  1. bagus juga widget satu ini dan cara pemasangannya juga simple. izin coba mas

    ReplyDelete
    Replies
    1. iya gan, kalo scriptnya gak bisa bilang ya gan

      Delete
  2. scriptnya terlalu banyak gak ada yang simple :)

    ReplyDelete
    Replies
    1. tinggal hilangin aja script yang tidak perlu gan :)

      Delete
  3. Replies
    1. kalo agan ngerasa berat, bagus jangan di pake

      Delete
  4. bagus nih gan buat wiget sosmed jdi lbih simple

    ReplyDelete
  5. Izin book mark dulu gan
    Untuk mengetahui id blog gimana gan?

    ReplyDelete
    Replies
    1. buka blogger > dasbor > Klik gambar pensil > liat diatas seperti ini https://www.blogger.com/blogger.g?blogID=id blog anda#editor/src=dashboard

      Delete
  6. Keren postingannya gan, Izin praktek buat di blog ane

    ReplyDelete
  7. cara lihat id feedburner gimana gan? dulu mau masang gak jadi gara2 gak tau :3

    ReplyDelete
  8. nyimak gan :D
    kunjungi juga >> http://kang-en.blogspot.com/

    ReplyDelete
  9. Wah lengkap sekali ya gan ..
    Akan saya coba dan terimakasih atas info dan tutorialnya :)

    ReplyDelete
  10. thanks buat tutornya gan,, sangat memabantu sekli..

    ReplyDelete
  11. Manteeep sob artikelnya :)
    http://goo.gl/EeJFUj

    ReplyDelete
  12. saya coba dulu gan... nanti kalo belum berhasil saya balik sini lagi

    ReplyDelete

Peraturan Berkomentar :

-Dilarang berkomentar unsur Negatif
-Dilarang menyertakan sebuah Link Aktif
-Dilarang Spam
-Dilarang membully

Mohon pengertiannya, apabila ada yang melanggar saya selaku admin Blog tidak segan-segan menghapus komentar anda.
Atas perhatiannya , saya ucapkan terimakasih