همیار بلاگ اسکای

همیار بلاگ اسکای

طراحی و ترجمه قالب های بلاگ اسکای
همیار بلاگ اسکای

همیار بلاگ اسکای

طراحی و ترجمه قالب های بلاگ اسکای

کد انتقال بازدیدکننده به بالای صفحه در وبلاگ

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

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

روش اول - لینک ساده اسکرول :
ابتدا کدهای CSS زیر رو در قالب وبلاگ خود و بین تگ های <style></style> قرار بدید.

#back-top{
    position: fixed;
bottom: 30px;
    float:right;
    right:10px}
#back-top a{
    width: 108px;
    display: block;
    text-align: center;
    font: 11px/100% Arial, Helvetica, sans-serif;
    text-transform: uppercase;text-decoration: none;
    color: #bbb;
    -webkit-transition: 1s;
    -moz-transition: 1s;transition: 1s;
}
#back-top a:hover{
color: #000;
}
#back-top span {
    width: 108px;
    height: 108px;
    display: block; 
margin-bottom: 7px;
    background: #ddd url(http://s3.picofile.com/file/7917759030/up23.png) no-repeat center center;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}

سپس کد زیر را در انتهای کد قالب وبلاگ و قبل از تگ </body> قرار بدید.

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


چون کد بالا به عنصری با آیدی top در صفحه اشاره میکنه لذا باید این آیدی رو به بالاترین عنصر صفحه یعنی تگ <body> اضافه کنیم. بصورت زیر :

<body id="top"> ... </body>


روش دوم - لینک اسکرول با توابع جاوا اسکریپت :

در این روش با کمک خاصیت های جاوا اسکریپت، کمی به کدهای خود افکت و زیبایی می بخشیم. خوبی این روش در حجم پائین آن است.
ابتدا کد اسکریپت زیر رو بین تگ های <head></head> قالبتون قرار بدید.

<script type="text/javascript">
//<![CDATA[
function currentYPosition() {
 // Firefox, Chrome, Opera, Safari
 if (self.pageYOffset) return self.pageYOffset;
 // Internet Explorer 6
 if (document.documentElement && document.documentElement.scrollTop)
 return document.documentElement.scrollTop;
 // Internet Explorer 6, 7 and 8
 if (document.body.scrollTop) return document.body.scrollTop;
 return 0;
}
function elmYPosition(eID) {
 var elm = document.getElementById(eID);
 var y = elm.offsetTop;
 var node = elm;
 while (node.offsetParent && node.offsetParent != document.body) {
 node = node.offsetParent;
 y += node.offsetTop;
 } return y;
}
function smoothScroll(eID) {
 var startY = currentYPosition();
 var stopY = elmYPosition(eID);
 var distance = stopY > startY ? stopY - startY : startY - stopY;
 if (distance < 100) {
 scrollTo(0, stopY); return;
 }
 var speed = Math.round(distance / 100);
 if (speed >= 20) speed = 20;
 var step = Math.round(distance / 25);
 var leapY = stopY > startY ? startY + step : startY - step;
 var timer = 0;
 if (stopY > startY) {
 for ( var i=startY; i<stopY; i+=step ) {
 setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
 leapY += step; if (leapY > stopY) leapY = stopY; timer++;
 } return;
 }
 for ( var i=startY; i>stopY; i-=step ) {
 setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
 leapY -= step; if (leapY < stopY) leapY = stopY; timer++;
 }
}
//]]>
</script>


حالا کد زیر رو در پائین صفحه خود قرار بدید. می تونید قبل از </body> قرار بدید.

<a href="#top" onclick="smoothScroll('top'); return false">رفتن به بالای صفحه</a>


چون کد بالا به عنصری با آیدی top در صفحه اشاره میکنه لذا باید این آیدی رو به بالاترین عنصر صفحه یعنی تگ <body> اضافه کنیم. بصورت زیر :

<body id="top"> ... </body>


روش سوم - لینک اسکرول با توابع جی کوئری :

در این روش باید کتابخانه جی کوئری رو به قالب خودمون اضافه(ایمپورت) کنیم. برای اینکار می تونیم از از فایل کتابخانه جی کوئری که در سرور گوگل قرار داره استفاده کنیم و یا فایل رو روی هاست خودمون بصورت مستقل داشته باشیم. در اینجا ما از کتابخانه گوگل استفاده کردیم.

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
 // hide #back-top first
 $("#back-top").hide();
 // fade in #back-top
 $(function () {
 $(window).scroll(function () {
 if ($(this).scrollTop() > 1000) {
 $('#back-top').fadeIn();
 } else {
 $('#back-top').fadeOut();
 }
 });
 // scroll body to 0px on click
 $('#back-top a').click(function () {
 $('body,html').animate({
 scrollTop: 0
 }, 800);
 return false;
 });
 });

});
//]]>
</script>


حالا کدهای CSS زیر رو بین تگ های <style></style> قرار بدید.

#back-top{
    position: fixed;
bottom: 30px;
    float:right;
    right:10px}
#back-top a{
    width: 108px;
    display: block;
    text-align: center;
    font: 11px/100% Arial, Helvetica, sans-serif;
    text-transform: uppercase;text-decoration: none;
    color: #bbb;
    -webkit-transition: 1s;
    -moz-transition: 1s;transition: 1s;
}
#back-top a:hover{
color: #000;
}
#back-top span {
    width: 108px;
    height: 108px;
    display: block; 
margin-bottom: 7px;
    background: #ddd url(http://s3.picofile.com/file/7917759030/up23.png) no-repeat center center;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}


سپس کد زیر را در انتهای کد قالب وبلاگ و قبل از تگ </body> قرار بدید.

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


چون کد بالا به عنصری با آیدی top در صفحه اشاره میکنه لذا باید این آیدی رو به بالاترین عنصر صفحه یعنی تگ <body> اضافه کنیم. بصورت زیر :

<body id="top"> ... </body>

کد اسکریپت کد رفتن به بالای صفحه رفتن به بالای صفحه انتقال به بالای صفحه هدایت به بالای صفحه کد انتقال به بالا کد انتقال به بالای صفحه وبلاگ اسکریپت هدایت به بالای صفحه کد پرش به بالای صفحه همیار بلاگ اسکای
ادمین یکشنبه 10 شهریور 1392 ساعت 12:51
نظرات 5 + ارسال نظر
ali یکشنبه 10 شهریور 1392 ساعت 13:01 http://www.alonegardener.ir

سلام.وبلاگ جالب و مفیدی دارید.لطفاً به وبسایت من هم یک سری بزنید و نظرتان را اعلام کنید.در صورت تمایل به تبادل لینک بگویید که با چه نامی لینکتان کنم.متشکرم

ممنون از شما علی جان

parsmovies یکشنبه 10 شهریور 1392 ساعت 13:03 http://www.parsmovies.vcp.ir

سلام وبلاگ زیبایی داری از مطالبش خوشم اومد اگه خواستی یه سری هم به وبلاگ من بزن دانلود فیلم و سریال با لینک مستقیم بازم بهت سر میزنم منتظرتم بیا
یا علی

ممنون

mehdi یکشنبه 10 شهریور 1392 ساعت 14:40 http://parsi-doc.ir

وب بسیار قشنگ و پرمحتوایی دارین باعث افتخاره با شما تبادل لینک کنیم
امیدوارم به وب ما سر بزنید و اگه قابل دونستید تبادل لینک کنیم

سامانه ملی تحقیقات و مقالات دانشگاهی
http://parsi-doc.ir

ممنون حتما سر میزنم

amir دوشنبه 11 شهریور 1392 ساعت 18:28 http://tech-ha.tk

سلام اگر میشود کد اسلاید شو را هم بزارید زیرا برای سایت هایی که این کد را میگذارند حجم سنگینی دارند و دارای تبلیغات هستند
باتشکر

سلام دوست عزیز
چند نمونه کد اسلایدشو در حال تست و بررسی هستند.
بزودی آموزش استفاده از اسلایدشو در وبلاگ های بلاگ اسکای، در سایت قرار میگیرد.

amir سه‌شنبه 12 شهریور 1392 ساعت 19:58 http://tech-ha.tk

سلام ببخشید دوباره مزاحم شدم اگر سایت های معروف دانلود را نگاه کنید میبینید که در بین مطالبشان تبلیغ گزاشته اند اگر میشود اموزش اینکه دربین مطالب سایت خود بتوانیم کد های خود را بگزاریم را بدهید
باتشکر

چشم حتما آموزشش رو قرار میدم.

برای نمایش آواتار خود در این وبلاگ در سایت Gravatar.com ثبت نام کنید. (راهنما)
ایمیل شما بعد از ثبت نمایش داده نخواهد شد