اضافة شريط تنبيهات علوي على بلوجر مع زر الاخفاء و الاظهار 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# مباشرة بعد اضافة الكود الذي بالاعلى اضف اسفله الكود التالي:
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

    مكتبة الـ 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>

    و اخيرا قم بالحفظ و معاينة المدونة.
    شارك المقال
    Medoz
    انا محمد خالد عندي 20 سنه مدون عن التقنيه بالاخص بلوجر

    مقالات متعلقة

    إرسال تعليق