Будь в курсе событий!

07.10.2013

Кнопка вверх/вниз для blogger

Leave a Comment

Привет всем моим читателям и просто зашедшим на мой блог. В последнее время что-то совсем не пишется. Я пост на гору, а он с горы. То одну тему начну, то другую…


Танюша просила кнопочку наверх. Я ее нашла. И хотя на многих русских блогах есть массу вариантов таких кнопок,  я всё же нашла скрипт на зарубежном ресурсе.

Эта копка вверх тем примечательна, что появляется, когда идет прокрутка в низ.




Скрипт прост в установке. Заходите в дизайн блога-выбрать гаджет-Html/javascript.



http://www.iconsearch.ru/uploads/icons/nuvola2/48x48/2uparrow.png - адрес вашей картинки, можете заменить на свою.
'Живо наверх' – может поменять свою надпись при наведении курсора она будет появляться.


А вот еще один скрипт кнопочки, правда поработать нужно будет с шаблоном. Но эта кнопочка будет и вверх и вниз. Его работу можете посмотреть тут

Скрипт от сюда http://helplogger.blogspot.com/2013/03/how-to-add-go-to-top-and-go-to-bottom.html
Ищете в шаблоне тег ]]>
И перед ним ставите код

 /* 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: whiteurl(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsWgRnJCiqU9RHfUCg139K6lqEaktweRXonjSjit06g4zOdBXR8vLcAmIMbv7qQh0K71cvNxvKKF_qOWwDdHQANWQYOj39DQje6ug9aE7XKkO3CHkNRZDxObOtRPn2-zWoJAvVUD1jCwI/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/AVvXsEiyWTRpzrw7XyNKxaKnBMK2CqBBJx3ijuG8B60eiPT-D5pV2ZTH-TlvXoZpLlle_Tk9AEI_73OAqqqOr8zd8DqeF-Ud0bp16FE6MXb6udse_LzXki0JWBB1NQh_5JGK5-ZgBYRtQegSOV8/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);
}
Далее находим тег обычно он в самом конце шаблона и перед ним вставьте скрипт

А этот от сюда http://www.mybloggertricks.com/2011/09/smooth-scrolling-to-top-button-for.html

Вот пожалуй и все на сегодня. Па-па.
Система Orphus

0 коммент. :

© 2012-2017 Cash's from program