Фиксирана притурка
Със сигурност сте срещали уеб страници, в които, ако превъртите надолу, показват фиксиран HTML обект винаги на преден план. Това поведение може да бъде постигнато чрез прилагане на свойството position:fixed; към HTML елемента. В тази публикация ще видим как да поддържате винаги видима притурка в страничната лента, когато превъртате надолу по страницата. И ще имате различен дизайн на блога си.Ще бъде използван Javascript, който по принцип не може да бъде повторен, в смисъл, че само една притурка може да се поддържа фиксирана, но не две или повече, защото биха се припокривали.
За тези, които мислят да използват тази техника за поддържане на рекламни блокове на преден план, не забравяйте, че това е техника, която не е разрешена от някои партньорски програми, като Google.
Ето защо ви съветвам да не държите рекламни елементи фиксирани на преден план, освен ако не сте получили изрично съгласие за това.
Всички видове приспособления могат да се поддържат фиксирани и винаги на преден план.
Инсталиране
Ще е необходимо само да се знае техния идентификатор, за да се вмъкне в кода на JavaScript. Накратко да си спомним как да намерите идентификационния номер на притурка в Blogger. За пример да видим ID на притурката „Етикети“.➤Отворете началната страница на админ панела Оформление ➔ Етикети ➔ Редактиране;
➤В отворения прозорец, най-горе, се чете ID на притурката;
Всички притурки, предлагани от Blogger, имат определен идентификационен номер, или конкретно наименование. Например, за архива е BlogArchive1, за "Етикети" е Label1, PopularPosts1 за "Популярни публикации" и така нататък. Най-често срещаните приспособления са тези HTML / Javascript, които са посочени с номера на създаването им, който зависи от реда, в който са инсталирани.
Познаването на идентификационния номер на притурката е от съществено значение, за да я държите винаги на преден план.
➤След като направите резервно копие на темата, отидете на Тема ➔ Редактиране на HTML кода и кликнете върху кодовата област;
➤Въведете Ctrl + F, за да видите полето за търсене;
➤Поставяте в него </body> и след това отивате на Enter.
Код
Този ред ще бъде маркиран и веднага над него поставете този код.
<script type='text/javascript'>
//<![CDATA[
flot_widg("ID");
function flot_widg(elem) {
var wdg_fl = document.getElementById(elem);
var scroll_wd = document.createElement("div");
wdg_fl.parentNode.insertBefore(scroll_wd, wdg_fl);
var width = wdg_fl.offsetWidth;
var tipo_wd = wdg_fl.className + ' wdg_fl';
window.addEventListener('scroll', flott_widget, false);
function flott_widget() {
var rect = scroll_wd.getBoundingClientRect();
if (rect.top < 0) {
wdg_fl.className = tipo_wd + ' flott_widget';
wdg_fl.style.width = width + "px";
} else {
wdg_fl.className = tipo_wd;
}
}
}
//]]>
</script>
<style type='text/css'>
.flott_widget {background:#fff !important; position:fixed; top:0; z-index:99999;}
</style>
//<![CDATA[
flot_widg("ID");
function flot_widg(elem) {
var wdg_fl = document.getElementById(elem);
var scroll_wd = document.createElement("div");
wdg_fl.parentNode.insertBefore(scroll_wd, wdg_fl);
var width = wdg_fl.offsetWidth;
var tipo_wd = wdg_fl.className + ' wdg_fl';
window.addEventListener('scroll', flott_widget, false);
function flott_widget() {
var rect = scroll_wd.getBoundingClientRect();
if (rect.top < 0) {
wdg_fl.className = tipo_wd + ' flott_widget';
wdg_fl.style.width = width + "px";
} else {
wdg_fl.className = tipo_wd;
}
}
}
//]]>
</script>
<style type='text/css'>
.flott_widget {background:#fff !important; position:fixed; top:0; z-index:99999;}
</style>
➤Впишете ID на желаната от вас притурка на мястото в кода, маркирано е в червено;
➤След това запазете промените в кода на темата;
Вместо заключение
Като пример вижте моята фиксирана притурка „Етикети“.Вече имате дизайн, по-различен от този на други блогове.
За въпроси моля, в коментарите. А може и на тази страница. Ще съм благодарна да оцените моя труд. Моля, гласувайте за блога ми на:
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Няма коментари:
Публикуване на коментар