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

إعلان أدسنس

آخر المواضيع

breaking/قوالب بلوجر/9
مقالات

الأحد، 23 يوليو، 2017

يوليو 23, 2017

تكبير النص تصغير النص أعادة للحجم الطبيعي




سلام الله عليكم متابعينا أعزاء اليوم جأت لكم بأضاقة رائعة هي زر تنبيه منبثق من تصميم مدونة عالم المدون


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


ننتقل الان لطريقة التركيب



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



#notif-wrapper{position:fixed;width:100%;z-index:999}
.blanternotif{background:#243750;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:#243750;border:1px solid #243750;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:#243750 #243750 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>

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


إرسال تعليق

مقالات