Latest Blog News: Διαβάζετε πάντα και τα ΣΧΟΛΙΑ των αναρτήσεων!

Προσθήκη του QueryLoader (‘LazyLoad’) Script στο Blogger


Print Friendly and PDFPrintPrint Friendly and PDFPDF


Καλησπέρα στους αναγνώστες του bloggertips.gr.

Σήμερα θα σας δείξω πως μπορείτε να προσθέσετε στο blog σας το QueryLoader, ένα script το οποίο θα εμφανίζεται με το που μπαίνει κάποιος στο blog σας και δε θα φεύγει μέχρι να φορτώσει τελείως όλο το blog.
Δηλαδή, αντί να βλέπουν οι αναγνώστες σας να φορτώνει το ένα gadget μετά το άλλο, θα βλέπουν όλο το blog αφού φορτώσει το QueryLoader (ιδιαίτερα αν το blog σας είναι λιγάκι "βαρύ", αυτό το script μπορεί να φανεί ιδιαίτερα χρήσιμο).
Για να καταλάβετε τι εννοώ, κάντε κλικ εδώ.

Πάμε να δούμε τώρα πως θα το προσθέσουμε στο blog μας.

Διαδικασία:


1. Σύνδεση στο λογαριασμό blogger
2. Σχεδίαση
3. Επεξεργασία HTML
4. Με Ctrl + F αναζητούμε το </head> και ακριβώς πριν από αυτό επικολλούμε τον παρακάτω κώδικα:
<script src='http://code.jquery.com/jquery-1.5.min.js' type='text/javascript'/>
<script src='http://blogger-loader.googlecode.com/files/queryLoaderpre.js' type='text/javascript'/>

5. Με Ctrl + F αναζητούμε το </body> και ακριβώς πριν από αυτό επικολλούμε τον παρακάτω κώδικα:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script>
QueryLoader.selectorPreload = &quot;body&quot;;
QueryLoader.init();
</script>
</b:if>
*Αν θέλετε να εμφανίζεται το συγκεκριμένο script μόνο στην αρχική σελίδα, αφήστε τον κώδικα όπως είναι.
Αν όμως θέλετε να εμφανίζεται σε όλες τις σελίδες του blog σας, σβήστε τις σειρές του παραπάνω κώδικα που έχω επισημάνει με bold (δηλαδή την πρώτη και την τελευταία σειρά του παραπάνω κώδικα).

6. Με Ctrl + F αναζητούμε το ]]></b:skin> και ακριβώς πριν από αυτό επικολλούμε τον παρακάτω κώδικα:
.QOverlay {
background-color: #000000;
z-index: 9999;
}

.QLoader {
background-color: #CCCCCC;
height: 1px;
}

.QAmt {
color:#FF530D;
font-size:50px;
font-weight:bold;
line-height:50px;
height:50px;
width:100px;
margin:-60px 0 0 -50px;
}

7. Αποθήκευση προτύπου και είμαστε έτοιμοι!

Προσοχή!
Αν υπάρχουν scripts ή files στο blog σας που έχουν πρόβλημα στο να φορτώσουν και δε φορτώνουν ουσιαστικά ποτέ, φαινόμενο που εμφανίζεται αρκετά συχνά, είναι λογικό και επόμενο να μην τελειώσει το "φόρτωμα" του QueryLoader ποτέ, με αποτέλεσμα να μην ανοίγει το blog σας.
Δοκιμάστε το και αν τα πάει καλά την πρώτη φορά, δεν υπάρχει πρόβλημα (εκτός βέβαια αν προσθέσετε scripts που δε φορτώνουν ποτέ στο μέλλον).


Πηγές: http://www.allblogtools.com/tricks-and-hacks/adding-queryloader-lazyload-script-for-blogger-and-customize-it/ + http://www.gayadesign.com/

Copyrights: http://www.bloggertips.gr/

Post by Secra from Web in Greece

Stumble
Delicious
Technorati
Twitter
Facebook

28 comments:

techandtech είπε...

το δοκιμασα στο "πειραματικο" μου blog,καπου κολλαει στο 96% και δεν ανοιγει.
προτεινω λοιπον οποιος δοκιμαζει οτιδηποτε να εχει και ενα δευτερο blog για αυτες τις δουλειες.
επι τη ευκαιρια φιλε Γιαννη να σε ρωτησω κατι.
εχω βαλει ενα ωραιο remplate τωρα τελευταια και το μονο μου προβλημα ειναι οτι θελω να μεγαλωσω το width αριστερα-δεξια ωστε να καλυπτει ολη την οθονη.
το θεμα ειναι οτι στην επεξεργασια του προτυπου εαν αλλαξω τις τιμες μεγαλωνουν τα column προς τα μεσα ενω εγω θελω προς τα εξω.
ξερεις τροπο να το κανω;
εαν ειναι πεσμου να σου δωσω τον css του προτυπου να μου πεις τι να κανω.
φιλικα.Γιαννης.

Makedon είπε...

Χαιρετώ σας.

Μπορεί κανείς να πει τι είναι αυτο το +1 και γιατί θα ήταν καλό να το βάλει κανείς;
Δοκίμασα να το βάλω χωριστά αλλά δεν δούλευε, δεν θάπρεπεπ να εμφανίζεται με τα άλλα εικονίδια αφού επέλεξα να εμφανίζονται. Αφού υποτίθεται ότι το δίνει μαζί με τα άλλα social εικονίδια η μπλοκερ.

Secra είπε...

@techandtech

1.Έδωσα link με το δοκιμαστικό blog όπου εφάρμοσα το συγκεκριμένο script.
2.Επίσης γράφω πως αν το blog δεν ανοίγει ποτέ σημαίνει πως υπάρχουν scripts ή files που δεν ανοίγουν ποτέ και δεν ισχύει καμία άλλη περίπτωση.

@Makedon

To +1 είναι μια λειτουργία που λάνσαρε πρόσφατα η Google.
Όταν επισημαίνουμε κάτι με +1, αυτό σημαίνει πως το βρήκαμε "pretty cool", δηλαδή αρκετά ενδιαφέρον, και θα θέλαμε να το δουν κι άλλοι.
Όσο περισσότερα +1 έχει μια ανάρτηση, η Google λογικά θα την τοποθετεί ψηλά στις αναζητήσεις που έχουν να κάνουν με αυτήν την ανάρτηση.

Ο blogger δίνει το +1 μαζί με τα άλλα social network buttons. Μπορείς να το προσθέσεις πηγαίνοντας 'Σχεδίαση', στο gadget 'Αναρτήσεις ιστολογίου' πάτα 'Επεξεργασία' και τίκαρε το 'Εμφάνιση κουμπιών κοινής χρήσης'.

techandtech είπε...

εχει δικιο ο makedon,δεν ενεργοποιειται σε ολα τα blogs απο εκει.
http://www.google.com/webmasters/+1/button/
βαλτο απο το λινκ που σου δινω ακολουθωντας τις οδογιες.

Ανώνυμος είπε...

Καλησπέρα κι από μένα, με λένε Φώτη. Πολύ καλό το συγκεκριμένο αλλά σε μένα εμφανίζεται σε κάθε κλικ που κάνω στη σελίδα. Ακόμη κι αν πάω να διαβάσω μια συγκεκριμένη ανάρτηση. Έκανα μια μικρή αλλαγή και πέτυχε. Σας τη λέω αλλά δεν ξέρω αν θα εμφανιστεί εδώ στα σχόλια σωστός ο κώδικας. Στο 2ο βήμα που βάζουμε τον κώδικα πριν από το body μπορείτε να γράψετε στην αρχή:



και στο τέλος:



Έτσι εμφανίζεται μόνο στην Αρχική Σελίδα. Καλή Συνέχεια!!!

Secra είπε...

Καλησπέρα Φώτη, ο κώδικας όντως δεν εμφανίζεται εδώ.
Επειδή με ενδιαφέρει η διόρθωση που έκανες και θα ήθελα να την προσθέσω στην ανάρτηση, αν θες να ξαναποστάρεις τον κώδικα, πήγαινε εδώ http://www.bloggertips.gr/2009/10/html-blog-post-html-code.html, μετέτρεψέ τον και πόσταρέ τον. :)

Ανώνυμος είπε...

Καλησπέρα Secra! Για να δούμε αν θα εμφανιστεί. Στο 2ο βήμα πριν από το body τον βάζουμε έτσι:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script>
QueryLoader.selectorPreload = &quot;body&quot;;
QueryLoader.init();
</script>
</b:if>

Secra είπε...

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

Ανώνυμος είπε...

Ok εμφανίστηκε! Ευχαριστώ!
Το μόνο πρόβλημα που έχει σε μένα είναι ότι έχω ένα slider (jquery) με φωτογραφίες και όταν βάζω και αυτό το jquery δεν εμφανίζεται το slider.
Αν γνωρίζει κανείς τη λύση ας μου την πει.
Ευχαριστώ
Φώτης

Ανώνυμος είπε...

test

Makedon είπε...

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

kapetan andreas zeppos είπε...

ομορφαίνει την είσοδο στο blog και λειτουργεί μιά χαρά. Είχα μιά ανησυχία διότι το blog μου είναι ελαφρύ ακόμη, αλλά όλλα καλά.

ΟΝΟΥΦΡΙΟΣ ΔΗΜΗΤΡΑΣ είπε...

αρχικα μπραβο για το μπλογκ σου βοηθαει τους αδαεις σαν την αφεντια μου. αυτο με το ποσοστο μου αρεσει πολυ αλλα και παλι εμφανιζονται ολα τα γκατζετ παρολο που φωρτωνει δεν φαινεται οπως στην φωτο που εχεις παραπανω δες και μονος σου ειναι λογικο? http://1entomafuta1.blogspot.com/

jsp είπε...

φιλε μου κοιτα τι προβλημα εχω! αρχιζει να δειχνει τα gadget και μετα αρχιζει να μετραει αυτο ειναι το blog μου http://fly-news-js.blogspot.com

Geo είπε...

και εγω φιλε μου εχω το ιδιο προβλημα. Πρωτα φορτώνει η σελιδα και μετα ξεκιναει το gadget να φορτώνει. Μηπως μπορεις να μας βοηθήσεις;;;

Secra είπε...

Μπορεί κάποιο άλλο gadget που έχετε ήδη προσθέσει να το εμποδίζει να εμφανιστεί πρώτο.
Π.χ. @jsp το ρολόι που έχεις στην αριστερή στήλη.
Δεν ξέρω αν όντως ισχύει αυτό που λέω, παρ 'όλα αυτά αν βεβαιωθείτε πως ακολουθείτε όλα τα βήματα σωστά και εξακολουθεί να μη δουλεύει, απλά βγάζετε ό,τι κωδικούς προσθέσατε από εδώ και είστε όπως πριν. :)

jsp είπε...

φιλε μου δεν φταιει το ρολοι

Apo είπε...

Εάν κολλάει στο 96% για παράδειγμα,πως θα καταλάβουμε ποιο γκάτζετ δεν ανοίγει??

Secra είπε...

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

zoyk είπε...

ρε φιλε δεν μπουρουμε τελικα να κανουμε κατι τελικα να μην δειχνει πρωτα το blog και μετα να φορτωνει?τι μπορει να φταιει εκτος απο το ρολοι??

Zanin είπε...

kalhspera....ekana ta vhmata poy eipate pathsa apo8hkefsh protypoy kai ksanadokimasa na anoikso thn selida se neo para8uro alla dn mou edeikse thn sygekrimenh leitourgeia....mhpws epeidh dn einai toso vary to blog m kai dn xreiazetai afthn thn efarmogh?

Εύρεση εργασίας είπε...

8eos , 8eos mono auto exw na pw me exeis ftia3ei polu asxima eimai oli mera sto site sou diavazw kai kanw efarmoges. mpravo

Ιωάννα Ζ. είπε...

Το δοκίμασα και λειτουργεί! Ευχαριστώ πολύ!

Cockroach-η Κατσαρίδα. είπε...

Γεια σας παιδιά.
Το δοκίμασα το κολπάκι και δούλευε, αλλά μετά έβαλα κάτι gadgets και πλέον κολλάει. Δεν μ ανοίγει το blog. Πώς μπορώ να το καταργήσω?

ΔΕΗΤΖΗΣ ΔΕΗ είπε...

καλησπερα σας και συγχαρητηρια για αυτα τα κολπα και μαθηματα,και καλη χρονια και καλη συνεχεια στο εργο που κανετε,θα ηθελα να ρωτησω εβαλα στη σελιδα μου το loader δουλευει σε ολους τους browsers αλλα αργει στον explorer αλλα ανοιγει μετα απο φρεσκαρισμα της σελιδας, και κολλαει στο 98% του google chrome,δεν ανοιγει τη σελιδα αλλα μονο στον chrome,γιατι συμβαινει αυτο???εφοσον ανοιγει στους αλλους browsers σημαινει οτι τα scripts ειναι ενταξει,τι να συμβαινει?ευχαριστω εκ τον πρωτερον :) τσεκαρετε το και σεις..
http://deitzis.blogspot.gr/

panos lamprinidis είπε...

Συγγνώμη πως μπορούμε να το αφαιρέσουμε μετά γιατί έχω σβήσει του κώδικες αλλα υπάρχει ακόμα...
kanonieridesfootballclub@gmail.com

Michalis Mavrommatis είπε...

τι είναι το ctrl + f και πως το αναζητάω;;;

Xristos Perivolaris είπε...

ΕΥΧΑΡΙΣΤΩ !!!! Δουλευει αψογα !!!!!!!!!!!

Δημοσίευση σχολίου

Παρακαλούμε τους φίλους αναγνώστες:

ΟΧΙ SPAM,
ΟΧΙ GREEKLISH,
ΟΧΙ ΠΡΟΣΒΛΗΤΙΚΑ ΣΧΟΛΙΑ

Παρακαλώ το σχόλιό σας να είναι σχετικό με την παραπάνω ανάρτηση.
Γενικές απορίες μόνο στη σελίδα μας στο facebook.

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