Πως να βάλετε στο blog σας ένα όμορφο Balloon tooltip

Καλησπέρα σε όλους . Σήμερα θα δούμε πως μπορούμε να δημιουργήσουμε ένα ballon tooltip  για ένα link , με την χρήση JavaScript , δίνοντας στο χρήστη τη δυνατότητα με ένα click ή mouse over στο εκάστοτε link να βλέπει την επεξήγηση της λειτουργίας αυτού .
Λοιπόν ας πιάσουμε δουλειά !

ΒΗΜΑ 1ο :  

Πρώτα απ’ όλα θα χρειαστούμε το script  και τα γραφικά τα οποία θα χρησιμοποιήσουμε στην δημιουργία του ballon tooltip . Το script  φάκελο μπορείτε να κατεβάσετε από την ιστοσελίδα του δημιουργού εδω .

Αποσυμπιέστε το Zip file και πρώτα απ’ όλα βρείτε τον φάκελο  ” images “  και ανεβάστε τα γραφικά στο δικό σας  FREE File Hosting Site ( π.χ. Google Sites )
Μετά ανοίξτε τον φάκελο  “ css “  , κάντε  διπλό κλικ στο έγγραφο  “ bubble-tooltip “  και ανοίξτε το script για να το επεξεργαστείτε .
Αναζητουμε μεσα στο css script  τις παρακατω γραμμες :

background-image: url('../images/bubble_bottom.gif');

background-image: url('../images/bubble_middle.gif');

background-image: url('../images/bubble_middle.gif');

Τώρα αλλάζετε τα images url με τα direct url των γραφικών σας , κάνετε αποθήκευση έγγραφου  και ανεβάζετε  το “ bubble-tooltip css “ και το “ bubble-tooltip js “ στο δικό σας  FREE File Hosting Site ( π.χ. Google Sites )
Δείτε τα screenshots κάτω για περισσότερη λεπτομέρεια :

 

ΒΗΜΑ 2ο :  

Κάνετε Log in στο blog σας και πηγαίνετε  <<  Διάταξη >>  Επεξεργασία HTML >> Επέκταση προτύπων γραφικών στοιχείων >>
Κάνετε Λήψη πλήρους προτύπου για κάθε ενεχόμενο πάντα !!!!!               
Ψάχνετε στο πρότυπο σας να βρείτε το </head>   και κολλάτε ακριβώς  πάνω από αυτό , τον παρακάτω κώδικα :

<!--bubble tooltip Scripts and Styles Start-->
<link href='http://sites.google.com/site/.../.../bubble-tooltip.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://sites.google.com/site/.../.../bubble-tooltip.js' type='text/javascript'/>
<!--bubble tooltip Scripts and Styles End-http://bloggertrics.blogspot.com-->

Τώρα αντικαταστήστε  τα url απο τα “ bubble-tooltip.css “ και “ bubble-tooltip.js “ με τα direct url των αντιστοίχων αρχείων σας  και κάντε Αποθήκευση Προτύπου

ΒΗΜΑ 3ο :

Τώρα πηγαίνετε  << Διάταξη >>  Στοιχεία Σελίδας >> Προσθήκη gadget >> HTML/JavaScript  >> και εισάγουμε τον παρακάτω κώδικα  :
 

<div id="bubble_tooltip">
<div class="bubble_top"><span></span></div>
<div class="bubble_middle"><span id="bubble_tooltip_content">Content is comming here as you probably can see.Content is comming here as you probably can see.</span></div>
<div class="bubble_bottom"></div>
</div>

Μέχρι εδώ όλα καλά ….    
Τώρα κάθε φορά που κάνετε μια ανάρτηση , στις λέξεις που πρέπει να έχουν tooltip , πρέπει να  συμπεριλαμβάνετε  μια ετικέτα όπως αυτή :

<a href="#" onmousemove="showToolTip(event,'αυτο είναι ενα απλό κείμενο');return false" onmouseout="hideToolTip()">Εδω το κείμενο σας η την λέξη σας</a>

ΠΑΡΑΔΕΙΓΜΑ ΧΡΗΣΗΣ :

<p>Στις 29 Οκτωβρίου <a href="http://el.wikipedia.org/wiki/Αστερίξ" onmouseover="showToolTip(event,'Αστερίξ είναι ο τίτλος ενός κόμικς των Ρενέ Γκοσινί (σενάριο) και Αλμπέρ Ουντερζό (σκίτσα)');return false" onmouseout="hideToolTip()"> ο Αστερίξ </a> κλείνει τα 50 χρόνια του κι αυτό δεν είναι αστείο πράγμα για τους Γάλλους. «Ο Αστερίξ είναι λιγάκι σαν τον Πύργο του Άιφελ», έλεγε τις προάλλες ο Γάλλος εκδότης της σειράς, Αρνό Νουρί</p>

Κλικ εδώ για το DEMO :

Καλή τύχη λοιπόν και θα τα πούμε σύντομα με άλλο ένα καινούργιο tutorial