Ιουλίου 2011 ~ Blogger Tips - Tricks - Gadgets - Templates

Font Size Control Widget για τα posts σας

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

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

Το καλό με αυτό το gadget είναι ότι μπαίνει σχετικά εύκολα και το προσθέτετε στο σημείο που εσείς θέλετε.

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

Διαδικασία:
1. Σύνδεση στο λογαριασμό blogger
2. Σχεδίαση
3. Επεξεργασία HTML
4. Με Ctrl + F αναζητούμε το </head> και ακριβώς πριν από αυτό επικολλούμε τον παρακάτω κώδικα:

5. Με Ctrl + F αναζητούμε τον παρακάτω κώδικα:
(αν δε σας το βρίσκει κατευθείαν, αναζητήστε την πρώτη ή τη δεύτερη σειρά και μετά θα βρείτε και τις υπόλοιπες σειρές του κώδικα).

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

6. Πριν από τον παραπάνω κώδικα προσθέτουμε το <span id='fontSize'> και μετά από αυτόν το </span>.

Δηλαδή ο κώδικας τελικά θα είναι έτσι:

6. Αποθήκευση προτύπου και πάμε να προσθέσουμε το gadgetάκι.

7. Πάμε Σχεδίαση > Προσθήκη gadget > HTML/Javascript

8. Μέσα στο HTML gadget προσθέτουμε τον παρακάτω κώδικα:

9. Πατάμε αποθήκευση και τελειώσαμε!

Πηγές: http://www.allblogtools.com/tricks-and-hacks/blogger-font-size-control-changing-j-query-widget/

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

Post by Secra from Web in Greece

Προσθήκη favicon δίπλα από τη διεύθυνση (url) του blog μας (2)

PDF

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

~
Μπορείτε να διαβάσετε παλαιότερη ανάρτηση σχετικά με το πως μπορείτε να προσθέσετε εικονίδιο (favicon) δίπλα από τη διεύθυνση (url) του blog σας.
Η διαφορά ανάμεσα στις δύο αναρτήσεις είναι ο τρόπος με τον οποίο γίνεται η προσθήκη του favicon.
Σε αυτήν που σας παρέθεσα παραπάνω το κάνετε μέσω της Επεξεργασίας HTML, ενώ τώρα μέσω ενός gadget που μας έδωσε πρόσφατα ο blogger.
~

Κλείνει η παρένθεση και πάμε να δούμε πως θα προσθέσουμε το favicon στο blog μας (μπορείτε να βοηθηθείτε από τις εικόνες).

Διαδικασία:
1. Σύνδεση στο Blogger in draft (κανονικά, με το google λογαριασμό μας)
2. Επιλέγουμε το blog στο οποίο θέλουμε να προσθέσουμε το favicon, ανοίγουμε το βελάκι και πατάμε "Διάταξη"

Λογικά θα μας εμφανίσει την παρακάτω εικόνα:

3. Τέρμα πάνω και αριστερά έχει ένα gadget που λέγεται "Εικονίδιο για τα Αγαπημένα".
Κάνουμε κλικ στο "Επεξεργασία" και λογικά θα μας εμφανίσει το παρακάτω παράθυρο:

4. Πατάμε "Επιλογή αρχείου", αναζητούμε και επιλέγουμε την εικόνα που θέλουμε να χρησιμοποιήσουμε ως favicon και πατάμε "Αποθήκευση".

Η εικόνα που θα επιλέξουμε είναι καλό να είναι της μορφής .ico.
Μπορείτε να μετατρέψετε εύκολα την εικόνα που θέλετε, η οποία προφανώς είναι σε άλλη μορφή (.png, .jpeg, .gif), σε μορφή .ico από το icoconverter.com.

5. Πατάμε "Αποθήκευση διάταξης" και τελειώσαμε. Απλό, έτσι;

*Η εικόνα που θα επιλέξουμε πρέπει να έχει διαστάσεις τετραγώνου, αλλιώς ο blogger δεν τη δέχεται.

**Η εικόνα δε θα εμφανιστεί απευθείας δίπλα στο url του blog σας.
Χρειάζεται λίγη ώρα. Εγώ υπολόγισα γύρω στη μισή ώρα, σε άλλους μπορεί να γίνει είτε πιο αργά είτε πιο γρήγορα.

Copyrights: http://bloggertips.gr

Post by Secra from Web in Greece

4 Summer Templates για το blog σας!

PDF

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

Σήμερα θα σας δώσω 4 όμορφα, φρέσκα, καλοκαιρινά templates για να προσαρμόσετε, κατά κάποιον τρόπο, το blog σας στα "καλοκαιρινά" δεδομένα.

Η ανάρτηση απευθύνεται περισσότερο σε όσους δεν μένουν "πιστοί" σε ένα συγκεκριμένο πρότυπο και αρέσκονται στο να το αλλάζουν συχνά, ανανεώνοντας έτσι την εμφάνιση του blog τους.

1. Earthling two

Download | Demo

Πηγή: http://btemplates.com/2009/blogger-template-earthling-two/

2. Ocean Kid

Download | Demo

Πηγή: http://btemplates.com/2009/blogger-template-ocean-kid/

3. Sailing

Download | Demo

Πηγή: http://btemplates.com/2009/blogger-template-sailing/

4. Summer Fun

Download | Demo

Πηγή: http://btemplates.com/2009/blogger-template-summer-fun/

Κανένα από τα templates δεν ανήκει σε μένα για αυτό παραθέτω στο καθένα την πηγή του.

Το φόρτωμα των templates είναι μια πολύ εύκολη διαδικασία:

1. Σύνδεση στο λογαριασμό blogger
2. Σχεδίαση
3. Επεξεργασία HTML
4. Πατάμε "Επιλογή αρχείου" και επιλέγουμε το .xml αρχείο που θα βρούμε μέσα στο συμπιεσμένο αρχείο που κάναμε download.
5. Πατάμε "Μεταφόρτωση" και
6. Αποθήκευση προτύπου. Αυτό ήταν!

Copyrights: http://bloggertips.gr/

Post by Secra from Web in Greece

Άνοιγμα των αναρτήσεων σε νέα καρτέλα - Make Blogger Posts Open in New Tabs

PDF

Πως θα κάνουμε μόνο τους τίτλους των αναρτήσεών μας στο blog μας να ανοίγουν σε νέα καρτέλα?

~

Για να κάνετε ΟΛΑ τα λινκς στο blog σας να ανοίγουν σε νέα καρτέλα Ή να κάνετε μόνο ένα λινκ σας να ανοίγει σε νέα καρτέλα, δείτε στο http://www.bloggertips.gr/2009/07/links-blog_20.html

~

Πηγαίνουμε:

Πανόπτης> Σχεδίαση> Επεξεργασία html> Επέκταση προτύπων γραφικών στοιχείων

και με τη βοήθεια του ctrl+F ψάχνουμε να βρούμε το

<a expr:href='data:post.url'

Λογικά θα βρούμε δύο' μας ενδιαφέρει το πρώτο.

Δίπλα του ακριβώς προσθέτουμε το target='_blank'

δηλαδή θα γίνει έτσι

<a expr:href='data:post.url' target='_blank'>

Ο κωδικός πριν την αλλαγή:

<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Ο κωδικός μετά την αλλαγή:

<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url' target='_blank'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

δηλαδή απλά προσθέτουμε το target='_blank'

Αφήστε τις εντυπώσεις σας με ένα σχόλιο!

Η παραπάνω ανάρτηση στάλθηκε από τον:

Ola24
-------
WebSite: http://www.ola24.com
E-mail: info@ola24.com
Copyrights: http://www.bloggertips.gr/

Κατά τη συγγραφή της παραπάνω ανάρτησης, άκουγα το παρακάτω τραγούδι:

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

PDF

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

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

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

Διαδικασία:

1. Σύνδεση στο λογαριασμό blogger
2. Σχεδίαση
3. Επεξεργασία HTML
4. Με Ctrl + F αναζητούμε το </head> και ακριβώς πριν από αυτό επικολλούμε τον παρακάτω κώδικα:

5. Με Ctrl + F αναζητούμε το </body> και ακριβώς πριν από αυτό επικολλούμε τον παρακάτω κώδικα:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script>
QueryLoader.selectorPreload = "body";
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

Facebook comment box στο blogger

PDF

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

Σήμερα θα σας δείξω πως μπορείτε να προσθέσετε στο blog σας ένα comment box (=φόρμα σχολίων) για να μπορούν οι αναγνώστες σας να σχολιάζουν επώνυμα μέσω του δημοφιλέστερου social network στον πλανήτη, του Facebook.

Πριν ξεκινήσουμε τη διαδικασία για το πως θα το προσθέσετε, δύο πράγματα είναι απαραίτητα:
1) Ένας λογαριασμός στο Facebook και
2) Η απόκρυψη των σχολίων του blogger πηγαίνοντας μέσω του blog σας Ρυθμίσεις > Σχόλια > Απόκρυψη και ΑΠΟΘΗΚΕΥΣΗ ΡΥΘΜΙΣΕΩΝ.
Αν και αρχικά πίστευα πως το comment box δε μπορεί να συνυπάρχει με τα σχόλια του blogger, έκανα λάθος, οπότε αγνοήστε το διαγραμμένο κείμενο από πάνω.

Διαδικασία:

1. Μπαίνουμε στη σελίδα του Facebook Developers που έχει να κάνει με το comment box.

Πώς θα συμπληρώσετε τη φόρμα που θα εμφανιστεί:
Site name: Το όνομα του blog σας
Site URL: Το url του blog σας με ένα "/" στο τέλος (π.χ. www.bloggertips.gr/)
Locale: Επιλέγετε από το μενού "Ελληνικά"

Μετά θα σας βγει ένα Security Check, δηλαδή ένα παράθυρο που βοηθάει στο να αναγνωρίσει το Facebook ότι έχει να κάνει με άνθρωπο και όχι με κάποιον υπολογιστή.
Συμπληρώνετε το captcha (δηλαδή τα περίεργα γράμματα που εμφανίζονται) και πατάτε Submit.

2. Στη σελίδα που θα οδηγηθείτε αφού πατήσετε Submit, το μόνο που θα χρειαστεί να πάρετε είναι η Ταυτότητα (ID) Εφαρμογής. Αντιγράψτε τον αριθμό που θα σας βγάλει και αφήστε τον στην άκρη γιατί θα τον χρειαστούμε παρακάτω.

3. Σύνδεση στο λογαριασμό blogger.
4. Σχεδίαση
5. Επεξεργασία HTML
6. "Τικάρουμε" το "Επέκταση προτύπων γραφικών στοιχείων"
7. Με Ctrl + F αναζητούμε το <html και δίπλα από αυτό, δηλαδή ακριβώς μετά από αυτό, επικολλούμε τον παρακάτω κώδικα:

xmlns:fb='http://www.facebook.com/2008/fbml'

Πρέπει να αφήσετε τουλάχιστον ένα κενό πριν και μετά από τον παραπάνω κώδικα για να δουλέψει!

8. Με Ctrl + F αναζητούμε το <body> και ακριβώς μετά από αυτό επικολλούμε τον παρακάτω κώδικα:

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'Ταυτότητα (ID) Εφαρμογής',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};

(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>

Στον παραπάνω κώδικα, αντικαθιστάτε το "Ταυτότητα (ID) Εφαρμογής" με τον αριθμό που μας έδωσε το Facebook, τον οποίο αφήσαμε στην άκρη νωρίτερα.

9. Με Ctrl + F αναζητούμε το </head> και ακριβώς πριν από αυτό, επικολλούμε τον παρακάτω κώδικα:

<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta content='MY-SITE-NAME' property='og:site_name'/>
<meta content='YOUR-APP-ID' property='fb:app_id'/>
<meta content='YOUR-FACEBOOK-PROFILE-ID' property='fb:admins'/>
<meta content='article' property='og:type'/>

Προσαρμόζουμε τον παραπάνω κώδικα στα δικά μας δεδομένα:

Αντικαθιστούμε το MY-SITE NAME με το όνομα του blog μας, το YOUR-APP-ID με την Ταυτότητα (ID) Εφαρμογής, δηλαδή με τον αριθμό που πήραμε νωρίτερα από το Facebook και το YOUR-FACEBOOK-PROFILE-ID με το ID του λογαριασμού μας στο Facebook.

Για να βρούμε το Facebook ID, πάμε στο profile μας στο Facebook και κάνουμε κλικ στην φωτογραφία που έχουμε ορίσει ως φωτογραφία προφίλ.
Στην μπάρα του browser (του περιηγητή μας δηλαδή) θα βγει ένα link που θα μοιάζει με το παρακάτω:

https://www.facebook.com/media/set/?set=a.1438872928907.63717.1175547627

Το Facebook ID είναι ο αριθμός μετά το "a." μέχρι την πρώτη τελεία, δηλαδή στο παραπάνω το ID είναι το 1438872928907 .

10. Με Ctrl + F αναζητούμε το <data:post.body/> και ακριβώς μετά από αυτό επικολλούμε τον παρακάτω κώδικα:

<b:if cond='data:blog.pageType == "item"'>
<p />
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments width='450' expr:title='data:post.title' expr:href='data:post.url' expr:xid='data:post.id'/></div>
</b:if>

Μπορείτε να αλλάξετε το width='450', δηλαδή το πλάτος του comment box, και να το προσαρμόσετε στο πλάτος του blog σας, αλλάζοντας το "450" σε όποιο σας ταιριάξει καλύτερα.
Πειραματιστείτε για να βρείτε το κατάλληλο!

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

Δείτε Demo εδώ.

Πηγές: http://www.allblogtools.com/tricks-and-hacks/exclusive-integrate-facebook-comments-box-for-blogger-in-very-easy-and-simple-steps-full-guide/

Με τη φιλική βοήθεια (μέσω σχολιασμού) του http://bloggermeetsfacebook.blogspot.com/

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

Post by Secra from Web in Greece

Facebook, Twitter και Google+1 buttons για share στα posts σας

PDF

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

Πρώτο post για μένα σε αυτή τη σελίδα και το tip που θα σας δώσω έχει να κάνει με τα 2 δημοφιλέστερα social networks παγκοσμίως, Facebook & Twitter, και με την πρόσφατη λειτουργία που λάνσαρε η Google, το +1.

Είναι λοιπόν ένα gadget με το οποίο, προσθέτοντάς το στο blog σας, οι αναγνώστες σας θα μπορούν να κοινοποιήσουν την ανάρτησή σας είτε στα Facebook / Twitter είτε επισημαίνοντάς τη με +1, κάτι που θα σημαίνει πως τη βρήκαν "pretty cool" (that 's Google!).

Υπάρχουν άλλες δύο σχετικές αναρτήσεις εδώ και εδώ, αλλά αυτό είναι κάτι διαφορετικό.

Η διαδικασία είναι η εξής:

1. Σύνδεση στο λογαριασμό blogger
2. Σχεδίαση
3. Επεξεργασία HTML
4. "Τικάρουμε" το "Επέκταση προτύπων γραφικών στοιχείων"
5. Με Ctrl + F αναζητούμε το "<data:post.body/>" και μετά από αυτό, δηλαδή ακριβώς από κάτω επικολλούμε τον παρακάτω κώδικα:

<b:if cond='data:blog.pageType == "item"'>
<div>
<br />
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'el'}
</script>
<g:plusone size="medium"></g:plusone>
<br />
<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button' expr:data-url='data:post.url' expr:data-text='data:post.title' data-count='horizontal' data-lang='en'></a>
<b:if cond='data:post.isFirstPost'>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js">
</script>
</b:if>
<br />
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='button_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'></script>
</div>
</b:if>

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

Θα δείχνει κάπως έτσι: http://2.bp.blogspot.com/-5uL-uMkC0Ic/ThrjxSkpSMI/AAAAAAAAAlk/R9QvCam5zRo/12.jpg

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

Secra 's posts