Blogger Tips – Tricks – Gadgets – Templates – Hacks

Οριζόντιο blogger menu -ΜΕ υποκαρτέλες- κάτω από τον τίτλο για προσθήκη συνδέσμων (3)



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Είναι μια μπάρα-μενού ΜΕ ΥΠΟΚΑΡΤΕΛΕΣ που την εγκαθιστάμε κάτω από τον τίτλο του blog μας και βάζουμε σε αυτή, links από αναρτήσεις μας, ετικέτες μας και ότι άλλο θέλουμε.


Θα φαίνεται κάπως έτσι:



Ακολουθήστε τα παρακάτω βήματα για να την βάλετε κι εσείς:



1. Σύνδεση στον blogger λογαριασμό μας από το blogger.com

2. Πανόπτης> Σχεδίαση> Επεξεργασία html

3. Με το ctrl+F βρείτε το </head>

4. Πάνω από αυτό επικολλήστε το παρακάτω:


<style type=’text/css’>

#catmenucontainer{

height:29px;

background:url(http://i47.tinypic.com/23gy3yp.jpg) repeat-x;

display:block;

padding:0px 0 0px 0px;

font: 14px "Century gothic",verdana, Arial, sans-serif;

font-weight:normal;

border-top:1px solid #686D6F;

}



#catmenu ,#catmenu ul {

margin: 0px 5px;

padding: 0px;

list-style: none;

height:29px;

}



#catmenu a {

color: #999;

display: block;

font-weight: normal;

padding: 4px 10px 6px 10px;

}



#catmenu a:hover {

background:url(http://i50.tinypic.com/2il0gt5.jpg) repeat-x;

color: #fff;

display: block;

text-decoration: none;

}



#catmenu li {

float: left;

margin: 0px;

padding: 0px;

}



#catmenu li li {

float: left;

margin: 0px 0px 0px 0px;

padding: 0px;

width: 130px;

}



#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {

background:url(http://i47.tinypic.com/23gy3yp.jpg) repeat-x;

width: 150px;

float: none;

margin: 0px;

padding: 4px 10px 5px 10px;

color:#E8EBEE;

border-bottom:1px solid #2C3133;

}



#catmenu li li a:hover, #catmenu li li a:active {

background:url(http://i50.tinypic.com/2il0gt5.jpg) repeat-x;

width: 150px;

float: none;

margin: 0px;

padding: 4px 10px 5px 10px;

color:#fff;

border-bottom:1px solid #2C3133;

}



#catmenu li ul {

position: absolute;

width: 10em;

left: -999em;

z-index:1;

}



#catmenu li:hover ul {

left: auto;

display: block;

}



#catmenu li:hover ul, #catmenu li.sfhover ul {

left: auto;

}

</style>



5. Αποθηκεύουμε το πρότυπό μας

6. Σχεδίαση> Στοιχεία Σελίδας> Προσθήκη gadget> HTML/JavaScript

7. Βάλτε τον παρακάτω κωδικό:


<div id=’catmenucontainer’>



<div id=’catmenu’>



<ul>



<li><a href=’#‘ title=’#’>Home</a></li>



<li><a href=’#‘ title=’#’>Tab 1</a>

<ul class=’children’>

<li><a href=’#‘ title=’#’>1</a></li>

<li><a href=’#‘ title=’#’>2</a></li>

<li><a href=’#‘ title=’#’>3</a></li>

</ul>

</li>



<li><a href=’#‘ title=’#’>Tab 2</a>

<ul class=’children’>

<li><a href=’#‘ title=’#’>1</a></li>

<li><a href=’#‘ title=’#’>2</a></li>

<li><a href=’#‘ title=’#’>3</a></li>

<li><a href=’#‘ title=’#’>4</a></li>

</ul>

</li>





<li><a href=’#‘ title=’#’>About</a></li>



<li><a href=’#‘ title=’#’>Contact</a></li>





</ul>



</div>



Όπου το # βάζετε το link σας και από δίπλα βάζετε το όνομα του link.



Προσέξτε τον χρωματισμό που σας έχω κάνει για να καταλάβετε καλύτερα!



8. Αποθήκευση κι είστε έτοιμοι!



Θα ακολουθήσουν κι άλλα σχέδια.

Τα σχόλιά σας, πάντα ευπρόσδεκτα!


Copyrights: /




Ετικέτες (Προσθήκη, Επεξεργασία ή Διαγραφή) στις Αναρτήσεις σας – Add, Edit or Delete Labels (or categories,tags) In Blogger Posts



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Η κατηγοριοποίηση των αναρτήσεών μας είναι μία από τις σημαντικότερες λειτουργίες του Blogger.

Με τις θεματικές ενότητες (ετικέτες, κατηγορίες, φάκελοι, labels, categories, tags) βοηθάμε και τους επισκέπτες μας να βρουν γρήγορα το κομμάτι του blog μας που τους ενδιαφέρει, αλλά και τον εαυτό μας, αν θελήσουμε στο μέλλον να βρούμε γρήγορα μια παλιά μας ανάρτηση.

Σε όλες τις εποχές ο άνθρωπος για να απλουστεύσει την καθημερινότητά του, προσπαθούσε να κατηγοριοποιήσει τα πράγματα γύρω του και να τα βάλει σε μια Τάξη. Γιατί αλλιώς επέρχεται ένα Χάος.

Σε σχεδόν όλες τις σελίδες στον ιστό, οι χιλιάδες πληροφορίες είναι ταξινομημένες σε θεματικές ενότητες. Και ειδικά στις μεγάλες ιστοσελίδες, που έχουν εκατομμύρια πληροφορίες για κάθε τι. Προσπαθήστε να φανταστείτε την Wikipedia, χωρίς να είχε ταξινομήσει τα άρθρα της σε κατηγορίες.

Δεν θέλω να καταντήσω σχολαστικός (όλοι πιστεύω καταλάβατε τη σημαντικότητα της κατηγοριοποίησης), για αυτό πάμε να σας εξηγήσω πως μπορείτε να προσθέσετε ετικέτες στις αναρτήσεις σας, πως μπορείτε να διαγράψετε ή να αντικαταστήσετε τις ετικέτες σας και γενικώς πως θα τις επεξεργάζεστε.




ΠΩΣ ΕΠΕΞΕΡΓΑΖΟΜΑΣΤΕ ΓΕΝΙΚΑ ΤΙΣ ΕΤΙΚΕΤΕΣ ΣΤΙΣ ΑΝΑΡΤΗΣΕΙΣ ΜΑΣ?



Η όλη δυνατή επεξεργασία, μπορεί να γίνει από την επεξεργασία αναρτήσεων (Πανόπτης>Ανάρτηση>Επεξεργασία Αναρτήσεων).

Από εδώ μπορούμε να δημιουργήσουμε, να διαγράψουμε ετικέτες και να κατατάξουμε τις αναρτήσεις μας στις ετικέτες μας.

Δεν υπάρχει περιορισμός ετικετών που μπορούμε γενικά ή και σε μια μόνο ανάρτηση.

Ωστόσο προτείνω οι ετικέτες μας να είναι όσο το δυνατόν πιο λίγες, γιατί αν έχουμε 500 αναρτήσεις και 200 ετικέτες, τότε χάνεται το νόημα των ετικετών νομίζω. Ούτε όμως να έχουμε 500 αναρτήσεις και 2 ετικέτες. Το ιδανικό είναι, πιστεύω, στις 500 αναρτήσεις να έχουμε περίπου 50 ετικέτες, δηλαδή 1 προς 10, αλλά αυτό ΔΕΝ είναι σε καμία περίπτωση απόλυτο, γιατί εξαρτάται και από την θεματολογία του blog.




ΠΩΣ ΒΑΖΟΥΜΕ ΕΤΙΚΕΤΕΣ ΣΤΙΣ ΑΝΑΡΤΗΣΕΙΣ ΜΑΣ?


Εικόνα 1



Την ώρα που γράφουμε μια νέα ανάρτηση -πριν την δημοσιεύσουμε (ή και μετά)– μπορούμε να την φακελοποιήσουμε με νέες ή ήδη υπάρχουσες αναρτήσεις. Το πως γίνεται αυτό περιγράφεται στις εικόνες (1) και (2).


Εικόνα 2


Εικόνα 3



Αλλιώς μπορούμε να δημιουργήσουμε μια νέα ετικέτα από την επεξεργασία αναρτήσεων, και πολύ γρήγορα να προσθέσουμε σε αυτήν πολλές αναρτήσεις μαζί. Αρχικά δημιουργούμε την ετικέτα, όπως περιγράφεται στην εικόνα (4). Μετά κάνουμε “τσεκ” στα κουτάκια των αναρτήσεων, που θέλουμε να βάλουμε στην ετικέτα που μόλις δημιουργήσαμε και μετά πάμε και πατάμε πάνω σε αυτήν την ετικέτα (εικόνα 3) ώστε να της προστεθούν οι αναρτήσεις που έχουμε τσεκάρει. Αυτός είναι και ο πιο φυσιολογικός τρόπος.


Εικόνα 4




ΠΩΣ ΔΙΑΓΡΑΦΟΥΜΕ ΕΤΙΚΕΤΕΣ ΣΤΙΣ ΑΝΑΡΤΗΣΕΙΣ ΜΑΣ?



Μπορούμε να διαγράψουμε τις ετικέτες από τις αναρτήσεις μόνο με έναν τρόπο.

Μπαίνοντας στην επεξεργασία κάθε ανάρτησης ξεχωριστά και αφαιρώντας από εκεί την ετικέτα που δεν θέλουμε.


Εικόνα 5



Ας πούμε ότι θέλουμε να διαγράψουμε π.χ. μια ετικέτα που τώρα έχει προστεθεί σε 50 αναρτήσεις. Τότε πρέπει να πάμε στην επεξεργασία αυτών των 50 αναρτήσεων ξεχωριστά και να αφαιρέσουμε την εν λόγω ετικέτα από την κάθε μία ανάρτηση. Αλλά αν έχουμε συνολικά 5000 αναρτήσεις πως θα βρούμε αυτές τις 50? Για αυτό προτείνω να κάνουμε αυτό που απεικονίζεται στην εικόνα (5): από την επεξεργασία αναρτήσεων να πατήσουμε πάνω στην ετικέτα που θέλουμε να διαγράψουμε, ώστε να μας εμφανίσει “μαζεμένες” τις 50 αναρτήσεις και να μην ψάχνουμε. Έτσι για περισσότερη ευκολία το λέω αυτό.




ΠΡΟΣΘΗΚΗ ΤΟΥ GADGET ΤΩΝ ΕΤΙΚΕΤΩΝ ΣΤΗ ΣΕΛΙΔΑ ΣΑΣ



Η προσθήκη του είναι πολύ εύκολη.

Από τον Πανόπτη μας, πάμε στη Σχεδίαση -ενώ βρισκόμαστε στα Στοιχεία Σελίδας- πατάμε Προσθήκη Gadget και βάζουμε το έκτο από το τέλος Gadget με τίτλο “Ετικέτες”.

Το ρυθμίζουμε ανάλογα με το πως θέλουμε να φαίνεται, το αποθηκεύουμε και μετά το βάζουμε στη θέση που θέλουμε να είναι μέσα στο blog.

Αυτό ήταν!





Πάνω-κάτω οι έμπειροι bloggers τα ξέρουν αυτά, αλλά έχω δεχτεί πολλά μαιλς από νέους blogger και όφειλα να γράψω αυτή την ανάρτηση.





Νομίζω έχω αναλύσει όλες τις πτυχές των ετικετών, αν παρολ’αυτά θέλετε κάτι ακόμα να ρωτήσετε ή κάτι να προσθέσετε που νομίζετε ότι λύπει, περιμένω τα σχόλιά σας.




Αν σας άρεσε η παραπάνω ανάρτηση “κρεμάστε” την στο wall του facebook σας, πατώντας το παρακάτω κουμπί. Ευχαριστώ!


Copyrights: http://www.bloggertips.gr/




Youtube Subscribe Widget – Subscribe Button



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Ένα πολύ απλό, αλλά και πολύ πρακτικό widget για το blog μας, μέσα από το οποίο μπορούμε να προβάλλουμε το κανάλι μας στο youtube και δίνουμε τη δυνατότητα στους επισκέπτες του blog μας να εγγράφονται σε αυτό.



Θα φαίνεται κάπως έτσι:







Πολύ απλά και εύκολα μπορείτε να το βάλετε κι εσείς, ακολουθώντας τα παρακάτω βήματα:



Σύνδεση> Πανόπτης> Σχεδίαση> Στοιχεία Σελίδας> Προσθήκη Gadget> HTML/JavaScript και εκεί επικολλούμε τον παρακάτω κωδικό:


<iframe src=http://www.youtube.com/subscribe_widget?p=johnpatrablog1 style=”overflow: hidden; height: 105px; width: 300px; border: 0;” scrolling=”no” frameBorder=”0″></iframe>



Αλλάξτε το johnpatrablog1 με το δικό σας youtube username σας.

Το δικό μου κανάλι π.χ. είναι το http://www.youtube.com/johnpatrablog1

(στείλτε μου πρόσκληση να γίνουμε φίλοι και θα δεχτώ ή αν γίνετε συνδρομητής στο κανάλι, θα γίνω και εγώ στο δικό σας!)



Μπορείτε επίσης να αλλάξετε το μέγεθος του widget αλλάζοντας αντίστοιχα τις αριθμητικές μεταβολές που έχω μαρκάρει με πράσινο.


Μην ξεχάσετε να αποθηκεύσετε και είστε έτοιμοι!


Copyrights: http://www.bloggertips.gr/




Οριζόντιο blogger menu -ΜΕ υποκαρτέλες- κάτω από τον τίτλο για προσθήκη συνδέσμων (2)



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Είναι μια μπάρα-μενού ΜΕ ΥΠΟΚΑΡΤΕΛΕΣ που την εγκαθιστάμε κάτω από τον τίτλο του blog μας και βάζουμε σε αυτή, links από αναρτήσεις μας, ετικέτες μας και ότι άλλο θέλουμε.



Θα φαίνεται κάπως έτσι:



Ακολουθήστε τα παρακάτω βήματα για να την βάλετε κι εσείς:



1. Σύνδεση στον blogger λογαριασμό μας από το blogger.com

2. Πανόπτης> Σχεδίαση> Επεξεργασία html

3. Με το ctrl+F βρείτε το </head>

4. Πάνω από αυτό επικολλήστε το παρακάτω:


<style type=’text/css’>

#foxmenucontainer{

height:29px;

background:url(http://i45.tinypic.com/rlw8qe.jpg) repeat-x;

display:block;

padding:0px 0 0px 0px;

border-top:1px solid #474747;

font: 14px "Century gothic",verdana, Arial, sans-serif;

font-weight:normal;

}



#menu ,#menu ul {

margin: 0px 5px;

padding: 0px;

list-style: none;

height:29px;

}



#menu a {

color: #B3DBEF;

display: block;

font-weight: normal;

padding: 4px 10px 6px 10px;

}



#menu a:hover {

background:url(http://i47.tinypic.com/20zxzdj.jpg) repeat-x;

color: #fff;

display: block;

text-decoration: none;

}



#menu li {

float: left;

margin: 0px 0 0px 0;

padding: 0px;

}



#menu li li {

float: left;

margin: px 0px 0px 5px;

padding: 0px;

width: 130px;

}



#menu li li a, #menu li li a:link, #menu li li a:visited {

background:url(http://i45.tinypic.com/rlw8qe.jpg) repeat-x;

width: 150px;

float: none;

margin: 0px;

padding: 4px 10px 5px 10px;

color:#fff;

}



#menu li li a:hover, #menu li li a:active {

background:url(http://i47.tinypic.com/20zxzdj.jpg) repeat-x;

width: 150px;

float: none;

margin: 0px;

padding: 4px 10px 5px 10px;

color:#06415F;

}



#menu li ul {

position: absolute;

width: 10em;

left: -999em;

z-index:1;

}



#menu li:hover ul {

left: auto;

display: block;

}



#menu li:hover ul, #menu li.sfhover ul {

left: auto;

}

</style>



5. Αποθηκεύουμε το πρότυπό μας

6. Σχεδίαση> Στοιχεία Σελίδας> Προσθήκη gadget> HTML/JavaScript

7. Βάλτε τον παρακάτω κωδικό:


<div id=”foxmenucontainer”>



<div id=”menu”>



<ul>



<li><a expr:href=”data:blog.homepageUrl”>Home</a></li>



<li><a href=”#” title=”#”>About</a></li>



<li><a href=”#” title=”#”>Tutorials</a>

<ul>

<li><a href=”#“>Blogger Tutorials</a></li>

<li><a href=”#“>HTML Tutorials</a></li>

<li><a href=”#“>JQuery Tutorials</a></li>

<li><a href=”#“>Blogger Tools</a></li>

<li><a href=”#“>Blogger Layouts</a></li>

<li><a href=”#“>Blogger Templates</a></li>

</ul>

</li>



<li><a href=”#” title=”#”>Contact</a></li>



</ul>



</div>



</div>



Όπου το # βάζετε το link σας και όπου About (και τα άλλα ονόματα) βάζετε το όνομα του link.



Προσέξτε τον χρωματισμό για να καταλάβετε καλύτερα!



8. Αποθήκευση κι είστε έτοιμοι!


Θα ακολουθήσουν κι άλλα σχέδια.


Τα σχόλιά σας, πάντα ευπρόσδεκτα!


Copyrights: /




Πρόβλημα Blogger Στις Παλαιότερες Αναρτήσεις: Εμφανίζονται ολόκληρες οι αναρτήσεις’ ΔΕΝ λειτουργεί το αυτόματο read more



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Αν χρησιμοποιείτε το αυτόματο read more, είναι πολύ πιθανόν να έχετε το εξής πρόβλημα τις τελευταίες ημέρες: Να εμφανίζονται ολόκληρες οι αναρτήσεις (και να μην κόβονται με το read more) στις παλαιότερες αναρτήσεις σας. Αυτό δε συμβαίνει στις αναρτήσεις της αρχικής σελίδας, αλλά στις επόμενες σελίδες. Μπορεί μάλιστα όταν κάποιος πατάει για να δει τις παλαιότερες αναρτήσεις να τον πετάει σε μια blogger page λέγοντας του αυτό: error bX-67oaj1



Για αυτό το πρόβλημα ευθύνεται αποκλειστικά και μόνο ο Blogger, ο οποίος έκανε κάποιες αναβαθμίσεις (updates) στο σύστημά του και προέκυψαν αυτές οι ανωμαλίες.



Αυτό το πρόβλημα έχει κωδικοποιηθεί ως error (=σφάλμα) bX-67oaj1 για αυτούς που θέλουν να το ψάξουν περισσότερο. Πιο συγκεκριμένα το πρόβλημα εμφανίζεται λόγω της ετικέτας <a class



Πως λοιπόν θα το λύσουμε? Για αυτό είμαι εγώ εδώ !!!



Ακολουθήστε τα παρακάτω βήματα:



1. Σύνδεση στον blogger account μας από το http://draft.blogger.com/home

2. Πανόπτης> Σχεδίαση> Επεξεργασία html> Επέκταση προτύπων γραφικών στοιχείων



(κάντε και μια “Λήψη πλήρους προτύπου” γιατί είναι λίγο μπερδεψιάρικο αυτό που θα κάνουμε παρακάτω, οπότε να έχουμε αντίγραφο του προτύπου μας)



3. Πάντα με τη βοήθεια του ctrl+F ψάχνουμε να βρούμε το <b:if cond=’data:newerPageUrl’> ή αν δεν το βρίσκει ψάχνουμε για το <div id=’main’>



4. Τώρα προσέξτε, γιατί ο τρόπος επίλυσης χωρίζεται σε δύο κατηγορίες:



i) Αν χρησιμοποιείτε για τις παλαιότερες αναρτήσεις σας εικόνα-σύνδεσμο (older posts image button):



Αντικαταστήστε τους παρακάτω κωδικούς:


<a class=’blog-pager-newer-link’ expr:href=’data:newerPageUrl’ expr:id=’data:widget.instanceId + "_blog-pager-newer-link"’ expr:title=’data:newerPageTitle’ target=’_blank’> <img src=’here goes the image url‘></a>

και


<a class=’blog-pager-older-link’ expr:href=’data:olderPageUrl’ expr:id=’data:widget.instanceId + "_blog-pager-older-link"’ expr:title=’data:olderPageTitle’> <img src=’here goes the image url‘> </a>

με τους παρακάτω:


<a expr:href=’data:newerPageUrl’ expr:title=’data:newerPageTitle’ id=’blog-pager-newer-link’><img src=’here goes the image url‘/></a>

και


<a expr:href=’data:olderPageUrl’ expr:title=’data:olderPageTitle’ id=’blog-pager-older-link’><img src=’here goes the image url‘/> </a>

Όπου λέει “here goes the image url” βάζετε το link-url της εικόνας που είχατε και πριν.



ii) Αν χρησιμοποιείτε για τις παλαιότερες αναρτήσεις σας απλό κείμενο (older posts text link):



Αντικαταστήστε τους παρακάτω κωδικούς:


<a class=’blog-pager-newer-link’ expr:href=’data:newerPageUrl’ expr:id=’data:widget.instanceId + "_blog-pager-newer-link"’ expr:title=’data:newerPageTitle’ target=’_blank’><data:newerPageTitle/></a>

και


<a class=’blog-pager-older-link’ expr:href=’data:olderPageUrl’ expr:id=’data:widget.instanceId + "_blog-pager-older-link"’ expr:title=’data:olderPageTitle’><data:olderPageTitle/></a>

με τους παρακάτω:


<a expr:href=’data:newerPageUrl’ expr:title=’data:newerPageTitle’ id=’blog-pager-newer-link’><data:newerPageTitle/></a>

και


<a expr:href=’data:olderPageUrl’ expr:title=’data:olderPageTitle’ id=’blog-pager-older-link’><data:olderPageTitle/></a>



5. Μια προεπισκόπηση και αποθήκευση!





Παρακαλώ, κάντε like στο facebook ΜΟΝΟ ΑΝ σας άρεσε αυτή η ανάρτηση.



Ευχαριστώ!


Copyrights: http://www.bloggertips.gr/




Μετατροπή Των Τίτλων Στις Sidebars Από Κεφαλαία Σε Μικρά



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Θα έχετε προσέξει ότι σε κάποια Τemplates ο τίτλος των gadgets που περνάτε στις Sidebars αναγράφεται με κεφαλαία γράμματα (Όπως και το δικό μου).

Αυτό μπορεί να σας ενοχλεί και να μην γνωρίζετε πως να το αλλάξετε σε μικρά. Ακολουθώντας τον παρακάτω οδηγό θα μπορέσετε να το πραγματοποιήσετε εύκολα και γρήγορα!



1. Σύνδεση στον λογαριασμό σας από το blogger.com

2. Πανόπτης>Σχεδίαση>Επεξεργασία html

3. Ψάξτε εκεί (πατώντας ctrl και f) τον κώδικα text-transform:uppercase; και διαγράψτε τον. Σε περίπτωση που υπάρχουν περισσότεροι από ένας τέτοιοι κώδικες, επιλέξτε αυτόν που βρίσκεται στο σημείο “Sidebar Content”.

Κάντε προεπισκόπηση για να δείτε αν είναι όλα καλά, αποθηκεύστε και όλοι οι τίτλοι θα αναγράφονται πλέων με μικρά γράμματα…



Ο φίλος konsoulito μας δίνει επίσης την παρακάτω χρήσιμη πληροφορία:



Μπορούν ακόμη στο σημείο με ctrl+f που ψάχνουν το text-transform:uppercase; να μη το διαγράψουν και να το μετατρέψουν σε text-transform:upperfirstcase; Αυτό θα κάνει έναν τίτλο να έχει κεφαλαίο το πρώτο γράμμα της πρότασης και όλα τα υπόλοιπα πεζά.



Πηγές: Φώτο, κείμενο και κωδικός αντεγραμμένα από αυτή την ανάρτηση εδώ από το http://www.freeware-tools.net/

Copyrights: /