Здравейте всички мои редовни читатели и гости. В малък панел, позициониран в дъното на блога, можете да благодарите на читателите за посещението или да дадете хипервръзки, съобщения, предупреждения, както и друга важна според вас информация.
Във всички изброени възможности, панелът не изглежда натрапчив и лесно може да бъде затворен, ако някой има желание за това.
Редактирането на кода е лесно. Можете да промените основния цвят на панела на желан от вас или да промените други негови стилове. Те са маркирани в кода с коментар.
За да го видите, копирайте предложения по-долу код в неговата цялост и го инсталирайте в този редактор. Използвайте и този генератор на цветове.
В моя пример има хипервръзка към главната ми страница.
➤Това, което е маркирано в червено е желаният от вас показващ се текст;
➤В синьо е хипервръзка към конкретна страница;
➤Инсталирайте кода в притурката HTML / JavaScript в долната част на блога.
Такъв фиксиран панел в долния колонтитул на Blogger не е само един простичък трик. Освежава дизайна и може да задържи читателя в блога ви, както и да го насърчи да следва хипервръзките, публикувани в него.
Вярвам, че и днес съм била полезна на някои от вас.
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:
Доскоро!
Във всички изброени възможности, панелът не изглежда натрапчив и лесно може да бъде затворен, ако някой има желание за това.
Редактирането на кода е лесно. Можете да промените основния цвят на панела на желан от вас или да промените други негови стилове. Те са маркирани в кода с коментар.
За да го видите, копирайте предложения по-долу код в неговата цялост и го инсталирайте в този редактор. Използвайте и този генератор на цветове.
В моя пример има хипервръзка към главната ми страница.
<style>#sticky-footer {
border-bottom: 1px solid #666666; /* цвят на рамката */
background: #FEE680; /* цвят на основния фон */
font-size: 16px; Tahoma /* размер и вид на шрифта */
color: #666666; /* цвят на шрифта*/
padding: 10px 20px;
position: fixed;
bottom: 0;
left: 0;
z-index: 2000;
width: 100%;
text-align: center;
}
#sticky-footer a {
font: normal 18px Trebuchet MS;
text-decoration: none;
}
#close {
width: 20px;
height: 20px;
background: url(https://findicons.com/files/icons/1620/crystal_project/16/button_cancel.png) top no-repeat;
border: none;
margin: 3px 0 0 15px;
position: absolute;
cursor: pointer;
}</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.js"></script>
<script type="text/javascript">
$(document).ready(function() {
(function() {
//settings
var fadeSpeed = 200, fadeTo = 0.5, topDistance = 30;
var sibar = function() { $('#sticky-footer').fadeTo(fadeSpeed,1); }, stbar = function() { $('#sticky-footer').fadeTo(fadeSpeed,fadeTo); };
var inside = false;
//do
$(window).scroll(function() {
position = $(window).scrollTop();
if(position > topDistance && !inside) {
//add mouseover events
stbar();
$('#sticky-footer').bind('mouseenter',sibar);
$('#sticky-footer').bind('mouseleave',stbar);
inside = true;
}
});
//close
$('#close').live('click', function(event) {
$('#sticky-footer').toggle('show');
});
})();
});
</script>
<div id="sticky-footer">
<a href="https://www.blogzablogove.com" target="_blank">Благодаря за посещението!!! Очаквам Ви пак!!!</a>
<span id="close"></span>
</div>
border-bottom: 1px solid #666666; /* цвят на рамката */
background: #FEE680; /* цвят на основния фон */
font-size: 16px; Tahoma /* размер и вид на шрифта */
color: #666666; /* цвят на шрифта*/
padding: 10px 20px;
position: fixed;
bottom: 0;
left: 0;
z-index: 2000;
width: 100%;
text-align: center;
}
#sticky-footer a {
font: normal 18px Trebuchet MS;
text-decoration: none;
}
#close {
width: 20px;
height: 20px;
background: url(https://findicons.com/files/icons/1620/crystal_project/16/button_cancel.png) top no-repeat;
border: none;
margin: 3px 0 0 15px;
position: absolute;
cursor: pointer;
}</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.js"></script>
<script type="text/javascript">
$(document).ready(function() {
(function() {
//settings
var fadeSpeed = 200, fadeTo = 0.5, topDistance = 30;
var sibar = function() { $('#sticky-footer').fadeTo(fadeSpeed,1); }, stbar = function() { $('#sticky-footer').fadeTo(fadeSpeed,fadeTo); };
var inside = false;
//do
$(window).scroll(function() {
position = $(window).scrollTop();
if(position > topDistance && !inside) {
//add mouseover events
stbar();
$('#sticky-footer').bind('mouseenter',sibar);
$('#sticky-footer').bind('mouseleave',stbar);
inside = true;
}
});
//close
$('#close').live('click', function(event) {
$('#sticky-footer').toggle('show');
});
})();
});
</script>
<div id="sticky-footer">
<a href="https://www.blogzablogove.com" target="_blank">Благодаря за посещението!!! Очаквам Ви пак!!!</a>
<span id="close"></span>
</div>
➤Това, което е маркирано в червено е желаният от вас показващ се текст;
➤В синьо е хипервръзка към конкретна страница;
➤Инсталирайте кода в притурката HTML / JavaScript в долната част на блога.
Такъв фиксиран панел в долния колонтитул на Blogger не е само един простичък трик. Освежава дизайна и може да задържи читателя в блога ви, както и да го насърчи да следва хипервръзките, публикувани в него.
Вярвам, че и днес съм била полезна на някои от вас.
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:
Доскоро!
Много приятно стои в сайт. Някой път със сигурност ще го ползвам.
ОтговорИзтриване+1, Благодаря Ви!
Благодаря. Всъщност, ако подходите мъдро и красиво оформите панела, той ще привлича вниманието.
Изтриване