(*blog_title*)

(*blog_short_description*)

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

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

جستجو
تقویم
مهر 1394
شیدسچپج
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30
نویسندگان
پیوندها
آمار
تعداد بازدیدکنندگان :
328474
جدیدترین یادداشت‌ها
نظرسنجی
از نظر شما بهترین سیستم وبلاگدهی ایرانی کدام است؟
کد انتقال به بالای صفحه 
ابزار هدایت به بالای صفحه در هر بخشی که بازدید کننده در حال مشاهده و مطالعه مطالب سایت شما باشد نمایش داده می شود و تنها با یک کلیک بر روی آن بیننده را به بالای صفحه هدایت می کند. 

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

روش اول - لینک ساده اسکرول :
ابتدا کدهای 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>

نظرات (5)

  • یکشنبه 10 شهریور 1392 ساعت 13:01
  • ali
  • سلام.وبلاگ جالب و مفیدی دارید.لطفاً به وبسایت من هم یک سری بزنید و نظرتان را اعلام کنید.در صورت تمایل به تبادل لینک بگویید که با چه نامی لینکتان کنم.متشکرم
    امتیاز: 2 2
    پاسخ:
    ممنون از شما علی جان
  • یکشنبه 10 شهریور 1392 ساعت 13:03
  • parsmovies
  • سلام وبلاگ زیبایی داری از مطالبش خوشم اومد اگه خواستی یه سری هم به وبلاگ من بزن دانلود فیلم و سریال با لینک مستقیم بازم بهت سر میزنم منتظرتم بیا
    یا علی
    امتیاز: 1 3
    پاسخ:
    ممنون
  • یکشنبه 10 شهریور 1392 ساعت 14:40
  • mehdi
  • وب بسیار قشنگ و پرمحتوایی دارین باعث افتخاره با شما تبادل لینک کنیم
    امیدوارم به وب ما سر بزنید و اگه قابل دونستید تبادل لینک کنیم

    سامانه ملی تحقیقات و مقالات دانشگاهی
    http://parsi-doc.ir
    امتیاز: 1 1
    پاسخ:
    ممنون حتما سر میزنم
  • دوشنبه 11 شهریور 1392 ساعت 18:28
  • amir
  • سلام اگر میشود کد اسلاید شو را هم بزارید زیرا برای سایت هایی که این کد را میگذارند حجم سنگینی دارند و دارای تبلیغات هستند
    باتشکر
    امتیاز: 2 0
    پاسخ:
    سلام دوست عزیز
    چند نمونه کد اسلایدشو در حال تست و بررسی هستند.
    بزودی آموزش استفاده از اسلایدشو در وبلاگ های بلاگ اسکای، در سایت قرار میگیرد.
  • سه‌شنبه 12 شهریور 1392 ساعت 19:58
  • amir
  • سلام ببخشید دوباره مزاحم شدم اگر سایت های معروف دانلود را نگاه کنید میبینید که در بین مطالبشان تبلیغ گزاشته اند اگر میشود اموزش اینکه دربین مطالب سایت خود بتوانیم کد های خود را بگزاریم را بدهید
    باتشکر
    امتیاز: 4 0
    پاسخ:
    چشم حتما آموزشش رو قرار میدم.
    برای نمایش آواتار خود در این وبلاگ در سایت Gravatar.com ثبت نام کنید. (راهنما)

    نام :
    ایمیل :
    وب/وبلاگ :
    ایمیل شما بعد از ثبت نمایش داده نخواهد شد