Memasang Widget Social Media Subscription Mashable

Cara Memasang Widget Social Media Subscription Mashable - Untuk mempromosikan fanspage social media blog, maka menjadi sebuah keharusan bagi pemilik blog untuk memasang widget yang sudah tersedia jejaring-jejaring sosial media. Namun bayangkan jika kita memasangnya satu-persatu tanpa mengeditnya, maka widget media sosial yang kita pasang tentu akan terlihat berantakan dan tak sedap dipandang sehingga mengganggu pengunjung. Dan andai bila kita bersedia mengedit desain dan ukuran tombol follow masing-masing social media, tentu akan memerlukan waktu yang lama.

Apa itu Widget Mashable ?

Oleh karena itu Ehpedia kali ini akan membagikan Widget Social Media Subscription Mashable, yakni widget langganan social media terbaik tahun 2012 yang sudah sangat populer di kalangan blogger dunia. Widget ini memiliki desain yang rapi dan telah memiliki pilihan berlangganan sosial media yang lengkap. Jadi kita tidak perlu lagi mengeditnya, karena ukurannya sudah sesuai dengan sidebar blog dan telah tersedia lengkap jejaring media sosialnya. Ditambah lagi widget ini tidak memakan banyak ruang dan cukup ringan sehingga tidak memberatkan loading blog.

Berikut adalah fitur-fitur yang terdapat pada widget Mashable ini :

Google+ Badges
Facebook Like Button
Google+ 1 Button
Pin it Button
Twitter Follow Button
Pinterest Follow Button
Email Subscription
Other social media, meliputi : RSS Feed, Pinterest dan Google Plus

Cara Memasang Widget Social Media Subscription Mashable

1. Login ke blogger.

2. Klik "Tata letak" dan klik "tambahkan gadget" lalu pilih "HTML/JavaScript".

3. Copy dan Pastekan kode berikut ini:

<style>/* Social Widget */ #HB-mashable-bar{border: 0;margin-bottom: 10px;margin: 0 auto;width:300px;border: 1px solid #DDD;}.fb-likebox{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:70px;}.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: 14px;position: absolute;display:inline-block;margin: 9px 70px;font-family: calibri;width: 280px;}.pinterest1{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;}.pinterest1 span{color: #000;font-size: 14px;position: absolute;display:inline-block;margin: 9px 40px;font-family: calibri;width: 280px;}.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;}.pterest{background: #F5FCFE;padding: 10px;border: 1px solid #C7DBE2;border-top: 0;}#mashable{background: #EBEBEB;border: 1px solid #CCC;border-top: 1px solid white;padding: 2px 8px 2px 3px;text-align: right;border-image: initial;}#mashable .author-credit{}#mashable .author-credit a{font-size: 10px;font-weight: bold;text-shadow: 1px 1px white;color: #1E598E;text-decoration:none;}#email-news-subscribe .email-box{padding: 5px 10px;font-family:"Arial", "Helvetica", sans-serif;border-top: 0;border-right: 1px solid #C7DBE2;border-left: 1px solid #C7DBE2;border-image: initial;height:36px;}#email-news-subscribe .email-box input.email{background:#FFFFFF;border: 1px solid #dedede;color: #999;padding: 7px 10px 8px 10px;-moz-border-radius: 3px;-webkit-border-radius: 3px;-o-border-radius: 3px;-ms-border-radius: 3px;-khtml-border-radius: 3px;border-radius: 3px;border-image: initial;font-family:"Arial", "Helvetica", sans-serif;}#email-news-subscribe .email-box input.email:focus{color:#333 }#email-news-subscribe .email-box input.subscribe{background: -moz-linear-gradient(center top, #FFCA00 0, #FF9B00 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFCA00), color-stop(1, #FF9B00));background: -moz-linear-gradient(center top, #FFCA00 0, #FF9B00 100%);-pie-background: linear-gradient(270deg, #ffca00, #ff9b00);font-family:"Arial", "Helvetica", sans-serif;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;border:1px solid #cc7c00;color:white;text-shadow:#d08d00 1px 1px 0;padding:7px 14px;margin-left:3px;font-weight:bold;font-size:12px;cursor:pointer;border-image: initial;}#email-news-subscribe .email-box input.subscribe:hover{background: #ff9b00;background-image:-moz-linear-gradient(top, #ffda4d, #ff9b00);background-image:-webkit-gradient(linear, left top, left bottom, from(#ffda4d), to(#ff9b00));filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff, endColorStr=#ebebeb);outline:0;-moz-box-shadow:0 0 3px #999;-webkit-box-shadow:0 0 3px #999;box-shadow:0 0 3px #999 background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #ffda4d), color-stop(1, #ff9b00));background:-moz-linear-gradient(center top, #ffda4d 0, #ff9b00 100%);-pie-background:linear-gradient(270deg, #ffda4d, #ff9b00);border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;border:1px solid #cc7c00;color:#FFFFFF;text-shadow:#d08d00 1px 1px 0 }#other-social-bar{background-color: #D8E6EB;box-shadow: 0 1px 1px #FFFFFF inset;padding: 0px;font-family:"Arial", "Helvetica", sans-serif;font-weight:bold;overflow: hidden;border: 1px solid #B6D0DA;height:37px;}#other-social-bar ul{list-style: none outside none;padding-left: 4px;}#other-social-bar .other-follow{float: left;color:#1E598E;overflow: hidden;height:20px;padding:5px;width: 270px;}#other-social-bar .other-follow ul{list-style: none outside none;padding-left: 4px;}#other-social-bar .other-follow ul li{font-size: 12px;font-weight: bold;display:inline;border:0;text-shadow: 1px 1px white;}#other-social-bar .other-follow ul li a{font-size: 12px;color:#1E598E;font-weight: bold;display:inline;text-shadow: 1px 1px white;}#other-social-bar .other-follow li{font-size: 12px;font-weight: bold;display:inline;border:0;text-shadow: 1px 1px white;}#other-social-bar .other-follow li a{font-size: 12px;color:#1E598E;font-weight: bold;display:inline;text-shadow: 1px 1px white;}#other-social-bar .other-follow li.my-rss{background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQIbVzzqOxRizf3wEv0Zu9nF2junNFAEZTO2XLiGtEFpMuQSEhLsw8DOWnzEEYit5Iw_NBBytCyXKOJ0KQeCgW0H-7b1_IGbV3rDO8170ZsWu22gUdHcCtlkgBWJkQDY0MBLBIDq6uEps/s400/rss-16x16.png') no-repeat transparent;line-height: 1;padding: 0px 3px 1px 20px;width: 60px;margin-bottom:0px;margin-left:5px;}#other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-twitter a, #other-social-bar .other-follow li.my-gplus a{text-decoration:none;}#other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-twitter a:hover, #other-social-bar .other-follow li.my-gplus a:hover{text-decoration:underline;}#other-social-bar .other-follow li.my-twitter{background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1hp75qQZ9F9iAVRqlQqHo2sxcsOFOlr9Aedw1wzSNdWhFtfDewe2dNi_4VnAavPTrfNUP_enCe1-0sq23BhfbRJudML5iQmcHEh36XnzohUfYbBGxH42YolxmCFjVcHJZcZbeabM-FHc/s400/twitter%2527.png') no-repeat transparent;line-height: 1;padding: 0px 3px 1px 20px;width: 60px;margin-bottom:0px;}#other-social-bar .other-follow li.my-gplus{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1jXFKZwnCzeicj0AHUlGKBLDXs_uA6kjjflqrJrOlt6KKzWf3kzMjnq1n2cVs12d3qWC5RofOmX0UyejwZK_gVhCYLNENcy4Gd0-fGP-yHQcRwlOq6QaIsvzTDEIJgy5mogDvgH-EBI8/s400/gplus-16x16.png) no-repeat transparent;line-height: 1;width: 60px;padding: 0px 3px 1px 20px;margin-bottom:0px;}</style><div style="margin-bottom:10px;"><div id="HB-mashable-bar"><div class="gplus"><link href="https://plus.google.com/+EhpediaBlogspotcom" rel="publisher" /><script type="text/javascript">window.___gcfg={lang:'en'};undefinedfunctionundefined){var po=document.createElementundefined"script");po.type="text/javascript";po.async=true;po.src="https://apis.google.com/js/plusone.js";var s=document.getElementsByTagNameundefined"script")[0];s.parentNode.insertBeforeundefinedpo,s);})undefined);</script><script type="text/javascript">var _gaq=_gaq||[];_gaq.pushundefined['_setAccount','UA-29131740-1']);_gaq.pushundefined['_trackPageview']);undefinedfunctionundefined){var ga=document.createElementundefined'script');ga.type='text/javascript';ga.async=true;ga.src=undefined'https:'==document.location.protocol?'https://ssl':'http://www')+'.google-analytics.com/ga.js';var s=document.getElementsByTagNameundefined'script')[0];s.parentNode.insertBeforeundefinedga,s);})undefined);</script><g:plus href="https://plus.google.com/+EhpediaBlogspotcom" width="300" height="131" margin="0px" theme="light"></g:plus></div><div class="fb-likebox"><div id="fb-root"></div><script>(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src="//connect.facebook.net/en_US/all.js#xfbml=1";fjs.parentNode.insertBefore(js,fjs);}(document,'script','facebook-jssdk'));</script><div class="fb-like-box" data-href="http://www.facebook.com/ehpedia" data-width="292" data-show-faces="false" data-stream="false" data-header="false"></div></div><div class="googleplus"><span>Recommend us on Google!</span><div class="g-plusone" data-size="medium"></div><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script></div><div class="pinterest1"><a href='javascript:void(run_pinmarklet1())'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYI8TyxylYjlkXr3U7DCtAsTCL4eRInp09b0k4SC_vT-3KMTwp2uPPZtluldQvMtIb0Iwd8hswShSJhyphenhyphenrtqYMomMpufiZwfw5Zq7QsV03obTKC27QqKDTVbXNP_wBoIXHONe1c6WPP4D9_/s1600/pinmask2.png" style='margin:0;padding:0;border:none;'/></a><script type='text/javascript'>function run_pinmarklet1(){var e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e);}</script><span>Pin It On Pinterest</span></div><div class="twitter"><iframe title="" style="width: 300px;height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&align=&button=blue&id=twitter_tweet_button_0&lang=en&link_color=&screen_name=ehpedia&show_count=&show_screen_name=&text_color=" frameborder="0" scrolling="no"></iframe></div><div class="pterest"><a href="http://pinterest.com/yoyosuharyo/"><img src="http://passets-cdn.pinterest.com/images/about/buttons/follow-me-on-pinterest-button.png" width="169" height="28" alt="Follow Me on Pinterest" /></a></div><div id="email-news-subscribe"><div class="email-box"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=ehpediafeed', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input class="email" type="text" style="width: 150px;font-size: 12px;" id="email" name="email" value="Enter Your Email here.." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /><input type="hidden" value="ehpediafeed" name="uri" /><input type="hidden" name="loc" value="en_US" /><input class="subscribe" name="commit" type="submit" value="Subscribe" /></form></div></div><div id="other-social-bar"><ul class="other-follow"><li class="my-rss"><a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/ehpediafeed" target="_blank">RSS Feed</a></li><li class="my-twitter"><a rel="nofollow" title="twitter" rel="author" href=http://twitter.com/ehpedia target="_blank">Twitter</a></li><li class="my-gplus"><a rel="nofollow" title="Google Plus" rel="author" href=https://plus.google.com/+EhpediaBlogcom target="_blank">Google Plus</a></li></ul></div><div id="mashable" style="background: #EBEBEB;border: 1px solid #CCC;border-top: 1px solid white;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family: " arial ","helvetica ",sans-serif;"><span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://www.ehpedia.com/2015/06/memasang-widget-social-media-mashable.html target="_blank">Get This Widget »</a></span></div></div></div>

Sesuaikan lebarnya "width:300px" dengan ukuran sidebar anda

Ubah https://plus.google.com/+EhpediaBlogspotcom dengan URL Google Plus Page anda.

Ubah http://www.facebook.com/ehpedia dengan Facebook Page URL anda.

Ubah ehpedia dengan Username twitter anda

Ubah ehpediafeed dengan Username FeedBurner anda.

Ubah https://plus.google.com/+EhpediaBlogcom dengan URL Google Plus Profile anda.

Ubah http://twitter.com/ehpedia dengan URL twitter anda

4. Klik "save" template dan selesai

Oh ya bagi anda yang belum memasang script google plus, silahkan masukan kode berikut ini tepat dibawah kode ]]></b:skin> :

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>

Kodenya memang panjang, tapi tampilan widget ini akan terkesan bersih dan rapih. Sangat cocok dipasang di sidebar blog yang lebarnya 250-300 pixel. Anda juga dapat mengedit kode diatas agar sesuai dengan tampilan blog anda.

Dengan widget ini akan menambah banyak like fanspage facebook anda, followers google plus, follower di twitter, dan subscriber RSS feed blog anda. Sehingga potensi traffik yang berasal dari sosial media pun akan meningkat.