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: http://bloggertips.gr/




Ετικέτες (Προσθήκη, Επεξεργασία ή Διαγραφή) στις Αναρτήσεις σας – 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: /




Οριζόντιο 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: http://bloggertips.gr/




Πως εμφανίζονται μόνο οι τίτλοι των αναρτήσεων στις Ετικέτες?



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Πως γίνεται να εμφανίζονται μόνο οι τίτλοι των αναρτήσεων όταν πατάω σε μια ετικέτα?

Είναι πολύ εύκολο να το βάλετε και διευκολύνει πολύ τους επισκέπτες σας.Πατήστε εσείς εδώ για να δείτε.Δεν είναι καλύτερα που εμφανίζονται μόνο οι τίτλοι και όχι και αυτά που γράφουν.Πάμε να σας δείξω πως θα το βάλετε.



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



1. Σύνδεση στον blogger account σας

2. Πανόπτης>Διάταξη>Επεξεργασία html

3. Τσέκαρε το τετραγωνάκι που λέει “Επέκταση προτύπων γραφικών στοιχείων”

4. Με τη βοήθεια του Ctrl + F βρες τους παρακάτω κώδικες:


<b:include data=’post’ name=’post’/>



5.Τώρα αντικατέστησε τον παραπάνω με τον παρακάτω κώδικα:



<b:if cond=’data:blog.homepageUrl

!= data:blog.url’>



<b:if cond=’data:blog.pageType != “item”‘>



<h3 class=’post-title’><a expr:href=’data:post.url’><data:post.title/></a></h3>



<b:else/>



<b:include data=’post’ name=’post’/>



</b:if>



<b:else/>



<b:include data=’post’ name=’post’/>



</b:if>



6. Κάντε προεπισκόπηση να δείτε αν θα σας το δεχτεί και αν σας το δεχτεί κάντε αποθήκευση.Αν όχι κάτι έχετε κάνει λάθος.



Τώρα πατήστε πάνω σε μια ετικέτα σας να δείτε το αποτέλεσμα.



Άφησέ μου ένα σχόλιο για να ξέρω αν σου βγήκε ή όχι.





ΑΝΑΔΗΜΟΣΙΕΥΣΗ ΑΠΟ 27-10-2009




Διέγραψε το “Εμφάνιση όλων των αναρτήσεων” από τις Ετικέτες



Print Friendly and PDFPrintPrint Friendly and PDFPDF




Όταν πατάτε πάνω σε μια ετικέτα(=label) δεν σας εμφανίζει ένα παραθυράκι που λέει “Εμφάνιση όλων των αναρτήσεων στην ετικέτα…”?

Όπως φαίνεται στη εικόνα.

Αν θέλετε να το διαγράψετε αυτό και να μην φαίνεται ακολουθήστε τα παρακάτω βήματα:



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

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

3. Βρες τους παρακάτω κώδικες:




<b:includable id=’status-message’>

<b:if cond=’data:navMessage’>

<div class=’status-msg-wrap’>

<div class=’status-msg-body’>

<data:navMessage/>

</div>

<div class=’status-msg-border’>

<div class=’status-msg-bg’>

<div class=’status-msg-hidden’><data:navMessage/></div>

</div>

</div>

</div>

<div style=’clear: both;’/>

</b:if>

</b:includable>





4. Αντικατέστησε τους παραπάνω κώδικες με τους παρακάτω:




<b:includable id=’status-message’>

<b:if cond=’data:navMessage’>

<div>

</div>

<div style=’clear: both;’/>

</b:if>

</b:includable>





5.Αποθηκεύστε το πρότυπό σας κι είστε έτοιμοι!





ΑΝΑΔΗΜΟΣΙΕΥΣΗ ΑΠΟ 27-10-2009




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



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Μου το έχετε ζητήσει πάρα πολλοί και δεν μπορούσα να σας αρνηθώ.

Πρόκειται για ένα ακόμη από τα βασικότερα blogger tips που δεν θα μπορούσε να έλειπε από το bloggertips.gr

Είναι μια μπάρα-μενού που την εγκαθιστάμε κάτω από τον τίτλο του blog μας και βάζουμε σε αυτή, links από αναρτήσεις μας, ετικέτες μας και ότι άλλο θέλουμε.



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




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



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

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

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

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


<!–MENU-11-STARTS-Widget-by-http://loneeagle110.blogspot.com+/–>

<style type=’text/css’>

.solidblockmenu{

margin: 0;

padding: 0;

float: left;

font: bold 13px Arial;

width: 100%;

overflow: hidden;

margin-bottom: 1em;

border: 1px solid #625e00;

border-width: 1px 0;

background: black url(http://i44.tinypic.com/333j255.jpg) center center repeat-x;

}



.solidblockmenu li{

display: inline;

}



.solidblockmenu li a{

float: left;

color: white;

padding: 9px 11px;

text-decoration: none;

border-right: 1px solid white;

}



.solidblockmenu li a:visited{

color: white;

}

.solidblockmenu li a:hover, .solidblockmenu li .current{

color: white;

background: transparent url(http://i40.tinypic.com/51wnm9.jpg) center center repeat-x;

}

</style>

<!–MENU-11-STOPS-Widget-by-http://loneeagle110.blogspot.com+/–>



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

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

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


<!–MENU-11-STARTS-Widget-by-http://loneeagle110.blogspot.com+/–>

<ul class=”solidblockmenu”>

<li><a href=”…your link…” class=”current”>Login</a></li>

<li><a href=”…your link…” >Home</a></li>

<li><a href=”…your link…”>tab 1</a></li>

<li><a href=”…your link…“>tab 2</a></li>

<li><a href=”…your link…”>tab 3</a></li>

<li><a href=”…your link…”>tab 4</a></li>

<li><a href=”…your link…”>tab 5</a></li>

<li><a href=”…your link…”>tab 6</a></li>

<li><a href=”…your link…”>Contact me</a></li>

<li><a href=”…your link…”>About</a></li>

</ul>

<!–MENU-11-STOPS-Widget-by-http://loneeagle110.blogspot.com+/–>



Όπου το  …your link…  βάζετε το link σας και όπου  tab 0  βάζετε το όνομα του link.



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



Αν προσέξατε στον τίτλο έχω το (1). Αυτό, όπως καταλαβαίνετε, σημαίνει ότι θα ακολουθήσουν κι άλλα σχέδια.



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


Πηγές: Εικόνα και κωδικοί από http://www.dynamicdrive.com/style/csslibrary/item/solid_block_menu/P150/
Copyrights: http://bloggertips.gr/




Rss Feed Ετικετών – Add Labels Rss Feed Link Button To All Your Blogger Labels



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Θέλετε να δώσετε τη δυνατότητα στους επισκέπτες σας να εγγράφονται σε συγεκριμένες ετικέτες που τους ενδιαφέρουν χωρίς να χρειάζεται να εγγράφονται σε όλο το site σας? Ναι αυτό μπορεί να γίνει, φτιάχνοντας μια ροή δεδομένων (rss feed) για κάθε ετικέτα σας. Αυτό το hack είναι πολύ χρήσιμο για blogs που έχουν πολύπλευρη θεματολογία.



Πάμε να δούμε πως θα το κάνουμε.



Καταρχίν πρέπει να έχετε στο blog σας, το gadget των ετικετών.

Αν δεν το έχετε βάλει, βάλτε το τώρα από Σχεδίαση>Προσθήκη gadget>Ετικέτες



Log in to your blogger account from http://draft.blogger.com/home (ΝΟ blogger.com)



Σχεδίαση (Διάταξη)



Επεξεργασία html



Επέκταση προτύπων γραφικών στοιχείων



Πάντα με ctrl+F ψάξτε για τους παρακάτω κωδικούς:


<b:loop values=’data:labels’ var=’label’>

<li>

<b:if cond=’data:blog.url == data:label.url’>

<span expr:dir=’data:blog.languageDirection’><data:label.name/></span>

<b:else/>

<a expr:dir=’data:blog.languageDirection’ expr:href=’data:label.url’><data:label.name/></a>

</b:if>

<span dir=’ltr’/>

</li>

</b:loop>



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


<b:loop values=’data:labels’ var=’label’>

<li>


<a expr:href=’data:blog.homepageUrl + "feeds/posts/default/-/" + data:label.name’><img alt=’Subscribe’ src=’http://www.feedburner.com/fb/images/pub/feed-icon16x16.png‘ style=’vertical-align:middle;border:0’/></a>



<b:if cond=’data:blog.url == data:label.url’>

<span expr:dir=’data:blog.languageDirection’><data:label.name/></span>

<b:else/>

<a expr:dir=’data:blog.languageDirection’ expr:href=’data:label.url’><data:label.name/></a>

</b:if>

<span dir=’ltr’/>

</li>

</b:loop>



Τώρα αριστερά κάθε ετικέτας έχουμε βάλει το εικονίδιο rss.

Αν θέλετε να μπει το εικονίδιο δεξιά αντί για αριστερά, αντικαταστήστε τους παρα-παραπάνω κωδικούς, με τους παρακάτω, αντί για τους παραπάνω.

(διαβάστε το πολλές φορές μην μπερδευτείτε’ χαχα)


<b:loop values=’data:labels’ var=’label’>

<li>

<b:if cond=’data:blog.url == data:label.url’>

<span expr:dir=’data:blog.languageDirection’><data:label.name/></span>

<b:else/>

<a expr:dir=’data:blog.languageDirection’ expr:href=’data:label.url’><data:label.name/></a>

</b:if>

<span dir=’ltr’/>


<a expr:href=’data:blog.homepageUrl + "feeds/posts/default/-/" + data:label.name’><img alt=’Subscribe’ src=’http://www.feedburner.com/fb/images/pub/feed-icon16x16.png‘ style=’vertical-align:middle;border:0’/></a>



</li>

</b:loop>



Επιλέξτε αν το θέλετε δεξιά ή αριστερά και βάλτε τους αντίστοιχους κωδικούς.

Σε κάθε περίπτωση αποθηκεύστε το πρότυπό σας, αφού τελειώσετε.



Ουσιαστικά εμείς έχουμε πάρει το κομμάτι κώδικα που αφορά τις ετικέτες και το έχουμε “χακάρει”, βάζοντας τους κόκκινους κωδικούς.



Έχουμε βάλει το κλασσικό πορτοκαλί εικονίδιο του rss σε διαστάσεις 16×16. Αν και δεν σας το προτείνω, αν θέλετε μπορείτε να το αλλάξετε.



Τώρα είναι πολύ πιο εύκολο για τους επισκέπτες σας να εγγραφτούν στην αγαπημένη τους ετικέτα στο blog σας.



Αφήστε κανένα σχόλιο με καμιά τυχον απορία ή ένα απλό οκ αν όλα πήγαν οκ.



Ανάρτηση στο fbw (FaceBook Wall) για όποιον το επιθυμεί με το πάτημα του παρακάτω κουμπιού:




Scroll Bar Widget For Blogger



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Καλησπέρα,

σήμερα θα σας δείξω μια πολύ καλή λειτουργία του html.
Αν έχετε πολλές ετικέτες ή οτιδήποτε άλλο με μια πολύ μακριά λίστα από λινκς (π.χ. άλλα μπλογκς) το σημερινό widget είναι η λύση.
Το scroll bar widget έχει ομοιότητες και με το Pull-Down Menu αλλά έχει κάποιες σημαντικές διαφορές.
Τις προάλλες μάλιστα κάποιος με είχε “πρήξει” (με την καλή έννοια πάντα) για το πως γίνεται αυτό που θα σας δείξω σήμερα ,αλλά εγώ τότε δεν ήξερα για να του πω.Μακάρι σήμερα να διαβάσει αυτή την ανάρτηση και να του λυθεί η απορία που είχε.

Λοιπόν πάμε Διάταξη και πατάνε προσθήκη gadget και κατόπιν επιλέγουμε το HTML/JavaScript.
Eκεί επικολλούμε τον παρακάτω κώδικα:


<div class=”widget-content”>
<ul style=”height:150px;width:150px; overflow:auto; “>

<li><a href=”http://www.blogaddress.com“>Your Text</a></li>
<li><a href=”http://www.blogaddress.com”>Your Text</a></li>
<li><a href=”http://www.blogaddress.com”>Your Text</a></li>
<li><a href=”http://www.blogaddress.com”>Your Text</a></li>
<li><a href=”http://www.blogaddress.com”>Your Text</a></li>
<li><a href=”http://www.blogaddress.com”>Your Text</a></li>
<li><a href=”http://www.blogaddress.com”>Your Text</a></li>
<li><a href=”http://www.blogaddress.com”>Your Text</a></li>
<li><a href=”http://www.blogaddress.com”>Your Text</a></li>
<li><a href=”http://www.blogaddress.com”>Your Text</a></li>
<li><a href=”http://www.blogaddress.com”>Your Text</a></li>
<li><a href=”http://www.blogaddress.com”>Your Text</a></li>
<li><a href=”http://www.blogaddress.com”>Your Text</a></li>
<li><a href=”http://www.blogaddress.com”>Your Text</a></li>
<li><a href=”http://www.blogaddress.com”>Your Text</a></li>
<li><a href=”http://www.blogaddress.com”>Your Text</a></li>
<li><a href=”http://www.blogaddress.com”>Your Text</a></li>
<li><a href=”http://www.blogaddress.com”>Your Text</a></li>
<li><a href=”http://www.blogaddress.com”>Your Text</a></li>
<li><a href=”http://www.blogaddress.com”>Your Text</a></li>
<li><a href=”http://www.blogaddress.com”>Your Text</a></li>
<li><a href=”http://www.blogaddress.com”>Your Text</a></li>
<li><a href=”http://www.blogaddress.com”>Your Text</a></li>
<li><a href=”http://www.blogaddress.com”>Your Text</a></li><span style=”font-weight:bold;”></span>

</ul></div>



Με κόκκινο σας έχω μαρκάρει το μέγεθος του widget.

Όπου λέει “http://www.blogaddress.com” βάζετε το δικό σας link και όπου λέει “Your Text” γράφετε το όνομα του λινκ.

Μπορείτε να προσθέσετε ή να αφαιρέσετε λινκς ,προσθέτοντας ή αφαιρώντας το <li><a href=”http://www.blogaddress.com”>Your Text</a></li>

Και αφού επεξεργαστείτε τον κώδικα μην ξεχάσετε να πατήστε αποθήκευση.

Καλή σας μέρα!
Johnpatra




All my Posts widget – Όλες σου οι αναρτήσεις σε μια ανάρτηση!



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Καταρχάς σας εύχομαι καλή χρονιά και χρόνια πολλά μιας κι αυτή είναι η πρώτη μου ανάρτηση για το 2010.Κάποιες υποχρεώσεις με κράτησαν μακριά αυτές τις πρώτες 15 ημέρες του 2010 αλλά να σήμερα 15 του Γενάρη που έμεινα πιστός στο ραντεβού που είχαμε δώσει και κατάφερα να ανεβάσω αυτό το ποστ.Να σας πω βέβαια ότι αυτές τις ημέρες δεν θα γράφω με την ίδια συχνότητα αναρτήσεις όπως παλιότερα.Θα προσπαθήσω να ανεβάζω μία την εβδομάδα.
Το σημερινό μας θέμα πιστεύω ότι είναι ένα θέμα που ενδιαφέρει όλους.Μου το έχουν ζητήσει και μερικοί από εσάς.Κοιτάξτε αυτήν μου την ανάρτηση:http://johnpatrablog.blogspot.com/2009/08/all-my-posts.html
Όπως είδατε είναι ένα widget που τοποθετείται μέσα σε μια ανάρτηση και δείχνει όλες τις αναρτήσεις του blog.Τις έχει κατατάξει με βάση την ετικέτα τους και στις 10 τελευταίες αναρτήσεις γράφει δίπλα την ένδειξη “New!”
Οι αναρτήσεις ανανεώνονται αυτόματα.Ουσιαστικά αυτό το widget θα είναι ένα πολύ χρήσιμο εργαλείο για τους επισκέπτες σας που θα βρίσκουν γρήγορα και εύκολα τις αναρτήσεις που τους ενδιαφέρει.
Πάμε λοιπόν να σας πω πως θα το βάλετε.Είναι πραγματικά πολύ εύκολο.
Ακολουθήστε τα παρακάτω βήματα:
1.Σύνδεση στον λογαριασμό σας από τον blogger.com
2.Πανόπτης
3.Νέα Ανάρτηση
4.Σαν τίτλο μπορείτε να γράψετε “All my Posts” ή ότι άλλο θέλετε
5.Στη συνέχεια βεβαιωθείτε ότι βρίσκεστε στην καρτέλα “Επεξεργασία html” και ΟΧΙ στην καρτέλα “Σύνθεση”
6.Εκεί λοιπόν επικολλήστε τον παρακάτω κώδικα, αφού έχετε αλλάξει το “johnpatrablog” με την δικιά σας διεύθυνση:


<script style=”text/javascript” src=”http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js”></script>
<script src=”http://johnpatrablog.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc”></script>
<a href=”http://johnpatrablog.blogspot.com/2010/01/all-my-posts-widget.html”>Add this widget in your blog!By JohnpatraBLOG!</a>


7.Μπορείτε να το δημοσιεύσετε και τώρα αλλά θα εμφανιστεί στην αρχική σας σελίδα και δεν είναι και τόσο ωραίο αυτό.Αν θέλετε να το δημοσιεύσετε χωρίς να εμφανίζεται στην αρχική σας σελίδα ,πατήστε “Επιλογές ανάρτησης” και αλλάξτε την “ημερομηνία και ώρα ανάρτησης” με μια παλιότερη.Δηλαδή όπως είναι η ημερομηνία γράψτε “15/10/2009” (τυχαίο παράδειγμα).
8.Έχετε-δεν-έχετε αλλάξει την ημερομηνία πατήστε “ΔΗΜΟΣΙΕΥΣΗ ΑΝΑΡΤΗΣΗΣ”.
9.Στη συνέχεια λογικά θα σας πει ότι η νέα σας ανάρτηση δημοσιευθηκε με επιτυχία.Πατήστε λοιπόν τώρα “Προβολή ανάρτησης” και δείτε αν σας πέτυχε όπως σε εμένα.

Αυτό ήταν.Τώρα μπορείτε να πάρετε το λινκ αυτής της ανάρτησης και να το βάλετε όπου θέλετε.(Όπως εγώ το έβαλα στην μπάρα κάτω από τον τίτλο.)




Σχετικές αναρτήσεις με εικόνες από το LinkWithin



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Σήμερα θα σας δείξω έναν άλλον τρόπο να προσθέσετε τις σχετικές αναρτήσεις κάτω από κάθε ανάρτηση του blog σας.Κατα τη γνώμη μου ο προηγούμενος που σας είχα δείξει (http://johnpatrablog.blogspot.com/2009/10/blog-post_17.html) ήταν καλύτερος αλλά η διαφορά είναι οτί αυτό έχει εικόνες ενώ ο προηγούμενος όχι.Αυτό το widget παρέχεται από το Link Within.Μέσα σε μικρό χρονικό διάστημα έχει γίνει πολύ γνωστό widget και το συναντάω σε πολλά blogs.

Πως το βάζω στο blog μου?

Είναι πολύ απλό.Επισκέφτεστε το Link Within και κάτω δεξιά σας έχει μια φόρμα για να σας δώσει τον κωδικό.Στην αρχή βάζετε το μαιλ σας (δεν θα σας στείλει κανένα μαιλ απλά θέλει να το έχει σε περίπτωση που θέλει κάτι να σας πει).Μετά γράφετε την διεύθυνση του blog σας.Κατόπιν επιλέγετε σαν πλατφόρμα τον blogger ή όποια άλλη χρησιμοποιείτε και μετά επιλέγετε πόσες σχετικές αναρτήσεις θέλετε να εμφανίζονται.Επιλέξτε σωστά αναλογιζόμενοι το πλάτος των αναρτήσεων σας ‘εγώ την έκανα την παπαριά και επέλεξα 5 και φαίνονται άσχημα τώρα.Αν το blog σας είναι σαν το δικό μου ,δηλαδή έχει άσπρα γράμματα σε μαύρο πρότυπο τσεκάρετε το τετραγωνάκι που λέει “My blog has light text on a dark background”.Τέλος πατήστε το “Get Widget!” και στη σελίδα που θα σας ανοίξει πατήστε Install gadget και μετά γίνεται αυτόματη προσθήκη gadget από τον blogger.

Αυτός είναι ο απλός και εύκολος τρόπος για να το βάλετε.

Αν όμως θέλετε να εμφανίζονται οι σχετικές αναρτήσεις του Link Within μόνο στις σελίδες των αναρτήσεων και όχι στην αρχική σελίδα (όπως το έχω κάνει εγώ) τι κάνουμε?

Επισκεφτείτε πάλι το Link Within και κάντε τα όλα όπως σας είπα παραπάνω μόνο που για πλατφόρμα επιλέξτε “Other” όπως φαίνεται και στην παρακάτω εικόνα.



Αφού πατήσετε λοιπόν “Get Widget!” στον κωδικό που θα σας βγάλει στην επόμενη σελίδα ,αντιγράψτε και φυλάξτε το ID του site σας όπως φαίνεται στην παρακάτω εικόνα.



Αφού λοιπόν έχετε φυλάξει κάπου το ID του site σας ακολουθήστε τα παρακάτω βήματα:

1. Πανόπτης>Διάταξη>Επεξεργασία html>Τσεκάρετε το “Επέκταση προτύπων γραφικών στοιχείων”

2. Χρησιμοποιώντας το ctrl + F βρείτε τον παρακάτω κώδικα:


<div class=’post-footer’>



3. Αμέσως πριν (ή πάνω) από το <div class=’post-footer’> επικολλήστε τον παρακάτω κώδικα:


<b:if cond=’data:blog.pageType == “item”‘>
<script>
var linkwithin_site_id = YOUR_SITE_ID;
(function () {
var elem = document.createElement(‘script’);
elem.type = ‘text/javascript’;
elem.src = ‘http://www.linkwithin.com/widget.js?rand=’ + Math.random();
document.getElementsByTagName(‘head’)[0].appendChild(elem);
})();
</script>
<a href=”http://www.linkwithin.com/”><img src=”http://www.linkwithin.com/pixel.png” alt=”Blog Widget by LinkWithin” style=”border: 0″ /></a>
</b:if>



Αλλάξτε αυτό που σας έχω μαρκάρει με μπλε με το Site ID σας που έχετε φυλάξει από πριν.

4.Μην ξεχάσετε να αποθηκεύσετε το πρότυπό σας ,κι είστε έτοιμοι!



Πιθανές ερωτήσεις:

Με ποιο κριτήριο επιλέγει το Link Within τις σχετικές αναρτήσεις που θα φαίνονται κάτω από κάθε ποστ?

Το Link Within επιλέγει τις αναρτήσεις που θα εμφανίσει αναλογά με το αν είναι σχετικό το θέμα τους (όχι με βάση την ετικέτα τους!) ,με την δημότικότητα τους και με βάση τη χρονολογία τους ,δηλ. πότε έχουν δημοσιευθεί.Επιλέγει αυτές που είναι πιο πρόσφατες.

Γιατί το Link Within δεν μου εμφανίζει τις σχετικές αναρτήσεις που πρέπει αλλά μου εμφανίζει άσχετες?

Γιατί δεν θα υπάρχουν σχετικές.Αν εγώ π.χ. γράψω μια ανάρτηση για κηπουρική το Link Within θα μου βάλει τελείως άσχετες σχετικές αναρτήσεις αφού δεν θα βρίσκει να έχω τίποτα άλλο με κηπουρική.

Μπορούμε να αλλάξουμε τα κριτήρια με τα οποία το Link Within διαλέγει τις σχετικές αναρτήσεις?

Όχι φυσικά ‘έτσι είναι φτιαγμένο το widget.


Περιμένω όπως πάντα τα σχόλιά σας με τις εντυπώσεις σας!