آموزش کد رفتن به بالای صفحه سایت و وبلاگ

آموزش کد رفتن به بالای صفحه سایت و وبلاگ

1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره
1,189 بار
۲ نظر.
23 فروردین 1395

آموزش کد رفتن به بالای صفحه سایت و وبلاگ

آموزش کد رفتن به بالای صفحه سایت و وبلاگ

با عرض سلام و خسته نباشید خدمت تمامی کاربران عزیز سایت فامو !!!

الان که دارم این مطلب رو تو سایت قرار میدم ، خیلی تو سایت ها و وبلاگ ها مد شده که یک دکمه برای برگشت یا رفتن به بالای صفحه سایت یا وبلاگ قرار میدن تا بازدید کننده بتونه به راحتی و بدون استفاده از اسکرول بار به بالای صفحه هدایت بشه.برای همین امروز من یک کد دکمه برگشت به بالای صفحه که برای همه سایت ها و وبلاگ ها کار میکنه تو سایت قرار دادم که اگر دوست داشتید همچین ابزاری رو به سایت یا وبلاگتون اضافه کنید.

کد دکمه رفتن به بالای صفحه

همونطور که در انتها هم دموی این کد رو قرار دادم ، وقتی که به انهای سایت میرسین یک دکمه کم رنگ مثل شکل بالا ظاهر میشه که با رفتن موس بر روی آن پررنگ میشه و با کلیک کردن روی اون به صورت آرام کاربر به بالای صفحه هدایت میشه.

کد css دکمه برگشت به بالای صفحه

شما باید فایل شیوه نامه یا استایل خودتون رو ویرایش کنید و کد های زیر را در انتهای آن قرار بدید.

#back-top {
 position: fixed;
 bottom: 30px;
 margin-left: -150px;
}

#back-top a {
 width: 108px;
 display: block;
 text-align: center;
 font: 11px/100% Tahoma,Arial, Helvetica, sans-serif;
 text-transform: uppercase;
 text-decoration: none;
 color: #bbb;

/* transition */
 -webkit-transition: 1s;
 -moz-transition: 1s;
 transition: 1s;
}
#back-top a:hover {
 color: #000;
}

/* arrow icon (span tag) */
#back-top span {
 width: 54px;
 height: 63px;
 display: block;
 margin-bottom: 7px;
 background: url(www.onescript.ir/wp-content/uploads/2016/03/up-arrow.png) no-repeat center center;

/* rounded corners */
 -webkit-border-radius: 15px;
 -moz-border-radius: 15px;
 border-radius: 15px;

/* transition */
 -webkit-transition: 1s;
 -moz-transition: 1s;
 transition: 1s;
}
#back-top a:hover span {
 background-color:;
}

 

اگر از وردپرس استفاده می کنید یا قالب استاتیک دارید خوب مشخصه دیگه این فایل رو به style.css در پوشه قالبتون اضافه کنید ولی اگر توی وبلاگ این دکمه رو می خواهید قرار بدید یک آموزش در انتها قرار دادم که میتونید استفاده کنید.

کد html رفتن رفتن به بالای سایت و وبلاگ

حالا باید کد زیر رو قبل از تگ <head/> قرار بدید.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<script>
$(document).ready(function(){

// hide #back-top first
 $("#back-top").hide();

 // fade in #back-top
 $(function () {
 $(window).scroll(function () {
 if ($(this).scrollTop() > 100) {
 $('#back-top').fadeIn();
 } else {
 $('#back-top').fadeOut();
 }
 });

// scroll body to 0px on click
 $('#back-top a').click(function () {
 $('body,html').animate({
 scrollTop: 0
 }, ۸۰۰);
 return false;
 });
 });

});
</script>

 

اگر از وردپرس استفاده میکنید توی صفحه header.php  تگ header رو می تونید پیدا کنید.

کد آخر که الان می زارم هم باید در زیر تگ <body> هر کجا که دوست داشتید قرار بدید ، توصیه میکنم در آخرا قرار بدید.

 

<p id="back-top">
 <a href="#top"><span></span></a>
 </p>

آموزش قرار دادن کد بالا رفتن در وبلاگ

اگر این دکمه رو برای وبلاگ می خواهید شاید یکم تو قرار دادن اون css ها مشکل پیدا کنن بعضی ها ( البته شما که استاد مائید !! )

۲ حالت ممکن پیش بیاد یا کدهای css و html تو قالب وبلاگتون کنار همه که خیلی آسون میشه فقط کافیه اون قسمتی که شیوه نامه ها هستش رو پیدا کنید و در انتهاشون قرار بدید.

اما حالت دوم این که اکثرا سایت های ارائه دهنده قالب وبلاگ فایل style.css رو جداگانه آپلود میکنن که شما باید این فایل رو دانلود کنید سپس کد ها رو اضافه کنید سپس این فایل رو یکجا آپلود کنید سپس توی قالب آدرس فایل جدید style.css رو وارد کنید.

 

ما را از نظرات خود محروم نفرمایید …

موفق باشد

دیدگاه کاربران

2 دیدگاه

محصولات مرتبط

بهینه سازی کد های css یکی از حیاتی ترین کار های است که برای یک قالب در نظر گرفت این کار باعث افزایش سرعت سایت و کم شدن حجم قالب می شود و در نتیجه می توانند در منابع سرور نیز صرفه جویی بکند. وب سایت های زیادی هستند که به صورت رایگان کد های

ادامه مطلب
404 بار
3 بهمن 1397

یکی دیگر از افزونه های کاربردی وردپرس افزونه Easy Updates Manager شما با این افزونه به راحتی می توانید بر تمامی بروزرسانی های وردپرس از قبیل بروزرسانی هسته ،قالب و افزونه نظارت داشته باشید. شما قادر در این افزونه قادر هستید تا تمامی بروزرسانی ها را غیر فعال کنید و از بروز رسانی خودکار آنها

ادامه مطلب
382 بار
25 دی 1397

قبلا مقاله ای در فامو منتشر کردیم که به راحتی بتوانید نام کاربری وردپرس خود را عوض کنید (با استفاده از افزونه Username Changer). خوب بریم سراغ آموزش تغییر نام کاربری در وردپرس برای این کار کافیست وارد هاست خود شوید و در قسمت دیتابیس ها گزینه phpmyadmin را انتخاب کنید تا وارد محیط پایگاه

ادامه مطلب
394 بار
14 آذر 1397