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

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

1. Код за първи вариант
2. Код за втори вариант
3. Код за трети вариант
4. Настройки

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

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

<style>

#bluemenu { border: solid 1px #39F; background:#64DAFC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh-knme6S1DSPzGSNA6ppw_GvtTOq4_bBALXRKjWtidJwcTq7GYQq37EM06CE10wW76eI3BkJadzKgCfGwsdyIZrE9ECY6NWVrOJdxfIW1KXq2n_jdQliTNoHw2FsBElLCx7K2d7rsudc/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/AVvXsEgxmAIgbVsyMNeedNEL5obCdcYfFow7fCyu34lPTyVJ70AQDjsZ1IMZTrFXBHMXm1p9Yg8K2NWiHfpgpxitMciNHwoDQRy8mjStxdLBvbV0SSSJTSZaD6Ud8NRuOxQe_-5mPPYsI7AFeDA/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/AVvXsEgHygnR4JhhcvlN-QuKNclbcN5N_RXsTNoNF58kECEOwRpAwJZwiKyaRNFcO2xROGsO8X2rT4apgGsvAcJm9VRyByvUg4DCHEEeKpNoSdMBztGwCnY7pCtfh51hJx8srC8p5i-6u1mFdaY/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/AVvXsEja8jqUGbzZsyB97-EGLdk4oSmoVnHBQbuWwkVYMQYsS5Lsw9loHO6Nmb2zdOqUkniXQIxKsXU35JTV2bgtgdyeodCq4PaF70CqmF40dXSbhzc80y6w9wAPld4r3RRyhX7iQ8WCLCuvOq8/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/AVvXsEj2q7YU6tGfO7GL9aaBPqtWMv0UivqLvalGHjNqAtC76_W9hzwaPJFfY7cEH0NhhJ-H1hHKauunTX17s2i4U13uMJqUhAHz4fMxnG1C3QwFYSHbzzxKgBK3GU4_GJ4W0ESJE4qskZjos-E/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/AVvXsEirHFRPflEZGANbXCD2oscJ82NfGbbaYjFOTzSIf8B64OGw8pMP3cBm8Kj61r-c3XX-Wp4YyUxAcLVGy-rseLKvVHki8imfLiAlsRPmNwuItZ9NI5Bb7xaPi5m9-39GDD-mHShK0wGpn64/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 и я преместете на желаното място в оформлението на блога;

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

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

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

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

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