Membuat Widget keren ala Mashable

Cara Membuat Widget Mashable Style Social Subscription.  adalah Widget keren buat Blogger/Blogspot dari Mashable.com dimana para pengunjung dapat berlangganan, berbagi dan menyarankan setiap postingan di blog kita melalui Facebook, Google Plus, Twitter, Email dan situs jejaring sosial lainnya. Widget keren tersebut seperti gambar dibawah ini :

 Lihat DEMO

Dengan memasang widget sharing ala Mashable akan mempermudah pengujung untuk bergabung dengan jaringan blog kita di sosial media. Widget ini memang awalnya dibuat atau digunakan oleh Mashable, sebuah blog tekonologi yang sangat populer. Widget ini memberikan kemudahan pengunjung blog untuk bergabung dengan google plus, menyukai halaman facebook, mengikuti (follow) twitter kita, dan berlangganan RSS lewat email. Dengan tampilan yang menarik dan rapi, widget ini cocok dipasang di sidebar blog.

untuk Membuatnya  ada 2 Cara

Cara Pertama : 
1. Copy semua code dibawah ini :

<style type="text/css"> /*<!CDATA[*/ #w2b-mashable{width:280px;margin:auto;padding:0;} .w2b-facebook {background:#cfd0ff;border: 1px solid #DCDCDC;margin-top: -2px;padding: 5px 10px;} .w2b-gplusone {background-color: #ffd4d4;border: 1px solid #d8e6eb;border-top: 1px solid white;font-size: .87em;color: black;padding: 9px 0 0 11px;line-height: 24px;height:30px;} .w2b-gplusone span {display: inline-block;vertical-align: middle;height: 20px;margin-top: -17px;font-size: 11px;font-family: "Arial","Helvetica",sans-serif;} .w2b-twitter {background-color: #bff5ff;border: 1px solid #c7dbe2;border-top: 0;} .w2b-twitter a.twitter-follow-button {display: block;} .w2b-twitter iframe {margin: 9px 11px;} .w2b-emailbox {background-color: #a6a6a6;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 12px 16px;overflow: hidden;} .w2b-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;} .w2b-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;} .w2b-emailbox input.emailu:focus {color: #333;} .w2b-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;} .w2b-emailbox input.submitu:hover {text-decoration: none;} .w2bBlue{border:1px solid #397CBA;text-shadow: 1px 1px 0 #3A7AB2;background: #60abf8;background: -moz-linear-gradient(top, #60abf8 0%, #4082c4 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#60abf8), color-stop(100%,#4082c4));background: -webkit-linear-gradient(top, #60abf8 0%,#4082c4 100%);background: -o-linear-gradient(top, #60abf8 0%,#4082c4 100%);background: -ms-linear-gradient(top, #60abf8 0%,#4082c4 100%);background: linear-gradient(top, #60abf8 0%,#4082c4 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#60abf8', endColorstr='#4082c4',GradientType=0 );} .w2bBlue:hover{background: #9ccefc;background: -moz-linear-gradient(top, #9ccefc 0%, #5087bf 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ccefc), color-stop(100%,#5087bf));background: -webkit-linear-gradient(top, #9ccefc 0%,#5087bf 100%);background: -o-linear-gradient(top, #9ccefc 0%,#5087bf 100%);background: -ms-linear-gradient(top, #9ccefc 0%,#5087bf 100%);background: linear-gradient(top, #9ccefc 0%,#5087bf 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ccefc', endColorstr='#5087bf',GradientType=0 );}.w2b-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;} .w2b-moresubs a {display: inline-block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;} /*]]>*/ </style>     <div id="w2b-mashable">     <div class="w2b-facebook">         <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FBatak-musik%2F168226019959239&amp;send=false&amp;layout=standard&amp;width=260&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:260px; height:66px;" allowtransparency="true"></iframe>     </div>     <div class="w2b-gplusone">         <script type="text/javascript">/*<![CDATA[*/           (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-plusone" data-size="medium" data-href="http://chakadidy-news.blogspot.com/"></div>         <span>Recommend on Google</span>     </div>     <div class="w2b-twitter">         <a href="https://twitter.com/statusmu" class="twitter-follow-button" data-show-count="true">Follow @statusmu</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="w2b-emailbox">         <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=statusmu', '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 w2bBlue" type="submit" value="Subscribe"/>             </td>             </tr>         </table>         <input name="uri" type="hidden" value="Chakadidy widget"/>         <input name="loc" type="hidden" value="en_US"/>         </form>     </div>     <div class="w2b-moresubs">         <a href="http://chakadidy-news.blogspot.com/">Buat Seperti Ini </a>     </div>     </div>

 2. Klik Rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
3. Masukkan/pastekan kode diatas pada kotak yang di sediakan.
4. Klik Save/Simpan

Cara Kedua : 

Klik disini