Προσθέστε αναδυόμενο παράθυρο συνομιλίας στο Blog σας

Συντάκτης άρθρου: Αυτόνομος
Στην σημερινή μας δημοσίευση θα σας δείξουμε πως θα βάλετε στο Blog σας ένα αναδυόμενο παράθυρο συνομιλίας (Floating pop up chat box) .

Η διαδικασία είναι σχετικά εύκολη και έχει ως εξής :

Καταρχάς προτού κάνετε οποιαδήποτε αλλαγή στον κώδικα του Blog σας κρατήστε ένα αντίγραφο ασφαλείας της τωρινού κώδικα του !

1. Καταρχάς εάν δεν έχετε ήδη λογαριασμό σε κάποια σελίδα η οποία παρέχει δωρεάν Chat box , κάντε έναν λογαριασμό σε μία από τις παρακάτω ιστοσελίδες:

chatango.com/ (Αρκετά καλή)

xat.com/ (Καλή !)

cbox.ws/ (Πολύ καλή)

shoutmix.com/ (Αρκετά καλή και καλόγουστη)

meebo.com/rooms/create/ (Μέτρια)

chatroll.com/ (Πολύ καλή επίσης)

Π.χ έχουμε διαλέξει να κάνουμε το chat box μας στην σελίδα chatroll.com, αφού έχουμε φτάσει στο Step 2 δηλαδή της εγκατάστασης του chat box στην σελίδα μας (Step 2: Install) , κανουμε κλίκ στο εικονίδιο του blogger το οποίο βρίσκεται στα δεξιά της σελίδας (στην σελίδα chatroll.com πάντα!) και μετά μας βγάζει την καρτέλα στην οποία έχει τον απαραίτητο html κώδικα τον οποίο θα χρειαστούμε .

Μας ενδιαφέρει το σημείο του πάνω μέρος της καρτέλας το οποίο λέει

Install Chatroll on Blogger:

Add Chatroll to your Blogger Sidebar

και το βήμα 3. Αντιγράφουμε τον συγκεκριμένο κώδικα και τον κρατάμε προσωρινά κάπου αποθηκευμένο.

2. Μετά αφού έχουμε δημιουργήσει το chat box και έχουμε αποθηκεύσει τον κώδικα του chat box μας , βρίσκουμε το 

</head> 

στον κώδικα του blog μας και ακριβώς πρίν απο αυτό κανουμε επικόλληση τον παρακάτω κώδικα:

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

3. Αποθηκεύουμε τις έως τώρα αλλαγές μας και τώρα πηγαίνουμε στο
"Σχεδίαση" > "Στοιχεία σελίδας" και επιλέγουμε στο πλάι "Προσθήκη gadget" > "HTML/JavaScript" 

και κάνουμε επικόλληση τον παρακάτω κώδικα:

<script type="text/javascript">

//<!--

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

//-->

</script>

<style type="text/css">

.bttslikebox{background: url("

http://icons.iconarchive.com/icons/musett/antares/128/Chat-Folder-Black-icon.png

") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 110px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}

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

.bttslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}

.bttslikebox span a{color: #808080;text-decoration:none;}

.bttslikebox span a:hover{text-decoration:underline;}

</style><div class="bttslikebox" style=""><div> ΕΔΩ ΕΠΙΚΟΛΛΗΣΤΕ ΤΟΝ ΚΩΔΙΚΑ ΠΟΥ ΑΠΟΘΗΚΕΥΣΑΤΕ ΣΤΗΝ ΑΡΧΗ ΤΟΝ ΟΠΟΙΟ ΠΗΡΑΤΕ ΟΤΑΝ ΔΗΜΙΟΥΡΓΗΣΑΤΕ ΤΟ CHATBOX ΣΑΣ-(βλέπε βήμα 1.,σειρά 28-29) </div></div>

Πατάμε Αποθήκευση και αυτό ήταν !

Ελπίζουμε να σας άρεσε !

Ίσως να σου αρέσουν και αυτά: