Blogger Tips – Tricks – Gadgets – Templates – Hacks

Widget εμφανισης banner με τυχαία σειρά! – Random Banner Widget



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Καλησπέρα σας από τον admin,



μετά από blog-ο-αποχή αρκετών μηνών -ίσως και χρόνου- αποφάσισα να γράψω μια ανάρτηση. Απείχα από το blogging λόγω πανελληνίων εξετάσεων, στις οποίες πήγα καλά και πέρασα εκεί που ήθελα. Τον τελευταίο καιρό, όπως θα διαπιστώσατε άλλωστε, η ροή νέων αναρτήσεων είναι απελπιστικά μικρή και αυτό σκοπεύω να αλλάξει σιγά-σιγά (θα χρειαστεί χρόνος για να επανέλθω 100%), αρχίζοντας από σήμερα ουσιαστικά με μια νέα ανάρτηση.



Πρόκειται για ένα gadget στο οποίο προσθέτετε διάφορα banners και αυτό εμφανίζει μόνο ένα κάθε φορά. Η εναλλαγή ανάμεσα στα διάφορα banners γίνεται με τυχαία σειρά!



Είναι ιδανικό για blogs τα οποία έχουν πολλές φωτογραφίες στην αρχική τους σελίδα.

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

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



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



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

2. Πανόπτης > Σχεδίαση > (Στοιχεία Σελίδας) > Προσθήκη gadget > HTML/JavaScript

3. Επικολλείτε εκεί τον παρακάτω κώδικα και κάνετε μετά μερικές τροποποιήσεις σε αυτόν:


<script language=”JavaScript”>

images = new Array(3);

images[0] = “<a href = ‘διευθυνση 1‘ rel=’nofollow’ ><img src=’διευθυνση-της-φωτο 1‘ border=’0’height=’60px’ width=’468px’ ></a>”;

images[1] = “<a href = ‘διευθυνση 2′ rel=’nofollow’ ><img src=’διευθυνση-της-φωτο 2′ border=’0’height=’60px’ width=’468px’ ></a>”;

images[2] = “<a href = ‘διευθυνση 3′ rel=’nofollow’ ><img src=’διευθυνση-της-φωτο 3′ border=’0’height=’60px’ width=’468px’ ></a>”;

index = Math.floor(Math.random() * images.length);

document.write(images[index]);

</script>



Τροποποιήσεις:



αλλάζετε το διεύθυνση 1 με τον σύνδεσμο στον οποίο θέλετε να οδηγεί το πρώτο banner που θα βάλετε

αλλάζετε το διευθυνση-της-φωτο 1 με τον σύνδεσμο του banner σας, π.χ. http://www.cs.utsa.edu/~wagner/berlin/brand.jpg

μεταβάλλετε το μέγεθος του banner σας, αλλάζοντας τις μεταβλητές στα width και height





προσθέστε κ αλλες φωτογραφίες προσθέτοντας το παρακάτω:


images[0] = “<a href = ‘διεύθυνση 1′ rel=’nofollow’ ><img src=’διευθυνση-της-φωτο 1′ border=’0′ height=’60px’ width=’468px’ ></a>”;



εκεί που λέει images[0] αλλάξτε το 0 κάθε φορά βάζοντας 1, 2, 3, κλπ. ανάλογα με το πόσα banner θα βάλετε

και στο τέλος στο new Array(3) , αντί για 3 βάλτε τον αριθμό των banner που βάλατε



οτι πρόβλημα προκύψει ==> σχόλιο!



Πηγές: http://widcraft.blogspot.com/2012/06/random-banner-widget-for-blogger.html

Copyrights: /




Blogger Dynamic Views (τι είναι, πως τα εφαρμόζω, θετικά-αρνητικά)



Print Friendly and PDFPrintPrint Friendly and PDFPDF


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



Σήμερα θα μιλήσουμε για τη νέα λειτουργία του blogger η οποία έγινε διαθέσιμη σε όλους πριν από μερικές ημέρες (28/9/2011 για την ακρίβεια), τα Dynamic Views.







Τι είναι λοιπόν τα Dynamic Views και πώς μπορούμε να τα εφαρμόσουμε;



Τα Dynamic Views είναι ένας νέος τρόπος προβολής των blog μας. Περιλαμβάνει επτά νέους τρόπους προβολής των blog μας: Classic, Mosaic, Sidebar, Flipcard, Snapshot, Timeslide και Magazine (δείτε την παρακάτω εικόνα για να πάρετε μια ιδέα από το καθένα!).

Όπως μπορείτε να δείτε από την παραπάνω εικόνα, κάθε τρόπος προβολής (πχ Classic, Mosaic) διαφέρει αρκετά από τους υπόλοιπους.



Για να εφαρμόσετε κάποιο από τα παραπάνω στο blog σας, ακολουθήστε την παρακάτω διαδικασία:



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

2. “Δοκιμάστε την ενημερωμένη διεπαφή του Blogger” (προαιρετικά)

3. “Πρότυπο”

4. “Προσαρμογή”

5. “Dynamic Views” και επιλέγετε ένα από τα επτά διαθέσιμα πρότυπα

6. “Εφαρμογή στο ιστολόγιο” και “Προβολή ιστολογίου” για να δείτε το αποτέλεσμα!



Μετά τη μεγάλη αλλαγή στο περιβάλλον διαχείρισης του blog μας, τώρα έρχεται μια νέα μεγάλη αλλαγή, αυτή τη φορά στον τρόπο προβολής του blog μας.



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



Μας άρεσε:

-Το απλό, καθαρό και όμορφο design των νέων προτύπων.

γρήγορη φόρτωση των σελίδων (αποτέλεσμα του από πάνω).

διαδραστικότητα των νέων προτύπων.

-Τα έτοιμα +1, Tweet και Like buttons που προσφέρονται από μόνα τους σε κάθε πρότυπο.

-Η φόρτωση πολλών post στην αρχική σελίδα, κάτι που δεν απαιτεί χρόνο, αφού οι αναρτήσεις που είναι παρακάτω φορτώνουν με το scrollάρισμα προς τα κάτω.

-Η δυνατότητα που έχουν οι επισκέπτες να προβάλλουν το blog σας με επτά τρόπους, ανεξάρτητα με το ποιον από τους επτά έχετε προ-επιλέξει εσείς.



Δε μας άρεσε:

-Το γεγονός πως δε μπορούμε να προσαρμόσουμε (προς το παρόν τουλάχιστον, δεν ξέρουμε αν θα υπάρξει τέτοια δυνατότητα στο μέλλον) το blog μας όπως θέλουμε εμείς.

Δεν έχουμε πρόσβαση στην HTML.

Δεν μπορούμε να προσθέσουμε δικά μας gadget.

-Η λειτουργία Dynamic Views δεν είναι διαθέσιμη για όλα τα blogs! Δε φταίει το πρότυπο που έχετε, καθώς σε δύο ολόιδια blogs που δοκίμασα να εφαρμόσω τα Dynamic Views, στο ένα εφαρμόστηκε ενώ στο άλλο όχι! Ίσως είναι θέμα χρόνου, θα δείξει…

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



(Επίσης πρέπει να γνωρίζετε πως αν έχετε επιλέξει να βλέπετε το blog μόνο εσείς, να μην είναι δηλαδή ορατό σε οποιονδήποτε, τότε δε θα μπορείτε πάλι να εφαρμόσετε τα Dynamic Views!)



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



Είναι φανερό πως η blogger προσπαθεί να κρατήσει τους bloggerposters (εμάς και εσάς δηλαδή!) στην πλατφόρμα της. Είναι επίσης φανερό πως κάνει βήματα εμπρός όσον αφορά το θέμα του design στα blog μας. Αυτό που δε μπορούμε να καταλάβουμε όμως, εγώ τουλάχιστον, είναι γιατί δεν ανεβαίνει επίπεδο και στον τομέα της ευχρηστίας.



Πώς να μην μεταπηδήσεις ύστερα σε κάποια άλλη, επίσης δωρεάν, πλατφόρμα, τη στιγμή που δε μπορείς να τροποποιήσεις το blog σου στη blogger, έστω σε ένα βασικό επίπεδο;



Copyrights: /

Post by Secra from WebRev.gr




Αλλαγή του προτύπου του blog για κινητά (How to change blogger mobile template)



Print Friendly and PDFPrintPrint Friendly and PDFPDF


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



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

Μέσα στις μεγάλες αλλαγές που πραγματοποιήθηκαν στο blogger μέσα στο 2011 (η σημαντικότερη εκ των οποίων είναι η αλλαγή στο περιβάλλον του), συμπεριλαμβάνεται και η δυνατότητα που μας δόθηκε να επιλέξουμε ανάμεσα σε 27 έτοιμα πρότυπα ώστε να βελτιώσουμε τον τρόπο με τον οποίο βλέπουμε το blog μας από τα κινητά.



Πάμε να δούμε τι πρέπει να κάνουμε:



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

2. Επιλέγουμε “Δοκιμάστε την ενημερωμένη διεπαφή του Blogger“, επιλογή η οποία βρίσκεται στο πάνω μέρος της αρχικής σελίδας του blogger.

3. Επιλέγουμε το blog στο οποίο θέλουμε να κάνουμε αλλαγές.

4. Πατάμε κλικ στο “Πρότυπο“, από τη λίστα στα αριστερά.



Έχει δύο επιλογές: “Ζωντανά στο ιστολόγιο” και “Κινητό“, εμάς προφανώς μας ενδιαφέρει η δεύτερη επιλογή, οπότε κάνουμε κλικ στο κουμπί που έχει από κάτω που μοιάζει με γρανάζι.



5. Στο παράθυρο που θα εμφανιστεί επιλέγουμε “Ναι. Εμφάνιση προτύπων για κινητά σε κινητές συσκευές“.



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



Όταν καταλήξουμε σε αυτό που θέλουμε, πατάμε “Αποθήκευση “και τελειώσαμε! Εύκολο, έτσι;



~

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

~



Copyrights: /



Post by Secra from Web in Greece




ΕΝΑΛΛΑΣΣΟΜΕΝΕΣ ΕΙΚΟΝΕΣ (Νο2)



Print Friendly and PDFPrintPrint Friendly and PDFPDF




Νέοι bloggers γειά σας !Σήμερα σας παρουσιάζω το κώδικα που κάνει τις εικόνες σας onmouseover (δηλαδή, όταν περνάει από πάνω τους το ποντίκι να αλλάζουν όψη)…βασική προυπόθεση όμως είναι να ταιριάζουν λίγο στα μεγέθη αυτές οι φωτογραφίες (δηλ. και οι 2 πλαγιαστές, η και οι 2 όρθιες)

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

Ο τρόπος που βάζουμε το κώδικα είναι γνωστός, και σας τον ξαναθυμίζω:

BLOGGER επεξεργασία διάταξης=>Σχεδίαση=>Στοιχεία Σελίδας=>GADGET=>HTML/JavaScript :




Μηχανή Αναζήτησης με το όνομά σας ή και banner στα πιο διάσημα styles



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Από το http://www.funnylogo.info/create.asp μπορείτε να δείτε το username σας, στα πιο διάσημα styles διάφορων εταιριών ανα τον κόσμο. Οπότε είναι σαν να φτιάχνετε banner σας. Αλλά ο βασικός σκοπός του site δεν είναι να παίξετε με τα styles των εταιριών και να φτιάξετε bannerάκια, αλλά να βάλετε σαν αρχική σελίδα, την μηχανή ανάζητησης από το site αυτό. Για παράδειγμα να έχει ο καθένας ως αρχική σελίδα την μηχανή αναζήτησης με το δικό του λογότυπο. Όπως π.χ. είναι η http://funnylogo.info/engines/Google/Red/johnpatra.aspx



Όπως και να χει είναι ένα έξυπνο site και αξίζει να το δείτε.



Να μερικά που έφτιαξα για μένα:



Σε Google Style:




Σε Coca-Cola Style:




Σε Harry Potter Style:



Keep Blogging!

johnpatra




Βάλτε στις φωτογραφίες σας watermark για να μην σας τις “κλέβουν”



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Πολλοί θέλουν να προστατεύουν με κάθε τρόπο το περιεχόμενο των ιστοσελιδών τους.

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

Όπως είδα η προηγούμενή μου ανάρτηση (http://www.johnpatra.com/2010/06/blog.html) που αναφερόταν στην προστασία του γραπτού περιεχόμενού σας, σας έλυσε τα χέρια!

Πραγματικά αυτο το ποστ μου έχει κάνει μεγάλη επιτυχία, αφού το βλέπω παντού.

Σήμερα θα ασχοληθώ με την προστασία του εικονικού σας περιχομένου, δηλαδή των εικόνων σας.

Ο μόνος τρόπος για να προστατέψετε τις εικόνες σας από τους επιτήδειους, είναι να βάλετε ένα υδατογράφημα (watermark).

Να μια εικόνα με watermark (το Genius DV):




Η σελίδα από την οποία θα βάλετε watermark είναι η PicMarkr




Δεν χρειάζεται να κάνετε ούτε λογαριασμό.

Ακολουθήστε βήμα-βήμα τα βήματα της σελίδας και θα τα βρείτε όλα, είμαι σίγουρος.



Μια φιλική παράκληση μόνο:



Μην βάζετε watermark σε κάθε φωτογραφία, ακόμα και να μην είναι δικιά σας!

Γιατί φαντάζεστε τι θα γινόταν, αν το έκαναν όλοι αυτό?

Βάζετε watermark μόνο στις δικιές σας φωτογραφίες, που για να τις τραβήξετε, κοπιάσατε πραγματικά.



posted by johnpatra




Προσθήκη εικόνας για background (φόντο) – Add background image



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Πραγματικά είναι απίστευτα έυκολο να βάλετε μια εικόνα της επιλογής σας για φόντο (background) στο blog σας. Το μόνο δύσκολο είναι να βρείτε την εικόνα που θέλετε.

Λοιπόν βρείτε πια εικόνα θέλετε να έχετε για background. Αν θέλετε να τις αλλάξετε τις διαστάσεις, κάντε το από το Resizepic. Αφού έχετε επιλέξει ποια εικόνα θέλετε για φόντο στο blog σας, ακολουθήστε τα παρακάτω βήματα:



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

2. Σχεδίαση

3. Στοιχεία σελίδας

4. Προσθήκη gadget

5. HTML/JavaScript

6. Επικόλληση του παρακάτω κωδικού:




<style type=”text/css”>body {background-image:url(ΕΔΩ_ΤΟ_URL_ΤΗΣ_ΕΙΚΟΝΑΣ_ΣΑΣ);background-attachment:fixed;}.bkgspc {margin-top:10px;font-size:11px;font-family:Arial;}.bkgspc </style><div class=”bkgspc” align=”center”>Visit <a href=”http://www.johnpatra.com/” target=”_blank”>Johnpatra.com</a></div>



Απλά εκεί που γράφω “ΕΔΩ_ΤΟ_URL_ΤΗΣ_ΕΙΚΟΝΑΣ_ΣΑΣ“, βάζετε το url της εικόνας που επιθυμήτε και μετά αποθηκεύετε.




Pop up παράθυρο, για να βλέπετε τις εικόνες



Print Friendly and PDFPrintPrint Friendly and PDFPDF


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

Βέβαια έχετε την επιλογή του
target_blank, όπου βάζοντάς το στον html κωδικό της φωτογραφίας, αυτή ανοίγει αυτόματα σε νέο παράθυρο.

Σήμερα όμως έχω να προτείνω και έναν άλλο τρόπο. Να ανοίγει η εικόνα μας σε ένα καινούριο pop up παράθυρο.

Φαίνετε πολύ πιο όμορφο και κυρίως πολύ πρακτικό για τον επισκέπτη, ο οποίος μπορεί, (αφού την δει σε πλήρη ανάπτυξη), να την κλείσει με ένα κλικ.

Κάντε κλικ στην παρακάτω εικόνα, να δείτε πως λειτουργεί και πως φαίνετε.












Η εφαρμογή του είναι πολύ απλή και εύκολη.

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


Παίρνουμε για παράδειγμα την παραπάνω φωτογραφία.

Ο Html κωδικός της είναι έτσι



<a onblur=”try {parent.deselectBloggerImageGracefully();} catch(e) {}” href=”http://4.bp.blogspot.com/_f2yaFv_baV0/S_V7Nf8vR8I/AAAAAAAABog/TikH7cfnPCo/s1600/__PA270229.jpg”><img style=”display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 175px;” src=”http://4.bp.blogspot.com/_f2yaFv_baV0/S_V7Nf8vR8I/AAAAAAAABog/TikH7cfnPCo/s320/__PA270229.jpg” border=”0″ alt=”” id=”BLOGGER_PHOTO_ID_5473416393983477698″ /></a>



Παίρνουμε τώρα τον παρακάτω κωδικό



target=”_blank” onclick=”window.openundefinedthis.href, ‘popupwindow’, ‘width=800, height=440, resizable=no, scrollbars=yes, menubar=no, toolbar=no, status=no’); return false;”



και τον προσθέτουμε αμέσως πριν το κλείσιμο (>) του κωδικού της φωτό.

Θα φαίνεται δηλαδή έτσι



<a onblur=”try {parent.deselectBloggerImageGracefully();} catch(e) {}” href=”http://4.bp.blogspot.com/_f2yaFv_baV0/S_V7Nf8vR8I/AAAAAAAABog/TikH7cfnPCo/s1600/__PA270229.jpg” target=”_blank” onclick=”window.open(this.href, ‘popupwindow’, ‘width=800, height=440, resizable=no, scrollbars=yes, menubar=no, toolbar=no, status=no’); return false;” ><img style=”display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 175px;” src=”http://4.bp.blogspot.com/_f2yaFv_baV0/S_V7Nf8vR8I/AAAAAAAABog/TikH7cfnPCo/s320/__PA270229.jpg” border=”0″ alt=”” id=”BLOGGER_PHOTO_ID_5473416393983477698″ /></a>



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




Αυτό ήταν όλο. Πατάμε δημοσίευση, και αν πάτε τώρα στην ανάρτηση και κάνετε κλικ στην εικόνα, θα εμφανιστεί σε pop up παράθυρο.

Post by Ekabitis







Τίτλος στις φωτογραφίες του 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>


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




Αλλαγή διαστάσεων εικόνας



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Πηγή:techn-all-ogy

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

Μόλις μπείτε θα δείτε το πλαίσιο της εικόνας που υπάρχει παραπάνω. Πατάτε αναζήτηση, βρίσκεται την εικόνα που θέλετε, βάζετε τις διαστάσεις που θέλετε και αυτόματα το site μετατρέπει την εικόνα στις νέες διαστάσεις που θέσατε. Μετά είτε πατάτε δεξί κλικ στη νέα εικόνα και αποθήκευση, είτε υπάρχει η επιλογή download για να την κατεβασετε.

Η διαδικασία είναι δωρεάν, αρκετά εύκολη και διαρκεί μόλις ένα με δύο λεπτά.




Προσθήκη μπάρας που μπορείτε να βάλετε gadgets πάνω από την επικεφαλίδα του blog σας



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Καλησπέρα,

σήμερα θα σας πω πως θα βάλετε μια επιπλέον μπάρα πάνω από την επικαφαλίδα του blog σας στην οποία θα μπορείτε να βάλετε ότι gadget θέλετε.Είναι πολύ απλό να το κάνετε.Μπορείτε τώρα να μην θέλετε να βάλετε κάτι πάνω από την επικεφαλίδα σας αλλά μπορεί στο μέλλον να την χρησιμοποιήσετε.Για αυτό σας συνιστώ να το κάνετε τώρα και όποτε θέλετε να βάλετε κάτι να το βρείτε έτοιμο.

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

Για να την βάλετε, ακολουθήστε τα παρακάτω βήματα:

1.Σύνδεση από τον blogger.com

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

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


<div id=’header-wrapper’>


Αμέσως από κάτω του θα βρείτε αυτό:


<b:section class=’header’ id=’header’ maxwidgets=’1‘ showaddelement=’no‘>



Τώρα λοιπόν θα κάνουμε μερικές αλλαγές.
Εκεί που λέει maxwidgets=’1′ αλλάξτε το 1 με το 9
και εκεί που λέει showaddelement=’no’ αντικαταστείστε το no με το yes

Στο τέλος δηλαδή θα φαίνεται έτσι:


<div id=’header-wrapper’>

<b:section class=’header’ id=’header’ maxwidgets=’9‘ showaddelement=’yes‘>



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

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




Διάσημα banners για τα blogs που πρέπει να βάλετε στο blog σας



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Σε αυτό το ποστ σας σύλλεξα μερικά πολύ γνωστά banners για τα blogs και την ελευθερία τους.
Τα παρακάτω banners τα ψάρεψα από διάφορα blogs.
Δεν ξέρω ποιος τα έφτιαξε πάντως είναι πολύ ωραία και έχουν και νόημα.
Πολλά blogs έχουν ένα από αυτά.
Παρακάτω σας τα έχω με τον κωδικό τους για να τα βάλετε στο blog σας αν σας αρέσουν αλλά κυρίως αν συμφωνείτε με αυτά που γράφουν.

Έχω ανεβάσει όλα τα banners στον server του freefotos που από ότι ξέρω είναι αρκετά αξιόπιστος.Έχω ρυθμίσει το κάθε μπαννερ να είναι σύνδεσμος σε αυτήν εδώ την ανάρτηση και έτσι όποιος επισκέπτης σας θέλει να βάλει ένα να οδηγηθεί αμέσως εδώ (δεν θα φύγει από το blog σας ‘θα ανοίξει σε νέα καρτέλα) και να βάλει κι αυτός ένα.Σας παρακαλώ πολύ λοιπόν να μην αλλάξετε τον σύνδεσμο ώστε να διαδωθούν αυτά τα banners σε όλους.

Για να βάλεις ένα από τα παρακάτω banners στο blog σου πας στον Πανόπτη σου,από εκεί στην Διάταξη, πατάς Προσθήκη gadget ,επιλέγεις το HTML/JavaScript και εκεί αντιγράφεις τον κώδικα του banner που θέλεις να βάλεις.Μην ξεχάσεις να το αποθηκεύσεις κι είσαι έτοιμος!

Τα μπάννερς:




HTML Κωδικός:


<center>
<a href=”http://johnpatrablog.blogspot.com/2009/11/banners-blogs-blog.html” target=”_blank”><img border=”0″ alt=”wm7i7xg6xwax1t2zv309.jpg” src=”http://freefotos.gr/images/wm7i7xg6xwax1t2zv309_thumb.jpg”/></a>
</center>






HTML Κωδικός:


<center>
<a href=”http://johnpatrablog.blogspot.com/2009/11/banners-blogs-blog.html” target=”_blank”><img border=”0″ alt=”ojg3ri3yxjfrhnwutg.jpg” src=”http://freefotos.gr/images/ojg3ri3yxjfrhnwutg_thumb.jpg”/></a>
</center>






HTML Κωδικός:


<center>
<a href=”http://johnpatrablog.blogspot.com/2009/11/banners-blogs-blog.html” target=”_blank”><img border=”0″ alt=”l8ykj9y6is7wwx9r87el.jpg” src=”http://freefotos.gr/images/l8ykj9y6is7wwx9r87el_thumb.jpg”/></a>
</center>





HTML Κωδικός:


<center>
<a href=”http://johnpatrablog.blogspot.com/2009/11/banners-blogs-blog.html” target=”_blank”><img border=”0″ alt=”t95vpdlomwfe3rlz1ogp.jpg” src=”http://freefotos.gr/images/t95vpdlomwfe3rlz1ogp_thumb.jpg”/></a>
</center>





HTML Κωδικός:


<center>
<a href=”http://johnpatrablog.blogspot.com/2009/11/banners-blogs-blog.html” target=”_blank”><img border=”0″ alt=”9li5lv7baoo7e53998wx.jpg” src=”http://freefotos.gr/images/9li5lv7baoo7e53998wx_thumb.jpg”/></a>
</center>






HTML Κωδικός:


<center>
<a href=”http://johnpatrablog.blogspot.com/2009/11/banners-blogs-blog.html” target=”_blank”><img border=”0″ alt=”f5n426zmxd2l4zkn20s6.jpg” src=”http://freefotos.gr/images/f5n426zmxd2l4zkn20s6_thumb.jpg”/></a>
</center>






HTML Κωδικός:


<center>
<a href=”http://johnpatrablog.blogspot.com/2009/11/banners-blogs-blog.html” target=”_blank”><img border=”0″ alt=”3qbrn9kx607m7cts000.jpg” src=”http://freefotos.gr/images/3qbrn9kx607m7cts000_thumb.jpg”/></a>
</center>






HTML Κωδικός:


<center>
<a href=”http://johnpatrablog.blogspot.com/2009/11/banners-blogs-blog.html” target=”_blank”><img border=”0″ alt=”po71ef73rh9vi2tie0m1.jpg” src=”http://freefotos.gr/images/po71ef73rh9vi2tie0m1_thumb.jpg”/></a>
</center>






HTML Κωδικός:


<center>
<a href=”http://johnpatrablog.blogspot.com/2009/11/banners-blogs-blog.html” target=”_blank”><img border=”0″ alt=”ut22y3t2mqd2evad67o.jpg” src=”http://freefotos.gr/images/ut22y3t2mqd2evad67o_thumb.jpg”/></a>
</center>






HTML Κωδικός:


<center>
<a href=”http://johnpatrablog.blogspot.com/2009/11/banners-blogs-blog.html” target=”_blank”><img border=”0″ alt=”lrg4ki984u6bmx39ozr1.jpg” src=”http://freefotos.gr/images/lrg4ki984u6bmx39ozr1_thumb.jpg”/></a>
</center>






HTML Κωδικός:


<center>
<a href=”http://johnpatrablog.blogspot.com/2009/11/banners-blogs-blog.html” target=”_blank”><img border=”0″ alt=”vzqp40j35ugrv7fwyt4p.png” src=”http://freefotos.gr/images/vzqp40j35ugrv7fwyt4p_thumb.png”/></a>
</center>




zbyl7ycbkqjuyrrzmoyd.gif

HTML Κωδικός:


<center>
<a href=”http://johnpatrablog.blogspot.com/2009/11/banners-blogs-blog.html” target=”_blank”><img border=”0″ alt=”zbyl7ycbkqjuyrrzmoyd.gif” src=”http://i723.photobucket.com/albums/ww239/johnpatra/th_ubab10.gif”/></a>
</center>






HTML Κωδικός:


<center>
<a href=”http://johnpatrablog.blogspot.com/2009/11/banners-blogs-blog.html” target=”_blank”><img border=”0″ alt=”zbyl7ycbkqjuyrrzmoyd.gif” src=”http://i723.photobucket.com/albums/ww239/johnpatra/UBAB.gif?t=1259363764″/></a>
</center>




4627t1uv3442avywee5.gif

HTML Κωδικός:


<center>
<a href=”http://johnpatrablog.blogspot.com/2009/11/banners-blogs-blog.html” target=”_blank”><img border=”0″ alt=”4627t1uv3442avywee5.gif” src=”http://i723.photobucket.com/albums/ww239/johnpatra/th_killing_thumb.gif”/></a>
</center>






HTML Κωδικός:


<center>
<a href=”http://johnpatrablog.blogspot.com/2009/11/banners-blogs-blog.html” target=”_blank”><img border=”0″ alt=”wm7i7xg6xwax1t2zv309.jpg” src=”http://freefotos.gr/images/kt5rtbggpi98ojd43cwm.gif”/></a>
</center>






HTML Κωδικός:


<center>
<a href=”http://johnpatrablog.blogspot.com/2009/11/banners-blogs-blog.html” target=”_blank”><img border=”0″ alt=”wm7i7xg6xwax1t2zv309.jpg” src=”http://freefotos.gr/images/zyi64xga5km1a8xtft.jpg”/></a>
</center>






HTML Κωδικός:


<center>
<a href=”http://johnpatrablog.blogspot.com/2009/11/banners-blogs-blog.html” target=”_blank”><img border=”0″ alt=”wm7i7xg6xwax1t2zv309.jpg” src=”http://freefotos.gr/images/kk4wme1gkd7bj0mnj357.gif”/></a>
</center>






HTML Κωδικός:


<center>
<a href=”http://johnpatrablog.blogspot.com/2009/11/banners-blogs-blog.html” target=”_blank”><img border=”0″ alt=”wm7i7xg6xwax1t2zv309.jpg” src=”http://freefotos.gr/images/buab541rb24zr5sgv3fl.png”/></a>
</center>






HTML Κωδικός:


<center>
<a href=”http://johnpatrablog.blogspot.com/2009/11/banners-blogs-blog.html” target=”_blank”><img border=”0″ alt=”wm7i7xg6xwax1t2zv309.jpg” src=”http://freefotos.gr/images/oipudrwp05r0h2w45xls.png”/></a>
</center>



Η παραπάνω λίστα με τα μπαννερς θα ανανεώνεται κάθε φορά που θα βρίσκω ένα παρόμοιο banner.
Αν έχετε να μου προτείνετε κάποιο σας παρακαλώ πείτε το μου αφήνοντας μου ένα σχόλιο.




Create upload and embed in html code flash shockwave (.swf) file-banner in your blog



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Σήμερα θα σας δείξω τον τρόπο με τον οποίον θα μπορούμε όλοι να βάλουμε ένα banner
(σε .swf μορφή) στο blog μας.
Τελευταία βλέπω συχνά banners σε μορφή .swf στα blogs.Έχουν γίνει “διάσημα” διότι είναι ξεχωριστά από τα απλά συχνά banners και τραβούν την προσοχή του κόσμου.
Για να εμφανίζονται τα shockwave (.swf) αρχεία στον καθέναν μας θα πρέπει να έχουμε εγκαταστήσει το Adobe Flash Player στον υπολογιστή μας.

Μπορείτε να φτιάξετε ένα banner σε .swf μορφή με δύο τρόπους:

1)Είτε χρησιμοποιώντας τα κατάλληλα προγράμματα όπως το Aleo Flash Intro Banner Maker,

2)είτε να τα φτιάξετε online από websites που κάνουν αυτήν την δουλειά όπως αυτά εδώ και το Flashvortex.com.

Αφού λοιπόν έχετε φτιάξει το flash banner σας σε μορφή .swf πάντα ‘πρέπει να το ανεβάσετε κάπου για να σας δώσει το link (http://yourbannerlink.swf).Και αυτό γιατί ακόμα δεν έχετε το link σε .swf του banner σας.
(Βέβαια σε μερικά sites σας δίνουν κατευθείαν τον html κωδικό οπότε δεν χρειάζεται να τον φτιάξετε εσείς.)
Σας προτείνω λοιπόν να το ανεβάσετε στο hotlinkfiles κάνοντας έναν free λογαριασμό.

Αφού λοιπόν το ανεβάσατε εκεί έχετε πλέον και το link του (http://yourbannerlink.swf).

Τώρα λοιπόν πάμε να φτιάξουμε τον html κωδικό για να τον βάλουμε στο blog μας.

Ο κωδικός είναι ο εξης:


<object width=”300” height=”200“><param value=”http://www.hotlinkfiles.com/files/2444410_wcywh/kifidis_swf.swf” name=”movie”/><param value=”transparent” name=”wmode”/><embed width=”300” src=”http://www.hotlinkfiles.com/files/2444410_wcywh/kifidis_swf.swf” wmode=”transparent” height=”200” type=”application/x-shockwave-flash”></embed></object>



Σας έχω μαρκάρει με κίτρινο τα νούμερα που καθορίζουν το μέγεθος του banner.Αν θέλετε τα αλλάζετε.

Και με πορτοκαλί είναι η διεύθυνση (σε .swf) του banner σας.Αλλάξτε την δικιά μου με την δική σας.

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

Το αποτέλεσμα όλων των παραπάνων είναι το:



Η φίλη Βούλα από το http://sklirinsikataplakasathens.blogspot.com/ ήθελε να μάθει πως μπορεί να βάλει το flash banner της στο blog της και έγραψα αυτήν την ανάρτηση.

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




Κωδικός 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.

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




Πώς βάζεις html κώδικα στο blog σου αλλά να φαίνεται ο κώδικας και όχι αυτό που δίνει – Post html code



Print Friendly and PDFPrintPrint Friendly and PDFPDF




Ένα πρόβλημα που συναντάει κάθε blogger είναι όταν θέλει να ποστάρει html κώδικα.

ΠΡΟΣΟΧΗ:είπα όταν θέλει να ποστάρει δηλαδή να φαίνεται ο κωδικός ώστε να μπορεί ο άλλος να τον αντιγράψει.να φαίνεται ο κωδικός και όχι αυτό που δίνει ο κωδικός.

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

Παρακάτω σας έχω ένα gadget που μετατρέπει τους κώδικες από αόρατους σε ορατούς.



Βάλτε κάτω τον κώδικα που θέλετε να φαίνεται και πατήστε CONVERT“:







Τώρα βάλτε τον κώδικα που σας έβγαλε όπου θέλετε.Αν δεν έχετε κάνει λάθος ο νέος κώδικας που σας έβγαλε θα είναι ορατός σε όλους.



Αν σας αρέσει το παραπάνω gadget και θέλετε να το βάλετε στο blog σας ο κώδικας είναι ο:




Ο κώδικας για την επεξεργασία κάθε φωτογραφίας – Picture html code



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Το θέμα με το οποίο θα ασχοληθούμε σήμερα είναι ένα θέμα το οποίο πρέπει να το ξέρει όποιος θέλει να λέγεται blogger!
Για μένα blogger δεν είναι αυτός που μόνο γράφει και αναρτεί κείμενα.Δεν είπαμε να είναι και προγραμματιστής αλλά αυτό που θα σας πω σήμερα θα πρέπει να το ξέρει.Θα τον βοηθήσει αφάνταστα.Πολλοί από σας θα το ξέρουν αλλά πρέπει να τα ξέρουν κι οι υπόλοιποι.
Πρόκειται να σας πω τι html κωδικό έχει η κάθε φωτογραφία ,και πως μπορούμε να τι ρυθμίσουμε όπως θέλουμε(πλάτος,ύψος,που θα πηγαίνει-αν πηγαίνει σε κάποιο άλλο site)

Που θα σας βοηθήσουν αυτά που θα μάθετε παρακάτω?

Παντού!!!Θα ξέρετε πως να ρυθμίσετε ένα banner ή όποια άλλη εικόνα βλέπετε και θέλετε να τη βάλετε στο blog σας ,είτε σε gadget ,είτε μέσα σε ανάρτηση.

Να σας πω επίσης ότι το 30% των ερωτήσεων που μου κάνετε (για το πως θα προσθέσουμε το banner ή πως θα ρυθμίσουμε αυτήν την εικόνα να κάνει αυτό και να είναι έτσι…) απαντιέται σε αυτήν εδώ την ανάρτηση.

Χωρίς άλλες καθυστερήσεις πάμε παρακάτω.

Να πούμε καταρχάς οτί ένα banner δεν είναι τίποτα άλλο από μια εικόνα.
Για να προχωρήσουμε παρακάτω πρέπει να μάθετε να βρίσκετε τη διεύθυνση κάθε εικόνας.Κάθε εικόνα έχει μια διεύθυνση (url).Θα σας πω δύο (2) τρόπους για να τη βρίσκετε.

1)Πατάτε δεξί κλικ πάνω στην φωτογραφία που σας ενδιαφέρει ,και μετά επιλέγετε “Ιδιότητες”.Εκεί θα βρείτε τη διεύθυνση της εικόνας.

2)Πατήστε πάλι δεξί κλικ πάνω στην φώτο και πατήστε “Αποθήκευση εικόνας ως…” για να κατεβάσετε την εικόνα στον υπολογιστή σας.Αφού λοιπόν την έχετε αποθηκευμένη στο pc σας ,πρέπει τώρα να την ανεβάσετε κάπου για να βρείτε τη διεύθυνση της.
Μερικά αξιόλογα sites για να την ανεβάσετε είναι το photobucket ,το imageshack και το freefotos.

Σημειώσεις:

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

β.Να προτιμάτε τον δεύτερο τρόπο ,αν και είναι πιο χρονοβόρος, γιατί έτσι ξέρετε που έχετε ανεβάσει την φωτογραφία σας και αν εμπιστεύεστε την αξιοπιστία του site αυτού.Γιατί π.χ. μπορώ να έχω και εγώ ένα server και όποτε θέλω να διαγράφω τις φωτογραφίες μου.Ενώ τα πιο μεγάλα sites όπως αυτά που ανέφερα παραπάνω είναι φυσικά πιο αξιόπιστα σε σχέση με μένα.

Τώρα λοιπόν ξέρετε πως να βρίσκετε τη διεύθυνση (url) κάθε εικόνας.

Ο html κώδικας λοιπόν κάθε φωτογραφίας είναι σαν τον παρακάτω:


<img alt=”johnpatrablog” src=”http://i723.photobucket.com/albums/ww239/johnpatra/banners/coollogo_com_73212405.gif” height=”50” width=”120” />



Αυτό που έχω μαρκάρει με κίτρινο είναι η διεύθυνση (url) της φωτογραφίας.Την αλλάζετε με την url της φωτογραφίας που θέλετε να εμφανίζεται.
Με κόκκινο έχω μαρκάρει το μέγεθος της φωτογραφίας.
“height=”50“” σημαίνει ότι έχει 50 pixels ΥΨΟΣ και “width=”120“” 120 pixels ΠΛΑΤΟΣ.
Μπορείτε να αλλάξτε τα νούμερα για να ρυθμίσετε όπως σας αρέσει την φωτογραφία σας.

Ο παραπάνω κώδικας θα εμφανίσει την παρακάτω φωτογραφία:
johnpatrablog


Όπως θα διαπιστώσετε ,η παραπάνω φωτογραφία δεν <<οδηγεί>> κάπου ,δηλαδή δεν είναι σύνδεσμος.Επειδή όμως πολλοί θέλετε να φτιάξετε ένα banner για το blog σας και θέλετε όποιος πατάει το banner να εισέρχεται στο blog σας ,δείτε παρακάτω:

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

johnpatrablog



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



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

Αυτό που έχω μαρκάρει με κίτρινο είναι η διεύθυνση (url) της φωτογραφίας.Την αλλάζετε με την url της φωτογραφίας που θέλετε να εμφανίζεται.
Με κόκκινο έχω μαρκάρει το μέγεθος της φωτογραφίας.
“height=”50“” σημαίνει ότι έχει 50 pixels ΥΨΟΣ και “width=”120“” 120 pixels ΠΛΑΤΟΣ.
Μπορείτε να αλλάξτε τα νούμερα για να ρυθμίσετε όπως σας αρέσει την φωτογραφία σας.

Με πράσινο είναι η διεύθυνση όπου θέλετε να οδηγεί η φωτογραφία.
Το target=”_blank” κάνει τη φωτογραφία να ανοίγει σε νέο παράθυρο.
Αν πρόκειται να φτιάξετε ένα banner ,προτείνω να ανοίγει σε νέα καρτέλα.Με αυτόν τον τρόπο θα βάζουν πιο πολλοί το banner σας στο blog τους γιατί θα ξέρουν ότι δεν θα φεύγουν από το blog τους ,οι επισκέπτες τους.
Αν λοιπόν θέλετε να ανοίγει σε νέα καρτέλα αφήστε το όπως έχει.Αν θέλετε να ανοίγει στην ίδια καρτέλα διαγράψτε μόνο το target=”_blank” .


Τώρα λοιπόν με τις παραπάνω πληροφορίες ξέρετε πως να βάλετε στο blog σας όποια φωτογραφία θέλετε και σε ότι μέγεθος θέλετε.

Μπορείτε με τους παραπάνω τρόπους να βάλετε την φωτογραφία που πρόκειται να φτιάξετε ,είτε μέσα σε μια ανάρτηση σας (εκεί που γράφετε μια ανάρτηση επικολλήτε τον κώδικα που φτιάξατε,ενώ βρισκόσαστε στην καρτέλα “Eπεξεργασία html” και ΟΧΙ στη “Σύνθεση”) ,είτε σαν gadget στο blog σας (από Πανόπτη>Διάταξη>Προσθήκη gadget>HTML/JavaScript) .

Με τις παραπάνω χρήσιμες και απλές πληροφορίες ,λοιπόν, μπορείτε να κάνετε πολλά και όμορφα πράγματα!



Αν θέλετε βάλτε ένα bannerάκι στο blog σας για μένα με τον παρακάτω κώδικα:


<a href=”http://johnpatrablog.blogspot.com/” target=”_blank”>
<img alt=”link για pchands” src=”http://i723.photobucket.com/albums/ww239/johnpatra/banners/coollogo_com_73212405.gif” border=”0″ height=”30″ width=”150″ /></a>


Θα εμφανίζεται αυτό το banner:

link για pchands



Αν δεν σας αρέσει αυτό το banner μπορείτε να διαλέξετε μέσα από την μεγάλη ποικιλία που θα βρείτε στο http://johnpatrablog.blogspot.com/2009/07/banners.html


Και κάτι ακόμα:

Αν σου άρεσαν οι παραπάνω πληροφορίες μπορείς να γραφτείς δωρεάν στην εφημερίδα της σελίδας από το http://feedburner.google.com/fb/a/mailverify?uri=Johnpatrablog&loc=en_US και θα σου έρχονται στο mail σου αυτόματα όλα τα tips & tricks για να μην χάνεις κανένα και να είναι το blog σου μοναδικό!
Μην το σκέφτεσαι άλλο!Κάνε δωρεάν εγγραφή τώρα και όποτε θέλεις μπορείς να ξεγραφτείς.

Άφησε μου ένα σχόλιο και πες μου τις εντυπώσεις σου.




Δημιουργία ενός banner



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Καλησπέρα σε όλους.
Όπως υποσχέθηκα σε κάποιους το σημερινό θέμα αυτής της ανάρτησης είναι να σας δείξει πως θα φτιάξετε δωρεάν,γρήγορα και εύκολα ένα banner για τη σελίδα σας.Όπως αυτά που έχω φτιάξει εγώ για το JohnpatraBLOG.Δείτε στη συνέχεια πόσο εύκολο είναι να φτιάξετε κι εσείς ένα!

Ο καλύτερος τρόπος να φτιάξετε ένα banner για τη σελίδα σας είναι με το photoshop.Αν έχετε και ξέρετε να το δουλέψετε τότε δεν χρειάζεται να διαβάσετε τη συνέχεια αυτού του post.
Όσοι δεν το έχουν ή το έχουν αλλά δεν ξέρουν να το δουλέψουν (σαν εμένα) ας δούνε παρακάτω.

Υπάρχουν άπειρες σελίδες στο web όπου μπορείτε να φτιάξετε online το banner σας.
Αρκεί να αναζητήστε στο google με λέξεις κλειδιά ,όπως:

“create free banners”
“create free logos”
“animated(=κινούμενα) logos”
“create animated banner”
“create buttons”

και κάντε και πολλούς συνδιασμούς με αυτές τις λέξεις και άλλες τέτοιες παρόμοιες και θα βρείτε άπειρες σελίδες για να φτιάξετε online το banner σας.
Οι πιο πολλές (από τις σελίδες που θα βρείτε) δεν θα σας αρέσουν για διάφορους λόγους όμως θα βρείτε σίγουρα και μερικές πολύ καλές με τις οποίες θα κάνετε τη δουλειά σας.
Αν βρείτε καμιά καλή αφήστε ένα σχόλιο και πείτε την για να την μάθουν κι οι άλλοι.
Εγώ έχω βρει μέχρι τώρα 8 σελίδες που μπορείτε να φτιάξετε γρήγορα,δωρεάν και εύκολα ένα όμορφο banner για το blog σας.
Σας τις έχω παρακάτω:
(πατήστε άφοβα πάνω τους ‘είναι ρυθμισμένες να ανοίγουν σε νέα καρτέλα)

1)http://www.grsites.com/

2)http://www.animationonline.com/

3)http://mybannermaker.com/*

4)http://kalsey.com/tools/buttonmaker/

5)http://glitter-graphics.com/myspace/text_generator.php

6)http://www3.flamingtext.com/

7)http://www.mylivesignature.com/

8)http://cooltext.com/

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


Αφού λοιπόν φτιάξετε το banner σας ανεβάστε το κάπου.
Σας προτείνω 3 υπηρεσίες για να το ανεβάσετε:

1)http://photobucket.com/

2)http://freefotos.gr/

3)http://gigaimage.com/

Αφού λοιπόν το ανεβάσετε μετά μπορείτε να βρείτε και τον κώδικα html του banner σας και να το βάλετε στο blog σας.



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

Αν μείνατε ευχαριστημένοι από τις παραπάνω πληροφορίες ,μπορείτε να βάλετε ένα banner του Johnpatra BLOG στη σελίδα σας:


link για pchands


Βάλε τον παρακάτω κώδικα στη σελίδα σου.(θα εμφανίζεται το παραπάνω banner)





Αν για κάποιον λόγο δεν σας αρέσει αυτό το banner δείτε και τα άλλα banners στο http://johnpatrablog.blogspot.com/2009/07/banners.html


Και κάτι ακόμα:

Αν σου άρεσαν οι παραπάνω πληροφορίες μπορείς να γραφτείς δωρεάν στην εφημερίδα της σελίδας από το http://feedburner.google.com/fb/a/mailverify?uri=Johnpatrablog&loc=en_US και θα σου έρχονται στο mail σου αυτόματα όλα τα tips & tricks για να μην χάνεις κανένα και να είναι το blog σου μοναδικό!
Μην το σκέφτεσαι άλλο!Κάνε δωρεάν εγγραφή τώρα και όποτε θέλεις μπορείς να ξεγραφτείς.