اضافة شريط تنبية متحرك احترافى لمدونات بلوجر

عبدو تكنولوجي - Abdou Technologie

4 أكتوبر 2017

السلام عليكم مرحبا بكم في مدونة عبدو تكنولوجي اليوم اقدم لكم اضافة رائعة عبارة عن شريط تنبيه تضع فيه اي جديد حول المدونة ويلفت انتباه الزائر وعندا ضغط على اخفاء الشريط ب علامة X يضهر زر اخر على شكل ↓ يعيد لك الشريط بطريقة سلسة رائعة

يمكنك معاينة الاضافة من هنا

الان نتجه لتركيب الاضافة

إبحث على </head> وضع هذا الكود فوقه

<style>
.bar_abdoutech{width: 100%;
margin: 0;
height: 50px;
display: table;
font-size: 17px;
line-height: 50px;
font-weight: 600;
-webkit-font-smoothing: antialiased;
color: rgb(255, 255, 255);
    font-family: inherit;
border-color: rgb(255, 255, 255);
background-color: #3b78e7;
box-shadow: 0 1px 3px 2px rgba(0,0,0,0.15);    
text-align: center;}
.bar_abdoutech .bar-but{font-size: 17px;
font-weight: bold;
margin-right: 25px;
background: #fff;
padding: 5px;
color: #fff;
background-color: #f2132d;
line-height: 1.05;
padding: 4px 15px;
cursor: pointer;
text-decoration: none;
border-radius: 3px;}
.bar_abdoutech .bar-but a{color:#fff;    text-decoration: none;}
.bar_abdoutech i {
float: right;
padding-right: 40px;
cursor: pointer;
line-height: 50px;
}
body{margin-top:-49.33px;}
body{margin-top:49.33px ;transition:600ms;-webkit-transition:600ms;-moz-transition:600ms;-o-transition:600ms;}
.toggleclose{top:-75px!important;}
.togglebody{margin-top:0!important;}
.fa-arrow-down {
position: fixed;
right: 30px;
top: -2px;
background:#3b78e7;
color: #FFFFFF;
width: 40px;
height: 30px;
border-radius: 3px;
line-height: 12px!important;
padding-top: 10px;
padding-right: 0!important;
}
.bar_abdoutech{z-index:99999;top:0;transition:600ms;-webkit-transition:600ms;-moz-transition:600ms;-o-transition:600ms;position:fixed}
.abdoutech_com {
color:#f2132d;
margin-left:10px;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    
    -moz-animation-name: blinker;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    
    animation-name: blinker;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@-moz-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}
@media screen and (max-width:800px) {
.bar_abdoutech{display:none;}
body {
    margin-top: 0;
    }
}
</style>
<script>
//<![CDATA[

jQuery(document).ready(function(){

jQuery( '.bar_abdoutech i' ).click(function() {
  jQuery( '.bar_abdoutech' ).toggleClass( 'toggleclose' );
  jQuery( 'body' ).toggleClass( 'togglebody' );
  jQuery( '.bar_abdoutech i' ).toggleClass( 'fa-times' );
  jQuery( '.bar_abdoutech i' ).toggleClass( 'fa-arrow-down' );

});

});
//]]>
</script>

الان إبحث على <body> وضع هذا تحته

يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع

Mohamed Jiari 5 أكتوبر 2017 في 9:48 م

اضافة جميلة جدااا
شكرا لك اخي
- عبدو تكنولوجي - Abdou Technologie 6 أكتوبر 2017 في 3:16 م
  
  انت الاجمل 😍😍😘

YousefEbrahim 24 أكتوبر 2017 في 10:47 ص

شكرا لك :)
- عبدو تكنولوجي - Abdou Technologie 24 أكتوبر 2017 في 1:06 م
  
  💓❤️

MosDos 12 يوليو 2018 في 9:46 ص

شكراً جزيلاً :)
ولكن اعتقد أن رابط المعاينة غير سليم