Blogger Tips – Tricks – Gadgets – Templates – Hacks

Το BloggerTips πρώτο ανακοινώνει την υποψία του για εισαγωγή Reply Button στα σχόλια του Blogger



Print Friendly and PDFPrintPrint Friendly and PDFPDF


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




Πώς θα σας φαινόταν να έχετε τη δυνατότητα απάντησης στα σχόλια του blogger;



Αυτό που θέλουμε να μοιραστούμε σήμερα με όλους εσάς είναι κάτι αποκλειστικό που παρατηρήσαμε εδώ στο BloggerTips και πιστεύουμε πως είναι άξιο αναφοράς.



Έχουμε να κάνουμε λοιπόν με το παρακάτω κομμάτι κώδικα…

.comments .comments-content .comment-replies {

margin-top: 1em;

margin-left: 36px;

}

.comments .comments-content .comment:first-child {

padding-top:16px;

}

.comments .comments-content .comment:last-child {

border-bottom:0;

padding-bottom:0;

}

.comments .comments-content .comment-body {

position:relative;

}

.comments .comments-replybox {

border: none;

height: 250px;

width: 100%;

}

.comments .comment-replybox-single {

margin-top: 5px;

margin-left: 48px;

}

.comments .comment-replybox-thread {

margin-top: 5px;

}

.comments .comments-content .loadmore a {

display: block;

padding: 10px 16px;

text-align: center;

}

…το οποίο, αν προσέξουμε τις ονομασίες των στοιχείων που έχουμε υπογραμμισμένα, μας προετοιμάζει για την επίσημη εισαγωγή του reply button σε όλα τα πρότυπα του blogger (σημ.: το παραπάνω κομμάτι κώδικα το εντοπίσαμε εμείς σε πολύ πρόσφατα δημιουργημένο blogger blog), με δυνατότητα μαρκαρίσματος κάθε σχολίου που απαντάται, φυσικά.



Δεν έχει ανακοινωθεί το παραμικρό από μεριάς Blogger προς το παρόν και για αυτό αναφερόμαστε στο γεγονός ως κάτι αποκλειστικό. Το μόνο που έχουμε είναι ενδείξεις (που μας κάνουν να είμαστε σίγουροι σε μεγάλο ποσοστό, παρ ‘όλα αυτά, για ό,τι υποστηρίζουμε).



Σε περίπτωση που δεν επαληθευτούμε, εννοείται πως θα είμαστε εδώ διαθέσιμοι και πρόθυμοι να κριθούμε.



Έχουμε δει και δημοσιεύσει κατά καιρούς διάφορα κόλπα με τα οποία μπορείτε να προσθέσετε τέτοιο κουμπάκι στο blog σας, αλλά όλοι οι τρόποι είναι “μπακαλίστικοι” και φυσικά δεν εξυπηρετούν ακριβώς αυτό που θα θέλαμε.



Πώς θα σας φαινόταν αλήθεια ένα reply button για τα σχόλια στο blogger;



Copyrights: /




Blogger Dynamic Views (τι είναι, πως τα εφαρμόζω, θετικά-αρνητικά)



Print Friendly and PDFPrintPrint Friendly and PDFPDF


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



Σήμερα θα μιλήσουμε για τη νέα λειτουργία του blogger η οποία έγινε διαθέσιμη σε όλους πριν από μερικές ημέρες (28/9/2011 για την ακρίβεια), τα Dynamic Views.







Τι είναι λοιπόν τα Dynamic Views και πώς μπορούμε να τα εφαρμόσουμε;



Τα Dynamic Views είναι ένας νέος τρόπος προβολής των blog μας. Περιλαμβάνει επτά νέους τρόπους προβολής των blog μας: Classic, Mosaic, Sidebar, Flipcard, Snapshot, Timeslide και Magazine (δείτε την παρακάτω εικόνα για να πάρετε μια ιδέα από το καθένα!).

Όπως μπορείτε να δείτε από την παραπάνω εικόνα, κάθε τρόπος προβολής (πχ Classic, Mosaic) διαφέρει αρκετά από τους υπόλοιπους.



Για να εφαρμόσετε κάποιο από τα παραπάνω στο blog σας, ακολουθήστε την παρακάτω διαδικασία:



1. Σύνδεση στο λογαριασμό blogger.

2. “Δοκιμάστε την ενημερωμένη διεπαφή του Blogger” (προαιρετικά)

3. “Πρότυπο”

4. “Προσαρμογή”

5. “Dynamic Views” και επιλέγετε ένα από τα επτά διαθέσιμα πρότυπα

6. “Εφαρμογή στο ιστολόγιο” και “Προβολή ιστολογίου” για να δείτε το αποτέλεσμα!



Μετά τη μεγάλη αλλαγή στο περιβάλλον διαχείρισης του blog μας, τώρα έρχεται μια νέα μεγάλη αλλαγή, αυτή τη φορά στον τρόπο προβολής του blog μας.



Πάμε να δούμε τι μας άρεσε και τι δε μας άρεσε συνοπτικά:



Μας άρεσε:

-Το απλό, καθαρό και όμορφο design των νέων προτύπων.

γρήγορη φόρτωση των σελίδων (αποτέλεσμα του από πάνω).

διαδραστικότητα των νέων προτύπων.

-Τα έτοιμα +1, Tweet και Like buttons που προσφέρονται από μόνα τους σε κάθε πρότυπο.

-Η φόρτωση πολλών post στην αρχική σελίδα, κάτι που δεν απαιτεί χρόνο, αφού οι αναρτήσεις που είναι παρακάτω φορτώνουν με το scrollάρισμα προς τα κάτω.

-Η δυνατότητα που έχουν οι επισκέπτες να προβάλλουν το blog σας με επτά τρόπους, ανεξάρτητα με το ποιον από τους επτά έχετε προ-επιλέξει εσείς.



Δε μας άρεσε:

-Το γεγονός πως δε μπορούμε να προσαρμόσουμε (προς το παρόν τουλάχιστον, δεν ξέρουμε αν θα υπάρξει τέτοια δυνατότητα στο μέλλον) το blog μας όπως θέλουμε εμείς.

Δεν έχουμε πρόσβαση στην HTML.

Δεν μπορούμε να προσθέσουμε δικά μας gadget.

-Η λειτουργία Dynamic Views δεν είναι διαθέσιμη για όλα τα blogs! Δε φταίει το πρότυπο που έχετε, καθώς σε δύο ολόιδια blogs που δοκίμασα να εφαρμόσω τα Dynamic Views, στο ένα εφαρμόστηκε ενώ στο άλλο όχι! Ίσως είναι θέμα χρόνου, θα δείξει…

-Αν και βελτιώθηκαν κάπως τα σχόλια, ακόμα δεν έχουμε τη δυνατότητα απάντησης (reply) προς τους σχολιαστές.



(Επίσης πρέπει να γνωρίζετε πως αν έχετε επιλέξει να βλέπετε το blog μόνο εσείς, να μην είναι δηλαδή ορατό σε οποιονδήποτε, τότε δε θα μπορείτε πάλι να εφαρμόσετε τα Dynamic Views!)



Αυτά είναι πάνω κάτω τα θετικά και αρνητικά που αποκόμισα εγώ από τα Dynamic Views, μια λειτουργία που πιστεύω πως ήρθε για να μείνει, εφόσον φυσικά βελτιωθεί σε κάποιους τομείς τους οποίους έθιξα παραπάνω.



Είναι φανερό πως η blogger προσπαθεί να κρατήσει τους bloggerposters (εμάς και εσάς δηλαδή!) στην πλατφόρμα της. Είναι επίσης φανερό πως κάνει βήματα εμπρός όσον αφορά το θέμα του design στα blog μας. Αυτό που δε μπορούμε να καταλάβουμε όμως, εγώ τουλάχιστον, είναι γιατί δεν ανεβαίνει επίπεδο και στον τομέα της ευχρηστίας.



Πώς να μην μεταπηδήσεις ύστερα σε κάποια άλλη, επίσης δωρεάν, πλατφόρμα, τη στιγμή που δε μπορείς να τροποποιήσεις το blog σου στη blogger, έστω σε ένα βασικό επίπεδο;



Copyrights: /

Post by Secra from WebRev.gr




Facebook comment box στο blogger



Print Friendly and PDFPrintPrint Friendly and PDFPDF




Καλησπέρα στους αναγνώστες του 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: /



Post by Secra from Web in Greece




25 sites για free chat box (ή comment box)



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Το chat σε ένα blog είναι πολύ σημαντικό. Υπάρχει ενός είδος αλληλεπίδρασης του χρήστη με τη σελίδα. Η σελίδα αποκτά περισσότερη ζωντάνια. Οι επισκέπτες ενός blog μπορούν να ανταλάσσουν γνώμες μεταξύ τους και ο διαχειριστής του blog μπορεί να έρχεται σε άμεση επικοινωνία με τους επισκέπτες του, όποτε το επιθυμεί. Για αυτούς τους λόγους, καθιστάται αναγκαίο ένα chat box στη σελίδα σας.



Παρακάτω σας δίνω 25 sites με 25 διαφορετικά chat box από τα οποία μπορείτε να διαλέξετε αυτό που σας αρέσει και να το βάλετε στο site σας.

Σε όλα από τα παρακάτω sites μπορείτε να δημιουργήσετε δωρεάν ένα chat.

Σε πολλά από αυτά, πληρώνοντας ένα μικρό αντίτιμο, μπορείτε να κάνετε και premium λογαριασμό και να έχετε περισσότερες επιλογές στη διαμόρφωση του chat σας.

Για παράδειγμα ένας premium account στο cbox με κοστίζει 2,5 ευρώ τον μήνα.



Δείτε τα και επιλέξτε αυτό που σας ταιριάζει καλύτερα!


http://xat.com/ – πολύ καλό και μεγάλο

http://chatango.com/ – αυτό έχω εγώ’ δείτε το δεξιά και αφήστε καμιά καλησπέρα 🙂

http://www.cbox.ws/ – πάρα πολύ καλό (για βοήθεια σχετικά με το cbox δείτε εδώ και εδώ)

http://www.shoutmix.com/ – δεν μου αρέσει αυτό

https://www.meebo.com/rooms/create/ – δεν θα το διάλεγα εγώ

http://chatroll.com/ – πάρα πολύ καλό



– – – | – – –



Πιο Γρήγορο Web με IE9. Κατεβάστε τον Internet Explorer 9 τώρα από εδώ!



– – – | – – –



Τα παραπάνω είναι τα γνωστότερα. Ωστόσο υπάρχουν πολλά άλλα όπως:



http://chat-forum.com/freechat/

http://www.freeshoutbox.net/

http://www.coolchat.com/chat/free/?L=instruction.html&step=7&new=1

http://www.myshoutbox.com/

http://nat1on.com/

http://www.spinchat.com/

http://flashboon.com/

http://www.widgetbox.com/widget/naruto-shoutbox

http://www.free-shoutbox.co.uk/

http://www.v3chat.com/shoutbox.php

http://spacegirlpippa.co.uk/

http://www.gerd-tentler.de/tools/shoutbox/

http://www.freeshoutbox.net/

http://www.shoutboxpro.com/

http://www.yellbox.com/

http://www.shout-box.com/

http://www.gagalive.com/live/

http://blom.bleebot.com/index.html

http://www.chatbutton.com/



Σας αρκούν?



Τον κώδικα του chat τον βάζετε στο blog σας όπως κάθε άλλο widget, από Σχεδίαση> Στοιχεία Σελίδας> Προσθήκη gadget> HTML/JavaScript



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








Copyrights: /




ΣΧΟΛΙΑ ΣΤΙΣ BLOGGER ΑΝΑΡΤΗΣΕΙΣ ΣΟΥ ΑΠΟ ΤΟ FACEBOOK – ADDING FACEBOOK COMMENT BOX TO BLOGGER BLOG



Print Friendly and PDFPrintPrint Friendly and PDFPDF




Το Facebook είναι αναμφίβολα η μεγαλύτερη διαδικτυακή κοινότητα. Δεν υπάρχει άλλο site με περισσότερα μέλη. Έτσι το Facebook δίνει την δυνατότητα να προσθέσουμε στη σελίδα μας, διάφορα widgets, με τα οποία συνδέουμε το site μας με το Facebook και τα 500 εκ. μέλη του. Ένα από αυτά τα widgets είναι το widget σχολιων. Έτσι θα δώσουμε τη δυνατότητα στους επισκέπτες μας να σχολιάσουν τις αναρτήσεις μας, ενώ είναι συνδεδεμένοι στους λογαριασμούς τους στο Facebook. Αυτό είναι πολύ καλό και για μας, γιατί έτσι διαφημίζεται το site μας στο Facebook, αφού ο καθένας μπορεί να κάνει το διάσημο “Like”.



Θέλετε λοιπόν να βάλετε ένα Facebook Comment Box? Aν ναι ακολουθήστε τα παρακάτω βήματα:



1. Πάτα στο http://developers.facebook.com/setup/



Γράψε στο κάθε κουτάκι αυτό που ζητάει, όπως έχω κάνει για το δικό μου site στην παρακάτω εικόνα:




Έπειτα πατήστε “Create application” και συμπληρώστε τα γράμματα της εικόνας στο κουτί ασφαλείας.



2. Η σελίδα που θα εμφανιστεί θα είναι όπως η παρακάτω:




Από αυτη τη σελίδα μας χρειάζεται μόνο το App ID : 198372564539628

Αποθηκεύστε κάπου το App ID σας και πάμε παρακάτω.



3. Τώρα πάμε στο http://developers.facebook.com/docs/reference/plugins/comments*



Εκεί που λέει Unique Id βάζουμε το App ID μας και επίσης ρυθμίζουμε τις άλλες ρυθμίσεις, όπως θέλουμε εμείς:




Τώρα κάνουμε κλικ στο Get code και αντιγράφουμε τον κωδικό που θα εμφανιστεί, όπως φαίνεται παρακάτω:




Τώρα στον παραπάνω κωδικό αντικαθιστούμε το APP_ID με το νούμερο του APP ID μας που έχουμε αποθηκεύσει από το βήμα 2.





4. Τώρα συνδεόμαστε στον blogger λογαριασμό μας από το http://draft.blogger.com/home και από τον πανόπτη μας, πάμε στη Σχεδίαση, μετά στην Επεξεργασία html και τσεκάρουμε το κουτάκι που λέει: “Επέκταση προτύπων γραφικών στοιχείων”



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



αν θέλουμε το facebook comment box να εμφανίζεται αμέσως μετά από κάθε blogger post μας βρίσκουμε το:


<p><data:post.body/></p>



αν θέλουμε το facebook comment box να εμφανίζεται πάνω από τα κανονικά σχόλια του blogger βρίσκουμε το:


<b:includable id=’comments’ var=’post’>





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



Αποθηκεύσουμε το πρότυπό μας, κι είμαστε έτοιμοι!



*Επίσης από το http://developers.facebook.com/plugins μπορούμε να βρούμε κι άλλα ενδιαφέροντα facebook widgets όπως φαίνονται παρακάτω:



Το σχόλιό σας, η ΕΠΙΒΡΑΒΕΥΣΗ μου!


Keep Blogging!

johnpatra




Μπαλονάκι με τα σχόλια κάθε ανάρτησης



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Τι λέτε να εμφανίσετε τα σχόλια των αναρτήσεων σας μέσα σ’ ένα “μπαλονάκι”?

Είναι ένα όμορφο hack που θα σας διευκολύνει πολύ στο να βλέπετε τα σχόλια των αναρτήσεών σας.



Για να το κάνετε, ακολουθήστε τα παρακάτω βήματα:



1. Σύνδεση στον λογαριασμό σας

2. Σχεδίαση

3. Επεξεργασία html

4. “Επέκταση προτύπων γραφικών στοιχείων”

5. Με τη βοήθεια του ctrl + F βρίσκουμε το παρακάτω:


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



6. Και κάτω από αυτό βάζουμε τον παρακάτω κώδικα:


<!–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–>



7. Πάλι με το ctrl+F βρίσκουμε το


</head>



8. και πριν από τον παραπάνω κωδικό προσθέτουμε το


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

.comment-bubble {

float: right;

background: url(image direct link) no-repeat;

width: 55px;

height: 38px;

font-size: 18px;

margin-top: -15px;

margin-right: 2px;

text-align: center;

}

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



Απλά εκεί που λέει “image direct link” βάλτε το λινκ της εικόνας της αρεσκείας σας.



Να μερικά εικονίδια που βρήκα από το Loneeagle:















9. Πατήστε Προεπικόπηση να δείτε αν σας εμφανίζεται σωστά και αν είναι ολα οκ πατήστε Αποθήκευση.



Ελπίζω να σας άρεσε.



johnpatra




Πρόσθεσε Reply Button σε κάθε σχόλιό σου – Add a Reply Button to your comments



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Καλησπέρα,



εδώ και λίγο καιρό έχω βάλει μια νέα λειτουργία στα σχόλια. Αν προσέξτε κάθε σχόλιο έχει δίπλα ένα [Reply]. Αν θέλετε να δείτε πως ακριβως δουλεύει σας αφήνω να δημοσίευσετε test comments σε αυτην την ανάρτηση. Αφήστε ένα σχόλιο και μετά αφήστε άλλο ένα, πατώντας το [Reply], για να δείτε πως δουλεύει. Και αν σας αρέσει, δείτε παρακάτω πως θα το βάλετε κι εσείς!




Για να ενσωματώσετε αυτό το hack στο Blog σας, ακολουθήστε τα παρακάτω βήματα:



1) Login στον blogger account

2) Πανόπτης

3) Σχεδίαση ή Διάταξη

4) Επεξεργασία html

5) Επέκταση προτύπων γραφικών στοιχείων

6) Με το ctrl+F βρείτε τον παρακάτω κωδικό:


<data:commentPostedByMsg/>



Κάτω από τον παραπάνω κώδικα επικολλήστε τον παρακάτω:


<span><a expr:href=’"https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"’ onclick=’javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450"); return false;’>[Reply]</a></span>



Επεξεργασία του παραπάνω κώδικα:



α) Καταρχίν εκεί που λέει YOUR-BLOG-ID αλλάξτε το με το ID του blog σας. Το ID σας μπορείτε να το βρείτε πολύ εύκολα. Αρκεί να κοιτάξετε στην url σας και θα το δείτε, όπως φαίνεται και στη φώτο:




β) Εκεί που λέει [Reply], μπορείτε να το αλλάξετε και να βάλετε κάτι άλλο π.χ.: “Απαντήστε σε αυτό το σχόλιο”.



γ) Μπορείτε να βάλετε και εικόνα αντί για το [Reply]. Απλά διαγράψτε το [Reply] και στη θέση του βάλτε τον παρακάτω κωδικό:


<img src=”http://3.bp.blogspot.com/_v5IxGTiMTD8/TDDXeKfwaaI/AAAAAAAACe8/lI2Jj9VdMFs/s1600/reply%5B1%5D.gif“/>



Μπορείτε να βάλετε όποια εικόνα θέλετε, αντικαθιστώντας τα κόκκινα γράμματα με το url της.



7) Πατήστε Προεπισκόπηση να δείτε αν θα γίνει δεκτός ο κώδικας και αν είναι όλα οκ, πατήστε Αποθήκευση!



Ελπίζω να σας αρέσει 🙂



Αφήστε ένα σχόλιο να δω κι εγώ αν οι κωδικοί είναι οκ ή είναι λάθος.



Μην ξεχάσετε να το αναρτήσετε στο facebook wall σας, πατώντας το παρακάτω κουμπί:




Popular Posts Widget – Most Commented



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Δείτε πως θα βάλετε ένα widget στο blog σας το οποίο θα δείχνει στους επισκέπτες σας τα πιο σχολιασμένα ποστ σας.Δηλαδή τα πιο popular αφου θα είναι και με τα πιο πολλά σχόλια.Το μαγάλο κακό σε αυτό το widget είναι ότι δεν δείχνει ελληνικούς χαρακτήρες αλλά μόνο αγγλικούς.Δοκιμάστε το πάντως να δείτε αν σας αρέσει και αν δεν σας αρέσει διαγράψτε το.

Βρήκα 2 είδη αυτού του widget.
Ο κωδικός μπαίνει σαν gadget ,δηλαδή πάτε Διάταξη>Προσθήκη gadget>HTML/JavaScript και εκεί επικολλήτε έναν από τους παρακάτω κωδικούς.
Δεν χρειάζεται να βάλετε τίτλο.
(Σας τον έχω βάλει εγώ και μάλιστα όποιος τον πατάει θα έρχεται σε αυτήν την ανάρτηση για να δει πως θα το βάλει και αυτός!)
Δείτε και τα δύο είδη του widget και βάλτε όποιο σας αρέσει περισσότερο.

Πρώτο είδος:


<a href=”http://johnpatrablog.blogspot.com/2009/11/popular-posts-widget-most-commented.html” target=”_blank”><span style=”font-size: xx-small;”>Popular Posts Widget</span></a>
<script type=”text/javascript”>
function pipeCallback(obj) {
document.write(‘<ul style=”text-transform: capitalize;”>’);
var i;
for (i = 0; i < obj.count ; i++)
{
var href = “‘” + obj.value.items[i].link + “‘”;
var item = “<li>” + “<a href=” + href + “>” + obj.value.items[i].title + “</a> </li>”;
document.write(item);
}
document.write(‘</ul>’);
}
</script>
<script src=”http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=28a6afad7c6ba1288c1b738277e42385&url=http%3A%2F%2Fjohnpatrablog.blogspot.com&num=10” type=”text/javascript”></script>



Αυτό που είναι με κόκκινο το αλλάζετε με την διεύθυνση του δικού σας blog.
Και το “10” που είναι μαρκαρισμένο με μπλε δείχνει πόσα ποστς θα εμφανίζονται.

Δεύτερο είδος:


<span style=”gt;<a href=”http://johnpatrablog.blogspot.com/2009/11/popular-posts-widget-most-commented.html” target=”_blank”>Popular Post Widget</a></span>
<script type=”text/javascript”>
function pipeCallback(obj) {
document.write(‘<ol style=”text-transform: capitalize;”>’);
var i;
for (i = 0; i < obj.count ; i++)
{
var href = “‘” + obj.value.items[i].link + “‘”;
var item = “<li>” + “<a href=” + href + “>” + obj.value.items[i].title + “</a> </li>”;
document.write(item);
}
document.write(‘</ol>’);
}
</script>
<script src=”http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=ML4p0UfW3RGgS7iN1JzWFw&url=http%3A%2F%2Fjohnpatrablog.blogspot.com&num=10” type=”text/javascript”></script>




Αυτό που είναι με κόκκινο το αλλάζετε με την διεύθυνση του δικού σας blog.
Και το “10” που είναι μαρκαρισμένο με μπλε δείχνει πόσα ποστς θα εμφανίζονται.

Αν έχετε κάποια παρατήρηση αφήστε ένα σχόλιο.




Μάρκαρε τα σχόλιά σου για να διαφέρουν από τα υπόλοιπα!



Print Friendly and PDFPrintPrint Friendly and PDFPDF



Ανοίξτε μια ανάρτησή μου που να έχει πολλά σχόλια.Όπως σε αυτήν εδώ π.χ.
Κοιτάξτε στα σχόλια.Βλέπετε που τα δικά μου σχόλια είναι μαρκαρισμένα με χρώμα και ξεχωρίζουν από τα άλλα?Αν σας αρέσει αυτό δείτε πως θα το κάνετε κι εσείς.

Αυτό θα κάνει τα σχόλια του διαχειριστή του blog να είναι διαφορετικά από τα σχόλια των άλλων.

Βήμα 1

Κάνε σύνδεση στον λογαριασμό σου και από τον πανόπτη σου πήγαινε στη διάταξη και από εκεί στην Επεξεργασία html

Βήμα 2

Τσέκαρε το τετραγωνάκι που λέει “Επέκταση προτύπων γραφικών στοιχείων” και κάνε back up το template σου.

Βήμα 3

Αντέγραψε τον παρακάτω κώδικα και επικόλλησέ τον πριν το
]]></b:skin>


.author-comments {
background: #ffffff;
border: 2px solid #ffffff;
padding: 5px;
}



Είναι ρυθμισμένο έτσι ώστε το backround να είναι άσπρο ,πράγμα που πρέπει να αλλάξει αν είναι μαύρο το χρώμα του blog σας ,γιατί θα είναι άσπρα τα γράμματα.

Το χρώμα του border (η γραμμή στο περιθώριο) είναι ρυθμισμένη κι αυτή άσπρη.

Δες τους κωδικούς των χρωμάτων για να επιλέξεις αυτόν που σου αρέσει και να αλλάξεις στο
http://johnpatrablog.blogspot.com/2009/08/html-color-codes-and-names.html

Βήμα 4

Τώρα βρες τον παρακάτω κώδικα:



<dl id=’comments-block’>
<b:loop values=’data:post.comments’ var=’comment’>
<dt class=’comment-author’ expr:id='”comment-” + data:comment.id’>
<a expr:name='”comment-” + data:comment.id’/>
<b:if cond=’data:comment.authorUrl’>
<a expr:href=’data:comment.authorUrl’ rel=’nofollow’><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
said…
</dt>

<b:if cond=’data:comment.author == data:post.author’> <dd class=’author-comments’> <p><data:comment.body/></p> </dd> <b:else/>

<dd class=’comment-body’>
<b:if cond=’data:comment.isDeleted’>
<span class=’deleted-comment’><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

</b:if>

<dd class=’comment-footer’>
<span class=’comment-timestamp’>
<a expr:href='”#comment-” + data:
comment.id’ title=’comment permalink’>
<data:comment.timestamp/>
</a>
<b:include data=’comment’ name=’commentDeleteIcon’/>
</span>
</dd>
</b:loop>
</dl>



Πρόσθεσε στον αρχικό κώδικα τους κωδικούς που είναι με μπλε.Η θέση που θα τους βάλετε πρέπει να είναι ακριβής.
Σε μερικά πρότυπα διαφέρουν ελάχιστα οι κωδικοί.

Βήμα 5

Αποθήκευσε το πρότυπό σου!

Άφησέ μου ένα σχόλιο και πες μου αν το πέτυχες ή αν συνάντησες κάποιο πρόβλημα.




Widget με τα τελευταία σχόλια – Recent comments widget



Print Friendly and PDFPrintPrint Friendly and PDFPDF



Θέλετε κι εσείς να βάλετε ένα widget στο blog σας που να δείχνει τα τελευταία σχόλια σας?Σαν αυτό που έχω βάλει εγώ στην αριστερή στήλη με τίτλο “Recent comments”.Αν σας αρέσει και θέλετε να μάθετε πως θα το βάλετε κι εσείς ,δείτε παρακάτω!

Είναι υπερβολικά εύκολο να το βάλετε!

Απλά ακολουθήστε τα παρακάτω βήματα:

1) Κάντε σύνδεση στον λογαριασμό σας από το blogger.com

2) Από τον “πανόπτη” σας πατήστε “διάταξη”

3) Πατήστε “προσθήκη gadget” από τα “στοιχεία σελίδας”

4) Από το αναδυόμενο παράθυρο που θα ανοίξει επιλέξτε “HTML/JavaScript”

5) Σαν τίτλο μπορείτε να βάλετε “Recent comments” και στο από κάτω κενό επικολλήστε τον ακόλουθο κώδικα:


<script style=”text/javascript” src=”http://kunoichi.info/blogger_buster/comments.js”></script><script style=”text/javascript”>var a_rc=3;var m_rc=true;var n_rc=true;var o_rc=100;</script><script src=”http://Η διεύθυνσή σας.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments”></script>



Φυσικά εκεί που σας έχω μαρκάρει με κόκκινο βάζετε τη διεύθυνση του blog σας.

6) Πατήστε “αποθήκευση” κι είστε έτοιμοι!

Πολύ εύκολο ,ε?
Αν συνάντησες κάποιο πρόβλημα (ή όλα δούλεψαν κανονικά) άφησε μου ένα σχόλιο.