Πως να κανουμε ενα gadget sticky

Γεια σας παιδια σημερα θα σας δειξω πως μπορουμε να κανουμε ενα gadget του blogger sticky. Δηλαδη να ακολουθει την οθονη οταν ο επισκεπτης μας διαβαζωντας την αναρτηση μας κατεβαινει προς τα κατω.

Πρωτα πρεπει να αυτο το κωδικο και να παμε στο προτυπο και να το κανουμε επικολληση ακριβως πανω απο το </body>

<script> 
//<![CDATA[
bs_makeSticky("YOUR_WIDGET_ID"); // enter your widget ID here
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:#f2f2f2 !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> 

 Μετα θα πρεπει να αλλαξουμε στον παραπανω κωδικο τα κοκκινα γραμματα με το id του gadget που θελουμε.

Για να βρουμε το id του παμε στη διαταξη παταμε επεξεργασια του widget που θελουμε και στο τελος του link ειναι το id του.

gadget sticky


Μπορουμε αν θελουμε να βαλουμε αυτο το κωδικο και σαν gadget ακριβως κατω απο το gadget που θελουμε να κανουμε sticky βαζωντας παλι το ονομα του widget στον παραπανω κωδικο

Δημοσίευση σχολίου

Νεότερη Παλαιότερη