اضافة شريط تنبية متحرك احترافى لمدونات بلوجر كتبها: المدون التقني - الخبير عامر بشير

Admin Amer

أكتوبر 04, 2017

0 تعليقات

شاركه غرد جوجل+

السلام عليكم ورحمة الله تعالى وبركاته أهلا بكم متابعي وأصدقاء الخبير عامر بشير ، مرحبا بك أخي / أختي القاريء (ة) في موضوع تقني جديد لهذا اليوم، نتمنى لكم الاستفادة ومتابعة ممتعة للجميع.

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

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

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

1. إبحث على  وضع هذا الكود فوقه

<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>

1. الان إبحث على  وضع هذا تحته

<div class='bar_abdoutech'><span class='abdoutech_com'>مهم!</span>يجب الاشتراك في المدونة لكي يصلك كل جديد من اضافات بلوجر<span class='bar-but'><a href='https://www.blogger.com/follow.g?blogID=3722130491596449320'>من هنا</a></span><i class='fa fa-times'></i></div>

مع تغيير كلمات و الرابط

اذا اعجبتك الاضافة فيوجد المزيد في المدونة و القادم افضل انشالله ما عليك سوى الاشتراك في المدونة و انتظر اخر الاضافات

الكلمات المفتاحية :

Written by you: Technical blogger AMER BACHIR

URL Of Post:

https://ab-expert.blogspot.com/2017/10/blog-post_4.html

HTML Code Of Post:

<a href="https://ab-expert.blogspot.com/2017/10/blog-post_4.html">اضافة شريط تنبية متحرك احترافى لمدونات بلوجر كتبها: المدون التقني - الخبير عامر بشير</a>