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

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


Κουμπί για εκτύπωση - Print this page button


Print Friendly and PDFPrintPrint Friendly and PDFPDF

Σήμερα θα σας πω πώς να βάλετε ένα κουμπί στο blog σας για εκτύπωση της σελίδας σας.Φυσικά για να λειτουργήσει προυποθέτει να υπάρχει και εκτυπωτής.Είναι πολύ χρήσιμο widget.Το έχω βάλει και εγώ(δείτε το στην αριστερή στήλη,κάτω από το "Save page as PDF").Αν θέλετε να το βάλετε κι εσείς ,δείτε παρακάτω!

Είναι πραγματικά πολύ εύκολο να το βάλετε.
Απλά κάντε ,όπως πάντα, σύνδεση στον blogger λογαριασμό σας και μετά από τον Πανόπτη σας ,πατήστε Διάταξη.Τώρα πατήστε "Προσθήκη gadget" και επιλέξτε "HTML/JavaScript".
Σαν τίτλο μπορείτε να γράψετε "Print this page" και από κάτω επικολλήστε τον παρακάτω κώδικα:

<script language="Javascript1.2">
function printWindow(){
browserVersion = parseInt(navigator.appVersion)
if (browserVersion >= 4) window.print()
}
// -->
</script>
<a href="javascript:printWindow()"><img width="98" src="http://bloghacktips.googlepages.com/Printthispage.jpg" height="16"/></a>


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



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

Αφού τελείωσετε με την επεξεργασία του widget πατήστε Αποθήκευση κι είστε έτοιμοι!

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

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

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


Κουμπί που να πηγαίνει την σελίδα στην αρχή της - Go top button


Print Friendly and PDFPrintPrint Friendly and PDFPDF

Καλησπέρα σε όλους σας!
Αφού με έχουν ρωτήσει πολλοί αναγνώστες ,θα γράψω την παρακάτω ανάρτηση που θα σας εξηγεί πως θα βάλετε ένα κουμπί-link στο site σας ,που όποιος το πατάει θα πηγαίνει στην αρχή της σελίδας(όπως αυτό που έχω εγώ κάτω δεξιά στη σελίδα).Είναι πολύ εύκολο να το βάλετε κι εσείς.Αν σας αρέσει δείτε τη συνέχεια!

Κάντε σύνδεση στον λογαριασμό σας,πατήστε Διάταξη και μετά Επεξεργασία html.
Πατήστε ταυτόχρονα ctrl + F για να ανοίξει κάτω ένα παραθυράκι αναζήτησης.
Αναζητήστε το </body>
Λογικά είναι προς το τέλος του κώδικα.
Τώρα βάλτε τον παρακάτω κώδικα αμέσως από πάνω του.


<a href='#' style='display:scroll;position:fixed;bottom:5px;right:1px;' title='move on to top of page'><img src='http://gigaimage.com/images/adry1qe25eu3it5hk7a.jpg'/></a>


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

Πατήστε Προεπισκόπηση να δείτε αν δουλέυει κι αν σας αρέσει κι αν είναι όλα οκ πατήστε Αποθήκευση!


 
© 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 *