إضافة تأثير التموج على بلوجر Ripple Effect

إنشاء تأثير تموج عند النقر بالنسبة إلى قوالب بلوجر الافتراضية في الإصدار الجديد، هناك تأثير تموج النقرات الرائع جدًا هو Ripple effect، والمعروف أيضًا بـmaterial click.
قد يعرفه الكثير منكم خصوصا من يستخدم قوالب بلوجر الإفتراضية، الفرق هنا عند استعمال Ripple المدمج من بلوجر هو كبر مكتبة JS وهناك أشياء زائدة عن الحاجة عند عدم استخدامها، مما يجعل المدونة أثقل في تحميل الصفحة.

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

شرح طريقة التركيب
1. سجل الدخول إلى مدونتك
2. المظهر >> تعديل HTML
3. ابحث عن ]]></b:skin> ثم ضع الكود التالي فوقه

.flat-icon-button {
 background: transparent;
 border: 0;
 outline: none;
 padding: 8px;
 cursor: pointer;
 box-sizing: content-box;
 display: inline-block;
 line-height: 0
}
.flat-icon-button,
.flat-icon-button .splash-wrapper {
 border-radius: 50%
}
.flat-icon-button .splash.animate {
 -webkit-animation-duration: 0.3s;
 animation-duration: 0.3s
}
.flat-button {
 cursor: pointer;
 border-radius: 2px;
 padding: 8px
}
.ripple {
 position: relative
}
.ripple>* {
 z-index: 1
}
.splash-wrapper {
 bottom: 0;
 left: 0;
 overflow: hidden;
 pointer-events: none;
 position: absolute;
 right: 0;
 top: 0;
 z-index: 0
}
.splash {
 background: rgba(0, 0, 0, .3);
 border-radius: 100%;
 display: block;
 opacity: .9;
 position: absolute;
 -webkit-transform: scale(0);
 -ms-transform: scale(0);
 transform: scale(0)
}
.splash.animate {
 -webkit-animation: ripple-effect .5s linear;
 animation: ripple-effect .5s linear
}
@-webkit-keyframes ripple-effect {
 100% {
  opacity: 0;
  -webkit-transform: scale(2.5);
  transform: scale(2.5)
 }
}
@keyframes ripple-effect {
 100% {
  opacity: 0;
  -webkit-transform: scale(2.5);
  transform: scale(2.5)
 }
}

4.اضف هذا الكود فوق </body>

<script src='//cdn.jsdelivr.net/gh/dangtiensi/siben@3e73bd4e2ea1575aa5145b43f3993dd22fac01f7/ripple.js'></script>
<style>

الإستعمال

تأثير مربع: أضف التموج إلى أي عنصر ضمن الوسم "class="ripple

تأثير دائري: أضف التموج إلى أي عنصر ضمن الوسم "class="ripple flat-icon-button
مثال : <div class="ripple Test"> </div>