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

 السلام عليكم اليوم أقدم لكم طريقة  إضافة زر متحرك متعدد الإستخذام بشكل إحترافي في مدونات بلوجر عبر css + js + html خاصة المواقع التي تقوم بنشر البرامج أو القوالب بلوجر أو تحميل تطبيقات لدى فلا بد ان تستعمل هذا الزر والذي يمكنك تعديله بسهولة ليناسب ذوقك  ليظهر إحترافية في الموقع عن طريق إضافة تأثير الضغط .

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

معايـنـة :

هذا نص تجريبي

   طريقة إضافة أزرار متحركة احترافية:

اولا : لتركيب الإضافة توجه للمظهر ومن ثم تحرير HTML ابحث عن الوسم </body> و اضف الكود التالي فوقه :

<script>
document.querySelector('.ti9-btn').addEventListener('click', (evt) => {
  evt.target.classList.add('loading')
  setTimeout(() => {
    evt.target.classList.remove('loading')
  }, 3000);
})
</script> 

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

 .ti9-btn { background-image: linear-gradient(to right, #3A38AB 0%, #2575fc 100%);   border: 0px solid #150485;border-radius: 35px;font-size: 1rem;font-weight: bold;color: #fff;display: flex;align-items: center;justify-content: center;cursor: pointer;outline: none;transition: all 0.25s ease;width: 210px;position: relative;height: 60px;overflow: hidden;}
.ti9-btn:not(.loading):hover {  box-shadow: 0px 2px 15px 0px #2575fc;}
.ti9-btn:not(.loading):hover i {  transform: translate(7px);}
.ti9-btn i {  font-size: 1.45rem;position: absolute;left: 0px;pointer-events: none;z-index: 10;background: inherit;width: 60px;height: 60px;display: flex;align-items: center;justify-content: center;border-radius: 50%;transition: all 0.25s ease;}
.ti9-btn .text{  width:130px;display: block;position: absolute;left:60px;pointer-events: none;transition: all 0.25s ease;}
.loading-animate{  position:absolute;width:60px;height:60px;z-index:100;border-radius: 50%;top: 0;left:0px;display:flex;align-items: center;justify-content: center;pointer-events: none;opacity: 0;transition: all 0.25s ease;}
.loading-animate:after{  content:'';width:44px;height:44px;border-radius: 50%;border:3px solid transparent;border-left: 3px solid #fff;animation:loading infinite 0.8s ease 0.05s;position:absolute;}
.loading-animate:before{  content:'';width:44px;height:44px;border-radius: 50%;border:3px solid transparent;border-left: 3px solid #fff;animation:loading infinite 0.8s linear;position:absolute;opacity: 0.6;}
.ti9-btn.loading{  width:60px;}
.ti9-btn.loading i{  transform:rotate(-90deg);padding-bottom: 4px;padding-left:3px;}
.ti9-btn.loading .text{  transform:translate(-140px);}
.ti9-btn.loading .loading-animate{  opacity: 1;}
@keyframes loading{  0%{    transform:rotate(0deg);}100%{transform:rotate(360deg);  }} 

هذا الكود مسؤول عن ظهور الأيقونات، ضعه فوق </head> : 

<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>  

في حالة كان موجودا من قبل فلا داعي لإضافته. 

تالثا : الان قم بحفظ التعديل الذي قمت به ولكي تتمكن من استخدام الازرار في المواضيع عند كتابة موضوع انتقل الى وضع HTML و قم باضافة الكود التالي لتظهر معك الاضافة:

 <a class="ti9-btn" href="#">
<i class="fa fa-cloud-download" aria-hidden="true"></i>
<span class="text" href>
  معاينة الإضافة
</span>
<div class="loading-animate"></div>
</a>

   التعديل على الأكواد

استبدل رمز  #  بالرابط الذي تريد ان يتوجه إليه الزائر

إن كنت تريد التعديل على الأيقونات يمكنك التـوجه لــ موقع الأيقونات وانسخ رمز الأيقونة التي تريد واستبدلها بالرمز المحدد باللون الأزرق.

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