Latest Blog News: Διαβάζετε πάντα και τα ΣΧΟΛΙΑ των αναρτήσεων!

Ο κώδικας για την επεξεργασία κάθε φωτογραφίας - 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 σου μοναδικό!
Μην το σκέφτεσαι άλλο!Κάνε δωρεάν εγγραφή τώρα και όποτε θέλεις μπορείς να ξεγραφτείς.

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

Stumble
Delicious
Technorati
Twitter
Facebook

21 comments:

Εύα Παραδείσου είπε...

Πολύ χρήσιμο, τώρα που το εξήγησες το κατάλαβα, :) μπράβο και το έψαχνα.

Εύα Παραδείσου είπε...

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

Johnpatra είπε...

ναι π.χ. για να σιγουρευτειτε οτι εχετε βρει την σωστη διευθυνση.κοιτα στο http://gopalshenoy.files.wordpress.com/2009/07/tips.jpg εδω ειναι η φωτογραφια μονη της

Makedon είπε...
Αυτό το σχόλιο αφαιρέθηκε από τον συντάκτη.
Makedon είπε...

όταν επιλέγουμε να αναρτήσουμε εικόνες από τον σκληρό δίσκο μας έχουμε τρεις επιλογές μεγεθών, όπως γράφει: μικροί, μέτρια, μεγάλοι.
Για παράδειγμα όταν επιλέγουμε το: μεγάλοι, υπάρχει τρόπος να επέμβουμε στον html του μπλογκ για να αλλάξουμε τις διαστάσεις αυτής της επιλογής και όταν επιλέγουμε το: μεγάλοι να έχουμε πάντα τις τροποποιημένες διαστάσεις;
Γιατί αν το κάμουμε σε κάθε ανάρτηση, π.χ. να την μεγαλώσουμε τότε η εικόνα βγαίνει θολή.

Johnpatra είπε...

οχι.δεν υπαρχει τροπος να επεμβουμε στον κωδικα και να το ρυθμισουμε ετσι οπως θελουμε εμεις.
θα πρεπει να το ρυθμιζουμε μονοι μας καθε φορα.
και θα σου πω γιατι.
μια μεγαλη εικονα θεωρειται αυτη που εχει 300Χ300 πιξελς.επισης μεγαλη θεωρειται και αυτη που ειναι 800Χ800 πιξελς.δεν υπαρχει στανταρ.το ιδιο ισχυει και με τις μικρες.μικρες θεωρουνται κι οι 50Χ50 κι οι 3Χ3.αρα πρεπει καθε φορα να ρυθμιζουμε μονοι μας το μεγεθος.

Makedon είπε...

Χμ, ναι.
Κρίμα γιατί έτσι χάνει σε ποιότητα η εικόνα, Έτσι για παραδειγμα εδώ: http://www.blogger.com/post-edit.g?blogID=7645479343615385322&postID=2785573137629951328

Σε ευχαριστώ και πάλι για την απάντηση.

Johnpatra είπε...

καλησπερα makedon,

το λινκ δεν ξερω γιατι αλλα δεν μπορω να το ανοιξω.μου ζηταει κωδικο,τον βαζω αλλα και παλι τιποτα.
παντως την ποιοτητα η εικονα δεν τη χανει.απλα τη ρυθμιζεις στο κανονικο της μεγεθος και ειναι οκ.

Λενα είπε...

τα καταφερααααααααα ευχαριστωωωω

fani είπε...

Γεια σου, γιατί όταν ανοίγω ιδιότητες, όταν την έχω αποθηκεύσει, δεν μου δειχνει πουθενα την διεύθυνση της εικόνας ?

fani είπε...

....και κάτι επιπλέον το HTML της εικόνας, είναι αυτό που μου δίνει το Photobucket? το ρωτάω γιατί όταν σχεδιάζω ένα background δικό μου, στο Photoshop, για να το τοποθετήσω στη σελίδα μου,παίρνω το HTML code από το Photobucket που την έχω αποθηκεύσει, αλλά στο site μου δεν βγαίνει σωστά.....γιατί?

Johnpatra είπε...

@fani το Html της εικόνας ναι είναι αυτό όπως σου δίνει το photobucket. όταν εννοείς δεν βγαίνει σωστά, εννοείς μάλλον όχι στο μέγεθος που θα ήθελες ,ε? ε σε αυτή την ανάρτηση μαθαίνεις πως θα φτιάχνεις μόνη σου τον κώδικα και θα ρυθμίζεις μόνη σου το μέγεθος. την διεύθυνση της εικόνας, την url, μπορείς να τη βρεις με πολλούς τρόπους. ο καλύτερος είναι ο εξης: αποθηκευσε τη φωτογραφια στο pc σου και μετά ανέβασέ τη στο photobucket. μετά από το photobucket κάνε δεξί κλικ πάνω της και πάτησε εκεί που λέει "προβολή εικόνας". τώρα θα σου εμφανίσει μόνο την εικόνα. ε αντέγραψε τη διεύθυνση , την url, της εικόνας από την μπάρα του browser σου.

fani είπε...

Λοιπόν, διαβάζοντας τα σχόλια είδα ότι ο Μakedon, αναφέρει πως οι εικόνες που ανεβάζουμε και τροποποιούμε το μέγεθός τους προς στο μεγαλύτερο , χάνουν την ποιότητά τους. Ενας τρόπος για να μη χαθεί η ποιότητά είναι κάνει κλικ στην επεξεργασια ΗTML που είναι δίπλα στη Σύνθεση και μέσα στον κώδικα της εικόνας θα δει ένα s1600 και παρακάτω άλλο ένα s330 ή κάτι ανάλογο τέλος πάντων....λοιπόν στο δεύτερο s..θα βάλει και κει 1600..αυτό είναι και τέλος.
Τώρα θέλω να σου κάνω μια αφελή ερώτηση για το HTML των φωτογραφιών. Πρέπει να υπάρχουν κενά όπως το βλέπουμε στην ανάρτηση που δείχνεις στους κώδικες;
  όπως το έχεις

fani είπε...

AAA...μην το ξεχάσω το κόλπο με τη φωτογραφία το έμαθα από τον ΑΑΤΟΝ

jerichoriginal.21 είπε...

ΚΑΛΗΣΠΕΡΑ ΕΙΝΑΙ ΕΥΚΟΛΟ ΝΑ ΜΠΕΙΣ ΣΤΟ asteratoi.blogspot.com ΓΙΑ ΝΑ ΔΕΙΣ ΑΝ ΕΧΩ ΒΑΛΕΙ ΣΩΣΤΑ ΤΟ BANNER ΜΟΥ,ΔΕΝ ΕΙΜΑΙ ΠΟΛΥ ΚΑΛΟΣ ΣΕ ΑΥΤΑ.

Titziana είπε...

ΚΑΛΗΣΠΕΡΑ.ΠΡΟΣΠΑΘΩ ΝΑ ΚΑΝΩ ΕΝΑ BLOG ΜΕ ΜΕΓΑΛΗ ΔΥΣΚΟΛΙΑ ΑΦΟΥ ΕΙΜΑΙ ΛΙΓΟ ΑΣΧΕΤΗ ... ΕΧΩ ΒΑΛΕΙ ΜΙΑ ΜΠΑΡΑ ΜΕΝΟΥ ΚΑΤΩ ΑΠΟ ΤΟΝ ΤΙΤΛΟ ΤΟΥ BLOG ΜΟΥ ΚΑΙ ΘΕΛΩ ΝΑ ΑΝΕΒΑΣΩ ΦΩΤΟ ΩΣΤΕ ΟΤΑΝ Ο ΑΝΑΓΝΩΣΤΗΣ ΠΑΤΑΕΙ ΠΑΝΩ ΣΤΗΝ ΚΑΡΤΕΛΑ ΠΟΥ ΟΝΟΜΑΣΑ ¨ Β¨ ΝΑ ΕΧΕΙ ΜΕΣΑ ΤΙΣ ΦΩΤΟΓΡΑΦΕΙΕΣ ΠΟΥ ΘΕΛΩ ( ΕΧΩ ΑΝΕΒΑΣΕΙ ΤΙΣ ΦΩΤΟ ΜΟΥ ΣΤΟ IMAGE HOSTING ΚΑΙ ΕΧΩ ΒΡΕΙ ΤΙΣ ΔΙΕΥΘΥΝΣΕΙΣ )ΤΩΡΑ ΤΙ ΠΡΕΠΕΙ ΝΑ ΚΑΝΩ ?
ΕΥΧΑΡΙΣΤΩ ΕΚ ΤΩΝ ΠΡΩΤΕΡΩΝ !

ΣΤΕΛΙΟΣ ΜΑΚΡΗΣ είπε...

φίλε φοβερό το άρθρο με βοήθησε να απίστευτα με το μπανερ μου...

stela nikolaou είπε...

Ημουν τελειως ασχετη με ολα αυτα...και ξεκινησα να κανω ενα blog απο το μηδεν. Βασικα εκανα δυο το ενα ειναι πειραματικο. Μεχρι τωρα εμαθα να διαβαζω κωδικους που πριν μου φαινονταν κινεζικα!!! Να ειστε καλα...προχωρω ακαθεκτη

ΜΑΚΗΣ ΝΟΔΑΡΟΣ είπε...

ΣΑΣ ΕΥΧΑΡΙΣΤΩ ΠΟΛΥ ΟΙ ΠΛΗΡΟΦΟΡΙΕΣ ΣΑΣ ΗΤΑΝ ΠΟΛΥΤΙΜΕΣ

Eleni Tsoukali είπε...

Καλημέρα. Στη σελίδα μου στο FB, πώς μπορώ να βάλω κάτω από φωτογραφία κείμενο με σύνδεσμο url (κλικ εδώ...κ.λπ). Δεν βρίσκω τον τρόπο να γράψω τέτοιο κείμενο κάτω από φωτογραφία.
Ευχαριστώ

eirini yannourakou είπε...

Ευκολο μοιάζει αλλά είναι?

Δημοσίευση σχολίου

Παρακαλούμε τους φίλους αναγνώστες:

ΟΧΙ SPAM,
ΟΧΙ GREEKLISH,
ΟΧΙ ΠΡΟΣΒΛΗΤΙΚΑ ΣΧΟΛΙΑ

Παρακαλώ το σχόλιό σας να είναι σχετικό με την παραπάνω ανάρτηση.
Γενικές απορίες μόνο στη σελίδα μας στο facebook.

 
© Copyright 2009-14 bloggertips.gr | All rights reserved. | Επικοινωνία | LK Magazine v2 from Lasantha | Πίσω στην ΚΟΡΥΦΗ | | Subscribe in a reader (Google,Yahoo κα)

* free blogger tips,tricks,gadgets,widgets,templates,themes,help,hacks,design,domains,xml,html,blogspot.gr *