Add a Floating Sticky Footer Bar

How To Add a Floating Sticky Footer Bar in Blogger

How To Add a Floating Sticky Footer Bar in Blogger

http://helplogger.blogspot.gr/2014/02/how-to-add-floating-sticky-footer-bar.html

Create a "Sticky" Floating Navigation Menu

How To Create a "Sticky" Floating Navigation Menu in Blogger

Are you tired of your laborious Navigation bar and would desire to refurbish it with something that could amuse your visitor? Navigation bar is deliberated as the core element of a website because it represents the complete outlook of a website. Navigation bar has most prominent information about that helps users to navigate throughout the website. As we all are well aware that Navigation bar appears at the top of a website, so users have to scroll back to top in order to navigate to different pages. Furthermore, probabilities are bit high that users might get frustrated and straightaway leave your website. For that reason, it is crucial to have a “Sticky” Navigation bar that floating along whenever someone Scroll up or down the page. In This Article, we will Learn How To Create a Floating “Sticky” Navigation bar in Blogger. 

"Sticky" Floating Navigation Menu (DEMO)

Floating "Sticky" Sidebar Widget in Blogger

How to Create a Floating "Sticky" Sidebar Widget in Blogger

Elements that float along your screen are pretty cool and attention grabbing. They are more commonly known as the “Sticky” floating widgets that stick to your screen as you scroll and tend to have a higher click through rate. This is the reason why at MyBloggerLab, we are using a Floating subscription widget in the sidebar that has been quite useful for us. Many of our users kept on emailing us about how they can create a “Sticky” floating sidebar widget in Blogger. In the past, we have already shown you how to make a Sticky Floating Footer bar in Blogger. In this article, we will show you how to create a floating “sticky” Sidebar widget in Blogger?

Remember: This works pretty well with all kinds of widgets present in your sidebar. It is not necessary that a person can only use if for email subscription boxes. You can use it for promotion of your items, galleries, popular posts, Instagram photos, and basically everything that you wish for. 

Floatting Social Buttons

ΠΩΣ ΒΑΖΩ FLOATING SOSIAL FOLLOW BUTTONS

Με τον παρακάτω κώδικα μπορείτε να βάλετε στο ιστολόγιό σας κάθετα floating sosial follow buttons. Τα κουμπιά αυτά θα εμφανίζονται στο πάνω δεξιό μέρος του ιστολογίου σας σε κάθετη διάταξη, δηλ. το ένα κάτω από το άλλο. Έχουν διαστάσεις 40Χ40οι οποίες αν θέλετε μπορούν να γίνουν και 35Χ35 ή 30Χ30 για να μην πέφτουν πάνω στη δεξιά πλευρική μπάρα. Το ίδιο ισχύει και για το πτυσόμενο button που ανοίγει όταν περνάτε το ποντίκι σας πάνω από τα buttons. Αυτό έχει διαστάσεις 120Χ40και μπορείτε να τις αλλάξετε αναλογικά πάντα με τo ύψος των τετράγωνων buttons σε 35Χ105ή 30X90. 

Η θέση των εικονιδίων αλλάζει εκεί που γράφει top:0px;right:0px; Αν θέλετε μπορείτε να αλλάξετε τα links των εικονιδίων που είναι με το μώβ και κόκκινοχρώμα καθώς και τα links που παραπέμπουν στα sosial networksπου είναι με κίτρινο χρώμα με τα δικά σας links εικόνων και sosial networks links.

ΔΕΙΤΕ ΕΔΩ ΤΑ FOLLOW SOSIAL BUTTONS ΣΕ ΛΕΙΤΟΥΡΓΙΑ ΣΕ ENA DEMO BLOG

 

Floating Sidebar Widget

ΠΩΣ ΒΑΖΩ ΑΝΑΔΥΟΜΕΝΟ WIDGET No 2

Με τον παρακάτω κώδικα μπορείτε να βάλετε ένα αναδυόμενο widget στα δεξιά ή στα αριστερά του blog σας το οποίο όταν πλησιάζετε το ποντίκι στην άκρη του ιστολογίου σας θα αναδύεται ένα ή περισσότερα widgets. Μπορείτε να βάλετε βίντεο, παρουσιάσεις, έγγραφα word, excel, pdf, ημερολόγια, χάρτες, facebook like box, google+ followers box, chat, forum και γενικώς ότι προσφέρεται σε κώδικα HTML /  javascript. Ο κώδικας των widgets πρέπει να μπεί στο τέλος μεταξύ των <div class="floatingbox"> και του </div>.
Πρέπει δηλαδή να διαγράψετε τον δικό μου κώδικα του φύλλου excel και να βάλετε τον δικό σας κώδικα. Επίσης πρέπει να αλλάξετε τις διαστάσεις με τα γαλάζια γράμματα εκεί που γράφει right: "-510" και width:510px; και την θέση που θα εμφανίζεται το widget εκεί που γράφει top:30px; Προσέξτε αν έχετε ήδη ένα script jquery παραλέιψτε την πρώτη γραμμή του κώδικα.

ΔΕΙΤΕ ΕΔΩ ΤΟ FLOATING WIDGET FOR SIDEBAR ΣΕ ΛΕΙΤΟΥΡΓΙΑ ΣΕ ENA DEMO BLOG

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function() {$(".floatingbox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-510"}, "medium");}, 500);});

</script>

<style>

.floatingbox{

background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOGVAWp-1Y0z3ZRJE3Lg5M7mq27w1aA089eypwrtbsdZI5uNhME-V4gV524jEskD3Bnb4D_Op6eA-Aoe3G4_AE3Xjkg6Cuq-sAOIQ-aQdjMmfow01JucuqHjMOOIcQRMKbuRPcmcp6beK2/w30-h120-no/POSTS.JPG")

no-repeat scroll left top transparent !important;

display:block;float:right;height:auto;padding: 0 0 0 30px;width:510px;

z-index: 99999;position:fixed;right:-510px;top:30px;}

.floatingbox div{border:none;position:relative;display:block;}

</style>

<div class="floatingbox">

<iframe frameborder="0" width="510" height="700"  src="https://docs.google.com/spreadsheets/d/1250n3upxFNUwA50hSL73OZK0fvXv0CHmFF1OTE_443M/pubhtml?gid=898874275&amp;single=true&amp;widget=true&amp;headers=false"></iframe>

</div>

Floating Social Follow Buttons

ΠΩΣ ΒΑΖΩ FLOATING SOSIAL FOLLOW BUTTONS

ΠΩΣ ΒΑΖΩ FLOATING SOSIAL FOLLOW BUTTONS

Με τον παρακάτω κώδικα μπορείτε να βάλετε στο ιστολόγιό σας κάθετα floating sosial follow buttons. Τα κουμπιά αυτά θα εμφανίζονται στο πάνω δεξιό μέρος του ιστολογίου σας σε κάθετη διάταξη, δηλ. το ένα κάτω από το άλλο. Έχουν διαστάσεις 40Χ40 οι οποίες αν θέλετε μπορούν να γίνουν και 35Χ35 ή 30Χ30 για να μην πέφτουν πάνω στη δεξιά πλευρική μπάρα. Το ίδιο ισχύει και για το πτυσόμενο button που ανοίγει όταν περνάτε το ποντίκι σας πάνω από τα buttons. Αυτό έχει διαστάσεις 120Χ40 και μπορείτε να τις αλλάξετε αναλογικά πάντα με τo ύψος των τετράγωνων buttons σε 35Χ105 ή 30X90.