اضافة شريط مع التاريخ أسفل القائمة الرئيسية بتقنية css فقط على مدونتنا

السلام عليكم ورحمة الله تعالى وبركاته على مدونة المحترف إسماعيل للمعلوميات في موضوع جديد حول اضافة شريط مع التاريخ أسفل القائمة الرئيسية بتقنية css لمدونات بلوجر وهذه الإضافة متوفرة فقط على مدونتنا فقط لن أطيل عليكم الكلام وسنمر مباشرة إلى طريقة التركيب.

معاينة
إضغط للمشاهدة

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

1. اذهب إلى لوحة التحكم ثم تحرير Html.
2. قم بالبحث بإستعمال CTRL+F عن الوسم </head> .
3. ثم ضع هذه الأكواد فوقها مباشرة

<style>
#opsdevme_bar {
display: block;
text-align: center;
line-height: 1.6em;
box-shadow: 0px 0px 3px 5px rgba(255, 255, 255, 0.42);
padding: 8px 20px;
background: #222222;
color: #fff;
position: relative;
margin: 0 auto 20px 0;
border-radius: 2px;
margin-top: 10px;
}
#close_opsdevme_bar {
background: #CB2027;
border-left: double;
display: inline-block;
cursor: pointer;
padding: 8px 15px;
position: absolute;
top: 0px;
right: 0;
font-size: 18px;
border-radius: 0 3px 3px 0;
}
#sidebar-opsdevme {position:relative;transition:all .5s ease-out}
#opsdevme_bar{display:block;text-align:center;line-height:1.6em;box-shadow:0px 0px 3px 5px rgba(255, 255, 255, 0.42);
padding:8px 20px;background:#222222;color:#fff;position:relative;margin:0 auto 20px 0;border-radius:2px;margin-top: 10px;}
#opsdevme_bar a{background: #222222;
color: #FFFFFF;
padding: 2px 6px;
border-radius: 4px;
margin-left: 5px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 1px 3px 15px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);}
#close_opsdevme_bar {background:#CB2027;border-left: double;display:inline-block;cursor:pointer;padding:8px 15px;position:absolute;top:0px;right:0;font-weight:bold;font-size:25px;border-radius:0 3px 3px 0;}
.today-date{float: left;
padding: 4px 10px;
background: #fff;
font-size: 12px;
color: #34495E;
border-radius: 2px;
-moz-border-radius: 2px;
margin: -4px 0px 0 -16px;}
.comments .comments-content .icon.blog-author {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVPSSx-7fDaFrwOtUtLhfLRuUb8O84NR5r6pe6ZU9k5oNSb6-37HebScRBBsY4oLgPdc2vJQAhP0Dk4gWX7rZgdw7fRFUWNj4JBbDV2pauOH4faCQLyKADtPbALwsSciqyRjxzsPbcfg9p/s1600/admincomments.png") no-repeat scroll center rgba(0, 0, 0, 0);
    display: inline-block;
}

.comments .comments-content .icon.blog-author {
    display: inline-block;
    height: 18px;
    margin: 0 6px -4px 0;
    width: 18px;
}
i.fa.fa-calendar {
background-color: #CB2027;
padding: 4px 5px 4px 5px;
color: white;
border-radius: 3px 3px 3px 3px;
}
i.fa.fa-user {
    background-color: #CB2027;
    padding: 4px 5px 4px 5px;
    color: white;
    border-radius: 3px 3px 3px 3px;
}
i.fa.fa-tags {
    background-color: #CB2027;
    padding: 4px 5px 4px 5px;
    color: white;
    border-radius: 3px 3px 3px 3px;
}
i.fa.fa-comments {
    background-color: #CB2027;
    padding: 4px 5px 4px 5px;
    color: white;
    border-radius: 3px 3px 3px 3px;
}
      </style>

1. بعد ذلك قم بوضع الكود التالي قوق </body>
2. وهذا الكود هو المسؤول على إخفاء الإضافة عند الضغط على إغلاق

<script type="text/javascript">



var button=document.querySelector("#close_opsdevme_bar");button.addEventListener("click",function(){var t=document.querySelector(button.getAttribute("data-target"));t.style.display="none"==t.style.display?"block":"none"});</script>

1. ويتبقى لنا الكود الأخير وهو لتفعيل الإضافة
2. ويمكننا إضافته في المكان الذي تريد فيها ظهور الإضافة
3. أي في أي مكان بالقالب

<div id="opsdevme_bar">مدونة المحترف إسماعيل تتمنى لكم رمضان مبارك سعيد
<span class="today-date">
<i class="fa fa-calendar"></i>
<script type="text/javascript">
//<![CDATA[
eval(function(p,a,c,k,e,d){e=function(c){return c};if(!''.replace(/^/,String)){while(c--){d[c]=k[c]||c}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('13 5(){23(3=0;3<5.11.14;3++)15[3+1]=5.11[3]}2 12=10 5(\'يناير\',\'فبراير\',\'مارس\',\'أبريل\',\'مايو\',\'يونيو\',\'يوليو\',\'أغسطس\',\'سبتمبر\',\'أكتوبر\',\'نوفمبر\',\'ديسمبر\');2 6=10 16();2 7=6.24();2 9=6.17()+1;2 4=6.21();2 8=(4<20)?4+18:4;22.19(12[9]+" "+7+", "+8);',10,25,'||var|i|yy|makeArray|date|day|year|month|new|arguments|months|function|length|this|Date|getMonth|1900|write|1000|getYear|document|for|getDate'.split('|'),0,{}))
//]]></script>
</span>
<span data-target="#opsdevme_bar" id="close_opsdevme_bar">إغلاق</span></div>

• مبروك عليك الإضافة.
• وهذا كل شئ فى موضوع اليوم اذا واجهتك أي مشكلة فى تركيب الإضافة او تريد التعديل على أي شيء ، فباب التعليقات مفتوح لا تتردد ! وادعمنا بمشاركة التدوينة ليستفيد منها الجميع