Blogger Tricks

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

 

                                      

 

Βήμα 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 σας  πλέον .
Για οποιαδήποτε απορία , αφήστε μου ένα σχόλιο και θα χαρώ να βοηθήσω όσο μπορώ ….