Blogger Tips – Tricks – Gadgets – Templates – Hacks

Προσθέστε meta tags στο blog σας και βοηθήστε τις μηχανές αναζήτησης να το εντοπίσουν ευκολότερα



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Καλησπέρα στους αναγνώστες του bloggertips.gr.



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

Αυτό θα το πετύχουμε μέσω HTML, χρησιμοποιώντας meta tags.



Παρακάτω θα δείτε τη διαδικασία και θα καταλάβετε περισσότερα:



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

2. Σχεδίαση

3. Επεξεργασία HTML

4. Με Ctrl + F αναζητούμε το <head> και μετά από αυτό, δηλαδή ακριβώς από κάτω επικολλούμε τα παρακάτω:


<meta content=’DESCRIPTION HERE‘ name=’description’/>

<meta content=’KEYWORDS HERE‘ name=’keywords’/>

<meta content=’AUTHOR NAME HERE‘ name=’author’/>



5. Προσαρμόζουμε τον κώδικα στα δικά μας δεδομένα, δηλαδή:



Αντικαθιστούμε:

το “DESCRIPTION HERE” με μια περιγραφή του blog μας

το “KEYWORDS HERE” με λέξεις-κλειδιά που είναι πιθανό να “τραβήξουν” επισκέπτες και σχετίζονται, φυσικά, με το περιεχόμενο του blog μας

το “AUTHOR NAME HERE” με το όνομα ή τα ονόματα αυτών που γράφουν στο blog



Ας πάρουμε ως πρόχειρο παράδειγμα το bloggertips.gr.

Θα προσαρμόζαμε τον κώδικα ώστε να φαίνεται κάπως έτσι:


<meta content=’Blog που ασχολείται με Web design – Web services – κατασκευή νέων ιστοσελίδων‘ name=’description’/>

<meta content=’bloggertips, blogger tips and hacks, blogger gadgets, web design, web services, make money online‘ name=’keywords’/>

<meta content=’Johnpatra‘ name=’author’/>



6. Αποθήκευση προτύπου, είμαστε έτοιμοι!





Δοκιμάστε το και πείτε μας τη γνώμη σας για αυτό το tip αφήνοντας το σχόλιό σας από κάτω.





Πηγές: http://zenplate.blogspot.com/

Copyrights: /




Post by Secra from Web in Greece




Αυτόματος εντοπισμός της εικόνας ανάρτησης κατά το share στο facebook



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Καλησπέρα στους αναγνώστες του bloggertips.gr.




Αναρωτηθείτε μισό λεπτό, πόσες φορές θελήσατε να ποστάρετε κάτι στο facebook και σας έβγαζε μια “άκυρη” σε σχέση με το θέμα σας φωτογραφία;



Αυτό που θα προσπαθήσουμε να κάνουμε σήμερα είναι να θέσουμε μια συγκεκριμένη εικόνα η οποία θα εμφανίζεται όταν κάποιος ποστάρει στο facebook κάτι (δηλαδή κάποιο link) που οδηγεί στη σελίδα σας. Και αυτό θα το πετύχουμε με τα meta tags, για τα οποία έχουμε μιλήσει παλαιότερα.



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



Λοιπόν, η διαδικασία είναι σχετικά απλή και γρήγορη:



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

2. Επεξεργασία HTML

3. Με Ctrl + F αναζητούμε το </head> και μετά από αυτό, δηλαδή ακριβώς από κάτω κάνουμε επικόλληση τον παρακάτω κώδικα:


<b:if cond=’data:blog.postImageThumbnailUrl’>

<meta expr:content=’data:blog.postImageThumbnailUrl’ property=’og:image’/>

<b:else/>

<meta content=’http://www.yooter.com/images/pagenotfound.jpg‘ property=’og:image’/>

</b:if>



Μπορείτε να αλλάξετε την εικόνα που έχω σε επισημάνει με αυτόν τον τρόπο –>τρόπος<– με κάποια της επιλογής σας (είναι η προ-επιλεγμένη εικόνα που θα εμφανίζεται όταν δεν έχετε προσθέσει εικόνα στην ανάρτησή σας).



4. Αποθήκευση προτύπου και είστε έτοιμοι!



Πηγή

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




Post by Secra from Web Reviews




Χριστουγεννιάτικο εφέ για το blog σας (Christmas effect for your blog)



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Καλησπέρα στους αναγνώστες του bloggertips.gr.




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



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



Πάμε να το προσθέσουμε:



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

2. Επεξεργασία HTML

3. Ψάχνουμε το </body> και το αντικαθιστούμε με τον παρακάτω κώδικα:

<div style="width:100%;height:69px; background: url(http://4.bp.blogspot.com/-EKSqIQidsHs/TuJQ5lrMcnI/AAAAAAAAAGs/QDEmMdVS0rg/s1600/lights12.gif);position:fixed;top:-40px;left:0;z-index:99"></div>

</body>

4. Αυτό ήταν! Πατάμε αποθήκευση και βλέπουμε το αποτέλεσμα!



Μείνετε συντονισμένοι στο bloggertips.gr για να μη χάσετε τα χριστουγεννιάτικα εφέ που θα ακολουθήσουν πολύ σύντομα!



Copyrigths: http://www.bloggertips.gr/




Print Friendly & PDF Button for your blogger posts



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Καλησπέρα στους αναγνώστες του bloggertips.gr

Σήμερα θα δούμε ένα ακόμη ενδιαφέρον tip, το “Print Friendly & PDF Button“, μέσω του οποίου οι αναγνώστες σας θα μπορούν να εκτυπώνουν τις αναρτήσεις σας ή να τις κατεβάζουν στον υπολογιστή τους σε μορφή pdf.



Διαδικασία:



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

2. Σχεδίαση

3. Επεξεργασία HTML

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

5. Με “Ctrl + F” αναζητούμε το “<div class=’post-footer’>” (αν εμφανίζει δυο αποτελέσματα, μας ενδιαφέρει το πρώτο) και αμέσως μετά από αυτό επικολλούμε τον παρακάτω κώδικα:


<b:if cond=’data:blog.pageType == "item"’>

<b:if cond=’data:blog.pageType == "index"’>

<a class=’printfriendly’ expr:href=’data:post.url + "?pfstyle=wp"’ style=’ color:#6D9F00; text-decoration:none;’ title=’Printer Friendly and PDF’>

<img alt=’Print Friendly and PDF’ src=’http://cdn.printfriendly.com/pf-print-icon.gif’ style=’border:none;’/>

<span style=’font-size:16px; margin:0 8px 0 3px;’>Print</span>

<img alt=’Print Friendly and PDF’ src=’http://cdn.printfriendly.com/pf-pdf-icon.gif’ style=’border:none;’/>

<span style=’font-size:16px; margin:0 8px 0 3px;’>PDF</span></a><b:else/>

<script src=’http://cdn.printfriendly.com/printfriendly.js’ type=’text/javascript’/>

<a class=’printfriendly’ href=’http://www.printfriendly.com’ onclick=’window.print(); return false;’ style=’ color:#6D9F00; text-decoration:none;’ title=’Printer Friendly and PDF’>

<img alt=’Print Friendly and PDF’ src=’http://cdn.printfriendly.com/pf-print-icon.gif’ style=’border:none;’/>

<span style=’font-size:16px; margin:0 8px 0 3px;’>Print</span>

<img alt=’Print Friendly and PDF’ src=’http://cdn.printfriendly.com/pf-pdf-icon.gif’ style=’border:none;’/>

<span style=’font-size:16px; margin:0 8px 0 3px;’>PDF</span></a></b:if>

</b:if>



(Αν αφήσετε τον κώδικα όπως είναι, τα κουμπιά δε θα εμφανίζονται στην αρχική σελίδα αλλά μόνο στις σελίδες των αναρτήσεων. Αν θέλετε τα κουμπιά να εμφανίζονται και στην αρχική σελίδα, σβήνετε τις 2 σειρές που επισήμανα με έντονη γραφή -bold-)



6. Αποθήκευση προτύπου και είμαστε έτοιμοι!



Μπορείτε να δείτε πως θα εμφανίζονται τα κουμπιά κάτω από τον τίτλο της παρούσας ανάρτησης.



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

Παρακάτω θα σας δώσω 3 κουμπιά και διαλέγετε όποιο θέλετε. Κάθε κουμπί συνοδεύεται από τον κώδικά του και για να το προσθέσετε απλά βάζετε τον κώδικά του αντί του κώδικα που σας έδωσα στο βήμα 5!





Κώδικας:

<b:if cond=’data:blog.pageType == "item"’>

<b:if cond=’data:blog.pageType == "index"’><a expr:href=’data:post.url + "?pfstyle=wp"’ style=" color:#6D9F00; text-decoration:none;" class="printfriendly" title="Printer Friendly and PDF"><img style="border:none;" src="http://cdn.printfriendly.com/pf-button-big.gif" alt="Print Friendly and PDF"/></a><b:else/><script src="http://cdn.printfriendly.com/printfriendly.js" type="text/javascript"></script><a href="http://www.printfriendly.com" style=" color:#6D9F00; text-decoration:none;" class="printfriendly" onclick="window.print(); return false;" title="Printer Friendly and PDF"><img style="border:none;" src="http://cdn.printfriendly.com/pf-button-big.gif" alt="Print Friendly and PDF"/></a></b:if>

</b:if>





Κώδικας:

<b:if cond=’data:blog.pageType == "item"’>

<b:if cond=’data:blog.pageType == "index"’><a expr:href=’data:post.url + "?pfstyle=wp"’ style=" color:#6D9F00; text-decoration:none;" class="printfriendly" title="Printer Friendly and PDF"><img style="border:none;" src="http://cdn.printfriendly.com/button-print-grnw20.png" alt="Print Friendly and PDF"/></a><b:else/><script src="http://cdn.printfriendly.com/printfriendly.js" type="text/javascript"></script><a href="http://www.printfriendly.com" style=" color:#6D9F00; text-decoration:none;" class="printfriendly" onclick="window.print(); return false;" title="Printer Friendly and PDF"><img style="border:none;" src="http://cdn.printfriendly.com/button-print-grnw20.png" alt="Print Friendly and PDF"/></a></b:if>

</b:if>





Κώδικας:

<b:if cond=’data:blog.pageType == "item"’>

<b:if cond=’data:blog.pageType == "index"’><a expr:href=’data:post.url + "?pfstyle=wp"’ style=" color:#6D9F00; text-decoration:none;" class="printfriendly" title="Printer Friendly and PDF"><img style="border:none;" src="http://cdn.printfriendly.com/pf_button_sq_grn_l.png" alt="Print Friendly and PDF"/></a><b:else/><script src="http://cdn.printfriendly.com/printfriendly.js" type="text/javascript"></script><a href="http://www.printfriendly.com" style=" color:#6D9F00; text-decoration:none;" class="printfriendly" onclick="window.print(); return false;" title="Printer Friendly and PDF"><img style="border:none;" src="http://cdn.printfriendly.com/pf_button_sq_grn_l.png" alt="Print Friendly and PDF"/></a></b:if>

</b:if>



Πηγή: Οι κωδικοί είναι από το: http://www.printfriendly.com/button

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




Post by Secra from Web in Greece




Προσθήκη τίτλου ανάρτησης δίπλα στο ‘Read More’!



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Καλησπέρα στους αναγνώστες του bloggertips.gr




Έχουν γραφτεί κατά καιρούς αναρτήσεις [1, 2, 3] που έχουν να κάνουν με το “read more”, δηλαδή τη δυνατότητα που έχουμε να “κόβουμε” τις αναρτήσεις της αρχικής σελίδας, έτσι ώστε να μην πιάνουν τόσο χώρο και να μην αργεί η φόρτωση της σελίδας μας.



Συνήθως, στην αρχική σελίδα, έχουμε μια μικρή περίληψη της ανάρτησης και από κάτω ένα link που λέει κάτι σαν “Συνέχεια του άρθρου”, “Διαβάστε περισσότερα” κ.ο.κ.



Σήμερα θα δούμε πως, μαζί με το “Διαβάστε περισσότερα”, θα εμφανίζεται δίπλα και ο τίτλος της κάθε ανάρτησης. (DEMO)



Διαδικασία:



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

2. Σχεδίαση

3. Επεξεργασία HTML

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

5. Πατώντας Ctrl + F αναζητούμε τον παρακάτω κώδικα…

<b:if cond=’data:post.hasJumpLink’>

<div class=’jump-link’>

<a expr:href=’data:post.url + "#more"’ expr:title=’data:post.title’><data:post.jumpText/></a>

</div>

</b:if>

… και τον αντικαθιστούμε με τον παρακάτω:

<b:if cond=’data:post.hasJumpLink’>

<div class=’jump-link’>

<a expr:href=’data:post.url + "#more"’ expr:title=’data:post.title’><data:post.jumpText/> <data:post.title /></a>

</div>

</b:if>



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



6. Πατήστε “Προεπισκόπηση” και αν είναι όλα καλά αποθηκεύετε το πρότυπό σας.



Αυτό ήταν όλο!



Πηγή: http://www.bloggerbuster.com/2011/04/how-to-add-post-titles-to-read-more.html

Copyrigths: http://www.bloggertips.gr/




Post by Secra from Web in Greece




Δημιουργία και προσθήκη φόρμας επικοινωνίας (contact form) στο blog σας βήμα-βήμα



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Καλησπέρα στους αναγνώστες του bloggertips.gr

Σήμερα θα δούμε πως μπορείτε να δημιουργήσετε και να προσθέσετε μια φόρμα επικοινωνίας (contact form) στο blog σας.



Υπάρχουν πολλές ιστοσελίδες που επιτελούν αυτή τη λειτουργία.

Εμείς θα χρησιμοποιήσουμε τη σελίδα emailmeform.com, η οποία είναι μία από τις καλύτερες, πλην δυσκολότερες στο είδος της.

Ένα παράδειγμα για το πως θα δείχνει η φόρμα επικοινωνίας που θα προσθέσετε μπορείτε να δείτε στο Web in Greece, blog παρουσιάσεων ιστοσελίδων (ανοίγει σε νέα καρτέλα!).


Δημιουργία Φόρμας Επικοινωνίας:



1. Μπαίνουμε στην αρχική σελίδα του EmailMeForm.

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



2. Στη σελίδα που θα μας εμφανιστεί, συμπληρώνουμε τα στοιχεία που ζητάει και κάνουμε κλικ στο “I agree to EmailMeForm Terms of Service”.




3. Αφού κάνουμε τα παραπάνω, κάνουμε κλικ στο:



4. Λογικά θα μας εμφανιστεί η παρακάτω σελίδα, η οποία μας ευχαριστεί και μας λέει να τσεκάρουμε το e-mail μας για να ενεργοποιήσουμε το λογαριασμό μας.




5. Συνδεόμαστε στο e-mail μας, ανοίγουμε το μήνυμα από το EmailMeForm (ψάξτε στα ανεπιθύμητα/spam αν δεν το δείτε στα εισερχόμενα) και κάνουμε κλικ στο μοναδικό link που περιέχεται στο μήνυμα, το οποίο θα μοιάζει με αυτό:

http://www.emailmeform.com/builder/account/signup_confirm/1fd9FiR7heLaopk6bZDY93raySE73n4Wc



6. Αφού κάνουμε κλικ στο link που είπαμε παραπάνω, η σελίδα που θα εμφανιστεί μας λέει πως έγινε η ενεργοποίηση του λογαριασμού μας. Επιπλέον, στο μήνυμα που θα εμφανιστεί λέει “Please click here to go into your Form Manager”. Κάνουμε κλικ στο “here” και συνεχίζουμε.




7. Στη σελίδα που θα εμφανιστεί, κάνουμε κλικ στο: και στη συνέχεια κάνουμε κλικ στην πρώτη επιλογή “Go to the Template section. I’d like to choose from a list of pre-made forms” για να διαλέξουμε μια φόρμα από τις ήδη υπάρχουσες.



8. Από το μενού αριστερά, φροντίζουμε να είναι επιλεγμένο το “Contact Form” και πατάμε:




9. Λογικά εμφανίζεται το παρακάτω παράθυρο:




10. Ήρθε η ώρα να προσαρμόσουμε τη φόρμα επικοινωνίας στα δεδομένα μας:



Είμαστε στο Form Settings και επεξεργαζόμαστε την αριστερή στήλη:



Form Title: Ο τίτλος, το όνομα της φόρμας μας. Μπορείτε π.χ. να την ονομάσετε “Επικοινωνία”, “Contact” ή ό,τι άλλο θέλετε. Αν δε θέλετε να εμφανίζεται τίτλος, απλά “ξετικάρετε” το “show on form”.

Description: Μια περιγραφή για τη φόρμα σας όπως “Συμπληρώστε τα παρακάτω πεδία για να έρθετε σε επαφή μαζί μου” κ.ο.κ. Αν δε θέλετε να προσθέσετε περιγραφή, αφήνετε το πεδίο κενό.

Time Zone: Είναι η ζώνη ώρας (για να βλέπετε τη σωστή ώρα όταν έρχεται κάποιο e-mail). Επιλέγετε το “(+2:00) Eastern Europe, Harare,… κλπ”. Αν ζείτε σε κάποια άλλη χώρα επιλέγετε την κατάλληλη ζώνη ώρας.

Confirmation Options: Αυτό είναι το τι θα εμφανιστεί σε αυτόν που θα επικοινωνήσει μαζί σας αφού στείλει το μήνυμα που θέλει. Αν επιλέξετε “Show Text”, πατάτε “Edit Text” και μπορείτε να γράψετε κάτι σαν “Ευχαριστώ που επικοινώνησες μαζί μου”. Αν επιλέξετε “Redirect URL”, όταν κάποιος σας στέλνει μήνυμα, μετά θα οδηγείται στη διεύθυνση που θέτετε εσείς (μπορείτε να βάλετε την αρχική σελίδα του blog σας).

Label Placement: Είναι η στοίχιση των τίτλων των πεδίων σε σχέση με τα πεδία. Αν το αφήσετε όπως είναι προεπιλεγμένο, εμφανίζει τον τίτλο του πεδίου και από κάτω το πεδίο. Αν επιλέξετε “Left Aligned”, θα εμφανίζεται δίπλα στο πεδίο ο τίτλος του στοιχισμένος αριστερά, ενώ αν επιλέξετε “Right Aligned”, θα εμφανίζεται δίπλα στο πεδίο ο τίτλος του στοιχισμένος δεξιά.

Styling Options: Από εδώ αλλάζουμε γραμματοσειρά, χρώματα (καλύτερα να μην πειράξουμε τα υπόλοιπα).

Form Width: Το πλάτος της φόρμας, καλύτερα να το αφήσουμε και αυτό κενό.

Send Button Name: Το όνομα του πλήκτρου που θα πατάνε οι αναγνώστες για να επικοινωνήσουν μαζί μας. Παραδείγματα: Send, Submit, Αποστολή, Υποβολή κ.ά.

Send Button alignment: Που θέλετε να εμφανίζετε το “Send Button”; Αριστερά (left), στη μέση (middle) ή δεξιά (right);

Anti Spam: Αν είστε ένα αρκετά δημοφιλές blog, συστήνω να επιλέξετε το “Show CAPTCHA Image Verification” ή “Show reCAPTCHA Verification” (καλύτερα το δεύτερο) για να αποφύγετε τα ανεπιθύμητα email (spam emails). Από την άλλη, αν δεν είστε ιδιαίτερα γνωστός/γνωστή στο χώρο του blogging, επιλέγετε “None” (αν παρατηρήσετε πως γεμίζετε spam emails, έχετε τη δυνατότητα να αλλάξετε τη ρύθμιση αργότερα).





Τελειώσαμε με το “Form Settings”, πάμε τώρα στο “Field Settings”, όπου, για να επεξεργαστούμε ένα πεδίο, κάνουμε απλά ένα αριστερό κλικ πάνω του. Οι ρυθμίσεις για τα πεδία είναι, σε γενικές γραμμές, οι ίδιες:




Field Label: Το όνομα του πεδίου.

Options: Επιλέξτε “Required” αν θέλετε να συμπληρωθεί οπωσδήποτε το πεδίο (θα εμφανιστεί και ένας αστερίσκος δίπλα του), ενώ το “Mask Field” είναι για να μην έχετε τη δυνατότητα να βλέπετε αυτό που πληκτρολόγησε αυτός που επικοινώνησε μαζί σας (συνιστάται πάντως να μην το επιλέγετε).

Show Field to: Everyone!

Cell Align: Η στοίχιση του πεδίου. Αριστερή (left), κέντρο (center) ή δεξιά (right).

Field Size: Το μέγεθος του πεδίου. Το 30 είναι μια καλή τιμή για τα πεδία “Name, Subject, Email” αλλά όχι και για το “Message”, για το οποίο υπάρχει έτοιμη, προεπιλεγμένη ρύθμιση.

Range: Από εδώ επιλέγετε να θέσετε περιορισμό για το πόσους χαρακτήρες (characters) ή πόσες λέξεις (words) θα “χωράει” το κάθε πεδίο.

Default Value: Είναι το προεπιλεγμένο κείμενο που θα έχει κάθε πεδίο, π.χ. μπορείτε να δώσετε στο πεδίο “Message” το κείμενο “εδώ γράφετε το κείμενό σας…”.

Instructions for User: Εδώ μπορείτε να δώσετε οδηγίες στους αναγνώστες σας για το πως θα συμπληρώσουν σωστά τα πεδία. Ίσως δε θα ήταν και πολύ καλή ιδέα να το βάλετε όμως, αφού είναι ξεκάθαρο τι ζητάτε σε κάθε πεδίο.



11. Μετά απ ‘όλα αυτά, πατάμε το κουμπί “Save Form” στον πάτο της φόρμας και στη συνέχεια επιλέγουμε το “Modify email notifications for this form”.



12. Στη σελίδα που θα μας εμφανιστεί διαχειριζόμαστε τις ειδοποιήσεις που θα μας έρχονται κάθε φορά που κάποιος στέλνει email μέσω της φόρμας επικοινωνίας:




Αν θέλετε να μη βλέπετε μεγάλες ή μικρές γραμματοσειρές, χρώματα, εικόνες κ.λπ., επιλέγετε “Send Emails in Plain Text” (τα emails θα σας έρχονται με μορφή HTML).



Recipients Emails: Μπορείτε να προσθέσετε έως 10 διευθύνσεις email στις οποίες θα λαμβάνετε τα μηνύματα μέσω της φόρμας.

Message From: Εδώ επιλέγετε από ποιον θα θέλατε να λαμβάνετε τα email, από το EmailMeForm ή από τις πραγματικές διευθύνσεις των αποστολέων; Αν θέλετε το πρώτο, επιλέγετε το “EmailMeForm Website”, ενώ για τη δεύτερη περίπτωση, επιλέγετε το “Retrieve Name from field x and Email from field y”. Αντικαθιστάτε τα x και y με το πεδίο “Όνομα” και “Email” αντίστοιχα (αν δεν είναι ήδη επιλεγμένα).



Αν θέλετε να βλέπετε την IP διεύθυνση του αποστολέα, επιλέγετε “Show Visitor IP In Email”. Προτού το επιλέξετε όμως, καλό θα ήταν να λαμβάνατε υπ ‘όψιν κατά πόσο θα θέλατε εσείς οι ίδιοι να βλέπουν οι παραλήπτες των μηνυμάτων σας την IP διεύθυνσή σας.



Include data for export: Αν θέλετε να μπορείτε να κάνετε εξαγωγή των στοιχείων των αποστολέων των μηνυμάτων που σας έρχονται, κάντε κλικ στην πρώτη επιλογή. Σε αντίθετη περίπτωση, επιλέγετε το “No, do not include it”.

Message Subject: Επιλέγετε “Retrieve from z”, όπου z επιλέγετε το πεδίο με το θέμα του μηνύματος.



13. Κάνουμε: και επιλέγουμε το “Open new window and test notifications” αν θέλετε να δοκιμάσετε τη νέα φόρμα επικοινωνίας που μόλις δημιουργήσατε.

Αν από την άλλη είστε σίγουροι πως τα κάνατε όλα σωστά, δεν υπάρχει λόγος για αυτό, οπότε πατάτε “Take me back to the Form Manager”.


Προσθήκη Φόρμας Επικοινωνίας στο blog μας:



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



1. Εμείς χρειαζόμαστε το “Code”, οπότε κάνουμε κλικ πάνω του.



2. Στη σελίδα που θα εμφανιστεί, κάνουμε κλικ στο “HTML Only”, το οποίο βρίσκεται στη στήλη στο αριστερό μέρος της σελίδας, και αντιγράφουμε τον κώδικα που μας δίνει.



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



4. Επεξεργασία αναρτήσεων > Επεξεργασία σελίδων και επιλέγουμε “ΝΕΑ ΣΕΛΙΔΑ”.



5. Βάζουμε έναν τίτλο για τη νέα σελίδα που πρόκειται να δημοσιεύσουμε και, στην “Επεξεργασία HTML” (όχι στη Σύνθεση!), κάνουμε επικόλληση τον κώδικα που κάναμε αντιγραφή προηγουμένως.



6. Αν κάνετε προεπισκόπηση, θα δείτε πως στο τέλος της φόρμας δείχνει το παρακάτω κείμενο:

Powered byEMF Web Form

Report Abuse

Αν θέλετε για οποιοδήποτε λόγο να το αφαιρέσετε, αναζητήστε πατώντας “Ctrl + F” στον κώδικα που επικολλήσατε και διαγράψτε το παρακάτω σημείο (αν έχετε αλλάξει γραμματοσειρά ή χρώματα στη φόρμα δε θα το βρείτε έτσι ακριβώς):

<div>

<font face="Verdana" size="2" color="#000000">Powered by</font><span style="position: relative; padding-left: 3px; bottom: -5px;"><img src=

"http://www.emailmeform.com/builder/images/footer-logo.png" /></span><font face="Verdana" size="2" color="#000000">EMF</font> <a style="text-decoration:none;" href="http://www.emailmeform.com/"

target="_blank"><font face="Verdana" size="2" color="#000000">Form Builder</font></a>

</div><a style="line-height:20px;font-size:70%;text-decoration:none;" href="http://www.emailmeform.com/report-abuse.html?http://www.emailmeform.com/builder/form/80df3RW2Nf1S78UpkQHnj" target=

"_blank"><font face="Verdana" size="2" color="#000000">Report Abuse</font></a>



7. Πατάμε “ΔΗΜΟΣΙΕΥΣΗ ΣΕΛΙΔΑΣ” και τελειώσαμε!


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

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

Παρακαλώ σεβαστείτε τα copyrigths της ανάρτησης.



Post by Secra from Web in Greece

Copyrigths: http://www.bloggertips.gr/




‘Follow us’ J-Query Social Bookmarking Widget



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Καλησπέρα στους αναγνώστες του bloggertips.gr.





Σήμερα θα προσθέσουμε ένα ακόμη gadget στη συλλογή μας με τα Social Bookmarking Gadgets, το οποίο επιτελεί 4 λειτουργίες: RSS Feed, Εγγραφή στο blog μέσω e-mail και link για τις σελίδες μας στα Facebook και Twitter.



Πάμε να δούμε πως θα το προσθέσουμε στο blog μας:



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

2. Σχεδίαση

3. Επεξεργασία HTML

4. Με Ctrl + F αναζητούμε το ]]></b:skin> και ακριβώς πριν από αυτό επικολλούμε τον παρακάτω κώδικα:

#social {

width: 98%;

height: 45px;

margin: 0;

padding: 10px 5px 5px 30px;

list-style: none;

border-right:solid 1px #853529;

position: relative;

background: url(http://2.bp.blogspot.com/-Nf6QgqI-jkc/Tas56HEUrwI/AAAAAAAAAxQ/hw_KYA9pPZA/follow-bg-abt.png) no-repeat left top;

}



#social p{

font-size:1.5em;

color:#FFFB98;

font-weight:bold;

float:left;

margin: 10px 10px 0 0;

text-shadow: 1px 1px 0px #000000;

filter: dropshadow(color=#000000, offx=1, offy=1);

}



.abt{

font-size:0.8em;

color:#787878;

float:right;

margin: 0 -30px 0 0;

text-shadow: 1px 1px 0px #ffffff;

filter: dropshadow(color=#ffffff, offx=1, offy=1);

}



#social li {

width: 32px;

height: 32px;

float: left;

margin-right: 3px;

}



#social li a {

float: left;

display: block;

width: 100%;

height: 100%;

text-indent: -1000em;

background-repeat: no-repeat;

text-decoration: none;

}



#social #rss {

background-image: url(http://2.bp.blogspot.com/-27yL99iDt70/Tas569zVJWI/AAAAAAAAAxo/NIEumM2DKRo/s400/allblogtools_rss.png);

}



#social #facebook {

background-image: url(http://4.bp.blogspot.com/-lfZmi7_j72c/Tas56hfwNxI/AAAAAAAAAxg/D_xE4bPyo60/s400/allblogtools_facebook.png);

}

#social #twitter {

background-image: url(http://2.bp.blogspot.com/-BHCqkqm4Dnw/Tas57UCTyAI/AAAAAAAAAxw/fCj4yjzJE0g/s400/allblogtools_twitter.png);

}

#social #mail {

background-image: url(http://1.bp.blogspot.com/–tzwYodHzk8/Tas56U26pSI/AAAAAAAAAxY/Xqxm-jfCPkA/s400/allblogtools_email.png);

}



span.tooltip {

background: #575757;

padding: 3px;

display: block;

width: 140px;

border: 1px solid #000000;

position: absolute;

margin-top:-40px;

color: #F0F0F0;

font-size:10px;

text-indent: 0;

font: Arial, sans-serif;

text-align: center;

-webkit-box-shadow: inset 2px 2px 2px #616161;

-moz-box-shadow: inset 2px 2px 2px #616161;

box-shadow: inset 2px 2px 2px #616161;

-moz-border-radius: 5px;

border-radius: 5px;

}



5. Στη συνέχεια, πάλι με Ctrl + F, αναζητούμε το </body> και ακριβώς πριν από αυτό επικολλούμε τον παρακάτω κώδικα:

<script type=’text/javascript’>

window.setTimeout(function() {

document.body.className = document.body.className.replace('loading', '');

}, 10);

</script>



<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js’ type=’text/javascript’/>

<script type=’text/javascript’>

//<![CDATA[

$(document).ready(function() {



$(‘#social li’).each(function() {



var $li = $(this);

var title = $li.find(‘a’).attr(‘title’);



$li.find(‘a’).removeAttr(‘title’);



$(‘<span class=”tooltip”/>’).text(title).appendTo($li.find(‘a’)).hide();





$li.find(‘a’).mouseover(function() {





var top = $(this).position().top;

var left = $(this).position().left;



$(this).find(‘span’).fadeIn()({

top: top,

left: left

}, ‘slow’);



});



$li.find(‘a’).mouseout(function() {





$(this).find(‘span’).fadeOut(‘slow’);





});



});





});



//]]>

</script>



6. Αποθήκευση προτύπου



Πάμε τώρα να προσθέσουμε το gadget στο blog μας:



7. Πάμε Σχεδίαση > Προσθήκη gadget > HTML/Javascript και στο παράθυρο που θα ανοίξει επικολλούμε τον παρακάτω κώδικα:

<ul id=”social”>

<p>Follow Us</p>

<li><a href=”http://blog-name.blogspot.com/feeds/posts/default?alt=rss” id=”rss” title=”Follow our Feeds”>Rss</a></li>



<li><a href=”Mail-Link#” id=”mail” title=”Subscribe to our newsletter”>Mail</a></li>



<li><a href=”Facebook-Link#” id=”facebook” title=”Like us on Facebook”>Facebook</a></li>



<li><a href=”Twitter-Link#” id=”twitter” title=”Follow us on Twitter”>Twitter</a></li>

</ul>



Αντικαθιστούμε το http://blog-name.blogspot.com με τη διεύθυνση (url) του blog μας (ή αν έχετε λογαριασμό στο Feedburner, αντικαταστήστε το http://blog-name.blogspot.com/feeds/posts/default?alt=rss με το url από το Feedburner (όπως θα δείτε στο παράδειγμα παρακάτω), το Mail-Link# με τη διεύθυνση στην οποία οι αναγνώστες μπορούν να κάνουν εγγραφή (subscribe) στο blog μας μέσω e-mail, το Facebook-Link# με το url της σελίδας ή του προφίλ μας στο Facebook και το Twitter-Link# με το url της σελίδας μας στο Twitter.



Για να καταλάβετε καλύτερα τι και πως θα το αντικαταστήσετε, ρίξτε μια ματιά στον παρακάτω κώδικα, ο οποίος αποτελεί παράδειγμα για το bloggertips.gr:

<ul id=”social”>

<p>Follow Us</p>

<li><a href=”http://feeds.feedburner.com/Johnpatrablog” id=”rss” title=”Follow our Feeds”>Rss</a></li>



<li><a href=”http://feedburner.google.com/fb/a/mailverify?uri=Johnpatrablog” id=”mail” title=”Subscribe to our newsletter”>Mail</a></li>



<li><a href=”https://www.facebook.com/bloggertips.gr” id=”facebook” title=”Like us on Facebook”>Facebook</a></li>



<li><a href=”https://twitter.com/#!/johnpatrablog” id=”twitter” title=”Follow us on Twitter”>Twitter</a></li>

</ul>



Για οποιοδήποτε πρόβλημα ή απορία αφήστε το σχόλιό σας.



Πηγές: http://www.allblogtools.com/tricks-and-hacks/blogger-follow-us-j-query-widget-social-icons/



Copyrigths: http://www.bloggertips.gr/



Post by Secra from Web in Greece




Font Size Control Widget για τα posts σας



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Καλησπέρα στους αναγνώστες του bloggertips.gr.




Σήμερα θα σας δείξω ένα gadget το οποίο θα βοηθήσει τους αναγνώστες του blog σας ώστε να μπορούν να ρυθμίζουν μόνοι τους, απλά και γρήγορα, το μέγεθος της γραμματοσειράς των κειμένων τα οποία δημοσιεύετε.



Το καλό με αυτό το gadget είναι ότι μπαίνει σχετικά εύκολα και το προσθέτετε στο σημείο που εσείς θέλετε.



Πάμε να δούμε τώρα πως θα το προσθέσετε:



Διαδικασία:


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

2. Σχεδίαση

3. Επεξεργασία HTML

4. Με Ctrl + F αναζητούμε το </head> και ακριβώς πριν από αυτό επικολλούμε τον παρακάτω κώδικα:

<script src=’http://sites.google.com/site/ciudadbloggerfiles/Home/mootools.js’ type=’text/javascript’/>

<script type=’text/javascript’>

window.addEvent('domready', function(){



var el = $('myElement'),

font = $('fontSize');



new Slider(el, el.getElement('.knob'), {

steps: 35, // Tamaño máximo de la letra

range: [8], // El 8 es el tamaño mínimo

onChange: function(value){

font.setStyle('font-size', value);

}

}).set(font.getStyle('font-size').toInt());



});

</script>



<style type=’text/css’>

div.slider {

width: 97%;

height: 26px;

background: url(http://4.bp.blogspot.com/-r0WKMic2VOs/TaJQD3MI26I/AAAAAAAAAxE/od7dEWVqFPw/slider-bg.gif) no-repeat right top;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

border:1px solid #708B95;

margin-top:40px;

}

div.slider div.knob {

background: url(http://4.bp.blogspot.com/-0iBbRw58HkM/TaDqwZuIN5I/AAAAAAAAAw8/g9445jD5q5w/s400/allblogtools-pin.png) no-repeat;

width: 32px;

height: 47px;

margin:-35px 0 0 0;

cursor: move;

}

div#fontSize {

height: 40px;

}

</style>



5. Με Ctrl + F αναζητούμε τον παρακάτω κώδικα:

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

<b:section class=’main’ id=’main’ showaddelement=’no’>

<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>

</b:section>



6. Πριν από τον παραπάνω κώδικα προσθέτουμε το <span id=’fontSize’> και μετά από αυτόν το </span>.



Δηλαδή ο κώδικας τελικά θα είναι έτσι:

<span id=’fontSize’>

<b:section class=’main’ id=’main’ showaddelement=’no’>

<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>

</b:section>

</span>



6. Αποθήκευση προτύπου και πάμε να προσθέσουμε το gadgetάκι.



7. Πάμε Σχεδίαση > Προσθήκη gadget > HTML/Javascript



8. Μέσα στο HTML gadget προσθέτουμε τον παρακάτω κώδικα:

<div id=”myElement” class=”slider”><div class=”knob”></div></div>



9. Πατάμε αποθήκευση και τελειώσαμε!



Πηγές: http://www.allblogtools.com/tricks-and-hacks/blogger-font-size-control-changing-j-query-widget/



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



Post by Secra from Web in Greece




Πρόγραμμα για να βρεις τον html code κάθε χρώματος!



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Ψάχνοντας στο διαδίκτυο, βρήκα ένα προγραμματάκι που πραγματικά με εντυπωσίασε, και είπα να το μοιραστώ μαζί σας.

Πρόκειται για το HTML color v1.4, το οποίο δείχνει τον κωδικό του κάθε χρώματος στο σημείο που βρίσκεται ο δείκτης του ποντικιού!

Είναι πάρα πολύ πρακτικό, κυρίως για δημιουργούς και προγραμματιστές blogs, αλλά και για τον κάθε έναν blogger.

Αν, για παράδειγμα, δείτε σε κάποια σελίδα ένα χρώμα που σας αρέσει, βάζοντας το δείκτη του ποντικιού σας πάνω στο χρώμα, αμέσως εμφανίζεται ο κωδικός του, σε τρεις μορφές. Html, που είναι και ο βασικός για τους bloggers, καθώς και σε RGB και Tcolor. Υπάρχει και μια τέταρτη ένδειξη, όπου δείχνει το ακριβές σημείο της οθόνης, όπου βρίσκεται ο δείκτης του ποντικιού.

Για πιο ακριβή αποτελέσματα, έχει και zoom μέχρι και 8x.

Έτσι, μπορείτε να αποθηκεύσετε τον κωδικό, και να το χρησιμοποιήσετε.



Το προγραμματάκι δεν χρειάζεται καν εγκατάσταση στον υπολογιστή. Είναι μόλις 147 Kb, και τρέχει απ’ ευθείας με διπλό κλικ.

Μπορείτε να το κατεβάσετε πατώντας το Download




Δοκιμάστε το, και είμαι σίγουρος ότι θα σας αρέσει.


Πηγές: http://ekabitis-tips-tricks.blogspot.com/
Copyrights: /




BACKGROUND ΧΡΩΜΑ ΣΕ ΤΙΤΛΟ ΑΝΑΡΤΗΣΗΣ ΚΑΙ ΠΕΡΙΕΧΟΜΕΝΟ ΑΝΑΡΤΗΣΗΣ



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Σήμερα θα δείτε πως μπορεί να αλλάξει το background χρώμα σε έναν τίτλο μιας ανάρτησης ή και στο περιεχόμενο της ανάρτησης. Δεν αλλάζουμε γενικώς τα χρώματα! Αυτά αλλάζουν μόνο από Σχεδίαση>Σχεδιαστή προτύπων>Προηγμένη. Εμείς απλά αλλάζουμε αλλιώς τα χρώματα σε μια μόνο ανάρτηση. Ο κωδικός είναι ίδιος και για τις δυο περιπτώσεις (τον τίτλο & το περιεχόμενο).



Όταν γράφετε λοιπόν μια ανάρτηση και θέλετε να αλλάξετε το background χρώμα στον τίτλο της, βάζετε το παρακάτω κωδικό:



Αντίστοιχα βάζετε τον παρακάτω κωδικό και αν θέλετε να αλλάξετε το περιεχόμενο της ανάρτηση (τον κωδικό τον επικολλάμε, ενώ βρισκόμαστε στην καρτέλα “Σύνθεση” και όχι “Επεξεργασία html”!):


<div style=”background:#000000; padding:5px 8px 5px 8px;”>ΕΔΩ_Ο_ΤΙΤΛΟΣ_ΤΗΣ_ΑΝΑΡΤΗΣΗΣ_ΣΑΣ_ή_ΤΟ_ΠΕΡΙΕΧΟΜΕΝΟ_ΤΗΣ</div>



ΕΔΩ_Ο_ΤΙΤΛΟΣ_ΤΗΣ_ΑΝΑΡΤΗΣΗΣ_ΣΑΣ_ή_ΤΟ_ΠΕΡΙΕΧΟΜΕΝΟ_ΤΗΣ ==> εδώ γράφετε ή τον τίτλο της ανάρτησής σας ή το περιεχόμενό της



background:#000000; ==> αυτό αντιπροσωπεύει το background χρώμα. Τους html κωδικούς των χρωμάτων μπορείτε να τα βρείτε από το http://www.bloggertips.gr/2009/08/html-color-codes-and-names.html





Είναι πολύ εύκολο όπως βλέπετε.


TIP:



Αν θέλετε να αλλάζετε τα χρώματα σε κάθε ανάρτησή σας, τότε μπορείτε να αποθηκεύσετε τον παραπάνω κωδικό σε κάθε ανάρτησή σας και να τον έχετε έτοιμο. Αυτό το κάνουμε από Ρυθμίσεις>Διαμόρφωση>Πρότυπο Ανάρτησης>Επικόλληση κώδικα και Αποθήκευση Ρυθμίσεων!

Και τώρα θα έχετε έτοιμο τον κώδικα κάθε φορά που θα γράφετε μια νέα ανάρτηση. Απλά θα αλλάζετε τα χρώματα.



Ελπίζω να σας φάνηκα χρήσιμος!



Πηγές κωδικών: http://gubhugreyot.blogdetik.com/, http://bloggershappiness.blogspot.com/

Copyrights: /




Βάλτε τους κωδικούς σας -html codes, scripts- σε ειδικά σχεδιασμένα κουτιά



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Γεια σας,



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

Όσοι ακόμα δεν έχετε καταλάβει τι εννοώ, απλά κοιτάξτε παρακάτω. Βλέπετε που έχω βάλει τους html κωδικούς μέσα σε κάτι ειδικά κουτάκια?



Σήμερα θα σας δείξω πως να το κάνετε κι εσείς αυτό.




Προσέξτε (!!!):



Αυτή η ανάρτηση δεν έχει καμία σχέση με αυτην την ανάρτηση: http://www.johnpatra.com/2009/10/html-blog-post-html-code.html (επισκεφτείτε την!)



Το Html code converter κάνει τους html κώδικες ορατούς. Η σημερινή ανάρτηση δεν έχει καμία σχέση με αυτό. Η σημερινή ανάρτηση, απλά δείχνει έναν ωραίο τρόπο για να εμφανίζονται ωραία οι κωδικοί αυτοί μέσα σε πλαίσια.



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



Επίσης μέσα σε αυτά τα πλαίσα-κουτιά δεν είναι απαραίτητο να βάζετε μόνο scripts. Μπορείτε να βάζετε ότι θέλετε.





Λοιπόν κάντε σύνδεση στον blogger account σας, και από τον πανόπτη μας, πατάμε στην καρτέλα “Σχεδίαση” (γιατί το αλλάξανε αυτό? εγώ ακόμα Διάταξη το λέω 🙂.



Πατήστε “Επεξεργασία html”.



Με την βοήθεια του ctrl+F, βρείτε τον παρακάτω κωδικό:


]]></b:skin>



Αφού τον βρείτε, επικολλήστε αμέσως από πάνω του, τον παρακάτω CSS κωδικό:


.codeview {

font-family: Arial, Helvetica, sans-serif;

color: #CC0000;

margin : 15px 35px 15px 15px;

padding : 10px;

clear : both;

list-style-type : none;

border-top : 2px solid #cccccc;

border-right : 2px solid #cccccc;

border-bottom : 2px solid #cccccc;

border-left : 2px solid #cccccc;

background-color: #FFFFFF;

}

.codeview li {

font-size : 13px;

line-height : 24px;

font-family : “Courier New”, “MS Sans Serif”, sans-serif, serif;

color : #333333;

font-weight : normal;

margin : 0;

padding : 0;

}



Αποθήκευσε το πρότυπό σου.



Πατήστε τώρα στην καρτέλα που λέει “Ρυθμίσεις”.



Στις υποκαρτέλες πατήστε στη “Διαμόρφωση”.



Κυλήστε με το ποντίκι σας κάτω-κάτω.



Εκεί που λέει “Πρότυπο Ανάρτησης”, βλέπετε που έχει δίπλα ένα πλαίσιο.



Λογικά αυτό το πλαίσιο θα σας είναι άδειο, εκτός αν χρησιμοποιείτε το read more ή έχετε βάλει κάτι άλλο. Τέλοσπάντων δεν μας ενδιαφέρει αν είναι άδειο ή γεμάτο.



Λοιπόν μέσα σε αυτό το πλαίσιο επικολλήστε τον παρακάτω κωδικό:


<div class=”codeview”>

Βάλετε ανάμεσα στους δύο κωδικούς ότι θέλετε να εμφανίζεται μέσα στο κουτάκι.

</div>



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



Είστε σχεδόν έτοιμοι.



Από εδώ και πέρα κάθε φορά που θα πηγαίνετε να γράψετε μια ανάρτηση (όταν γράφετε μια νέα ανάρτηση να βρισκόσαστε στην καρτέλα “Επεξεργασία html” και όχι στην καρτέλα “Σύνθεση”), θα βλέπετε τους κωδικούς που σας είπα να αποθηκεύστε πριν στις ρυθμίσεις>διαμόρφωση. Αν δεν θέλετε να βάλετε κάποιο κωδικό απλά τους σβήνετε και συνεχίζετε να γράφετε την ανάρτηση. Αν θέλετε όμως να βάλετε κάτι που να φαίνεται μέσα στο κουτάκι, το βάζετε ανάμεσα στους δύο κωδικούς. Φυσικά σβήνετε τα δικά μου λόγια, τα “Βάλετε ανάμεσα στους δύο κωδικούς ότι θέλετε να εμφανίζεται μέσα στο κουτάκι.”. Αυτά τα έχω γράψει για να σας βοηθήσω. Αυτά τα σβήνετε σε κάθε περίπτωση. Εσείς απλά βάζετε αυτό που θέλετε να φαίνεται στο κουτάκι ανάμεσα στο <div class=”codeview”> και ανάμεσα στο </div>. Σας τα είπα αναλυτικά και πιστεύω να τα καταλάβατε. Αν όχι, αφήστε ένα σχόλιο και πείτε μου, που “κολλάτε”.


Α και κάτι άλλο:



Μπορείτε να ρυθμίσετε μόνοι σας τα χρώματα του κουτιού. Για παράδειγμα κάποιος που έχει μαύρο background (εγώ!) δεν θα βάλει σκούρα χρώματα στο κουτί, αλλά φωτεινά. Και, αντίθετα, κάποιος που έχει άσπρο φόντο στο blog του, θα βάλει σκούρα χρώματα στο κουτί για να δημιουργείται η απαραίτητη αντίθεση χρωμάτων.



Αλλά πως τα αλλάζετε?



Πολύ απλά από τον κωδικό που επικολλήσαμε πάνω από το ]]></b:skin>.



Σε αυτόν τον κωδικό βλέπετε που έχει διάφορους κωδικούς τέτοιας μορφής: #000000 ?



Στη γλώσσα του html, κάθε χρώμα συμβολίζεται με ένα # και έξι νούμερα μετά από το #.



Επομένως το #000000 είναι ένα χρώμα και συγκεκριμένα το μαύρο.



Πειραματιστείτε μόνοι σας λίγη ώρα με τους κωδικούς των χρωμάτων, μέχρι να φτιάξετε έναν ωραίο συνδιασμό που να ταιριάζει και με τα χρώματα του blog σας.



Για να βρείτε εύκολα και γρήγορα τους 6ψήφιους κωδικούς των χρωμάτων της αρεσκείας σας πατήστε εδώ!



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



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




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




Τίτλος στις φωτογραφίες του blog μας



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Γεια σας. Eίμαι ο ekabitis, και σήμερα έχω να σας δείξω έναν απλούστατο τρόπο για να βάζεται τίτλο στις φωτογραφίες σας. Τι σημαίνει αυτό; Όταν περνάμε το ποντίκι από την φωτογραφία, θα εμφανίζεται αυτόματα για κάποια δευτερόλεπτα ένας τίτλος μέσα σε πλαίσιο με το θέμα που θα έχουμε γράψει εμείς πριν. Αυτό βοηθάει τους αναγνώστες σχετικά σε τι αναφέρεται η φωτογραφία.
Δείτε παρακάτω τι εννοώ. Στην φωτο του blog μου, μόλις βάζεις το ποντίκι πάνω στην φωτογραφία, αμέσως εμφανίζεται ο τίτλος “Πλατεία συντάγματος”, και δίνει στον αναγνώστη την πληροφορία που θέλουμε.

Πάμε λοιπόν:
Όπως ήδη θα γνωρίζεται, η κάθε φωτογραφία, με μορφή html, που βάζουμε στο blog μας έχει περίπου την μορφή αυτή. (Αν δεν γνωρίζεται πως βρίσκουμε την html μορφή κάθε φωτογραφίας, πατήστε εδώ. Θα το βρήτε προς το τέλος της ανάρτησης).


<a href=”http://freefotos.gr/”><img src=”http://freefotos.gr/images/e9863jf2dc749dhaeuo.jpg” border=”0″ alt=”freefotos.gr” /></a>


Μέσα εκεί προσθέτουμε τον κωδικό

title=”—–“


Τις παύλες τις αντικαθιστούμε, γράφοντας αυτό που θέλουμε να φαίνεται.Έτσι θα πάρει την ακόλουθη μορφή.


<a href=”http://freefotos.gr/”><img src=”http://freefotos.gr/images/e9863jf2dc749dhaeuo.jpg” border=”0″ title=”—–” alt=”freefotos.gr” /></a>


Πατάμε αποθήκευση και είμαστε έτοιμοι.




Τι είναι το HTML?



Print Friendly and PDFPrintPrint Friendly and PDFPDF



Τα αρχικά HTML προέρχονται από τις λέξεις HyperText Markup Language. Η html δεν είναι μια γλώσσα προγραμματισμού. Είναι μια γλώσσα σήμανσης (markup language), δηλαδή ένας ειδικός τρόπος γραφής κειμένου. Ο καθένας μπορεί να δημιουργήσει ένα αρχείο HTML χρησιμοποιώντας απλώς εναν επεξεργαστή κειμένου. Aποτελεί υποσύνολο της γλώσσας SGML (Standard Generalized Markup Language) που επινοήθηκε από την IBM προκειμένου να λυθεί το πρόβλημα της μη τυποποιημένης εμφάνισης κειμένων στα διάφορα υπολογιστικά συστήματα. Ο browser αναγνωρίζει αυτόν τον τρόπο γραφής και εκτελεί τις εντολές που περιέχονται σε αυτόν. Αξίζει να σημειωθεί ότι η html είναι η πρώτη και πιο διαδεδομένη γλώσσα περιγραφής της δομής μιας ιστοσελίδας. Η html χρησιμοποιεί τις ειδικές ετικέτες (τα tags) να δώσει τις απαραίτητες οδηγίες στον browser. Τα tags είναι εντολές που συνήθως ορίζουν την αρχή ή το το τέλος μιας λειτουργίας. Τα tags βρίσκονται πάντα μεταξύ των συμβόλων < και >. Π.χ. Οι οδηγίες είναι case insensitive, δεν επηρεάζονται από το αν έχουν γραφτεί με πεζά (μικρά) ή κεφαλαία. Ένα αρχείο HTML πρέπει να έχει κατάληξη htm ή html.

Κανόνες

Για να μπορούν οι browser να ερμηνεύουν σχεδόν απόλυτα σωστά την html έχουν θεσπιστεί κάποιοι κανόνες. Αυτοί οι κανόνες είναι γνωστοί ως προδιαγραφές. Επομένως σχεδόν κάθε είδος υπολογιστή μπορεί να δείξει το ίδιο καλά μια ιστοσελίδα. Οι πρώτες προδιαγραφές ήταν η html 2.0. Πρόβλημα προέκυψε όταν η Μicrosoft και η Νetscape πρόσθεσαν στην html τέτοιες δυνατότητες που στην αρχή τουλάχιστον ήταν συμβατές μόνο με συγκεκριμένους browser. Ακόμη και σήμερα υπάρχουν διαφορές στην απεικόνιση κάποιας σελίδας από διαφορετικούς browsers. Ιδιαίτερο είναι το πρόβλημα όταν η ιστοσελίδα, εκτός απο “καθαρή” HTML περιλαμβάνει και εφαρμογές Javascript.



Η HTML σήμερα

Σήμερα πολλοί είναι εκείνοι που δημιουργούν μια ιστοσελίδα σε κάποιο πρόγραμμα που επιτρέπει την δημιουργία χωρίς την συγγραφή κώδικα. Η κοινή άποψη πάνω στο θέμα όμως είναι ότι κάτι τέτοιο είναι αρνητικό επειδή ο δημιουργός δεν έχει τον απόλυτο έλεγχο του κώδικα με αποτέλεσμα πολλές φόρες να υπάρχει οπτικό χάος στην προσπάθεια των browser να εμφανίσουν την ιστοσελίδα. Για το σκοπό αυτό έχει δημιουργηθεί ειδικό λογισμικό, που επιτρέπει το “στήσιμο” της σελίδας οπτικά, χωρίς τη συγγραφή κώδικα, δίνει όμως τη δυνατότητα παρέμβασης ΚΑΙ στον κώδικα. Χαρακτηριστικό παράδειγμα το λογισμικό Dreamweaver της Adobe και το FrontPage της Microsoft.



Από Wikipedia




Pull-Down Menu with Links (+ έτοιμο widget)



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Σήμερα θα σας εξηγήσω την τεχνική του pull-down menu και πόσο σημαντική και λειτουργική είναι για τα blogs.
Σας έφτιαξα μάλιστα και ένα widget για να το βάλετε στο blog σας.

Έχω επισκεφτεί εκατοντάδες blogs και σε πολλά βλέπω να έχουν στην sidebar (=η στήλη δεξιά ή αριστερά από τις αναρτήσεις) μια ακατέβατη σειρά από links.
Άλλο να έχεις 10-20 links γνωστών σου και άλλο να έχεις 50+ links από διάφορες ιστοσελίδες.Με αυτόν τον τρόπο δεν βοηθάτε τους επισκέπτες σας να πλοηγηθούν ευχάριστα στη σελίδα σας.
Σας προτείνω λοιπόν να χρησιμοποιήσετε το pull-down menu.Δεν θα διαγράψετε κανένα link απλά θα τα συγχωνεύσετε και δεν θα σας τρώνε πια τόσο χώρο.
Κάτω σας έχω τον κωδικό για το pull-down menu:


<form><select onchange=”window.open(this.options[this.selectedIndex].value,’_blank’)” style=”width: 150px;” name=”menu” size=”1“><option/> Φιλικά ιστολόγια<!– change the links with your own –><option value=”http://www.johnpatrablog.blogspot.com//>Johnpatra BLOG</select></form>



Εξήγηση του κωδικού:

“width: 150 px;” :Το πλάτος του widget.Αν θέλετε αλλάζετε το 150.
size=”1“:Το μέγεθος.Αλλάξτε το 1 αν θέλετε.Θα μεγαλώσει το ύψος του.
Φιλικά ιστολόγια :Γράψτε τον δικό σας τίτλο των λινκς που θα βάλετε.
value=”http://www.johnpatrablog.blogspot.com/ :Εδώ γράφετε την διεύθυνση του λινκ που θέλετε να βάλετε.
Johnpatra BLOG :Και εδώ γράφετε το όνομα του λινκ.

Με την ίδια λογική μπορείτε να βάλετε όσα λινκς θέλετε.

Εγώ σας έφτιαξα ένα τέτοιο widget.Δείτε το παρακάτω και αν σας αρέσει σας έχω τον κωδικό του.
Όπως μάθατε παραπάνω ‘μπορείτε να προσθέσετε ή να αφαιρέσετε στο παρακάτω widget links και να το προσαρμόσετε όπως το θέλετε.
Σας παρακαλώ μην σβήσετε τον τίτλο του.Μπορείτε να τον αλλάξετε βέβαια και να μην λεει “Εξωτερικές συνδέσεις” ,όπως λέει τώρα.


Widget:


Εξωτερικές συνδέσεις:












Κωδικός html:

(Πανόπτης>Διάταξη>Προσθήκη gadget>HTML/JavaScript>εδώ επικολλήτε τον παρακάτω κώδικα και το αποθηκεύετε.)


<center><p>
<a href=”http://johnpatrablog.blogspot.com/2009/11/pull-down-menu-with-links-widget.html” target=”_blank”>Εξωτερικές συνδέσεις:</a>
</p></center>

<center>
<form><select onchange=”window.open(this.options[this.selectedIndex].value,’_blank’)” style=”width: 150px;” name=”menu” size=”1“><option/> Εφημερίδες<!– change the links with your own –><option value=”http://news247.gr/Headlines.htm “/> Πρωτοσέλιδα<option value=”http://bestpress.gr/newspapers.php/”/> Bestpress<option value=”http://www.agelioforos.gr/”/> Αγγελιoφόρος<option value=”http://www.avgi.gr”/> ΑΥΓΗ<option value=”http://www.ethnos.gr”/> ΕΘΝΟΣ<option value=”http://www.e-typos.com”/> Ελεύθερος Τύπος<option value=”http://www.enet.gr”/> Ελευθεροτυπία<option value=”http://www.kathimerini.gr”/> Καθημερινή<option value=”http://www.tanea.gr”/> TA NEA<option value=”http://www.makthes.gr”/> MAKEΔONIA<option value=”http://tovima.dolnet.gr”/> ΤΟ ΒΗΜΑ<option value=”http://www.rizospastis.gr”/> Ριζοσπάστης<option value=”http://www.espressonews.gr”/> Espresso<option value=”http://www.aixmi.gr/”/> AIXMH<option value=”http://www.argo-mme.gr/”/> ΑΡΓΩ<option value=”http://www.realnews.gr”/> REAL NEWS<option value=”http://www.paron.gr”/> Το Παρόν<option value=”http://digital.stokarfi.gr”/> ΤΟ ΚΑΡΦΙ<option value=”http://www.protothema.gr/index.php”/> ΠΡΩΤΟ ΘΕΜΑ<option value=”http://www.topontiki.gr”/> Το Ποντίκι<option value=”http://www.imerisia.gr”/> ΗΜΕΡΗΣΙΑ<option value=”http://www.isotimia.gr”/> ΙΣΟΤΙΜΙΑ<option value=”http://www.ependitis.gr”/> ΕΠΕΝΔΥΤΗΣ</select></form>



<form><select onchange=”window.open(this.options[this.selectedIndex].value,’_blank’)” style=”width: 150px;” name=”menu” size=”1″><option/> Ξένος Τύπος<!– change the links with your own –><option value=”http://www.abcnews.go.com/”/> ABCnews <option value=”http://www.ananova.com/”/> Ananova <option value=”http://www.cbsnews.com/”/> CBSnews <option value=”http://www.corriere.it/”/> CorriereDellaSera <option value=”http://www.taz.de/”/> DieTageszeitung <option value=”http://www.economist.com/”/> Economist<option value=”http://www.elpais.com/”/> ElPais<option value=”http://www.euronews.net/”/>Euronews <option value=”http://www.floridatoday.com/”/> Floridatoday<option value=”http://www.france24.com/en/”/> France24<option value=”http://www.huffingtonpost.com/”/> Huffington post<option value=”http://www.hurriyet.com.tr/anasayfa/”/> Hurriyet<option value=”http://global.nytimes.com/?iht”/> InternationalHeraldTribune<option value=”http://www.iraqdaily.com/”/> Iraqdaily<option value=”http://www.itar-tass.com/”/> ItarTass<option value=”http://www.lastampa.it/redazione/default.asp”/> LaStampa<option value=”http://www.lefigaro.fr/index.php”/> LeFigaro<option value=”http://www.liberation.fr/”/> Liberation<option value=”http://www.msnbc.msn.com/”/> NBC<option value=”http://www.newsweek.com/”/> Newsweek<option value=”http://www.pravda.ru/”/> Pravda<option value=”http://www.pressassociation.com/”/> PressAssociation<option value=”http://www.rai.it/”/> Rai<option value=”http://www.russiatoday.com/”/> RussiaToday<option value=”http://www.salon.com/”/> Salon<option value=”http://tg24.sky.it/tg24/”/> SKY.it<option value=”http://www.independent.co.uk/”/> The Independent<option value=”http://www.todayszaman.com/tz-web/”/> Today’sZaman<option value=”http://www.turkishpress.com/”/> TurkishPress<option value=”http://www.usatoday.com/”/> Usatoday<option value=”http://www.dallasnews.com/”/> Dallas News <option value=”http://www.latimes.com/”/> Los Angeles Times <option value=”http://www.washingtonpost.com/”/> Washington Post <option value=”http://europe.wsj.com/home-page”/> Wall Street Journal <option value=”http://timesofindia.indiatimes.com/”/> The Times of India <option value=”http://www.reuters.com/”/> Reuters <option value=”http://news.sky.com/skynews”/> Sky News<option value=”http://www.foxnews.com/”/>FOXNews <option value=”http://www.telegraph.co.uk/”/> Telegraph<option value=”http://www.nytimes.com/pages/index.html?partner=rss”/> NYT new yorks time<option value=”http://www.time.com/time/?xid=rss-topstories”/> TIME<option value=”http://www.lemonde.fr/”/> Le Monde<option value=”http://www.dw-world.de/english/?maca=en-rss-en-all-1573-rdf”/> Deutsche Welle<option value=”http://www.guardian.co.uk/”/> The Guardian<option value=”http://www.spiegel.de/”/> Spiegel online<option value=”http://www.nypost.com/news/nypdblotter/nypdblotter.htm”/> NY Post<option value=”http://www.cnn.com/?eref=rss_topstories”/> CNN<option value=”http://www.repubblica.it/”/> Repubblica<option value=”http://www.express.co.uk/home”/> Daily Express<option value=”http://www.zeit.de/index”/> Zeit online<option value=”http://news.bbc.co.uk/2/hi/business/default.stm”/> BBC news</select></form>



<form><select onchange=”window.open(this.options[this.selectedIndex].value,’_blank’)” style=”width: 150px;” name=”menu” size=”1″><option/> Φιλικά ιστολόγια<!– change the links with your own –><option value=”http://www.johnpatrablog.blogspot.com/”/>Johnpatra BLOG</select></form>



<form><select onchange=”window.open(this.options[this.selectedIndex].value,’_blank’)” style=”width: 150px;” name=”menu” size=”1″><option/> Χρήσιμα links<!– change the links with your own –><option value=”http://www.geophysics.geol.uoa.gr/main_greek.html”/> σεισμικότητα σε πραγματικό χρόνο<option value=”http://dias.aueb.gr/~kxv/webcameras.htm”/> όλες οι web cams στον ελλαδικό χώρο<option value=”http://ekloges.ypes.gr/pages/index.html”/> τα αποτελέσματα των ελληνικών Ευρωεκλογών 2009<option value=”http://www.elections2009-results.eu/el/index_el.html”/> αναλυτικά τα αποτελέσματα κάθε χώρας από τις 27 στις Ευρωεκλογές του 2009<option value=”http://www.news247.gr/Headlines.htm”/> Όλα τα πρωτοσέλιδα<option value=”http://news.google.gr/nwshp?hl=el&tab=wn”/> Ολες οι τελευταίες ειδήσεις<option value=”http://www.naftemporiki.gr/athexrealtime/”/> Χρηματιστήριο<option value=”http://www.in.gr/ath/duty/hospital.asp”/> Εφημ. Νοσοκομεία <option value=”http://www.astynomia.gr/traffic-athens.php”/> Κίνηση στους δρόμους<option value=”http://www.hnms.gr/hnms/greek/observation/observation_region_html”/> Καιρός<option value=”http://www.asxetos.gr/article.aspx?i=920″/> Ράδιο ταξί<option value=”http://www.athinorama.gr/cinema/default.aspx?i=1697″/> Σινεμά <option value=”http://www.in.gr/thes/phones/default.htm”/> Τηλ. ανάγκης<option value=”http://www.fsa.gr/duties.asp”/> Φαρμακεία</select></form>




<form><select onchange=”window.open(this.options[this.selectedIndex].value,’_blank’)” style=”width: 150px;” name=”menu” size=”1″><option/> Ομογένεια<!– change the links with your own –><option value=”http://www.comgrecotrieste.it/”/> Comgrecotrieste <option value=”http://www.comunitaellenicadigenova.it/”/> Comunitaellenicadigenova <option value=”http://www.desmos-grece.com/”/> Desmos-grece <option value=”http://diaspora-grecque.com/modules/altern8news/”/> Diaspora-grecque <option value=”http://www.diasporafm.us/”/> Diasporafm <option value=”http://www.ellines-rl.it/”/> Ellines-rl <option value=”http://www.emiratesgreeks.com/”/> Emiratesgreeks <option value=”http://www.episkeptis.de/”/> Episkeptis <option value=”http://www.grecia.it/”/> Grecia <option value=”http://www.greeceinworld.com/”/> Greeceinworld <option value=”http://www.greek.swedishportal.net/”/> Greek.swedishportal <option value=”http://www.greeknewsonline.com/”/> Greeknewsonline <option value=”http://www.hellenicnews.com/”/> HellenicNews<option value=”http://www.kalami.net/”/>Kalami <option value=”http://www.neafon.com/magazin/index.php”/> NeaFon<option value=”http://neoskosmos.com/news/en”/> Nέος Κόσμος<option value=”http://www.kosmos.com.au/”/> O Kόσμος<option value=”http://www.oek-germany.de/index.php”/> Oμοσπονδία Ελληνικών Κοινοτήτων<option value=”http://www.platpub.com/”/> PlatyrralosPublishing<option value=”http://www.sofiatimes.com/”/> SofiaTimesMagazine<option value=”http://www.swr.de/-/id=116/1p6o6z0/index.html”/> Swr.de<option value=”http://www.bhma.net/”/> Βήμα<option value=”http://2opseis.neolaia.de/”/> Δύο όψεις<option value=”http://www.elliniki-gnomi.com/”/> Εlliniki-gnomi<option value=”http://www.ekirikas.com/”/> Εθνικός Κήρυξ<option value=”http://www.osepe.de/”/> Ποντιακή Νεολαία<option value=”http://www.thenationalherald.com/”/> ΤheNationalHerald</select></form>




<form><select onchange=”window.open(this.options[this.selectedIndex].value,’_blank’)” style=”width: 150px;” name=”menu” size=”1″><option/> Ραδιόφωνο<!– change the links with your own –><option value=”mms://a74.I5001644073.c50016.e.lm.akamaistream.net/D/74/50016/v0001/reflector:44073″/> Alpha Radio 98.9<option value=”http://www.phonografos.gr/”/> ΦΩΝΟΓΡΑΦΟΣ<option value=”mms://62.103.164.228:8080/net105″/> NET 105.8<option value=”http://www.live24.gr/radio/sfera.jsp”/> Sfera<option value=”http://www.radiodistomo.com/media_player.htm”/> RADIO DISTOMO<option value=”http://www.24-7radio.us/radio1.asx/”/> ΚΑΛΑΜΙ-USA<option value=”http://www.live24.gr/radio/generic.jsp?sid=1348″/> RealFM 97,8<option value=”http://www.skai.gr/master_livestream.php?rdtv=1025&rtk=r&lsc=2″/> SKAI 100,3<option value=”http://www.live24.gr/radio/generic.jsp?sid=1417″/> City 99,5<option value=”http://www.live24.gr/radio/generic.jsp?sid=1327″/> Antenna 97<option value=”http://www.live24.gr/radio/generic.jsp?sid=1329″/> A8HNA 98,4<option value=” http://www.live24.gr/radio/generic.jsp?sid=1323″/> Flash 96<option value=”http://live24.gr/radio/kissfm.jsp”/> Kiss Fm 92,9<option value=”http://www.live24.gr/radio/diesi.jsp”/> Δίεση 101,3<option value=” http://delicast.com/radio/Greece/Melodia_FM_99.2″/> Μελωδία 99,2<option value=”http://radiotime.com/WebTuner.aspx?StationId=50098&”/> 92.3 Lampsi FM<option value=”http://delicast.com/radio/Greece/Ry8mos_104.5_FM”/> ΡΥΘΜΟΣ 104.5 FM<option value=”http://delicast.com/radio/Greece/Love_Radio_97.5″/> Love Radio 97,5<option value=”http://delicast.com/radio/Greece/Derti_98.6″/> Derti 98.6</select></form>



<form><select onchange=”window.open(this.options[this.selectedIndex].value,’_blank’)” style=”width: 150px;” name=”menu” size=”1″><option/> Τηλεόραση<!– change the links with your own –><option value=”http://www.parliament.gr/videoaudio/default.asp”/> Βουλή TV<option value=”http://ert.ntua.gr/tv.ram”/> ERT World<option value=”http://www.cybc.com.cy/index.php?option=com_wrapper&Itemid=170″/> CyBC Κύπρος<option value=”http://www.blueskytv.gr”/> BlueSkyTV<option value=”http://www.megatv.com/summaries.asp?catid=14161&tag=10682″/> MEGA TV<option value=”http://news.bbc.co.uk/player/nol/newsid_6900000/newsid_6903100/6903113.stm?bw=nb&mp=wm&asb=1&news=1&ms3=50&ms_javascript=true&bbcws=2″/> BBC world<option value=”http://www.cnn.com/video/live/live_asx.html”/> CNN live<option value=”http://www.msnbc.msn.com/id/21134540/vp/22887506#22887506″/> MSNBC<option rtk=”t&lsc/” value=”mms://live1.wm.skynews.servecast.net/skynews_wmlz_live300k/”/> SKY NEWS<option value=”http://www.c-span.org/Watch/C-SPAN_wm.aspx”/> C-SPAN (usa)<option value=”http://www.nasa.gov/multimedia/nasatv/index.html”/> NASA TV</select></form>
</center>



Αφήστε ένα σχόλιο αν θέλετε να πείτε κάτι.




Κωδικός html μέσα σε κουτάκι (ειδικό για να αντιγράφουν τον κωδικό του banner σας)



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Καλησπέρα σε όλους.

Σήμερα θα σας δείξω πως να βάλετε έναν κωδικό html μέσα σε κουτάκι.Με αυτόν τον τρόπο περιορίζετε το μεγάλο μήκος ενός κώδικα χωρίς όμως να τον σβήνετε.Αυτό το κουτάκι είναι ειδικό για να βάζετε τους κωδικούς των banner σας ώστε να μπορούν εύκολα να τους αντιγράψουν οι επισκέπτες σας.Μάλιστα όποιος πατάει μέσα στο κουτάκι αυτό επιλέγεται αυτόματα όλο το περιεχόμενο του.Για να δείτε τι ακριβώς εννοώ δείτε τα κουτάκια με τους κωδικούς των banner μου στο http://johnpatrablog.blogspot.com/2009/07/banners.html

Π.χ.



Αν δεν σας αρέσει ο τρόπος με το κουτάκι, θα σας φανεί χρήσιμη αυτή η ανάρτηση:
http://johnpatrablog.blogspot.com/2009/10/html-blog-post-html-code.html

Επίσης για να καταλάβετε τα παρακάτω βεβαιωθείτε ότι έχετε διαβάσει αυτην την ανάρτηση:http://johnpatrablog.blogspot.com/2009/09/picture-html-code.html

Ο κωδικός λοιπόν για το παραπάνω κουτάκι είναι ο:


<textarea class=”example-code” cols=”80″ rows=”3″ onclick=”this.focus();this.select()”>Εδώ_βάζετε_τον_κώδικα_που_θέλετε</textarea>



Αλλάζετε τα πράσινα γράμματα και βάζετε ότι θέλετε (δεν είναι υποχρεωτικό να μπαίνει μόνο κώδικας από banner ,αλλά κυρίως για αυτό χρησιμοποιείται)

Τον παραπάνω κωδικό μπορείτε να τον βάλετε σαν gadget στο blog σας είτε μέσα σε μια ανάρτηση.

Τα σχόλια σας είναι πάντα ευπρόσδεκτα ότι κι αν λένε.




Πως ρυθμίζεις τη φωτεινότητα μιας φωτογραφίας?



Print Friendly and PDFPrintPrint Friendly and PDFPDF



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

Δηλαδή θα σας εξηγήσω πως να φτιάξετε μια φώτο όπως είναι η παρακάτω:
(περάστε με το ποντίκι από πάνω της)

johnpatrablog

Για να καταλάβετε αυτά που θα σας πω παρακάτω ,θα πρέπει να έχετε διαβάσει πρώτα την παρακάτω ανάρτηση:
http://johnpatrablog.blogspot.com/2009/09/picture-html-code.html

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


<img alt=”johnpatrablog” src=”http://i723.photobucket.com/albums/ww239/johnpatra/banners/cooltext432291289.png” height=”50″ width=”150″ />


Για να ρυθμίσετε την φωτεινότητα της θα πρέπει να προσθέσετε κάποιους κωδικούς ώστε ο κώδικας να γίνει έτσι:


<img
data-onmouseout=”this.style.opacity=0.5;this.filters.alpha.opacity=40″ data-onmouseover=”this.style.opacity=1;this.filters.alpha.opacity=100″
style=”opacity:0.4;filter:alpha(opacity=40)” alt=”johnpatrablog” width=”150″ src=”http://i723.photobucket.com/albums/ww239/johnpatra/banners/cooltext432291289.png” height=”50″/>


Με τον ίδιο τρόπο ρυθμίζετε και μια φώτο που να είναι λινκ.
Από έτσι…


<a href=”http://www.johnpatrablog.blogspot.com/” target=”_blank”>
<img alt=”johnpatrablog” src=”http://i723.photobucket.com/albums/ww239/johnpatra/banners/cooltext432291289.png” height=”50″ width=”150″ /></a>


…ο κώδικας γίνεται έτσι:


<a
data-onmouseover=”this.style.opacity=1;this.filters.alpha.opacity=100″
data-onmouseout=”this.style.opacity=0.5;this.filters.alpha.opacity=40″
style=”opacity:0.4;filter:alpha(opacity=40)”
href=”http://www.johnpatrablog.blogspot.com/” target=”_blank”>
<img alt=”johnpatrablog” width=”150″ src=”http://i723.photobucket.com/albums/ww239/johnpatra/banners/cooltext432291289.png” height=”50″/></a>



Απλά προστέθετε τους παραπάνω κωδικούς στην δικιά σας φωτογραφία.
Μπορείτε να ρυθμίσετε όσο θέλετε τη φωτεινότητά της.Σας έχω μαρκάρει με κίτρινο τη μεταβλητή που μπορείτε να την βάλετε από 0.1 εως 0.9.

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