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. 

 

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

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

<style>

#floatbuttons .btn1 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHK72_CbARCgXHP8yB1P5VkWlGTT_h3MOX4A8IQb7ZfYFKwpS3v5077wGLb2qWajH6ec55y1bcnrISbfLYMaNJyRH8-JWPOU5veedw1D11KJ9fhLiULvmCuNplUW28w6gJVxnzMywi6dCZ/s40-no/facebook-40.jpg) no-repeat; height:40px; width:40px; ;  top:0px;right:0px;position:fixed;z-index:999;}

#floatbuttons .btn1:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYNtE7coIfKUEHkYvuHhNoLkk72A3SaIGvVDxkA75s52kS0VZDT80KXVbK8bMAMoDhkIWnww6wzf_qm-g5ZB1H5DmZWl9vyYbLg8LRXiPZ61KyrzqUxNJh-xMOH7POzy0BLC8PV-8gt1I0/w120-h40-no/fb-like-120X40.jpg) no-repeat; height:40px; width:120px; ;  top:0px;right:0px; position:fixed;z-index:999;}

#floatbuttons .btn2 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-OR-MIsh8OIzM4qWEfkOVD4TTYj7gYxGLKZSSXZgNYC-Wgax1pB4uwgm1NcrT8mL770SEmOo6p9h0Cdvh04IDD5N8ddOilBbkGxqKvO_6oVbXENHOobisZkrsxNjEgm3NHACWsfXGe5Cv/s40-no/twitter-40.jpg) no-repeat; height:40px; width:40px; ;  top:40px;right:0px;position:fixed;z-index:999;}

#floatbuttons .btn2:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMLmo6CB02d8rrzkn1zF6ypQGaMH_MWywd5QN9uOIonFMNTClEqDh7-vwUGLRIgvqERhP2auqOODOSwI2nj_oF84xcyfTYY7TDeeH5cO_VkBEyN4vR5X8UJC4LV5j-ki_DohdNMNEHvDsb/w120-h40-no/f-twitter-120X40.jpg) no-repeat; height:40px; width:120px; ;  top:40px;right:0px;position:fixed;z-index:999;}

#floatbuttons .btn3 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZZpKDZKF1Kw5NLmzZVB4h10adkHh9nq7mYzEf_rixMl0iwBONBPmPxXQu2uOPG7IkIXTOluwB_Ak3P7BYmWzkQc8NJbAt3GAqYXBeIDY67_UDGq8MV-ItOqTxr3SikupFzKe_cWBk5n5z/s40-no/Google%252B40.jpg) no-repeat; height:40px; width:40px; ;  top:80px;right:0px;position:fixed;z-index:999;}

#floatbuttons .btn3:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC5FYQvHe7D1aPHj0TgV98hSwNF2zFEck3ecMJi-xt2n0N1peiuG4SAwzi1s1FyS8QChage8keZvcSY2UNh4A8A0C0XJEIVtHF-sY2MIC8RCmNquqDJXY_pk9n97_KRQZetfh2gZYeIhUk/w120-h40-no/f-Google%252B120X40.jpg) no-repeat; height:40px; width:120px; top:80px;right:0px;position:fixed;z-index:999;}

#floatbuttons .btn4 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkkd72ShbEdBCTNLUhKqAlvs3XVk9ftzeb_Dup8pXuYkGVzCCu6uGl2-dJTe76Y6rYNRRTjP5RexZ-RDB7Wrn_BK2lzFdED6F-UncaQaZnL1TWNdEgmVmCcSlTTM5s03-RqgsRgqTsmlrN/s40-no/pinterest-40.jpg) no-repeat; height:40px; width:40px; top:120px;right:0px;position:fixed;z-index:999;}

#floatbuttons .btn4:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrYqIXttoFBc-01IH8VN1varTx6SCAmlzCOnIQnl0bxaRTdaeD4CLJ18PnfZeoEJKGCosnGcSEm8GrCrB5bOgrihvkeG3mq_xnJZ8WQn5obyIgRvMhyphenhyphenvdjDA15qcHi7lBvlQ79tnw5XkYB/w120-h40-no/Pinterest-120X40.jpg) no-repeat; height:40px; width:120px; top:120px;right:0px;position:fixed;z-index:999;}

#floatbuttons .btn5 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9RG_wfuGXkXodAKN5HJ3Z4bvTqn4vzmPHOArfcfXdk8oYTFXLOk26g65pQqImSu9pEmp0sC7UzVpk8XDmsGg1HSZvQa-Z92iDiDCn3TGtjwzy7JIe3BKXtbaxiE6q-Ad6HSIP49Dk1bop/s40-no/youtube-40.jpg) no-repeat; height:40px; width:40px; top:160px;right:0px;position:fixed;z-index:999;}

#floatbuttons .btn5:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnlqEdY7FcEmpOL8NzhbXYKYMe7Xt_qU2CrftT1G0SJRuzI38X3a8zCOvdWoVbgGTpvtAS3StdspbF8jAwgoI58JOrMGomDGPf88SsRZVEFWGgso1iEqT2-2nxgWbMYL2zhqOwfjQImEZE/w120-h40-no/Youtube-120X40.jpg) no-repeat; height:40px; width:120px; top:160px;right:0px;position:fixed;z-index:999;}

#floatbuttons .btn6 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNlqNUPHZIlxK1vJxQeSaLvU9BBk_bbWoAbWJ48cKJLenas7SAj1gDbZiQn2-Hb_CHtBUCXyJDzm8SdRLLMcq8SESmjZUFl0N47_pKoeirvDZtqRULK5gRKD3qRaXeE-OVI3vOOMy3Ccw1/s40-no/rss-40.jpg) no-repeat; height:40px; width:40px; top:200px;right:0px;position:fixed;z-index:999;}

#floatbuttons .btn6:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ5_Xabg_r4YZg4I85J_tKD_sACaHqET2X7tbcQq7ot_kZ-75e32iIfVHEUI6zeWnunwkP0AmOUQ8yFcucdMcLHGMFg8UhyMkhk6P-KLNodkeRWfDWIc8HbiqBr9cKX0q6gaeD8y0DldEH/w120-h40-no/rss-120X40.jpg) no-repeat; height:40px; width:120px; ; top:200px;right:0px;position:fixed;z-index:999;}

</style>

<ul id="floatbuttons">

<li><a class="btn1" href="https://www.facebook.com/widgetsforblogs"></a></li>

<li><a class="btn2" href="https://twitter.com"></li>

<li><a class="btn3" href="https://plus.google.com/113381416528370124258/posts"></a></li>

<li><a class="btn4" href="https://www.pinterest.com/photos1000"></a></li>

<li><a class="btn5" href="https://www.youtube.com/user/WIDGETSFORBLOGS"></a></li>

<li><a class="btn6" href="http://feeds.feedburner.com/WidgetsBlogs"></a></li>

</ul></a>