Teguh Bagus of Veterinary Medicine site v.2

Excellence with Morality

__Sertifikasi dan Prestasi__

    Standart ISO 9001:2008 Kepada Universitas Airlangga oleh British Certification International

_Berbagi tak pernah Rugi_

    Teguh Bagus of Veterinary Medicine site v.2

    Siapakah SejatiNya Engkau?

    .: Barang siapa mengenal dirinya, maka ia akan mengenal TuhanNya. Seperti bahasan kita yaitu Awwal- uddin Ma'rifatullah adalah... :. more

    facebook & twitter

DMCA.com Protection Status
..:: Selamat Buat para Pemenang lomba web & blog Mahasiswa Universitas Airlangga Tahun 2014; 1.Muhammad Alhada Fuad [FISIP'11] | 2.Muhammad Fatkhullah [FISIP'11] | 3.Teguh Bagus Pribadi [FKH'12] | 4.Mei Budi Utami [FST'12] | 5.Leo Agung Kurniawan [FISIP'12]| 6. Lutfi Adi Nugroho [FPK'11] | => Terimakasih atas kunjungan Anda, jangan lupa kalau mau copy/paste harap cantumkan sumbernya, by : Teguh Bagus Pribadi, http://teguhbaguspribadi-fkh12.web.unair.ac.id, dan Blog ini DIPERBAHARUI sebulan 4x karena kesibukan Perkuliahan ::..

Cara Membuat Widget Sticky di Sidebar Blog

diposting oleh teguhbaguspribadi-fkh12 pada 23 December 2012
di Kumpulan Tutorial Blog - 6 komentar

Cara Membuat Widget Sticky di Sidebar Blog - Dalam bahasa Indonesia, sticky artinya "menempel". Kalau dalam istilah di website, sticky itu artinya selalu didepan atau tetap mengikuti walaupun mose trus di scroll.

Untuk tutorial yang saya share ini adalah Cara Membuat Widget Sticky di Sidebar Blog seperti pada sidebar blog saya di sebelah kanan. Untuk lebih memahami lagi silahkan scrooll dulu blog saya sampai kebawah kemudian anda akan melihat sebuah widget yang selalu mengikuti scrool anda.

 

Widget Sticky
Widget Sticky


Untuk cara membuatnya, tidaklah terlalu susah hanya beberapa langkah yaitu.

1. Menambahkan kode CSS berikut ini di atas ]]></b:skin> 

#catcher{
height:780px;/* tinggi catcher */ }

#sticky{
width:300px;/* lebar sticky */ height:auto; }


PENTING:
Cather adalah jumlah tinggi keseluruhan sebelum widget sticky diletakkan. Misalnya seperti di sidebar saya, tinggi subscribe via email 10px + Popular post 50 px + widget twitter 50 px + jarak antar widget 5px maka jumlah dari semua tinggi tersebut itulah tinggi cather.

Kalau masih binggung coba tumpuk saja dulu nannti anda liat apakah perlu ada penambahan tinggi atau tidak.

2. Menambahkan kode Javasript diatas </body>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script> $(document).ready(function() { function isScrolledTo(elem) { var docViewTop = $(window).scrollTop(); //num of pixels hidden above current screen var docViewBottom = docViewTop + $(window).height(); var elemTop = $(elem).offset().top; //num of pixels above the elem var elemBottom = elemTop + $(elem).height(); return ((elemTop &lt;= docViewTop)); } var catcher = $(&#39;#catcher&#39;); var sticky = $(&#39;#sticky&#39;); $(window).scroll(function() { if(isScrolledTo(sticky)) { sticky.css(&#39;position&#39;,&#39;fixed&#39;); sticky.css(&#39;top&#39;,&#39;0px&#39;); } var stopHeight = catcher.offset().top + catcher.height(); if ( stopHeight &gt; sticky.offset().top) { sticky.css(&#39;position&#39;,&#39;absolute&#39;); sticky.css(&#39;top&#39;,stopHeight); } }); }); </script>



3. Dan terakhir menambahkan HTML

<div id='catcher'>
widget yang telah ada
</div> <div id='sticky'>
isi sticky widget, baik FB Like Box, Banner, atau apa pun
</div>


Contoh penerapannya di blog saya:

<div id='sidebar'>
<div id='catcher'>
<b:section class='sidebar' id='sidebar' preferred='yes' showaddelement='yes'>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
<b:widget id='HTML7' locked='false' title='' type='HTML'/>
</b:section>
</div>
<div id='sticky'>
Kode widget Followers G+
</div>

Itulah Cara Membuat Widget Sticky di Sidebar Blog yang bisa saya share seperti apa yang saya ketahui. Untuk referensinya dari sini. Semoga bermanfaat.

6 Komentar

nurranisa

pada : 10 March 2013


"bos kalau penerapannya di populer post bagaimana? di tunggu,.. terima kasih"


Rian Kid

pada : 23 February 2014


"mantap tutorialnya, boleh langsung coab yah sob. :D"


infobuatku

pada : 19 April 2014


"nice gan"


Veterinary Medicine

pada : 26 April 2014


"Nurranisa : maksudNy gimana ya mbak?"


cara buat kue lapis legit

pada : 16 January 2015


"thanks ya..sangat membantu"


Cek Harga Kamera

pada : 14 January 2016


"Langsung praktek mas... Tp ada beberapa scriptnya yang error mas"


Tinggalkan Komentar

Nama :
E-mail :
Web : tanpa http://
Komentar :
Verification Code :