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="http://3.bp.blogspot.com/-ZSpFd6jjxZg/UsjDv3bMyRI/AAAAAAAAAbs/NwnOUTnMmwc/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

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

iya gan, kalo scriptnya gak bisa bilang ya gan

scriptnya terlalu banyak gak ada yang simple :)

tinggal hilangin aja script yang tidak perlu gan :)

kalo agan ngerasa berat, bagus jangan di pake

bagus nih gan buat wiget sosmed jdi lbih simple

Izin book mark dulu gan
Untuk mengetahui id blog gimana gan?

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

Keren postingannya gan, Izin praktek buat di blog ane

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

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

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

thanks buat tutornya gan,, sangat memabantu sekli..

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

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

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
EmoticonEmoticon

Powered by Blogger.