2 ΠΩΣ ΝΑ ΒΑΛΕΤΕ TWITTER BUTTON(TWEET THIS)ΣΕ ΚΑΘΕ ΑΝΑΡΤΗΣΗΣ ΣΑΣ

Το "tweet this" κουμπί δίνει την δυνατότητα στους αναγνώστες σας να μοιραστούν τις αναρτήσεις σας και με άλλους χρήστες του Twitter .Αυτό είναι ένας ωραίος τρόπος να προωθήσετε το blog σας και να αυξήσετε τους αναγνώστες σας.Παρακάτω μπορείτε να δείτε μερικά παραδείγματα twitter icons ή μέσω ίντερνετ να βρείτε αυτό που σας αρέσει να προσθέσετε με τον τρόπο που σας δείχνω παρακάτω.

Η διαδικασία είναι η εξής.
Σύνδεση στο Blogger►Πίνακας Ελέγχου►Σχεδίαση►Επεξεργασία HTML►Κλικάρετε Επέκταση Προτύπων Γραφικών Στοιχείων
Ψάχνετε την παρακάτω ετικέτα:

<data:post.body/>

Αντιγράψτε και επικολλήστε τον παρακάτω κωδικό ακριβώς μετά απο την παραπάνω ετικέτα

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<a expr:href='&quot;http://twitter.com/home?status=Read - &quot; + data:post.title + &quot;-&quot; + data:post.url' title='Post this article on Twitter' 

 target='_blank'><img style="border:0px;" src='http://i46.tinypic.com/2py4aw8.jpg'/></a>
</b:if>

ΣΗΜΕΙΩΣΗ:Στο πρότυπο σας λογικά θα υπάρχουν 2 ετικέτες

<data:post.body/> μέσω του Google Chrome ψάχτετε την ετικέτα και επικολλάτε τον

 κωδικό στην πρώτη.

TWITTER ICONS

Το μόνο που μένει να κάνετε είναι να αντικαταστήσετε τον κωδικό εικόνας (γκρί φόντο)με τον κωδικό της εικόνας που σας αρέσει να βάλετε στο blog σας είτε απο δώ,είτε απο το web(δεξί κλίκ πάνω στην εικόνα,αντιγραφή-επικόλληση  διεύθυνσης url εικόνας) .
ΑΠΟΘΗΚΕΥΣΗ ΠΡΟΤΥΠΟΥ

                                                                    ΑΝ ΣΑΣ ΑΡΕΣΕ ΤΟ ΑΡΘΡΟ ΑΦΗΣΤΕ ΤΟ ΣΧΟΛΙΟ ΣΑΣ!!!

1 JQUERY THUMBNAIL HOVER/ZOOM EFFECT-ΕΙΚΟΝΕΣ

Ένα πολύ όμορφο effect εικόνων για το Blog σας.Περνώντας  το ποντίκι  πάνω απο τις εικόνες σας μεγενθύνονται και ζουμάρονται .Μπορείτε να το τοποθετήσετε στην πλευρική στήλη σας ώς gallery εικόνων ή και στην εικόνα σας σε κάθε σας ανάρτηση.


ΔΙΑΔΙΚΑΣΙΑ:
ΒΗΜΑ 1
Πίνακας Ελέγχου►Σχεδίαση►Επεξεργασία HTML
Ψάχνουμε το ακόλουθο τμήμα κωδικού

]]></b:skin>

Πρίν απο αυτό,επικολλούμε τον ακόλουθο κωδικό

ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px;
-ms-interpolation-mode: bicubic;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgWdAqYV1koLY2a4Q-GxOC93iCoyvGeKk5vl0ONk8telKIKJ_4QiS_3AowK47cCKSCtrTudLO4KZD1ZadwZjQ85UIHqxoAbk-JGUdc9YnzEQZRbwFZX-pjkgOH0b9RTjTXirNfXX8PQmFH/) no-repeat center center; /* Image used as background on hover effect
border: none;
}

Στην συνέχεια βρίσκουμε το επόμενο

</head>

Και πρίν απο αυτό επικολλούμε τον ακόλουθο

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"> </script>
<script type="text/javascript">
$(document).ready(function(){
//Larger thumbnail preview
$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);
} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 400);
});
//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {
var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr({ src: mainImage });
return false;
});
});
 </script>

ΑΠΟΘΗΚΕΥΣΗ ΠΡΟΤΥΠΟΥ
ΒΗΜΑ 2

• Άν θέλετε να τοποθετήσετε το effect στην πλαϊνή στήλη του blog σας,σαν gallery εικόνων τότε η διαδικασία είναι η εξής.

Σχεδίαση ►Στοιχεία Σελίδας►Προσθήκη  gadget►Επιλογή HTML/Javascript
Αντιγραφή=Επικόλληση τον παρακάτω κωδικό

<ul class="thumb"> <li><a href="#"><img src="thumb1.jpg" alt="" /></a></li>

<li><a href="#"><img src="img2.jpg" alt="" /></a></li>
<li><a href="#"><img src="img3.jpg" alt="" /></a></li>
<li><a href="#"><img src="img4.jpg" alt="" /></a></li>
<li><a href="#"><img src="img5.jpg" alt="" /></a></li>
<li><a href="#"><img src="img6.jpg" alt="" /></a></li>
<li><a href="#"><img src="img7.jpg" alt="" /></a></li>
<li><a href="#"><img src="img8.jpg" alt="" /></a></li>

</ul>

Αντικαθιστούμε το img2,3,4...με το url της δικής μας εικόνας.Επίσης αν θέλουμε η εικόνα να έχει σύνδεση σε μια άλλη σελίδα τότε αντικαθιστούμε το # με το url της σελίδας αυτής.

• Άν θέλετε να το τοποθετήσετε το effect στην εικόνα που τοποθετείτε σε κάθε σας ανάρτηση τότε στην "επεξεργασία html"της ανάρτησης σας θα βάζετε τον κωδικό αυτό.

<ul class="thumb"> <li><a href="#"><img src="thumb1.jpg" alt="" /></a></li>

<li><a href="#"><img src="img2.jpg" alt="" /></a></li></ul>

Εξίσου και εδώ αντικαθιστούμε το img2 και αν θέλουμε και το #

ΑΝ ΣΑΣ ΑΡΕΣΕ ΤΟ ΑΡΘΡΟ ΒΑΘΜΟΛΟΓΗΣΤΕ Ή ΑΦΗΣΤΕ ΤΟ ΣΧΟΛΙΟ ΣΑΣ!!!

8 ΔΗΜΙΟΥΡΓΗΣΤΕ ΤΗΝ ΔΙΚΗ ΣΑΣ ΥΠΟΓΡΑΦΗ ΚΑΙ ΤΟΠΟΘΕΤΗΣΤΕ ΤΗΝ ΣΤΟ ΤΕΛΟΣ ΑΝΑΡΤΗΣΕΩΝ ΣΑΣ!

Άν παρατηρήσετε σε κάποιες ιστοσελίδες,κάποιοι bloggers βάζουν στον επίλογο των αναρτήσεων τους μια πολύ όμορφη υπογραφή.Βάζοντας λοιπόν την δική τους σφραγίδα θεωρώ ότι δίνουν ένα ξεχωριστό και ιδιαίτερο στύλ στις αναρτήσεις τους.Είναι πολύ εύκολος ο τρόπος να δημιουργήσετε και εσείς και να τοποθετήσετε την δική σας υπογραφή στον επίλογο των αναρτήσεων σας.
Θα σας δείξω βήμα-βήμα την διαδικασία:
ΔΗΜΙΟΥΡΓΗΣΤΕ ΤΗΝ ΥΠΟΓΡΑΦΗ ΣΑΣ
ΒΗΜΑ 1
Πηγαίνετε στο mylivesignature και πατάτε "Click Here To Start"δεν χρειάζεται να κάνετε εγγραφή
BHMA 2
Πατήστε το Using the signature creation wizard για να δημιουργήσετε την υπογραφή σας μέσω του οδηγού που παρέχει μια μεγάλη γκάμα γραμματοσειρών ή αν είστε περισσότερο τολμηροί με τάση προς την ζωγραφική πατήστε το Draw a signature straight to the screen
Στο πρώτο αυτό που πρέπει να κάνετε είναι να δώσετε το όνομα που έχετε επιλέψει και να διαλέξετε την γραμματοσειρά που σας αρέσει ανάμεσα σε 120 διαφορετικές.
ΒΗΜΑ 3
Μόλις την επιλέξετε στα επόμενα βήματα μένει να διαλέξετε το μέγεθος,το χρώμα του κειμένου και το χρώμα του φόντου(άν θέλετε διάφανο κλικάρετε το κουτάκι...) και τέλος αν θέλετε η υπογραφή σας να είναι σε ευθεία γραμμή ή να έχει κλίση.
Μετά απο αυτά τα βήματα η υπογραφή σας είναι έτοιμη.Στην συνέχεια κλικάρετε Want to use this signature? και αμέσως μετά Generate HTML code και θα σας εμφανιστεί ο κωδικός HTML.
Αυτός είναι ο δικός μου κωδικός

<a href="http://www.mylivesignature.com" target="_blank"><img src="http://signatures.mylivesignature.com/54490/179/7C457460AA548C2A32BBD85E60610071.png" style="border: 0 !important; background: transparent;"/></a>

ΣΗΜΕΙΩΣΗ:Άν δεν θέλετε η υπογραφή σας να είναι σύνδεση πίσω στο My live signature ,
τότε διαγράψτε απο τον κωδικό HTML τις λέξεις με ρόζ χρώμα.
ΤΟΠΟΘΕΤΗΣΤΕ ΤΗΝ ΥΠΟΓΡΑΦΗ ΣΑΣ
Υπάρχουν 2 τρόποι να βάλετε την υπογραφή σας στο τέλος των αναρτήσεων σας στο blog σας.
ΤΡΟΠΟΣ 1
1.Πηγαίνετε Ρυθμίσεις ► Διαμόρφωση

2.Στο πλαίσιο Πρότυπο Ανάρτησης επικολλήστε τον κωδικό σας HTML
3.Αποθήκευση Ρυθμίσεων
Απο δώ και πέρα όταν θα ξεκινάτε να γράφετε μια ανάρτηση,θα υπάρχει ήδη εκεί η υπογραφή σας.
ΤΡΟΠΟΣ 2
1.Πηγαίνετε Σχεδίαση► Επεξεργασία HTML► Κλικάρετε Επέκταση Πρότυπων γραφικών στοιχείων
2.Ψάχνετε τον ακόλουθο κωδικό

<data:post.body/>

Ακριβώς μετά ή ακριβώς απο κάτω τοποθετήστε τον κωδικό HTML της υπογραφή σας
ΣΗΜΕΙΩΣΗ:Άν το <data:post.body/> υπάρχει στο πρότυπο σας πάνω απο μια φορά,τότε βάλτε το μετά το δεύτερο που θα βρείτε.
3.ΑΠΟΘΗΚΕΥΣΗ ΠΡΟΤΥΠΟΥ

ΑΝ ΣΑΣ ΑΡΕΣΕ ΤΟ ΑΡΘΡΟ ΒΑΘΜΟΛΟΓΗΣΤΕ Ή ΑΦΗΣΤΕ ΤΟ ΣΧΟΛΙΟ ΣΑΣ!!!

1 ΠΡΟΣΘΗΚΗ FAVICON ΣΤΟ BLOG ΣΑΣ

Το Blogger μας δίνει την δυνατότητα να τοποθετήσουμε το δικό μας λογότυπο που θα αντιπροσωπεύει το blog μας και το οποίο θα εμφανίζεται στην γραμμή διευθύνσεων του browser σας.

• Μπορείτε να διαλέξετε ανάμεσα σε 18,000 δωρεάν favicons και να το ανεβάσετε στην σέλιδα σας.Απλά πηγαίνετε στο iconj.com και κατεβάστε όποιο σας αρέσει και κατεβάστε το σε μορφή .ico ή ψάξτε στο διαδύκτιο και για άλλες σελίδες.
• Δημιουργήστε το δικό σας favicon.Mετατρέψτε το σε 16x16 pixels και αποθηκεύστε το σε όποια μορφή εικόνας θέλετε(gif,png,jpg...)ή πηγαίνετε στο freefavicon.com ανεβάστε την εικόνας και μετατρέψτε την απο εκεί.

Αυτό που μένει μόνο τώρα να κάνετε είναι να πάτε Πίνακα Ελέγχου ►Σχεδίαση και ανεβάσετε την εικόνα σας επιλέγοντας Εικονίδιο για τα Αγαπημένα

ΕΙΣΤΕ ΕΤΟΙΜΟΙ

ΑΝ ΣΑΣ ΑΡΕΣΕ ΤΟ ΑΡΘΡΟ ΒΑΘΜΟΛΟΓΗΣΤΕ Ή ΑΦΗΣΤΕ ΤΟ ΣΧΟΛΙΟ ΣΑΣ!!!

1 ΑΠΟΚΡΥΨΗ--ΕΜΦΑΝΙΣΗ ΤΟΥ NAV BAR ΤΟΥ BLOGGER

Ένα πολύ όμορφο και απλό κολπάκι για το blog σας.Θα σας δείξω πώς θα αποκρύψετε την nav bar της σελίδας και όταν περνάτε το ποντίκι πάνω απο αυτό το σημείο θα επανεμφανίζεται.



ΔΙΑΔΙΚΑΣΙΑ
1.Σύνδεση στο Blogger►Πίνακας Ελέγχου►Σχεδίαση►Επεξεργασία HTML
2.Ψάχνουμε τον ακόλουθο κωδικό

             ]]></b:skin>

3.Πρίν απο αυτό επικολλήστε τον ακόλουθο

#navbar-iframe {
  height:5px;
  }

/* IE7, IE8, IE6 */
  #navbar-iframe { height/*\**/: 30px\9; }


#navbar-iframe:hover {
  height:40px; !important; 
  }

ΣΗΜΕΙΩΣΗ:Λειτουργεί σε όλους του browsers απλά  μερικές φορές σε κάποιες εκδόσεις του Internet Explorer μπορεί να μην λειτουργήσει.
4.ΑΠΟΘΗΚΕΥΣΗ ΠΡΟΤΥΠΟΥ

ΑΝ ΣΑΣ ΑΡΕΣΕ ΤΟ ΑΡΘΡΟ ΒΑΘΜΟΛΟΓΗΣΤΕ Ή ΑΦΗΣΤΕ ΤΟ ΣΧΟΛΙΟ ΣΑΣ!!!

0 ΠΩΣ ΝΑ ΒΑΛΕΤΕ ΠΡΟΣΑΡΜΟΣΜΕΝΕΣ ΓΡΑΜΜΑΤΟΣΕΙΡΕΣ ΤΟΥ GOOGLE ΓΙΑ ΤΟ BLOGGER

Σ'αυτή την ανάρτηση θα σας δείξω πώς θα αλλάξουμε τις συνηθισμένες και απλές γραμματοσειρές του Blogger που χρησιμοποιούμε όλοι.Με την νέα της υπηρεσία η Google"Making Τhe Web Beautiful"λανσάρει νέες γραμματοσειρές για το διαδίκτυο.Αυτή η υπηρεσία της Google μας επιτρέπει να χρησιμοποιούμε μέσα απο τον καταλογό της,προσαρμοσμένες γραμματοσειρές,χωρίς εγγραφή και φυσικά επειδή είναι απο την Google ιναι εντελώς δωρεάν για επαγγελματική και ιδιωτική χρήση.Έτσι και με αυτό τον τρόπο που θα σας δείξω το blog σας θα αποκτήσει για άλλη μια φορά το δικό σας προσωπικό στύλ.
ΔΙΑΔΙΚΑΣΙΑ
1.Πίνακας Ελέγχου►Σχεδίαση►Επεξεργασία HTML
2.Λήψη Πλήρους Προτύπου
3.Πηγαίνετε Google Font Directory

• Διαλέξτε την γραμματοσειρά που σας αρέσει
• Πατήστε Add to Collection
• Θα δείτε ακριβώς κάτω στο μπλέ πλαίσιο ότι προστέθηκε η γραμματοσειρά στην συλλογή σας
• Πατήστε Use και στην επομένη σελίδα θα σας εμφανιστεί αυτο το παράθυρο

 4.Στην Eπεξεργασία Html με την βοήθεια του ctrl_f ψάχνουμε το ακόλουθο....

<head>

....κάνουμε επικόλληση τον κωδικό της γραμματοσειράς που βρήκαμε  στο μπλέ πλαίσιο αμέσως μετά το <head>
ΣΗΜΑΝΤΙΚΟ:Όταν κάνουμε επικόλληση τον κωδικό τοποθετούμε μια κάθετο ("/") πρίν το τέλος της ετικέτας (">") αυτού του κωδικού.Έτσι ο κωδικός μας θα είναι κάπως έτσι:

<link href='http://fonts.googleapis.com/css?family=Tangerine'

 rel='stylesheet' type='text/css'/>

5.ΑΠΟΘΗΚΕΥΣΗ ΠΡΟΤΥΠΟΥ

6.Σε αυτό το βήμα θα επιλέξετε που θέλετε να τοποθετήσετε την νέα γραμματοσειρά.

--Άν θέλετε να την τοποθετήσετε σε μια συγκεκριμένη πρόταση 

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

 κατά την πληκτρολόγηση της ανάρτησης σας

όχι στην Σύνθεση αλλά στην Επεξεργασία html της ανάρτησης.Ο κωδικός είναι ο εξής:

<div style="font-family: 'FontName', serif;">Your text</div>

7.Αντικαθιστάτε το

'FontName', serif;" 

με το όνομα της γραμματοσειράς που επιλέξατε.Θα το βρείτε ακριβώς κάτω απο τον κωδικό 

της γραμματοσειράς.

Στην εικόνα το font name είναι το 'IM Fell English SC',serif;
                                            Επομένως ο κωδικός απο έτσι▼

      <div style="font-family: 'FontName', serif;">Your text</div>

                                                                     θα είναι▼ 

 <div style="font-family: 'IM Fell English SC',serif;">Your text</div>

Αντικαθιστάτε το Your Text  με  την πρόταση ή λέξη ή κείμενο που θέλετε να τοποθετήσετε την γραμματοσειρά.

--Άν θέλετε να εμφανίζετε η γραμματοσειρά στον

• Τίτλο του Blog σας
• Τίτλους Αναρτήσεων
• Στο κείμενο των αναρτήσεων
• Πλαϊνές Στήλες

τότε πρέπει να πάμε Σχεδίαση ►Επεξεργασία Html
για τους Τίτλους Αναρτήσεων ψάχνουμε..

.post h3

     ή

.post-title h3

....και κάτω απο έναν απο τους 2 επικολλούμε τον παρακάτω κωδικό

font-family: 'Your Font Name';

ολόκληρος ο κωδικός θα είναι κάπως έτσι

.post h3 {
font-family: 'Your Font Name';
}

τοποθετούμε τις ετικέτες { } όπως είναι παραπάνω.Στην θέση του Your Font Name βάζουμε το όνομα της γραμματοσειράς ακριβώς όπως στο βήμα 7.
Eναλακτικά ψάχνουμε τους παρακάτω κωδικούς για την θέση που θέλουμε να τοποθετήσουμε την γραμματοσειρά και ακολουθούμε την ίδια διαδικασία.

• Τίτλος του Blog σας: h1
• Τίτλοι Αναρτήσεων: .post h3 ή .post-title
• Κείμενο Αναρτήσεων: .post-body
• Πλαϊνές Στήλες: .sidebar h2

                                                ΣΗΜΑΝΤΙΚΟ
►Κάθε φορά που θα επιλέγετε μια διαφορετική γραμματοσειρά για να καταλήξετε σε αυτή που σας αρέσει,πρέπει να αλλάζετε και να τοποθετείτε τον αντίστοιχο κωδικό της στο Βήμα 4 ώστε να εμφανίζεται σωστά.
►Άν θέλετε να βάλετε διαφορετικές γραμματοσειρές σε πολλά σημεία του blog σας τότε κάθε φορά θα τοποθετείτε και τον κωδικό της αντίστοιχης γραμμματοσειράς(Βλέπε Βήμα4)



ΑΝ ΣΑΣ ΑΡΕΣΕ ΤΟ ΑΡΘΡΟ BAΘΜΟΛΟΓΗΣΤΕ Ή ΑΦΗΣΤΕ ΤΟ ΣΧΟΛΙΟ ΣΑΣ!!!

5 ΠΑΡΑΚΟΛΟΥΘΗΣΗ ΕΠΙΣΚΕΠΤΩΝ(UPDATE)

Ένα άρθρο απο τα πρώτα μου ήταν δημοφιλή εργαλεία παρακολούθησης απο διαφορετικά sites όπου καθένα απο αυτά καταγράφει π.χ επισκεψιμότητα της σελίδας σας,εντοπισμός αναγνωστών μέσω χάρτη και πολλά άλλα.
Αυτή η ανάρτηση είναι η  συνέχεια αυτου του άρθρου με ένα ακόμα πολύ καλό site παρακολούθησης επισκεπτών.Το HISTATS
Όποιος το επισκεφτεί θα μπορέσει μέσω δωρεάν εγγραφής να διαλέξει απο ένα πλήθος καταμετρητών(counters)  τοποθετώντας  αυτό που ταιριάζει στην σελίδα του και στα γούστα του.Η διαδικασία είναι απλή .

Με μια εγγραφή δημιουργείτε ένα λογαριασμο στο HISTATS,στην συνέχεια πρέπει να προσθέσετε την διεύθυνση του blog σας και με αυτό τον τρόπο θα μπορέσετε να διαλέξετε όποιο καταμετρητή θέλετε απλά κάνοντας αντιγραφή και επικόλληση τον κωδικό του.Επιπλέον κλικάροντας το counter που θα τοποθετήσετε ή κλικάροντας στην σελίδα που έχετε εισάγει στο HISTATS θα μπορείτε να δείτε  λεπτομερή στατιστικά επισκεψιμότητας.
Έτσι με ένα μικρό και όμορφο gadget προσαρμόζοντας το σε αυτό που θέλετε να καταγράφει θα ενημερώνεστε για το πόσοι επισκέπτες παρακολούθησαν την σελίδα σας,πόσες σελίδες διαβάστηκαν,πόσοι είναι online εκείνη την στιγμή και διάφορα άλλα.

ΑΝ ΣΑΣ ΑΡΕΣΕ ΤΟ ΑΡΘΡΟ ΒΑΘΜΟΛΟΓΗΣΤΕ ΑΦΗΣΤΕ ΤΟ ΣΧΟΛΙΟ ΣΑΣ!!!