كيفية إنشاء التاريخ يدوياً بتقنية CSS , HTML لمدونات بلوجر

اهلاً بكم زوار ومتابعي " مدونة هوم بلوجر " الكرام 

اليوم سوف نناقش كيف يمكننا ان نظهر التاريخ ويمكنك وضعه على الزاوية اليسار أو اليمين في مشاركتك وطبعاً هذه الإضافة يدوية  بتقنية CSS , THML والتاريخ لا يتغير أوتوماتيكياً  بل أنت تضعه في كل مشاركة من أجل توثيق مشاركاتك بالتاريخ الذي كتبت به المشاركة .

أنقر للمعاينة
إنشاء التاريخ يدوياً

- طريقة التركيب :

1- ادخل إلى مدونتك  ثم اختر لوحة التحكم .

2- من لوحة التحكم اختر قالب >>> تحرير قالب .

3- ابحث عن الوسم : ]]></b:skin>

4-  ضع الكود التالي فوقه .

 p.diary{
font-family: 'Prosto One', cursive; /*Prosto One is available at http://www.google.com/webfonts*/
position: relative; /*for more info on positioning see the Support section below*/
display: inline-block; /*prevent the paragraph from spanning the width of container. You could instead use a fixed width, but this way is neater*/
height: 100px;
padding:5px;
background: #dcdac6;
/*apply a small drop shadow to the date*/
-webkit-box-shadow: 3px 3px 4px rgba(99,99,99,.8);
-moz-box-shadow: 3px 3px 4px rgba(99,99,99,.8);
box-shadow: 3px 3px 4px rgba(99,99,99,.8);
/*give the text a drop shadow*/
text-shadow: 2px 2px 5px #919191;
}
/**NEXT STYLE THE DAY, MONTH AND YEAR**/
/*Day*/
p.diary .day{
position: absolute; /*removes the date from the normal flow, allowing the month & year to be wrapped around it*/
top: 10px; 
left:30px;
font-size: 60px;
color: #aa0e3a;
}
/*Month*/
p.diary .month{
position: relative;
top: 60px; /*size of .day font and its shadow*/
left: 20px;
font-size:25px;
color: #3b788c;
}
/*Year*/
p.diary .year{
position: relative;
display: inline-block;
top: 40px; 
left:0;
font-size:35px;
color: #ca4b29;
/*rotate the year by 90 degrees anticlockwise*/
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
} 

5- احفظ القالب .

- طريقة استخدام  التاريخ يدوياً في المشاركة :
1- استخدم الكود التالي في وضعية THML .

 <p class="diary">
<span class="day">27</span>
<span class="month">November</span>
<span class="year">2015</span>
</p> 

2- التعديلات :
- عدل تاريخ اليوم "day"
- عدل الشهر "month"
- عدل السنة "year"

وأخيراً نترككم برعاية الله وتوفيقه