Seni Blogger Pemula
2 komentar

Cara Membuat Widget/Gadget Mashable Style Social Subscription

Cara Membuat Widget/Gadget Mashable Style Social Subscription. Mungkin banyak sobat-sobat blogger yang bertanya apa maksud dari judul yang membingungkan ini.  Yap, 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. Gadget/Widget keren tsb seperti gambar dibawah ini :

Jika sobat berminat membuat/memasang gadget ini di blog sobat, caranya gampang. Berikut langkah-langkah :

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://karaokebatak.blogspot.com/"></div>
        <span>Recommend on Google</span>
    </div>
    <div class="w2b-twitter">
        <a href="https://twitter.com/batakmusik" class="twitter-follow-button" data-show-count="true">Follow @batakmusik</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=halakbatakmarlagu', '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="HalakBatakMarlagu"/>
        <input name="loc" type="hidden" value="en_US"/>
        </form>
    </div>
    <div class="w2b-moresubs">
        <a href="http://karaokebatak.blogspot.com/2012/04/cara-membuat-widgetgadget-mashable.html">Buat Seperti Ini Di Blog Anda</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

Keterangan :
  • "width:280px" sesuaikan lebarnya, ganti angka yang bewarna merah.
  • http%3A%2F%2Fwww.facebook.com%2Fpages%2FBatak-musik%2F168226019959239   ganti tulisan warna putih dengan URL facebook page sobat
  • Ganti code warna merah "http://karaokebatak.blogspot.com/" dengan URL blog sobat
  • Ganti code warna biru dengan alamat/URL twitter sobat
  • Ganti code warna kuning "halakbatakmarlagu" dengan feedburner milik sobat.
Semoga Cara Membuat Widget/Gadget Mashable Style Social Subscription bermanfaat bagi anda.

2 komentar:

Kataucheng ji mengatakan...

bos ... kok bagian batakmusik on google+ itu kagak ada yah ???

NABILA SHOP mengatakan...

TOKO HANDPHONE TERBESAR TERLENGKAP TERMURAH TERPERCAYA NABILA SHOP Produk dijamin asli orginal.Dapatkan harga promo Nabila Shop Barang yang Kami Tawarkan Semuanya Barang ASLI ORGINAL Ada Garansi Resmi Distributor dan Garansi TAM 2 bebas resiko bebas penipuan.
Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
BERMINAT HUB-SMS 085-757-299-675 ATAU KLIK WEBSET RESMI KAMI http://nabilashop77.blogspot.com
Ready Stock! Samsung Galaxy S4 Mini Rp.2,500.000
Ready Stock! Apple iPhone 5 Rp.2,700.000
Ready Stock! BlackBerry 9380 Orlando - Black.Rp.900.000,-
Ready Stock! BlackBerry Curve 8520 Gemini.Rp.500.000,-
Ready Stock! BlackBerry Bold 9780 Onyx 2.Rp.800.000,-
Ready Stock! Blackberry Curve 9320.Rp.700.000,-
Ready Stock! Samsung Galaxy Note 10.1.Rp.2,500.000.
Ready Stock! Samsung Galaxy Tab 2 (7.0).Rp. 1.000.000
Ready Stock! Samsung Galaxy S III Mini.Rp.1.800.000.
Ready Stock! Samsung Galaxy Nexus I9250 - Titanium Si.Rp.1.500.000,-
Ready Stock! Samsung Galaxy Note N7100.Rp.2.500.000.
Ready Stock! Samsung Galaxy Note N7000 - Pink.Rp.1.700.000.
Ready Stock! Samsung Galaxy Y S5360 GSM - Pure White.Rp.500.000

Best viewed on firefox 5+

Entri Populer

Daftar Isi