Продам

stroka

Блог Людмилы Данило.Приглашаю на бесплатное обучение в школу "Успех в Internet PRO100"! Для всех кто хочет быть успешным! Здесь Вы можете оставить свои отзывы и комментарии.Подписывайтесь на мой блог!

вторник, 20 октября 2015 г.

Горизонтальное меню на ваш видео блог для blogger в стиле Windows 8


                               Здравствуйте друзья!
 Сегодня мы с вами поставим на свой видео блог меню для blogger в стиле Windows 8,сам стиль и код я взяла  у  mybloggerlab,спасибо автору!(смотрите видео урок) на примере моего учебного видео блога  http://ludmiladanilovidoblog.blogspot.de/  ,очень стильный (на мой взгляд)удобный элемент для Blogger ,служит как навигация по блогу ,состоит из набора ваших веб.ресурсов, ссылок на ваши различные рубрики,страницы,сайты и т.д.



 Итак приступим,заходим в блоггер-шаблон-изменить HTML-и первым делом вставим стиль-находим строку тег ]]></b:skin>   и выше вставляем этот  код стиля:


________________________________________________________________________________


________________________________________________________________________________

 Теперь находим в шаблоне строку <div id='navigation-wrapper'> и  ниже строки  <ul id='navigation'>  заменяем свое предыдущее меню на этот код:
 Cкопируйте код себе в блокнот ,сделайте настройки. Здесь поставте свои ссылки на ваши веб.ресурсы(выделено красным цветом)-а также их название(выделено синим цветом) -при желании ,вы можете также взять свои ссылки на картинки (изменить их) -выделено зеленым цветом.

_____________________________________________________________________________________________

<!-- mblmetromenu -->
<div class='mblmetromenu'>
<div class='tile-bt-extralarge solid-violetred shadow-black margin-5 floatleft MblMetroMenu' data-navid='om-nav'>
<a class='gradient' href='Адрес вашего видеоблога'>
<img alt='' src='http://1.bp.blogspot.com/-1e7sOUI4miE/UMnHdKMffTI/AAAAAAAAJaQ/y3xR-9BNINI/s1600/home.png'/>
<span class='light-text'>Главная</span>
</a>
</div>
<div class='tile-bt-large solid-coral shadow-red margin-5 floatleft MblMetroMenu' data-navid='om-nav'>
<a class='gradient' href='Ваша ссылка'>
<img alt='' src='http://3.bp.blogspot.com/-OKlDEjd3DyQ/UMnHyxn_apI/AAAAAAAAJaY/DbBPG79a-xU/s1600/messanger.png'/>
<span class='light-text'>Карта блога</span>
</a>
</div>
<div class='tile-bt solid-purple shadow-blue margin-5 floatleft MblMetroMenu' data-navid='om-nav2'>
<a class='gradient' href='Ваша ссылка'>
<img alt='' src='http://1.bp.blogspot.com/-ZabrvxcoO_A/UMnH-8h_glI/AAAAAAAAJag/qtGW4c9kOKg/s1600/rss.png'/>
<span class='light-text'>Форма для связи</span>
</a>
</div>
<div class='tile-bt-large solid-red shadow-red margin-5 floatleft MblMetroMenu' data-navid='om-nav'>
<a class='gradient' href='ВАША ССЫлка'>
<img alt='' src='http://3.bp.blogspot.com/-PXSPYg5B3dI/UMnIKNsGLDI/AAAAAAAAJao/XWlIvLhJTAg/s1600/search.png'/>
<span class='light-text'>Поиск</span>
</a>
</div>
<div class='tile-bt solid-darkred shadow-red margin-5 floatleft MblMetroMenu' data-navid='om-nav2'>
<a class='gradient' href='Ваша ссылка'>
<img alt='' src='http://2.bp.blogspot.com/-0XPGQ944VLU/UMnIlODiItI/AAAAAAAAJaw/LNBotNMbPD0/s1600/mail.png'/>
<span class='light-text'>Контакт</span>
</a>
</div>
<div class='tile-bt solid-black shadow-black margin-5 floatleft MblMetroMenu' data-navid='om-nav2'>
<a class='gradient' href='Ваша ссылка'>
<img alt='' src='http://4.bp.blogspot.com/-GckD4Ca5lVA/UMnIplw9GDI/AAAAAAAAJa4/M6OypxXIBhY/s1600/help.png'/>
<span class='light-text'>Помощь</span>
</a>
</div>
<div class='tile-bt solid-orange shadow-black margin-5 floatleft MblMetroMenu' data-navid='om-nav2'>
<a class='gradient' href='Ваша ссылка'>
<img alt='' src='http://1.bp.blogspot.com/-qFPzfaP6wNk/UMnJJPIXmjI/AAAAAAAAJbI/gSDHtW5y8Xw/s1600/youtbe.png'/>
<span class='light-text'>YouTube</span>
</a>
</div>
<div class='tile-bt solid-darkblue shadow-blue margin-5 floatleft MblMetroMenu' data-navid='om-nav2'>
<a class='gradient' href='Ваша ссылка'>
<img alt='' src='http://3.bp.blogspot.com/-yejzZVIQT14/UMnI5OiBqRI/AAAAAAAAJbA/hB4j8dQkoUk/s1600/face.png'/>
<span class='light-text'>Facebook</span>
</a>
</div>
<div class='tile-bt-large solid-blue shadow-blue margin-5 floatleft MblMetroMenu' data-navid='om-nav'>
<a class='gradient' href='Ваша ССылка'>
<img alt='' src='http://4.bp.blogspot.com/-TuiJy6qhQOg/UMnJam4XwjI/AAAAAAAAJbY/tyLP82SmbV4/s1600/photo.png'/>
<span class='light-text'>НАЗВАНИЕ</span>
</a>
</div>
<div class='tile-bt solid-olive shadow-green margin-5 floatleft MblMetroMenu' data-navid='om-nav2'>
<a class='gradient' href='Ваша ССылка'>
<img alt='' src='http://1.bp.blogspot.com/-sQ2itPD97gQ/UMnJ5mLaNNI/AAAAAAAAJbo/1XoBqKVwnzM/s1600/music.png'/>
<span class='light-text'>Отзывы</span>
</a>
</div>
<div class='tile-bt-large solid-blue-2 shadow-blue margin-5 floatleft MblMetroMenu' data-navid='om-nav'>
<a class='gradient' href='http://videoblogludmiladanilo.blogspot.de/search/label/%D0%92%D1%81%D0%B5%20%D0%BE%20%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE%20%D0%B1%D0%BB%D0%BE%D0%B3%D0%B5%3A%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE%D1%83%D1%80%D0%BE%D0%BA%D0%B8?=9.html'>
<img alt='' src='http://3.bp.blogspot.com/-9xF88_PUrZE/UMnrZV_8rJI/AAAAAAAAJdQ/uoC0sUcGUmQ/s1600/MBL.png'/>
<span class='light-text'>Школа Video Bloggera</span>
</a>
</div>
<!-- End MblMetroMenu -->
</div>
<!-- END mblmetromenu -->
</ul>

__________________________________________________________________________________________________
И последний шаг -необходимо удалить прежнею навигацию -находим строку /* Navigation   и удаляем вот это:

/* Navigation
----------------------------------------------- */
#navigation-wrapper {
-moz-border-radius:5px;
-webkit-border-radius:5px;
background:#9933FF;
border:1px solid #4c0202;
height:40px;
line-height:41px;
margin-bottom:16px;
width:980px;
}
#navigation {
}
#navigation li {
border-right:1px solid #4c0202;
float:left;
height:40px;
padding:0 15px;
}
#navigation li a {
color:#100814;
font-size:10px;
text-transform:uppercase;
}
#navigation li a:hover {
color:#FFFFFF;
text-decoration:none;
}
_____________________________________________________________________________________

  Теперь ,если вы хотите -можно вставить бегущею строку -вставляете после меню -под закрывающим тегом </div> ,т.е. находите строку  <div id='content-wrapper'> и вставляете над ней,на этом все!
                 Понравился урок?Делитесь в соц.сетях!
                       Желаю всем творческих успехов!


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

  1. Отличный урок - надо и это сделать!

    ОтветитьУдалить
  2. Людмила огромное спасибо вам за очень интересный урок. Создала по уроку учебный блог

    ОтветитьУдалить

.