Εμφάνιση αναρτήσεων με ετικέτα BLOG. Εμφάνιση όλων των αναρτήσεων
Εμφάνιση αναρτήσεων με ετικέτα BLOG. Εμφάνιση όλων των αναρτήσεων

Τετάρτη 9 Δεκεμβρίου 2009

NEW WEBMASTER TOOLS

Καλημέρα. Σήμερα θα ήθελα να σας προτείνω μια καταπληκτική ιστοσελίδα η οποία θα σας φανεί πολύ χρήσιμη για τα ιστολόγια σας. Ο λόγος γίνεται για το New Webmaster Tools.
   Η αλήθεια είναι ότι ο σχεδιασμός της σελίδας δεν είναι ο καλύτερος και ίσως σας δυσκολέψει λιγάκι στην πλοήγηση αλλά αυτό δε μειώνει τη σημαντικότητα της. Τι μπορούμε να κάνουμε χάρη σε αυτή τη σελίδα; Σχεδόν τα πάντα. Έχει 3D button generator, Animated button generator, Advanced menu bar generator, Drop down menu generator, CSS generator, Pop-up ad generator, Free templates, Robots.txt generator, Search engine submission tool, Online form generator, HTML page generator.
   Παραπάνω έχω βάλει με links μερικά εργαλεία του συγκεκριμένου web site αλλά να είστε σίγουροι ότι θα βρείτε πολλά περισσότερα. Όπως καταλάβατε είναι μια μηχανή με πολλούς και διάφορους generators που παράγουν κώδικες για οτιδήποτε θέλετε να προσθέσετε στο blog σας.
   Επισκευτείτε την παραπάνω σελίδα και χρησιμοποιήστε την. Θα μείνετε απόλυτα ικανοποιημένοι και όλα είναι δωρεάν. Δε χρειάζεται να γίνετε ούτε μέλη.

Τρίτη 4 Αυγούστου 2009

ΕΝΑ POST ΓΙΑ ΤΑ BLOGS ΤΟΥ WORDPRESS

Καλησπέρα σε όλους και σε όλες. Είναι αλήθεια ότι η συντριπτική πλειοψηφία των θεμάτων του παρόντος blog αφορούνε την πλατφόρμα του blogspot. Σήμερα θα ασχοληθούμε λιγάκι και με μια άλλη αξιόλογη πλατφόρμα. Το Wordpress.
Κάντε κλικ εδώ για να επισκευτείτε το διαδυκτιακό χώρο Semicolon για να βρείτε διάφορα plugins όπως read more, code markup, top cat, plaintext κ.α.
Αν έχετε blog στο Wordpress σίγουρα χρειάζεστε το Absolute Comments για να κερδίσετε χρόνο στη διαχείριση των σχολίων ως administrator του ιστολογίου σας. Μέσα από το Absolut Comments μπορείτε να έχετε πλήρη έλεγχο των σχολίων που αφήνουν οι αναγνώστες σας (διαγραφή, edit, επισήμανση ως spam κ.α.)
Για όσους τα trackback links δεν είναι αρεστά το No Self Pings είναι αυτό που χρειάζονται.
Πολλοί bloggers των οποίων τα ιστολόγια φιλοξενούνται στο Wordpress συναντούνε πρόβλημα με την αναζήτηση που έχουν ενσωματωμένη στα ιστολόγια τους και σαν αποτέλεσμα στις αναζητήσεις εμφανίζεται το 404 error. Με το Search Everything αυτό το πρόβλημα λύνεται.
Καλή επιτυχία!

Κυριακή 19 Ιουλίου 2009

ΕΝΑ ΧΡΗΣΙΜΟ ΕΡΓΑΛΕΙΟ


Καλησπέρα και καλή εβδομάδα. Σήμερα θα σας μιλήσω για ένα καταπληκτικό web site το οποίο είναι και εργαλείο. Ο λόγος γίνεται για το embedit.in. Μέσω αυτού του web site μπορείτε να προσθέσετε στο blog σας διάφορα αρχεία όπως έγγραφα σε μορφές: doc, docx, xls, xlsx, ppt, pptx, pdf, wpd, odt, ods, odp, εικόνες σε μορφές: png, jpg, gif, tiff, bmp, eps, ai, καθώς και αρχεία (texts) με καταλήξεις όπως: txt, rtf, csv, html. Το μεγαλύτερο επιτρεπτό μέγεθος για upload είναι 20 megabytes. Τα αρχεία που θα ανεβάσετε με το embedtit.in μπορούνε να τα επισυνάψουνε στις σελίδες τους και οι αναγνώστες, υπάρχει κουμπί για εκτύπωση (print) και τέλος υπάρχει και κουμπί για download. Φυσικά μπορούμε να αλλάξουμε τις τιμές από τον κώδικα στο width και στο height για να δώσουμε τις διαστάσεις που θέλουμε στην παρουσίαση μας. Για να καταλάβετε κοιτάξτε την παρουσίαση ακριβώς κάτω από αυτές τις γραμμές.

Κυριακή 7 Ιουνίου 2009

ΦΩΤΟΓΡΑΦΙΕΣ ΓΙΑ BACKGROUND ΣΤΟ BLOG

Καλημέρα και καλή εβδομάδα. Σήμερα θα δούμε πως μπορούμε να κάνουμε προσθήκη μια εικόνας που θέλουμε στο blog μας ως background.
Σαν πρώτο βήμα είναι να βρείτε μια εικόνα της αρεσκείας σας και να τη σηκώσετε στο internet. Υπάρχουν πολλά sites που μπορείτε να το κάνετε αυτό. Για παράδειγμα το γνωστά σε όλους μας Photobucket και Flickr αλλά και πολλά άλλα.
Πάντα πριν κάνουμε οτιδήποτε παίρνουμε ένα αντίγραφο ασφαλείας (back up) του κώδικα μας. Μετά από τον πανόπτη πάμε διάταξη και επεξεργασία HTML. Πατώντας το Ctrl + F ανοίγει στο κάτω μέρος του browser ένα ψαχτήρι. Με αντιγραφή και επικόλληση (copy - paste) μέσα στο ψαχτήρι του παρακάτω κώδικα:

body { background:$bgcolor;

μπορούμε να βρούμε εύκολα σε πιο σημείο του κώδικα του template βρίσκεται αυτό το κομμάτι. Αμέσως μετά το παρακάτω κομμάτι κώδικα:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

κάνουμε αντιγραφή - επικόλληση (copy - paste) τον παρακάτω κώδικα:

body {
background-color:#B38481;
background-image: url(your image 's adress);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;


ή αν προτιμάτε τον κώδικα σε μια γραμμή:

body {
background:#B38481 url(
your image 's adress) no-repeat center center fixed;

Όπου υπάρχει κόκκινο χρώμα πρέπει να αντικατασταθεί με τη διεύθυνση όπου βρίσκεται η εικόνα που θέλετε να βάλετε. Οι παρενθέσεις παραμένουν.
Στον παραπάνω κώδικα που προσθέσαμε μπορούμε να πειράξουμε τις τιμές. Για παράδειγμα στο background-color μπορούμε να βάλουμε όποιο χρώμα θέλουμε με έναν color generator ή μέσα από το blogspot, μια διαδικασία που την ανάρτησα στο παρελθόν και μπορείτε να τη δείτε κάνοντας κλικ εδώ.
Στο background-repeat αν βάλουμε repeat αντί του no-repeat η εικόνα που βάλαμε θα επαναλαμβάνεται.
Στο background-position μπορούμε να καθορίσουμε για το σημείο όπου θα εμφανίζεται η εικόνα. Οι τιμές που μπορούμε να βάλουμε είναι οι παρακάτω: top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right (πάνω αριστερά, πάνω κέντρο, πάνω δεξιά κ.ο.κ.).
Στο background-attachment αν έχουμε την τιμή fixed τότε η εικόνα παραμένει σταθερή και γίνεται κύλιση (scroll) μόnο στο κείμενο και στα υπόλοιπα (widgets κλπ.) Αν αντί για fixed βάλουμε default τότε η κύλιση κειμένου και εικόνας θα γίνεται ταυτόχρονα.
Θα πρέπει όμως σε όλα αυτά να συνυπολογίσουμε και το μέγεθος της εικόνας. Για να φτάσουμε σε ένα επιθυμητό αποτέλεσμα καλό θα είναι να έχουμε εγκατεστημένο πρόγραμμα επεξεργασίας στο pc μας. Το πιο γνωστό είναι το Photoshop αλλά υπάρχουν και πολλές δωρεάν λύσεις στο internet (κλικ). Με ένα τέτοιο πρόγραμμα μπορούμε να πειραματιστούμε στο μέγεθος της εικόνας που θα βάλουμε ως background στο blog μας.
Όταν τελειώσουμε απ' όλα θα πρέπει να πάμε από τον πανόπτη στη διάταξη και από εκεί γραμματοσειρές και χρώματα για να κάνουμε όποιες αλλάγές θέλουμε έτσι ώστε τα κείμενα μας και οτιδήποτε άλλο αναγράφεται στο blog μας να είναι ευανάγνωστα. Πολλές φορές τα χρώματα από τις εικόνες που είναι background δυσκολεύουν την ανάγνωση των κειμένων και αυτό είναι αρνητικό ως προς την επισκεψιμότητα του ιστολογίου μας. Θα πρέπει να είμαστε πολύ προσεκτικοί ως προς την επιλογή της εικόνας από άποψη σύνθεσης αυτής, χρώματα που διαθέτει και σχέδια για να μην μετατραπεί σε αρνητικό στοιχείο.
Ελπίζω να σας βοήθησα. Έφτιαξα ένα δοκιμαστικό blog για να δείτε περίπου πως είναι. Απλά κάντε κλικ εδώ.

Παρασκευή 3 Απριλίου 2009

ΠΡΟΣΘΗΚΗ ΔΙΑΧΩΡΙΣΤΙΚΗΣ ΓΡΑΜΜΗΣ ΑΝΑΜΕΣΑ ΣΤΑ ΣΧΟΛΙΑ

Πολλές φορές όταν διαβάζουμε τα σχόλια σε ένα blog μπερδευόμαστε, ιδιαίτερα όταν είμαστε κουρασμένοι και όταν το template του blog είναι μονόχρωμο όπως τα minima templates του blogspot. Μπορούμε να βάλουμε μια διαχωριστική γραμμή ανάμεσα στα σχόλια έτσι ώστε να ξεχωρίζουν ευκολότερα που αρχίζουν και που τελειώνουν. Η όλη διαδικασία κρατάει λίγα λεπτά.
Μπαίνουμε στο λογαριασμό μας και από τον πανόπτη πάμε διάταξη και επεξεργασία HTML. Πριν προχωρήσουμε παίρνουμε ένα αντίγραφο ασφαλείας (back up) του template μας για κάθε ενδεχόμενο. Μετά πατάμε Control και F (Ctrl+F) για να ανοίξει το ψαχτήρι στο κάτω μέρος της σελίδας. Πληκτρολογήστε: #comments-block .comment-footer { όσοι χρησιμοποιείτε minima templates και όσοι δε χρησιμοποιείτε minima πληκτρολογείστε .comment-footer {. Αυτόματα θα εμφανιστεί τονισμένο με χρώμα το κομμάτι του κώδικα που βάλαμε στο ψαχτήρι μας. Στην αμέσως επόμενη σειρά κάνουμε αντιγραφή επικόλληση (copy - paste) αυτό: border-bottom:1px dotted $bordercolor; Εμφανίζει μια λεπτή γραμμή ανάμεσα στα σχόλια. Αν δεν ικανοποιείστε από το αποτέλεσμα αντικαταστήστε το με αυτό: border-bottom:2px solid #736AFF; (προσωπικά το προτιμώ). Αυτό το κομμάτι του κώδικα κάνει τη γραμμή πιο έντονη και μπορείτε να αλλάξετε το χρώμα της απλά αλλάζοντας τον κωδικό χρώματος που είναι με κόκκινο χρώμα. Για το πως βρίσκουμε τους κωδικούς του κάθε χρώματος κάντε κλικ εδώ ή ψάξτε στο internet για color generators.
Αν η διαχωριστική γραμμή φαίνεται να είναι πολύ κοντά ή πολύ μακριά από το σχόλιο τότε βρείτε το παρακάτω κομμάτι του κώδικα ή αν δεν υπάρχει προσθέστε το εσείς: padding:0 0 1px 0; όπως βλέπετε έχει τέσσερις τιμές. Η πρώτη είναι για κενό από πάνω, η δεύτερη για κενό από δεξιά, η τρίτη για κενό από κάτω και η τέταρτη για κενό από αριστερά. Για παράδειγμα το 1px σημαίνει ότι αυξήσαμε το κενό από κάτω. Αλλάζοντας τις τιμές αλλάζει και η θέση της διαχωριστικής γραμμής. Πάντως δεν είναι απαραίτητο αυτό το τελευταίο για να δουλέψει το trick. Πατήστε αποθήκευση (save) και μπείτε στο blog σας για να δείτε τα αποτελέσματα. Καλή επιτυχία! :-)

Τετάρτη 1 Απριλίου 2009

ΠΡΟΣΘΗΚΗ SCROLLBOX

Πολλοί είναι αυτοί που θα ήθελαν να κάνουν προσθήκη ενός scrollbox είτε μέσα σε μια ανάρτηση είτε στη sidebar. Δεν χρειάζεται να γνωρίζει κάποιος προγραμματισμό για να το κάνει. Υπάρχει η αστείρευτη πηγή γνώσης και ευκολίας που ονομάζεται internet.
Το μόνο που έχετε να κάνετε είναι να επισκευτείτε έναν ιστότοπο κάνοντας κλικ εδώ. Τα πράγματα είναι απλά. Δώστε τις διαστάσεις, τα χρώματα και το μέγεθος του scrollbox που θέλετε, γράψτε το κείμενο ή τον κώδικα στο πρώτο πλαίσιο και όταν τελειώσετε μπορείτε να δείτε τον κώδικα του scrollbox στο δεύτερο πλαίσιο τον οποίο πρέπει να τον κάνετε copy - paste (αντιγραφή επικόλληση) στο blog σας είτε σε μορφή gadget είτε μέσα σε μια ανάρτηση σας. Δείτε το παρακάτω παράδειγμα για να καταλάβετε καλύτερα:

MY BLOGS

ΔΙΑΔΩΣΤΕ ΤΗ ΓΝΩΣΗ
SPREAD THE KNOWLEDGE
LOCUS BLOGUS
http://locusblogus.blogspot.com

ΘΕΜΑ
http://hackaday-thema.blogspot.com

CYGLOBE
http://cyglobe.blogspot.com

..................................
..................................
..................................
..................................
..................................
..................................
..................................


Σε περίπτωση που θέλετε να κάνετε προσθήκη ενός scrollbox σε μια ανάρτηση σας και θέλετε να βρίσκεται στο κέντρο το μόνο που έχετε να κάνετε είναι να βάλετε στην αρχή του κώδικα (πριν το <div style...) το <center> και στο τέλος (μετά το </div>) πρέπει να βάλετε το </center> Καλή επιτυχία σε όλους!!!

Τρίτη 24 Μαρτίου 2009

ΠΡΟΣΘΗΚΗ LINK ΕΚΤΥΠΩΣΗΣ ΜΕ ΕΙΚΟΝΙΔΙΟ ΣΤΟ BLOG

Πως θα σας φαινόταν αν μπορούσατε να δώσετε τη δυνατότητα στους αναγνώστες σας να εκτυπώνουν τα post σας με ένα κλικ; Η όλη διαδικασία δεν είναι ιδιαίτερα δύσκολη. Πάμε να δούμε πως γίνεται.
Μπαίνουμε στο λογαριασμό του blogspot και από εκεί πάμε πανόπτης, διάταξη και επεξεργασία HTML. Πρώτα κρατάμε ένα αντίγραφο ασφαλείας (back up) σε περίπτωση που συναντήσουμε κάποιο πρόβλημα. Μετά πληκτρολογούμε Control και F (CTRL + F) για να ανοίξει το ψαχτήρι μας στο κάτω μέρος της οθόνης. Πληκτρολογούμε στο ψαχτήρι μας </head> και αμέσως θα δούμε στον κώδικα μας τονισμένο με πράσινο χρώμα το κομμάτι που πληκτρολογήσαμε προηγουμένως. Αμέσως πριν από αυτό κάνουμε αντιγραφή επικόλληση (copy - paste) το παρακάτω κομμάτι κώδικα:

<style media='print' type='text/css'> #header-wrapper, #header, .header, #sidebar-wrapper, .sidebar, #footer-wrapper, #footer, .date-header, .post-meta-data, .comment-link, .comment-footer, #blog-pager, #backlinks-container, #navbar-section, .subscribe_notice, .noprint {display: none;} #main-wrapper {width: 95%} </style>

Πατάμε αποθήκευση (save) και μετά κάνουμε κλικ στο κουτάκι που βρίσκεται δίπλα στην Επέκταση προτύπων γραφικών στοιχείων. Μετά στο ψαχτήρι μας πληκτρολογούμε: <p><data:post.body/></p> ή αν δε βρεθεί το παρακάτω κομμάτι του κώδικα πληκτρολογούμε: <data:post.body/> και αν δε μας ικανοποιεί ούτε αυτό τότε ψάχνουμε για το: <a expr:name='data:post.id'/> (προτείνεται) και θα δούμε στον κώδικα μας τονισμένο με πράσινο χρώμα το κομμάτι που πληκτρολογήσαμε προηγουμένως. Αμέσως πριν από αυτό το κομμάτι κάνουμε αντιγραφή - επικόλληση (copy - paste) το παρακάτω κομμάτι κώδικα:

<b:if cond='data:blog.pageType == "item"'> <span style='background: url(http://bloggerbuster.com/images/print.gif) left no-repeat; padding-left: 20px;'><a href='javascript:window.print()'>Print this post</a></span> </b:if>

Πατήστε αποθήκευση (save). Όταν βρίσκεστε στο blog σας για να δείτε το εικονίδιο και το link για την εκτύπωση πρέπει να μπείτε σε ένα post, δηλαδή αν κάνετε κλικ στον τίτλο ενός post θα δείτε το εικονίδιο και το link για την εκτύπωση. Κάντε κλικ και θα δείτε. Εννοείται ότι βασική προϋπόθεση είναι η ύπαρξη εκτυπωτή. Αν κάνετε μια εκτύπωση ενός post σας θα δείτε ότι εκτυπώνεται μόνο το post και όχι οι sidebars και τα υπόλοιπα στοιχεία του blog σας. Για να καταλάβετε καλύτερα δείτε το παρακάτω screenshot. Καλό, ε; Καλή επιτυχία.

Κυριακή 8 Μαρτίου 2009

ΠΕΡΙΜΕΝΟΝΤΑΣ ΤΟ SERVICE

Όπως καταλάβατε δεν έχει γίνει καμία καινούρια ανάρτηση εδώ και πάνω από δέκα μέρες. Αιτία είναι κάποια τεχνικά προβλήματα και η αδικαιολόγητη καθυστέρηση του service του E-shop (δέκα μέρες για αλλαγή ενός σκληρού δίσκου σε καινούριο pc δύο μηνών που crash-άρισε μου φαίνεται υπερβολικό και μπορεί η διαδικασία αντικατάστασης του να ξεπεράσει τις δύο εβδομάδες). Ελπίζω μέχρι το τέλος της εβδομάδας όλα να πάνε καλά και να αναρτηθούν καινούρια posts στο παρόν blog με κόλπα, συμβουλές, ιδέες και προτάσεις.
Ότι απορίες έχετε μπορείτε να τις στέλνετε στο e-mail που βρίσκεται στο δεξί μέρος του blog. Σας εύχομαι καλή εβδομάδα και μακριά από τα αργόστροφα services.

Πέμπτη 19 Φεβρουαρίου 2009

ΑΥΤΟΜΑΤΗ ΚΥΛΙΣΗ ΣΕΛΙΔΩΝ

Σήμερα θα δούμε ένα κολπάκι που θα βοηθάει τους αναγνώστες μας να έχουν λυμμένα τα χέρια τους όταν διαβάζουν τις αναρτήσεις μας. Αντί να είναι το ένα χέρι μονίμως στο ποντίκι και να κατεβαίνουν σιγά - σιγά στο blog μας μια φορά αρκεί να κάνουν κλικ στο βελάκι δεξιά στη scroll down μπάρα και η σελίδα μας θα κατεβαίνει αυτόματα. Δείτε το παρακάτω screenshot για να καταλάβετε (κλικ στην εικόνα για να τη δείτε σε μεγέθυνση).


Μπείτε στο λογαρισμό σας και πάτε πανόπτης, διάταξη και επεξεργασία HTML. Πατήστε το Control και F (Ctrl+F) για να ανοίξει στο κάτω μέρος της οθόνης το ψαχτήρι και μέσα στο πλαίσιο αυτού πληκτρολογήστε: </body>
Θα δείτε ότι μέσα στον κώδικα του template σας εμφανίζει αυτό που πληκτρολογήσαμε στο ψαχτήρι χρωματισμένο. Ακριβώς μια γραμμή παραπάνω κάνουμε κλικ και πατάμε enter για να δημιουργηθεί μια κενή γραμμή πριν το </body> και σ' αυτή τη γραμμή κάνουμε αντιγραφή - επικόλληση (copy - paste) τον παρακάτω κώδικα:

<script language="JavaScript1.2">

//change 1 to another integer to alter the scroll speed. Greater is faster
var speed=1
var currentpos=0,alt=1,curpos1=0,curpos2=-1
function initialize(){
startit()
}

function iecompattest(){
return (document.compatMode!="BackCompat")? document.documentElement : document.body
}

function scrollwindow(){
if (document.all)
temp=iecompattest().scrollTop
else
temp=window.pageYOffset
if (alt==0)
alt=1
else
alt=0
if (alt==0)
curpos1=temp

Πατήστε αποθήκευση (save) και τέλος. Πως δουλεέυει; Απλά αν κάνετε μια φορά κλικ στο κάτω βελάκι της κυλιόμενης μπάρας ή αν με το ποντίκι τραβήξετε την κυλιόμενη μπάρα προς τα κάτω αυτό ξεκινάει και κατεβάζει τη σελίδα σας. Για να το σταματήσετε πατήστε το πάνω βελάκι της κυλιόμενης μπάρας ή τραβήξτε με το ποντίκι την κυλιόμενη μπάρα προς τα πάνω. Κάντε κλικ εδώ για να δείτε πως δουλεύει. Καλή επιτυχία.

Τρίτη 27 Ιανουαρίου 2009

ΨΑΧΤΗΡΙ 4 ΣΕ 1

Τα ψαχτήρια ή μηχανές αναζήτησης (search engines) είναι πολύ διαδεδομένα στα blogs και στα web sites. Πολλές φορές θέλουμε να κάνουμε αναζητήσεις μόνο στο blog μας, άλλες φορές στη google, άλλες φορές στο technorati και άλλες φορές στο blogspot. Αυτό σημαίνει ότι πρέπει να μπαινοβγαίνουμε σε σελίδες και να χάνουμε πολύ χρόνο. Υπάρχει τρόπος να τα έχουμε όλα σε ένα. Και μάλιστα στο blog μας.
Μπαίνουμε στο λογαριασμό μας και πάμε πανόπτης, διάταξη, προσθήκη gadget και στο παράθυρο που ανοίγει διαλέγουμε HTML/JavaScript. Εκεί μέσα βάζουμε τον παρακάτω κώδικα με αντιγραφή - επικόλληση (copy - paste):

<div id="pm-search">
<ul>
<li id="li-h" class="pm-search-selected" onclick="selectH()">here</li><li id="li-g" class="pm-search-unselected" onclick="selectG()">google</li><li id="li-b" class="pm-search-unselected" onclick="selectB()">blogspot</li><li id="li-t" class="pm-search-unselected" onclick="selectT()">technorati</li>
</ul>
<div id="pm-search-h">
<form action="http://yourblog.blogspot.com/search" method="get">
<input id="pm-f-h" value="" name="q" size="15" type="text"/>
<input value="Search" type="submit"/>
</form>
</div>
<div id="pm-search-g">
<form action="http://blogsearch.google.com/blogsearch" method="get">
<input id="pm-f-g" value="" name="as_q" size="15" type="text"/>
<input value="Search" type="submit"/>
<input value="yourblog.blogspot.com" name="bl_url" type="hidden"/>
</form>
</div>
<div id="pm-search-b">
<form action="http://search.blogger.com/" method="get">
<input id="pm-f-b" value="" name="as_q" size="15" type="text"/>
<input value="Search" type="submit"/>
<input value="yourblog.blogspot.com" name="bl_url" type="hidden"/>
</form>
</div>
<div id="pm-search-t">
<form action="http://www.technorati.com/search.php" method="post">
<input id="pm-f-t" maxlength="255" name="s" size="15" type="text"/>
<input value="Search" type="submit"/>
<input value="searchlet" name="sub" type="hidden"/>
<input value="yourblog.blogspot.com" name="from" type="hidden"/>
<input value="n" name="authority" type="hidden"/>
<input value="n" name="language" type="hidden"/>
</form>
</div>
</div>

Όποιο κομμάτι (yourblog) του κώδικα έχω τονισμένο (bold) το αντικαθιστάτε με τη διεύθυνση του blog σας. Το πρώτο που είναι τονισμένο (το here) αν θέλετε το αφήνετε έτσι αν όχι μπορείτε να βάλετε το όνομα του blog σας. Πατήστε αποθήκευση (save). Μετά πάμε πάλι στον πανόπτη και από εκεί διάταξη και επεξεργασία HTML. Πατώντας το Ctrl+F βρίσκουμε το παρακάτω κομμάτι του κώδικα:
body {
και βλέπουμε ακριβώς από πάνω του να λέει:

/* Use this with templates/template-twocol.html */

Ακριβώς πάνω από το τελευταίο κάνουμε κλικ με το ποντίκι και πατάμε μια φορά το enter για να κάνουμε χώρο και κάνουμε αντιγραφή επικόλληση τον παρακάτω κώδικα:

/** css for the search box */
div#pm-search ul { /* unordered list */
margin-top: 0;
margin-right: 0;
margin-left: 0px;
margin-bottom: 5px;
padding: 0;
}
div#pm-search li { /* each list element */
list-style-type: none; /* don't edit this */
display: inline; /* don't edit this */
cursor: pointer; /* don't edit this */
margin-top: 0;
margin-bottom: 0;
margin-right: 5px;
margin-left: 0px;
text-indent: 0px;
padding: 0;
}
div#pm-search form { /* the search form */
margin: 0;
padding: 0;
}
div#pm-search-h {
display: block; /* don't edit this */
}
div#pm-search-g,
div#pm-search-b,
div#pm-search-t {
display: none; /* don't edit this */
}
div#pm-search input { /* the textbox and submit button */
background-color: transparent;
border: 1px dotted #999;
color: #999;
}
.pm-search-selected { /* which search service is currently selected */
color: #999;
border-bottom: 1px dotted #999;
}
.pm-search-unselected { /* which search services are not selected */
color: #777;
border-bottom: 1px dotted #777;
}

Το τελευταίο στάδιο είναι να προσθέσουμε και ένα κομμάτι JavaScript. Βρίσκουμε με το ψαχτήρι μας στο κάτω μέρος της σελίδας το κομμάτι του κώδικα:

</b:skin>

Κάντε κλικ δίπλα σ' αυτό το κομμάτι και πατήστε μια φορά enter για να δημιουργηθεί μια κενή σειρά από κάτω του. Εκεί θα κάνουμε αντιγραφή επικόλληση τον παρακάτω κώδικα:

<script type='text/javascript'>
//<![CDATA[

/***********************************************
* Javascript functions for the search box
* made by PurpleMoggy :)
* http://purplemoggy.blogspot.com/
***********************************************/
var search_which_one = "pm-f-h";
function selectH() {
document.getElementById('li-h').className = 'pm-search-selected';
document.getElementById('li-g').className = 'pm-search-unselected';
document.getElementById('li-b').className = 'pm-search-unselected';
document.getElementById('li-t').className = 'pm-search-unselected';
document.getElementById('pm-search-h').style.display = 'block';
document.getElementById('pm-search-g').style.display = 'none';
document.getElementById('pm-search-b').style.display = 'none';
document.getElementById('pm-search-t').style.display = 'none';
document.getElementById('pm-f-h').value = document.getElementById(search_which_one).value;
search_which_one = "pm-f-h";
}
function selectG() {
document.getElementById('li-h').className = 'pm-search-unselected';
document.getElementById('li-g').className = 'pm-search-selected';
document.getElementById('li-b').className = 'pm-search-unselected';
document.getElementById('li-t').className = 'pm-search-unselected';
document.getElementById('pm-search-h').style.display = 'none';
document.getElementById('pm-search-g').style.display = 'block';
document.getElementById('pm-search-b').style.display = 'none';
document.getElementById('pm-search-t').style.display = 'none';
document.getElementById('pm-f-g').value = document.getElementById(search_which_one).value;
search_which_one = "pm-f-g";
}
function selectB() {
document.getElementById('li-h').className = 'pm-search-unselected';
document.getElementById('li-g').className = 'pm-search-unselected';
document.getElementById('li-b').className = 'pm-search-selected';
document.getElementById('li-t').className = 'pm-search-unselected';
document.getElementById('pm-search-h').style.display = 'none';
document.getElementById('pm-search-g').style.display = 'none';
document.getElementById('pm-search-b').style.display = 'block';
document.getElementById('pm-search-t').style.display = 'none';
document.getElementById('pm-f-b').value = document.getElementById(search_which_one).value;
search_which_one = "pm-f-b";
}
function selectT() {
document.getElementById('li-h').className = 'pm-search-unselected';
document.getElementById('li-g').className = 'pm-search-unselected';
document.getElementById('li-b').className = 'pm-search-unselected';
document.getElementById('li-t').className = 'pm-search-selected';
document.getElementById('pm-search-h').style.display = 'none';
document.getElementById('pm-search-g').style.display = 'none';
document.getElementById('pm-search-b').style.display = 'none';
document.getElementById('pm-search-t').style.display = 'block';
document.getElementById('pm-f-t').value = document.getElementById(search_which_one).value;
search_which_one = "pm-f-t";
}

//]]>
</script>

Πατήστε προεπισκόπηση για να δείτε τα αποτελέσματα. Αν σας ικανοποιούν πατήστε αποθήκευση (save) και τέλος.Το ψαχτήρι σας θα πρέπει να δείχνει όπως το παρακάτω screenshot. Διαλέγετε εσείς που θέλετε να ψάξετε κάνοντας κλικ, γράφετε στο πλαίσιο της αναζήτησης αυτό που ψάχνετε πατάτε search και τέλος. Καλή επιτυχία.

Δευτέρα 26 Ιανουαρίου 2009

ΚΑΝΤΕ ΕΜΦΑΝΕΣ ΕΝΑ ΜΕΡΟΣ ΤΟΥ POST

Η αναγνώστρια του Locus Blogus LoLa ζήτησε να μάθει πως μπορεί, όταν ανεβάζει ένα post, να φαίνεται ένα μέρος της ανάρτησης και ο αναγνώστης για να το δει όλο πρέπει να κάνει κλικ. Τo wordpress δίνει αυτή τη δυνατότητα αλλά το blogspot; Η απάντηση είναι ότι γίνεται αν πειράξουμε λίγο τον κώδικα. Δεν είναι ιδιαίτερα δύσκολο.
Μπαίνουμε στο λογαριασμό μας και από εκεί πάμε πανόπτης, διάταξη και επεξεργασία HTML. πριν προχωρήσουμε παίρνουμε ένα αντίγραφο ασφαλείας (back up) του template. Μετά κάνουμε κλικ στο κουτάκι που βρίσκεται δίπλα στην επέκταση γραφικών στοιχείων προτύπου. Πατάμε Ctrl+F και βρίσκουμε το </head> Ακριβώς πριν απ' αυτό κάνουμε αντιγραφή - επικόλληση (copy - paste) τον παρακάτω κώδικα.

<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery-1.2.3.pack.js' type='text/javascript'/> <script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery.expander.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $('.excerpt').expander({ slicePoint: 280, // default is 100 expandText: '[...]', // default is 'read more...' }); }); </script>


Μετά πάμε να βρούμε το παρακάτω κομμάτι του κώδικα:

<div class='post-body entry-content'> <data:post.body/> <div style='clear: both;'/> <!-- clear for photos floats --> </div>

Αν δυσκολεύεστε με το Ctrl+F βρείτε το <data:post.body/> Η παράγραφος θα βρεθεί κατευθείαν. Μετά έχοντας πατημένο το αριστερό κουμπί από το ποντίκι μας σέρνουμε τον κέρσορα για να τονίσουμε (highlight) την παράγραφο. Δείτε το παρακάτω screenshot.


Το παραπάνω κομμάτι του κώδικα το αντκαθιστούμε, κάνοντας αντιγραφή - επικόλληση (copy - paste), με το παρακάτω κώδικα:

<b:if cond='data:blog.pageType != "item"'>
<div class='excerpt post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:else/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>

Τώρα πατήστε προεπισκόπηση και αν είστε ευχαριστημένοι πατήστε αποθήκευση (save). Δείτε τα δύο παρακάτω screenshots για να πάρετε μια ιδέα πως θα είναι. Το πρώτο δείχνει ένα μέρος του κειμένου και δεύτερο ολόκληρο αν κάνουμε κλικ στο [...] Κάντε κλικ πάνω στις φωτογραφίες για να τις δείτε σε μεγέθυνση.




Σάββατο 17 Ιανουαρίου 2009

ΚΑΛΩΣ ΣΑΣ ΒΡΗΚΑ

Καλώς σας βρήκα στο νέο μου blog. Δεν ξέρω τις εντυπώσεις σας αλλά το έκανα με μεράκι για συγκεκριμένο σκοπό. Ο λόγος ύπαρξης του παρόντος blog είναι να μοιραστούμε τις γνώσεις μας όποιες και αν είναι αυτές πάνω στο blogging, στο internet, σε διάφορα προγράμματα και να προτείνουμε sites που μπορούνε να μας εξυπηρετήσουν. Φυσικά είναι δεκτές όλες οι προτάσεις, και τα σχόλια.
Σκοπός αυτού του blog είναι να μοιραστούμε τις γνώσεις μας και να γίνουμε "σοφότεροι". Οι προτάσεις που θα γίνονται απ' αυτό το blog δε θα απαιτούνε χρήματα (π.χ. αγορά ενός προγράμματος). Στόχος είναι οι δωρεάν λύσεις γιατί "οι καιροί είναι δύσκολοι για πρίγκηπες". Το internet είναι εργαλείο και παγκόσμια τράπεζα πληροφοριών. Υπάρχουν θαυμάσια πράγματα που μας περιμένουν να τ' ανακαλύψουμε και να τα εκμεταλευτούμε.
Μπορείτε να καταθέτετε τις προτάσεις σας στα σχόλια ή να στέλνετε e-mail (το οποίο είναι στα δεξιά πάνω).
Αυτά προς το παρόν.

ΑΠΟΚΡΥΨΗ ΤΗΣ NAVBAR

Σήμερα θα σας δείξω έναν πανεύκολο τρόπο για να εξαφανίσετε τη navbar(για blogs που ανήκουν στην πλατφόρμα του blogspot).
Μπαίνετε στο λογαριασμό σας, από τον πανόπτη, πάτε στη διάταξη και από εκεί επεξεργασία HTML. Το κουτάκι δίπλα στην επέκταση γραφικών στοιχείωντο αφήνετε ανέπαφο. Πριν κάνετε οτιδήποτε καλό είναι να πάρετε ένα back up του κώδικα σας. Λίγο μετά την αρχή του κώδικα στην κορυφή έχει ένα κομμάτι
που λέει κάποια στοιχεία για το template που χρησιμοποιείτε (Blogger Template Style) και από κάτω ακριβώς έχει μια σειρά κενή και πιο κάτω γράφει:

/* Variable definitions

Πάτε στην κενή σειρά με τον κέρσορα, πατήστε δυο - τρεις φορές το enter για
να δημιουργηθεί παραπάνω κενό ανάμεσα στα στοιχεία του template και στο
/* Variable definitions και κάπου εκεί ανάμεσα βάλτε τον παρακάτω
κώδικα με αντιγραφή - επικόλληση (copy - paste):

#navbar-iframe {display:none !important;}

Πατήστε αποθήκευση (save) και κάντε refresh με το F5 στο blog σας και θα δείτε ότι η navbar έχει εξαφανιστεί. Τη navbar πολλοί θέλουν να την εξαφανίσουν για λόγους καλαισθησίας αλλά χάρη σ' αυτό το τρικ κερδίζουμε περισσότερα, όπως:1) Κρατάμε τον επισκέπτη περισσότερο εφόσον δεν έχει τη δυνατότητα να πληκτρολογήσει κάτι στην αναζήτηση ιστολογίου και να φύγει από τη σελίδα μας καθώς επίσης δεν έχει τη δυνατότητα να κάνει κλικ στο κουμπί "επόμενο ιστολόγιο".
2)Προστατευόμαστε από τους κακοπροαίρετους να κάνουν κλικ στην
επισήμανση ιστολογίου (κάτι που είναι αρνητικό για το blog μας από
κάποιον αριθμό κλικ και μετά).

Πηγή: ΘΕΜΑ

ΤΡΙΣΤΗΛΑ TEMPLATES... ΑΒΑΔΙΣΤΑ ΚΑΙ ΑΒΑΣΑΝΙΣΤΑ

Σήμερα θα σας δείξω πως μπορείτε να μετατρέψετε το template του blog σας σε τρίστηλο (αρκεί να ανήκετε στην πλατφόρμα του blogspot). Καλό είναι να κάνεται ένα back up τον κώδικα σας για λόγους ασφαλείας πριν ξεκινήσετε οτιδήποτε.
Πάμε στον πανόπτη, από εκεί διάταξη και από εκεί επεξεργασία HTML. Το κουτάκι που λέει επέκταση γραφικών στοιχείων το αφήνουμε έτσι όπως είναι και δεν το πειράζουμε (ατσεκάριστο).
Βρίσκουμε το κομμάτι του κώδικα που λέει:

#sidebar-wrapper { width: 220px; float: right; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

Το αντιγράφουμε έτσι όπως είναι (copy - paste) ακριβώς από κάτω και έτσι το έχουμε δυο φορές. Στο πρώτο εκεί που λέει float βάζουμε right και σβήνουμε αυτό που έχει, συνήθως λέει $startSide (φαίνεται πάνω η αλλαγή). Τώρα αλλάζουμε σ' αυτό που μόλις αντιγράψαμε (στο δεύτερο) αυτά που φαίνονται παρακάτω με κόκκινο χρώμα:

#left-sidebar-wrapper (αυτό δημιουργεί τη νέα στήλη) float: left; (αυτό θα κάνει την καινούρια στήλη να εμφανίζεται στα αριστερά της κεντρικής όπου εμφανίζονται τα post).

Με τις παραπάνω κινήσεις μόλις προσθέσαμε άλλη μια sidebar.
Στη συνέχεια κοιτάζουμε να βρούμε το μέρος του κώδικα που λέει:

<div id='main-wrapper'>

Ακριβώς πριν από αυτόν αντιγράφουμε και κάνουμε επικόλληση (copy - paste) τον παρακάτω κώδικα:

<div id='left-sidebar-wrapper'> <b:section class='sidebar' id='left-sidebar' preferred='yes'/> </div>

Αυτό γίνεται (<div id='main-wrapper'>) για να μπορέσει ο browser να καταλάβει ότι υπάρχει και άλλη μπάρα. Το άλλο κομμάτι του κώδικα (<b:section class='sidebar' id='left-sidebar' preferred='yes'/> </div>) είναι για να καταλάβει ο browser τι είδους στοιχεία (widgets) υπάρχουν στην καινούρια μας στήλη. Το ID πρέπει να είναι left-sidebar για να μην έχουμε διενέξεις και προβλήματα και για να καθορίσουμε ότι η καινούρια μας στήλη θα βρίσκεται στην αριστερή πλευρά τoυ template μας. Τα παραπάνω, όμως είναι για εγκυκλοπαιδικούς λόγους. Ας συνεχίσουμε με πράξη.
Λογικά θα πρέπει να μεγαλώσουμε το template μας για να χωρέσουν όλα. Βρίσκουμε το κομμάτι του κώδικα που λέει:

/* Outer-Wrapper ----------------------------------------------- */ #outer-wrapper { width: 660px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; }

Και αντικαθιστούμε την τιμή 660 με 880. Για να είναι όμως πιο καλαίσθητο πρέπει να μεγαλώσουμε και και το μέρος που φιλοξενεί το logo μας. Πάμε και βρίσκουμε το κομμάτι του κώδικα που λέει:

#header-wrapper { width:880px; margin:0 auto 10px; border:1px solid $bordercolor; }

Και εδώ την τιμή την αλλάζουμε από 660 σε 880 (στο ακριβώς παραπάνω παράδειγμα η τιμή έχει ήδη αλλαχτεί).
Πατάμε αποθήκευση αν και δεν τελειώσαμε για να ελέγξουμε ότι όλα πάνε καλά. Εφόσον κάνουμε αποθήκευση (save) πάμε πανόπης, διάταξη και στοιχεία σελίδας και η εικόνα που πρέπει να αντικρίσετε είναι όπως η παρακάτω:


Όπως προανέφερα δεν τελειώσαμε. Η στήλη υπάρχει αλλά θα είναι ορατή στο blog μόνο όταν βάλετε κάποιο widget. Πρέπει να κάνουμε τα στοιχεία που θα βάζουμε στην καινούρια μπάρα μας να μην ξεπερνάνε τα όρια και μπαίνουν μέσα στα post μας (κάτι το οποίο είναι ενοχλητικό). Πάμε πάλι στη διάταξη, από εκεί επεξεργασία HTML και ψάχνουμε να βρούμε το κομμάτι του κώδικα:

#main-wrapper { width: 410px; float: left; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

Και προσθέτουμε margin-left: 20px; εκεί που λέει float:left; Ο κώδικας πρέπει να δείχνει ακριβώς όπως παρακάτω:

#main-wrapper { width: 410px; float: left; margin-left: 20px; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

Πατήστε αποθήκευση (save) και τελειώσατε. Για να βάλετε στήλη στα δεξιά ακολουθήστε την ίδια διαδικασία μόνο εκεί που λέει left; βάλτε right;

UPDATE: Η παραπάνω διαδικασία αφορά τo Minima
template (σαν το δικό μου δηλαδή) και τις παραλαγές
του. Για άλλα templates πρέπει να διαθέσετε λίγο χρόνο
για να πειραματιστείτε με τις τιμές των: Outer-Wrapper,
Header-Wrapper και margin. Αυτό γιατί άλλα templates
είναι πιο σύνθετα (περιέχουν σχέδια, footers, χρώματα κλπ.)

Πηγή: ΘΕΜΑ