Λοιπόν ας πιάσουμε δουλειά !
ΒΗΜΑ 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-->
ΒΗΜΑ 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
