Trik Membuat Sticky Widget

Saipul Muiz

Tutorial Blogger

Monday, May 19, 2014

Belum ada komentar

Sobat, Kali ini saya akan berbagi trik yang bermanfaat.Trik ini saya ambil dari template DroidPlussMilik Kang Ismet.Caranya Cukup Mudah sob, tinggal di tambahin Javascript,HTML, dan CSS.Gimana ? Tertarik dengan trik ini ? silahkan di simak yah sobat.

CSS

/* STYNKI */
.sticky {
  position:fixed;
  top:10px;
  z-index: 100;
  width:274px;
}
  #stickywidget {
  display: block;
clear: both;
background: #409FC5;
padding: 15px;
width: 280px;
margin: 0px 0px 10px 0px;
  }
  #stickywidget h3 {color: #fff !important;
padding: 5px 0px 15px 0px !important;
margin: -1px -1px 0;
font-weight: normal;
text-shadow: 1px -1px 2px #ccc;
}

HTML 

<div id='stickywidget'>
<h3>Sosial Media</h3>
<div class='fb-like' data-action='like' data-href='https://www.facebook.com/adik.yasdil' data-layout='standard' data-share='false' data-show-faces='false' data-width='285' style='margin-bottom:5px'/>
<div><a class='twitter-follow-button' data-lang='id' href='https://twitter.com/MaverickZetta'>Ikuti @MaverickZetta</a></div>
<script type='text/javascript'>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
<div class='g-follow' data-annotation='bubble' data-height='20' data-href='//plus.google.com/102300855950251107036' data-rel='author'/>
<div class='g-plusone' data-count='true' data-href='http://yasdil-blog.blogspot.com/' data-size='medium' data-width='100'/>
</div>

Javascript

<script type='text/javascript'>
$(document).ready(function() {
var stickyWidgetTop = $(&#39;#stickywidget &#39;).offset().top;
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();  
if (scrollTop &gt; stickyWidgetTop) {
    $(&#39;#stickywidget &#39;).addClass(&#39;sticky&#39;);
} else {
    $(&#39;#stickywidget &#39;).removeClass(&#39;sticky&#39;);
}
};
stickyWidget();
$(window).scroll(function() {
    stickyWidget();
});
});
</script>

Cara Pemasangan

1. Pemasangan CSS

- Taruh Kode CSS yang saya berikan tepat di ATAS kode </style> atau ]]></b:skin>

2. Pemasangan HTML

- Taruh Kode HTML yang saya berikan tepat di BAWAH kode Sidebar Wrapper

3. Pemasangan Javascript

- Taruh Kode Javascript yang saya berikan tepat di ATAS kode </body>

Nah, Gimana sobat ? cukup bermanfaat artikel kali ini kan :D .Sampai berjumpa di Artikel Berikutnya yah ^_^