Παρασκευή, 24 Αυγούστου 2012

Hide/Show στο blog μας


Ένα πολύ ωραίο widget έχω για σας σήμερα.
Είμαι ο ekabitis και ίσως έχετε δει στο blog μου ένα link που γράφει "Hide/Show"
Πρόκειτε για το "εμφάνιση/απόκρυψη" ή αλλιώς Show/Hide button.
Είναι ένα πάρα πολύ εύχρηστο widget, καθώς με αυτό μπορούμε να "κρύψουμε" θέματα στην sidebar μας, εξοικονομώντας έτσι πολύτιμο χώρο.
Μέσα στο "show/hide", μπορούμε να βάλουμε οτιδήποτε θέλουμε. Από κείμενο μέχρι φωτογραφίες ή banners. Στην άλλη σελίδα μου συγκεκριμένα, έχω τοποθετήσει όλα τα φιλικά banners, όπου έπιαναν υπερβολικό χώρο.


Πάμε να το δούμε λοιπόν.

Από τον Πανόπτη μας επιλέγουμε Διάταξη-->Προσθήκη gadget-->Html/Javascript
και βάζουμε εκεί μέσα τον παρακάτω κώδικα.

<style type="text/css">
.commenthidden {display:none}
.commentshown {display:inline}
</style>
<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script> <a name="table">Tίτλος2</a>
<b> <a aiotitle="click to expand" href="javascript:togglecomments('UniqueName')"
>Hide / Show</a></b><br />
<div class="commenthidden" id="UniqueName"
>Εδώ γράφουμε αυτό που θα φαίνεται</div>

Εκεί που γράφει Hide/Show με κόκκινα γράμματα, είναι το link που πατάμε για την εμφάνιση/απόκρυψη. Αν θέλουμε μπορούμε να το αλλάξουμε και να γράψουμε ότι άλλο μας αρέσει.
Εκεί που γράφει "Εδώ γράφουμε αυτό που θα φαίνεται" με μπλε γράμματα είναι αυτό που θα βάλουμε εμείς για να κρύψουμε. Όπως προανέφερα, αυτό μπορεί να είναι κείμενο, φωτοφραφία, banner, widget ή οτιδήποτε άλλο.
Αν θέλουμε μέσα στο blog μας να χρησιμοποιήσουμε πάνω από μία φορά το συγκεκριμένο widget θα πρέπει αυτό με το πράσινο χρώμα που γράφει UniqueName να το αλλάζουμε κάθε φορά, βάζοντας μια διαφορετική (μοναδική) ονομασία. Πάντα με λατινικούς χαρακτήρες. Ειδάλλως δεν θα δουλέψει.
Τέλος άμα θέλουμε να υπάρχει και ένας δεύτερος (πιο διευκρινιστικός) τίτλος έξω από το widget χρησιμοποιούμε το Tίτλος2 (αυτό με το γαλάζιο χρώμα). Όπου "Τίτλος2" βάζουμε τον τίτλο που θέλουμε.
Αν δεν το χρειαζόμαστε αυτό, (καθώς υπάρχει και ο τίτλος που ήδη διαθέτει το blog μας), μπορούμε να το διαγράψουμε ολόκληρο ή εναλακτικά να αφήσουμε κενό το σημείο με το μοβ χρώμα.

http://www.bloggertips.gr 

0 σχόλια:

Δημοσίευση σχολίου