أضف أزرار الإتجاه أعلى أو أسفل الصفحة إلى بلوجر
بسم الله الرحمن الرحيم
والصلاة والسلام على أشرف المرسلين
سيدنا محمد وعلى آله وصحبه أجمعين
من الأدوات الهامة التى تساعد الزوار على تصفح موقعك بسهولة هى أداة زر الصعود إلى أعلى أو الإتجاه إلى أسفل الصفحة ، خصوصًا إذا كانت صفحات موقعك تحتوى على مواضيع ومقالات طويلة.
توجد العديد من الطرق لإضافة مثل هذه الأداة إعتمادًا على تقنيات مختلفة ، فمنها من يعتمد على تقنية Css وإضافات أخرى تعتمد على Javascript أو تقنية JQurey وفى هذا الموضوع سأعرض الطريقتين والفرق بينهما لتختار من بينهم ما يناسب موقعك.
زر العودة إلى أعلى أو الذهاب لأسفل الصفحة بإستخدام تقنية jQuery
ما يميز هذه الأداة هو سهولة الإستخدام مع وجود تأثير التلاشى Fade effect أثناء الصعود لأعلى الصفحة أو الهبوط إلى الأسفل.
تركيب الإضافة لمدونات بلوجر
1. إذهب إلى لوحة تحكم مدونتك ثم إختر قالب ( لاتنس الإحتفاظ بنسخة إحتياطية من القالب)
2. تحرير Html
3. قم بالبحث عن الكود التالى بإستخدام لوحة المفاتيح Ctrl+F
]]>ثم قم بلصق الكود التالى فوقه مباشرة
/* Up and Down Buttons with jQuery
----------------------------------------------- */
.button_up{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQWlMJqo90uF7PIqRX7dPag_bHpAWhnq1X8Zr3QjhzLoJGZwmUieDxLnOVrnGaYnjkJ9s_3kP9naA6uUtw8gxqMECyJYa9lCRr1rZnGfPPDT5zXhi7-1GKQ-WTNONvMtke2UeOR9dwTMA/s16/arrow_up.png)
no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:280px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.button_down{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_j1m2uudR-gPQvmbWoyOLtTev_ov-OGs3f7nlxzJJbjLy1mNsPjolwmR-K7fIV5d1Wbodxa_YYDao9XfvABTNW-W97adGNbXNR2ZLktJX4XTLPlUM0R-779aAtmFiqBRE8d7ax5faR5U/s16/arrow_down.png)
no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:242px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
5. بعد ذلك قم بالبحث عن الكود التالى
