اضافة زر تنبية متحرك احترافى لمدونات بلوجر - عالم المدون

الخميس، 13 يوليو، 2017

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

التنبيهات من تكون للكثير منا أهم الأمور لتذكير بشئ مثلا لا تذكرة أو لمعرف شئ معين لذلك فى هذا الموضوع سوف أضع لكم اضافة جديده وهى اضافة زر تنبية متحرك يعمل يدويا بمعنى أنك سوف تضع به التنبية الذى تريد أن شاهده زوار مدونتك وميزت هذا الزر أنه يتحرك بأستمرار لذلك سوف يلحظه كل زوار مدونتك .

ويمكنك وضع فى هذا الزر تنبية لأمر معين فى مدونتك أو أى شئ تريده مثل ايضا أن تريد الإعلان عن شئ معين ، وكما عرضنا من قبل على المدونة مواضيع مشابه لهذا الموضوع مثل اضافة شريط اخبارى متحرك يدويا فى بلوجر وايضا موضوع اضافة مشاركة منزلقه يدويا بشكل احترافى لمدونات بلوجر يمكنك اين الحصول عليها من المدونة وسوف تجد ايضا الكثير من الإضافات الكثيره فى قسم إضافات بلوجر نمر الأن لمعاينة الإضافة وشرح التركيب .





معاينة الإضافة وتحميل الأكواد الخاص بها


كما نقول لكم دائما يمكنك تحميل أكواد الأضافة من الرابط أسفل حتى تكون متواجد معك دائما اذا تريده فى أى وقت وأين لمن لا يريد نسخة الأكواد وتركيب الإضافة فى هذا الوقت ، ولكن سوف تحتاج مراجعت الموضوع عندما تريد تركيب الإضافة حتى تعرف كيفية التركيب .


صورة من الإضافة



شرح التركيب



  • سوف تقوم بالبحث أولا عن هذا الوسم]]></b:skin>ثم تقوم بوضع الكود التالى هذا فوقه .


#notif-wrapper{position:fixed;width:100%;z-index:999}
.blanternotif{background:#d32f2f;color:#FFF;width:50px;height:50px;border-radius:100%;position:fixed;z-index:999;bottom:45%;left:20px;-webkit-animation-duration:5s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:notifklik;animation-duration:5s;animation-iteration-count:infinite;animation-name:notifklik;transition:all 5s ease-in-out}
.blanternotif i{color:#FFF;font-size:25px;margin:11px 10px 10px 13px;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:notificon;animation-duration:2s;animation-iteration-count:infinite;animation-name:notificon;transition:all 2s ease-in-out}
@keyframes notifklik{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes notificon{0%{transform:rotate(-30deg)}50%{transform:rotate(30deg)}100%{transform:rotate(-30deg)}}
@keyframes notifbox{0%{transform:rotateZ(-45deg);visibility:visible;opacity:0;bottom:68%;left:78px}100%{transform:none;visibility:visible;opacity:1;bottom:41%;left:110px}}
.notifbox{padding:20px;border-radius:3px;position:fixed;resize:none;line-height:1.5;z-index:999;left:110px;bottom:41%;max-width:30rem;background:#d32f2f;border:1px solid #d32f2f;color:#fff;font-size:13px;box-shadow:0 1px 1px 0 rgba(0,0,0,0.07),0 1px 1px 0 rgba(0,0,0,0.06);display:inline-block;opacity:0;visibility:hidden;transition:.4s ease-in-out}
.notifbox:before{content:"";width:0;height:0;position:absolute;top:-.7px;left:-15px;border-width:8px;border-style:solid;border-color:#d32f2f #d32f2f transparent transparent;display:block}.blanterxE5CD{display:none!important}#notif-wrapper.aktif .blanterxE5CD{display:block!important;animation-name:none!important}#notif-wrapper.aktif .blanterxE7F4{display:none!important}
.notifbox.aktif{-webkit-animation-duration:1s;-webkit-animation-iteration-count:1;-webkit-animation-name:notifbox;animation-duration:1s;animation-iteration-count:1;animation-name:notifbox;transition:all 1s ease-in-out;opacity:1;visibility:visible}
@media screen and (max-width:680px){.notifbox:before{display:none}.notifbox{left:0%!important;bottom:0}@keyframes notifbox{0%{left:0!important}100%{left:0!important}}}
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}


  • وكما العادة دائما الكود الأول هذا هو كود الأستايل يمكنك التعديل عليه وتغيير الألوان أذا كان لك خبرة فى الأمر .
  • الأن أبحث عن هذا الوسم هذه المرة/headوقم بوضع هذا الكود فوقه


<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){$(".blanternotif").click(function(){$(".notifbox,#notif-wrapper").toggleClass("aktif");});});
//]]>
</script>


  • الأن مع اخر كود وسوف تقوم بوضع فوق هذا الوسم<bodyفى مدونتك


<div id='notif-wrapper'>
<a class='blanternotif' href='javascript:;' title='Notifications'><i class='material-icons blanterxE7F4'>&#59380;</i><i class='material-icons blanterxE5CD'>&#58829;</i></a>
<div class='notifbox'>
مرحبا بكم متابعى مدونة عالم المدون يمكنك الحصول على هذا الزر المتحرك من مدونة عالم المدون أكتب فقط فى جوجل عالم المدون وسوف تجد على المدونة كل ما تريد بأذن الله

</div>
</div>


  • الأن سوف يكون عليك تغيير نص التنبية ما تريد وبعدها تقوم بحفظ القالب ومبروك عليك الإضافة الجديده .


هذا كل شئ فى موضوع اليوم بالتوفيق للجميع وأنتظرونا بكل جديد بأذن الله على المدونة ، لا تنس مشاركة الموضوع حتى يتسفيد غيرك وأى مشكلة تجدها تضعها فى تعليق .

شارك الموضوع ليستفيد الجميع

مواضيع مهمه ايضا سوف تعجبك

0 تعليق على موضوع : اضافة زر تنبية متحرك احترافى لمدونات بلوجر

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

جميع الحقوق محفوظة لـ عالم المدون | قوالب بلوجر,اضافات بلوجر, دروس وشروحات بلوجر