كيفية إضافة تأثير النقرة المتموجة إلى موقع بلوجر

المقدمة: تأثير تموج النقر 

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

ما هو تأثير تموج النقر؟ 

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

لماذا نضيف تأثير تموج النقر؟ 

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

كيفية إضافة تأثير تموج النقر إلى موقع بلوجر؟

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

الخطوة 01: أولاً قم بتسجيل الدخول إلى حسابك 

لوحة تحكم Blogger.

الخطوة 02: في لوحة معلومات Blogger، انقر فوق "المظهر" .

الخطوة 03: انقر فوق الزر "تخصيص" بجوار. 

الخطوة 04: انقر فوق تحرير HTML وسيتم إعادة توجيهك إلى صفحة التحرير.

الخطوة 05: الآن ابحث عن الكود </head>وألصق أكواد JavaScript التالية فوقه مباشرةً.

< script  src = 'https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'  type = 'text/javascript' > </ script > 
< script  src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js' > </ script >

الخطوة 06: الآن قم بإضافة كود CSS .

الخطوة 07: الآن ابحث عن </b:skin>العلامة لإضافة كود CSS أدناه.

الخطوة 08: انسخ ولصق الكود الموضح أدناه أعلى </b:skin>العلامة مباشرةً.

.clicker {
    width: 60px;
    height: 60px;
    margin-left: -30px;
    margin-top: -30px;
    background: #204ecf;
    border-radius: 100%;
    position: absolute;
    transform: scale(0);
    opacity: .3;
    -ms-filter: none;
    filter: none;
    z-index: 9999;
    pointer-events: none
}

.darkMode .clicker {
    background: #fff
}

.clicker.is-active {
    opacity: 0;
    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
    filter: alpha(opacity=0);
    transition: opacity 900ms ease, transform 900ms ease;
    transform: scale(1)
}

الخطوة 09: الآن قم بإضافة كود JavaScript .

الخطوة 10: ابحث الآن عن </body>العلامة في قالبك. يجب أن تكون موجودة في أسفل القالب.

الخطوة 11: انسخ ولصق الكود أدناه أعلى </body>علامة الإغلاق مباشرةً.

<script> /*<![CDATA[ * / ( دالة ( ) {
     var i = function ( n, t ) {
             return  window .setTimeout(t, n) 
        }, 
        o = { WebkitTransition : "webkitTransitionEnd" ،
             MozTransition : "transitionend" ،
             OTransition : "oTransitionEnd otransitionend" ،
             msTransition : "MSTransitionEnd" ،
             transition : "transitionend" 
        }, 
        e = function ( n, t ) {
             var i, o = "touchstart" === n.type.toLowerCase();
             switch (t) {
                 case "top" : 
                    i = "pageY" ؛
                     break ؛
                 case "left" : 
                    i = "pageX" 
            } return (o ? n.originalEvent.touches[ 0 ] : n)[i] 
        }; 
    $( document ).on( "mousedown touchstart" , function ( n ) {
         var t = $( '<div class="clicker"></div>' );
         return t.css({
             left : e(n, "left" ),
             top : e(n, "top" ) 
        }), $( "body" ).append(t), i( 0 , function (
              
            ) {
             return t.on(o[Modernizr.prefixed( "transition" )], دالة () {
                 return t.remove() 
            }), t.addClass( "is-active" ) 
        }) 
    }) 
}).call( this ); /*]]>*/ </script>

.

مصدر الاكواد