Σάββατο 22 Σεπτεμβρίου 2012

Προσθήκη ημερομηνίας στα πλάγια της ανάρτησης

Print and PDF

Καλημέρα BlogyTricks Fans, έχουμε καιρό να ανεβάσουμε μια ανάρτηση και αυτό, λόγο των υποχρεώσεων μας και φυσικά λόγο των διακοπών. Επιστρέφουμε όμως δυναμικά και φέρνουμε μαζί μας (εκτός από τα κουβαδάκια μας) ένα πολλή ωραίο Tip που θα ομορφύνει κατά πολύ το Blog σας, αφού είναι πολλή κομψό και στιλάτο. (Το Video Tutorial βρίσκεται πάντα στο τέλος της ανάρτησης).

1) Πρώτα, συνδεθείτε στο λογαριασμό σας Blogger.
2) Μετά πατήστε Ρυθμίσεις - Γλωσσά και μορφοποίηση αλλάξτε την ημερομηνία σε (πχ 22 Σεπτ 2012) όπως βλέπετε στην παρακάτω εικόνα και τέλος πατήστε αποθήκευση των ρυθμίσεων. 
3) Κάντε κλικ στο Σχεδίαση. και επιλέξτε Επεξεργασία HTML.

Προσοχή:
  Πριν ξεκινήσουμε:
- Πρέπει να είστε προσεκτικοί κατά την αλλαγή του προτύπου σας.
- Πριν κάνετε οποιαδήποτε αλλαγή, αποθηκεύστε το πρότυπο σας σε ασφαλή μέρος (Στον υπολογιστή σας).

*Πατήστε ακόμα Επέκταση προτύπων γραφικών στοιχείων όπου θα βρείτε πάνω-δεξιά.

4) Ψάξτε για τον παρακάτω κώδικα (Ctl+F):

<h2 class='date-header'><span><data:post.dateHeader/></span></h2>

5) Αντικαταστήστε τον παραπάνω κώδικα (Αν υπάρχει δύο φορές αντικαταστήστε τον και τις δύο) με τον παρακάτω κώδικα.

<div id='Date'>
<script>changeDate(&#39;<data:post.dateHeader/>&#39;);</script>
</div>
<b:else/>
<div id='Date'>
<script>changeDate(&#39;&#39;);</script>
</div>

6) Τώρα ψάξτε για το </head> και επικολλήστε από πάνω του τον παρακάτω κώδικα.

<script type='text/javascript'>
//<![CDATA[
var DateCalendar;
function changeDate(d){
if (d == "") {
d = DateCalendar;
}
var da = d.split(' ');
day = "<strong class='date_day'>"+da[0]+"</strong>";
month = "<strong class='date_month'>"+da[1].slice(0,3)+"</strong>";
year = "<strong class='date_year'>"+da[2]+"</strong>";
document.write(month+day+year);
DateCalendar = d;
}
//]]>
</script>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Calendar style date
----------------------------------------------- */
#Date {
background: transparent url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1XWzdiRmq0XNNz3TSYErs9MLzB5IAqsb4lGTHjRvcYO0xPBP2Fwc8_FhUoxaf8UXSKuTRAmP3pf5pTwkAdB5cLDbywn9IJxIH0_LIbbKZrdzutbMhkA4YS7Vm017_acHv5T6zFyiZY3Zf/s1600/calendar07.png) no-repeat;
display: block;
width:60px;
height:60px;
float: left;
margin: 15px 2px 0
-108px;
padding: 0 0 8px 0px;
border: 0;
text-transform: uppercase;
}
.date_month {
display: block;
font-size: 15px;
font-weight:bold;
margin-top:-1px;
text-align:center;
color:#ffffff; /* Month's color */
}
.date_day {
display: block;
font-size: 28px;
font-weight:bold;
margin-top:-8px;
text-align:center;
color:#282828; /* Day's color */
}
.date_year {
display: block;
font-size: 10px;
margin-top:-8px;
text-align:center;
color:#282828; /* Year's color */
}
</style>
</b:if>

Σημιώσεις:

Μπορείτε να αλλάξετε τα κόκκινα γράμματα, τα μπλε γράμματα και τα πράσινα γράμματα.
Τα
κόκκινα γράμματα είναι οι αριθμοί όπου μπορείτε να αλλάξετε σε περίπτωση που δεν σας εμφανίζεται σωστά η ημερομηνία.
Τα
μπλε γράμματα είναι η διεύθυνση (url) της εικόνας του Background.
Τα πράσινα γράμματα είναι οι κώδικες από τα χρώματα των αριθμών.
Κώδικες χρωμάτων μπορείτε να βρείτε σε αυτήν την σελίδα: www.color-hex.com

- Για το Demo ειναι το παρακατω βιντεο:

 
- Για ότι πρόβλημα υπάρξει μην διστάσετε να επικοινωνήστε μαζί μας μεσώ του
κουμπιού "Επικοινωνία" που θα βρείτε πάνω πάνω.
  
-Άμα σας αρέσουν οι αναρτήσεις μας παρακαλώ προωθήστε την ιστοσελίδα μας ή πατήστε το κουμπί παρακολούθηση στα δεξιά.
Ευχαριστούμε.

Copyrights: BlogyTricks© 

Πηγη κωδικα: helplogger

3 σχόλια :

  1. Billy Καλησπέρα. Τα εφάρμοσα όλα όμως η ημερομηνία βγαίνει υπερβολικά στην άκρη όπου και δεν μπορεί να φανεί. http://imageshack.us/photo/my-images/809/screenshot001kh.jpg/

    Επί τη ευκαιρία, μήπως μπορείς να ανεβάσεις και μια ανάρτηση για το πως να βάζουμε δικό μας φόντο? Ευχαριστώ εκ των προτέρων :)

    ΑπάντησηΔιαγραφή
  2. Καλησπέρα, για να ρυθμίσεις το widget πρέπει να πειραματιστείς με τον παρακάτω κώδικα:

    margin: 15px 2px 0 -108px;
    padding: 0 0 8px 0px;

    Επίσης όταν λες φόντο εννοείς το Background και αν ναι είναι πολύ εύκολο απλά πηγαίνεις στο Πρότυπο-Προσαρμογή και μετά πας εκεί που λέει Φόντο.
    Για ότι άλλο με χρειάζεσαι στείλε μου προσωπικό email για να σε βοηθήσω.

    ΑπάντησηΔιαγραφή
  3. Καλησπερα εχω το εξης προβλημα δεν εμφανιζετε καθολου και εχω παιζει με το -108px κ παλι δεν εβγαλα ακρη το βλογκ ειναι το http://freshsnews.blogspot.gr/

    ΑπάντησηΔιαγραφή