Kali ini saya membuat widget yang bernama Widget Share W8 SR. 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.
Setelah itu Simpan Dan lihat hasilnya.
Widget Share W8 SM
 |
Share W8 SR Ini Merupakan widget yang telah di buat oleh Santa Mars saya hanya sekedar Mengngeditnya saja, semoga berguna untuk anda |
Lanjutbatalkan
Perihal Lisensi
| Mohon di baca dan menyetujui persyaratan lisensi di bawah ini sebelum memasang. |
MundurSetujubatalkan
Tutorial Memasang Part 1
|
#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;}
|
MundurLanjutbatalkan
Tutorial Memasang Part 2
|
<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="http://not-remove-admin-3.googlecode.com/files/Share-W8-SM.js"></script>
</div>
|
MundurLanjutbatalkan
Konsep Instalasi Selesai
|
Terimakasih anda telah memasang Widget Share W8 SR, semoga dapat bermanfaat. by Stupid Reamers Copyright © 2013 |
Selesai
Note!
-Anda bisa mengatur letak dipoisisi di CSS tadi
Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot
Sobat sedang membaca artikel tentang Widget Share W8 SR. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya
0 Comments
