05 Oktober, 2015

Cara Memasang Sticky Sidebar Widget Pada Blog Anda


Cara memasang floating sidebar widget pada blog.

Sticky atau Floating Sidebar Widget adalah satu ciri istimewa yang boleh anda pasangkan kedalam blog, sama ada untuk tujuan mencantikkan blog ataupun anda ingin 'highlight' sesuatu elemen pada bahagian sisi blog baik kiri atau kanan.

Sebelum itu, mari kita lihat contoh bagaimana rupa fungsi Sticky/Floating Sidebar Widget ini.

Butang Demo

Untuk memasang ciri menarik ini kedalam blog anda, langkah-langkahnya adalah seperti berikut:

>> Klik 'Template'
>> Klik 'Edit HTML'
>> Didalam ruangan kod yang memeningkan kepala itu anda taip Control+F untuk mendapatkan kotak 'Search'
>> Taip </body> kedalam kotak 'Search' tadi
>> Copy Paste kod yang saya sediakan dibawah betul-betul di atas kod </body>

<script>
// Sticky widget oleh AtasTalian.com
// Tutorial di http://www.atastalian.com/2015/10/sticky-sidebar.html 
// Penggunaan percuma tetapi tinggalkan kredit ini.
//<![CDATA[
bs_makeSticky("HTML10"); // Masukkan ID Widget anda disini
function bs_makeSticky(elem) {
    var bs_sticky = document.getElementById(elem);
    var scrollee = document.createElement("div");
    bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
    var width = bs_sticky.offsetWidth;
    var iniClass = bs_sticky.className + ' bs_sticky';
    window.addEventListener('scroll', bs_sticking, false);
    function bs_sticking() {
        var rect = scrollee.getBoundingClientRect();
        if (rect.top < 0) {
            bs_sticky.className = iniClass + ' bs_sticking';
            bs_sticky.style.width = width + "px";
        } else {
            bs_sticky.className = iniClass;
        }
    }
}
//]]>
</script>

<style>
.bs_sticking {background:#fff !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative\9 !important;}
</style> 

>> Di bahagian yang saya warnakan merah (HTML10) itu, masukkan ID widget yang ingin anda jadikan sticky/floating tadi dengan mengikut langkah seperti dibawah:
>>>> Klik 'Layout'
>>>> Pilih kotak widget sisi yang anda ingin ubah dan 'Right Click' pada perkataan 'Edit' dan pilih 'Copy Link Address'
>>>> Salinkan pada nota sementara dan anda boleh dapatkan ID widget tadi seperti gambar dibawah ini

ID untuk sidebar widget.

>> Setelah anda paste ID widget kedalam kod sticky tadi, klik 'Save' dan blog anda sudahpun mempunyai Floating/Sticky Sidebar widget yang seronok dilihat.

Semoga membantu!


Atas Talian tidak bertanggungjawab keatas komen-komen yang berbaur perkauman, buli atau apa saja yang boleh menyinggung perasaan individu lain. Komenlah dengan hati dan minda yang terbuka tanpa perlu membuat provokasi. Terima kasih diatas lawatan anda, semoga penulisan bermanfaat.