0

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

Здравейте, приятели. Спойлер за блога на 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>




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

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

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

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


    Copyright © БЛОГ ЗА БЛОГОВЕ©2016- | All Rights Reserved
    Използването на Blogzablogove.com означава, че сте съгласни с нашата Политика на конфиденциалност и защита