Cara Membuat Widget Subcription + Social Sharing + Facebook Like Box di Bawah Postingan

Pentingnya memasang widget subcription adalah untuk meningkatkan trafik pengunjung kamu. Di dalam widget ini dapat meningkatkan jumlah pelanggan pembaca setia kamu, fans facebook kamu serta follower kamu di twitter. Selain itu widget ini sudah memiliki kotak subscribe, kotak share postingan dari addthis, kotak fanpage facebook juga ada. Komplit banget dah pokoknya. Oh iya, widget ini dibuat oleh topbloggingidea.com, mungkin untuk demo langsungnya bisa kamu lihat disini

Widget ini juga tidak terlalu memberatkan blog kok. Sizenya cuma 10kb :D ! bagaimana ? sangat cantik dan ringan bukan ? saya saja mau pasang widget yang keren ini hehe. Langsung kamu lihat caranya di bawah ini ok.

1. Login ke Blogger.com

2. Klik Template --> Kemudian kamu Back Up template kamu terlebih dahulu, Lihat caranya di bawah ini :

• Untuk Antarmuka Blog yang lama klik disini 
• Untuk Antarmuka Blog yang Baru klik disini

3. Masih dibagian Template, sekarang kamu klik Edit HTML --> Lanjutkan --> Centang Expand Template Widget --> Cari kode <data:post.body/>. Nantinya kamu akan menemukan bebrapa kode <data:post.body/>, maka kamu pilih yang pertama atau yang kedua. Setelah itu kamu salin kode di bawah ini :

<!--No Ordinary Social Subscription Widget--> 

<b:if cond='data:blog.pageType == &quot;item&quot;'> 

<style> 

.tbibox { 

background: #fff; 

border: 1px solid #ddd; 

height: 360px; 

margin: 10px auto; 

padding: 10px; 

width: 572px; 

-webkit-border-radius: 10px; 

border-radius: 10px; 

} 

.tbisubscribe { 

border: 1px solid #D3D3D3; 

padding: 8px; 

width: 300px; 

-webkit-transition: all 0.5s ease-in-out; 

-moz-transition: all 0.5s ease-in-out; 

-ms-transition: all 0.5s ease-in-out; 

-o-transition: all 0.5s ease-in-out; 

transition: all 0.5s ease-in-out; 

} 

.tbisubscribe:hover { 

-moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1); 

-webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1); 

box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1); 

} 

.tbimailbox { 

border: 1px solid #D3D3D3; 

-webkit-border-radius: 4px; 

border-radius: 4px; 

-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset; 

-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset; 

box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset; 

color: #666; 

font: 14px "trebuchet ms", sans-serif; 

padding: 7px 15px; 

width: 160px; 

-webkit-transition: all 0.5s ease-in-out; 

-moz-transition: all 0.5s ease-in-out; 

-ms-transition: all 0.5s ease-in-out; 

-o-transition: all 0.5s ease-in-out; 

transition: all 0.5s ease-in-out; 

} 

.tbimailbox:hover { 

-webkit-box-shadow: none; 

box-shadow: none; 

-webkit-transition: all 0.5s ease-in-out; 

-moz-transition: all 0.5s ease-in-out; 

-ms-transition: all 0.5s ease-in-out; 

-o-transition: all 0.5s ease-in-out; 

transition: all 0.5s ease-in-out; 

} 

.tbisubmit { 

font: bold 12px Tahoma, Geneva, sans-serif; 

font-style: normal; 

color: #ffffff; 

background: #ff5714; 

border: 0px solid #ffffff; 

text-shadow: 0px -1px 1px #222222; 

box-shadow: 2px 2px 5px #000000; 

-moz-box-shadow: 2px 2px 5px #000000; 

-webkit-box-shadow: 2px 2px 5px #000000; 

border-radius: 10px 10px 10px 10px; 

-moz-border-radius: 10px 10px 10px 10px; 

-webkit-border-radius: 10px 10px 10px 10px; 

padding: 8px 15px; 

cursor: pointer; 

margin: 0 auto; 

} 

.tbisubmit:active { 

cursor: pointer; 

position: relative; 

top: 2px; 

} 

.tbisubmit::-moz-focus-inner { 

border: 0; 

padding: 0; 

margin: 0; 

} 

.tbisharebox { 

border: 1px solid #D3D3D3; 

margin: -157px 0 0 330px; 

padding: 8px; 

width: 225px; 

-webkit-transition: all 0.5s ease-in-out; 

-moz-transition: all 0.5s ease-in-out; 

-ms-transition: all 0.5s ease-in-out; 

-o-transition: all 0.5s ease-in-out; 

transition: all 0.5s ease-in-out; 

} 

.tbisharebox:hover { 

-moz-box-shadow: 1px 1px 2px #CCC inset; 

-webkit-box-shadow: inset 1px 1px 55px 1px rgba(249, 215, 126, 1); 

box-shadow: inset 1px 1px 55px 1px rgba(249, 215, 126, 1); 

-webkit-transition: all 0.5s ease-in-out; 

-moz-transition: all 0.5s ease-in-out; 

-ms-transition: all 0.5s ease-in-out; 

-o-transition: all 0.5s ease-in-out; 

transition: all 0.5s ease-in-out; 

} 

</style> 

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' /> 

<div class='tbibox'> 

<div class='tbisubscribe'> 

<div style='color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;'>Get Free Updates in your Inbox</div> 

<div style='margin: 10px 0 0 6px;'> 

<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' 

method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Masukkan-ID-Feedburner-Kamu&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' 

style='margin: 0pt;' target='popupwindow'> 

<input name='uri' type='hidden' value='Masukkan-ID-Feedburner-Kamu' /> 

<input name='loc' type='hidden' value='en_US' /> 

<input class='tbimailbox' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' 

onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' 

type='text' value='Enter your email...' /> 

<input alt='' class='tbisubmit' title='' type='submit' value='Subscribe'/> 

</form> 

</div> 

<div style='border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;'>Follow us on:</div> 

<div style='margin: -32px 0 0 120px;'> 

<a href='Masukkan-URL-FACEBOOK-Kamu' target='_blank' title='Join us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj760hOidC0RXFjBivuiTvyDpcwYJFSGoQADPLZQC_FEceFjL57Cv7iq3pEob-1omyZCXuwx2YAyKD2J_do0_fHoMKvRwJsQxozVN81n-PcrKin0oyymFu3pL5B4YJJfPQVTTLktGD6-Q/s32/facebook500.png' alt='facebook'/></a> 

<a href='Masukkan-URL-TWITTER-Kamu' rel='nofollow' target='_blank' 

title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9HO7re5WuIWRF3U1NKCjUIpPUQ7-yxxik9APvYISXrX86qmNJhIN5LfxbK3P707rln0w0qbUYhcTnyZpqLplWvoRK7ZafMBlXfp4AWzx3nmW3aLvmc_FDaTWhjRB370jPWgytGhbSNSA/s32/twitter.png' alt='twitter'/></a> 

<a href='Masukkan-URL-GOOGLE-PLUS-Kamu' rel='nofollow' target='_blank' 

title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-rONXVAB7Xn-su6yXkWZ6EXs2-_-gE_DP392RYXCfzix3ck9D1EIK5SYhFIepmagO3WFI0rUUwXf7xt4ZhnjBuPITbjoJZ_7df3usZlmptMyo6vBq8U5dbG8eR-o2nMyjKuIdE50gAs4/s32/googleplus-revised.png' alt='gplus'/></a> 

<a href='Masukkan-URL-PINTEREST-Kamu' rel='nofollow' target='_blank' 

title='Follow us on Pinterest'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7mvc6Y_SpLVaq1fE6Y6bxcrwjI4uIzPUg8gZHiH9qDlX0shXa4g4HCpCmFina0JVlmkaLTV2RWADA9HIIbpwwXDYn8_fYAsZFoKaHLyULx9GIA_yxCQEfLPfAfonyddnw90L1yhyRdzU/s32/pinterest.png' alt='pinterest'/></a> 

<a href='Masukkan-URL-RSS/FEED-Kamu' rel='nofollow' target='_blank' 

title='Subscribe to RSS'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG6TPG1JXdzC4uPmqJ0CJMqdZIoJ7EVMZ-2dEFhFn4tsZuCsok8EJQiTGXz4lVMb1r3FscZUO-TfTvH8psHirzvUQD9qR1Sbegt9SSF8gkuyP2-mt4-7-6Yrp6nlTNQIkl8NrDg-HN3P4/s32/rss.png' alt='rss'/></a> 

</div> 

</div> 

<div class='tbisharebox'> 

<script type='text/javascript'> 

var switchTo5x = true; 

</script> 

<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/> 

<script type='text/javascript'> 

stLight.options({ 

onhover: false 

}); 

</script> 

<div style='margin: 5px 5px;'> 

<span class='st_fblike_hcount' displaytext=''></span> 

</div> 

<div style='margin: -30px -20px 0 0; float: right;'> 

<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button' 

expr:data-url='data:post.canonicalUrl' expr:data-text='data:post.title' 

data-count='horizontal'  data-lang='en'></a> 

<b:if cond='data:post.isFirstPost'> 

<script type='text/javascript' src='http://platform.twitter.com/widgets.js'></script> 

</b:if> 

</div> 

<div class='addthis_toolbox addthis_default_style' style='margin: 10px 0 12px 85px;'> 

<a class='addthis_counter'></a> 

<script type='text/javascript' src='http://s7.addthis.com/js/250/addthis_widget.js'></script> 

</div> 

<div style='margin: 5px 5px;'> 

<su:badge layout='1'></su:badge> 

<script type='text/javascript'> 

(function () { 

var li = document.createElement('script'); 

li.type = 'text/javascript'; 

li.async = true; 

li.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + '//platform.stumbleupon.com/1/widgets.js'; 

var s = document.getElementsByTagName('script')[0]; 

s.parentNode.insertBefore(li, s); 

})(); 

</script> 

</div> 

</div> 

<div style='float: right; margin: -40px -5px 0 0;'> 

<div class='g-plusone' data-size='medium' expr:data-href='data:post.url'></div> 

<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 style='margin-top: 20px;'> 

<iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fhzndi&amp;width=570&amp;colorscheme=light&amp; show_faces=true&amp;stream=false&amp;header=false&amp;height=180' 

style='border:none; overflow:hidden; width:570px; height:180px;' /> 

</div> 

</div> 

</b:if> 

<!--hzndi.blogspot.com-->

<!--No Ordinary Social Subscription Widget-->

NOTE : Ganti www.facebook.com%2Fhzndi dengan nama URL Fanpage Facebook kamu, %2F adalah kode dari garis miring, contohnya, yang tadinya www.facebook.com/hzndi kemudian dibuah menjadi www.facebook.com%2Fhzndi.

4. Oh iya, kalau kamu tidak mau ribet, widget ini bisa digunakan sebagai widget biasa dengan cara :

Klik Tata Letak --> Tambah Gadget --> HTML/Javascript dan masukkan kode JS diatas.

5. Klik simpan jika sudah selesai. Selamat mencoba...

Postingan Terkait:

Posted in: Blogger,Social Bookmarking,Social Sharing,Widget