Kata Share | Mas Sehat | Ston SEO Responsif Blogger Template
» » Widget share windows8 SM

Widget share windows8 SM

Widget Blog
Thursday 31 October 2013
Belum ada komentar


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.


Demo

Untuk memasang widget ini perhatikan tutorial berikut:
  • Masuk ke Blog sobat, dan pilih Tab Template lalu klik Edit HTML.
  • Tekan F3 untuk mencari kata kunc
  • 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="http://gadget-irvan.googlecode.com/files/Share%20W8%E2%84%A2%20%D2%93%D1%8C.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.

    Terima kasih telah membaca artikel tentang Widget share windows8 SM di blog blog sepot jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.

    Artikel terbaru :

    Kata Share | Mas Sehat | Ston SEO Responsif Blogger Template