Hi! Welcome...

Premium Blogger Template
FREE Premium Blogger Templates
Μοναδικά Free Blogger πρότυπα για το blog σας
Slimbox 2.02 με jquery-1.3.2 στο Bloggspot .
Πώς να εγκαταστήσετε SlimBox σε Blogger
ΙmgBox
Για να παρουσιάσετε τις εικόνες σας με στυλ !!!
31 καλυτέρα Blogger Widgets και addon
Κατάλογος συνδέσμων όπου μπορείτε να ανακαλύψετε περισσότερα widgets για το blog σας.
1 2 3 4 5

Κυριακή, Νοεμβρίου 29

0

scrolling text , marquee html code για το blog σας

Σε αυτό το post θα σας εξηγήσω πως να προσθέσετε Scrolling text ( η αλλιώς marquee ) στο blog sidebars,blog posts,κ.λ.π. 


 Ένας άλλος τρόπος να προσελκύσετε επισκέπτες , είναι να προσθέσετε κάποια διακόσμηση στην σελίδα σας , όπως scrolling text,κ.λ.π. Αλλά, μην την διακοσμήστε πάρα πολύ, ιδιαίτερα εάν η σελίδα σας περιέχει πάρα πολύ κείμενο δεδομένων , διότι ενοχλεί και χαλά τη συγκέντρωση του αναγνώστη.
  Μπορείτε να προσθέσετε scroll bars για να ενημερώσετε τους επισκέπτες σας για το  ποιες θα είναι οι επόμενες αναπροσαρμογές, οι δημοφιλείς αναρτήσεις , οι διαφημίσεις σας, κ.λ.π..
Λοιπόν,πως να προσθέσετε το scrolling text στο blog σας ; Επιτρέψτε μου να σας το εξηγήσω:

Προσθήκη απλού scrolling text:

Εδώ είναι ο κώδικας για να προσθέσετε ένα απλό scrolling text από δεξιά προς αριστερά



Το αποτέλεσμα θα είναι :

Παράδειγμα 1:





code για απλό scrolling text

Εάν θέλετε να είναι λίγο περισσότερο ελκυστικά, δοκιμάστε τα εξής:


Προσθέστε ένα χρώμα υποβάθρου στο scrolling tex :

Παράδειγμα 2:





code για απλό scrolling text

Μπορείτε να επιλέξετε το χρώμα υποβάθρου σας με την αντικατάσταση των hexadecimal code(#99ccff).
Κλικ εδώ για να δείτε όλους τους κωδικούς των Hex χρωμάτων.

Εδώ είναι μερικές ιδιότητες attributes :

direction="left"
direction="right"
direction="up"
direction="down"

Οι ανωτέρω ιδιότητες λένε στο κείμενο προς τα που θα κατευθυνθεί .

Χρησιμοποιήστε τον παρακάτω κώδικα  :


Εδώ είναι μερικά παραδείγματα :
Παράδειγμα 3:
Scroll προς 'right' κατεύθυνση:





code για απλό scrolling text

Παράδειγμα 4:
Scroll προς 'up' κατεύθυνση:





code για απλό scrolling text

Παράδειγμα 5:
Down: ( Άλλαξα τους δεκαδικούς κώδικες hexa για τα διαφορετικά χρώματα )





code για απλό scrolling text

Περισσότερες ιδιότητες: 

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



Εδώ είναι ο κώδικας για να το κάνετε αυτό:


Παράδειγμα 6:





code για απλό scrolling text

Μπορείτε επίσης να θέσετε την ταχύτητα του κειμένου με αυτήν την απλή ιδιότητα:



Όσο χαμηλότερη η αξία του scrollamount, με τόσο λιγότερη ταχύτητα αυτό κινείται,
Το html code για αυτό θα είναι:


Παράδειγμα 7:(για scrollamout =2)





code για απλό scrolling text

Παράδειγμα 8:(για scrollamount=5)





code για απλό scrolling text

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


Παράδειγμα 9:





code για απλό scrolling text

(Περαστέ το ποντίκι σας πάνω από το κείμενο για να το δείτε)

Αλλάζοντας τα χρώματα του κειμένου:

Εδώ είναι ο κώδικας για να αλλάξει το χρώμα κειμένων:(Το προσθέτετε πριν και μετά από τις marquee ετικέτες)



Ετσι, ο κώδικας μοιάζει με αυτό


Παράδειγμα 10:
code για απλό scrolling text

Προσθέτοντας hyperlinks:

Μπορείτε επίσης να προσθέσετε hyperlinks στο κείμενο.
Εδώ είναι ο κώδικας :


Το αποτέλεσμα θα μοιάσει με αυτό:





Google Indicator Widgets | Πως να βάλετε ένα όμορφο Tag Cloud στο Blog σας | jQuery Image Magnify Effect


Με λίγη δουλειά μπορείτε να δημιουργήσετε ένα marquee το οποίο θα μοιάζει με ένα κινούμενο λογότυπο :

Δείτε ένα δείγμα :

ΟΤΙ ΧΡΕΙΑΖΕΤΑΙ ΕΝΑΣ BLOGGER!


Εδώ είναι ο πηγαίος κώδικας : 




Προσθέστε Blink εφέ στο marquee :

Δείτε ένα δείγμα :







scrolling text , marquee html code για το blog σας....

Ο πηγαίος κώδικας για αυτό θα είναι :



Σημείωση: Το Blink εφέ δεν λειτουργεί με το Google Chrome

Μπορείτε να συμπεριλάβετε και εικόνες στο marquee :




Εικόνες στο marquee

Ο κώδικας για αυτό θα είναι :





Προσθέστε εικόνα υποβάθρου στο marquee :





background εικόνα στο marquee


Και ο κώδικας για αυτό θα είναι :


Αυτό ήταν!

Τώρα μπορείτε να προσθέσετε αυτό στην πλαϊνή μπάρα του blogger σας, στην ανάρτηση του blog η όπου εσείς θέλετε.

Εάν έχετε οποιεσδήποτε ερωτήσεις , υποβάλετε τις ερωτήσεις σας μέσω των σχολίων σας.
Read More ►

0

sGallery | Blogger template




                             Preview      Download



Το  sGallery είναι ένα εκπληκτικό πρότυπο. Αυτό το πρότυπο είναι για τα blogs με φωτογραφίες , με κίτρινο υπόβαθρο και καφέ λεπτομέρειες , δροσερό γκαλερί στυλ   , με δεξιά πλαϊνή μπάρα, ωραία κεφαλίδα & φόντο ..

  Gallery Blogger Templates
  Brown color
  Yellow background.
  2 Columns
  Fixed Width
  Right Sidebar

Theme Author: Simply WP

Read More ►

0

Tech Dream | Blogger template


                                 Preview         Download

Αν σας αρέσει η τεχνολογία , τότε θα λατρέψετε αυτό το Tech Dream  Blogger πρότυπο .
Το πρότυπο έχει 2 στήλες , μαύρο υπόβαθρο και πανέμορφη επικεφαλίδα .

Είναι συμβατό με  : Firefox , IE7 και IE6.

   2 Columns Blogger template
   Μαύρο υπόβαθρο
   Left Sidebar
  fixed width

Σχεδιασμένο για Wordpress από : EZWPThemes.com
Μετατροπή για Blogger  από : Themecraft
Read More ►

Παρασκευή, Νοεμβρίου 27

1

5 + 3 απλά κόλπα με την χρήση CSS


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

 Προσθήκη εικόνας φόντου ανάρτησης .

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

<div style="background:url(διεύθυνση URL της εικόνας σας) no-repeat;">
Δημοσίευση περιεχομένου σας πηγαίνει εδώ .....................
</ p>
 
Αντικαταστήστε διεύθυνση URL της εικόνας σας με το URL της εικόνας σας.

Δείτε ένα δείγμα κάτω :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in neque sit amet metus auctor adipiscing. Phasellus ac libero non turpis elementum aliquam. Pellentesque non libero turpis, in euismod nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in neque sit amet metus auctor adipiscing. Phasellus ac libero non turpis elementum aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in neque sit amet metus auctor adipiscing. Phasellus ac libero non turpis elementum aliquam. Pellentesque non libero turpis, in euismod nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in neque sit amet metus auctor adipiscing. Phasellus ac libero non turpis elementum aliquam.Pellentesque non libero turpis, in euismod nisi.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in neque sit amet metus auctor adipiscing. Phasellus ac libero non turpis elementum aliquam. Pellentesque non libero turpis, in euismod nisi.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in neque sit amet metus auctor adipiscing. Phasellus ac libero non turpis elementum aliquam. Pellentesque non libero turpis, in euismod nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in neque sit amet metus auctor adipiscing. Phasellus ac libero non turpis elementum aliquam.


   

Συνδέσεις ( links ) χωρίς υπογράμμιση από κάτω : 

 

Για  να χρησιμοποιήσετε αυτό το CSS και να επιτύχετε αυτό το αποτέλεσμα. Να εντάξετε τον παρακάτω κώδικα στο header τμήμα της ανάρτησης σας :

<style type="text/css"> a{ text-decoration:none; } </style>

Τώρα πλέων οι συνδέσεις ( links ) σας δεν θα υπογραμμίζονται από κάτω .

 

Συνδέσεις ( links ) με mouse hover χρώμα επιλογής σας

 

Για να δημιουργήσετε  συνδέσμους ( links ) που αλλάζουν  χρώμα όταν το ποντίκι περνά πάνω του . Εδώ είναι ο πηγαίος κώδικας για το σκοπό αυτό . Όπως πάντα τον CSS κώδικα εισάγετε στο header τμήμα της της ανάρτησης σας :

<style type="text/css"> a:hover{ color:red; } </style>

Βεβαίως , την  λέξη  " red " ,  το χρώμα μπορείτε να το αλλάξετε ανάλογα με τις επιθυμίες σας .
Εδώ είναι ένα παράδειγμα μιας σύνδεσης με mouse hover χρώμα επιλογής  :

Πατήστε εδώ για να μεταβείτε στο google

  

Επισήμανση  κείμενου

 

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

Το CSS είναι μια καινοτομία στο Web design γιατί επιτρέπει στους χρήστες να κοντρολάρουν το πως θα είναι η γενική και ειδική εμφάνιση πολλών Web σελίδων μαζί ταυτόχρονα!

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

<span style="background-color: yellow">επιτρέπει στους χρήστες να κοντρολάρουν </span>


 

Όμορφοι  Πινάκες με χρωματιστά περιγράμματα :

 


Πίνακας με κόκκινο , λεπτό περίγραμμα


Πίνακας με κίτρινο , παχύ περίγραμμα

Πίνακας με κόκκινο λεπτό  dashed  περίγραμμα

Πίνακας με κόκκινο λεπτό dotted περίγραμμα

Το παραπάνω αποτέλεσμα επιτυγχάνεται με τον ακόλουθο κώδικα,   τοποθετημένα μέσα στο <table>  ετικέτα :

1) Με το κίτρινο παχύ περίγραμμα :


<table style="border-bottom: yellow 20px solid; border-left: yellow 20px solid; border-top: yellow 20px solid; border-right: yellow 20px solid" width="332"><tbody>
    <tr>
      <td width="330">Πίνακας με κίτρινο , παχύ περίγραμμα </td>
    </tr>
  </tbody></table>

2) Με το κόκκινο λεπτό  περίγραμμα :



<table style="border-bottom: red 2px solid; border-left: red 2px solid; border-top: red 2px solid; border-right: red 2px solid" width="322"><tbody>
    <tr>
      <td width="322">Πίνακας με κόκκινο , λεπτό περίγραμμα</td>
    </tr>
  </tbody></table>


Μπορείτε να αλλάξετε "20px" και το χρώμα "yellow " σε διαφορετικές τιμές για     μεταβάλλουν το πάχος και το χρώμα των περιγραμμάτων , αντίστοιχα.
Μπορείτε να αλλάξετε επίσης  “ solid “ με “ dashed “ η με “ dotted “  η με ότι εσείς θέλετε .




 links που αλλάζουν μέγεθος



Δείτε Εδώ



Ο πηγαίος κώδικας για αυτό είναι:

<style type="text/css"> A:link {text-decoration: none} A:visited {text-decoration: none} A:active {text-decoration: none} A:hover {font-size:24; font-weight:bold; color: red;} </style> ---Εδώ το link σας---


   
Scroll box με χρωματιστό  υπόβαθρο 




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


Δείτε ένα δείγμα κάτω :


Νέα στοιχεία για ζωή στον Αρη  

Τις μέχρι τώρα πιο σοβαρές ενδείξεις ότι υπήρχε ζωή στον Αρη, ανακάλυψαν επιστήμονες της ΝΑSA. Oι τελευταίοι μελέτησαν ένα μετεωρίτη που έπεσε στην Ανταρκτική από τον Αρη πριν 13.000 χρόνια και εντόπισαν βακτήρια που ήταν ενσωματωμένα κάτω από τα πρώτα στρώματα του βράχου. Η ανακάλυψη των βακτηρίων


Πώς να κάνετε το Scroll box ;


Μπορείτε απλά να αντιγράψετε και να επικολλήσετε τον παρακάτω  κώδικα :




<style type="text/css"> div.scroll { background-color:#CCF1EF; width:400px; height:100px; overflow:scroll; } div.hidden { background-color:#CCF1EF; width:400px; height:200px; overflow:hidden; } </style> <br /> <div class="scroll"> Το περιεχόμενο σας εδώ..... <br /> </div>


Φυσικά, μπορείτε να αλλάξετε τις τιμές που ταιριάζουν (όπως το height , width και το χρώμα background-color:#CCF1EF )


  
Αλλάξτε τα cursor του ποντικιού σας :




Περάστε το ποντίκι σας πάνω στις λέξεις για να δείτε το αποτέλεσμα .


Ιδιότητες CURSOR :

ΕμφάνισηΜεταβλητές Τεστ NSIEΠαράδειγμα
cursor-sampledefaultTEST6+4+cursor:default
cursor-samplecrosshairTEST6+4+cursor:crosshair
cursor-samplehandTEST4+cursor:hand
cursor-samplepointerTEST6+cursor:pointer
cursor-sampleCross browserTEST4+cursor:pointer;cursor:hand
cursor-samplemoveTEST6+4+cursor:move
cursor-sampletextTEST6+4+cursor:text
cursor-samplewaitTEST6+4+cursor:wait
cursor-samplehelpTEST6+4+cursor:help
cursor-samplen-resizeTEST6+4+cursor:n-resize
cursor-samplene-resizeTEST6+4+cursor:ne-resize
cursor-samplee-resizeTEST6+4+cursor:e-resize
cursor-samplese-resizeTEST6+4+cursor:se-resize
cursor-samples-resizeTEST6+4+cursor:s-resize
cursor-samplesw-resizeTEST6+4+cursor:sw-resize
cursor-samplew-resizeTEST6+4+cursor:w-resize
cursor-samplenw-resizeTEST4+4+cursor:nw-resize

cursor-sample
progressTEST6+cursor:progress

cursor-sample
not-allowedTEST6+cursor:not-allowed

cursor-sample
no-dropTEST6+cursor:no-drop

cursor-sample
vertical-textTEST6+cursor:vertical-text

cursor-sample
all-scrollTEST6+cursor:all-scroll

cursor-sample
col-resizeTEST6+cursor:col-resize

cursor-sample
row-resizeTEST6+cursor:row-resize

cursor-sample
cursor:url(uri)TEST
6+cursor:url(uri)



Για να το κάνετε αυτό απλά συμπεριλαμβάνεται τον παρακάτω κώδικά στην ανάρτησή σας :



Σημειωση : Αλλάζετε την ιδιότητα  cursor >> help σε cursor: w-resizecursor:wait η σε ότι εσείς θέλετε


Αυτά προς το παρόν , στην επόμενη ανάρτηση θα αναρτήσω και άλλα  CSS κόλπα...
Read More ►

Πέμπτη, Νοεμβρίου 26

0

Κτίζοντας ένα CSS μενού με Mouse-Over εφέ

Εισαγωγή

Θυμάμαι όταν άρχισα μαθήματα κατασκευής ιστοσελίδων , το πρώτο πράγμα που μάθαμε ήταν , το πως η χρήση του CSS έχει διευκολύνει την ζωή μας . Παλιά η δημιουργία ενός δυναμικού μενού σήμαινε τη δημιουργία μιας σειράς εικόνων : μια για τη στατική εικόνα, μια για το Mouse-Over  εφέ και πήγαινε λέγοντας.
Μετά από αυτό, η ενσωμάτωση του Javascript  , για να δημιουργηθεί το Mouse-Over  εφέ στις εικόνες . Ωχ! Έχει πολύ δουλειά....

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

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

Σε αυτό το άρθρο θα σας παρουσιάσω μια πολύ απλή τεχνική για να δημιουργήσετε το Mouse-Over  μενού σχεδόν σε δυο λεπτά , έχει υπέροχη εμφάνιση  και  είναι πολύ εύκολο να εγκατασταθεί σε μια σελίδα .

Τέλος πάντων, ας ξεκινήσουμε!

Το τελικό προϊόν


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




Η οικοδόμηση του Μενού


Η οικοδόμηση του μενού είναι μια απλή διαδικασία. Πρώτον, θα ξεκινήσει με τη δημιουργία του φόντο του μενού. Αυτό είναι το σκούρο μαύρο , όπως μπορείτε να δείτε παραπάνω.
Τοποθετήστε αυτό το div μέσα στο </body> ετικέτα της ιστοσελίδας σας, όπου θέλετε το μενού να εμφανιστεί :


<div id="mymenu">
<a class="menu" href="#" title="home">home</a>
<a class="menu" href="#" title="Τιτλος 2">Τιτλος 2</a>
<a class="menu" href="#" title="Τιτλος 3">Τιτλος 3</a>
<a class="menu" href="#" title="Τιτλος 4">Τιτλος 4</a>
<a class="menu" href="#" title="Τιτλος 5">Τιτλος 5</a>
<a class="menu" href="#" title="RSS">RSS</a>
<a class="menu" href="#" title="Τιτλος 6">Τιτλος 6</a>
<a class="menu" href="#" title="Τιτλος 7">Τιτλος 7</a>
<a class="menu" href="#" title="Αρχεια">Αρχεια</a>
</div>
Στην συνέχεια εισάγετε  πριν την ετικέτα  </head>  της σελίδας σας  το stylesheet για το μενού


<style>
.menu {
font-family: verdana;
font-size: 10pt;
font-weight: bold;
border-right: 2px solid white;
text-decoration: none;
text-background--color:#FFFFFF;
background-color: #000000;
padding: 6px;
}
.menu:hover {
background-color: #D8D8D8;
}
.mymenu {
background-color: #000000;
padding: 6px 0px 6px 0px;
}
</style>

Κατανόηση του κώδικα



border-right: 2px solid white;

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


.menu:hover {
background-color: #D8D8D8;
}

Εδώ, έχουμε απλά το χρώμα  του υπόβαθρου των κουμπιών , όταν περνά από πάνω το ποντίκι 
Θυμηθείτε ότι το χαρακτηριστικό hover λειτουργεί μόνο σε συνδέσμους, δηλαδή  <a href…> </ a>   ετικέτες .

Τελειώνουμε


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


<style>
.menu {
font-family: verdana;
font-size: 10pt;
font-weight: bold;
border-right: 1px solid white;
text-decoration: none;
text-background--color:#FFFFFF;
background-color: #000000;
padding: 6px;
}
.menu:hover {
background-color: #D8D8D8;
}
.mymenu {
background-color: #000000;
padding: 6px 0px 6px 0px;
}
</style>
<div id="mymenu">
<a class="menu" href="#" title="home">home</a>
<a class="menu" href="#" title="Τιτλος 2">Τιτλος 2</a>
<a class="menu" href="#" title="Τιτλος 3">Τιτλος 3</a>
<a class="menu" href="#" title="Τιτλος 4">Τιτλος 4</a>
<a class="menu" href="#" title="Τιτλος 5">Τιτλος 5</a>
<a class="menu" href="#" title="RSS">RSS</a>
<a class="menu" href="#" title="Τιτλος 6">Τιτλος 6</a>
<a class="menu" href="#" title="Τιτλος 7">Τιτλος 7</a>
<a class="menu" href="#" title="Αρχεια">Αρχεια</a>
</div>


 Δείτε εδώ το CSS Mouse-Over μενού  σε λειτουργία :

Σημείωση :

Αν δεν θέλετε να ταλαιπωρηθείτε ψάχνοντας το </head>  και το </body> μέσα στο πρότυπο σας και θέλετε να το εγκαταστήσετε με ένα κλικ  , απλά δείτε εδώ αυτήν την ανάρτηση . Ακολουθείστε τα βήματα που σας δίνω εκεί και όταν θα έχουν δημιουργηθεί θέσεις Προσθήκη gadget , πάνω και κάτω από την επικεφαλίδα του πρότυπου σας , αντιγράψτε ολόκληρο τον κώδικα και εισάγετε τον στο Προσθήκη gadget >> HTML/JavaScript


Και τέλος ! Έχετε ένα ολοκληρωμένο μενού για την επόμενη ιστοσελίδα σας, με λίγες μόνο γραμμές του  κώδικα!
Read More ►

Τετάρτη, Νοεμβρίου 25

0

imgBox – Για να παρουσιάσετε τις εικόνες σας με στυλ !!!

Δημιουργείστε, παρουσιάστε και δημοσιεύστε τη δουλειά σας με στυλ.
Μαγνητίστε τα βλέμματα στις εικόνες σας με το imgBox ! …

Παρακάτω θα δείτε 4 διαφορετικούς   τρόπους για να παρουσιάσετε τις φωτογραφίες σας με στυλ… επαγγελματικό!

Ας δούμε πρώτα τι είναι το imgBox


  • imgBox  είναι ένα jQuery Plugin
     
  • Με κομψή και φιλική σχεδίαση – σε στυλ Mac

     
  • Υποστηρίζονται όλα τα μεγάλα browsers ,συμπεριλαμβανομένου και τον IE6 +

  • Πολύ εύκολη εγκατάσταση

Πως να το χρησιμοποιήσουμε :


  Πρώτα απ’ όλα κατεβάστε το zip αρχειο εδω και αποσυμπιέστε το  και ανοίξτε το αρχείο “ imgbox “  , όπως  βλέπετε στην εικόνα παρακάτω :



  Στο αρχείο “ imgbox “ θα βρείτε  κάποια εικονίδια , 2 αρχεία JavaScript και 1 CSS αρχείο .

  Ανεβάζετε τα εικονίδια και τα 2 JavaScript  αρχεία , στο δικό σας free file hosting and sharing site ( αν δεν ξέρετε κάποιο site , τότε ρίξτε μια ματιά εδώ ) .



Τώρα ανοίγουμε το  imgbox CSS και ψάχνετε μέσα στο  CSS να βρείτε κάτι σαν τις παρακάτω γραμμές :
' imgbox-spinner.gif '  ,  ' imgbox-close.png '  ,  imgbox-bg-n.png  ,  imgbox-bg-ne.png ……
Και τις αλλάζετε με τα URL  των αντιστοίχων αρχείων σας  και αποθηκεύετε  .
Τώρα ανεβάζετε και το imgbox CSS  στο δικό σας free file hosting and sharing site  και πάμε στο τελικό στάδιο .

Πώς να το εγκαταστήσετε :


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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


  Κάνουμε login στο blogger λογαριασμό μας  , επιλέγουμε  Διάταξη “ >> “ Επεξεργασία HTML “ >> “ Επέκταση προτύπων γραφικών στοιχείων “  . [ Πριν κάνουμε οποιαδήποτε ενέργεια , πάντα κάνουμε  Λήψη πλήρους προτύπου ]  και ψάχνουμε να βρούμε το  </head> , κολλάμε  ακριβώς πριν από αυτό , τον  παρακάτω κώδικα :



<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="imgbox/jquery.imgbox.pack.js"></script>
<link rel="stylesheet" href="imgbox/imgbox.css" />
<style type="text/css">
#images a {
margin-right: 14px;
}
#images a img {
border: 1px solid #888;
padding: 3px;
vertical-align: top;
}
</style>
<script type='text/javascript'>
$(document).ready(function() {
$("#image";).imgbox({
'zoomOpacity' : true,
'alignment' : 'center'
});
});
</script>



Αλλάζετε το imgbox/imgbox.css με το url του αντίστοιχου αρχείου σας .   Σε περίπτωση που θέλετε να προσθέσετε και αλλά στυλ σας δίνω κάτω 4 διαθέσιμα στυλ , τα οποία μπορείτε να τα χρησιμοποιήσετε και τα 4 μαζί αν θέλετε .

Διαθέσιμες επιλογές :

Έχετε 4 διαφορετικούς τρόπους να τροποποιήσετε τις τοποθετήσεις:

1ος Τρόπος
$("#image").imgbox();


Δείτε το DEMO εδώ



2ος Τρόπος

$("#image").imgbox({
'zoomOpacity' : true,
'alignment' : 'center'
});


Δείτε το DEMO εδώ



3ος Τρόπος

$("#image").imgbox({
'speedIn' : 0,
'speedOut' : 0,
'alignment' : 'center',
'overlayShow' : true,
'allowMultiple' : false
});

Δείτε το DEMO εδώ



4ος Τρόπος

$("#image").imgbox({
'speedIn' : 0,
'speedOut' : 0
});

Δείτε το DEMO εδώ

Τρόπος να χρησιμοποιήσετε κε τα 4 στυλ μαζί :



<script type="text/javascript">
$(document).ready(function() {
$("#image1").imgbox();
$("#image2").imgbox({
'zoomOpacity' : true,
'alignment' : 'center'
});
$("#image3").imgbox({
'speedIn' : 0,
'speedOut' : 0
});
$("#image4").imgbox({
'speedIn' : 0,
'speedOut' : 0,
'alignment' : 'center',
'overlayShow' : true,
'allowMultiple' : false
});
});
</script>

Η Ενεργοποίηση  :

  Δημιουργήστε τα στοιχεία συνδέσεων. Μπορείτε να θέσετε τον τίτλο χρησιμοποιώντας τις ιδιότητες τίτλου:

Κάθε φορά που  θα εισάγετε μια εικόνα στην ανάρτηση σας απλά ,χρησιμοποιήστε τον παρακάτω κώδικα :
 
<a id="image" title="Lorem ipsum dolor sit amet" href="big_image.jpg"><img src="thumb.jpg" alt="" /></a>

Αν χρησιμοποιείτε και τα 4 στυλ μαζί τότε ο κώδικας θα γίνει :


<div id="images">
<a id="image1" title="Lorem ipsum dolor sit amet" href="big_image.jpg"><img src="thumb.jpg" alt="" /></a>
<a id="image2" title="Lorem ipsum dolor sit amet" href="big_image.jpg"><img src="thumb.jpg" alt="" /></a>
<a id="image3" title="Lorem ipsum dolor sit amet" href="big_image.jpg"><img src="thumb.jpg" alt="" /></a>
<a id="image4" title="Lorem ipsum dolor sit amet" href="big_image.jpg"><img src="thumb.jpg" alt="" /></a>
</div>

Σημείωση : Μην ξεχνάτε να συσχετίζετε τα id των εικόνων σας με τους επιλογείς του jQuery .  Αν ο επιλογείς του jQuery είναι  image4  π.χ.  $("#image4").imgbox({  , τότε το id εικόνας πρέπει να είναι αντίστοιχο <a id="image4" title= …….


Ελπίζω να μην δυσκολευτείτε  και  να πάνε  όλα  καλά ! 
Πάντως για ότι χρειαστείτε , μην διστάσετε να επικοινωνήσετε μαζί μου .

Καλή τύχη !….
Read More ►

Δευτέρα, Νοεμβρίου 23

0

Προσθέστε επιπλέον ένα gadget στοιχείο σελίδας στην κορυφή του blog


Όπως ήδη  ξέρετε , τα πρότυπα  Blogger  έχουν μόνο 3 σημεία Προσθήκης gadget (στοιχεία σελίδας ), όπως φαίνεται στο σχήμα παρακάτω:




Είναι πολύ χρήσιμο νομίζω , να έχουμε επιπλέον  Προσθήκη gadget , κάτω  και πάνω  από την Κεφαλίδα του blog και πάνω από την κύρια στήλη , όπως φαίνεται στο σχήμα παρακάτω:




Για να το κάνετε αυτό  πηγαίνετε :  Διάταξη >>   Επεξεργασία HTML  >> κάντε κλικ στο Επέκταση προτύπων γραφικών στοιχείων
Πατήστε Ctrl + F και κάντε αναζήτηση στο πρότυπο σας για την παρακάτω γραμμή .

showaddelement


Και αλλάξτε το  showaddelement='no'>   σε  showaddelement='yes'>


Παράδειγμα :


<b:section class='main' id='main' showaddelement='yes'>


Πατάτε ΕΥΡΕΣΗ ΕΠΟΕΝΟΥ μέχρι  να βρείτε όλες τις γραμμές που περιέχουν showaddelement . Συνήθως  σε ένα κανονικό πρότυπο θα βρείτε 3 γραμμές .

Και  αν υπάρχει maxwidgets , αλλάξτε τότε το  maxwidgets='1'   σε  maxwidgets='2'  ή περισσότερο , μπορείτε επίσης να αφήσετε  ως  maxwidgets='' (unlimited number) .


Παράδειγμα :


<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>


Αποθηκεύετε το πρότυπο σας και πατήστε Στοιχεία Σελίδας , για να δείτε το αποτέλεσμα   .
Τώρα μπορείτε να προσθέσετε ότι HTML / Javascript gadget  θέλετε η να  σύρεται ήδη υπάρχων gadget , σε οποιαδήποτε τμήματα του blog σας χρησιμοποιώντας το ποντίκι σας.
Read More ►

Κυριακή, Νοεμβρίου 22

1

Sandstone | Blogger template





                                              Preview      Download

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

   2 Columns
   Fixed Width
   Left Sidebar
   black template
   Συμβατό με : IE7 και  Firefox

Theme Author: Free CSS Templates
Converted By: Theme Craft
Read More ►

0

StarGazer | Blogger Template



                                             Preview theme         Download theme


StarGazer  είναι ένα μαύρο  Blogger Template , με 2 στήλες και κομψή σχεδίαση .
Προσωπικά αισθάνομαι  ότι αυτό Stargazer Blogger πρότυπο είναι πολύ cool , με πολύ όμορφη επικεφαλίδα
Ελπίζω να σας αρέσει αυτό το σκοτεινό κομψό Blogger template !

2 Columns Template
Fixed Width
Right Sidebar
Συμβατό με  Firefox , με  IE7


Μετατροπή από wordpress σε Blogger themes  από :  Theme Craft
Theme Author :  FreeWPThemes
Read More ►

Παρασκευή, Νοεμβρίου 20

2

Πληρες πακετο-Ελληνικο Wordpress 2.8.6 με εγκατεστημενα 45 προσθετα.

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

Μπορείτε να κατεβάσετε το Πλήρες πακέτο-Ελληνικό Wordpress 2.8.6 με εγκατεστημένα 45 πρόσθετα.
Τι περιμενετε λοιπον  κατεβάστε το πακέτο που και ξεκινήστε να δημιουργείτε το blog σας ,  απλά και διασκεδαστικά!!!
Read More ►

Τετάρτη, Νοεμβρίου 18

0

MAC Style Dock Menu Για το Blog σας




     Εάν είστε ένας μεγάλος θαυμαστής της MAC, θα αγαπήσετε αυτό το Dock Menu
Χρησιμοποιεί Jquery ,  Javascript και συστατικό Fisheye από Interface και μερικές εικόνες .
Εδώ θα σας παρουσιάσω πώς να το εφαρμόσετε στην ιστοσελίδας σας.

1. Μεταφορτώστε τα αρχεία πηγής

 

Μεταφορτώστε το dock menu zip package .


    Αποσυμπιέστε το zip αρχείο και ανοίξτε το . Εκεί θα βρείτε 3 βασικά αρχεία που θα χρησιμοποιήσουμε :   images js  και  style , όπως φαίνετε στο παρακάτω σχήμα
 
  
     Ανεβάστε το  iepngfix  , το περιεχόμενο του  φακέλου  images  και  του φακέλου  js  σε μια υπηρεσία δωρεάν φιλοξενίας  και αποθήκευσης για τα αρχεία των χρηστών << π.χ. http://www.4shared.com/ , http://sites.google.com/ >> η  όποια εσείς χρησιμοποιείτε .

  Τώρα ανοίγετε το αρχείο  style  και αλλάζετε τα url εικόνων  με τα url των αντίστοιχων αρχείων σας  ,( εκτός από  menu/main-bg.gif )
αποθηκεύουμε και ανεβάζουμε και αυτό το αρχείο σε μια υπηρεσία δωρεάν φιλοξενίας  και αποθήκευσης για τα αρχεία των χρηστών
 

2. Εισάγετε των Κώδικα

 

Πάνω από την ετικέτα   </head>  προσθέτετε τον ακόλουθο κώδικα :


<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<style type="text/css">
.dock img { behavior: url(iepngfix.htc) }
</style>
<![endif]-->




      Αλλάζετε τις γραμμές   js/jquery.js , js/interface.js , style.css , iepngfix.htc   με τα url των αντίστοιχων αρχείων σας  .

3. Διαμόρφωση

 

   Για να  βάλουμε το Dock Menu :
Προσθέτετε τον ακόλουθο κώδικα κάτω από στην  ετικέτα <body> :


<div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a>
<a class="dock-item" href="#"><img src="images/email.png" alt="contact" /><span>Contact</span></a>
<a class="dock-item" href="#"><img src="images/portfolio.png" alt="portfolio" /><span>Portfolio</span></a>
<a class="dock-item" href="#"><img src="images/music.png" alt="music" /><span>Music</span></a>
<a class="dock-item" href="#"><img src="images/video.png" alt="video" /><span>Video</span></a>
<a class="dock-item" href="#"><img src="images/history.png" alt="history" /><span>History</span></a>
<a class="dock-item" href="#"><img src="images/calendar.png" alt="calendar" /><span>Calendar</span></a>
<a class="dock-item" href="#"><img src="images/rss.png" alt="rss" /><span>RSS</span></a>
</div>
</div>
<!--dock menu JS options -->
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 90,
halign : 'center'
}
)
}
);
</script>

Αλλάζετε τα url εικόνων  με τα url των αντίστοιχων αρχείων σας  και αποθηκεύετε
 
Δείτε το τελικό αποτέλεσμα  


4. Προσθέστε ή αφαιρέστε το στοιχείο
 

 Για να προσθέσετε ένα στοιχείο menu στο top dock   ( σημείωση: η ετικέτα span είναι μετά από την ετικέτα img ) :

<a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a>

Συμβατότητα μηχανής αναζήτησης

 

Είναι δοκιμασμένο σε IE 6, IE 7, Opera 9, Firefox , και  Safari 2

Script credits :   ndesign studio 


Read More ►

Δευτέρα, Νοεμβρίου 16

0

Html Hex Color Codes Generator


Παράγετε τα προσαρμοσμένα Hex χρώματα 

1. Σύρετε το μαύρο φραγμό στον επιλογέα «χρώματος» για να παραγάγετε το επιθυμητό χρώμα βάσεων.

2. Επόμενο διπλό κλικ μέσα στο πλέγμα φωτεινότητας/κορεσμού να ενεργοποιήσετε το δρομέα.
Το σέρνεται μέχρι να πετύχετε την επιθυμητή φωτεινότητα .
Το «Swatch» φραγμός παρουσιάζει το τελικό αποτέλεσμα χρώματος. 

3. Ο κώδικας χρώματος hex παράγεται στο κατώτατο σημείο του πλέγματος Κουτάκι «hex».
Απλά το αντιγράφετε και κολλάτε τον κώδικα στη σελίδα σας.





Read More ►

Κυριακή, Νοεμβρίου 15

0

Google Indicator Widgets

To Google Indicator επιδεικνύει το pagerank σας , τις indexeds σελίδες σας και τα baclinks σας στο google!
  • Επιλέξτε τον χρωματικό συνδυασμό .
  • εισάγετε το url του ιστοσελίδας σας και πατήστε το κουμπί " Submit " .
  • Αντιγράψτε και επικολλήστε τον κώδικα που θα εμφανιστεί στη σελίδα σας!

Read More ►

Τρίτη, Νοεμβρίου 10

1

Πως να βάλετε ένα όμορφο Tag Cloud στο Blog σας με χρήση Css και jquery

Η χρήση του Tag Cloud  έχει γίνει πολύ δημοφιλείς και ευρέως διαδεδομένη στο διαδίκτυο σήμερα.
Έτσι, θα δούμε παρακάτω πως να βάλουμε στο blog μας  Tag Cloud .

 
                                  Demo  Download

                       

Βήμα 1ο : Css και jquery


    Πρώτα απ’όλα  κατεβάστε το  jquery.js  script  και ανεβάζετε  αυτό το script στο δικό σας  File Hosting Sites .( Αν δεν ξέρετε που να ανεβάσετε τα αρχεία σας τότε ρίξτε μια ματιά εδώ )

     Κάνουμε login στο Blogger Dashboard  και πάμε “ Διάταξη “ >> “ Επεξεργασία HTML “  και κάνουμε “ Επέκταση προτύπων γραφικών στοιχείων “
Σημείωση :  Πριν επεξεργαστούμε το πρότυπό μας , αποθηκεύουμε πάντοτε ένα αντίγραφο , Πατώντας  “ Λήψη πλήρους προτύπου “

  Ψάχνουμε να βρούμε στο πρότυπο μας το  </head> και κολλάμε ακριβώς από πάνω τον παρακάτω κώδικα :
<style> 

/* Tag cloud */ 

    .tags ul{
        margin:1em 0;
        padding:.5em 10px;
        text-align:center;
        background:#E9417F url(#) repeat-x;        
        }
    .tags li{
        margin:0;
        padding:0;
        list-style:none;
        display:inline;
        }
    .tags li a{
        text-decoration:none;
        color:#fff;
        padding:0 2px;    
        }
    .tags li a:hover{    
        color:#33F40C;
        }        
    .tag1{font-size:100%;}
    .tag2{font-size:120%;}
    .tag3{font-size:140%;}
    .tag4{font-size:160%;}
    .tag5{font-size:180%;}
    /* alternative layout */ 

    .tags .alt{
        text-align:left;
        padding:0;
        background:none;
        }
    .tags .alt li{
        padding:2px 10px;
        background:#efefef;
        display:block;
        }
    .tags .alt .tag1, 
    .tags .alt .tag2, 
    .tags .alt .tag3, 
    .tags .alt .tag4, 
    .tags .alt .tag5{font-size:100%;}
    .tags .alt .tag1{background:#7cc0f4;}
    .tags .alt .tag2{background:#67abe0;}
    .tags .alt .tag3{background:#4d92c7;}
    .tags .alt .tag4{background:#3277ad;}
    .tags .alt .tag5{background:#266ca2;}
/* // Tag cloud */ 

</style>
<script src='js/jquery.js' type='text/javascript'/>
<script type='text/javascript'> 

</script>
Σημείωση :  Αλλάζετε το  js/jquery.js με το url του αντίστοιχου αρχείου μας  και αποθηκεύουμε το πρότυπο μας .
Αν θέλετε να αλλάξετε το background χρώμα , βρείτε την γραμμή :  background:#E9417F url(#) repeat-x;  και αλλάξτε την γραμμή με το κόκκινο στο χρώμα που θέλετε , εδώ θα βρείτε όλα τα Color Codes .

  Αποθηκεύετε το πρότυπο σας και πάμε στο επόμενο βήμα .

Βήμα 2ο : Το HTML


  Πάμε “ Διάταξη “ >> “ Στοιχεία Σελίδας “ >> “ Προσθήκη gadget “ και “ HTML/JavaScript “  και εισάγουμε τον παρακάτω κώδικα
<div class="tags">
            <ul>
                <li class="tag1"><a href="#">blogger hacks</a></li> 
                <li class="tag2"><a href="#">blogger widgets</a></li>
                <li class="tag3"><a href="#">CSS tutorial</a></li>
                <li class="tag2"><a href="#">Javascript Tutorials </a></li>
                <li class="tag4"><a href="#">mootools</a></li>
                <li class="tag1"><a href="#">Blogger Widgets</a></li>
                <li class="tag1"><a href="#">Premium Blogger Templates</a></li>
                <li class="tag5"><a href="#">Webmaster tools</a></li>
                <li class="tag2"><a href="#"> Jquery tutorial</a></li>
                <li class="tag1"><a href="#">Image Effects </a></li>
                <li class="tag3"><a href="#">Twitter tools</a></li>
                <li class="tag4"><a href="#">Firefox Plugins </a></li>
                <li class="tag1"><a href="#">blogger templates</a></li>
                <li class="tag5"><a href="#">CSS tutorial</a></li>
                <li class="tag1"><a href="#">blogger hacks</a></li>
                <li class="tag2"><a href="#">Basic SEO Tips</a></li>
            </ul>
        </div>
Αλλάζετε τα links με τα δικά σας , αποθηκεύετε και δείτε το αποτέλεσμα .
Συγχαρητήρια ,  έχετε ένα όμορφο Label Cloud στο blogger blog σας  πλέον .
Για οποιαδήποτε απορία , αφήστε μου ένα σχόλιο και θα χαρώ να βοηθήσω όσο μπορώ ….
Read More ►

Δευτέρα, Νοεμβρίου 9

0

Paper Craft | Blogger Template




Template Name: Paper Craft
Author: Template Lite
Converter: Falcon Hive
Best Viewed Browser:
Internet Explorer 7&8, Firefox RC3, Opera 9.6, Google Chrome 0.3.154.9, Flock 2.0.3, Safari 4 Public Beta


Χαρακτηριστικά γνωρίσματα :

  • Παραδοσιακό και καλλιτεχνικό σχέδιο
  • Navigation Menu
  • Όμορφα σχεδιασμένο τμήμα συνδρομής RSS
  • 2 sidebar sections


 Demo      Download

Read More ►

Παρασκευή, Νοεμβρίου 6

3

Πώς να προσθέσετε Meta Tags στο Blogger Blog

Πρώτα απ’όλα ας δούμε τι είναι τα Meta Tags :

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

Metadata για SEO (βελτιστοποίηση μηχανών αναζήτησης)

Meta Tags παρέχουν πληροφορίες σχετικά με μια συγκεκριμένη ιστοσελίδα, τις περισσότερες φορές για να βοηθήσουν τις μηχανές αναζήτησης να ταξινομήσουν σωστά. Έχουν εισαχθεί στο έγγραφο HTML, αλλά συχνά δεν είναι άμεσα ορατές στους χρήστες που επισκέπτονται την ιστοσελίδα.

Meta Tag Format :

<meta content='DESCRIPTION HERE' name='description'/>
<meta content='KEYWORDS HERE' name='keywords'/>
<meta content='AUTHOR NAME HERE' name='author'/>

Προσθήκη Meta Tags - στο Blogger


Βήμα 1.  Σύνδεση στο


Βήμα 2. Πηγαίνετε Διάταξη >> Επεξεργασία HTML


Βήμα 3.  Αναζητήστε τον κώδικα

<title> <data:blog.title/> </ title> 

 
Αν δεν το βρίσκετε ψάξτε για τον κώδικα :

<title><data:blog.pageTitle/></title>

 

Βήμα 4.  Τοποθετήστε Meta Tags ακριβώς κάτω από τον παραπάνω κώδικα (όπως φαίνεται στο παρακάτω σχήμα.)






Περιγραφή των Meta Tag Χαρακτηριστικών :


 DESCRIPTION HERE :  Εδω μπορείτε να εισάγετε μια σύντομη περιγραφή για το blog σας. Φροντίστε να είναι έως 150 χαρακτήρες ή λιγότερες.


KEYWORDS HERE : ΕΔΩ Εισάγετε αρκετές από τις λέξεις-κλειδιά σας. Και πάλι, δεν επιβαρύνουμε με λέξεις-κλειδιά , όχι περισσότερες από 30


AUTHOR NAME HERE : Εδώ εισάγετε το όνομά σας, την εταιρική επωνυμία ή ακόμη και το όνομα του blog. Σημειώστε ότι αυτή η ετικέτα δεν είναι τόσο σημαντική όσο οι άλλες  δύο, αλλά είναι μια συμπαθητική μικρή προσθήκη


Μόλις ολοκληρώσετε , αποθηκεύετε το πρότυπό σας.


Συγχαρητήρια !  Έχετε βελτιώσει τώρα το SEO σας.

Read More ►

Τρίτη, Νοεμβρίου 3

0

Νέο Transparent Navbar styles από το Blogger


Ως  συγγραφέας στο  blog σας , έχετε περάσει πιθανώς πολύ χρόνο για να δημιουργήσετε το κατάλληλο "look" για το ιστολόγιό σας.
Ένα blog είναι μια διέξοδος για δημιουργική έκφραση, και το πώς φαίνεται το blog σας, λέει πολλά για σας, όπως και αυτό που είναι γραμμένο σε αυτό.
Έτσι στο Blogger δεσμεύονται να μας παρέχουν τα απαραίτητα εργαλεία για να δημιουργήσουμε ένα εντυπωσιακό blog.

Το Blog * Spot γραμμή πλοήγησης ( "navbar") είναι ένας τομέας στον οποίο κατάλαβαν ότι υπάρχει περιθώριο για βελτίωση. Οι τέσσερις παραδοσιακές επιλογές χρωμάτων - μπλε, μαύρο, Tan, και Silver - ήταν κάπως περιορισμένες, ειδικά αν το χρώμα του φόντου του ιστολογίου σας είναι Lime Green η ζεστό ροζ.


Αυτός είναι ο λόγος για τον οποίο  πρόσθεσαν δύο νέες  αποχρώσεις - το  "Transparent Light" και το "Transparent Dark."
Το "Transparent Light" χρώμα  έχει ένα ήμι-διαφανές λευκό φόντο, που παράγει λεπτά παστέλ χρώματα, ενώ το φόντο του "Transparent Dark "  είναι ένα ημιδιαφανές μαύρο .



  



Για να αλλάξετε το navbar σας σε Transparent Light ή  Transparent Dark  navbar, πηγαίνετε στο Διάταξη >>  Στοιχεία Σελίδας , Στη συνέχεια, κάντε κλικ στο  Επεξεργασία  δίπλα στο navbar widget:



Αποθηκεύετε και δείτε το αποτέλεσμα ....
Read More ►
 

© 2010 Bloggertrics

WordPress Theme by: WooThemes. | Converted into Blogger Templates by : Bloggertrics

ΑΡΧΙΚΗ| Sitemap| Posts RSS