Θυμάστε αυτή την ανάρτηση και την υπόσχεση για τα δύο κολπάκια που σας είχα; Ορίστε το πρώτο. Ένα plugin που θα σας δώσει τη δυνατότητα να βάλετε μια εικόνα στο background του blog σας, της οποίας το μέγεθος θα αλλάζει ανάλογα με τις αλλαγές του παραθύρου του browser σας (minimize/maximize). Στο blog μου υπάρχει εδώ και κάμποσες μέρες και μπορείτε να το δοκιμάσετε και μόνοι σας για να δείτε τον τρόπο που δουλεύει.

Πρέπει να πω δύο πράματα στην αρχή.
Το πρώτο είναι ότι όλη η δουλειά και όλο το credit ανήκει στον Scott Robbin, τον οποίο και ευχαριστώ, παρόλο που δε νομίζω να το δει ποτέ αυτό. Επίσης, προτρέπω όλους να επισκεφθείτε τη σελίδα του, διότι υπάρχουν κι άλλα που μπορούμε να μάθουμε από κει.
Το δεύτερο είναι ότι είχα παρατηρήσει πως με τα συνηθισμένα backgrounds στο blog, είχα πρόβλημα, διότι ποτέ δεν εφάρμοζαν απλώνοντας σε όλη τη σελίδα. Δεν ξέρω αν το αντιμετωπίσατε κι εσείς. Το πρόβλημα λύνεται με το jQuery Backstretch.
Πάμε να δούμε πώς θα το εγκαταστήσουμε.

Η λειτουργία του plugin όπως περιφράφεται από το δημιουργό:

Backstretch is a simple jQuery plugin that allows you to add a dynamically-resized background image to any page. The image will stretch to fit the page, and will automatically resize as the window size changes.

Θα τα εξηγήσω όσο αναλυτικότερα κι απλότερα μπορώ.

1. Αντιγράφουμε (Copy) τον παρακάτω κώδικα:

/*
 * jQuery Backstretch
 * Version 1.1.2
 * http://srobbin.com/jquery-plugins/jquery-backstretch/
 *
 * Add a dynamically-resized background image to the page
 *
 * Copyright (c) 2010 Scott Robbin (srobbin.com)
 * Dual licensed under the MIT and GPL licenses.
*/
(function(a){a.backstretch=function(k,i,l){function m(c){try{f={left:0,top:0};d=e.width();b=d/j;if(b>=e.height()){g=(b-e.height())/2;h.centeredY&&a.extend(f,{top:"-"+g+"px"})}else{b=e.height();d=b*j;g=(d-e.width())/2;h.centeredX&&a.extend(f,{left:"-"+g+"px"})}a("#backstretch img").width(d).height(b).css(f)}catch(n){}typeof c=="function"&&c()}var h={centeredX:true,centeredY:true,speed:0},e="onorientationchange"in window?a(document):a(window),j,d,b,g,f;i&&typeof i=="object"&&a.extend(h,i);a(document).ready(function(){if(k){var c= a("<div />").attr("id","backstretch").css({left:0,top:0,position:"fixed",overflow:"hidden",zIndex:-9999}),n=a("<img />").css({position:"relative",display:"none"}).bind("load",function(o){var p=a(this);j=a(o.target).width()/a(o.target).height();m(function(){p.fadeIn(h.speed,function(){typeof l=="function"&&l()})})}).appendTo(c);a("body").prepend(c);n.attr("src",k);a(window).resize(m)}});return this}})(jQuery);

2. Επικολλούμε (Paste) τον κώδικα σε ένα νέο αρχείο σημειωματαρίου (Notepad). Προσοχή: Αν σας εμφανίσει στο τέλος του κώδικα το “Read More……“, απλά διαγράψτε από το “Read” και μετά, ώστε το τελευταίο σημείο του κώδικα να είναι το (jQuery); .

3. Πατάμε Save As και αποθηκεύουμε το αρχείο μας ως  backstretch.js , έχοντας επιλεγμένο από κάτω το All Files (και όχι το Text Documents), όπως φαίνεται στην εικόνα.

4. Φιλοξενούμε το αρχείο μας σε κάποιον host. Αν έχετε διαβάσει αυτή την ανάρτηση, ξέρετε πως θα φιλοξενήσετε το αρχείο σας σε Google Site. Αν δεν τη διαβάσατε, διαβάστε την και ακολουθήστε προσεκτικά ένα ένα τα βήματα που περιγράφω εκεί. Αν θέλετε να το φιλοξενήσετε κάπου αλλού, δικαίωμα σας. Σε όλες τις περιπτώσεις, κρατάμε κάπου το link για το αρχείο μας (hoster/backstretch.js). Για όσους επιλέξουν το Google Site, προσοχή στο τελευταίο βήμα (18) της ανάρτησης, για να πάρουμε το σωστό link!

5. Αντιγράφουμε (Copy) τον παρακάτω κώδικα (ισχύει ό,τι και στο [2] για το “Read More…..“):

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>


<script src='HOSTER/BACKSTRETCH.JS' type='text/javascript'/> <script type='text/javascript'>$.backstretch(&quot;IMG_LINK&quot;, {speed: 150});
</script>

6. Πάμε στην Επεξεργασία HTML στο blog μας και κάνουμε ένα backup.

7. Βρίσκουμε το

</body>

και επικολλούμε (Paste) τον κώδικα ακριβώς πριν από αυτό.

8. Κάνουμε τις δύο απαραίτητες αλλαγές στον κώδικα που επικολλήσαμε από το (5). Αντικαθιστούμε το HOSTER/BACKSTRETCH.JS με το link πήραμε στο τέλος του (4). Αντικαθιστούμε το IMG_LINK με το link της εικόνας που θέλουμε να έχουμε για background.

9. Αποθηκεύουμε (Save) τον HTML μας και είμαστε έτοιμοι.

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

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

Όσοι το δοκιμάσετε, δώστε μου τα links σας για να το δω κι εγώ και να χαρώ που βοήθησα! Το feedback σας είναι πολύ χρήσιμο για μένα.

Καλές επιτυχίες!