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

الصفحات

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

 

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

مرحباً متابعين وزوار 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/[email protected]/scroll-to-top-blogger.js'/>
 لحفظ التغييرات اضغط على حفظ والآن تم إضافة زر الصعود للأعلى على مدونتك او موقعك "بدون استخدام مكتبة jquery في بلوجر.

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

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

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

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

تعليقات

التنقل السريع