Blogger Tips – Tricks – Gadgets – Templates – Hacks

Περιγραφή συγγραφέως ( Author Box) στο τέλος των αναρτήσεων



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Γεια σας, παρακάτω σας έχω γράψει ένα καλό τρικάκι που μπορείτε να προσθέσετε στο blog σας εύκολα και γρήγορα…

Υπάρχουν πολλά blogs που έχουν περισσότερους από έναν συγγραφέα .

Έτσι σκέφτηκα να δημιουργήσω ένα ” πεδίο ” κάτω από τις αναρτήσεις όπου μπορεί να μπει μια φωτογραφία και μια σύντομη περιγραφή κείμενου του συγγραφέα που έγραψε το κείμενο του κάθε blog.



Ο κωδικός αυτός αναπτύχθηκε για να χρησιμοποιηθεί σε blogs με περισσότερους από έναν συγγραφέα. Έτσι ώστε η περιγραφή αυτή του συγγραφέα να εμφανίζεται κάτω από τις αναρτήσεις που έγραψε.

Όλα αυτά αυτόματα χωρίς να χρειαστεί να τροποποιήσετε τίποτα στις αναρτήσεις .



1ο Βήμα : Κάνετε Login στο λογαριασμό του Blogger σας , Πηγαίνετε  Διάταξη  -> Επεξεργασία HTML  και πατήστε στο κουτάκι  Επέκταση προτύπων γραφικών στοιχείων .



2ο Βήμα :  Πατήστε  Ctrl + f  και ψάξτε στο πρότυπό σας για την ετικέτα:


]]></b:skin>



3ο Βήμα :  Κολλήστε ακριβώς ΑΠΟ ΠΑΝΩ τον παρακάτω κώδικα :


#post-footer-autor {

width: 90%;

height: 67px;

background: #e6e6e6;

border:3px solid #b3b3b3;

margin: 8px 0px 8px 0px;

font-family: ‘Trebuchet MS’,Trebuchet,Arial,Verdana,Sans-serif;

}

#autor-img { /*  Avatar */

width: 54px;

height: 54px;

background: #fff;

float: left;

margin: 7px;

}

#autor-box {

padding-right: 5px;

margin: 0px;

}

#autor-box p{ / * Style text description * /

font-size: 12px;

padding: 10px;

margin: 0;

text-align: justify;

text-transform: normal;

color: #666666;

}

#autor-box a{ / * Style linked text * /

color: #000fcc;

text-decoration:none;

}

#autor-box a:hover {

color:#7780ee;

text-decoration:underline;

}



Ο κώδικας CSS παραπάνω είναι τα χαρακτηριστικά του Author Box . Αν γνωρίζετε αρκετά για να αλλάξετε τις πιο βασικές CSS, όπως η αλλαγή των χρωμάτων και μεγεθών. Απλά αλλάξετε το στυλ με προσοχή και κατόπιν προσαρμόστε το widget.



4ο Βήμα :  Ψάξτε  (Ctrl + f)  στο πρότυπό σας  για τον κώδικα :


<div class=”post-footer”>

η για το

<div id=”post-footer”>

η για το  

<data:post.body/> (αν είναι πολλά, λογικά είναι το τελευταίο) και (με την προϋπόθεση ότι μετά/ακριβώς δίπλα από το <data:post.body/> δεν θα υπάρχει κάποιος άλλος κώδικας).



5ο Βήμα :  Κολλήστε ακριβώς ΑΠΟ ΚΑΤΩ τον παρακάτω κώδικα :


<b:if cond=’data:blog.pageType == "item"’>

<b:if cond=’data:post.author == "ΟΝΟΜΑΣΙΑ ΤΟΥ ΣΥΓΓΡΑΦΕΑ"’>

<div id=’post-footer-autor’>

<div id=’autor-img’>

<img src=’URL ΤΗΣ ΕΙΚΟΝΑΣ‘ style=’width: 50px;height: 50px; border: 2px solid #b3b3b3; padding: 0; margin: 0;’/>

</div>

<div id=’autor-box’>

<p>

ΠΕΡΙΓΡΑΦΗ ΤΟΥ ΣΥΓΓΡΑΦΕΑ ΕΔΩ

</p>

</div>

</div>

</b:if>

</b:if>



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



Ο παραπάνω κώδικας κάνει αναφορά σε έναν συγγραφέα!

Για να  θέσουμε διαφορετικούς συγγραφείς απλά αντιγράψετε και  επικολλήστε τον κώδικα πολλές φορές ακριβώς πάνω από τον πρώτο κώδικα  , τόσες όσους συγγραφείς έχει το blog και απλά κάντε  τις εξής αλλαγές:


  • ΟΝΟΜΑΣΙΑ ΤΟΥ ΣΥΓΓΡΑΦΕΑ -> Βάλτε το ακριβές όνομα του συγγραφέα, το ίδιο όνομα χρήστη που χρησιμοποιείται στο λογαριασμό για να δημοσιεύσετε τις αναρτήσεις . Το όνομα πρέπει να είναι ακριβώς ίδιο αλλιώς  ο κωδικός δεν θα λειτουργήσει σωστά.  
Παράδειγμα: Στο blog  μου χρησιμοποιώ για να συνδεθώ στο blog μου και να δημοσιεύσω ανάρτηση το όνομα: Ilias. Έτσι θα βάλω το : Ilias . Αν ήταν Admin Θα έπρεπε να βάλω το Admin, Αν ήταν iks-Team.com .Θα έπρεπε να βάλω το iks-Team.com .
  • URL ΤΗΣ ΕΙΚΟΝΑΣ -> Τοποθετήστε το σύνδεσμο εικόνας  που χρησιμοποιείται ως avatar . Υπενθυμίζοντας ότι το link  θα πρέπει να έχει μια άμεση διαδρομή προς την εικόνα με μέγεθος 50px Χ 50px .  Μην ξεχνάτε το http:// 
  • ΠΕΡΙΓΡΑΦΗ ΤΟΥ ΣΥΓΓΡΑΦΕΑ ΕΔΩ -> Βάλτε το κείμενο της περιγραφής του συγγραφέα .Μπορείτε να γράψετε οτι θέλετε εσείς . Κάντε την δοκιμή, ώστε το κείμενο να μην περάσει το όριο των πεδίων του widget.

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



 Κάντε Προεπισκοηση πρώτα και αν είναι όλα εντάξει Αποθηκεύετε το πρότυπό σας  και επαναλάβετε τη δοκιμή αν χρειαστεί .

Καλή επιτυχία σε όλους !!!




Table Border



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Καλησπέρα σε όλους σας…Είμαι ο magakos από το Freeware-tools.net και  Freeware-tools.com .

Κάποιες φορές θέλουμε να βάλουμε κάτι καινούργιο στο blog μας και θέλουμε να “χτυπάει” αμέσως στο μάτι του επισκέπτη…

Αυτό θα μπορούσαμε να το πετύχουμε με ένα χρωματισμένο πλαίσιο γύρω του όπως το παρακάτω το οποίο έχει την ιδιότητα να αναβοσβήνει και μπορείτε να το δείτε στην πράξη πατώντας ΕΔΩ (Table Border)

Για να το περάσετε κάνετε τα εξής:

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

2) Διάταξη>Στοιχεία σελίδας>Προσθήκη gadget>HTML/Javascript

3) Επικολλήστε εκεί μέσα τον παρακάτω κώδικα:


<table border=”0″ width=”280″ id=”myexample” style=”border:5px solid green”>

<tr>

<td>Γράψτε εδώ ότι θέλετε….

Γράψτε εδώ ότι θέλετε….

Γράψτε εδώ ότι θέλετε….

</td>

</tr>

</table>

<script language=”JavaScript1.2″>

<!–



//configure interval btw flash (1000=1 second)

var speed=500



function flashit(){

var crosstable=document.getElementById? document.getElementById(“myexample”) : document.all? document.all.myexample : “”

if (crosstable){

if (crosstable.style.borderColor.indexOf(“green”)!=-1)

crosstable.style.borderColor=”red

else

crosstable.style.borderColor=”green

}

}

setInterval(“flashit()”, speed)

//–>

</script>


Αποθηκεύστε και είναι έτοιμο…





Τώρα δώστε βάση στα κομμάτια που έχω χρωματίσει με κόκκινο…

1. (width=”280″) Είναι το μήκος του πλαισίου….Αυξομειώστε τον αριθμό για να διαμορφώσετε το επιθυμητό μέγεθος.



2. (border:5px) Είναι το πάχος της γραμμής του πλαισίου…Αυξομειώστε τον αριθμό για να διαμορφώσετε το επιθυμητό μέγεθος.

3. (Γράψτε εδώ ότι θέλετε….) Είναι το κείμενο που θα υπάρχει μέσα στο πλαίσιο….Βέβαια εκτός από κείμενο μπορείτε να βάλετε link,εικόνα κτλ δίνοντας τον ανάλογο κώδικα, πχ για να βάλετε εικόνα βάλτε τον κώδικα:

<img src=”ΕΔΩ ΤΟ ΛΙΝΚ ΤΗΣ ΕΙΚΟΝΑ ΣΑΣ” />

ή για link βάλτε:

<a href=”ΕΔΩ ΤΟ ΛΙΝΚ ΣΑΣ”>ΕΔΩ ΔΏΣΤΕ ΟΝΟΜΑΣΙΑ ΣΤΟ ΛΙΝΚ</a>



4. (speed=500) Εδώ ρυθμίζετε την ταχύτητα που αναβοσβήνει το πλαίσιο…Αυξομειώστε τον αριθμό για να διαμορφώσετε το επιθυμητό αποτέλεσμα.



5. (red)+(green) Εδώ ρυθμίζετε τον χρωματισμό με τον οποίο θα αναβοσβήνει το πλαίσιο γράψτε το χρώμα που θέλετε ή δώστε τον κωδικό html ενός χρώματος βάζοντας μπροστά πάντα την δίεση (#) (πχ για μαύρο #000000)




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



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




Αλλάξτε το χρώμα και το σχήμα του κέρσορα



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Πολλές καλημέρες. Με αυτό το κολπάκι που θα σας δείξω σήμερα θα μπορείτε να αλλάξετε το χρώμα και το σχήμα του κέρσορα(mouse) του blog σας. Για να το βάλετε στο δικό σας site ακολουθήστε τα παρακάτω βήματα:



1. Σύνδεση στο blog σας>>Σχεδίαση>> Επεξεργασία HTML

2. Πατήστε ταυτόχρονα ctrl+f

3. Ψάξτε για το

<body>

4. Κάντε επικόλληση τον παρακάτω κώδικα πριν από αυτό(<body>).

<style type=”text/css”>body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur), progress;}</style>



5. Το μέγεθος του κέρσορα τώρα θα έχει αυξηθεί και το χρώμα του θα είναι μπλε.



Παρακάτω σας δίνω και άλλα σχέδια για να διαλέξετε. Μόλις βρείτε αυτό που θέλετε αντικαταστήστε το

http://cur.cursors-4u.net/cursors/cur-2/cur116.cur

με ένα από τα παρακάτω Link(συνδέσμους)!


http://cur.cursors-4u.net/others/oth-5/oth521.cur


http://cur.cursors-4u.net/others/oth-5/oth520.cur


http://cur.cursors-4u.net/user/use-1/use9.cur


http://cur.cursors-4u.net/cursors/cur-2/cur131.cur


http://cur.cursors-4u.net/cursors/cur-2/cur129.cur


http://cur.cursors-4u.net/cursors/cur-2/cur127.cur


http://cur.cursors-4u.net/cursors/cur-2/cur126.cur


http://cur.cursors-4u.net/cursors/cur-2/cur124.cur


http://cur.cursors-4u.net/cursors/cur-2/cur125.cur


http://cur.cursors-4u.net/cursors/cur-2/cur123.cur


http://cur.cursors-4u.net/cursors/cur-2/cur122.cur


http://cur.cursors-4u.net/cursors/cur-2/cur120.cur


http://cur.cursors-4u.net/user/use-1/use3.cur


Αν θέλετε ακόμη πιο πολλά σχέδια και χρώματα μπείτε στο http://www.cursors-4u.com

Καλή επιτυχία!!!




ΠΡΟΣΘΗΚΗ 4 ΣΤΗΛΩΝ ΣΤΟ FOOTER ΤΗΣ ΣΕΛΙΔΑΣ ΣΑΣ (update)



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Τι θα λέγατε για 4 στήλες στο footer(=κάτω μέρος) της σελίδας σας?



Αν θέλετε 3 στήλες αντί για 4, αρκεί να πατήσετε εδώ.




όποιος θέλει λοιπόν να βάλει 4 στήλες, κάνει τα παρακάτω:



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



Σχεδίαση



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



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



με το ctrl+F ψάχνουμε για το …


<b:section class=’footer’ id=’footer’/>



αν δεν σας βρήσκει τον παραπάνω, ψάξτε για τον παρακάτω:


<b:section class=’footer’ id=’footer’



σβήνουμε την παραπάνω γραμμή κώδικα και στη θέση του βάζουμε τον παρακάτω:


<div id=’footer-column-container’>

<div id=’footer1′ style=’width: 225px; float: left; margin:0; ‘>

<b:section class=’footer-column’ id=’footer-column-1′ preferred=’yes’ style=’float:left;’>

<b:widget id=’Text1′ locked=’false’ title=’About B-G’ type=’Text’/>



</b:section>

</div>

<div id=’footer2′ style=’width: 225px; float: left; margin:0; ‘>

<b:section class=’footer-column’ id=’footer-column-2′ preferred=’yes’ style=’float:left;’>

<b:widget id=’Text4′ locked=’false’ title=’About Author’ type=’Text’/>

</b:section>

</div>



<div id=’footer3′ style=’width: 225px; float: right; margin:0; ‘>

<b:section class=’footer-column’ id=’footer-column-3′ preferred=’yes’ style=’float:right;’>

<b:widget id=’Text3′ locked=’false’ title=’Subscribe in Reader’ type=’Text’/>

</b:section>

</div>



<div id=’footer4′ style=’width: 225px; float: right; margin:0; ‘>

<b:section class=’footer-column’ id=’footer-column-4′ preferred=’yes’ style=’float:right;’>

<b:widget id=’Text2′ locked=’false’ title=’Access B-G on Go’ type=’Text’/>

</b:section>

</div>

<div style=’clear:both;’/>

</div>



τώρα βρίσκουμε το …


]]></b:skin>



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


#footer-column-container { border: .3px dotted #cccccc;}



.footer-column { margin: 0 10px 0 10px; padding:5px;

color: #666666; line-height: 1.5em; font-size:12px;}



.footer-column h2 {

padding-bottom:.15em; text-align:center;

font:”normal normal 80% ‘Comic Sans MS’,’Lucida Sans Unicode’,’Trebuchet MS’,Sans-serif”;

color:#333333;

line-height:1em; letter-spacing:.1em;

border-bottom: 1px solid #cccccc;}



.footer-column ul { list-style:none; margin:0 0 0; padding:0 0 0;}



.footer-column ul li {

background: url(http://i421.photobucket.com/albums/pp296/rnbutpur/bullet-1.gif) no-repeat;

margin:0 0 0; padding-left: 16px;

padding-bottom: 0.5em; line-height:1.2em;}



.footer-column .widget {margin:0 0 .5em; padding:0 0 1em;}


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



και μην ξεχνάτε ότι:



Το σχόλιό σας είναι η επιβράβευσή μου!




Rss Feed Ετικετών – Add Labels Rss Feed Link Button To All Your Blogger Labels



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Θέλετε να δώσετε τη δυνατότητα στους επισκέπτες σας να εγγράφονται σε συγεκριμένες ετικέτες που τους ενδιαφέρουν χωρίς να χρειάζεται να εγγράφονται σε όλο το site σας? Ναι αυτό μπορεί να γίνει, φτιάχνοντας μια ροή δεδομένων (rss feed) για κάθε ετικέτα σας. Αυτό το hack είναι πολύ χρήσιμο για blogs που έχουν πολύπλευρη θεματολογία.



Πάμε να δούμε πως θα το κάνουμε.



Καταρχίν πρέπει να έχετε στο blog σας, το gadget των ετικετών.

Αν δεν το έχετε βάλει, βάλτε το τώρα από Σχεδίαση>Προσθήκη gadget>Ετικέτες



Log in to your blogger account from http://draft.blogger.com/home (ΝΟ blogger.com)



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



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



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



Πάντα με ctrl+F ψάξτε για τους παρακάτω κωδικούς:


<b:loop values=’data:labels’ var=’label’>

<li>

<b:if cond=’data:blog.url == data:label.url’>

<span expr:dir=’data:blog.languageDirection’><data:label.name/></span>

<b:else/>

<a expr:dir=’data:blog.languageDirection’ expr:href=’data:label.url’><data:label.name/></a>

</b:if>

<span dir=’ltr’/>

</li>

</b:loop>



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


<b:loop values=’data:labels’ var=’label’>

<li>


<a expr:href=’data:blog.homepageUrl + "feeds/posts/default/-/" + data:label.name’><img alt=’Subscribe’ src=’http://www.feedburner.com/fb/images/pub/feed-icon16x16.png‘ style=’vertical-align:middle;border:0’/></a>



<b:if cond=’data:blog.url == data:label.url’>

<span expr:dir=’data:blog.languageDirection’><data:label.name/></span>

<b:else/>

<a expr:dir=’data:blog.languageDirection’ expr:href=’data:label.url’><data:label.name/></a>

</b:if>

<span dir=’ltr’/>

</li>

</b:loop>



Τώρα αριστερά κάθε ετικέτας έχουμε βάλει το εικονίδιο rss.

Αν θέλετε να μπει το εικονίδιο δεξιά αντί για αριστερά, αντικαταστήστε τους παρα-παραπάνω κωδικούς, με τους παρακάτω, αντί για τους παραπάνω.

(διαβάστε το πολλές φορές μην μπερδευτείτε’ χαχα)


<b:loop values=’data:labels’ var=’label’>

<li>

<b:if cond=’data:blog.url == data:label.url’>

<span expr:dir=’data:blog.languageDirection’><data:label.name/></span>

<b:else/>

<a expr:dir=’data:blog.languageDirection’ expr:href=’data:label.url’><data:label.name/></a>

</b:if>

<span dir=’ltr’/>


<a expr:href=’data:blog.homepageUrl + "feeds/posts/default/-/" + data:label.name’><img alt=’Subscribe’ src=’http://www.feedburner.com/fb/images/pub/feed-icon16x16.png‘ style=’vertical-align:middle;border:0’/></a>



</li>

</b:loop>



Επιλέξτε αν το θέλετε δεξιά ή αριστερά και βάλτε τους αντίστοιχους κωδικούς.

Σε κάθε περίπτωση αποθηκεύστε το πρότυπό σας, αφού τελειώσετε.



Ουσιαστικά εμείς έχουμε πάρει το κομμάτι κώδικα που αφορά τις ετικέτες και το έχουμε “χακάρει”, βάζοντας τους κόκκινους κωδικούς.



Έχουμε βάλει το κλασσικό πορτοκαλί εικονίδιο του rss σε διαστάσεις 16×16. Αν και δεν σας το προτείνω, αν θέλετε μπορείτε να το αλλάξετε.



Τώρα είναι πολύ πιο εύκολο για τους επισκέπτες σας να εγγραφτούν στην αγαπημένη τους ετικέτα στο blog σας.



Αφήστε κανένα σχόλιο με καμιά τυχον απορία ή ένα απλό οκ αν όλα πήγαν οκ.



Ανάρτηση στο fbw (FaceBook Wall) για όποιον το επιθυμεί με το πάτημα του παρακάτω κουμπιού: