Widget Share W8 SM Widget Share W8 SM

Kali ini saya membuat widget yang bernama Widget Share W8 SM. Didalamnya terdapat 3 fitur yaitu: Share, Subscribe, dan Back to top. Saya desain dengan posisi melayang di bagian kiri blog. Untuk memasang widget ini perhatikan tutorial berikut:

• Masuk ke Blog sobat, dan pilih Tab Template lalu klik Edit HTML.
• Tekan F3 untuk mencari kata kunci
• Pasang CSS dibawah tepat berada di atas ]]></b:skin>

#widget-share {position:fixed;top:40%;left:5px;z-index:600;background-color:rgba(0,0,0,0.5);background:-webkit-linear-gradient(-180deg,rgba(0,0,0,0.5) 0%,rgba(255,255,255,0.4) 70%,rgba(0,0,0,0.5) 100%);background:-moz-linear-gradient(-180deg,rgba(0,0,0,0.5) 0%,rgba(255,255,255,0.4) 70%,rgba(0,0,0,0.5) 100%);background:-ms-linear-gradient(-180deg,rgba(0,0,0,0.5) 0%,rgba(255,255,255,0.4) 70%,rgba(0,0,0,0.5) 100%);background:-o-linear-gradient(-180deg,rgba(0,0,0,0.5) 0%,rgba(255,255,255,0.4) 70%,rgba(0,0,0,0.5) 100%);background:linear-gradient(-180deg,rgba(0,0,0,0.5) 0%,rgba(255,255,255,0.4) 70%,rgba(0,0,0,0.5) 100%);padding:3px;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;} .share-w8 {width:25px;height:25px;padding:5px;text-align:center;background:#222;background:-webkit-linear-gradient(-80deg,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.1) 70%,rgba(0,0,0,0.2) 81%);background:-moz-linear-gradient(-80deg,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.1) 70%,rgba(0,0,0,0.2) 81%);background:-ms-linear-gradient(-80deg,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.1) 70%,rgba(0,0,0,0.2) 81%);background:-o-linear-gradient(-80deg,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.1) 70%,rgba(0,0,0,0.2) 81%);background:linear-gradient(-80deg,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.1) 70%,rgba(0,0,0,0.2) 81%);border:1px solid rgba(255,255,255,0.4);-webkit-box-shadow:0 0 1px rgba(0,0,0,0.9);-moz-box-shadow:0 0 1px rgba(0,0,0,0.9);box-shadow:0 0 1px rgba(0,0,0,0.9);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;margin:6px 2px 6px;cursor:pointer;} .share-w8 .screensht {position:absolute;margin-bottom:40px;width:380px;padding:10px 0;z-index:600;border:1px solid rgba(255,255,255,0.5);background:-webkit-linear-gradient(-80deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 70%,rgba(0,0,0,0.8) 81%);background:-moz-linear-gradient(-80deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 70%,rgba(0,0,0,0.8) 81%);background:-ms-linear-gradient(-80deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 70%,rgba(0,0,0,0.8) 81%);background:-o-linear-gradient(-80deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 70%,rgba(0,0,0,0.8) 81%);background:linear-gradient(-80deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.7) 70%,rgba(0,0,0,0.8) 81%);-webkit-box-shadow:inset 1px 1px 0px rgba(0,0,0,0.2),inset -1px -1px 0px rgba(0,0,0,0.2),inset 0 0 1px rgba(255,255,255,0.2),0 1px 3px #000,1px 5px 12px #000;-moz-box-shadow:inset 1px 1px 0px rgba(0,0,0,0.2),inset -1px -1px 0px rgba(0,0,0,0.2),inset 0 0 1px rgba(255,255,255,0.2),0 1px 3px #000,1px 5px 12px #000;box-shadow:inset 1px 1px 0px rgba(0,0,0,0.2),inset -1px -1px 0px rgba(0,0,0,0.2),inset 0 0 1px rgba(255,255,255,0.2),0 1px 3px #000,1px 5px 12px #000;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;height:auto;overflow:hidden;opacity:0;top:-380px;-webkit-transition:all 0.5s ease-out 0.35s;-moz-transition:all 0.5s ease-out 0.35s;-ms-transition:all 0.5s ease-out 0.35s;-o-transition:all 0.5s ease-out 0.35s;transition:all 0.5s ease-out 0.35s;cursor:default;left:-380px;} .share-w8:hover .screensht {opacity:1;top:0px;left:50px;} .share-w8 .screensht .col1 {width:auto;height:auto;padding:5px;color:#fff;float:left;margin-left:9px;background:transparent;border:1px solid transparent;position:relative;} .share-w8.sm .screensht {padding:10px 0;} .share-w8.sm .screensht .col1 {padding:5px;margin-left:9px;float:none !important;display:block;position:relative;} .share-w8.sm .screensht .col1.fold:before {position:absolute;display:block;top:7px;left:7px;} .share-w8:hover {-webkit-box-shadow:inset 0px 1px 10px #111;-moz-box-shadow:inset 0px 1px 10px #111;box-shadow:inset 0px 1px 10px #111;} .clear {clear:both;} .screensht li{list-style:none;float:left;padding:0;border-top:none;border:none;} #SM-Bar-Right .btt a,.SM-emailsubmit{ font-size:9pt;font-family:cambria;font-weight:Bold;text-transform:uppercase;color:#fff;text-shadow:0 -1px 1px rgba(0,0,0,0.25);letter-spacing: 1px;padding:6px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;} #SM-Bar-Right .btt a:active,.SM-emailsubmit:active{position: relative;top: 1px;box-shadow:none;} #SM-Bar-Right .Subscribe{margin-top:-14px;} #SM-Bar-Right .btt a{background:#00810b;margin-left:3px;} #SM-Bar-Right .btt a:hover{background:#06b421;} .SM-emailsubmit{background:#ce1527;cursor:pointer;border:none;height:26px;width:90px;} .SM-emailsubmit:hover{background: orange;} .textarea-sm{border:1px solid #aaaaaa;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;resize:none;font-size:8pt;font-family:verdana;width:200px;height:25px;color:#000000;}

• Lalu klik Simpan

• Sekarang kamu klik Tab Tata Letak, dan Tambahkan Gadget HTML/Javascript baru.
• Pastekan Source kode Widget ini di situ.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>


<script>
$(document).ready(function(){// fade in .btt
$(function () {$(window).scroll(function (){});// scroll body to 0px on click 
$('.btt a').click(function () {$('body,html').animate({scrollTop: 0}, 350);return false;});});});
</script>   
<script>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";fjs.parentNode.insertBefore(js, fjs)}(document, 'script', 'facebook-jssdk'));</script>
<script src="http://apis.google.com/js/plusone.js" type="text/javascript"></script>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>


<div id="widget-share">
<script>urlbelakang_feedburner='blog-santamars';</script>
<script src="https://sites.google.com/site/blogsantamars/css-santa-mars/Share-W8-SM.js"></script>
</div>

• Setelah itu Simpan, dan lihat hasilnya.

Itulah Widget Share W8 SM yang saya buat untuk sobat, semoga bermanfaat.

Note!

1. Anda bisa mengatur letak posisinya di CSS tadi.