Google+ Followers

Будь в курсе событий!

23.01.2014

Меню, панель навигации с применением CSS спрайтов для блогспот, блоггер.

Leave a Comment

Привет друзья,сегодня я вам решил показать новую менюшку. Меню это состоит из CSS спрайта- а спрайт это вывод на экран одного изображения, то есть меню состоит из 5 кнопок, а сам файл изображения всего один. Из-за этого снижается нагружка при загрузке вашей странички блога, к тому же уменьшается количество запросов на страничку, к изображениям.Это дает нам очень легкое меню, и в плане оптимизации это хорошо, потому что все работает очень быстро.Ну а теперь немного про само меню, оно очень красочное, и легкое  имеет как вы видели выше 5 кнопок установка быстрая. А сейчас я вам расскажу как установить себе такое меню.Опять же тут несколько способов установки, Cпособ первый идем в свой блог, далее шаблон, Изменить HTML,зажимаем CTRL+F ищем тег ]]></b:skin> вставляем одну часть кода перед тегом ]]></b:skin> , без тегов  <style>  стиля что я пометил красным маркером. Если вдруг у вас не заработает меню  то вставляем код что ниже перед тегом  </body>  с тегами стиля <style>


<style>

/* --------------------Menu style #4-------------------- */
.navi4 {
  width: 525px;
  position: relative;
  display: block;
  margin:0 auto;
  height: 72px;
}
.navi4 ul {
  float: none;
  list-style-image: none;
  list-style-type: none;
  margin: 3px 0;
}
.navi4 ul li {
  height: 72px;
  background-image: url(http://4.bp.blogspot.com/-UMlrobnns2Y/Ut5BOkoVAfI/AAAAAAAAAZk/B6578jkZ22A/s1600/tab-4.png);
  background-repeat: no-repeat;
  float: left;
  margin: 0px;
  position: absolute;
  padding-top: 5px;
}
.navi4 ul li a{
  width: 100%;
  height: 100%;
  display: block;
}
.navi4 ul li.sm1 {
  background-position: 0px 0px;
  width: 125px;
  left: 0px;
}
.navi4 ul li.sm2 {
  background-position: -125px 0px;
  width: 124px;
  left: 100px;
}
.navi4 ul li.sm3 {
  background-position: -249px 0px;
  width: 124px;
  left: 200px;
}
.navi4 ul li.sm4 {
  background-position: -373px 0px;
  width: 125px;
  left: 300px;
}
.navi4 ul li.sm5 {
  background-position: -498px 0px;
  width: 126px;
  left: 400px;
}
.navi4 ul li:hover{
  z-index: 1000;
}
.navi4 ul li.sm1:hover {
  background-position: 0px -5px;
}
.navi4 ul li.sm2:hover {
  background-position: -125px -5px;
}
.navi4 ul li.sm3:hover {
  background-position: -249px -5px;
}
.navi4 ul li.sm4:hover {
  background-position: -373px -5px;
}
.navi4 ul li.sm5:hover {
  background-position: -498px -5px;
}

</style>


Далее код что будет ниже что бы вставить нам потребуется пройти в меню Дизайн,добавить гаджет, найти в списке HTMLjawascript вставляем в него и сохраняем. Либо идем снова в меню шаблон ИзменитьHTML зажимаем  CTRL+F  ищем тег <body> и вставляем наш скрпт ниже тега <body>
 <div class="navi4">
<ul>
<li class="sm1"><a href="#"></a></li>
<li class="sm2"><a href="#"></a></li>
<li class="sm3"><a href="#"></a></li>
<li class="sm4"><a href="#"></a></li>
<li class="sm5"><a href="http://www.compare-price.ru/juices/Santal/1/"></a></li>
</ul>
</div>

0 коммент. :

© 2012-2017 Cash's from program