Blogger yatay menü

Blogger Yatay Menü Ekleme

Blogger yatay menü eklemeyi göstereceğim.Yeni başlayan arkadaşlar zorladnığı için bugun onlar için videolu bir anlatımda olacak.Güzelbir blogger yatay menümüz var.Menüde resimli kategorilerde var bu kategorileri kendinize göre düzenleyebilirisiniz.Yapamayan arkdaşlar olursa yorum yaparak sorun yaşadıkları bölümde yardımcı olmaya çalışacam.

Demo

Blogger sitemize girip  Şablon-HTLM'yi Düzenle CTRL+F Yardımı İle ]]></b:skin> kodunu aratıyoruz.Bulduğumuz kodun hemen üstüne aşağıdaki kodları ekliyoruz.

/* The CSS Code for the menu starts here bloggertrix.com */
.btrix_menu,.btrix_menu ul,.btrix_menu li,.btrix_menu a {
 margin: 0;
 padding: 0;
 border: none;
 outline: none;
}
.btrix_menu {
 height: 40px;
 width: 525px;
 background: #4c4e5a;
 background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}
.btrix_menu li {
 position: relative;
 list-style: none;
 float: left;
 display: block;
 height: 40px;
}
.btrix_menu li a {
 display: block;
 padding: 0 14px;
 margin: 6px 0;
 line-height: 28px;
 text-decoration: none;
 border-left: 1px solid #393942;
 border-right: 1px solid #4f5058;
 font-family: Helvetica, Arial, sans-serif;
 font-weight: bold;
 font-size: 13px;
 color: #f3f3f3;
 text-shadow: 1px 1px 1px rgba(0,0,0,.6);
 -webkit-transition: color .2s ease-in-out;
 -moz-transition: color .2s ease-in-out;
 -o-transition: color .2s ease-in-out;
 -ms-transition: color .2s ease-in-out;
 transition: color .2s ease-in-out;
}
.btrix_menu li:first-child a { border-left: none; }
.btrix_menu li:last-child a{ border-right: none; }
.btrix_menu li:hover > a { color: #8fde62; }
.btrix_menu ul {
 position: absolute;
 top: 40px;
 left: 0;
 opacity: 0;
 background: #1f2024;
 -webkit-border-radius: 0 0 5px 5px;
 -moz-border-radius: 0 0 5px 5px;
 border-radius: 0 0 5px 5px;
 -webkit-transition: opacity .25s ease .1s;
 -moz-transition: opacity .25s ease .1s;
 -o-transition: opacity .25s ease .1s;
 -ms-transition: opacity .25s ease .1s;
 transition: opacity .25s ease .1s;
}
.btrix_menu li:hover > ul { opacity: 1; }
.btrix_menu ul li {
 height: 0;
 overflow: hidden;
 padding: 0;
 -webkit-transition: height .25s ease .1s;
 -moz-transition: height .25s ease .1s;
 -o-transition: height .25s ease .1s;
 -ms-transition: height .25s ease .1s;
 transition: height .25s ease .1s;
}
.btrix_menu li:hover > ul li {
 height: 36px;
 overflow: visible;
 padding: 0;
}
.btrix_menu ul li a {
 width: 100px;
 padding: 4px 0 4px 40px;
 margin: 0;
 border: none;
 border-bottom: 1px solid #353539;
}
.btrix_menu ul li:last-child a { border: none; }
.btrix_menu a.documents { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz_osub9Bhd1V_Cqdt7dpm-UxsoDBRRAruOffq1GEqrswDZigAh_TMCsV08WvHl2Mj1LKTFjiKHuzWynzjyP5NDpsdWeonnrsRBPpKHoUhyUyp-NpBxSrxN8iE7CmL1Pblmpp80vHh9AR4/s1600/docs.png) no-repeat 6px center; }
.btrix_menu a.messages { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUh9cLC39UsXW5wxhG4ZkXxoLCUswNpT4yA3pz4mSB4PtC5PNiP7ksHYxD6LqeU23OTKUpYe0rv9s43tJEGn3WRUhQIwXrkN6Jl2-jsVhF9vVjI77C-FukmfkP5dl9ddGdJVDaKYjAb1Uj/s1600/bubble.png) no-repeat 6px center; }
.btrix_menu a.signout { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCTIcAMQ-t39O9wLoQAMjVoOBKJvpZ8wtkAIbCZ0gKdqAVb0GPpuCdjt5rjgI857CBnksciARUpFWXQY1_OlNeKNirFPqKG_14i0VUElYhuT6qYYlDIhf7S_PxqQCzfLfCILaYdYvcHdKp/s1600/arrow.png) no-repeat 6px center; }

Daha sonra Gadget Ekle diyip HTML/Javascript Ekleyip kodları içine ekleyip tamamlayabilirsiniz.Ama Eğer bu menüyle temadaki menüyü değiştirecekseniz Aşağıdaki vereceğim kodlarla o kodları değiştirin.Anlamayan arkadaşlar videoyu izleyebilirler.

<ul class="btrix_menu">
 <li><a href="#">Home</a></li>
 <li><a href="#">Likes</a></li>
 <li><a href="#">Views</a>
  <ul>
   <li><a href="#" class="documents">Documents</a></li>
   <li><a href="#" class="messages">Messages</a></li>
   <li><a href="#" class="signout">Sign Out</a></li>
  </ul>
 </li>
 <li><a href="#">Uploads</a></li>
 <li><a href="#">Videos</a></li>
    <li><a href="#">About</a></li>
 <li><a href="http://www.bloggertrix.com/">Contact us</a></li>
</ul>

Yapamayanlar yorum yapsınlar Videolu anlatım alttraftadır.