! Bakalan-Tlogorejo-City -Cara Membuat Widget/Gadget 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=https://www.facebook.com/pages/-Bakalan-Tlogorejo-City/282451828508709/;send=false&layout=standard&width=260&show_faces=true&action=like&colorscheme=light&font=arial&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://bakalan-tlogorejo-city.blogspot.com/"></div>
<span>Recommend on Google</span>
</div>
<div class="w2b-twitter">
<a href="http://twitter.com/JOKO_LOVE" class="twitter-follow-button" data-show-count="true">Follow @JOKO_LOVE</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=http://feeds.feedburner.com/bakalan-tlogorejo-city', '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="! Bakalan-Tlogorejo-City"/>
<input name="loc" type="hidden" value="en_US"/>
</form>
</div>
<div class="w2b-moresubs">
<a href="http://bakalan-tlogorejo-city.blogspot.com/2012/06/cara-membuat-widgetgadget-style-social.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/Simpan3. Masukkan/pastekan kode diatas pada kotak yang di sediakan.
Keterangan :
- "width:280px" sesuaikan lebarnya, ganti angka yang bewarna merah.
- https://www.facebook.com/pages/-Bakalan-Tlogorejo-City/282451828508709 ganti tulisan warna biru dengan URL facebook page sobat
- Ganti code warna kuning " http://bakalan-tlogorejo-city.blogspot.com /" dengan URL blog sobat
- Ganti code ini " http://twitter.com/JOKO_LOVE "dengan alamat/URL twitter sobat
- Ganti code ini " http://feeds.feedburner.com/bakalan-tlogorejo-city " dengan feedburner milik sobat.
Sobat Blogger sedang berada di halaman Cara Membuat Widget/Gadget Style Social Subscription dan Sedang membaca artikel Cara Membuat Widget/Gadget Style Social Subscription ini dengan url http://arafcreativity.blogspot.com/2012/06/cara-membuat-widgetgadget-style-social.html. Dan Sobat Blogger juga boleh COPAS artikel Cara Membuat Widget/Gadget Style Social Subscription ini jika bermanfaat dan jangan lupa untuk meletakkan link Cara Membuat Widget/Gadget Style Social Subscription sebagai sumbernya.
0 komentar:
Posting Komentar