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

 

<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>

 

http://gadgetsforblogs7.blogspot.gr/2015/06/floating-sosial-follow-buttons_29.html