إضافة شريط تنبيهات شفاف ثابت أسفل مدونات بلوجر

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

الخطوة الأولى: الدخول الى قالب ثم تعديل HTML والبحث عن الكود التالى

</body>

 ثم نضيف قبله أو فوقه الكود التالى بعد التعديل على الكود بتغيير الكلمات الملونة بما يناسب مدونتك ويمكنك أيضا التغيير فى حجم ولون الخط المكتوب وغيره من الخصائص المفيدة لمدونتك.

<!-- Notification code start, info - http://www.abu-iyad.com -->
<style type='text/css'>
#ut-sticky
{
background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4mQrr1NnLuS6TXkiVh-FfYXp0FgBZSZmufti7CqfjAWSvQtWdecILvaVSes-uMoBDYJ1bQY9KPIBcEqsb0c34zFvFUBj9TcpGxR3mu5ITNwANz65G0Xq6T7tvw-vnGl4N39SJzpZPsvRD/s1600/ut-bg.png&#39;) repeat;
color:#fff;
text-align: center;
margin:0 auto;
border-top: 1px solid #fff;
height:28px;
font-size:13px; 
position:fixed;
bottom:0;
z-index:999;
width:95%;
border-top-left-radius:15px;
border-top-right-radius:15px;
display:block;
font-weight: bold;
font-family: arial,&quot;Helvetica&quot;;
font-color:#fff;
}
#ut-sticky:hover
{background:#333;}
#ut-sticky p{line-height:5px; font-size:13px; text-align:center; width:95%; float:left;}
#ut-sticky p a{ text-decoration:underline; color:#FFFF33;}
.ut-cross{display:block; position:relative; right:15px; float:right;}
.ut-cross a{font-size:18px; font-weight:bold; font-family:&quot;Arial&quot;;color:#FF0000; line-height:30px;}
</style>
<div id='ut-sticky'>
<p>شريط تنبيهات شفاف لمدونات بلوجر <a href='http://eslam-arabs.blogspot' target='_blank'>مدونةشباب العرب  لدعم بلوجر.. تابع أخبار بلوجر أول بأول</a></p>
<div class='ut-cross'><a href='javascript:hide_cross();'>X</a></div>
</div>
<script language='JavaScript'>
function hide_cross() {
crosstbox = document.getElementById(&quot;ut-sticky&quot;);
crosstbox.style.visibility = &#39;hidden&#39;;
}
</script>
<!-- End of Notification code, info - http://www.abu-iyad.com -->

قم بحفظ  القالب وعاين بنفسك. وأى سؤال لا تتردد فى وضعه فى تعليقك.

• غرد
• شاركه
• شاركه
• شاركه
• شاركه

عن الكاتبHm

هذا النص الغبي ، غير مقصود لقرائته . وفقا لذلك فمن الصعب معرفة متى وأين نهايته ، لكن حتى . فإن هذا النص الغبي ، ليس مقصود لقرائته . نقطة رجوع لسطر مدونة عرب ويب ترحب بك

مقالات قد تهمك