Blogger Metro UI Navigasyon Üst Menü Ekleme

   Blog sitenizde kullanabileceğiniz şık ve kullanışlı bir navigasyon menü ekleyebilirsiniz.Üst resimde de gördüğünüz gibi toplu bir alanda ister etiketlerinizi yayınlayabilirsiniz,isterseniz en çok tıklanan başlık konularınızı paylaşabilirsiniz,veya her butona verdiğiniz başlığa göre resim değişikliğini yapabilirsiniz.

 

 

Metro UI Navigasyon Üst Menü Nasıl Eklenir?

1.  Blogger hesabınıza giriş yapınız.
2.  Kumanda Paneli > Şablon > Html Düzenle  yolunu izleyin.
3.  Ctrl+F tuş kombinasyonu ile ]]></b:skin> kodunu aratın.
4. Bulduğunuz ]]></b:skin> kodunun hemen üst kısmına aşağıdaki kodları ekleyerek şablonunuzu kaydedip çıkın.

/*===BC METRO UI Menu==*/<br /><br />body {<br />font-family:sans-serif;<br />}<br />a {<br />text-decoration:none;<br />}<br />.mblmetromenu {<br />width:960px;<br />margin:auto;<br />}<br />@media screen and (max-width:960px) {<br />.mblmetromenu {<br />width:100%;<br />}<br />}<br /><br />/* MblMetroMenu */<br />.MblMetroMenu {<br />position:relative;<br />}<br />.om-nav {<br />position:absolute;<br />width:100%;<br />z-index:999;<br />display:none;<br />}<br />.om-ctrlbar {<br />width:100%;<br />height:48px;<br />}<br />.om-ctrlitems {<br />margin:auto;<br />padding:0px;<br />height:48px;<br />display:inline-block;<br />text-align:center;<br />}<br />.om-ctrlitem {<br />height:48px;<br />width:48px;<br />display:none;<br />cursor:pointer;<br />float:left;<br />opacity:0.5;<br />-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=50)" !important;<br />filter: alpha(opacity=50) !important; /* For IE8 and earlier */ }<br />.om-ctrlitem:hover {<br />opacity:0.8;<br />-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=80)" !important;<br />filter: alpha(opacity=80) !important; /* For IE8 and earlier */ }<br />.om-activectrlitem {<br />opacity:1 !important;<br />-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;<br />filter: alpha(opacity=100) !important; /* For IE8 and earlier */ }<br />.om-controlitems {<br />width:960px;<br />margin:auto;<br />}<br />.om-controlitem {<br />height:48px;<br />cursor:pointer;<br />}<br />.om-closenav {<br />float:left;<br />}<br />.om-movenext {<br />float:right;<br />}<br />.om-itemholder {<br />margin:auto;<br />padding:20px 0px;<br />}<br />@media screen and (max-width:960px) {<br />.om-closenav {<br />position:absolute;<br />z-index:9999;<br />left:0;<br />top:0;<br />}<br />.om-movenext {<br />position:absolute;<br />z-index:9999;<br />right:0;<br />top:0;<br />}<br />.om-controlitems {<br />width:100%;<br />}<br />.om-itemholder {<br />width:100%;<br />}<br />}<br />.om-centerblock {<br />display:inline-block;<br />}<br />.om-item {<br />display:none;<br />}<br />.om-showitem {<br />margin:5px;<br />float:left;<br />display:none;<br />}<br />/* END MblMetroMenu */<br /><br />/* TILE BUTTONS */<br />/* Standar Buttons */<br />.tile-bt {<br />text-align:center;<br />cursor:pointer;<br />width:90px;<br />height:90px;<br />}<br />.tile-bt a {<br />display:block;<br />padding-top:12px;<br />text-decoration: !important;<br />}<br />.tile-bt img {<br />margin:0 auto 0 auto;<br />padding-bottom:5px;<br />height:48px;<br />width:48px;<br />position:relative;<br />display:block;<br />}<br />.tile-bt span {<br />font-size:12px;<br />padding-bottom:10px;<br />display:block;<br />}<br />.tile-bt:active {<br />opacity:0.5;<br />}<br />/* End Standard Buttons */<br /><br /><br />/* Large Buttons */<br />.tile-bt-large {<br />width:190px;<br />height:90px;<br />line-height:90px;<br />text-align:center;<br />cursor:pointer;<br />}<br />.tile-bt-large a {<br />display:block;<br />text-decoration: !important;<br />}<br />.tile-bt-large img {<br />vertical-align: middle;<br />margin:auto;<br />padding:0px;<br />position:relative;<br />width:48px;<br />height:48px;<br />}<br />.tile-bt-large span {<br />vertical-align: middle;<br />display:inline;<br />}<br />.tile-bt-large:active {<br />opacity:0.5;<br />}<br />/* End Large Buttons */<br />/* Extralarge Buttons */<br />.tile-bt-extralarge {<br />text-align:center;<br />cursor:pointer;<br />width:190px;<br />height:190px;<br />}<br />.tile-bt-extralarge a {<br />display:block;<br />padding-top:52px;<br />text-decoration: !important;<br />}<br />.tile-bt-extralarge img {<br />margin:0 auto 0 auto;<br />padding-bottom:22px;<br />height:80px;<br />width:80px;<br />position:relative;<br />display:block;<br />}<br />.tile-bt-extralarge span {<br />font-size:14px;<br />padding-bottom:20px;<br />display:block;<br />}<br />.tile-bt-extralarge:active {<br />opacity:0.5;<br />}<br />/* End Extralarge Buttons */<br /><br />/* END TILE BUTTONS */<br /><br />/* SHADOW LIST */<br />.shadow-white, .shadow-black, .shadow-blue, .shadow-green, .shadow-red {<br />/*display:inline-block;*/<br />}<br />.shadow-white:hover {<br />box-shadow:0px 0px 6px 3px #fff;<br />-webkit-box-shadow:0px 0px 6px 3px #fff;<br />-moz-box-shadow:0px 0px 6px 3px #fff;<br />-o-box-shadow:0px 0px 6px 3px #fff;<br />-ms-box-shadow:0px 0px 6px 3px #fff;<br />}<br />.shadow-blue:hover {<br />box-shadow:0px 0px 6px 3px #38D1F7;<br />-webkit-box-shadow:0px 0px 6px 3px #38D1F7;<br />-moz-box-shadow:0px 0px 6px 3px #38D1F7;<br />-o-box-shadow:0px 0px 6px 3px #38D1F7;<br />-ms-box-shadow:0px 0px 6px 3px #38D1F7;<br />}<br />.shadow-green:hover {<br />box-shadow:0px 0px 6px 3px #AACA37;<br />-webkit-box-shadow:0px 0px 6px 3px #AACA37;<br />-moz-box-shadow:0px 0px 6px 3px #AACA37;<br />-o-box-shadow:0px 0px 6px 3px #AACA37;<br />-ms-box-shadow:0px 0px 6px 3px #AACA37;<br />}<br />.shadow-red:hover {<br />box-shadow:0px 0px 6px 3px #E81750;<br />-webkit-box-shadow:0px 0px 6px 3px #E81750;<br />-moz-box-shadow:0px 0px 6px 3px #E81750;<br />-o-box-shadow:0px 0px 6px 3px #E81750;<br />-ms-box-shadow:0px 0px 6px 3px #E81750;<br />}<br />.shadow-black:hover {<br />box-shadow:0px 0px 6px 3px #444;<br />-webkit-box-shadow:0px 0px 6px 3px #444;<br />-moz-box-shadow:0px 0px 6px 3px #444;<br />-o-box-shadow:0px 0px 6px 3px #444;<br />-ms-box-shadow:0px 0px 6px 3px #444;<br />}<br />/* END SHADOW LIST */<br />/* BACKGROUND LIST */<br />/* Solid Colors */<br />.solid-blue { background:#00BBE2; }<br />.solid-blue-2 { background:#2C84EE; }<br />.solid-darkblue { background:#044E94; }<br />.solid-violetred { background:#781766; }<br />.solid-red { background:#E51400;}<br />.solid-red-2 { background:#E81750; }<br />.solid-pink { background:#FF539B; }<br />.solid-purple { background:#D02090; }<br />.solid-orange { background:#FB8F02; }<br />.solid-orange-2 { background:#FF6600; }<br />.solid-orange-3 { background:#DD5F37; }<br />.solid-coral { background:#CD5B45; }<br />.solid-green { background:#67B239; }<br />.solid-green-2 {background:#96BF01; }<br />.solid-darkgreen { background:#016C38; }<br />.solid-olive { background:#999900}<br />.solid-grass { background:#CDCD00; }<br />.solid-darkred { background:#5F0000; }<br />.solid-gold { background:#FEE9AE; }<br />.solid-yellow { background:#F7D100; }<br />.solid-black { background:#000; }<br />.solid-smoke { background:#F5F5F5; }<br />/* End Solid Colors */<br /><br />/* MISC */<br />.clearspace { clear: both; }<br />.floatleft { float:left; }<br />.floatright { float:right; }<br />.none { display: none !important; width:0px !important; }<br />.light-text {<br />color:#fff;<br />}<br />.dark-text {<br />color:#1e1e1e;<br />}<br />.gradient {<br />background: -moz-linear-gradient(-45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%); /* FF3.6+ */<br />background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0.3))); /* Chrome,Safari4+ */<br />background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0) 00%,rgba(255,255,255,0.3) 100%); /* Chrome10+,Safari5.1+ */<br />background: -o-linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* Opera 11.10+ */<br />background: -ms-linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* IE10+ */<br />background: linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* W3C */<br />}<br />.margin-5 { margin:5px; }

     5.  Daha sonra tekrar Kumanda Paneli > Yerleşim > Gagdet Ekle > HTML/Javascript Ekle yolunu takip           ediniz.
     6.  Açmış olduğunuz Gadget içerisine aşağıda ki kodları ekleyin.

<!-- bclmetromenu -->
<div class="mblmetromenu">

<div data-navid="om-nav" class="tile-bt-extralarge solid-violetred shadow-black margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhkjNLUiYdZab04_ZoAZ50US2_ZamQgTuCL0YliUqSVCnnJPV3tU67as3jn4p-bknzZvLuO3l0l51iLYwmg8Mu3LnfrF3yA1pSauruxlMUG6NKnkUk3Io2zMdJQ5yFQ4SD_2KohqjdPMg/s1600/home.png" alt="" />
<span class="light-text">Homepage</span>
</a>
</div>
    
<div data-navid="om-nav" class="tile-bt-large solid-coral shadow-red margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3VPJml17-uKwhoFWz98G3ZpbjKDY1EsKglnW-3xxxdrJuBiK8w_SZOaW0WJc3wV6JZX33Lm4MR21j2CqfJYUHMJjqAM2-U3mP50nDXwptgRc7lWOD3o-UsK3BwEVfVikjxP9R8dv5-oA/s1600/messanger.png" alt="" />
<span class="light-text">About US</span>
</a>
</div>
    
<div data-navid="om-nav2" class="tile-bt solid-purple shadow-blue margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoX5e1-OEIbr4i-6NvcD3vHCNecj9FQjI_NO3fTRogvecad7Fu49RNcTE7mLGpC3s0cUhmcIEjKIA85VgzQca0kcvN-2tD6RAX2-Y8SMP_vLQW8yon1Eyjf9Zw_GMWgXYPXSGVTBIOdjU/s1600/rss.png" alt="" />
<span class="light-text">Rss Feeds</span>
</a>
</div>
    
 <div data-navid="om-nav" class="tile-bt-large solid-red shadow-red margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6rkShXrge0fircsZkziwupDFTU0ywS7tGzmoUqD3mpOCApsvvTvDGZI4P49EGYvGg2xEEX1wW2IrmPhwcXgfdt9BW9SK9uuU2y6MWhwHj9FJwpaWkFxSdAIJQ9u3JwRI1ZJvlvUw4SF4/s1600/search.png" alt="" />
<span class="light-text">Search</span>
</a>
</div>
      
 <div data-navid="om-nav2" class="tile-bt solid-darkred shadow-red margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMn8wyz784n8ktdJA7Omj26tD3E3Uo6lFEEJNnABbqm8rMoB4y64dW0E2pt15poX8bHaKZEIxoYBCJgQoplgyoKXL6vcNYRBstIIPRLKUtef4zAXcnoplpAQOajoSz8GIy4fpQC4UtI2c/s1600/mail.png" alt="" />
<span class="light-text">Contact US</span>
</a>
</div>
      
<div data-navid="om-nav2" class="tile-bt solid-black shadow-black margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY6K8vpbn4PY283od5f64sO7_Y0v8QOAsFCLKuqKWmX7cQzpQtiCVw_Rx0WAilb4ngpTl9l_hUyYcnlFhwtz9JHydqFKzXVn3flQDtF1XVv7i4UZwSEd6U5NTFvECxG0zCQ2Nv9HHGoxg/s1600/help.pn" alt="" />
 <span class="light-text">Get HELP</span>
</a>
 </div>
      
<div data-navid="om-nav2" class="tile-bt solid-orange shadow-black margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2yCKB_1KgN5pC74pyQN8diIuGQLnbeUFfHgg1latQy5oEFVAwJqqIH3Lm6DeX9LEzPI90EHYdGJG0T_rJ0_8vrVazS563MRxG5bAU1VAMrg23NTnunVfksyryYB6uWdIA8qcS_AV7wKI/s1600/youtbe.png" alt="" />
<span class="light-text">YouTube</span>
</a>
</div>
      
<div data-navid="om-nav2" class="tile-bt solid-darkblue shadow-blue margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW8azItmDdTRsiin1QyGJEwn74o4cbqyk5obqZ-9n6y63yWU1F2s2yo7H_Y3ntlSrQ_zDjxfJEC2CtMHRFKYdBxm98aNPGD25wWlnyM_UKYeG_3tQ00OtkAZdiDHh3BW8afLZ9kGzzI90/s1600/face.png" alt="" />
<span class="light-text">Facebook</span>
</a>
</div>
      
<div data-navid="om-nav" class="tile-bt-large solid-blue shadow-blue margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbDArGttKhDuONo-OgteoLEipapIssKqPKxbiC4KQeyAu7dUnu4jwDSXMt_3R7GpTja_YmecGd4ER4XmvH8uSwHZIAHox5wsl7r6LfCaz5jhMgZeZ_AgXF2QExSGCRZYHvDF3N8tjQhV0/s1600/photo.png" alt="" />
<span class="light-text">Photos</span>
</a>
</div>
      
<div data-navid="om-nav2" class="tile-bt solid-olive shadow-green margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLyAmRn35QJsvJyziFIRxgD2gActgCBuqJN4b8Y648g1g26sGwBpy3D_URJCj0YUo69bt_lWlP4DASSXdgBgl0HVGRSoCS-ip36kTbYYEQLk7CFvKUMpoLu0T8zDPtIum2KNLCT8BA0F0/s1600/music.png" alt="" />
<span class="light-text">Music</span>
</a>
 </div>
      
<div data-navid="om-nav" class="tile-bt-large solid-blue-2 shadow-blue margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXDZXrhZ6ok-85U5jwbJSUhW2alEwI3uTOoCEO1iq4BcYs5S1x4UdCXsrJS7CUl-fLupXz7WLQWr5pitAWZUaB2AQ6gsEvV_4wE6EHox5JaXhw1yWfoypQ2ocqjM4gqkxtrQ9sAYo6d18/s1600/MBL.png" alt="" />
<span class="light-text">Bilgi Cafem 61</span>
</a>
</div>
        <!-- End MblMetroMenu -->
  </div>
<!-- END bcmetromenu -->

Kod İçerisinde Düzenlenecek Bölümler;

 Kırmızı yazılı metin kısımları yerine siz istediğiniz başlık menü metnini yazabilirsiniz.

 Mavi yazılı metin kısımlarına ise menü metnine link ekleyecek olduğunuz kısımdır.

 Yeşil yazılı metin kısımları ise buton resmlerinin bulunduğu resim url kısmıdır.