Спойлер в публикация на блог

Здравейте! Е, вече сте научили много, но дори и половината път не сме минали с вас, скъпи приятели. В нашия "склад" все още има много различни и прекрасни трикове, за подобряване на дизайна и работата на шаблона. В последната публикация обсъдихме как да разделим текст в публикация на колони. Днес ще се поговорим за вече познато ни приспособление, използваемо в съдържанието на публикацията, спойлер.

Чрез него можем да скрием не само текст, но също така и видео, изображения, таблици и други части от съдържанието на една публикация. Често се случва в наша публикация ние да разположим много различни елементи. И всеки да изглежда приятно. А за някои от тях би било хубаво да се скрият под спойлер. За това, как можете да добавите към вашия блог стилен спойлер ще говорим пак днес. Не е трудно да се инсталира спойлер и самия процес на добавяне е много подобен на този, който разгледахме в гореспоменатата публикация за колоните в текста. За тези от вас, които не си спомнят как изглежда спойлера, съм приготвила връзка към един тестови блог.

И така, за да добавим спойлер в публикацията си трябва да отворим контролния панел. Припомням за резервното копиране на темата.
Влизаме в раздел тема ➔ редактиране на HTML кода ➔ търсим реда ]]></b:skin>. Поставяме следния код пред него:

#flippy {

text-align: center;

}

#flippy button {

background: #4DB2EC;

color: #fff;

text-align: center;

margin: 0 auto;

border: none;

border-radius: 3px;

padding: 8px 16px;

margin: 10px auto;

font-size: 14px;

font-weight: bold;

vertical-align: middle;

cursor: pointer;

text-shadow: 0 1px rgba(0, 0, 0, 0.3);

transition: background 0.1s ease-in-out;

}

#flippy button:hover, #flippy button:focus {

background: #5A6269;

outline: none;

}

#flippanel {

padding: 1px;

text-align: left;

background: #;

border: 0px;

}

#flippanel {

padding: 24px;

display: none;

}

След това записваме промяната в темата и при създаването на публикация, за да добавим спойлер в текста, използваме на съответното място следния малък код:

<div id="flippy"><button>Спойлер</button></div>

<div id="flippanel">

Тук е вашето съдържание

</div>

Добавихме кода, публикувахме и проверяваме какво сме направили. Сега не е трудно да скрием тази част от публикацията си, която не се вписва добре в нейния интериор.

Този спойлер има и един недостатък. А той е, че не може да се използва два пъти в една и съща публикация. Това се дължи на факта, че когато неговото ID се повтаря, то спойлера, който е добавен първи вече няма да работи. Поради това на тези от вас, на които се налага да използват спойлер няколко пъти в една публикация, предлагам да използват друг, различен спойлер, макар че той не е толкова красив, колкото първия.

Така че всеки път, когато искате да скриете съдържание в спойлер, създайте нова публикация и в режим редактиране на нейния HTML код добавете следното:

<div><input value="Показване на съдържанието" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.value = 'Скриване на съдържанието';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Показване на съдържанието';}" type="button" /><div style="display: none;">Сложете тук кода на съдържанието, което искате да скриете</div></div>

Или това. Всъщност, което си изберете.

<center>

<style>

#no-div, .no { display: none; }

.no + label { /* вид CSS бутон */

background: #4e6473;

padding: 9px 10px;

border-radius: 2px;

color: #fff;

cursor: pointer; }

.no:checked + label { background: #e36443; }

.no:checked ~ #no-div { display: block; }

</style>

<input type="checkbox" id="raz" class="no"/><label for="raz">Къде е текста? - кликни!</label><div id="no-div"> тук е вашето съдържание</div>

</center>

Надявам се да съм ви била полезна.

Доскоро!

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: