Blogger Tips: Οριζόντιο μενού με εικόνες

4/9/13


Μια νέα στήλη "Blogger Tips" θα είναι λίγο διαφορετική δεν θα ασχολείται με ομορφιά.
Βασικά θα είναι μικρές συμβουλές για την εμφάνιση του blog.
Το πρώτο θέμα είναι πως να φτιάξετε το δικό σας οριζόντιο μενού με εικόνες.

Blogger Tips: Horizontal menu with images
Blogger Tips: Οριζόντιο μενού με εικόνες 



Όπως αυτό που φαίνεται παρακάτω:


Blogger Tips: Horizontal menu with images



 BHMA 1 
Ξεκινάμε πρώτα να φτιάξουμε την εικόνα 
(καλό είναι να δημιουργήσετε τις δικές σας εικόνες για να είναι το blog σας μοναδικό!) 

  Blogger Tips: Οριζόντιο μενού με εικόνες

1. Χρησιμοποιούμε για την επεξεργασία της εικόνας το site PicMonkey. Ανεβάζοντας την εικόνα που θέλουμε. 
picmonkey


2. Ρυθμίζουμε το μέγεθος που θέλουμε να έχει η εικόνα μας, στο συγκεκριμένο μενού είναι 150x65. 
Διαδικασία:Basic Edits=>Resize 
picmonkey

3. Προσθέστε το εικονίδιο που θέλετε να έχει και επεξεργαστείτε το μέγεθος του και την θέση που θέλετε να βρίσκεται. 
Διαδικασία:Overlays=>Your Own 
picmonkey
picmonkey
picmonkeypicmonkey

4. Γράψτε το κείμενο που θέλετε και επιλέξτε την θέση που θα βρίσκεται και την γραμματοσειρά που σας αρέσει. 
Διαδικασία:Text=>Add text 
picmonkey
picmonkey

5. Όταν τελειώσουμε το αποθηκεύουμε στον υπολογιστή μας, δίνοντας το όνομα που επιθυμούμε.
picmonkey
picmonkey


 ΒΗΜΑ 2 
Για να χρησιμοποιήσουμε την εικόνα που φτιάξαμε θα πρέπει να την ανεβάσουμε σε κάποιο site.

1. Εγώ χρησιμοποιώ το Photobucket.
photobucket

2. Ανεβάζουμε την εικόνα που φτιάξαμε πριν. 
Διαδικασία:Upload=>Choose photos & videos
photobucket
photobucket

3. Πατάμε πάνω στην εικόνα για να ανοίξει. Κάτω δεξιά υπάρχουν κάποιοι κωδικοί, αυτόν που θα χρησιμοποιήσουμε εμείς είναι ο Direct (τον δεύτερο κωδικό). 
photobucket
photobucket


 ΒΗΜΑ 3 
Φτάσαμε τώρα στο σημείο που θα προσθέσουμε στο blog το οριζόντιο μενού με εικόνες.

1. Ανοίγουμε τον λογαριασμό μας στο blogger.com
2. Ακολουθούμε την διαδικασία Διάταξη=>Προσθήκη gadget=>HTML/JavaScript
blogger

3. Χρησιμοποιώντας τον παρακάτω κωδικά όσες φορές θέλετε σύμφωνα πάντα με πόσες σελίδες ή ετικέτες θέλετε να φτιάξετε. Σβήνοντας αυτά που γράφω με κόκκινα γράμματα και βάζοντας τα αντίστοιχα link και προσοχή να μην σβήσετε τα ".

<a href="Εδώ γράφετε το link που θα οδηγεί η εικόνα στο blog σας" ><img src="Εδώ βάζετε τον κωδικό της εικόνας που έχει στο photobucket,τον Direct" /></a>


blogger


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

5. Ίσως χρειαστεί να ρυθμίσετε λιγο το εύρος για να χωράνε όλες οι εικόνες, αυτό θα το δείτε μονές σας όπως σας αρέσει. Διαδικασία: Πρότυπο=>Προσαρμογή=>Προσαρμογή εύρους=>Ολόκληρο το ιστολόγιο (δεξιά ή αριστερά τον κέρσορα)=>Εφαρμογή στο ιστολόγιο 


Ελπίζω να σας βοήθησα!

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

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

Μπορείτε να μου δώσετε ιδέες για μελλοντικά ποστ, λέγοντας μου τι θα θέλετε εσείς να προσθέσετε στο blog σας!

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





El Design
El Design

Δημιουργία ή ανανέωση blog, περισσότερες πληροφορίες διαβάστε  στο El Desing, καθώς μπορείτε να στείλε και μήνυμα στο email
eleftheraki0000@gmail.com



29 σχόλια:

  1. Τελεια! Και πολυ βοηθητικο το θεμα σου!!
    Μιας και ασχοληθηκες με αυτο το θεμα, γνωριζεις μηπως πως γινεται να φτιαξεις drop down menu?
    αυτο δηλαδη που μολις πας το ποντικι πανω απο το "make up" για παραδειγμα βγαινουν υποκατηγοριες σε λινκς? Εχω 3 ωρες που προσπαθω να βρω τον κωδικο για να το κανω και δεν υπαρχει πουθενα στο ιντερνετ κατι κατατοπιστικο!!! Αν ξερεις θα μου κανεις τεραστια χαρη να με βοηθησεις!! :P

    xoxo

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Σε ευχαριστώ πολύ Μαράια!
      Δεν το έχω ψάξει μέχρι στιγμής, με μια ματιά στο internet τώρα είδα πολλούς άλλα δεν ξέρω ποιος δουλεύει. Αν θέλεις να το κοιτάξω και θα σου πω!

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

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Σε ευχαριστώ πολύ Χαρά μου!
      Φυσικά και θα μπορούσα να κάνω ένα τέτοιο ποστ!

      Διαγραφή
  3. Εντάξει! Απλά τέλειο!!!!!!!!

    Ζωγράφισες Ελευθερία μου! Χρειαζόταν μια στήλη σαν αυτή και το συγκεκριμένο ποστ πολύ μ'άρεσε!

    Ελπίζω να τα καταφέρω να το κάνω και να μη βαρεθώ στη διαδικασία γιατί εγώ και οι κώδικες έχουμε ένα θεματάκι!!!!

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Σε ευχαριστώ πολύ! :)
      Η αλήθεια είναι ότι χρειάζεται υπομονή και να έχεις αρκετό χρόνο στην διάθεση σου διότι δύσκολο δεν είναι!

      Διαγραφή
  4. Πολύ ωραίο post και άκρως βοηθητικό! Μπράβο ρε Ελευθερία!

    ΑπάντησηΔιαγραφή
  5. Πραγματικά υπέροχο ποστ! :)
    Ευχαριστούμε πολυ! Και περιμένουμε και αλλα!
    Φιλιά

    http://beautyswings.blogspot.gr/

    ΑπάντησηΔιαγραφή
  6. η εμφάνιση του blog σου ανέκαθεν με εντυπωσίαζε!!!! ευχαριστούμε πάρα πολύ για τις συμβουλές! είναι πολύ χρήσιμες και εννοείται πως περιμένουμε και άλλες!! πολλά φιλιά :*

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Σε ευχαριστώ πολύ για τα καλά σου λόγια, να ΄σαι καλά!
      Φιλάκια!

      Διαγραφή
  7. πραγματικά αναρωτιόμουν πώς μπόρεσες και το έκανες.Thank you.Πολύ ωραίο ποστ.Κάποια στιγμή να μας πείς και πώς βάζουν αυτό που έχεις κάτω δεξια και λέει "back to top"

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Σε ευχαριστώ!
      Φυσικά θα κάνω και ένα ποστ για το "back to top"!

      Διαγραφή
  8. Είσαι πραγματικά τέλεια! Υπέροχο & άκρως βοηθητικό ποστ! :)

    ΑπάντησηΔιαγραφή
  9. Καταπληκτική ιδέα!Χαρά στο κουράγιο σου να ψάχνεις όλα αυτά και να κάνεις και το ποστ!πρότεινέ μας κάνα καλό site ή πρόγραμμα για photo editing πέρα από το picmonkey!

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Σε ευχαριστώ πολύ Χριστίνα μου!
      Πολύ ευχαρίστως να σας προτείνω όμως τι ακριβώς δυνατότητες θέλεις εσύ να σου προσφέρει ένα photo editor;

      Διαγραφή
  10. ρίξε μια ματιά στο blog μου. Έκανα μια μιρκή προσπάθεια για αρχή :) Έχω όμως μια απορία που είδα πως την είχε και η Αλεξάνδρα. Στην κατηγορία DIY για παράδειγμα, με το που πατά ο άλλος πάνω τον οδηγεί σε ένα μου post. Αν φτιάξω παραπάνω post DIY, πως θα τα συμπεριλάβω και αυτά σε αυτήν την κατηγορία. Διάβασα αυτό που έγραψες αλλά δεν το πολυκαταλαβα :/ ευχαριστώ :)

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Το είδα, μπράβο σου!
      Αν βάλεις το link από την ετικέτα DIY τότε όλα τα ποστ που αφορούν αυτήν την ετικέτα θα βγαίνουν. Δηλαδή θα πρέπει να δουλέψεις με ετικέτες , ρίχνοντας μια ματιά στο blog σου δεν είδα εκτός αν τις έχεις να μην φαίνονται στον αναγνώστη.Αν έχεις κι άλλη απορία πες μου! :)

      Διαγραφή
    2. χμ δεν έχω ετικέτες.. θα το ψάξω και θα σου πω!!! σε ευχαριστώ πάρα πολύ :D

      Διαγραφή
    3. Τις ετικέτες τις βάζεις όταν γράφεις μια ανάρτηση βρίσκονται στα δεξιά και μετά τις εμφανίζεις ως προσθήκη gadget. Αν θέλεις βοήθεια μην διστάσεις να μου πεις!

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

    ΑπάντησηΔιαγραφή
  12. Ελευθερία μου να σε ρωτήσω...έκανα όλα τα βήματα που λες και όλα καλά αλλά όταν πατάω στο πρώτο ας πούμε το Home δεν με βγάζει πουθένα..πως οι λέξεις του μενού που δημιουργούμε θα οδηγούν στις συγκεκριμένες αναρτήσεις? :/

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Χρησιμοποιείς τον κώδικα που αναφέρω στο τέλος και θα βάλεις στο {Εδώ γράφετε το link που θα οδηγεί η εικόνα στο blog σας} το λινκ/url που θέλεις να οδηγεί η εικόνα σου!

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

      Διαγραφή
    3. Έβαλες το λινκ της αρχικής σελίδας και δεν σου βγάζει πουθενά;

      Διαγραφή
    4. οο καλα είμαι στο κόσμο μου!τώρα κατάλαβα!ευχαριστώ πολύ για την βοήθεια!:)

      Διαγραφή

Σας ευχαριστώ για την επίσκεψη στο blog μου❣
Thank you for visiting my blog❣

Copyright © by Diary Of A Beauty Addict. All rights reserved. Designed By El Design

UP
Blogger Widget