Cara Menciptakan Sticky Sidebar Atau Sidebar Melayang
Untuk mempercantik tampilan blog, kita sanggup memakai banyak sekali widget dengan banyak sekali bentuk dan fungsi yang menakjubkan. Namun perlu diingat, perhatikan juga size dan waktu loading blog. alasannya yaitu terlalu banyak widget yang diterapkan pada blog akan membebani blog itu sendiri, sehingga blog akan berat dan usang untuk dibuka.
Pilihlah widget yang benar-benar diperlukan. Usahakan size blog sekitar 100 kb atau kurang. Untuk mengetahui size dan waktu loading blog sanggup Anda gunakan Speed Test DI SINI.
Nah kali ini aku akan share Cara Membuat Sticky Sidebar Atau Sidebar Melayang. Dengan cara ini sidebar atau widget yang ada di sidebar akan tetap terlihat atau tetap tampil dikala halaman blog di-scroll ke atas atau ke bawah. Baru-baru ini aku mencoba menerapkannya di Kompi Ajaib dan berhasil. Dan sekarang akan aku share untuk Anda yang memerlukannya. Cara Membuat Sticky Sidebar Atau Sidebar Melayang ini aku sanggup sehabis keliling ke sana ke mari untuk mendapat scriptnya, dan jadinya menemukannya di Belajar blogspot.
Cara Membuat Sticky Sidebar Atau Sidebar Melayang ini cukup mudah, silahkan simak tutorial sederhana aku di bawah ini.
Langkah Pertama
Silahkan login ke blog Anda, kemudian pergi ke dashboard dan klik template untuk mengedit HTML, alasannya yaitu kita akan sedikit mengobok-obok instruksi HTML blog. Untuk berjaga-jaga terjadi kesalahan pengeditan, alangkah baiknya backup dulu template blog Anda dengan cara klik tombol Backup/Restore di sebelah kanan atas. Setelah selesai dibackup, silahkan klik Edit HTML >> Proceed >> Centang kotak kecil pada Expand Widget Template.
Langkah Kedua
Cari instruksi </head>, gunakan CTRL + F pada keyboard untuk memudahkan pencarian. Setelah ketemu, copy instruksi di bawah ini dan simpan DI ATAS instruksi tadi.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function () {
var offset = $("#sidebar6-wrapper").offset();
var topPadding = 0;
$(window).scroll(function () {
if ($(window).scrollTop() > offset.top) {
$("#sidebar6-wrapper").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
})
} else {
$("#sidebar6-wrapper").stop().animate({
marginTop: 0
})
}
})
});
</script>
Kode css atau ID yang berwarna biru di atas untuk menawarkan dampak sticky pada keseluruhan sidebar blog untuk blog yang mempunyai sidebar yang sedikit atau pendek. Namun untuk blog yang mempunyai sidebar yang banyak, pilihlah widget sidebar yang benar-benar diharapkan untuk selalu ditampilkan dan simpanlah widget tersebut pada bab paling bawah sidebar.
Kini ganti instruksi yang berwarna biru dengan ID widget tersebut. Untuk mendapat ID widget cukup mudah, carilah dengan memakai CTRL + F pada keyboard dan ketikan title widget tersebut. Biasanya akan menyerupai di bawah ini.
<b:widget id='HTML4' locked='false' title='Like us and subscribe to get updates!' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget> Perhatikan instruksi yang berwarna merah di atas. Itulah instruksi ID widget yang diharapkan untuk menggantikan instruksi berwarna biru tadi.
Langkah Ketiga
Save atau simpanlah template blog dan lihat hasilnya... Selesai.
Demikianlah sharing postingan Cara Membuat Sticky Sidebar Atau Sidebar Melayang ini mudah-mudahan sanggup dimengerti dan bermanfaat bagi kita semua...
0 Response to "Cara Menciptakan Sticky Sidebar Atau Sidebar Melayang"
Posting Komentar