8

Как да инсталираме в блога си бутон „нагоре-надолу“

бутон „нагоре-надолу“
Здравейте всички мои читатели и просто случайно дошли в моя блог. Напоследък нещо съвсем не ми се пише. Аз се качвам при избраната тема „в планината“, и тя „слиза от планината“. Започвам една тема, оставям я, започвам друга....Карам я на зигзаг. По едно време забелязах, че нямам бутон в шаблона за придвижване нагоре-надолу по страниците на блога ми. Въпреки, че в много блогове има различни видове от тези бутони, аз все още търся много елементи в чужди ресурси. Този бутон, който ви предлагам, е фиксиран, стои винаги в средата на страницата, почти е прозрачен и се забелязва тогава, когато спрем превъртането нагоре или надолу. Скриптът е много лесен за инсталиране. Състои се от две части.

➤Влезте в шаблон (тема) ➔ редактиране на HTML код ➔ и потърсете ]]></b:skin>. Нали знаете как? Натискате Ctrl+F и в отворения горе вдясно прозорец поставяте ]]></b:skin>. Натискате Enter, с което отивате на търсеното място в кода. Точно пред това редче вписвате следния код:


/* 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(http://4.bp.blogspot.com/-7zE5N9GdDUk/T6rH17KE6II/AAAAAAAACeQ/aEcKRyEhxsE/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(http://3.bp.blogspot.com/-sukwuViZaYY/T6rH15A8niI/AAAAAAAACeM/YErd0S8lPGA/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);

}


➤Втората част на кода ще сложите точно пред </body>. Намирате го като в прозореца за търсене в кода на шаблона вписвате </body>. След като натиснете Enter ще видите, че този участък от кода на шаблона (темата) се намира в неговия край. Лесно ще го намерите. Точно пред него вписвате този код:


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<div class='button_up' id='button_up' style='display:none;'/>
<div class='button_down' id='button_down' style='display:none;'/>
<script>
//<![CDATA[
(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();
$(function() {
var $elem = $('body');
$('#button_up').fadeIn('slow');
$('#button_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#button_up,#button_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#button_up,#button_down').stop().animate({'opacity':'1'});
});
$('#button_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#button_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script>


➤Сега запаметете промените в своя шаблон (тема), прегледайте блога си и се порадвайте на сътвореното. Ето и тук, при мен, в мой блог. Виждат се дискретно, в дясната страна на страницата.

Успех на всички ни.


8 коментара :

  1. Здравейте г-жа Табакова,
    втората част на кода пред какво поставяме? Изпуснато е в Публикацията.

    ОтговорИзтриване
    Отговори
    1. Извинявам се за пропуска.Редактирано е. Пишете ми дали се получи.

      Изтриване
  2. Здравейте г-жа Табакова,
    направих описаното в статията, появяват се два бутона и работят, но в горния бутон липсва стрелката на горе. В долния има стрелка на долу.

    ОтговорИзтриване
  3. Здравейте г-жа Табакова,
    проблема е, че в кода е изписано слято: whiteurl
    В стрелката на долу е разделено. Разделих го и нещата се оправиха. Нещата, които сте написали са ми много полезни и ще прочета всичко.

    /* 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

    ОтговорИзтриване
  4. Простете, направих каквото трябва, но бутонът за нагоре е чисто бял, а не както долния със стрелка? Ако може да ми обясните това и да ми кажете, може ли същата тази екстра да стои долу в ъгъла, а не на средата.
    Поздрави! Александър.

    ОтговорИзтриване
    Отговори
    1. Здравейте, ЧНГ! Моля, копирайте първата част от кода още един път, но много внимателно, защото всяка точка,запетая или друг символ в него могат да променят вида му. Моля, пишете ми пак, за да знам дали се е получило. Този бутон е двупосочен и затова стои на средата. Ако искате еднопосочен, който да стои долу, мога да ви изпратя код.

      Изтриване
  5. След лека промяна в широчината при мен бутоните се получиха идеално. Отново благодарности на г-жа Табакова!

    ОтговорИзтриване
    Отговори
    1. Здравейте! Наистина са се получили идеално! Радвам се за вас!

      Изтриване

Ако имате необходимост да вмъкнете HTML код в коментара си, моля използвайте един от инструментите в основното меню - Конвертор на HTML кодове.


Copyright © БЛОГ ЗА БЛОГОВЕ©2016-| Original style & code - magentawave.com | All Rights Reserved