BURUAN BERLANGGANAN/SUBSCRIBE BLOG BANGTAX UNTUK MENDAPATKAN UPDATE ARTIKEL MENARIK LAINNYA | JIKA KOLOM KOMENTAR DISQUS TIDAK MUNCUL,SILAHKAN MATIKAN ADBLOCK PADA BROWSER ANDA KEMUDIAN RELOAD KEMBALI | JADILAH BLOGGER YANG SALING MENGHARGAI TANPA MELAKUKAN COPY-PASTE.

Memasang Widget Mashable Social Media Blogger

Bangtax.net - Widget Mashable adalah widget social media yang seringkali dipakai banyak blogger-blogger dari dulu sampai sekarang, memiliki gaya familiar nya dengan menunjukkan berbagai button social menjadi nilai lebih tersendiri bagi para blogger.

Memasang Widget Mashable Social Media Blogger


Sebenarnya gaya dari widget mashable ada banyak sekali, tapi untuk widget yang akan saya bagikan ini adalah hasil modifikasi dari saya dan dijamin lebih simple & praktis pula.


Cara Memasang Widget Mashable Social Media Blogger

Memasang Widget Mashable Social Media Blogger
Setelah login Blogger dan sampai di Dasbor Blogger silahkan pilih tab "Tata Letak" kemudian pilih "Tambahkan Gadget".

Memasang Widget Mashable Social Media Blogger
Kemudian pilih "HTML/JavaScript"

Memasang Widget Mashable Social Media Blogger
Setelah itu masukkan kode dibawah ini di kotak konten "HTML/JavaScript" lalu klik Simpan.
 <style type="text/css">
/*<!CDATA[*/
#bwg-mashable{width:300px;margin:auto;padding:0;}
.bwg-googleplus {margin-bottom:50px; height: 57px;}
.bwg-facebook {background:#FFFFFF;border: 1px solid #DCDCDC;margin-top: -2px;padding: 5px 10px;}
.bwg-twitter {background-color: #FFFCC6;border: 1px solid #FFD36B;border-top: 0;}
.bwg-twitter a.twitter-follow-button {display: block;}
.bwg-twitter iframe {margin: 9px 11px;}
.bwg-sociallinks {background-color: #FFF990;border: 1px solid #FFD36B;border-top: 1px solid #FFE094;padding: 10px 11px;overflow: hidden;}
.bwg-sociallinks a {text-shadow: 1px 1px white;}
.bwg-sociallinks .bwg-social {list-style: none;overflow: hidden;margin: 0 !important;padding: 0 !important;}
.bwg-sociallinks .bwg-social li {border:0 none !important;float: left;line-height: 1;padding: 2px 0 4px 20px !important;margin-bottom: 3px;width: 70px;background: url(http://4.bp.blogspot.com/-WpJR2Qq0Sqw/Tx_4RZNGNuI/AAAAAAAABb0/WbNVkzuBexQ/s1600/w2b_socialsprite.png) no-repeat;font-size: 12px;}
.bwg-sociallinks .bwg-social li a {display: block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}

.bwg-emailbox {background-color: #FFF05C;border: 1px solid #FFD36B;border-top: 1px solid #FFD36B;padding: 12px 16px;overflow: hidden;}
.bwg-emailbox form{width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;}
.bwg-emailbox input.emailu {float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;color: #999;padding: 7px 10px 8px;width: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;}
.bwg-emailbox input.emailu:focus {color: #333;}
.bwg-emailbox input.submitu {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: white;padding: 7px 14px;font-weight: bold;font-size: 12px;float: right;cursor: pointer;}
.bwg-emailbox input.submitu:hover {text-decoration: none;}
.bwgOrange{border:1px solid #E08121 ;text-shadow:1px 1px 0 #E08121;background: #f79d4a;background: -moz-linear-gradient(top, #f79d4a 0%, #ef871f 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f79d4a), color-stop(100%,#ef871f));background: -webkit-linear-gradient(top, #F37A5F 0%,#E44623 100%);background: -o-linear-gradient(top, #f79d4a 0%,#ef871f 100%);background: -ms-linear-gradient(top, #f79d4a 0%,#ef871f 100%);background: linear-gradient(top, #f79d4a 0%,#ef871f 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f79d4a', endColorstr='#ef871f',GradientType=0 );}
.bwgOrange:hover{background: #f4b67c;background: -moz-linear-gradient(top, #f4b67c 0%, #ef871f 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4b67c), color-stop(100%,#ef871f));background: -webkit-linear-gradient(top, #f4b67c 0%,#ef871f 100%);background: -o-linear-gradient(top, #f4b67c 0%,#ef871f 100%);background: -ms-linear-gradient(top, #f4b67c 0%,#ef871f 100%);background: linear-gradient(top, #f4b67c 0%,#ef871f 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4b67c', endColorstr='#ef871f',GradientType=0 );}.bwg-moresubs {background: none repeat scroll 0 0 #EBEBEB;border-style: solid;border-width: 1px;border-color: #fff #ccc #ccc;padding: 3px 8px 3px 3px;text-align: right;font-size: 7px;letter-spacing: 1px;}
.bwg-moresubs a {display: inline-block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}
/*]]>*/
</style>
    <div id="bwg-mashable">
    <div class="bwg-googleplus">
        <script type="text/javascript">
        /*<![CDATA[*/
        window.___gcfg = {lang: 'en'};
        (function(){
            var po = document.createElement("script");
            po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(po, s);
        })();
        /*]]>*/
        </script>
        <div class="g-plus" data-href="https://plus.google.com/115681810115127990780" data-width="300" data-height="auto" data-theme="light"></div>
    </div>
    <div class="bwg-facebook">
        <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2FBangTaxID&amp;send=false&amp;layout=standard&amp;width=280&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:280px; height:66px;" allowtransparency="true"></iframe>
    </div>
    <div class="bwg-twitter">
        <a href="https://twitter.com/BangTaxID" class="twitter-follow-button" data-show-count="true">Follow @BangTaxID</a>
        <script type="text/javascript">/*<![CDATA[*/!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 class="bwg-sociallinks">
<center><font face="calibri">Untuk mendapat update artikel terbaru, langsung saja berlangganan artikel blog BangTax dibawah ini dengan mengisi email kamu:</font></center>
    </div>
    <div class="bwg-emailbox">
        <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=androidact', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
        <table width="100%">
            <tr>
            <td>
                <input class="emailu" name="email" placeholder="Enter your email" type="text"/>
            </td>
            <td width="64px">
                <input class="submitu bwgOrange" type="submit" value="Subscribe"/>
            </td>
            </tr>
        </table>
        <input name="uri" type="hidden" value="bangtaxblog"/>
        <input name="loc" type="hidden" value="en_US"/>
        </form>
    </div>
    </div> 

Ganti kode yang sudah di tandai diatas dengan url / id social media kamu seperti Google+ , Facebook, Twitter, dan Feedburner

HASIL


See the Pen Mashable Widget by Bangtax (@bangtax) on CodePen.


Adblock Detected

Suka blog ini ? tetaplah menonaktifkan Adblock jika anda mengunjungi blog ini

Mau lanjut membaca? Ini adalah Cara Whitelisting (daftar putih) Blog ini dari Adblock

Terima Kasih

×