Показаны сообщения с ярлыком CSS. Показать все сообщения
Показаны сообщения с ярлыком CSS. Показать все сообщения

24 янв. 2014 г.

Кнопка наверх на blogspot.

Кнопка наверх на blogspot/blogger.

 На фейсбук, просматривая страницу с анонсами своих друзей, прокручивая вниз колесо мыши и дойдя до последней новости, нет такой возможности, как например на VK, переместится одним нажатием клавиши обратно к шапке.
Для меня откровенно говоря это остается тайной покрытой мраком.
До этой поры и на моих блогах на blogspot/blogger не было этого функционала.
Сначала постов было не так много, потом другие заботы или ещё что.
Теперь, немного кода для практики.

<a href="#" id="toTop">
<img src="http://db.tt/4ITg1D7M" border="0" align="absmiddle" /></a>
<script src="http://www.dropbox.com/s/h6y2ne35lgpdl7x/up.js"
type="text/javascript"></script>
<script type="text/javascript">
$(
function
() {
$(
"#toTop"
).scrollToTop();
});
</script>

Этот код необходимо вставить между тегами <body> </body> в шаблоне своего блога.
Саму картинку можно заменить на любую свою, только нужно помнить, что прозрачность поддерживают только GIF и PNG формат.
JS-файл, так-же можно скачать прямо по этой ссылке, и загрузить на свой сайт.
Теперь, значок стрелки для мгновенного перехода, указывающей наверх, будет виден в левом нижнем углу когда ползунок опустится в самый низ.
Если добавить стили,
#toTop {
position: fixed;
bottom: 5px;
right: 10px;
background: none;
cursor: pointer;}

то значок зафиксируется в правой нижней части блога, и не будет необходимости докручивать ползунок до конца страницы.
Этот вариант, на мой взгляд практичнее, но в зависимости от других составляющих, могут быть накладки.
Пробуйте, только так и можно понять, как будет оптимальнее.


11 февр. 2013 г.

CSS часть 2

Ещё раз благодарю автора сайта sozdaiblog.ru © Дениса Черникова.
Код для вставки стилей на свои страницы, и ещё много интересного, вы сможете узнать и скачать с сайта автора.

Cтили.

 Cкачал стили с sozdaiblog.ru, (спасибо автору ©) и теперь слегка изменив картинки, буду экспериментировать на этом блоге.
Пункты меню имеются, нужна привязка перенаправления ссылок.
Первым делом, необходимо загрузить и получить адреса своих картинок.
Затем, вставляем этот код в то место блога, в котором он должен будет находиться.

<ul class="mh-menu">
<li><a href="Ссылка http://buxip.blogspot.ru/"><span>Главная</span></a><img alt="Home" src="Путь к фото https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggvU-l_ScgKD5lWhHYfbvc3VlUWIB-44kL34VE3BhLz6o3hvJuepGsDMYUUN6h3etcVWNCpJgt50AGsrBiYtJUUGtLsB-wTEHBFuBU9U5mvNO0A52GnUKRgYB348Fdsy3W271WwS20_nE/s468/Home.png" /></li>
<li><a href="Ссылка http://buxip.blogspot.ru/p/blog-page.html"><span>Мои фото</span></a><img alt="FotoRama" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjycP7qUlWh1F5sKbVI_yDvJJd3BkfxGR8kIPGebUMip4iGGkpBOaIpdy-8KFCiNS1lN-FNRVwYUuiwkejPcqPZgSCJRSWnu6ofeuxo0ZBrNp84S_An0Bw6fYpR42aUIOCBkE4y-RF4BEo/s468/FotoRama.png" /></li>
<li><a href="Ссылка http://buxip.blogspot.ru/p/blog-page_25.html"><span>Чат</span> <span>Интерактивный чат</span></a><img alt="Chat" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_qfYGPi9YTc3vkkN4-vC82a11lfCtqviWgFGmzrXua2erhoILCwDlPiEv-NLqUnp6TUyR1kyCX98rovu6_GzJdeCRYjd8PjnXvrAYXifyOW0Hi_pZt-Y1ZVdMMWaWk5F5KYXm-zOz9B8/s468/chat.png" /></li>
<li><a href="Ссылка http://buxip.blogspot.ru/p/blog-page_5029.html"><span>Авторизация</span> <span>Страница авторизации</span></a><img alt="Avtorizacia" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEwPjcYTD-C76su8csNUFPiFb9UzhHYbt_oKEbWmn1nB3kHo1aDME6gYSUx3tUu3_IebiM0lZL6kc77726uFRoMJtj-KhYNd5FVh8u55ZBaGEt0GtzBC8c3I70pSPoomPo7gSgc1bmBvc/s468/Avtorizacia.png" /></li>
<li><a href="Ссылка http://buxip.blogspot.ru/p/sitemap.html"><span>Sitemap</span> <span>Карта сайта</span></a><img alt="Sitemap" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvbbE9S436X3ZvcIMvJcNja5wQmEM7jv5581SnIVUZEqiqU0mzSZ_ctRermBwaQLSU090i5H5TSqkQKlUh-mbKCh_92Bk5eZMaiLwcdVYSVf2U67aLLLTH1SMFWTYaSar8_FIclAdsb8Y/s468/Sitemap.png" /></li>
</ul>



Далее, правим и добавляем в шаблон CSS и смотрим что получилось.
В этом посте, не заработало, зато в следующем все функционирует.