Add a Comment button (Εικόνα αντί για φράση)

Νέοι bloggers γεια σας...

Σήμερα θα δούμε πως βάζουμε μια εικόνα (πλήκτρου), δίπλα στη φράση "δημοσίευση σχολίου", στο τέλος κάθε ανάρτησης μας...Πρώτα όμως, πρέπει να βρούμε την κατάλληλη εικόνα, που θα αντικαταστήσει τη φράση...
Ψάχνουμε λοιπόν στο Google => εικόνες, με τη φράση "comment button" η "comment image"...μόλις βρούμε αυτή που μας ταιριάζει, γράφουμε κάπου copy-paste το url της (διεύθυνση εικόνας), και συνεχίζουμε για να βρούμε σε ποιο σημείο του HTML, θα τη βάλουμε...

Συνδεόμαστε με τον Blogger, (Κάντε μια λήψη πλήρους προτύπου για καλό και για κακό) και στην Σχεδίαση => Επεξεργασία HTML, τσεκάρουμε το Επέκταση προτύπων γραφικών στοιχείων.Στη συνέχεια με τον γνωστό τρόπο Ctrl+F,ψάχνουμε να βρούμε το...


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


...αν δεν το βρείτε στο πρότυπό σας, δοκιμάστε να βρείτε τη φράση:


<data:postCommentMsg/>


...υπάρχουν περίπου 2-3 τέτοιες φράσεις, αλλά εσείς διαλέξτε την τελευταία....
Και ανάμεσα στη φράση  :  <data:postCommentMsg/> ΕΔΩ Η ΦΡΑΣΗ  </a>
εκεί που υπάρχει η κόκκινη φράση, βάλτε τον εξης κώδικα:


<img src=' ΕΔΩ Η ΔΙΕΥΘΥΝΣΗ ' style='border:0px'/>


...όπου βέβαια, θα αντικαταστήσετε τη διεύθυνση με το url της εικόνας...
οπότε θα δείχνει π.χ. κάπως έτσι  =>


<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd_7QIJe3CSHfysjB5UUbVXOUS5oKUIM-jC8HgsTF6XLp-Sfge5GFxsV1yrgY1XGr5r78wR846AcJmjfA3GsMTajR9_HCgCF0dlu7uoey41jiE0NmLoXj5Fkw9thKmkGABL-n_eapR3hct/s1600/CommentButton.png' style='border:0px'/>


...κάντε μια ΠΡΟΕΠΙΣΚΟΠΙΣΗ, και αν όλα πάνε καλά, πατήστε ΑΠΟΘΗΚΕΥΣΗ...
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!


Υ.Γ.
***Αν θέλετε να εμφανίζεται μόνον η εικόνα, χωρίς τη φράση "δημοσίευση σχολίου", θα πρέπει να σβήσετε τη φράση του κώδικα:  <data:postCommentMsg/>  


{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}

ΑΡΙΘΜΟΣ ΣΧΟΛΙΩΝ ΔΙΠΛΑ ΣΤΟ ΤΙΤΛΟ ΤΗΣ ΑΝΑΡΤΗΣΗΣ

Νέοι bloggers γεια σας !!! Επειδή τα σχόλια είναι πολύ σημαντικά σε μια ανάρτηση, μπορούμε να τα κάνουμε να φαίνονται με μια εικόνα και τον αριθμό τους δίπλα στον τίτλο της κάθε ανάρτησης !!!
Εικόνες σε όλα τα μεγέθη από "συννεφάκια διαλόγων" μπορείτε να βρείτε στο google-εικόνες, βάζοντας τίτλο αναζήτησης: COMMENT-BUBBLES.


Αφού λοιπόν έχουμε ανεβάσει τα εικονίδια και έχουμε πάρει και αποθηκεύσει τις διευθύνσεις τους (direct links), σε ένα σημειωματάριο, συνδεόμαστε με τον Blogger, και στην Σχεδίαση => Επεξεργασία HTML, τσεκάρουμε το Επέκταση προτύπων γραφικών στοιχείων.Στη συνέχεια με τον γνωστό τρόπο Ctrl+F,ψάχνουμε να βρούμε το

<h3 class='post-title entry-title'>

...και αμέσως ΚΑΤΩ ΑΠΟ ΑΥΤΟ, επικολλάμε τον κώδικα:

<!--COMMENT-BUBBLES-STARTS--><b:if cond='data:post.allowComments'>

<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>

</b:if><!--COMMENT-BUBBLES-STOPS-->

...Tώρα βρείτε τη φράση :  </head>

...και αμέσως ΠΑΝΩ  ΑΠΟ ΑΥΤΗ επικολλάμε τον κώδικα:

<!--COMMENT-BUBBLES-STARTS--><style type='text/css'>

.comment-bubble {

float: right;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbt4E2NwzZQS8ZmolldmSa2xljqEb226UY0JtbzApdELtrLA4yrbFu9uVFXmt42dZ8Lf_paSnRQKAcw931avnIP1zvSPxgn5Bad5a6KLaAq8CpHN4P2c4eWUj3tt3xiBIUzmF-cE4WQfRQ/s1600/%25CF%2583%25CF%2587%25CE%25BF%25CE%25BB%25CE%25B9%25CE%25B1+5.gif) no-repeat;

width: 45px;
height: 50px;

font-size: 8px;
margin-top: 0px;
margin-right: -14px;
text-align: center;

}

</style><!--COMMENT-BUBBLES-STOPS-->

...Αλλάξτε το URL (διεύθυνση) της εικόνας που θα βάλετε εσείς, και τις τιμές width: και height: κλπ. που ταιριάζουν στο blog σας, βλέποντας πως εμφανίζονται, πατώντας ΠΡΟΕΠΙΣΚΟΠΙΣΗ....
(Αν θέλετε βάζετε τη φωτό και διαστάσεις από το δικό μου κώδικα)

Κάντε ΑΠΟΘΗΚΕΥΣΗ μόλις δείτε ότι το πετύχατε όπως θέλετε ...ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!

**ΠΡΟΣΟΧΗ: ΑΝ ΑΛΛΑΞΕΤΕ ΕΙΚΟΝΑ, (ΑΠΟ ΑΥΤΗ ΠΟΥ ΣΑΣ ΔΙΝΩ ΜΕΣΑ ΣΤΟΝ ΚΩΔΙΚΑ) ΠΡΕΠΕΙ ΟΠΩΣΔΗΠΟΤΕ ΝΑ ΑΛΛΑΞΕΤΕ ΚΑΙ ΤΙΣ ΔΙΑΣΤΑΣΕΙΣ ΟΠΩΣ ΓΡΑΦΩ ΠΙΟ ΠΑΝΩ !!!
**ΣΑΣ ΒΑΖΩ ΚΑΙ ΜΕΡΙΚΑ BUTTONS ΓΙΑ BACKGROUND (NA ΑΛΛΑΞΕΤΕ ΤΟ background: url)(ΠΑΤΗΣΤΕ ΣΤΗΝ ΕΙΚΟΝΑ ΝΑ ΑΝΟΙΞΕΙ ΣΕ ΝΕΑ ΚΑΡΤΕΛΑ...ΓΙΑ ΝΑ ΠΑΡΕΤΕ ΤΗ ΔΙΕΥΘΥΝΣΗ)

{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}