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

Δευτέρα, Δεκεμβρίου 28

3

2010 ΕΥΧΕΣ ΓΙΑ ΤΟ ΝΕΟ ΕΤΟΣ

 
2010

 Το 2009 σε λίγες  μέρες θα μας αφήσει  και την θέση του  θα πάρει το 2010!!

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


 Θέλω να ευχηθώ σε όλους σας καλές γιορτές, καλά Χριστούγεννα και ευτυχισμένο το 2010. Όλες οι ευχές σας να γίνουν πραγματικότητα !

 
Ας μας δώσει ο καινούργιος χρόνος  δύναμη για να αντέχουμε στα δύσκολα και καλή τύχη !

 
Ας μπορέσουμε να αξιοποιήσουμε τις εμπειρίες που αποκτήσαμε τα προηγούμενα χρόνια , 

ας γνωρίσουμε καλύτερα τον εαυτό μας ,
ας γίνουμε καλύτεροι άνθρωποι , ας κάνουμε καλύτερη τη ζωή μας , ας αγαπήσουμε τον κόσμο γύρω μας και ας μας αγκαλιάσει η χαρά και η καλοσύνη !!!!
 
Χρόνια Πολλά, ευτυχισμένο το νέο έτος 2010 με υγεία, ευτυχία για όλους , όπου κι αν βρίσκεστε !!!!!!!

 
Καλή Χρονιά !!!!!! 
Read More ►

Παρασκευή, Δεκεμβρίου 18

0

Χριστουγεννιάτικα Backgrounds και Banners

Christmas Banners Vector Graphic




File Size: 1.81 MB(compressed) File Format: EPS


XMas Banners

5 AI + JPG Preview - 11 mb



XMas Banners




    Επισκεφτείτε την ιστοσελίδα , διαλέξτε ανάμεσα σε πολλά πρότυπα  και δημιουργήστε τα δικά σας Merry Christmas Banners …






Christmas Frame
 
 PSD file | 2362x1772 | 19.6 MB



Christmas Frame



Winter and Christmas backgrounds vector pack

100 EPS | 20 МB



Winter and Christmas backgrounds vector pack 


Christmas Vectors Backgrounds 02

3 | EPS + JPG Preview | 4,5 mb


Christmas Vectors Backgrounds 02 



XMas Background

10 EPS + JPG Preview - 5 mb


XMas Background


XMas Background 2
8 EPS + JPG Preview - 9 mb

 
XMas Background



PSD templates - New Year 2010

1 PSD | 4724x3307, 6827x5906 | 74,4 mb



rwzt6bra29d8264zag.jpg



PSD Christmas – 6

2 PSD Files | 5175 x 3375 ~ 2053 x 1332 | 32.79 Mb

 
Christmas - 6



SS XMas

4 EPS + JPG Preview - 2 mb


SS XMas




Have Fun !………  Open-mouthed

Σημείωση : Τα περισσότερα αρχεία τα βρήκα εδώ , μπορείτε να επισκεφτείτε και να κατεβάσετε ακόμα περισσότερα ….. 

Read More ►

Τετάρτη, Δεκεμβρίου 16

4

Λίγες και ξεκάθαρες κουβέντες !!!!……….




 Η παραπάνω εικόνα τα λέει από μόνη της , αυτά που θέλω να πω σε αυτήν την ανάρτηση !

Πρώτων , ας ξεκαθαρίσουμε μερικά πραγματάκια .

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

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

Τρίτων , κανένας δεν είναι υποχρεωμένος να διαβάζει ούτε τις αναρτήσεις μου , ούτε υποχρεώνω κανέναν να του αρέσει η σελίδα μου !
Και όποιος νιώθει ότι θέλει να βγάλει τα απωθημένα του και τα κόμπλεξ του , μην το κάνετε εδώ !!! Υπάρχουν ειδικοί  ψυχολόγοι γι αυτό …..

Με εκτίμηση Σοφία !
Read More ►

Δευτέρα, Δεκεμβρίου 14

0

Xmas social-bookmarking buttons για το blog μας

Στολίσαμε τα blog μας , βάλαμε Xmas Yahoo Smiley Emoticons πάνω από την φόρμα σχολίων μας και τώρα θα δούμε πως θα βάλουμε κάτω από τις αναρτήσεις μας Xmas social-bookmarking buttons !





Λοιπόν ας πιάσουμε δουλειά ..

2. Πηγαίνουμε  Διάταξη > Επεξεργασία HTML > Κλικ στο Επέκταση προτύπων γραφικών στοιχείων 2. Ψάχνουμε να βρούμε στο πρότυπό μας τον παρακάτω κώδικα
</data:post.body>


Και εισάγουμε ακριβώς από κάτω τον παρακάτω κώδικα :

<div style='clear:both; '>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot; data:post.url &quot;&amp;title=&quot; data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; data:post.id &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; data:post.id &quot;\&quot;,19);&quot;' href='' rel='nofollow' target='_blank'><img alt='Google' src='http://lh3.ggpht.com/_L116RpGjEMY/SyYcRpMiO8I/AAAAAAAAA_s/6yehcQNscdU/google.png'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://del.icio.us/post?url=&quot; data:post.url &quot;&amp;title=&quot; data:post.title' rel='external nofollow' target='_blank'><img alt='Delicious' src='http://lh4.ggpht.com/_L116RpGjEMY/SyYcRHCpgxI/AAAAAAAAA_g/1MEs2dzhrp0/Delicious.png' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://technorati.com/faves?add=&quot; data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' src='http://lh6.ggpht.com/_L116RpGjEMY/SyYcvEFHyPI/AAAAAAAAA_8/dGiKMF7k_hY/technorati.png' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://twitthis.com/twit?url=&quot; data:post.url' rel='external nofollow' target='_blank'><img alt='Twitter' src='http://lh3.ggpht.com/_L116RpGjEMY/SyYcvUdDWDI/AAAAAAAABAA/QevUD4FzYus/twitter.png' style='padding:0;margin:0;border:none;'/></a> </div> <div style='width:65px; float:left;'> <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; data:post.url &quot;&amp;t=&quot; data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' src='http://lh4.ggpht.com/_L116RpGjEMY/SyYcRqqDCII/AAAAAAAAA_o/liYYcxDujG4/facebook.png' style='padding:0;margin:0;border:none;'/></a>
</div>
</div>

Αποθηκεύουμε το πρότυπο και  έχουμε τελειώσει ...

Αργότερα αν θέλετε αλλάζετε τις εικόνες , ανάλογα με το τι σας αρέσει .

Μπορείτε να προσθέσετε και άλλα bookmarking στοιχεία αν θέλετε  η να αφαιρέσετε κάποιο .



Δείτε  εδώ  το Demo 

   
Καλή επιτυχία λοιπόν ........








Read More ►

2

Xmas Yahoo Smiley Emoticons πάνω από την φόρμα σχολίων !

Εφόσον είμαστε στο κλίμα των Χριστουγέννων  και στολίσαμε με διάφορα στολίδια το blog μας , γιατί να μην δώσουμε χριστουγεννιάτικη νότα και στα σχόλια μας  ? ….
Λοιπόν το αποφάσισα , έκατσα και έφτιαξα τον κώδικα , τον μετέτρεψα στην ουσία .
Να πως θα μοιάζει το τελικό αποτέλεσμα :




Μπορείτε να δείτε και εδώ σε λειτουργία :


Ας δούμε λοιπόν πως θα τα εφαρμόσουμε στο blog μας :

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


  •     Πρώτη θα συνδεθούμε στο Blogger λογαριασμό μας 
  • Στη συνέχεια, πηγαίνουμε στο Διάταξη ->  "Επεξεργασία HTML" –> Κλικ στο Επέκταση προτύπων γραφικών στοιχείων
  •     Τώρα θα βρούμε αυτόν τον κωδικό:

<b:if cond='data:post.embedCommentForm'>


  •  Κολλάμε ακριβώς από κάτω τον παρακάτω κώδικα :

<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf; height:86'>
<b>
<img border='0' height='18' src='http://msnsmileys.net/y/smileys/Yahoo_Christmas/Heart_Break.gif'/> :))
<img border='0' height='18' src='http://msnsmileys.net/y/smileys/Yahoo_Christmas/Dear.gif'/> ;))
<img border='0' height='18' src='http://msnsmileys.net/y/smileys/Yahoo_Christmas/Dream.gif'/> ;;)
<img border='0' height='18' src='http://msnsmileys.net/y/smileys/Yahoo_Christmas/Its_Hot.gif'/> :D
<img border='0' height='18' src='http://msnsmileys.net/y/smileys/Yahoo_Christmas/Grin.gif'/> ;)
<img border='0' height='18' src='http://msnsmileys.net/y/smileys/Yahoo_Christmas/No_Expression.gif'/> :p
<img border='0' height='18' src='http://msnsmileys.net/y/smileys/Yahoo_Christmas/Hehe.gif'/> :((
<img border='0' height='18' src='http://msnsmileys.net/y/smileys/Yahoo_Christmas/Hungry.gif'/> :)
<img border='0' height='18' src='http://msnsmileys.net/y/smileys/Yahoo_Christmas/Clown.gif'/> :( 7/2
<img border='0' height='18' src='http://msnsmileys.net/y/smileys/Yahoo_Christmas/Not_Listening.gif'/> :X
<img border='0' height='18' src='http://msnsmileys.net/y/smileys/Yahoo_Christmas/Big_Grin.gif'/> =((
<img border='0' height='18' src='http://msnsmileys.net/y/smileys/Yahoo_Christmas/Confused.gif'/> :-o
<img border='0' height='18' src='http://msnsmileys.net/y/smileys/Yahoo_Christmas/Confused.gif'/> :-/
<img border='0' height='18' src='http://msnsmileys.net/y/smileys/Yahoo_Christmas/Lol.gif'/> :-*
<img border='0' height='18' src='http://msnsmileys.net/y/smileys/Yahoo_Christmas/Halo.gif'/> :|
<img border='0' height='18' src='http://msnsmileys.net/y/smileys/Yahoo_Christmas/Flower.gif'/> 8-}
<img border='0' height='18' src='http://msnsmileys.net/y/smileys/Yahoo_Christmas/Love.gif'/> :)]
<img border='0' height='18' src='http://msnsmileys.net/y/smileys/Yahoo_Christmas/Fatherchristmas.gif'/> ~x(
<img border='0' height='18' src='http://msnsmileys.net/y/smileys/Yahoo_Christmas/Leaf.gif'/> :-t
<img border='0' height='18' src='http://msnsmileys.net/y/smileys/Yahoo_Christmas/Elf_Good.gif'/> b-(
<img border='0' height='18' src='http://www.customizeyourmsn.com/christmas/11.gif'/> :-L
<img border='0' height='18' src='http://www.customizeyourmsn.com/christmas/21.gif'/> x(
<img border='0' height='18' src='http://msnsmileys.net/y/smileys/Yahoo_Christmas/Looking_Around.gif'/>=))
</b>
</div>

  •  Τώρα ψάχνουμε να βρούμε την ετικέτα  </body>  και εισάγουμε ακριβώς από πάνω , τον παρακάτω κώδικα :

<script src='http://sites.google.com/site/bloggertricks2/home/javascripts/smiley1.js' type='text/javascript'/>


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

Σημείωση : 

Αυτό το hack λειτουργεί μόνο σε πρότυπα , με ενσωματωμένη φόρμα σχολίων .

Αυτό είναι όλο!!!...
Τώρα γιορτάζουν Χριστούγεννα και τα σχόλια μας , χα , χα …. 
Read More ►

Παρασκευή, Δεκεμβρίου 11

0

4 ομορφότερα Christmas Countdown Χρονόμετρα !

Μετρήστε μέρες μέχρι τα Χριστούγεννα , με αυτά τα πανέμορφα χρονόμετρα !




Ουφ … αυτός ο αριθμός για τα Χριστούγεννα δεν λέει να γίνει μονοψήφιος !…….


Christmas Countdown





Τύπος αρχείου : Flash
Ιστοσελίδα : http://www.layoutcodez.net/christmas/countdown/






Τύπος αρχείου : Flash
Ιστοσελίδα : http://christmas0.com/







Τύπος αρχείου : Flash
Ιστοσελίδα  : http://www.christmasgifts.org/







Τύπος αρχείου : Flash
Ιστοσελίδα : alllayedout.com

Read More ►

Πέμπτη, Δεκεμβρίου 10

0

Όμορφα Χριστουγεννιάτικα Εικονίδια για το blog !

Και σε αυτήν την ανάρτηση θα είμαι στο κλίμα των Χριστουγέννων , πως αλλιώς θα μπορούσα άλλωστε ?!!!

Παρακάτω είναι μερικά όμορφα χριστουγεννιάτικα εικονίδια , για να δώσετε γιορτινή νότα στο blog σας ….

Have fun with your blog......... 


Blogger Xmas Logo Icons

 




Ευχαριστώ την Irior , που μου τα έστειλε .



                                            
Winter Holiday Icons







Christmas Icons 2





Xmas Pack Icons by Blackburrr






Standard New Year Icons by Aha-Soft







Christmas Special Social Networking Icons
 





The Real Christmas RSS Icons by Sudilkovsky Denis.






“Christmas Feed Icons” by webfruits.






Xmas mix
 



Read More ►

Τρίτη, Δεκεμβρίου 8

0

Χιονίζει στα blog μας !!!! Updated !

Έφτασαν τα Χριστούγεννα !!!!
Snowflake_300h
Στολίζουμε τα σπίτια μας με γιορτινά στολίδια και όλα γύρο μας θυμίζουν Χριστούγεννα  αυτές τις μέρες .
Όμως ο καιρός δεν μας κάνει το χατίρι να ρίξει λίγο χωνάκι , έτσι αποφάσισα να κάνω στο  blog  μου να χιονίσει  .

Μπορείτε να δείτε εδώ το χιονισμένο blog μου !

Αν θέλετε και εσείς να χιονίσει στο blog σας , εξακολουθήστε τα εξής απλά βήματα :

  •     Συνδεθείτε στο blogger λογαριασμό σας
  •     Πηγαίνετε  Διάταξη >>  Επεξεργασία HTML

  •     Βρείτε στο πρότυπο σας την ετικέτα  <body> και κολλήστε ακριβώς από κάτω τον παρακάτω κώδικα :

<script language='JavaScript1.2' src='http://sites.google.com/site/bl12tr34/archeiotheke/snow1.js'>
 
  

           Αποθηκεύετε το πρότυπο σας και χαρείτε το χιόνι έστω και έτσι Silly


Update


Επειδή παρατήρησα ότι ο παραπάνω κώδικας δεν λειτουργεί σωστά με όλα τα Web browsers , διότι ο κώδικας χρησιμοποιεί εικόνες , σας δίνω παρακάτω έναν άλλο κώδικα , που δεν βασίζετε στις εικόνες για την λειτουργία του  .....


Let It Snow.

 Χιονοθύελλα είναι ένα εφέ χιονιού βασισμένο σε Javascript , το οποίο μπορεί να προστεθεί εύκολα σε ιστοσελίδες.  Ένα αρχείο Javascript παρέχει την απαιτούμενη λειτουργικότητα. Δεν χρησιμοποιούνται εικόνες για την επίδραση χιονιού .




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


Εδώ είναι ο κώδικας που θα χρειαστείτε : 

<script src="http://sites.google.com/site/bloggertricks2/home/javascripts/snowstorm.js" type="text/javascript">
</script>
<script type="text/javascript">
snowStorm.flakesMaxActive = 96; // show more snow on screen at once snowStorm.useTwinkleEffect = true; // let the snow flicker in and out of view
</script>


Αντιγράφετε και επικολλήστε τον παραπάνω κώδικα στο  HTML/JavaScript \ gadget  και αποθηκεύετε .

  Αυτό είναι όλο !!!

Επεξεργασία κώδικα :

Μπορείτε να αλλάξετε το χρώμα των νιφάδων προσθέτοντας αυτήν την γραμμή :
snowStorm.snowColor = '#99ccff'; // blue-ish snow!?

Αλλάζετε το χρώμα ( #99ccff )  με το επιθυμητό χρώμα

Μπορείτε να μειώσετε η να αυξήσετε τον αριθμό των νιφάδων που θα πέφτουν :

snowStorm.flakesMaxActive = 96; // show more snow on screen at once

Αλλάζετε τον αριθμό των νιφάδων ( 96 ; ) με όποιο αριθμό θέλετε

Read More ►

Δευτέρα, Δεκεμβρίου 7

15

Δημιουργήστε 3 στήλες στο footer τμήμα του blog σας .

   Όπως θα έχετε δει σε πολλά blogs , στο κάτω μέρος αυτών των  blog  υπάρχουν τρεις στήλες στο  footer τμήμα  .
Στα περισσότερα πρότυπα που μας δίνει το blogger , όμως υπάρχει μόνο μια στήλη στο footer τμήμα του πρότυπου . Και στο κάτω κάτω , αν δεν χρησιμοποιείτε τα πρότυπα του blogger , μπορεί να θέλετε να το αλλάξετε και λιγάκι Idea
   Τώρα μπορείτε  αν  θελήσετε να προσθέσετε 3 στήλες στο τμήμα του footer του πρότυπου σας .
Έτσι κρατώντας τα  sidebars σας καθαρά , κάνετε το blog σας να φαίνονται μεγαλύτερο , αλλά δημιουργείτε κίνηση  και κρατάτε τα blog σας πιο κομψά .

  Σε αυτή την  ανάρτηση θα εξηγήσω πώς να προσθέσουμε 3 στήλες στο footer τμήμα του blog :





  Μετακινήστε gadgets σας από το τμήμα του footer  σε πλαϊνή μπάρα σας.

  •   Κάνετε Λήψη πλήρους προτύπου , πάντα πριν κάνετε οποιαδήποτε ενέργεια 
  •   Πηγαίνετε  Διάταξη >> Επεξεργασία HTML >> Επέκταση προτύπων γραφικών στοιχείων
  •   Βρείτε την ετικέτα   ]]></b:skin> , η οποία είναι το τμήμα  , όπου το στυλ του πρότυπου σας τελειώνει.
 Αμέσως πριν από αυτή τη γραμμή, προσθέστε τις ακόλουθες γραμμές κώδικα:
#footer-column-container { clear:both; }
.footer-column { padding: 10px; }

  •   Βρείτε τον παρακάτω κώδικα :

<b:section class='footer' id='footer'/>

  •   Αντικαταστήστε την παραπάνω γραμμή με τον κώδικα που σας δίνω παρακάτω :
<div id='footer-column-container'>
<div id='footer2' style='width: 30%;float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/> </div>

 Κάντε Προεπισκόπηση πρώτα , για τυχών  λάθη και μετά  αποθηκεύετε το πρότυπο σας .


  • Πηγαίνετε στο Στοιχεία Σελίδας , θα δείτε ότι υπάρχουν τρεις στήλες, στο  χαμηλότερο σημείο του προτύπου .

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


Update : Επειδή παρατηρώ ότι πολλοί έχετε κάποια προβλήματα στο να εντοπίσετε τον κωδικα


<b:section class='footer' id='footer'/>
Για να εντοπίσετε πιο ευκολα τον συγκεκριμένο κωδικα ψάξετε στον πηγαίο κώδικα HTML για το :
<div id="footer-wrapper">
<b:section class="footer" id="footer"/>
</div>
Και αντικαταστήστε το <b:section class='footer' id='footer'/>
με τον κώδικα που δίνω παραπάνω
Read More ►

Σάββατο, Δεκεμβρίου 5

6

Πώς να χρησιμοποιήσετε μια εικόνα φόντου για το ιστολογιό σας


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



  Μπορείτε να χρησιμοποιήσετε σχεδόν κάθε εικόνα ως background για το ιστολόγιό σας.
Συνήθως εικόνες φόντου είναι σε μορφή JPEG, αν και θα μπορούσατε επίσης να χρησιμοποιήσετε εικόνες σε μορφή GIF ή BMP .
Ωστόσο, θα πρέπει να φιλοξενήσετε την εικόνα σε έναν εξωτερικό διακομιστή, το Blogger φιλοξενεί μόνο τις εικόνες που περιέχονται σε widgets ή σε αναρτήσεις . Αν ψάχνετε για δωρεάν φιλοξενία εικόνας, ρίξτε μια ματιά σε αυτή την ανάρτηση .
Πριν ξεκινήσετε να προσθέσετε την εικόνα φόντου στο blog σας , πρώτα  βρείτε την εικόνα που θέλετε να χρησιμοποιήσετε και σημειώστε το url της εικόνας .
Όπως αναφέρεται στην εισαγωγή, υπάρχουν διαφορετικοί τρόποι που μπορείτε να χρησιμοποιήσετε εικόνες background . Εδώ θα σας τα εξηγήσω:
  • Πώς να κάνετε  επανάληψη εικόνας σε όλη την σελίδα (σαν ταπετσαρία)
  • Πώς να κάνετε επανάληψη εικόνας background κάθετα , προς το κάτω μέρος της σελίδας
  • Πώς να κάνετε επανάληψη εικόνας background οριζοντίως σε όλη τη σελίδα
  • Πώς να δημιουργήσετε μια σταθερή εικόνα εικόνας background   (η οποία δεν μετακινείτε με το υπόλοιπο της σελίδας )
Όλες αυτές οι μέθοδοι είναι δυνατόν να γίνουν στο Blogger Blogs, και είναι αρκετά απλά στη εφαρμογή

Πώς να κάνετε επανάληψη εικόνας background σε όλη την σελίδα (σαν ταπετσαρία)

Αυτή είναι η απλούστερη εφαρμογή όλων των background effects . Οι περισσότεροι άνθρωποι προτιμούν να χρησιμοποιούν μια μικρή εικόνα , η οποία θα εφαρμοστεί σε όλη την σελίδα ομαλά  . Αυτό εξασφαλίζει ότι η σελίδα θα φορτώνει πιο γρήγορα , δεδομένου ότι η εικόνα που χρησιμοποιείτε έχει  μικρό μέγεθος .
Μπορείτε να βρείτε εύκολα τέτοιες εικόνες φόντου για σας κάνοντας μια Αναζήτηση στο Google για tileable backgrounds , Ή θα μπορούσατε να δημιουργήσετε ακόμη και τη δική σας.
Διάλεξα αυτή την απλή εικόνα για να την χρησιμοποιήσω ως παράδειγμα, αν και θα μπορούσα εξίσου εύκολα να χρησιμοποιήσω οποιαδήποτε άλλη εικόνα :

 

Για να κάνετε αυτή την εικόνα tileable background για το ιστολόγιό σας, πηγαίνετε
Διάταξη > Επεξεργασία html και αναζητήστε τις ιδιότητες στυλ για το “ body “ του blog σας, το οποίο θα πρέπει να είναι κάτι σαν το παρακάτω παράδειγμα:
                                                                                                                                                    

body {
background: $bgcolor;
margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}



Πρέπει να επεξεργαστείτε τη γραμμή με έντονους κόκκινους χαρακτήρες , αυτή η γραμμή δηλώνει τις ιδιότητες φόντου ( background ) του blog.
Για να προσθέσετε μια επανάληψη εικόνας background,  απλά προσθέστε τις ακόλουθες γραμμές (επισημαίνονται με κόκκινο χρώμα) στις ιδιότητες “ body “ :


body {
background:url(http://www.χχχ.com/εικονα.jpg) repeat;
margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
 
Όπου το URL , εισάγετε το URL της εικόνας φόντου που θα χρησιμοποιήσετε στο blog σας.
Αυτό θα κάνει την επανάληψη εικόνας background  σε ολόκληρη την σελίδα, δείτε εδώ για  παράδειγμα:


Πώς να κάνετε επανάληψη εικόνας background κατακόρυφα , προς το κάτω μέρος της σελίδας

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

body {
background:url(http://www.χχχ.com/εικονα.jpg) repeat-y;
margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}


Επειδή η επανάληψη θα γίνει κατακόρυφα θα χρησιμοποιήσουμε μια εικόνα διαστάσεων
1280 x 630 όπως η εικόνα παρακάτω :

 

Απλά κοιτάμε το φάρδος τις εικόνας να είναι όσο είναι και το φάρδος του  blog μας .
( κοιτάξτε εδώ
για μια πλήρη επισκόπηση σελίδας ):


Πώς να κάνετε επανάληψη εικόνας φόντου οριζοντίως σε όλη τη σελίδα

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

body {
background:url(http://www.χχχ.com/εικονα.jpg) repeat-x;margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}


Χρήση αυτού συνδέσμου για μια πλήρη προεπισκόπηση σελίδας .
Εδώ η επανάληψη γίνεται  οριζοντίως και θα χρησιμοποιήσουμε μια εικόνα με διαστάσεις 234 x 1130 , όπως η εικόνα παρακάτω:


Μας ενδιαφέρει το ύψος τις εικόνας να είναι όσο είναι το ύψος του blog μας .

Πώς να δημιουργήσετε ένα σταθερό υπόβαθρο εικόνας ( background  )

Συνήθως μια μεγαλύτερη εικόνα χρησιμοποιείται για τη μέθοδο αυτή .
Για να εξασφαλιστεί ότι αυτή την εικόνα φόντου δεν θα επαναληφθεί , εφόδων είναι μεγάλων διαστάσεων , θα πρέπει να προστεθεί η δήλωση " no-repeat "   για τις ιδιότητες φόντου .
Επίσης, πρέπει να προστεθεί η δήλωση ότι το background attachment  είναι  fixed , έτσι ώστε το φόντο να μην κινείται με τη σελίδα. Και εδώ είναι ένα παράδειγμα το πως  πρέπει να μοιάζει ο κώδικας  , με τις αλλαγές που επισημαίνονται με κόκκινο χρώμα:

body {
background:url(http://www.χχχ.com/εικονα.jpg) no-repeat;margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
background-attachment: fixed }


Και εδώ θα δείτε το παράδειγμα (χρησιμοποιήστε αυτό το link για μια πλήρη προεπισκόπηση  σελίδας)

Εδώ χρησιμοποίησα μια εικόνα με διαστάσεις 1260 x 257 , δείτε την παρακάτω :



Και επειδή η συγκεκριμένη εικόνα είναι στο ύψος 257 px , τροποποίησα λιγάκι τον παραπάνω κώδικα και πρόσθεσα την μεταβλητή repeat-y , γιατί θέλω την επανάληψη να γίνει κατακόρυφα . 

Μπορείτε επίσης να προσθέσετε και χρώμα  !

Αν δεν κάνετε επανάληψη της εικόνας φόντου σας σε όλη τη σελίδα, μπορεί να μείνει ένα κενό με λευκές περιοχές . Για να καλύψετε αυτές τις περιοχές με το χρώμα της επιλογής σας , θα πρέπει επίσης να προσθέσετε χρώμα στο background σας .
Χρησιμοποιώντας Hex τιμές για το χρώμα που θέλετε να εμφανίσετε. μπορείτε να δείτε εδώ για όλες τις hex τιμές που  απαιτούνται .Εδώ είναι ένα παράδειγμα του πώς μπορείτε να προσθέσετε τις  hex τιμές για το χρώμα στο φόντο σας:
 
background: #ff0000 url(http://www.χχχ.com/εικονα.jpg) repeat-x;
 


Τοποθεσία της εικόνα φόντου

Από προεπιλογή, η εικόνα φόντου θα αρχίσει από την επάνω αριστερή γωνία της σελίδας, ανεξάρτητα από το αν θέλετε η εικόνα φόντου να επαναληφτεί (ή μη) σε ολόκληρη τη σελίδα. Ωστόσο, μπορείτε να καθορίσετε που θέλετε να τοποθετηθεί η εικόνα που πρόκειται να χρησιμοποιήσετε , με την προσθήκη ορισμένων επιπλέον μεταβλητών  στις προδιαγραφές background .
Εδώ είναι ένα παράδειγμα πως χρησιμοποιούμε τους positioning variables:


background: #ffff00 url(http://www.χχχ.com/εικονα.jpg) positioning-variables-bottom right no-repeat;
 
 

Και εδώ είναι μια λίστα των positioning variables που μπορείτε να χρησιμοποιήσετε:

  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right

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


background; url(http://www.χχχ.com/εικονα.jpg) no-repeat top center;

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

Οι εικόνες από createblog.com
Read More ►
 

© 2010 Bloggertrics

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

ΑΡΧΙΚΗ| Sitemap| Posts RSS