Для упрощенной навигации по сайту мы сегодня с вами научимся ставить горизонтальное меню на блог от bloger
Такое меню вы можете увидеть на данном блоге сверху!
Итак начнем!
Переходим Настроить Дизайн.
Дальше добавляем гаджет
Выбтраем HTML/JavaScript
И вставляем следующий код
<style>
#bluemenu { border: solid 5px #32F; background:#64DAFC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0g4By0e5uSJ_f-F9aeqM3P62liWl9u7-jjdTwyEmfcOInG1yfKPj886zCAR7yEb01yXq0OwnPU3MayxKsJ8C1_S0OfW5x4gROFkJ3DU09kuKYdMgj8jYUfNV9s6csMkaU_dJXHqhQqwo/h120/bluebg.gif) repeat-x; }
#menublues{ font-size:0; }
#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: normal 15px Arial; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvkKmPMvc1thHRCOkiSwIMITFkIY3d48darOYtYsroIddJOAuzyX6c4NjFJRXL8TYItMS2rdoKR6O1MArrh8anIPz47zVE74Kh0ewZHv6_yiJqEbZl7AufxWmdznZ1z1F74BVOIvbY-vU/h108/blue.gif') no-repeat left top; padding: 10px 20px; color: #fff; text-decoration: none; }
#menublues a:hover, #menublues a.current{ background-position: 0% -50px; color: #fff; }
#menublues a.end{ width:4px; padding-left:0;padding-right:0; }
</style>
<div id='bluemenu'> <div id='menublues'>
<a href='http:///'>Главная</a>
<a href='http://'>Новичку</a>
<a href='http://'>Зароботок на своем сайте</a>
<a class="end"> </a>
</div></div>
Красным цветом я выделил HTTP туда нужно вставить www.gshjsj.blogspot.com Это пример его копировать не нужно. туда нужно вставить http той страници куда вы хотите что бы перекидывало после нажатия на пункт меню!
Синим я выделил название пунктов.У меня они свои у вас могут быть свои!
Можно добавлять множество пунктов Для этого вставляем в данный код еще
<a href='http://'>название пункта</a>
Вставлять подпункты нужно до кода <a class="end"> </a>
</div></div>
Дальше сохраняем гаджет и перетягиваем его и устанавливаем над сообщения блога над
Так же вы можете менять цвета меню! Но об этом в следующий раз!
Такое меню вы можете увидеть на данном блоге сверху!
Итак начнем!
Переходим Настроить Дизайн.
Дальше добавляем гаджет
Выбтраем HTML/JavaScript
И вставляем следующий код
<style>
#bluemenu { border: solid 5px #32F; background:#64DAFC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0g4By0e5uSJ_f-F9aeqM3P62liWl9u7-jjdTwyEmfcOInG1yfKPj886zCAR7yEb01yXq0OwnPU3MayxKsJ8C1_S0OfW5x4gROFkJ3DU09kuKYdMgj8jYUfNV9s6csMkaU_dJXHqhQqwo/h120/bluebg.gif) repeat-x; }
#menublues{ font-size:0; }
#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: normal 15px Arial; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvkKmPMvc1thHRCOkiSwIMITFkIY3d48darOYtYsroIddJOAuzyX6c4NjFJRXL8TYItMS2rdoKR6O1MArrh8anIPz47zVE74Kh0ewZHv6_yiJqEbZl7AufxWmdznZ1z1F74BVOIvbY-vU/h108/blue.gif') no-repeat left top; padding: 10px 20px; color: #fff; text-decoration: none; }
#menublues a:hover, #menublues a.current{ background-position: 0% -50px; color: #fff; }
#menublues a.end{ width:4px; padding-left:0;padding-right:0; }
</style>
<div id='bluemenu'> <div id='menublues'>
<a href='http:///'>Главная</a>
<a href='http://'>Новичку</a>
<a href='http://'>Зароботок на своем сайте</a>
<a class="end"> </a>
</div></div>
Красным цветом я выделил HTTP туда нужно вставить www.gshjsj.blogspot.com Это пример его копировать не нужно. туда нужно вставить http той страници куда вы хотите что бы перекидывало после нажатия на пункт меню!
Синим я выделил название пунктов.У меня они свои у вас могут быть свои!
Можно добавлять множество пунктов Для этого вставляем в данный код еще
<a href='http://'>название пункта</a>
Вставлять подпункты нужно до кода <a class="end"> </a>
</div></div>
Дальше сохраняем гаджет и перетягиваем его и устанавливаем над сообщения блога над
Так же вы можете менять цвета меню! Но об этом в следующий раз!
0 коммент.:
Отправить комментарий