Едно просто решение за скрит текст в публикация

Здравейте, приятели. Спойлер за блога на Blogger, Blogspot. За това ще говорим днес. Какво е спойлер? Аз ще разкажа накратко за тези, които не знаят. Спойлерът е такава част от дизайна, която съхранява част от съдържанието в публикация на блога или сайта, първоначално скрита за потребителя. При кликване върху връзката линка се отваря и се открива целият текст.
Между другото, до този момент аз още не бях използвала нито един вариант на спойлер в моя блог. Днес ще ви демонстрирам скрита в спойлер част от текста на тази публикация.

Защо спойлер?

Защо да използваме спойлер в съдържанието на нашите публикации? Като цяло, за красота. Иначе, за да се пести място. Например, дизайна на блога не предполага поставяне на голям текст на началната, пък и на всички останали страници. Но както се казва, по-добре да се види веднъж, отколкото да се чуе сто пъти. Вижте по-долу пример на спойлер, който просто се поставя във редактора на публикацията и едновременно можете да видите в същото време и неговия код. Публикувам това мое кратко мнение не само за себе си. Така няма да се загубя в "километрични" отметки. А и за вас, които четете тези редове.

Първи вариант

Натъкнах се и на едно много просто и ефективно решение - да се скрие текста без JavaScript или JQuery. Повярвайте ми, по-лесното решение не съм виждала! Намерих го в един прекрасен блог, така че го препоръчвам, особено на собствениците на блогове на Blogger, Blogspot.

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<b>Натиснете, за да прочетете</b>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.

value = 'Open'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Open/Close" /> </div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;"> <div style="display: none;"> Тук е вашият текст, картинка или скрипт <br>
</div>
</div>

</div>

Втори вариант

ПРОДЪЛЖИ

А това е вариант с възможност за промяна на цветовете на бутона. Червеният цвят е мястото в кода за неговата промяна. За персонализиране на цветове е най-добре да се ползва таблица на цветовете или таблица с кодове на безопасните цветове.

<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"><br />
<br />Вашият текст за показване </div>

Приятели, ако някой от вас знае и има код за други видаве спойлер, моля да ми пише в коментарите.

Вярвам, че ще успеете!

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

Ще съм благодарна да оцените моя труд и гласувате за блога на: