Menambahkan Advanced Social Widget pada Sidebar Blogger

Jika sobat berkunjung ke maxmanroe.com pada bagian bawah sebelah kanan ada widget subscribe. Widget tersebut sangat komplit karena selain subscribe email, informasi yang ditampikan juga berupa jumlah followers twitter, page like facebook, google+ dan icon sosial media. Bisa dibilang semua untuk satu, dalam satu widget yang bernama Advanced Social Widget

Best Advanced Social Subscription Widget for Blogger

Plugin widget subscribe atau social media widget tersebut diperuntukan untuk wordpress, akan tetapi jangan khawatir, bagi sobat pengguna blog dari blogger bisa juga mendapatkan advanced social widget untuk blogger, berikut tutorialnya

1. Masuk ke Template → Edit HTML. Kemudian tambahkan kode dibawah ini diatas </head> kemudian simpan

<!-- Advanced SOCIAL WIDGET -->
<style> 
div#advancedsocialwidget,div#advancedsocialwidget ul,div#advancedsocialwidget ul li,div#advancedsocialwidget ul li img,div#advancedsocialwidget ul li span,#advancedsocialwidget ul li a{background:none;border:none;margin:0;padding:0}
div#advancedsocialwidget{font-family:inherit;background:#fff url() repeat-x;width:100%;border:0px solid #ddd!important;font-size:90%;-moz-border-radius:0px;-webkit-border-radius:0px;border-radius:0px;margin:0 0 10px!important;padding:5px 2px 18px!important}
div#advancedsocialwidget h3{font-size:inherit;text-shadow:0 1px 0 rgba(255,255,255,.5);margin:0!important;padding:2px 0 5px 10px !important}
#newsletter{text-align:center;margin:0 auto 10px!important;padding:0!important}
.newsletter input{-moz-border-radius-topleft:3px!important;-moz-border-radius-topright:0!important;-webkit-border-top-left-radius:3px!important;-webkit-border-top-right-radius:0!important;-moz-border-radius-bottomleft:3px!important;-moz-border-radius-bottomright:0!important;-webkit-border-bottom-left-radius:3px!important;-webkit-border-bottom-right-radius:0!important;-webkit-font-smoothing:antialiased;-webkit-box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.1) inset;-moz-box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.1) inset;box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.1) inset;background:0 color-stop(.25,#FFF));filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=&#39;#EEEEEE&#39;,EndColorStr=&#39;#FFFFFF&#39;);-ms-filter:&quot;progid:DXImageTransform.Microsoft.gradient(startColorStr=&#39;#EEEEEE&#39;, EndColorStr=&#39;#FFFFFF&#39;)&quot;;border:1px solid #CCC;color:#666!important;height:19px!important;font-size:11px!important;line-height:18px!important;vertical-align:top;margin:5px 0 0!important;padding:4px!important}
.newsletter input:focus,.newsletter input:active{background:#fafafa}
.newsletter button{vertical-align:top;height:28px!important;line-height:18px!important;text-align:left;width:auto;-moz-border-radius-topright:3px!important;-moz-border-radius-topleft:0!important;-webkit-border-top-right-radius:3px!important;-webkit-border-top-left-radius:0!important;-moz-border-radius-bottomright:3px!important;-moz-border-radius-bottomleft:0!important;-webkit-border-bottom-right-radius:3px!important;-webkit-border-bottom-left-radius:0!important;background:#4b88a0;background-image:0;-moz-box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3) inset;-webkit-box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3) inset;box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3) inset;font:bold 11px Arial, Helvetica!important;color:#f9f9f9;text-transform:uppercase;cursor:pointer;text-shadow:0 1px 0 rgba(0,0,0,.2);border-color:#75a1b2 #4b88a0 #38677a;border-style:solid;border-width:1px;margin:5px 0 0!important;padding:4px!important}
.newsletter button:hover{background:#75a1b2;background-image:0;cursor:pointer}
.newsletter button:active{background:#89C9E2;outline:none;-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset}
div#advancedsocialwidget .textwidget img{border:0}
div#advancedsocialwidget .textwidget .tfsubscribelink{text-align:center!important;position:relative;margin:5px auto!important}
div#advancedsocialwidget .textwidget .rssicon{width:21px;height:21px;background:url(https://1.bp.blogspot.com/-A5hAEBDCeiM/T_A5Dnf0kOI/AAAAAAAABoI/3S_6kfE7R5E/s1600/advsoc_widget_main_24.png) no-repeat -176px 0;margin-bottom:30px;padding:5px 20px 7px 0}
div#advancedsocialwidget .textwidget .rssicon a,div#advancedsocialwidget .textwidget .rssicon a:hover{text-decoration:none}
div#advancedsocialwidget .textwidget .socialfollow{text-align:center;width:245px;margin:10px auto}
div#advancedsocialwidget .textwidget .rsssubscribelink{display:block;text-align:center;margin:0 auto 5px;padding:0}
div#advancedsocialwidget .textwidget a.rsslink{text-decoration:none;font-weight:700!important;font-family:inherit}
div#advancedsocialwidget .textwidget a.rsslink:hover{text-decoration:underline}
div#social_icons{float:left;width:100%;background:#fff;position:relative}
div#social_icons ul{clear:left;float:left;list-style:none;position:relative;left:50%;text-align:center;margin:0!important;padding:0!important}
div#social_icons ul li{display:block;float:left;list-style:none;position:relative;right:50%;margin:0 0 0 1px !important;padding:3px 10px!important}
div#social_icons ul li span{display:block;color:#444!important;font-size:8px;border:none;padding:40px 0 2px!important}
div#social_icons ul li:first-child span{margin-left:-2px}
div#social_icons ul li:last-child span{margin-left:-10px}
div#social_icons .subscribe_twitter a{width:24px;height:24px;text-decoration:none;display:block;background:url(https://1.bp.blogspot.com/-A5hAEBDCeiM/T_A5Dnf0kOI/AAAAAAAABoI/3S_6kfE7R5E/s1600/advsoc_widget_main_24.png) no-repeat 0 0;font-family:inherit;color:inherit}
div#social_icons .subscribe_google a{width:24px;height:24px;text-decoration:none;display:block;background:url(https://1.bp.blogspot.com/-A5hAEBDCeiM/T_A5Dnf0kOI/AAAAAAAABoI/3S_6kfE7R5E/s1600/advsoc_widget_main_24.png) no-repeat -50px 0;font-family:inherit;color:inherit}
div#social_icons .subscribe_facebook a{width:24px;height:24px;text-decoration:none;display:block;background:url(https://1.bp.blogspot.com/-A5hAEBDCeiM/T_A5Dnf0kOI/AAAAAAAABoI/3S_6kfE7R5E/s1600/advsoc_widget_main_24.png) no-repeat -25px 0;font-family:inherit;color:inherit}
div#social_icons .subscribe_pinterest a{width:24px;height:24px;text-decoration:none;display:block;background:url(https://1.bp.blogspot.com/-A5hAEBDCeiM/T_A5Dnf0kOI/AAAAAAAABoI/3S_6kfE7R5E/s1600/advsoc_widget_main_24.png) no-repeat -126px 0;font-family:inherit;color:inherit}
.tipsy{font-size:10px;opacity:0.8;filter:alpha(opacity=80);background-repeat:no-repeat;background-image:url(../images/tipsy.gif);padding:5px}
.tipsy-inner{background-color:#000;color:#FFF;max-width:200px;text-align:center;-moz-border-radius:3px;-webkit-border-radius:3px;padding:5px 8px 4px}
.tipsy-north{background-position:top center}
.tipsy-south{background-position:bottom center}
.tipsy-east{background-position:right center}
.tipsy-west{background-position:left center}
.clear{clear:both}
</style>

2. Setelah itu masuk ke Layout → Add a Gadget → HTML/JavaScript, kemudian masukan kode dibawah ini

<!-- Advanced Social Widget -->
<div id="advancedsocialwidget" style="width:auto">
  <h3></h3>
    <div class="textwidget">
          <div id="newsletter">
        <form action="https://feedburner.google.com/fb/a/mailverify" class="newsletter" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=YOUR-FEEDBURNER-ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
            <input type="hidden" name="uri" value="YOUR-FEEDBURNER-ID" />
            <input type="hidden" name="loc" value="en_US" />
            <input name="email" id="newsletter-text" type="text" maxlength="100" style="width:183px !important" value="Enter your email address..."/><button type="submit" id="newsletter-button">Subscribe</button>
        </form>
    </div><!-- End newsletter -->

    <div class="rsssubscribelink">
        <a title="Subscribe to RSS Feed" href="https://feeds.feedburner.com/YOUR-FEEDBURNER-ID" class="rssicon"></a> &nbsp;<a class="rsslink" href="https://feeds.feedburner.com/YOUR-FEEDBURNER-ID">Subscribe to RSS Feed</a>
    </div>
        <div class="socialfollow">
        <g:plusone size="medium" href="https://www.YOUR-SITE.com"></g:plusone>        <iframe src="https://www.facebook.com/plugins/like.php?href=https://www.facebook.com/YOUR-FACEBOOK-ID&amp;layout=button_count&amp;show_faces=false&amp;width=40&amp;action=like&amp;font=&amp;colorscheme=light&amp;height=20" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:120px; height:20px;" allowtransparency="true"></iframe>             <div class="tfsubscribelink"> 
            <a href="https://twitter.com/YOUR-TWITTER-ID" class="twitter-follow-button" data-lang="en" >Follow @YOUR-TWITTER-ID</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="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
        </div>
            </div>
    
        <div class="clear" style="margin-bottom:5px;"></div>
    
    <div id="social_icons">
        <ul>
                            <li class="subscribe_twitter" style="padding:0 4px !important"><a id="subscribe_twitter" href="https://twitter.com/YOUR-TWITTER-ID" title="Follow YOUR-TWITTER-ID on Twitter" class="fade" target="_blank"></a></li>
                            <li class="subscribe_facebook" style="padding:0 4px !important"><a id="subscribe_facebook" href="https://www.facebook.com/YOUR-FACEBOOK-ID" title="Visit the  Facebook Page" class="fade" target="_blank"></a></li>
                         <li class="subscribe_google" style="padding:0 4px !important"><a id="subscribe_google" href="https://plus.google.com/YOUR-GOOGLEPLUS-ID/" title="Visit the  Google+ Page" class="fade" target="_blank"></a></li>
                            <li class="subscribe_pinterest" style="padding:0 4px !important"><a id="subscribe_pinterest" href="https://www.pinterest.com/YOUR-PINTEREST-ID" title="Follow me on Pinterest" class="fade" target="_blank"></a></li>
                    </ul> 
    </div>
    </div>
        <div class="clear"></div>
</div>
<right><a href="http://goo.gl/lfn2fH"><font style='font-size: 9px; color: #CECECE; float: right; margin: 5px;'>Subscribe widget</font></a></right><br/>

Pengaturan :
Sebelum di gunakan, silahkan untuk melakukan pengeditan untuk beberapa identitas dibawah ini, sesuaikan dengan identitas sobat
YOUR-SITE
YOUR-FEEDBURNER-ID
YOUR-FACEBOOK-ID
YOUR-TWITTER-ID
YOUR-GOOGLEPLUS-ID
YOUR-PINTEREST-ID

3. Finish

---

Sekian tutorial cara menambahkan advanced social widget pada blogger, jika dirasa penggunaan widget social ini memberatkan loading pada blog sobat, sebaiknya jangan dipasang. Semoga bermanfaat