اضافة شريط تنبيهات علوي على بلوجر مع زر الاخفاء و الاظهار 2019

January 28, 2019

اضافة شريط تنبيهات علوي على بلوجر مع زر الاخفاء و الاظهار 2019

يتم استخدام شريط التنبيهات لتسليط الضوء على الأشياء الهامة في مدونات بلوجر.

و لربما صادفت مدونون يستعملون شريط تنبيهي للزوار لاظهار نموذج التسجيل بالقائمة البريدية او ازرار التواصل الاجتماعي او روابط مهمة و غيرها.
فهو مهم للفت انتباه الزائر لشيء مهم كروابط لمواضيع مهمة 😊 و في هذا الموضوع اتيت و معي طريقة اضافة شريط تنبيهي للزار للاظهار روابط مهمة للزائر.

مميزات الاداة.

1) خفيفة و أنيقة المظهر.
2) زر الاخفاء و الاظهار.
7) ثابتة التصميم بالاعلى تنزل مع نزول المستخدم.
8) تصميم مستجيب ولا يظهر على الأجهزة المحمولة.

لذا اذا كنت مهتم باضافة شريط التنبيهات فما عليك سوى اتباع الخطوات التالية.
1# قم بتسجيل الدخول الى منصة بلوجر
#2 اختر المدونة المراد عمل لها شريط اعلام تنبيهي علوي
3# ابحث عن الوسم <head> و اضف اسفله هذا الكود:

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

مكتبة خطوط الـ awesome اذا كان الكود مضاف سابقا في اكواد القالب احذفه و اضف هذا الكود.

4# مباشرة بعد اضافة الكود الذي بالاعلى اضف اسفله الكود التالي:

مكتبة الـ jquery من جوجل اذا كان لديك مثل هذا الكود في القالب احذفه و اضف بدله هذا الكود.

5# الان ابحث عن الوسم ]]></b:skin> و اضف فوقه هذه الاكواد:

#knzma3lomati_NotificationBar_wrap {
  margin:0;
  padding:0;
  position:relative;
  width:100%;
  z-index:9999999;
}
.knzma3lomati_NotificationBar {
  color: #fff;
  position: relative;
  background: #595959; /*--Change Background Color Here--*/
  width: 100%;
  padding: 0;
  text-align: center;
  font-family: Arial Black, sans-serif;
  text-shadow: 0px -1px 0px #000;
  margin: 0px auto;
  height: 40px;
  box-shadow: 0px 1px 5px #616161;
}
.knzma3lomati_NotificationBar label:hover {
  cursor: pointer;
}
.knzma3lomati_NotificationBar label {
  text-align: center;
  background: #FF5353; /*--Change Button Background Color Here--*/
  color: #FFF;
  border: 0;
  font-family: fontawesome;
  text-shadow: 0px -1px 0px #EC0000;
  font-size: 26px;
  -webkit-transition: 0.3s all ease-in-out;
  -moz-transition: 0.3s all ease-in-out;
  -ms-transition: 0.3s all ease-in-out;
  -o-transition: 0.3s all ease-in-out;
  transition: 0.3s all ease-in-out;
  position: relative;
  transition-delay: 0s;
  margin-top: 0;
  float: Right;
  height: 35px !important;
  width: 30px;
  overflow: hidden !important;
  z-index: 9999;
  padding-top: 5px;
}
input.knzma3lomati_ShowHideButtonBar:checked + label {
  transform-origin: 12% 50% !important;
  transform: translateY(0px) rotateX(190deg);
  -webkit-transform: translateY(0px) rotateX(190deg);
  -moz-transform: translateY(0px) rotateX(190deg);
  -ms-transform: translateY(0px) rotateX(190deg);
  -o-transform: translateY(0px) rotateX(190deg);
  -webkit-transition-delay: 0.3s;
  -moz-transition-delay: 0.3s;
  -ms-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  transition-delay: 0.3s;
  margin-top: 47px;
  border: 0;
}
input.knzma3lomati_ShowHideButtonBar ~ .knzma3lomati_ContentArea {
  position: relative;
  overflow: hidden;
  height: 40px;
  -webkit-transition: 0.5s all ease-in-out;
  -moz-transition: 0.5s all ease-in-out;
  -ms-transition: 0.5s all ease-in-out;
  -o-transition: 0.5s all ease-in-out;
  transition: 0.5s all ease-in-out;
}
input.knzma3lomati_ShowHideButtonBar:checked ~ .knzma3lomati_ContentArea {
  margin-top: -50px;
}
input.knzma3lomati_ShowHideButtonBar {
  display: none;
}
/*--Change FontAwesome Icons Style Here--*/
.knzma3lomati_ContentArea .fa {
  font-size: 16px;
  font-weight: normal;
  color: #FFFFFF;
  font-family: FontAwesome;
  border-bottom: 1px solid #FFFFFF;
  margin-left: 5px;
}
.knzma3lomati_ContentArea ul {
  margin: 0;
  padding: 0;
  list-style: none;
  list-style-type: none;
  height: 100%;
}
.knzma3lomati_ContentArea ul > li {
  list-style: none;
  font-size: 14px;
  font-weight: bold;
  font-family: sans-serif;
  text-decoration: none;
  padding-top: 10px;
  margin-Right: 10px;
  display: inline-block;
}
.knzma3lomati_ContentArea ul > li > a {
  color: #FFD946;   /*--Change Links Color Here--*/
  text-decoration: none;
  font-family: cursive;
  font-weight: normal;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.knzma3lomati_ContentArea ul > li > a:hover {
  color: #EFCB41 !important;  /*--Change Links Hover Color Here--*/
}
.bs_sticking {
  position:fixed !important;
  width: 100% !important;
}
@media only screen and (max-width:479px) {
#knzma3lomati_NotificationBar_wrap, .knzma3lomati_NotificationBar {
  display: none !important;
}
}

5# و في الخطوة الخامسة سنضيف اكواد HTML في المكان المناسب، و المكان المناسب هو في راس المدونة لهذا قم بالبحث عن الوسم <body> و اضف اسفله مباشرة هذه الاكواد:

<div id='knzma3lomati_NotificationBar_wrap'>
<div class='knzma3lomati_NotificationBar'>
<input class='knzma3lomati_ShowHideButtonBar' id='tbn' type='checkbox'/>
<label for='tbn'><i class='fa fa-chevron-circle-up'/></label>
<div class='knzma3lomati_ContentArea'>
<ul>
<li>
<i class='fa fa-signal'/> اخترنا لكم: <a href='#Your-Link1'>Text 1</a>
</li>
<li>
<i class='fa fa-fire'/> شائع: <a href='#Your-Link2'>Text 2</a>
</li>
<li>
<i class='fa fa-rss'/> إقرا ايضا: <a href='#Your-Link3'>Text 3</a>
</li>
</ul>
</div>
</div>
</div>

و غير ما يجب تغييره:

اللون غيره بما تريد ان تشير اليه.

اللون غيره الى نص الرابط

اللون غيره الى رابط التي تريد ان ينتقل اليه الزائر عندما يضغط على النص

6# و اخر خطوة هي اضافة اكواد الجافا سكريبت، لاخر مرة ابحث عن الوسم </body> و اضف فوقه مباشرة الاكواد التالية:

<script type='text/javascript'>
//<![CDATA[
bs_makeSticky("knzma3lomati_NotificationBar_wrap"); // enter your widget ID here
function bs_makeSticky(elem) {
    var bs_sticky = document.getElementById(elem);
    var scrollee = document.createElement("div");
    bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
    var iniClass = bs_sticky.className + ' bs_sticky';
    window.addEventListener('scroll', bs_sticking, false);
    function bs_sticking() {
        var rect = scrollee.getBoundingClientRect();
        if (rect.top < 0) {
            bs_sticky.className = iniClass + ' bs_sticking';
            bs_sticky.style.width = "100%";
        } else {
            bs_sticky.className = iniClass;
        }
    }
}
//]]>
</script>

و اخيرا قم بالحفظ و معاينة المدونة.

Search This Blog

Seo