Hi! Welcome...

Premium Blogger Template
FREE Premium Blogger Templates
Μοναδικά Free Blogger πρότυπα για το blog σας
Slimbox 2.02 με jquery-1.3.2 στο Bloggspot .
Πώς να εγκαταστήσετε SlimBox σε Blogger
ΙmgBox
Για να παρουσιάσετε τις εικόνες σας με στυλ !!!
31 καλυτέρα Blogger Widgets και addon
Κατάλογος συνδέσμων όπου μπορείτε να ανακαλύψετε περισσότερα widgets για το blog σας.
1 2 3 4 5

Δευτέρα, Οκτωβρίου 26

0

Πως να βάλετε στο 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  Wave

0:

 

© 2010 Bloggertrics

WordPress Theme by: WooThemes. | Converted into Blogger Templates by : Bloggertrics

ΑΡΧΙΚΗ| Sitemap| Posts RSS