Membuat Sliding Statis Social Widget Membuat Sliding Statis Social Widget
cara membuat Sliding Statis Social Widget yang saya terapkan pada template tersebut yang akan saya share. Ini karena ada teman yang menanyakan cara menerapkan widget sliding ini.
Seperti pada template , jika Anda men-scroll halaman ke bawah, maka akan nongol sebuah widget di bawah kanan blog yang isinya Facebook, Twitter, dan Google+. Untuk demonya silahkan menuju postingan sebelumnya. Contohnya seperti pada gambar di bawah ini.
Nah bagi Anda yang tertarik untuk menerapkan widget ini di blognya, silahkan ikuti langkah-langkahnya di bawah ini.
1. Silahkan copy kode CSS-nya di bawah ini dan paste di atas kode ]]></b:skin>
#sticky{background:#F5E7E7;box-shadow:0px 0px 1px rgba(0,0,0,0.5);transition:all 0.4s ease-out;-moz-transition:all 0.4s ease-out;-webkit-transition:all 0.4s ease-out;-khtml-transition:all 0.4s ease-out;-o-transition:all 0.4s ease-out;border-radius:3px;width:350px;height:200px;position:fixed;overflow:hidden;border:none;right:-350px;z-index:999999999999;text-align:left!important;}
.sticky-title{background:#c34b4b;background-image: -webkit-gradient(linear, left top, left bottom, from(#CF8181), to(#c34b4b));background-image: -webkit-linear-gradient(top, #CF8181, #c34b4b);background-image: -moz-linear-gradient(top, #CF8181, #c34b4b);background-image: -o-linear-gradient(top, #CF8181, #c34b4b);background-image: -ms-linear-gradient(top, #CF8181 0%, #c34b4b 100%);background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #c34b4b),color-stop(1, #CF8181));
/* Safari & Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#CF8181, endColorstr=#c34b4b); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#CF8181, endColorstr=#c34b4b)";
/* IE8 */
border-bottom:1px solid rgba(0,0,0, 0.5);box-shadow:0px 0px 1px 1px rgba(255,255,255,0.25) inset ;-moz-shadow:0px 0px 1px 1px rgba(255,255,255,0.25) inset ;-webkit-shadow:0px 0px 1px 1px rgba(255,255,255,0.25) inset ;-ms-shadow:0px 0px 0px 1px rgba(255,255,255,0.25) inset ;-khtml-shadow:0px 0px 1px 1px rgba(255,255,255,0.25) inset ;color:#fff;display:block;height:40px;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);width:100%;font-size:14px;}
.sticky-title span a{border-left:1px solid rgba(0,0,0, 0.2);float:right;height:40px;width:40px;}
.sticky-title > span > h2{font-size:20px!important;font-weight:normal!important;}
.sticky-title span a:hover{background:rgba(0,0,0, 0.2);}
.sticky-title span a img{margin:8px;}
.sticky-container{border:none;float:left;width:100%;height:auto;margin:3px;}
.sticky-container > div{border:none;height:40px;margin:3px;padding:3px;}
.sticky-container > div > span {font-size:14px;}
.sticky-container img{float:left;margin:3px 5px;width:40px;}
.show{bottom:35px;}
.hide{bottom:-160px;}
Untuk mengganti background widget, silahkan kotak-katik pada kode #sticky, dan untuk merubah background title-nya pada kode .sticky-title
2. Silahkan copy kode javascript di bawah ini di atas kode </head>
<script type=text/javascript>
$(window).scroll(function(){
if ($(this).scrollTop() > 400) {
$('#sticky').css({'right':'0px'});
} else {
$('#sticky').css({'right':'-350px'});
}
});
$(document).ready(function(){
var sticky = $('#sticky');
var closed = $('#sticky-close');
var minimize = $('#sticky-minimize');
var maximize = $('#sticky-maximize');
maximize.hide();
closed.click(function(){
sticky.css({'right':'-350px'});
sticky.fadeOut('slow');
})
minimize.click(function(){
sticky.toggleClass('hide');
$(this).hide();
maximize.show();
})
maximize.click(function(){
sticky.toggleClass('hide');
$(this).hide();
minimize.show();
})
});
</script>
3. Silahkan copy kode HTML pemanggilnya di bawah ini dan simpan di atas kode </body>
<div class=show id=sticky>
<div class=sticky-title sticky-www>
<span style=float: left;margin:10px 0 0 15px;>winkom on Social Media</span>
<span><a href=javascript:void(0); id=sticky-close title=close><img alt=close button class=a src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg53-56wyhGUhcN3UgIMq1VPFg-5VnunXQdb763Giexvc-O6wryvwYtmZwUAE__BRbQor1BuCX1_gSrG0j9bY7xIcw8dSxPRvF1qDUbzqrTC5VS_TOj6HSZgM9MRa59pkJJr-NvkEzBRW-b/s1600/close.png title=close/></a></span>
<span><a href=javascript:void(0); id=sticky-minimize title=minimize><img alt=minimize button src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQxd3sqTH1zVWPgttel4KCRMueayMlWu-0Cubuq30G_X6hQm969k7to0WhOYVcuSCNY9i5KBVa-zlV1nu_5vpvvjCLx7DWU95pHqUUyFyS2GVjRYHHiSVtA7IYlqWIFLToJPRuGC90IXfc/s1600/minimize.png title=minimize/></a></span>
<span><a href=javascript:void(0); id=sticky-maximize title=maximize><img alt=maximize button src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAUvQlp9EyNvQ8aRsn5Ff6aI5s9yHfpUhENqYRbeT0YJxWMzR8rQr7phcrctcdDjHs1LHdObv8kn7LvnV-E5H_3ozZDCjvjMXoXapguwWdkTOKwCvGCSYzOAeHQMerc72mD54CVSpLh38x/s1600/maximize.png title=maximize/></a></span>
</div>
<div class=sticky-container>
<div><a href=http://www.facebook.com/pages/winkom/395526477133955 target=_blank title=facebook><img alt=fb src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh59TERXY_b7NZVv4qZO3BKcErWU6EBerh82cn4C93AtqF1WMaVjGGypMeQNDR8xFQwDTXS4iUw2mijUMnLLjss8080I7nQQf0wwq989X5RXyVH7ZEHvKcQHq6_YKV3S9eFEVLS-9dPRv06/s1600/facebook.png title=facebook/><span>Like us on Facebook</span></a><br/>
<span class="fb-like" data-href="https://www.facebook.com/pages/winkom/395526477133955" data-send="false" data-layout="button_count" data-width="250" data-show-faces="false">
</span></div>
<div><a href=https://twitter.com/suakcot target=_blank title=twitter suakcot><img alt=twitter src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg723_5lbvHXL8uiXyc7ANSJQw2QPT6rG-T7ei1x-L74w4Sn2G8BmE5umSBQXaoELp027GdfkxlrSwKXzX2XguodLiZ_idzfZlEBKKgSuZeMywJN-kqMAJYdzKOfIZ8bfRshyUii1vHQl9M/s1600/twitter.png title=twitter suakcot/><span>Follow us on Twitter</span></a><br/>
<span>
<a class=twitter-follow-button data-show-count=true href=https://twitter.com/suakcot title=Follow suakcot>Follow @suakcot</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</span>
</div>
<div><a href=https://plus.google.com/117950600521728942551 target=_blank title=G+ winkom><img alt=G+ src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY3RmVkOYpYWbcbAWeaLxQEkayjJTMAYiCASxo4HIHJj2f6cmjObX-e4Wtll0_hXlelTMEps1xVyXBBgL3d2poZS5zhxXz-Yw04rPl2LLt3If89eMfuDEOiaPyM3QnzvtfDyOkLLJHZNQz/s1600/g+.png title=Google plus/><span>Follow us on Google+</span></a><br/>
<span class=g-plusone data-annotation=inline data-size=tall data-width=250>
<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>
</span>
</div>
</div>
</div>
Perhatikan tulisan yang berwarna merah di atas, silahkan sesuaikan dengan akun Facebook, Twitter, dan Google Plus Anda.
4. Lakukan preview untuk melihat penerapan widgetnya dan terakhir jika Anda sudah merasa pas dengan widgetnya silahkan save template Anda.
Semoga bermanfaat dan selamat mencoba dan bereksperiment heheheehe.....