dr-blogger2: tips for new bloggers

Κρυφό Share Menu
ένα μενού που βρίσκεται στη δεξιά πλευρά του blog σας, στατικό, κρυφό, και ανοίγει όταν περνάει από πάνω το ποντίκι σας...

Αφαιρέστε το: Εγγραφή σε Αναρτήσεις (Atom)
Πολλοί από εσάς θέλετε να σβήσετε από το blog σας τη φράση "Εγγραφή σε Αναρτήσεις (Atom)"....

Εμφάνιση αναρτήσεων με ετικέτα tips for new bloggers. Εμφάνιση όλων των αναρτήσεων

Φτιάξτε το Banner σας (HTML code)

Νέοι bloggers, σίγουρα οι περισσότεροι έχετε ένα banner...υπάρχουν όμως και κάποιοι bloggers πιο φρέσκοι που δεν ξέρουν πως φτιάχνεται και τι είναι το banner...γι αυτούς λοιπόν είναι αυτή η ανάρτηση....
Το banner είναι μια διαφήμιση του blog μας.Το μοιράζουμε σε διάφορα φιλικά μας blogs, για να μας διαφημίσουν και να αποκτήσουμε μεγαλύτερη επισκεψιμότητα ...

Διαβάστε την υπόλοιπη ανάρτηση...

Meta tags (SEO): Σημαντική βοήθεια για να αποκτήσετε μεγάλη επισκεψιμότητα

Nέοι bloggers αυτή η ανάρτηση είναι για σας ! Ειδικά οι "πολύ νέοι" bloggers, πρέπει να διαβάσουν και να εφαρμόσουν το κώδικα που θα τους ανεβάσει την επισκεψιμότητα (SEO)...οι πιο παλιοί το γνωρίζουν ήδη...

Διαβάστε την υπόλοιπη ανάρτηση...

Μειώστε Το Κενό Πανω+Κάτω Απο το Header / Reduce the space above+after header

Φίλοι bloggers γεια σας!!! Σήμερα θα σας δείξω έναν κώδικα που αν προσθέσετε στο css (σχεδιαστικό τμήμα του blog σας), θα μπορέσετε να μειώσετε το κενό, ανάμεσα στη κορυφή του blog, και της κεφαλίδας του τίτλου...Είναι μια μικρή φράση, που μπορείτε να προσθέσετε......
είτε
α)στο : Σχεδίαση => Σχεδιαστής Προτύπων => Προηγμένη => Προσθήκη CSS , είτε
β) στο : Σχεδίαση => Επεξεργασία HTML ....ακριβώς ΠΑΝΩ από τη φράση ]]></b:skin>
Δείτε στις φωτογραφίες το Πριν και το Μετά ....

Προσθέστε στο κώδικα CSS το παρακάτω κώδικα :

/* reduce space before and after header image */

#Header1 {
margin-top:-20px;
margin-bottom:-20px;
}

/* end of reduce space before and after header image */

*Προσέξτε....το margin-top:-20px; ρυθμίζει το κενό ΠΑΝΩ από τη κεφαλίδα,
το margin-bottom:-20px; ρυθμίζει το κενό ΚΑΤΩ από τη κεφαλίδα,
**Βάλτε τις δικές σας τιμές-νούμερα εκεί που λέει -20px, ώστε να πετύχετε το επιθυμητό αποτέλεσμα (παίξτε με διάφορες τιμές, και δείτε πως σας "κάθεται" καλύτερα στο μάτι....
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}

Μειώστε το κενό ανάμεσα στις αναρτήσεις του blog

Νέοι bloggers γεια σας !!!Κατά καιρούς σας έχω δείξει με ανάρτηση πως να μικρύνετε τα κενά ανάμεσα σε διάφορα gadgets για να εξοικονομήσετε χώρο (ΕΔΩ και ΕΔΩ)...Σήμερα θα σας δείξω πως να μειώσετε τα κενά ανάμεσα στις αναρτήσεις σας (εφ' όσον ανεβάζετε μια ανάρτηση κάθε ημέρα η περισσότερο)...βλέπετε στις εικόνες τη διαφορά πριν και μετά !!

ΠΡΙΝ

ΜΕΤΑ

Κάνετε σύνδεση στο blogger και πάτε Σχεδίαση => Επεξεργασία HTML => και με ctrl F ψάχνετε τη φράση : .date-outer { (θα βρείτε 2 τέτοιες)

η φράση ολόκληρη που ψάχνουμε είναι :

.date-outer {

position: relative;

margin: $(date.space) 0 15px;

padding: 0 15px;

και ελαττώστε την τιμή που βλέπετε με κόκκινα γράμματα 15px;.....(κάντε την ας πούμε 2px)...

κάντε ΠΡΟΕΠΙΣΚΟΠΗΣΗ και δείτε μήπως θέλει λιγότερο η περισσότερο !!!

Αφού δείτε οτι σας "κάθεται" σωστά στο μάτι η απόσταση που μικρύνατε, πατήστε ΑΠΟΘΗΚΕΥΣΗ !

ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!

{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}

Αφαιρέστε το: Εγγραφή σε Αναρτήσεις (Atom)

Νέοι bloggers γεια σας ! Πολλοί από εσάς θέλετε να σβήσετε από το blog σας τη φράση "Εγγραφή σε Αναρτήσεις (Atom)"...Ψάχνετε στο internet και βρίσκετε πολλές αναρτήσεις άλλων φίλων που δίνουν συμβουλές για blogs, αλλά δεν μπορείτε να βρείτε τη φράση-κλειδί, και έτσι δεν μπορείτε να σβήσετε τη φράση (ανάλογα βέβαια και το πρότυπο που χρησιμοποιείτε )...Η φράση αυτή έχει προστεθεί έτσι ώστε οι επισκέπτες στο blog να μπορούν να εγγραφούν σε τροφοδοσίες Atom σας. Ωστόσο, πολλοί άνθρωποι χρησιμοποιούν RSS για τους feeds blog . Επιπλέον, καταλαμβάνει χώρο στο κάτω μέρος του προτύπου και δεν φαίνεται ωραίο.
Πολλοί άνθρωποι πρέπει να έχουν προσπαθήσει να το αφαιρέσουν με την επίσκεψη στην επιλογή Edit HTML, αλλά δεν θα βρείτε το "Εγγραφή σε: Αναρτήσεις (Atom)" σε κανένα μέρος του προτύπου. Αυτό συμβαίνει επειδή δεν έχει συνταχθεί σαν ετικέτα href. Και ο blogger, συνέχεια αλλάζει τον σχεδιασμό του HTML, οπότε δεν ισχύουν οι παλιές αναρτήσεις που βρίσκετε....Ωστόσο, είναι πολύ εύκολο να το αφαιρέσετε....
Πριν ξεκινήσετε, κάντε ένα αντίγραφο ασφαλείας του προτύπου σας, ως μέτρο προφύλαξης. Κάντε κλικ στο Σχεδίαση και μετά στο Επεξεργασία HTML....Τώρα επιλέξτε Επέκταση προτύπων γραφικών στοιχείων. Μετά την επιλογή αυτή, ψάξτε για τη φράση (με ctrl F)

<b:include name='feedLinks'/>
...αφαιρέστε την, και πατήστε Προεπισκόπηση....αν ανοίξει το blog σας κανονικά και δεν υπάρχει αυτή η φράση, τότε πατήστε Αποθήκευση.....

ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!

{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}

Gif (Κινούμενη εικόνα) στο Blogger

Νέοι bloggers γεια σας !!! Ναι !!! ο θείος Blogger μισεί τα gif ...και για να γίνω πιο κατανοητός, το εξηγώ...ο θείος blogger, το "παρακλάδι" της google, αλλά και η μαμά google, μισούν τις κινούμενες εικόνες...Η ωραιότερη μορφή εικόνας, το gif, δεν έχει ακόμα συγκινήσει τον blogger, ώστε να μη παιδευόμαστε όλοι εμείς (τα εκατομμύρια) οι bloggers, και να "ανεβάζουμε" τις κινούμενες εικόνες μας κατ' ευθείαν από την ανάρτησή μας.....
Κατά καιρούς έγιναν κάποιες απόπειρες από τον blogger, αλλά (δεν γνωρίζω γιατί), ματαιώθηκαν μετά από λίγο καιρό...Αλήθεια τι φοβάται ο blogger, η μάλλον γιατί δεν ασχολείται (τεχνολογικά) ώστε να διορθώσει αυτό το βάσανο...Γιατί βάσανο είναι να πρέπει να ανεβάζουμε τα gif μας σε ένα host site εικόνων, και μετά να τα μεταφέρουμε στην κάθε ανάρτησή μας.....
Βέβαια, υπάρχει το piccasa ...ο χώρος που "ανεβαίνουν" όλες οι εικόνες μας που περιέχονται στα blog μας....αλλά η διαδικασία είναι χρονοβόρα !!! Ανεβάζουμε τα gif στο piccasa,... και μετά κάνουμε copy-paste τη διεύθυνση (url) για να φαίνονται κινούμενα στις αναρτήσεις μας...Γιατί αυτός είναι ο δρόμος που ακολουθούμε όλοι...και επειδή πολλοί νέοι bloggers δεν το γνωρίζουν, τώρα σας το είπα έμμεσα...
Κάθε blog μας, έχει το χώρο του να φιλοξενεί τις εικόνες μας στο piccasa (ιδιοκτησίας google) !!!Οπότε, ψάξε νέε blogger να βρεις τη διεύθυνση της φιλοξενίας των εικόνων της σελίδας σου, και να "ανεβάζεις" τις κινούμενες εικόνες σου εκεί...https://picasaweb.google.com/home
***Σας συστήνω να χρησιμοποιείτε το picassa και όχι άλλες host σελίδες όπως πχ το photobucket...
σας δίνει πολύ μεγάλο χώρο αποθήκευσης, και δεν πρόκειται ποτέ να σβηστούν η αποκλειστούν οι αγαπημένες σας εικόνες, ακόμα κι αν κλείσει το blog σας!!!Και πάντα Δωρεάν...
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}

Gif (Κινούμενη εικόνα) στο Blogger

Παρουσίαση Σελιδων Online Help

Νέοι bloggers γεια σας...Σήμερα είπα να μην δώσω κάποιον κώδικα, αλλά κάτι πιο χρήσιμο για νέους bloggers...σελίδες για βοήθεια σε ώρα ανάγκης...Και ξεκινάω αμέσως...
1η. Η σελίδα αυτή βρίσκεται μέσα στο dr-blogger...δείτε εδώ http://www.dr-blogger.com/p/blogger-page-navigation-widget.html πως μπορείτε να φτιάξετε το κώδικα για αρίθμηση την σελίδων σας...αφορμή γι αυτή τη σελίδα, στάθηκε το email φίλου, που δεν μπορούσε να βάλει στο blog του, την ήδη υπάρχουσα ανάρτηση για έναν κώδικα για αρίθμηση των σελίδων του....με αυτό το widget τα κατάφερε...το script που έβαλα, είναι του φοβερού Abu-farhan (κώδικες του οποίου έχω δώσει ήδη)...η διαδικασία είναι απλή και μέσα σε 20'' μπορείτε να βάλετε το κώδικα που θα διαλέξετε (από μια μεγάλη ποικιλία από εμφανίσεις) και θα βάλετε στο blog σας....
2η. Η δεύτερη σελίδα που προτείνω είναι η www.getfavicon.org/ ....Εδώ μπορείτε να πάρετε οποιοδήποτε favicon από άλλο ιστολόγιο, και να το χρησιμοποιήσετε, όπως εσείς θέλετε (ακόμα και να το βάλετε σαν favicon στο blog σας...αρκεί να μην είναι της ίδιας κατηγορίας ιστολογίου, η διάσημο, κατοχυρωμένο εικονίδιο, και βρείτε το μπελά σας)...απλά βάζετε τη διεύθυνση-url της σελίδας που είδατε αυτό το favicon που θέλετε, και να πατήσετε το κουμπί "get favicon"....
3η. Η τρίτη σελίδα, που σας προτείνω, σας δίνει μια φωτογραφία του email σας....είναι η services.nexodyne.com/email/
δείτε μερικά....

(βέβαια τα μίκρυνα λίγο, για να μη πιάνουν πολύ χώρο).....και τι θα τα κάνετε???? βάζοντας ένα λίνκ σε μία εικόνα από αυτές, μπορείτε να δίνετε το email σας στους επισκέπτες σας !!!! Πως ;;;;

δείτε τον κώδικα:

</a> ......ευκολάκι, και χαριτωμένο.....
πατώντας επάνω σε αυτή την όμορφη και λειτουργική εικόνα, θα δίνετε το email σας...
4η. Αλλη μία σελίδα μέσα στο dr-blogger που έφτιαξα, για να παίρνετε το κώδικα από όποιο χρώμα θέλετε, + τα παρόμοια που ταιριάζουν σε αυτό το χρώμα....δείτε εδώ http://www.dr-blogger.com/p/blog-page.html ...Σίγουρα υπάρχουν πολλές τέτοιες σελίδες στο internet, αλλά αυτή τη έχετε πρόχειρη στο μενού ψηλά στο dr-blogger και μπορείτε πολύ εύκολα να και γρήγορα να βρείτε το κώδικα ενός χρώματος....
5η. Και μιας και λέμε για σελίδες του dr-blogger, να σας συστήσω άλλη μία σελίδα με widget που έβαλα πρόσφατα, την "Facebook Share Count Button Code Generator"...δηλαδή, μία γεννήτρια δημιουργίας εικόνας για μοίρασμα στο facebook...εύκολη και απλή στη χρήση...
Αυτά για την ώρα !!! Λίγα και καλά....αλλά και χρήσιμα !!!
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}

Παρουσίαση Σελιδων Online Help

δείτε τον κώδικα:

Dancing Links / Κινούμενα Λινκ

Νέοι bloggers γεια σας !!!Υπάρχει τρόπος να κάνουμε τα links και τις εικόνες στο blog μας να κινούνται όταν περνάμε από πάνω τους το ποντίκι μας...Σήμερα θα σας δώσω τον κώδικα για να κάνετε τα links στο ιστολόγιο σας να κινούνται όταν περνάτε το ποντίκι σας από πάνω τους !!!Δείτε την εικόνα, και το παράδειγμα εδώ....
Demo link No 1
Demo link No 2

Βρείτε τη φράση </head> (με ctrl F) όπως δείχνει στην εικόνα:

και ΠΑΝΩ από αυτή, βάλτε τον κώδικα:

</script>

var dur = 400; // Duration Of Animation in Milli Seconds

$(document).ready(function() {

$('a.linknudge').hover(function() {

$(this).animate({

paddingLeft: '25px'

}, dur);

}, function() {

$(this).animate({

paddingLeft: 0

}, dur);

});

}); // end of Jquery Script

</script>

Πατήστε SAVE / ΑΠΟΘΗΚΕΥΣΗ.....

Τώρα όποτε βάζετε ένα link, θα προσθέτετε τη φράση class='linknudge' για να λειτουργήσει η κίνηση...(αν δεν τη βάλετε δεν θα κινείται)...δηλαδή, ......παράδειγμα:

<a class='linknudge' href='http://www.blogger.com/'>Dr-Blogger</a>

***η κόκκινη φράση είναι που θα κινεί το link
***τη μπλε φράση, αλλάξτε τη με το δικό σας link.....
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!!(ότι απορία σας, στείλτε τη με email η σχόλιο!!!!
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}

Dancing Links / Κινούμενα Λινκ

και ΠΑΝΩ από αυτή, βάλτε τον κώδικα:

</script>

var dur = 400; // Duration Of Animation in Milli Seconds

$(document).ready(function() {

$('a.linknudge').hover(function() {

$(this).animate({

paddingLeft: '25px'

}, dur);

}, function() {

$(this).animate({

paddingLeft: 0

}, dur);

});

}); // end of Jquery Script

</script>

Πατήστε SAVE / ΑΠΟΘΗΚΕΥΣΗ.....

<a class='linknudge' href='http://www.blogger.com/'>Dr-Blogger</a>

Περί CSS, και ένα Vertical Hover Menu

Νέοι bloggers γεια σας !!!Η σημερινή ανάρτηση είναι διπλή...Θα σας πω 2-3 πράγματα για το κώδικα css, και μετά σας δίνω το κώδικα από ένα κάθετο, αναπτυσσόμενο μενού !!!Είναι αυτό που βλέπετε δίπλα στη φωτογραφία ....
Πρώτα όμως θα σας δώσω 2-3 tips για τους κώδικες css...
1...ένας κώδικας css μπαίνει πάντα ΠΑΝΩ/ΠΡΙΝ από τη φράση </head> (το κλείσιμο του <head>....), η ΠΑΝΩ/ΠΡΙΝ τη φράση
]]></b:skin>
2...ένας κώδικας css ξεκινά συνήθως και πάντα με τη λέξη <style> και τελειώνει με τη λέξη </style>.(όταν τον βάζουμε αναλυτικά σαν gadget : HTML/Javascript)+(εκφράζει πάντα τη σχεδίαση-εμφάνιση ενός gadget η widget η και της σελίδας ολόκληρης).
3...πολλές φορές μπορείτε να ενώσετε όλα τα μέρη του κώδικα (css-js-div) που σας δίνω από ένα μενού, και να τα βάλετε σαν gadget => HTML/JavaScript ...μπορεί όμως να "συγκρουστούν" 2 κώδικες css, και να αλλάξει η εμφάνιση του ενός script...σε αυτή τη περίπτωση, καλό είναι να βγάλετε τον ένα κώδικα από το blog σας...βέβαια όσοι ξέρουν μπορούν να τον αλλάξουν και να διαφοροποιήσουν την εμφάνιση του ενός κώδικα...αυτό κάνω πολλές φορές όταν σε μία σελίδα με πολλά demo, συγκρούονται οι κώδικες css..!!!!
4...ένας κώδικας css, μπορεί να μπει στο HTML του blog σας, αναλυτικά, η να τον "ανεβάσουμε" σε μια "host" σελίδα δική μας, και να βάλουμε στο blog μας , μόνο τη διεύθυνση url του...(αυτό το κάνουμε όταν ο κώδικας css είναι πολύ μεγάλος...)
5...όταν έχουμε στο blog μας πολλούς κώδικες css (μέσα στο HTML), καλό είναι να τους ξεχωρίζουμε !!!Πως; γράφουμε στην αρχή και στο τέλος (που αρχίζει και που τελειώνει) κάποιες φράσεις που δείχνουν τις ιδιότητές του ...πχ  η 
Οτι γράφουμε ανάμεσα στη φράση , δεν εμφανίζεται στη σελίδα μας (μένει αθέατο στην εμφάνιση του blog μας)....
Αυτά τα πολύ σημαντικά πράγματα, καλό είναι να τα έχετε πρόχειρα κάπου, μήπως σας χρειαστούν...

Να λοιπόν και ο κώδικας που σας δίνω, για να έχετε ένα όμορφο και πρακτικό μενού σε μια πλαϊνή στήλη....
Ο ΚΩΔΙΚΑΣ CSS: (Αν το βάλετε πάνω από τη φράση ]]></b:skin> τότε σβήστε τις φράσεις <style> και </style>)
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color: none;
}
#container {
margin: auto;
width: 490px;
}
#header {
background-image: url();
background-repeat: no-repeat;
height: 42px;
width: 490px;
margin-bottom: 20px;
}
#button {
height: 32px;
width: 284px;
margin: auto;
}
ul, li {
margin:0;
padding:0;
list-style:none;
}
.menu_class {
border:1px solid #1c1c1c;
margin-bottom: -4px;
}
.the_menu {
display:none;
width:184px;
border: 1px solid #1c1c1c;
}
.the_menu li {
background-color: #302f2f;
}
.the_menu li a {
color:#FFFFFF;
text-decoration:none;
padding:10px;
display:block;
}
.the_menu li a:hover {
padding:10px;
font-weight:bold;
color: #F00880;
}
</style>

ΧΡΕΙΑΖΕΤΑΙ ΚΑΙ ΤΑ 2 .JS: (τα βάζετε ακριβώς ΠΑΝΩ/ΠΡΙΝ τη φράση: </head>

<script type="text/javascript" src="http://www.hv-designs.co.uk/tutorials/sliding_menu/js/jquery.js"></script>
<script type="text/javascript" src="http://www.hv-designs.co.uk/tutorials/sliding_menu/js/slider.js"></script>

Και το div , που το βάζετε σαν gadget => HTML/JavaScript ...

<div id="button">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI-7rHHMF4OKBPbYbORyunLCREDTY4ANwNbBlwQbkynfz2wQHPVfWQI63AcZy8GCxXoQ-XoWu8i2FwQtMOlnN5wtm5HfR2sDfui8UV07HBWBkc9-L_lOsRMO0vtmXVg6tSaL5z_Fa3x46v/s184/OPEN-CLOSE.png" width="184" height="32" border="0" class="menu_class">
<ul class="the_menu" style="display: none; ">
<li><a href="#">A Website #1</a></li>
<li><a href="#">A Website #2</a></li>
<li><a href="#">A Link #1</a></li>
<li><a href="#">A Link #2</a></li>
<li><a href="#">A Website #3</a></li>
<li><a href="#">A Website #4</a></li>
<li><a href="#">A Link #3</a></li>
<li><a href="#">A Link #4</a></li>
</ul>
</div>

(βάλτε όλα τα μέρη του κώδικα στο demo-blog μου http://demobloghtml.blogspot.com/ και δοκιμάστε το, να δείτε πως φαίνεται)
***όπου # θα βάλετε τη διεύθυνση - url
*** όπου A Link #1 η A Website #3 θα βάλετε την ονομασία του λινκ
***φυσικά το μενού αναπτύσσεται όταν πατήσετε στην εικόνα η βελάκι στη κορυφή του μενού
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!(αν κολλήσετε κάπου, στείλτε email η σχόλιο)
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}

Περί CSS, και ένα Vertical Hover Menu

Νέοι bloggers γεια σας !!!Η σημερινή ανάρτηση είναι διπλή...Θα σας πω 2-3 πράγματα για το κώδικα css, και μετά σας δίνω το κώδικα από ένα κάθετο, αναπτυσσόμενο μενού !!!Είναι αυτό που βλέπετε δίπλα στη φωτογραφία ....
Πρώτα όμως θα σας δώσω 2-3 tips για τους κώδικες css...
1...ένας κώδικας css μπαίνει πάντα ΠΑΝΩ/ΠΡΙΝ από τη φράση </head> (το κλείσιμο του <head>....), η ΠΑΝΩ/ΠΡΙΝ τη φράση
]]></b:skin>
2...ένας κώδικας css ξεκινά συνήθως και πάντα με τη λέξη <style> και τελειώνει με τη λέξη </style>.(όταν τον βάζουμε αναλυτικά πάνω από το </head>)+(εκφράζει πάντα τη σχεδίαση-εμφάνιση ενός gadget η widget).
3...πολλές φορές μπορείτε να ενώσετε όλα τα μέρη του κώδικα (css-js-div) που σας δίνω από ένα μενού, και να τα βάλετε σαν gadget => HTML/JavaScript ...μπορεί όμως να "συγκρουστούν" 2 κώδικες css, και να αλλάξει η εμφάνιση του ενός script...σε αυτή τη περίπτωση, καλό είναι να βγάλετε τον ένα κώδικα από το blog σας...βέβαια όσοι ξέρουν μπορούν να τον αλλάξουν και να διαφοροποιήσουν την εμφάνιση του ενός κώδικα...αυτό κάνω πολλές φορές όταν σε μία σελίδα με πολλά demo, συγκρούονται οι κώδικες css..!!!!
4...ένας κώδικας css, μπορεί να μπει στο HTML του blog σας, αναλυτικά, η να τον "ανεβάσουμε" σε μια "host" σελίδα δική μας, και να βάλουμε στο blog μας , μόνο τη διεύθυνση url του...(αυτό το κάνουμε όταν ο κώδικας css είναι πολύ μεγάλος...)
5...όταν έχουμε στο blog μας πολλούς κώδικες css (μέσα στο HTML), καλό είναι να τους ξεχωρίζουμε !!!Πως; γράφουμε στην αρχή και στο τέλος (που αρχίζει και που τελειώνει) κάποιες φράσεις που δείχνουν τις ιδιότητές του ...πχ  η 
Οτι γράφουμε ανάμεσα στη φράση , δεν εμφανίζεται στη σελίδα μας (μένει αθέατο στην εμφάνιση του blog μας)....
Αυτά τα πολύ σημαντικά πράγματα, καλό είναι να τα έχετε πρόχειρα κάπου, μήπως σας χρειαστούν...

Να λοιπόν και ο κώδικας που σας δίνω, για να έχετε ένα όμορφο και πρακτικό μενού σε μια πλαϊνή στήλη....
Ο ΚΩΔΙΚΑΣ CSS:
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color: none;
}
#container {
margin: auto;
width: 490px;
}
#header {
background-image: url();
background-repeat: no-repeat;
height: 42px;
width: 490px;
margin-bottom: 20px;
}
#button {
height: 32px;
width: 284px;
margin: auto;
}
ul, li {
margin:0;
padding:0;
list-style:none;
}
.menu_class {
border:1px solid #1c1c1c;
margin-bottom: -4px;
}
.the_menu {
display:none;
width:184px;
border: 1px solid #1c1c1c;
}
.the_menu li {
background-color: #302f2f;
}
.the_menu li a {
color:#FFFFFF;
text-decoration:none;
padding:10px;
display:block;
}
.the_menu li a:hover {
padding:10px;
font-weight:bold;
color: #F00880;
}
</style>

Συρόμενο gadget για ετικέτες...

Φίλοι bloggers γεια σας !!!Λόγω επαγγελματικών υποχρεώσεων αραίωσα λίγο τις αναρτήσεις μου, αλλά δεν σταμάτησα να βρίσκω διάφορα και ενδιαφέροντα θέματα για τα blogs μας...βρήκα λοιπόν ένα gadget συρόμενο, που παρουσιάζει 5 ετικέτες από το blog σας, με εικόνα, και μικρό κείμενο, όποιες θέλετε εσείς...έφτιαξα και demo...
DEMO

Ο ΚΩΔΙΚΑΣ:

<style>
/*HOROSCOOP*/ .horoscoop { width:100px; height:400px; position:absolute; left:0px; top:30px; } .horoscoop .contenu { width:332px; height:361px; position:absolute; top:50px; left:-588px; z-index:10; padding-top:28px; padding-bottom:28px; padding-left:17px; padding-right:17px;} .horoscoop .contenu .border-contenu { width:383px; height:517px; position:absolute; background:black; top:0px; left:0px; z-index:5; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px;} .horoscoop .contenu .incontenu { width:352px; height:461px; position:relative; background:white; opacity:1; z-index:6;} .horoscoop .trigger { width:60px; height:324px; position:relative; float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoIvwWCNTGwvJaWqQHuTmvi8CpyYDlVE58LNNWbXVv-fYIs-bv3FFlcQZ5nZ2UE-cLv8hMkK1RPt4UHkKanCec7IllxfpvrnIc3DyZRrHI28bNFN8WbFjdV7SAWjkwfA1__h3cXsm6AVpv/s324/open%252520arrow.png) no-repeat center; cursor:pointer; z-index:11;} .horoscoop .contenu .footer { position:absolute; bottom:-23px; margin-left:50%; width:300px; left:-150px; text-align:center; color:white; font-size:15px;} .horoscoop .contenu .content { position:absolute; width:322px; height:180px; padding-left:30px; cursor:pointer;} .horoscoop .contenu .separation { position:absolute; width:332px; height:5px; top:180px; font-size:12px; } .horoscoop .contenu #horoscoop_0 {top:8px;} .horoscoop .contenu #horoscoop_1{ top:100px;} .horoscoop .contenu #horoscoop_2{top:192px;} .horoscoop .contenu #horoscoop_3{ top:284px;} .horoscoop .contenu #horoscoop_4 { top:376px;} .horoscoop .contenu .content .title { position:relative; display:block; width:100%; text-align:left; font-size:14px; top:5px; margin-left:10px; font-weight:bold; margin-bottom:5px;} .horoscoop .contenu .content .logo { position:relative; float:left; width:109px; height:112px; margin-top:4px;} .horoscoop .contenu .content .catcher { position:relative; margin-left:10px; width:238px; float:left; font-size:13px; line-height:17px} .horoscoop .contenu .content .plus { clear: left; float: left; font-size: 12px; font-weight: bold; position: relative; right: 10px; text-align: right; width: 100%;} .opacity_8 { opacity:0.8; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); }
</style>

<script type="text/javascript" src="http://www.horoscope.fr/js/jquery-1.4.4.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$('.horoscoop .trigger').click(function(e){
if($('.horoscoop .contenu').hasClass('open')) $('.horoscoop .contenu').removeClass('open').stop().animate({left:'-588px'},800,function(){$('.horoscoop .trigger').css('background','url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoIvwWCNTGwvJaWqQHuTmvi8CpyYDlVE58LNNWbXVv-fYIs-bv3FFlcQZ5nZ2UE-cLv8hMkK1RPt4UHkKanCec7IllxfpvrnIc3DyZRrHI28bNFN8WbFjdV7SAWjkwfA1__h3cXsm6AVpv/s324/open%252520arrow.png)');});
else $('.horoscoop .contenu').addClass('open').stop().animate({left:'30px'},800,function(){$('.horoscoop .trigger').css('background','url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9jJOUfyleUdlR7zbmTTsPaFXogjxPNOm9PkQAXP3OYD-Bg0G4XfsoqYRIZGRZQ4rDMCldSmL_B0ZnG7cWQ5b8gA3uKkLCoDTw-e75Gi3vq8GbB0h2C_SvndPj3MwQRe2oitGcCBW6HMkK/s324/close%252520arrow.png)');});
}) ;
});
</script>

<div class="horoscoop">
<div class="trigger" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoIvwWCNTGwvJaWqQHuTmvi8CpyYDlVE58LNNWbXVv-fYIs-bv3FFlcQZ5nZ2UE-cLv8hMkK1RPt4UHkKanCec7IllxfpvrnIc3DyZRrHI28bNFN8WbFjdV7SAWjkwfA1__h3cXsm6AVpv/s324/open%252520arrow.png); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; background-position: initial initial; background-repeat: initial initial; "></div>
<div class="contenu round_10" style="left: -588px; ">
<div class="border-contenu opacity_8"></div>
<div class="incontenu round_10">
<a href="ΔΙΕΥΘΥΝΣΗ ΛΙΝΚ 1" target="_parent">
<div class="content" id="horoscoop_0">
<div style="float:left;">
<img style="width:60px; height:63px; border:solid 1px #996" src="image1" class="logo">
</div>
<div style="float:left; margin-top:4px;">
<span class="title">title 1</span>
<span class="catcher">demo1</span>
</div>
</div>
</a>
<a href="ΔΙΕΥΘΥΝΣΗ ΛΙΝΚ 2" target="_parent">
<div class="content" id="horoscoop_1">
<div style="float:left;">
<img style="width:60px; height:63px; border:solid 1px #996" src="image 2" class="logo">
</div>
<div style="float:left; margin-top:4px;">
<span class="title">title 2</span>
<span class="catcher">demo 2</span>
</div>
</div>
</a>
<a href="ΔΙΕΥΘΥΝΣΗ ΛΙΝΚ 3" target="_parent">
<div class="content" id="horoscoop_2">
<div style="float:left;">
<img style="width:60px; height:63px; border:solid 1px #996" src="image 3" class="logo">
</div>
<div style="float:left; margin-top:4px;">
<span class="title">title3</span>
<span class="catcher">demo3</span>
</div>
</div>
</a>
<a href="ΔΙΕΥΘΥΝΣΗ ΛΙΝΚ 4" target="_parent">
<div class="content" id="horoscoop_3">
<div style="float:left;">
<img style="width:60px; height:63px; border:solid 1px #996" src="image 4" class="logo">
</div>
<div style="float:left; margin-top:4px;">
<span class="title">title4</span>
<span class="catcher">demo4</span>
</div>
</div>
</a>
<a href="ΔΙΕΥΘΥΝΣΗ ΛΙΝΚ 5" target="_parent">
<div class="content" id="horoscoop_4">
<div style="float:left;">
<img style="width:60px; height:63px; border:solid 1px #996" src="image5" class="logo">
</div>
<div style="float:left; margin-top:4px;">
<span class="title">title5</span>
<span class="catcher">demo5</span>
</div>
</div>
</a>
<span class="footer">down title</span>
</div>
</div>
</div>

*** το -588 είναι το πόσο αριστερά πηγαίνει το πλαίσιο (αν χρησιμοποιείτε ευρεία οθόνη)
***αλλάξτε τα χρωματιστά σημεία με τα αντίστοιχα δικά σας (εικόνα, λινκ, τίτλος, κείμενο)
*** το down title είναι ο τίτλος που βάζω στο κάτω μαύρο μέρος του συρόμενου...
***ότι απορίες έχετε γράψτε τις στα σχόλια, να σας τις εξηγήσω...(η σε email)
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!! (Πηγή δεν έχω, αλλά μπορείτε να θεωρήσετε πηγή τη διεύθυνση στο μέσα στο .js )
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}