ВВЕРХ
Чтобы пользователь дойдя до конца страницы не уходил с сайта, применяют несколько уловок, например, размещают блок с похожими статьями, или плавающее меню, или ссылку к началу веб-документа. Как её сделать?
<a href='#' id='vverh'>ВВЕРХ</a>Пример: ВВЕРХ.
Для того, чтобы она перемещалась вместе с прокруткой страницы (см. CSS) и появлялась не сразу, а только после прохождения первого экрана (см. JavaScript) добавим перед </head>
JavaScript:
<script>
window.onscroll = function vverh() {
document.getElementById('vverh').style.display = (window.pageYOffset > '200' ? 'block' : 'none');
}
</script>Стиль CSS:
Для Blogger все три части кода вносим в гаджет HTML/JavaScript, который нужно добавить сразу под "Сообщения блога", если боковая колонка расположена справа.
Или в левую панель, если она присутствует.
125 комментариев:
#back-top {
position: fixed;
position: fixed; left: 0%; top: 97%;
}
Вместо
#back-top {
position: fixed;
margin-left: -100px;
bottom: 0px;}
А то у вас кнопка наезжает на левое меню. И либо добавите скрипт, либо
<div id='back-top'><a href='#top'><span></span>Наверх</a></div>
замените на
<div id='back-top'><a href="#"><span></span>Наверх</a></div>
Подскажи плиз как поменять.
Спасибо.
Есть небольшая проблема: стрелка - это картинка, поэтому нужно либо искать в интернете другую картинку более подходящую под дизайн блога, либо открывать Фотошоп и редактировать эту - вот её адрес - http://www.mundodarkness.com.br/gd/topo.png.
Цвет квадратика определяется строкой:
background: #ddcca3 url(http://www.mundodarkness.com.br/gd/topo.png) no-repeat center center;
Уберите #ddcca3 совсем.
При наведении на ссылку фон квадрата:
#back-top a:hover span {
background-color: #777;
}
Аналогично: либо удалите, либо измените на свой.
Цвет текста в
#back-top a {
color: #bbb;
}
А при наведении
#back-top a:hover {
color: #000;
}
Здесь найдёте коды веб-безопасных цветов - http://shpargalkablog.ru/2010/09/optimizatsiya-images-blogger.html#Photoshop-PNG-8. Выше можете скачать Фотошоп.
А здесь http://shpargalkablog.ru/2011/04/fotoshop-s-nulya.html небольшой урок по Фотошопу, хотя вам понадобятся только карандаш да пипетка.
После того, как выберите/нарисуете картинку, загружаете её в Blogger и меняете адрес с http://www.mundodarkness.com.br/gd/topo.png на свой.
кстати, интересная стрелка у Вас внизу)
style="position: fixed; left: 93%; top: 97%;"
и второй вариант, со стрелочкой. у меня трудность с расположением.
если задавать margin-left: -100px; то элемент находится слева от ПРАВОЙ границы тела сообщения (т.е. наезжает на текст сообщений), а не от левой, как у Вас здесь. если же задавать margin-right: -100px; то все нормально (справа от правой границы), но у меня боковая панель справа, поэтому стрелка наезжает на нее. может я не очень грамотно изъясняюсь, но как-то так... и пришлось задавать огромную величину этого отступа.
если же использовать не margin-left, а position: fixed; left: 0%; top: 97%; то стрелка будет прижата не к краю области текста, а к краю окна браузера.
и еще стрелка "скрывается" за нижней панелью.
и такой неприятный момент - если использовать этот вариант с использованием jQuery (или любой другой скрипт с jQuery), то не работает предложенный Вами вариант скрытия текста, где используется Googlа библиотеке API.
однако у Вас в одном блоге все вместе работает. это благодаря условным конструкциям, я полагаю? потому что кнопок "наверх" на других страницах в этом блоге я пока не заметила.
Точно! Условные теги - это моё спасение. Некоторые скрипты работают в теле сообщения (не в head) и поэтому я их добавляю при написании статьи.
Всё верно, ты уже настоящий спец! margin-left: -100px; - это смещение влево. Оно должно быть равно ширине статьи, если его добавлять в гаджет. Я внедрила его в статью, поэтому смещение у меня меньше.
Чтобы не использовать скрипт, но оставить всё те же стили:
<div id='back-top'><a href="#"><span></span>Наверх</a></div>
http://ostrovsvobody.blogspot.com/
Стрелка постоянно высвечивается :\ Порылся в кодах, никак не понял, что нужно менять и что указывать. Стрелка все равно видна, и в начале страницы и в конце. Как сделать, чтобы она появлялась только во время прокрутки страницы вниз, а в начале страницы исчезала, вот к примеру как у вас. Помогите справиться с этим.
Вот и замечательно, что разобрались.
Для поиска используйте сочетания клавиш CTRL+F и в открывшееся окошко вводите h2.
Чтобы выровнять твит справа, найдите примерно такой код и добавьте выделенное жирным
h2 {
font: $(widget.title.font);
text-transform: $(widget.title.text.transform);
color: $(widget.title.text.color);
margin: .5em 0;
float: left;
}
Обязательно спрашивайте, отвечу. Иначе вконец можно запутаться. Я не всегда верно могу оценить знания читателя, поэтому могу что-то пропустить.
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.isDateStart'>
<b:if cond='data:post.isFirstPost == "false"'>
</div></div>
</b:if>
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-outer">
</b:if>
<b:if cond='data:post.dateHeader'>
<a href="http://twitter.com/share" class="twitter-share-button" data-url="<data:post.url/>" data-text="<data:post.title/>" data-count="horizontal" data-lang="ru">Твитнуть</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script><style type="text/css">.twitter-share-button {float: right;} </style><h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
<a href="http://twitter.com/share" class="twitter-share-button" data-url="<data:post.url/>" data-text="<data:post.title/>" data-count="horizontal" data-lang="ru">Твитнуть</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script><style type='text/css'>.twitter-share-button {float: right; padding: 10px;} </style>
https://sites.google.com/site/spargalka1/rating/template-7245761304205757256.xml?attredirects=0&d=1
В реальных условиях легче понять в чём дело. Получилось?
Кнопку "наверх" - до или после <data:post.body/>.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js' type='text/javascript'></script>
Замените
#back-top {
position: fixed;
margin-left: -100px;
bottom: 0px;}
на
#back-top {
position: fixed;
right: 93%;
bottom: 0px;}
Вначале сделать типа меню (года: 2007, 2008, ...)
Нажимая на определенный год - > переходить к нему.
Я читала что-то у вас, но не поняла
С уважением, Якушевская Юлия
для 2011
http://yakushevskaya.blogspot.com/search?updated-min=2011-01-01T00%3A00%3A00-08%3A00&updated-max=2012-01-01T00%3A00%3A00-08%3A00&max-results=11
для 2010
http://yakushevskaya.blogspot.com/search?updated-min=2010-01-01T00%3A00%3A00-08%3A00&updated-max=2011-01-01T00%3A00%3A00-08%3A00&max-results=11
и т.п
где max-results=11 - количество показываемых записей на одной страницы
вот блог http://bredstory.blogspot.com/
if ($(this).scrollTop() > 100) {
на
if ($(this).scrollTop() > 1000) {
Или любую другую цифру.
Что делать? http://potapenkoira.blogspot.com/
Вопрос такой, можно ли это сделать на обычной странице сайта?
У меня почему-то ничего не выходит. Хотя в html я не спец.
У меня только вверху в центре появляется (при прокрутке) ссылка "Наверх" и исчезает. Переместить ее не получается, а картинки, так вообще нет.
Вот что у меня получилось и в чем ошибка?
Если не трудно, подправите код.
Все <> заменил на *, а то не принимало сообщение.
*!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"*
*!-- saved from url=(0014)about:internet --*
*html**head*
*meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"*
*meta http-equiv="Content-Language" content="ru"*
*meta http-equiv="Content-Type" content="text/html; charset=windows-1251"*
*title*Безымянная страница*/title*
*style type="text/css"*
div#container
{
width: 994px;
position: relative;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
*/style*
*style type="text/css"*
body
{
text-align: center;
margin: 0;
background-color: #FFFFFF;
color: #000000;
}
*/style*
*script type="text/javascript" src="http://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
}, 800);
return false;
});
});
});
*/script*
*/head*
*body
#back-top {
position: fixed;
margin-left: -100px;
bottom: 0px;}
#back-top a {
width: 70px;
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: 70px;
height: 70px;
display: block;
margin-bottom: 7px;
background: #ddcca3 url(http://3.bp.blogspot.com/-Q0hVWzKDCJo/Tpar8l5wvJI/AAAAAAAACZ4/LbpuEBAIQAU/s60/strelka.png ) no-repeat center center;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover span {
background-color: #777;
}
*div id="container"*
*div id="wb_Line1" style="margin:0;padding:0;position:absolute;left:185px;top:4505px;width:459px;height:5px;text-align:left;z-index:0;"*
*img src="%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B01_files/img0039.png" id="Line1" alt="" title="" style="border-width: 0pt; width: 467px; height: 13px;"**/div*
*/div*
*/body*
*div style="display: none;" id="back-top"**a href="#"**span**/span*Наверх*/a**/div*
*/html*
Меня не было в сети, а Blogger посчитал, что комментарий спамный. Конечно, можно:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content='IE=EmulateIE7, IE=edge' http-equiv='X-UA-Compatible'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<title>Безымянная страница</title>
<style type="text/css">
body {
margin: 0;
background-color: #FFFFFF;
color: #000000;
}
/* не нужно text-align: center; */
div#container {
width: 994px;
position: relative;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
}
/* тогда не нужно text-align: left; */
#back-top {
position: fixed;
margin-left: -100px;
bottom: 0px;}
#back-top a {
width: 70px;
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: 70px;
height: 70px;
display: block;
margin-bottom: 7px;
background: #ddcca3 url(http://3.bp.blogspot.com/-Q0hVWzKDCJo/Tpar8l5wvJI/AAAAAAAACZ4/LbpuEBAIQAU/s60/strelka.png ) no-repeat center center;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover span {
background-color: #777;
}
#wb_Line1 {
margin: 0;
padding: 0;
position: absolute;
left: 185px;
top: 4505px;
width: 100%;
height: 100%;
}
/* здесь я не поняла что к чему, зачем делать высоту меньше высоты изображения */
</style>
<script type="text/javascript" src="http://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
}, 800);
return false;
});
});
});
</script>
</head>
<body>
<div id="container">
<div id="wb_Line1"><img alt="" src="%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B01_files/img0039.png" border="0" height="13" width="467"/></div>
<div id='back-top'><a href='#top'><span></span>Наверх</a></div>
</div>
</body>
</html>
Если нажать на стрелку вверх, потом выбрать другую вкладку в браузере и снова вернуться на страницу со стрелкой, то появляется рамка с пунктиром, как её убрать?
Вопрос № 2
Сделал стрелку по середине на сайте: http://www.ecoleader.ru/razrabotka-pasportov-opasnyh-othodov-cena-stoimost.html
часть кода выглядит так:
#back-top span {
width: 70px;
height: 500px;
Правильно ли я сделал? или есть способы установить стрелку более корректно? Хочу сделать, чтобы не обязательно было наводить точно на стрелку, а как в контакте - просто на левое поле!
#back-top {
position: fixed;
margin-left: -250px;
bottom: 0px;
height: 100%;}
#back-top a {
width: 200px;
display: block;
text-decoration: none;
color: #002400;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
height: 100%;}
#back-top a:hover {
color: #002400;
background: #777;}
#back-top span {
width: 200px;
height: 70px;
display: block;
margin-bottom: 7px;
background: url(http://3.bp.blogspot.com/-Q0hVWzKDCJo/Tpar8l5wvJI/AAAAAAAACZ4/LbpuEBAIQAU/s60/strelka.png) no-repeat;
}
Скажите пожалуйста, есть ли у Вас на сайте статья, как вывести кнопки в социальные сети отдельным блоком (div), чтобы их внешние ссылки не учитывались поисковиками. Т.к. ноуиндекс и ноу фоллоу абсолютно бессмыслены - вес страница теряет в никуда!
http://s019.radikal.ru/i610/1203/e0/3bea9a5200af.jpg
При клике на вкладку
http://s58.radikal.ru/i160/1203/9b/5ff27f066223.jpg
Хотелось бы, чтоб отображение страницы оставалось как на первой картинке.
Сделайте ссылку, добавив немного скрипта: href="javascript:void(0);"
<a href="javascript:void(0);" onclick="функция;">CLICK</a>
или
<a href="#" onclick="функция;return false;">CLICK</a>
http://kobzarev.com/makeup/tabs-in-pure-css.html
padding: 100% 1% 0 99%;
поменять на
margin-left: 7%; /* своё значение */
padding: 100% 99% 0 1%;
И перенести гаджет вправо.
Вот код: http://notepad.cc/kod-detsle
scrollBottom() < 300
scrollTop() > 100
на свои значения.
$("#back-top").hide();
$.fn.scrollBottom = function() {
return $(document).height() - this.scrollTop() - this.height();
};
$(function () {
$(window).scroll(function () {
if ($(this).scrollBottom() < 300) {
$('#back-top').fadeOut();
} else {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
}
});
});
});
<script>
vverh()
setInterval(vverh,1);
function vverh() {
Height = document.documentElement.scrollHeight - '800';
document.getElementById('vverh').style.display = (window.pageYOffset < Height && window.pageYOffset > '200' ? 'block' : 'none');
document.getElementById('raz').innerHTML = Height;
}
</script>
:( Что за проблема и как решить, подскажите,потому что кнопочка очень нужная.
Татьян, ещё сверься с кодом, я его довольно сильно изменила.
блог http://www.tanyabatrak.com/
код такой
http://nechipuruk.blogspot.com/p/blog-page_5044.html
Заранее спасибо
Подскажите пожалуйста, как вылечить этот недуг?
Код: http://pastebin.ca/2428073 (HTML/JavaScript с кодом расположил под виджетом "сообщения блога")
Блог: http://nechipuruk.blogspot.com/p/blog-page_5044.html#
a#vverh {
display: none;
position: fixed;
margin-left: -7em;
bottom: 0;
font: 11px/100% Arial, Helvetica, sans-serif;
text-decoration: none;
color: #bbb;
transition: 1s;
}
a#vverh:before {
position: absolute;
content: url(http://3.bp.blogspot.com/-Q0hVWzKDCJo/Tpar8l5wvJI/AAAAAAAACZ4/LbpuEBAIQAU/s60/strelka.png);
margin: -55px 0 0 -12px;
}
a#vverh:hover {
color: #000;
background-color: rgba(0,0,0,.3);
}
Или так
a#vverh {
display: none;
position: fixed;
left: 20px;
bottom: 0;
font: 11px/100% Arial, Helvetica, sans-serif;
text-decoration: none;
color: #bbb;
transition: 1s;
}
a#vverh:before {
position: absolute;
content: url(http://3.bp.blogspot.com/-Q0hVWzKDCJo/Tpar8l5wvJI/AAAAAAAACZ4/LbpuEBAIQAU/s60/strelka.png);
margin: -55px 0 0 -12px;
}
a#vverh:hover {
color: #000;
background-color: rgba(0,0,0,.3);
}