31 Οκτ 2015

Προσθέστε Αναδυόμενο Facebook Like Box στο Blogger σας

Προσθέστε Αναδυόμενο Facebook Like Box στο Blogger, floating, add

Δείτε σ' αυτήν την ανάρτηση, έναν απλό κι εύκολο τρόπο να προσθέσετε ένα όμορφο και διακριτικό (αυτό της παρακάτω φωτογραφίας) αναδυόμενο Facebook Like Box στο Blogger σας.




Καταρχήν, αν δεν έχουμε σχετική εμπειρία, πριν κάνουμε οποιαδήποτε αλλαγή στην HTML, ανοίγουμε το Blogger μας και πάμε Πρότυπο  Δημιουργία Αντιγράφου ασφαλείας/Επαναφορά ⇨  Λήψη πλήρους προτυπου  (για κάθε ενδεχόμενο λάθους).

Στη συνέχεια επιλέγουμε Επεξεργασία HTML  πατάμε Cntr+F , κάνουμε επικόλληση στο πλαίσιο αναζήτησης το 

</head>

και πατάμε Enter, για να μεταφερθούμε στο σημείο της σελίδας που βρίσκεται.
Ακριβώς από κάτω (αν δεν υπάρχει κενό, δημιουργούμε πατώντας Enter), κάνουμε επικόλληση το

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

και πατάμε Αποθήκευση προτύπου.

Κατόπιν, πάμε Διάταξη ⇨ Προσθήκη Gadget ⇨ HTML/JavaScript ⇨ στο παράθυρο ''Περιεχόμενο'' κάνουμε αντιγραφή - επικόλληση τον παρακάτω κώδικα


<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script> <style type="text/css"> .w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM9eUAg1KD4gIH6tVXm5jluhXRn6Wg-P9pXeS03MGXZP83xiNvQKdyiXRzPvHJ8fuN7Yt1HO0_l1tYKQC-IVvuooo2MxgfCim7TqL-0Rz2qzfeWi22iE5zHyL__mFSD2SIIb7vlEner6oW/s1600/FloatingFB.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 300px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .w2bslikebox div{border:none;position:relative;display:block;} .w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .w2bslikebox span a{color: #808080;text-decoration:none;} .w2bslikebox span a:hover{text-decoration:underline;} </style><div class="w2bslikebox" style=""><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2F*************&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=292" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 292px; width: 245px;background:#fff;"></iframe><span><a style="font-family: arial, sans-serif; font-size: 9px; color: #999;" href="http://www.jobsmag.in" target="_blank"> JM</a></span> </div> </div>

αντικαθιστούμε τα ************* με το δικό μας Facebook fan page URL
(δείτε »ΕΔΩ« πως μπορείτε να το βρείτε, αν δεν το ξέρετε ήδη)
και πατάμε Αποθήκευση.

Τέλος!
Το αναδυόμενο Facebook Like Box έχει εγκατασταθεί στο Blogger μας.

Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου