Cara Membuat Sosial Media Responsive Dengan Efek Sticky

Dalam sebuah blog/web yang responsive, tentunya ada widget yang responsive juga bukan? Banyak widget yang bisa digunakan unuk mendukung dan memaksimalkan kinerja suatu web/blog agar pengunjung bertambah. Salah satunya adalah widget sosial media. Sosial media di blog sangat penting agar pengunjung dapat mengikuti blog Anda melalui sosial media yang mereka inginkan. Tidak hanya itu, dengan adanya widget sosial media mereka juga dapat share artikel yang mereka inginkan dan tentunya hal tersebut adalah keuntungan bagi Anda. Akan tetapi telah banyak widget sosial media yang terdapat di Internet, namun hanya sedikit yang responsive untuk blog Anda. Sebelumnya saya telah share widget sosial media yang responsive, kalau ingin mencobanya silahkan baca disini. Pada kesempatan kali ini saya ingin share widget sosial media dengan tampilan sederhana yang juga responsive untuk blog Anda. Bila ingin menggunakannya, silahkan ikuti tutorial berikut hingga selesai.

Berikut kode untuk widget sosial media responsive kali ini

<a href='http://www.blogger.com/follow-blog.g?blogID=1437088926407906290' target='_blank' title='Ikuti Blog Ini'><img alt='Ikuti Blog Ini' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFkAIVbmQt3_82W_5yQ8hZlOC1Xlj-AZaQVsv7tFie-cZ_Cn0lCPgNTzsG62bZyWMQ15qg1ibnQYQJ88v-sstaR5SnIb_zZ_3SbcYceX_43pSn1WCYK9F10dqyNXcPa2QOol1S7jlNpQ2B/s1600/Follow+my+blog.gif' title='Ikuti Blog Ini'/></a>
<div class='fb-like' data-action='like' data-href='https://www.facebook.com/opickweblog' 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/opick00'>Ikuti @opick00</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/110053213103537714080' data-rel='author'/>
<div class='g-plusone' data-count='true' data-href='http://wajahilmu.blogspot.com/' data-size='medium' data-width='100'/>

Keterangan :

• Ganti 1437088926407906290 dengan ID blog sobat.
• Ganti https://www.facebook.com/opickweblog dengan alamat fanpage sobat.
• Ganti @opick00 dengan id twitter sobat.
• Ganti http://wajahilmu.blogspot.com/ dengan alamat blog sobat.

Sobat bisa langsung memasang diblog sobat dengan mengunjungi tata letak, lalu add widget, setelah itu masukkan kode diatas pada widget HTML/JavaScript. Namun, bila sobat ingin menggunakan efek sticky untuk widget sosial media, tinggalkan cara yang saya sebutkan tadi.

Cara Membuat Efek Sticky

1. Silahkan menjuju edit HTML pada menu template.

2. Masukkan CSS berikut sebelum kode ]]></b:skin> atau </style>

/* ---------http://wajahilmu.blogspot.com/------- */
.sticky {
  position:fixed;
  top:50px;
  z-index: 100;
  width:100%;
}
  #stickywidget {
  display: block;
clear: both;
background: transparent;
padding: 15px;
width: 240px;
margin: 0px 0px 10px 0px;
  }
  #stickywidget h3 {color: #1E293B !important;
padding: 5px 0px 15px 0px !important;
margin: -1px -1px 0;
font-weight: normal;
text-shadow: 1.2px -0.5px 2.2px #333;
}

3. Carilah kode </aside> yang terdapat dibagian sidebar lalu masukkan kode berikut sebelum atau diatas kode </aside> tadi

<div id='stickywidget'>
<h3>Sosial Media</h3>
       Masukkan Kode Widget Sosial Media Disini
</div>

4. Setelah itu, masukkan script berikut sebelum atau diatas kode </body>

<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>

5. Klik save dan lihat hasilnya

Bagikan Artikel ini