CARA MEMBUAT SIMPLE SOSIAL WIDGET

CARA MEMBUAT SIMPLE SOSIAL WIDGET

Posted by Agoez Yudhi Dharmawan , at 11:45
Sumber: Mikolopedia

Hallo, kawan. Lama gak sharing Tips Dasyat Blogging ala BSS. hehehe Hari ini saya akan membagikan sebuah widget sosial yang simple kayak diatas. Widget ini saya temukan di grup Diskusi Blogger Pemula.

Ok langsung aja caranya.

1. Blogger dasbor > Layout

2. Add gadget > Javascript

3. Masukan Kode ini.

<div id="di-bar" style="width:260px;">
<div class="di-likebox" style="background: white; padding: 10px 10px 0 5px; border: 1px solid ‎#D8E6EB; border-image: initial;">
<iframe src="//www.facebook.com/plugins/like.php?href=https://facebook.com/belajarwordpresscom&amp;send=false&amp;layout=standard&amp;width=280&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=80&amp;appId=234513819928295" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:240px; height:100px;"></iframe>
</div>
<div class="di-googleplus" style="background: ‎#F5FCFE; border-top: 1px solid white; border-bottom: 1px solid ‎#EBEBEB; border-right: 1px solid #D8E6EB; border-left: 1px solid #D8E6EB; border-image: initial; font-size: .90em; font-family: Arial; color: black; padding: 9px 10px; ">
<g:plusone size="medium" annotation="inline" width="280" href="http://namadomain.com/"></g:plusone>
<script type="text/javascript">
(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>
<div class="di-twitter" style="background: ‎#EEF9FD; padding: 10px; border: 1px solid ‎#C7DBE2; border-top: 0; border-image: initial;">
<a href="https://twitter.com/zifana2" class="twitter-follow-button" data-show-count="true">Follow @zifana2</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="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

<form class="newsletter" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=belajarwordpresscom', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify">
<input type="hidden" value="belajarwordpresscom" name="uri">
<input type="hidden" value="en_US" name="loc">
<input id="emails" class="email" type="text" onblur="if (this.value == '') {this.value = 'Enter Your Email Address';}" value="Alamat Email.." onfocus="this.value=''" style="width:120px !important" maxlength="100" name="email">
<button id="newsletter-button" type="submit">Subscribe</button>
</form>
</div>
</div>

4. Gantilah :

• https://facebook.com/belajarwordpresscom dengan link fanspage kamu.
• http://namadomain.com/ dengan URL blog kamu
• https://twitter.com/zifana2 dengan link twitter kamu.
• belajarwordpresscom ganti dengan akun feedburner blog kamu

5. Save. lihat perubahannya.

Sekian, tutorial mengenai Cara membuat Simple Sosial Widget, semoga bermanfaat. Jika ada yang kurang jelas silahkan bertanya dengan koment dibawah.