كيفية إضافة شريط لاصق متحرك متجاوب إلى الزر مع تقدم التمرير - اديب القربعي كنز المعلومات

مرحبا !

انقر على أحد ممثلينا أدناه للدردشة على WhatsApp أو أرسل لنا رسالة بريد إلكتروني إلى pro.arabic.net@gmail.com

مساعدةخدمة العملاء 1
+212617935191
مساعدةخدمة العملاء 2
+212617935191
اتصل بي من خلال الرقم +212617935191 متاح 12:00hs الى 00:00hs
مرحبا ! كيف اساعدك ؟

كيفية إضافة شريط لاصق متحرك متجاوب إلى الزر مع تقدم التمرير

 مرحباً بكم يا شباب! كيف حالكم؟ أتمنى أن تكونوا بخير. مرحباً بكم في مقال اليوم على موقع القربعي . اليوم سنناقش كيفية إضافة Sticky Top إلى الزر مع تقدم التمرير؟


    


إضافة شريط لاصق متحرك متجاوب إلى الزر مع تقدم التمرير



لذا، إذا كنت تبحث عن رسوم متحركة جميلة من الأعلى إلى الأسفل مع تقدم القراءة، فهذه التدوينة مناسبة لك. آمل أن تستمتع بهذه التدوينة وتتعلم أشياء جديدة. الآن دعنا ننتقل إلى مقال اليوم.

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

كيف يعمل شريط التقدم؟

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

لذا دون إضاعة الوقت المهم دعونا نتحقق من كيفية إضافة زر لاصق علوي مستجيب مع تقدم التمرير؟




قبل إضافة هذا، دعنا نرى معاينة

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

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



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

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

الخطوة 3: انقر على أيقونة السهم لأسفل بجوار زر " تخصيص ".

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

الخطوة 5: ابحث الآن عن الكود ]]></b:skin> أو /*]]>*/</style> والصق أكواد CSS التالية فوقه مباشرة. أو يمكنك لصقه فوق علامة style></style>

/* Reading Progress Bar by Freemium Tech */

  .tTpB{justify-content:center;position:fixed;right:20px;width:45px;height:45px;border-radius:50%;cursor:pointer;visibility:hidden;opacity:0;z-index:9999;transform:scale(0);transition:transform .3s ease,opacity .3s ease,visibility .3s ease,margin-bottom 1s ease}.tTpB.vbl{visibility:visible;opacity:1;transform:scale(1)}.tTpB{bottom:70px}.tTpB:hover{opacity:.8}.tTpB svg{height:100%;width:100%;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);stroke-width:1.5;cursor:pointer}.tTpB svg .b{fill:#fff;stroke:#e6e6e6;opacity:.9}.tTpB svg .c{fill:none;stroke:#482dff;stroke-dasharray:100 100;stroke-dashoffset:100;stroke-linecap:round}.tTpB svg .d{fill:none;stroke:#08102b}.drK .tTpB svg .b{fill:#2d2d30;stroke:#404045}.drK .tTpB svg .c{stroke:#8775f5}.drK .tTpB svg .d{stroke:#fffdfc}.tTpB{display:flex;align-items:center}

لا تنس تغيير .drK مع فئة الوضع المظلم لموضوع موقع الويب الخاص بك، إذا لم يكن موضوعك يحتوي على ميزة الوضع المظلم، فاحتفظ بالوضع الافتراضي!




الخطوة 6: ثم ابحث عن الكود </body> وقم بلصق أكواد CSS التالية فوقه مباشرة.
<div class="tTpB" id="backTop" onclick="window.scrollTo({top: 0});">

  <svg viewBox="0 0 34 34">

    <circle class="b" cx="17" cy="17" r="15.92"></circle>

    <circle class="c scrollProgress" cx="17" cy="17" r="15.92"></circle>

    <path class="line d" d="M15.07,21.06,19.16,17l-4.09-4.06"></path>

  </svg>

</div>

<script type="text/javascript">

   //<![CDATA[

  	var progressPath = document.querySelector(".scrollProgress");

  	var pathLength = progressPath.getTotalLength();

  	progressPath.style.transition = progressPath.style.WebkitTransition = 'none';

  	progressPath.style.strokeDasharray = pathLength + ' ' + pathLength;

  	progressPath.style.strokeDashoffset = pathLength;

  	progressPath.getBoundingClientRect();

  	progressPath.style.transition = progressPath.style.WebkitTransition = 'stroke-dashoffset 10ms linear';

  	var updateProgress = function() {

  		var scroll = document.documentElement.scrollTop;

  		var height = document.documentElement.scrollHeight - window.innerHeight;

  		var progress = pathLength - (scroll * pathLength / height);

  		progressPath.style.strokeDashoffset = progress;

  	}

  	updateProgress();

  	window.addEventListener('scroll', (updateProgress));

  	var offset = 0;

  	var duration = 550;

  	window.onscroll = function() {

  		 if (document.documentElement.scrollTop > offset) {

  			document.querySelector('.tTpB').classList.add('vbl');

  		} else {

  			document.querySelector('.tTpB').classList.remove('vbl');

  		}

  	};

  	document.querySelector('.tTpB').onclick = function() {

  		document.querySelector('html, body').animate(window.scroll({

             top: ['8px', '280px']

                },{ duration: 2500,        // number in ms [this would be equiv of your speed].

                    easing: 'ease-in-out',

                    iterations: 1,         // infinity or a number.

                 // fill: ''

       }));

  		return false;

  	};

  //]]>

</script>



الخطوة 7: ثم احفظه أو انشرها.

تم ذلك! 👍 لقد نجحت في إضافة الجزء العلوي المتحرك المستجيب إلى الزر مع تقدم التمرير.

خاتمة

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


معلومات الكاتب

مصمم

اديب القربعي كنز المعلومات

اضافات اكواد قوالب تحسين محركات البحث مدونات بلوجر

إرسال تعليق

شاهد أيضاً :-
الموافقة على ملفات تعريف الارتباط
”نحن نقدم ملفات تعريف الارتباط على هذا الموقع لتحليل حركة المرور وتذكر تفضيلاتك وتحسين تجربتك.“
لا يتوفر اتصال بالإنترنت!
”يبدو أن هناك خطأ ما في اتصالك بالإنترنت ، يرجى التحقق من اتصالك بالإنترنت والمحاولة مرة أخرى.“
تم الكشف عن مانع الإعلانات!
”لقد اكتشفنا أنك تستخدم مكونًا إضافيًا لحظر الإعلانات في متصفحك.
تُستخدم العائدات التي نحققها من الإعلانات لإدارة موقع الويب هذا ، ونطلب منك إدراج موقعنا في القائمة البيضاء في المكون الإضافي لحظر الإعلانات.“
Site is Blocked
Sorry! This site is not available in your country.