اضافة تأثير الضغط بالماوس لمدونات بلوجر

السلام عليكم ومرحبا بكم زوار موقع

BLOGGER BOSS

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

نبذة عن الاضافة

 الاضافة بكل بساطة هي انك عندما تضغط على اي مكان في الموقع ستظهر دائرة صغيرة حول المكان الذي ضغطت فيه و هذه هي اضافة تاثير ضغطة الماوس

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

لابد انك ضغطة ولو مرة واحدة في هذا الموقع قبل ان تصل الى هنا، فان قد فعلت ذلك فستلاحظ الاضافة لكن ان لم تفعل او تريد معاينتها مرة اخرى فما عليك سوى ان تضغط هنا ليظهر معك تاثير click 

تركيب الاضافة

طريقة تركيب الاضافة تتمثل في خطوتين :

الخطوة الاولى

اذهب الى التخصيص ⬅ تعديل html ⬅ قم بالبحث على  /head

ثم ضع هذا الكود فوقه

<style type="text/css">
/* Mouse Click Effect Css By BLOGGER BOSS */
.mteffect{width:60px;height:60px;border-radius:99em;border:3px solid #6200ee;position:fixed;left:50%;transform:scale(0.5);display:none;z-index:999}.mteffect.active{display:block;animation:mteffect 0.4s ease-out forwards}
@keyframes mteffect{from{transform:scale(0.2);opacity:1}to{transform:scale(1);opacity:0}}
</style>

ستكون اضافة تأثير الضغط بالماوس في الاول بهذا اللون يمكنك تغيره بالبحث على #6200ee ثم ضع مكانه اللون الذي يناسبك و يريحك

الخطوة الثانية

نفس المراحل السابقة لكن هذه المرة ابحث على /body

ثم ضع هذا الكود فوقه

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script>//<![CDATA[
$("body").append($('<span class="mteffect"></span>')),$(document).on("click",function(n){var i=n.clientX,a=n.clientY;$(".mteffect").css({top:a-30,left:i-30}).addClass("active")}),$(".mteffect").on("animationend webkitAnimationEnd oAnimationEnd oanimationend MSAnimationEnd",function(){$(".mteffect").removeClass("active")});
//]]>
</script>

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

اذا اعجبكم الشرح فلا تنسو متابعة موقعنا فنحن سنعمل جاهدين في سبيل ان نضع لكم افضل الشروحات و بطريقة بسيطة وسهلة

ان واجهتك اي مشكلة فلا تتردد في التواصل معنا من خلال نموذج الاتصال او عبر الواتس اب