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

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

شريط تنبيه تضع فيه رابط المدونة او رابط صفحتك او اى شى هام حول المدونة ويلفت انتباه الزائر وعندا ضغط على اخفاء الشريط ب علامة 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>

//<![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> وضع هذا تحته

هام ! تغييرالرابط

ماكس سوفت للمعلوميات

القائمة الرئيسية

الصفحات

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

أخر المواضيع من قسم : بلوجر

تعليقات

إرسال تعليق