Floating Facebook Like And Twitter Followers Box for Blogger

Σήμερα θα σας παρουσιάσω ένα πολύ όμορφο αλλά και πρακτικό Blogger Widget.
Ο λόγος για το Floating Facebook Like And Twitter Followers Box for Blogger το οποίο εμφανίζετε στα πλάγια του blog σας.

Ελπίζω να σας αρέσει :)

Πάμε όμως να τα πάρουμε με την σειρά.




1.. Σύνδεση στον λογαριασμό σας στο blogger.com
2.. Διάταξη 
3.. Επεξεργασία html
4.. Λήψη πλήρους προτύπου
5.. Πατάμε ctrl + f για να ανοίξει το παραθυράκι αναζήτησης και εκεί ψάχνουμε να βρούμε το παρακάτω κώδικα: 

</head>

 6.. Αφού το βρούμε ακριβώς από πάνω του κάνουμε επικόλληση τον παρακάτω κώδικα:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready
(function(){jQuery(&quot;#facebook_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery(&quot;#facebook_right&quot;).stop(true,false).animate({right: -304}, 500); });
jQuery(&quot;#twitter_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery(&quot;#twitter_right&quot;).stop(true,false).animate({right: -304}, 500); });
jQuery(&quot;#google_plus_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery(&quot;#google_plus_right&quot;).stop(true,false).animate({right: -203}, 500); });
jQuery(&quot;#feedburner_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery(&quot;#feedburner_right&quot;).stop(true,false).animate({right: -303}, 500); }); });
</script>

7.. Τώρα κάνουμε αναζήτηση για να βρούμε το παρακάτω κώδικα:

]]></b:skin>

8.. Αφού το βρούμε ακριβώς από πάνω του κάνουμε επικόλληση τον παρακάτω κώδικα:

#on {visibility:visible;}
#off {visibility:hidden;}
#facebook_div {width:300px;height: 365px;overflow: hidden;}
#twitter_div {width:300px;height: 250px;overflow: hidden;}
#google_plus_div {width:350px;height: 143px;overflow: hidden;}
#knfeedburner_div {width:300px;height: 97px;overflow: hidden;}
#facebook_right {z-index: 10005;border:2px solid #3c95d9;background-color: #fff;width:300px;height: 365px;position: fixed;right: -304px;}
#facebook_right img {position: absolute;top: -2px;left: -35px;}
#facebook_right iframe {border:0px solid #3c95d9;overflow: hidden;position: static;height: 360px;left:-2px;top:-3px;}
#twitter_right {z-index: 10004;border:2px solid #6CC5FF;background-color: #6CC5FF;width:300px;height: 250px;position: fixed;right: -304px;}
#twitter_right_img {position: absolute;top: -2px;left: -35px;border: 0;}
#google_plus_right {z-index: 10003;background-color: #006ec9;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom: 2px solid #0056a0;border-right:2px solid #0056a0;border-left: hidden;width:200px;height: 143px;position: fixed;right: -203px;}
#google_plus_right_img {position: absolute;top: -2px;left: -33px;border: 0;}
#feedburner_right {z-index: 10002;background-color: #fefefe;border:2px solid #5b5b5b;border-top:2px solid #5b5b5b;border-bottom: 2px solid #5b5b5b;border-right:2px solid #5b5b5b;border-left: hidden;width:300px;height: 97px;position: fixed;right: -303px;}
#feedburner_right_img {position: absolute;top: -2px;left: -33px;border: 0;}

 9.. Κάνουμε προεπισκόπηση και αν δεν μας βγάλει κάποιο λάθος κάνουμε Αποθήκευση.

10..Πίνακας ελέγχου
11..Σχεδίαση

12..Στοιχεία Σελίδας

13..Προσθήκη gadget

14..HTML/Javascript

Και μέσα στο gadget βάζουμε τον παρακάτω κώδικα:

<div id="on"><div id="facebook_right" style="top: 18%;"><div id="facebook_div"><img src="http://3.bp.blogspot.com/-XmXmlBqBIsk/T0bpFKqRpbI/AAAAAAAAGps/DqATKGBCHPg/s1600/Facebook.png" alt="boton facebook flotante" /><iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FFREE-BLOGGERTIPS%2F148217341894034&amp;width=300&amp;height=365&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=true&amp;appId=138162052959087" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:365px;" allowtransparency="true"></iframe></div></div></div><div id="on"><div id="twitter_right" style="top: 35%;"><div id="twitter_div"><img id="twitter_right_img" src="http://1.bp.blogspot.com/-ldfb1FsK_Xk/T0bpHaTD5nI/AAAAAAAAGqE/7y1fL69TQa8/s1600/Twitter.png" /><script type="text/javascript" src="http://twitterfree.googlecode.com/files/fanbox_init.js"></script><div id="twitterfanbox"></div><script type="text/javascript">fanbox_init("FREE-BLOGGERTIPS");</script></div></div></div>

* Αλλάξτε το FFREE-BLOGGERTIPS και το 148217341894034 με το url της fan page σελίδας σας στο facebook.
π.χ το url της σελίδας μας στο facebook ειναι:
https://www.facebook.com/pages/FREE-BLOGGERTIPS/148217341894034
οπότε παίρνουμε το FREE-BLOGGERTIPS και το βάζουμε στο πρώτο μαρκαρισμένο κομμάτι του κώδικα και το 148217341894034 στο δεύτερο. 




**Αλλάξτε το FREE-BLOGGERTIPS με το username της σελίδας σας στο twitter
π.χ το url της σελίδας μας στο twitter είναι: https://twitter.com/#!/FREE-BLOGGERTIPS
οπότε παίρνουμε το FREE-BLOGGERTIPS και το βάζουμε στο μαρκαρισμένο κομμάτι. 


****Σε περίπτωση που έχετε επιλέξει username για το fan page σας στο facebook τότε μέσα στο widget βάλτε αυτό τον κώδικα:

<div id="on"><div id="facebook_right" style="top: 18%;"><div id="facebook_div"><img src="http://3.bp.blogspot.com/-XmXmlBqBIsk/T0bpFKqRpbI/AAAAAAAAGps/DqATKGBCHPg/s1600/Facebook.png" alt="boton facebook flotante" />
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Ffree-bloggertips.gr&amp;width=300&amp;height=365&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=true&amp;appId=138162052959087" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:365px;" allowtransparency="true"></iframe>
</div></div></div><div id="on"><div id="twitter_right" style="top: 35%;"><div id="twitter_div"><img id="twitter_right_img" src="http://1.bp.blogspot.com/-ldfb1FsK_Xk/T0bpHaTD5nI/AAAAAAAAGqE/7y1fL69TQa8/s1600/Twitter.png" /><script type="text/javascript" src="http://twitterfree.googlecode.com/files/fanbox_init.js"></script><div id="twitterfanbox"></div><script type="text/javascript">fanbox_init("GREEKNEWS24BLOG");</script></div></div></div>

****free-bloggertips.gr βάλτε το username που έχετε επιλέξει



15..Κάντε αποθήκευση  

Δημοσιεύτηκε στην κατηγορία: blogger tricks