إضافة زر الصعود للأعلى لمدونات بلوجر

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

تثبيت زر الصعود للأعلى

من لوحة تحكم بلوجر ، سنقوم بالضغط علي المظهر

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


    /*!
 * زر الصعود للأعلى الإصدار الأول v1.0
 * lorddsy.blogspot.com
/
.scrollToTop {
	outline: 0;border: 0;font-size: 14 px;cursor: pointer
}.scrollToTop svg {
	display: block
}.scrollToTop {
	position: fixed;z-index: 999999;opacity: 0;pointer-events: none;transition: opacity .3 s,
	background .3 s,
	-webkit-transform .3 s;transition: transform .3 s,
	opacity .3 s,
	background .3 s;transition: transform .3 s,
	opacity .3 s,
	background .3 s,
	-webkit-transform .3 s; -webkit-transform: translateY(-2e m);transform: translateY(-2e m)
}.scrollToTop.visible {
	pointer-events: all;
	opacity: 1; -webkit-transform: translateY(0);
	transform: translateY(0)
}
 .scrollToTop svg {
	fill: #fff
}.scrollToTop {
	background-color: #673ab7;box-shadow:0 1px 4px rgba(0,0,0,.5);bottom:1em;right:1em;padding:.5em;border-radius:4px}.scrollToTop:hover{background-color:# 020202
}
    
blockquote{border-left: 15px solid #000;font-family: Georgia, serif;font-size:15px;text-align: justify;background: #fff;line-height: 1.2;display:block;margin: 0 0 20px;padding: 15px 20px 15px 45px;position: relative; font-size: 16px;color: #666;border-right: 2px solid #000;box-shadow: 2px 2px 15px #ccc;-webkit-box-shadow: 2px 2px 15px #ccc;-moz-box-shadow: 2px 2px 15px #ccc;}
blockquote::before{font-size: 50px;position: absolute;color: #999;left: 10px;top:5px;font-weight: bold;content: "''";}
blockquote a{cursor: pointer;color: #000;text-decoration: none;background: #eee;padding: 0 3px;}
.post-body blockquote {
    color: #545454;
    font-size: 100%;
    background-color: #efefef;
    border-radius: 30px;
    border-color: #673ab7;
    padding: 50px 20px 40px;
    margin: 40px 0 30px 0;
    position: relative;
    text-align: center;
    clear: both;
}

لا تنس حفظ التغييرات بالضغط على زر "تطبيق علي المدونة". سنقوم الآن بتحرير HTML ، ونبحث عن </body> وفوقه سنقوم بلصق الكود التالي:


<!-- ScrollToTop -->
<button class='scrollToTop' data-upshow='600' data-upspeed='1000' id='scrollToTop'>
   <svg height='35' viewBox='0 0 24 24' width='35' xmlns='http://www.w3.org/2000/svg'>
      <path d='M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z'/>
      <path d='M0 0h24v24H0z' fill='none'/>
   </svg>
</button>
<script src='//cdn.jsdelivr.net/gh/kingalaya/lorddsy@main/scroll-to-top-blogger.js'/>

لحفظ التغييرات اضغط على حفظ والآن تم إضافة زر الصعود للأعلى على مدونتك او موقعك "بدون استخدام مكتبة jquery في بلوجر.

خيارات إضافية

في الوقت الحالي ، قمت بتضمين خيارين فقط ، يتم تعيينهما افتراضيًا على 600 و 1000 إذا لم يتم تحديدهما في كود HTML. يوضح الجدول التالي هذه القيم:

الخيار	النوع	الوصف
`data-upshow`	Number	التمرير قبل ظهور الزر
`data-upspeed`	Number	سرعة النزول (1000 = 1 ثانية)

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

LORDDSY - | - اللورد

القائمة الرئيسية

الصفحات

إضافة زر الصعود للأعلى لمدونات بلوجر

تثبيت زر الصعود للأعلى

خيارات إضافية

أخر المواضيع من قسم : Blogger

تعليقات

إرسال تعليق