Καλημέρα 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('<data:post.dateHeader/>');</script>
</div>
<b:else/>
<div id='Date'>
<script>changeDate('');</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 != "static_page"'>
<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
.
