За блог на платформата Blogger (blogspot). Създаване, водене, персонализиране, дизайн, притурки в примери. Препоръки и съвети за начинаещи и напреднали блогъри.

Търсене

Breaking

Три варианта на хоризонтално меню за Blogger

Три варианта на хоризонтално меню
Здравейте всички. Представям ви три варианта на хоризонтално меню за блогове в платформата Blogger. Менюто е лесно за инсталиране и настройки, а и можете да използвате своето собствено изображение за фон. За да си изберете едно меню от трите варианта, копирайте всеки код и използвайте редактора за проверка на скриптовете и HTML кодовете.



    Но за всеки случай погледнете и този скриншот.



    Код за първи вариант


    <style>
    #bluemenu { border: solid 1px #39F; background:#64DAFC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhShqNaiP31MmVi3vu_k5t3Z6zeo7i4x3dNK8uWnWqC5U0iS-DeJIt6KOTOBL1J302nuIGrnzub51VCxRDIt8qfkxa-ATiUosLXS4R-pCxBWxJTR1cLuzPDXngPpJN05iEZLpYRlIi8Xxk/h120/bluebg.gif) repeat-x; }
    #menublues{ font-size:14px; }
    #menublues ul, #menublues li{ display: inline; list-style-type: none;padding: 0;margin: 0;border:0;background-image:none; }
    #menublues a{ text-align: center; display: inline-block; font: italic 14px Arial; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBWLWdtcfMDyr7eSBRh3xvahUbB-diY_D_qihszfP_bFOyJgB4jQ6tC9riM_cw2T0FY9fetSZ-Xfvs-a8qwO3HKRMpMF0XM6lp1Ce5dJ91NbsE9UBo5OYmZZeM3doGb4em5yAex1MdQXs/h108/blue.gif') no-repeat left top; padding: 10px 20px; color: #fff; text-decoration: none; }
    #menublues a:hover, #menublues a.current{ background-position: 0% -60px; color: #fff; }
    #menublues a.end{ width:2px; padding-left:0;padding-right:0; }
    </style>
    <div id='bluemenu'><div id='menublues'>
    <a href='#'><i>Начална страница</i></a>
    <a href='#'>Всички статии в блога</a>
    <a href='#'>Притурки, виджети, гаджети</a>
    <a href='#'>Дизайн</a>
    <a href='#'>Меню</a>
    <a href='#'>Robots txt</a>
    <a href='#'>Sitemap</a>
    <a href='#'>Групи в Google+</a>
    <a class="end">&nbsp;</a>

    </div></div>


    Код за втори вариант


    <style>
    #greenmenu { border: solid 1px #52e052; background:#64DAFC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKSwXBlnHobEKfF8kwSgRV2FAQw_X6uZnN3gLaLV0XRQ3k15p6kuDsCMnGrU9dr76pNEfAI5tgGdzCJRMJ8XSwACx3Q0Z2j1wg1OgkpXQiXKT3dYcoX1Gsqc8ja3tJZjeukFzluBBKcYs/h120/greenbg.gif) repeat-x; }
    #menugreen{ font-size:14px; }
    #menugreen ul, #menugreen li{ display: inline; list-style-type: none;padding: 0;margin: 0;border:0;background-image:none; }
    #menugreen a{ text-align: center; display: inline-block; font: normal 14px Arial; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqNj1rXwh5ep06MonrcvIRhgPyPb1P_ypYS9mj6bG8vATs0j2BZuGkKjulpDJb4hRztrQVIXSmf6W0fIMay8Ws8Yk8EnlJbGGDjrf3F_jOcrcBqH_izFcPvBgPZycq0w_7dQgHxGZsDqs/h108/green.gif') no-repeat left top; padding: 10px 20px; color: #fff; text-decoration: none; }
    #menugreen a:hover, #menugreen a.current{ background-position: 0% -60px; color: #fff; }
    #menugreen a.end{ width:2px; padding-left:0;padding-right:0; }
    </style>
    <div id='greenmenu'> <div id='menugreen'>
    <a href='#'>Главна страница</a>
    <a href='#'>Съдържание</a>
    <a href='#'>Връзка с автора</a>
    <a href='#'>Партньорски програми</a>
    <a href='#'>CSS</a>
    <a href='#'>HTML</a>
    <a href='#'>HTML5</a>
    <a href='#'>Соцални мрежи</a>
    <a class="end">&nbsp;</a>

    </div></div>


    Код за трети вариант


    <style>
    div.redmenu{ background:#9A0000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwntPbwQqttiSQXvg9YOtoyrC8Itmslknj2GZF8uRpD47ZVm7_BYi2NiRanUyYXuJISOOEq6jpwNx7W-CoirQ1dWAeHwBy7PlXO_Pe24upTnhQNEhx-ioNnl2GtOyWXv9ggKXwY-F7v3w/h120/bg1.gif); border:1px 
    solid #000; font-size:14px; }
    div.redmenu a{ display: inline-block; padding: 0 20px; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8i7Ir7PMEo9QbBXw0w1akdpAcdDCrK5e-1anr7aj3e2Kw4kZxyg69pK-RF7Y4OzSv7ICF7XvkYixeLNkoE30hCbzXALMOEhV_XJuAWVFAlg9oUk_iF4JdfYibF5J-G9jtk-JzIrXFDZs/h108/bg.gif);
    color:#fff; text-decoration:none; font:italic 14px Arial; line-height: 32px; }
    div.redmenu a:hover, div.redmenu a.current{ background-position:0 -60px; }
    div.redmenu a.end{ width:2px; padding-left:0;padding-right:0; }
    </style>
    <div class='redmenu'>
    <a href='#'>Главна страница</a>
    <a href='#'>Контакти</a>
    <a href='#'>Карта на блога</a>
    <a href='#'>HTML</a>
    <a href='#'>CSS</a>
    <a href='#'>Програми и инструменти</a>
    <a href='#'>Видео</a>
    <a href='#'>Форум</a>

    <a class="end">&nbsp;</a></div></div>

    Настройки

    ➤Променете настройките, като въведете имената на връзките и URL адресите на страниците;

    ➤Кодът на избраното от вас меню вмъкнете в притурка HTML/JavaScript и я преместете на желаното място в оформлението на блога;

    Ще отговоря на всички въпроси относно инсталирането и конфигурацията на менюно в коментарите. Контактната форма на блога ми също работи.

    Благодаря за посещенията и обратната връзка, споделете с приятелите си в социалните мрежи.

    Всичко най-хубаво. Доскоро.

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

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

    BGtop




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

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