0

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

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

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

И така, за да добавим спойлер в публикацията си трябва да отворим контролния панел. Припомням за резервното копиране на темата.
Влизаме в раздел тема ➔ редактиране на 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>



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

Доскоро!

Няма коментари :

Публикуване на коментар

Ако имате необходимост да вмъкнете HTML код в коментара си, моля използвайте един от инструментите в основното меню - Конвертор на HTML кодове.


Copyright © БЛОГ ЗА БЛОГОВЕ©2016-| Original style & code - magentawave.com | All Rights Reserved