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

شارك مع اصدقائك:

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

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

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

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

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

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

مكتبة خطوط الـ 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> و اضف اسفله مباشرة هذه الاكواد:

<ul>

<li>

<i class='fa fa-signal'/> اخترنا لكم: <a href='#Your-Link1'>Text 1</a>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

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

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

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

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

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

//<![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';