Memasang Widget Mashable Social Media Blogger - Bangtax
MOHON MATIKAN ADBLOCK ANDA, KARENA BIAYA MAINTENANCE SERTA UPDATE ARTIKEL BERGANTUNG PADA IKLAN YANG MUNCUL PADA BLOG INI | DAN JANGAN LUPA UNTUK FOLLOW SEMUA SOSIAL MEDIA BANGTAX ATAU SILAHKAN PERGI KE KOLOM BERLANGGANAN/SUBSCRIBE DI BAGIAN BAWAH BLOG BANGTAX UNTUK MENDAPATKAN UPDATE ARTIKEL MENARIK LAINNYA.

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.


Sekian artikel saya tentang "Memasang Widget Mashable Social Media Bloggersemoga bisa berguna untuk kalian semua. Untuk mendapat update artikel menarik dari Bangtax, silahkan masukkan email kalian di kotak subscribe bagian paling bawah blog lalu tekan Subscribe atau juga bisa Follow Sosial Media Bangtax di Instagram, Facebook dan Twitter, Terima kasih.

Lihat Artikel Lainnya :