2:52 PM
Hzndi
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 :
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 == "item"'>
<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('http://feedburner.google.com/fb/a/mailverify?uri=Masukkan-ID-Feedburner-Kamu', 'popupwindow', 'scrollbars=yes,width=550,height=520');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 == "") {this.value = "Enter your email...";}'
onfocus='if (this.value == "Enter your email...") {this.value = ""}'
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&width=570&colorscheme=light& show_faces=true&stream=false&header=false&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...
