Powered by Blogger.

Membuat Widget Social Media Melayang Di Blog

Posted by 123ajah

widget social media melayang di blogSocial Media adalah tempat yang cukup strategis untuk mempromosikan blog anda agar mendapatkan pengunjung yang banyak, pengunjung yang banyak bisa didapatkan di social media yang terkenal, seperti Facebook, Twitter, Google +, dan lain-lain. Jadi jangan disia-siakan tempat strategis yang satu ini, tapi kita harus berhati-hati juga, misalnya di sosial media Facebook, jika kita sering membagikan link blog atau web kita disana blog atau web kita bisa dianggap spam oleh pihak Facebook, tapi jangan terlalu dikhawatirkan, hal tersebut bisa terjadi jika kita terlalu sering menaruh link aktif blog atau web kita di Facebook, tapi menurut saya sumber lalu lintas dari social media itu kurang bagus, urutan sumber lalu lintas bagi blog yang bagus menurut saya mulai dari google.com > google.co.id > facebook.com (social media).

Membuat Widget Social Media Melayang Di Blog

Pertama-tama masuk kebagian template editor blog sobat (Edit HTML) kemudian letakkan kode dibawah ini diatas kode ]]></b:skin> atau </style>

#stickywidget { display:block; clear:both; background:#e6e6e6; padding:15px; } #stickywidget h3 {color: #666 !important;padding: 5px 0px 15px 0px !important;  margin: -1px -1px 0;font-weight:normal;} 

Langkah kedua meletakkan kode html untuk pemanggilan widgetnya, silahkan diletakkan ditempat yang sobat inginkan, tambah gadget di Tata Letak juga bisa, sebaiknya letakkan dibagian <div id='sidebar-wrapper'> tepatnya dibagian akhir widget sidebar-wrapper

<div id='stickywidget'> <h3>Sosial Media</h3> <div class='fb-like' data-action='like' data-href='https://www.facebook.com/SEOKabeh' 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/Safryannoor'>Ikuti @Safryannoor</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/+YanzSeo' data-rel='author'/> <div class='g-plusone' data-count='true' data-href='http://agan-tutorial.blogspot.com' data-size='medium' data-width='100'/> </div> 
Silahkan ganti tulisan yang berwarna biru dengan ID akun agan

Sekarang widget social medianya sudah jadi, silahkan disesuaikan link tujuan social medianya keakun dan blog sobat, social widgetnya masih belum floating atau melayang, jika sobat menginginkan melayang seperti di blog ini, harus diberi sentuhan jquery agar menjadi melayang, letakkan kode jquery ini tepat diatas </head>

<script type='text/javascript'> $(function(){var offset=$(&quot;#stickywidget&quot;).offset();var topPadding=144;$(window).scroll(function(){if($(window).scrollTop()&gt;offset.top){$(&quot;#stickywidget&quot;).stop().animate({marginTop:$(window).scrollTop()-offset.top+topPadding})}else{$(&quot;#stickywidget&quot;).stop().animate({marginTop:0})}})}); </script> 

Simpan template sobat.

Demikian Cara Membuat Widget Social Media Melayang Di Blog, jika ada pertanyaan mengenai tutorial ini silahkan bertanya melalui kotak komentar, Semoga Bermanfaat.

Related Post



Post a Comment