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

Δευτέρα, Ιουλίου 12

2

Show/Hide HTML στοιχεία με JavaScript



togglecomments
Show/Hide HTML στοιχεία με JavaScript

Σήμερα θα δούμε πως μπορούμε να κάνουμε απόκρυψη και εμφάνιση ενός HTML στοιχείου πολύ απλά χρησιμοποιώντας JavaScript .
Ένα πολύ χρήσιμο trick , ειδικά για αυτούς που χρησιμοποιούν πολλά HTML/JavaScript gadgets στην πλαϊνή τους μπάρα .
Με αυτό το Script μπορούμε να αποκρύψουμε τα gadgets μας ,εξοικονομώντας έτσι χώρο και τα gadgets μας θα εμφανιστούν μόνο όταν κάνουμε κλικ στον τίτλο του gadgets μας .

Δείτε το σε λειτουργία στην πλαϊνή μου μπάρα [ +/- Τα banners των φίλων μου! ] , για να καταλάβετε καλύτερα για τι πρόκειται .

Για να το εγκαταστήσουμε στο blog μας ακολουθούμε τα εξής απλά βήματα :

ΒΗΜΑ 1ο :

1 . Συνδεθείτε στο Blogger λογαριασμό σας και πηγαίνετε  Σχεδίαση >> Επεξεργασία HTML και πατήστε στο κουτάκι Επέκταση προτύπων γραφικών στοιχείων

2 . Βρείτε στο πρότυπό σας την ετικέτα  ]]></b:skin>  και επικολλήστε τις παρακάτω γραμμές του κώδικα ακριβώς από πάνω :


.commenthidden {display:none}
.commentshown {display:inline}

 3 . Τώρα βρείτε στο πρότυπό σας την ετικέτα  </head> και επικολλήστε τον παρακάτω κώδικα ακριβώς από πάνω

<!-- togglecomments script --> 
<script type='text/Javascript'>
function togglecomments (postid) { 
var whichpost = document.getElementById(postid); 
if (whichpost.className==&quot;commentshown&quot;) { whichpost.className=&quot;commenthidden&quot;; } else { whichpost.className=&quot;commentshown&quot;; } 
}  
</script>

 ΒΗΜΑ 2ο :

Τώρα , όποιο HTML/JavaScript gadget  θέλουμε να αποκρύψουμε απλά θα το εισάγουμε  ανάμεσα στους παρακάτω κωδικούς :

<a aiotitle="click to expand" href="javascript:togglecomments(' Ε δω το id του gadget ')" 
><h2> +/- ΕΔΩ Ο ΤΙΤΛΟΣ ΤΟΥ GADGET ΜΑΣ </h2></a><br /> 
<div class="commenthidden" id="Εδω παλι το ιδιο  id του gadget  "> 

 Εδώ θα εισάγουμε τον κώδικα για το HTML/JavaScript gadget    

</div>

 Δείτε ένα παράδειγμα χρήσης για καλύτερη κατανόηση :

 Ας πούμε ότι θέλω να αποκρύψω το ShoutMix gadget , τότε ο κώδικας μου θα μοιάζει κάπως έτσι : 


<a aiotitle="click to expand" href="javascript:togglecomments(' ShoutMix ')">
<h2>+/- Πείτε τα όλα εδώ  ! </h2></a><br /> 
<div class="commenthidden" id=" ShoutMix ">

<!-- Begin ShoutMix - http://www.shoutmix.com -->  
 <iframe scrolling="auto" width="300" frameborder="0"  
src="XXXXX" height="400" title="χχχ">  
 <a href="http://shoutmix./?χχχχ">View shoutbox</a> </iframe> <br /> 
 <a href="http://www.shoutmix " title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a> 
 <br /> <!-- End ShoutMix -->

</div>


Τώρα αποθηκεύουμε το HTML/JavaScript gadget μας και έχουμε τελειώσει !

Αυτό είναι όλο !!!  Εύκολο δεν είναι ?!!

Σημαντικό :  Στο παραθυράκι Διαμόρφωση HTML/JavaScript  δεν θα εισάγουμε ξανά τίτλο για το HTML/JavaScript gadget μας .
Αφήνουμε το πεδίο για τον τίτλο κενό ! Γιατί έχουμε ορίσει ήδη τίτλο μέσα στον κώδικα που χρησιμοποιήσαμε !




Για όποιες  απορίες , αφήστε το σχόλιό σας !

Καλή επιτυχία σε όλους  ...


2:

post2.soo είπε...

8-) =-O >:o ;)
Πολύ χρήσιμο, Σοφάκι!
Σκάω από την ζέστη. Ειν τυχαίο?
Μουατς

bloggertrics είπε...

Δεν νομίζω  χιχιχιχι :-D   Κουράγιο κοριτσάκι μου 

Έλα να σε φιλοξενήσω Στην Χαλκιδική να δροσιστείς λίγο , εδώ δεν θα καταλάβεις ούτε ζέστη ούτε τίποτα  =-X ;) :-P

Φιλιαααααα 

 

© 2010 Bloggertrics

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

ΑΡΧΙΚΗ| Sitemap| Posts RSS