Cara Menciptakan Sosial Media Responsive Dengan Pengaruh Sticky

disini. Pada kesempatan kali ini aku ingin share widget sosial media dengan tampilan sederhana yang juga responsive untuk blog Anda. Bila ingin menggunakannya, silahkan ikuti tutorial berikut sampai selesai.

Berikut arahan 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/AVvXsEguD-pqdo8UFGLVfzaufqM62pXVVlHggFLmWFNI5iuxC9dJoDLlnIrb9TmYc1mgavaaXOW2wTviL2Nn2rJJxOeEpdkhA_jTXCSquLfHB2oHSOzUMhynXOY6Zjlin3QY8MUE2qcvx6SqFywl/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='https://rodamotiv.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 https://rodamotiv.blogspot.com/ dengan alamat blog sobat.

Sobat sanggup pribadi memasang diblog sahabat dengan mengunjungi tata letak, kemudian add widget, sehabis itu masukkan arahan diatas pada widget HTML/JavaScript. Namun, jikalau sahabat ingin memakai pengaruh sticky untuk widget sosial media, tinggalkan cara yang aku sebutkan tadi.

Cara Membuat Efek Sticky

1. Silahkan menjuju edit HTML pada hidangan template.

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

/* ---------https://rodamotiv.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 kemudian masukkan arahan berikut sebelum atau diatas arahan </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