Γεια σας παιδια σημερα θα σας δειξω πως μπορουμε να κανουμε ενα gadget του blogger sticky. Δηλαδη να ακολουθει την οθονη οταν ο επισκεπτης μας διαβαζωντας την αναρτηση μας κατεβαινει προς τα κατω.
Πρωτα πρεπει να αυτο το κωδικο και να παμε στο προτυπο και να το κανουμε επικολληση ακριβως πανω απο το </body>
Μετα θα πρεπει να αλλαξουμε στον παραπανω κωδικο τα κοκκινα γραμματα με το id του gadget που θελουμε.
Για να βρουμε το id του παμε στη διαταξη παταμε επεξεργασια του widget που θελουμε και στο τελος του link ειναι το id του.
Μπορουμε αν θελουμε να βαλουμε αυτο το κωδικο και σαν gadget ακριβως κατω απο το gadget που θελουμε να κανουμε sticky βαζωντας παλι το ονομα του widget στον παραπανω κωδικο
Πρωτα πρεπει να αυτο το κωδικο και να παμε στο προτυπο και να το κανουμε επικολληση ακριβως πανω απο το </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 ακριβως κατω απο το gadget που θελουμε να κανουμε sticky βαζωντας παλι το ονομα του widget στον παραπανω κωδικο