4

Приветствена страница в блога

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


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

    Инсталиране

    Копирайте този код и го проверете с моя инструмент.


    <b:if cond='data:blog.homepageUrl == data:blog.url'>
    <div class='visibile' id='benvenuto' style='z-index:99999; position:fixed; top: 0; left: 0; overflow:visibile; width:100%; height:100%; background: #ffffff;'>
    <div style='width:600px; height:400px; position:absolute; top:40%; left:40%; margin-left:-300px; margin-top:-200px; padding:100px 30px 0px 0px; color:#B22400; font-size:24px; line-height:24px; text-align:center;'>
    <p><strong>ЗДРАВЕЙТЕ И ДОБРЕ ДОШЛИ!!!!</strong></p>
    <p><strong>РАДВАМ СЕ, ЧЕ СТЕ ТУК!</strong></p>
    <p><strong>СЛЕД СЕКУНДА БЛОГЪТ ЩЕ СЕ ОТВОРИ</strong></p>
    </div>
    </div>
    <script type='text/javascript'>
    window.load=setTimeout(&quot;mostranascondi(&#39;benvenuto&#39;)&quot;, 5000);
    </script>

    </b:if>



    За да реализирате приветствената страница, трябва да отидете в раздела Тема и да намерите маркера <body> в нейния код. В някои теми вместо <body> съществува този ред:

    <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

    Веднага след маркера  или този ред инсталирайте посочения по-горе код.
    Близо до този маркер намирате друг маркер, затварящия </head>. Над него впишете още един код, този път по-кратък:


    <style type='text/css'>
    .visibile {display:block;}
    .invisibile {display:none;}
    </style>
    <script type='text/javascript'>
    function mostranascondi(identificazione){
      var menu = document.getElementById(identificazione);
      if(menu.className == &quot;visibile&quot;){menu.className = &quot;invisibile&quot;; }
      else{ menu.className = &quot;visibile&quot;; }
    }
    </script>



    Настройки

    В първия код може да се редактира следното:

    ➤В редовете, отбелязани в червено, напишете текста си;

    ➤Адресът на изображението е маркиран в синьо;

    ➤5000 е времето в милисекунди, за което съобщението остава видимо, докато не изчезне;

    ➤background: #ffffff; е цвят на фона на страницата;

    ➤width: 600 px; height: 400 px са ширина и височина;

    ➤top:40%; left:40%; е процентната точка на оформлението, откъдето започва съобщението;

    ➤color:#B22400; - цвят на текста;

    ➤font-size:24px; line-height:24px; е размерът на символите и редовете в текста;

    ➤text-align: center; е за центриране на съобщението и поставеното изображение;

    След инсталирането на кодовете не забравяйте да запазите промените в кода на темата и да видите резултата.
    Между другото, съветвам ви да помислите - в навечерието на предстоящ празник можете да използвате този поздрав към читателите или да направите чрез този трик важно съобщение.

    Успех на всички ни!

    4 коментара :

    1. Илияна Цолова4 април 2019 г., 6:02 ч.

      Здравейте, много е интересно, ще пробвам този трик.

      ОтговорИзтриване
      Отговори
      1. Радвам се, че ви допада, ще чакам още известия от вас. Поздрави.

        Изтриване
    2. Наистина свежо предложение, благодаря! +1

      ОтговорИзтриване


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