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

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


    Видях много интересни варианти на оформление на такава приветствена страница. Не отвлича вниманието и не дразни. Просто ти се иска да останеш и да я разгледаш. Този трик е лесен за изпълнение и в 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><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9PuppaJMs1ZBVHTwvqpcRWD0EGtHyIwvZHsl8HxS7MlDRqBWzg7r2wpt1UmTcudgqB9-rzPPdbr17R6BwaX5QNBEtUoulj7tqwqG3Ao9fHbWKMTwrelY0AU26hMBEsUnexSMNQfyJC_c/h261/privetstvie.jpg'/></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; е за центриране на съобщението и поставеното изображение;

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

    Успех!

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

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

    BGtop

    Tags: Страници, Blogger
    OpenCloseComments

    4 Komentar

    Cancel