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

Τρίτη, Νοεμβρίου 10

1

Πως να βάλετε ένα όμορφο Tag Cloud στο Blog σας με χρήση Css και jquery

Η χρήση του Tag Cloud  έχει γίνει πολύ δημοφιλείς και ευρέως διαδεδομένη στο διαδίκτυο σήμερα.
Έτσι, θα δούμε παρακάτω πως να βάλουμε στο blog μας  Tag Cloud .

 
                                  Demo  Download

                       

Βήμα 1ο : Css και jquery


    Πρώτα απ’όλα  κατεβάστε το  jquery.js  script  και ανεβάζετε  αυτό το script στο δικό σας  File Hosting Sites .( Αν δεν ξέρετε που να ανεβάσετε τα αρχεία σας τότε ρίξτε μια ματιά εδώ )

     Κάνουμε login στο Blogger Dashboard  και πάμε “ Διάταξη “ >> “ Επεξεργασία HTML “  και κάνουμε “ Επέκταση προτύπων γραφικών στοιχείων “
Σημείωση :  Πριν επεξεργαστούμε το πρότυπό μας , αποθηκεύουμε πάντοτε ένα αντίγραφο , Πατώντας  “ Λήψη πλήρους προτύπου “

  Ψάχνουμε να βρούμε στο πρότυπο μας το  </head> και κολλάμε ακριβώς από πάνω τον παρακάτω κώδικα :
<style> 

/* Tag cloud */ 

    .tags ul{
        margin:1em 0;
        padding:.5em 10px;
        text-align:center;
        background:#E9417F url(#) repeat-x;        
        }
    .tags li{
        margin:0;
        padding:0;
        list-style:none;
        display:inline;
        }
    .tags li a{
        text-decoration:none;
        color:#fff;
        padding:0 2px;    
        }
    .tags li a:hover{    
        color:#33F40C;
        }        
    .tag1{font-size:100%;}
    .tag2{font-size:120%;}
    .tag3{font-size:140%;}
    .tag4{font-size:160%;}
    .tag5{font-size:180%;}
    /* alternative layout */ 

    .tags .alt{
        text-align:left;
        padding:0;
        background:none;
        }
    .tags .alt li{
        padding:2px 10px;
        background:#efefef;
        display:block;
        }
    .tags .alt .tag1, 
    .tags .alt .tag2, 
    .tags .alt .tag3, 
    .tags .alt .tag4, 
    .tags .alt .tag5{font-size:100%;}
    .tags .alt .tag1{background:#7cc0f4;}
    .tags .alt .tag2{background:#67abe0;}
    .tags .alt .tag3{background:#4d92c7;}
    .tags .alt .tag4{background:#3277ad;}
    .tags .alt .tag5{background:#266ca2;}
/* // Tag cloud */ 

</style>
<script src='js/jquery.js' type='text/javascript'/>
<script type='text/javascript'> 

</script>
Σημείωση :  Αλλάζετε το  js/jquery.js με το url του αντίστοιχου αρχείου μας  και αποθηκεύουμε το πρότυπο μας .
Αν θέλετε να αλλάξετε το background χρώμα , βρείτε την γραμμή :  background:#E9417F url(#) repeat-x;  και αλλάξτε την γραμμή με το κόκκινο στο χρώμα που θέλετε , εδώ θα βρείτε όλα τα Color Codes .

  Αποθηκεύετε το πρότυπο σας και πάμε στο επόμενο βήμα .

Βήμα 2ο : Το HTML


  Πάμε “ Διάταξη “ >> “ Στοιχεία Σελίδας “ >> “ Προσθήκη gadget “ και “ HTML/JavaScript “  και εισάγουμε τον παρακάτω κώδικα
<div class="tags">
            <ul>
                <li class="tag1"><a href="#">blogger hacks</a></li> 
                <li class="tag2"><a href="#">blogger widgets</a></li>
                <li class="tag3"><a href="#">CSS tutorial</a></li>
                <li class="tag2"><a href="#">Javascript Tutorials </a></li>
                <li class="tag4"><a href="#">mootools</a></li>
                <li class="tag1"><a href="#">Blogger Widgets</a></li>
                <li class="tag1"><a href="#">Premium Blogger Templates</a></li>
                <li class="tag5"><a href="#">Webmaster tools</a></li>
                <li class="tag2"><a href="#"> Jquery tutorial</a></li>
                <li class="tag1"><a href="#">Image Effects </a></li>
                <li class="tag3"><a href="#">Twitter tools</a></li>
                <li class="tag4"><a href="#">Firefox Plugins </a></li>
                <li class="tag1"><a href="#">blogger templates</a></li>
                <li class="tag5"><a href="#">CSS tutorial</a></li>
                <li class="tag1"><a href="#">blogger hacks</a></li>
                <li class="tag2"><a href="#">Basic SEO Tips</a></li>
            </ul>
        </div>
Αλλάζετε τα links με τα δικά σας , αποθηκεύετε και δείτε το αποτέλεσμα .
Συγχαρητήρια ,  έχετε ένα όμορφο Label Cloud στο blogger blog σας  πλέον .
Για οποιαδήποτε απορία , αφήστε μου ένα σχόλιο και θα χαρώ να βοηθήσω όσο μπορώ ….

1 :

manolo είπε...

To script jquery νομίζω ότι δεν χρειάζεται εκτός κι αν στα links χρησιμοποιείται ajax.

 

© 2010 Bloggertrics

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

ΑΡΧΙΚΗ| Sitemap| Posts RSS