Blogger Metro UI Navigasyon Menü Yapımı

      Eğer web sitenizin navigasyon windows 8 metro menüsü olsun istermisiniz? Herkes Windows 8 Metro Stili Menü kullanışlı ve bir okadar da farklı ve toplu bir şekilde 10 ayrı resim var ve bunları buton menü olarak kullanabilirsiniz. Navigasyon menü çünkü kullanıcı dostu menü ziyaretçi olmadan bir web sitesinin temel unsurlarından biri derinlemesine içeriği arama olama kısa ve derli düzenli bilgi butonları. 

     Üste ki resimde gördüğünüz gibi resim butonlarına tıklamadan önce mause üstüne gelince javascript kodlama sistemi kodlanmasından dolayı buton içeri doğru çekili bir efekt verir ve dış kenar renkleri her birinde farklı bir şekilde kodlanmıştır.

Metro Navigasyon Menüyü Siteme Nasıl Eklerim?

1- Blogger hesabınıza giriş yapın.

2- Kumanda Paneli > Şablon > HTML Düzenle yolunu izliyoruz.Bunu yapmadan önce her ihtimale karşı şablon yedeğinizi alın.

3- Ctrl+F kısayol tuşları yardımı ile ]]></b:skin> kodunu aradıyoruz.

4- Bulduğunuz ]]></b:skin> kodunun hemen üstüne aşağıda ki kodları ekleyin.

/ * === MBL METRO UI Menü == * / body { font-family: sans-serif; } a { text-decoration: none; } {mblmetromenu. width: 960px; margin: auto; } @ media screen ve ( max-width: 960px) { {mblmetromenu. width: 100%; } } / * MblMetroMenu * / . MblMetroMenu { position: relative; } om-nav {. position: absolute; width: 100%; z-index: 999; display: none; } . om-ctrlbar { width: 100%; height: 48px; } om-ctrlitems {. margin: auto; padding: 0px; height: 48px; display: inline-block; text-align: center; } . om-ctrlitem { height: 48px; width: 48px; display: none; cursor: pointer; float: left; opacity: 0.5; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacity = 50)" önemli! ; filtresi: alpha (opacity = 50) önemli; / * daha önce IE8 ve için * /! } om-ctrlitem: hover {. opacity: 0.8; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacity = 80) "önemli;! filtresi: alpha (opacity = 80) önemli; / * önceki IE8 ve için * /! } om-activectrlitem {. opacity: 1 önemlisi; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacity = 100) "önemli;! filtresi: alpha (opacity = 100) önemlidir; / * IE8 ve önceki * / Satılık! } om-controlitems {. width:; 960px margin: auto; } . om-controlitem { height: 48px; İmleç: pointer; } . om-closenav { float: left; } . om-MoveNextSonuna { şamandıra: sağ; } om-itemholder {. margin: auto; padding: 20px 0px; } medya ekran ve (max-width @: 960px ) { . om-closenav { position: absolute; z-index: 9999; left: 0; top: 0; } . om-MoveNextSonuna { position: absolute; z-index: 9999; Doğru: 0; top: 0; } . om-controlitems { width: 100%; } om-itemholder {. width: 100%; } } om-centerblock {. display: inline-block; } om-item {. display: none; } . om-showitem { margin: 5px; float: left; display: none; } / * END MblMetroMenu * / / * ÇİNİ BUTTONS * / / * Standar Düğmeler * / kiremit-bt {. text-align: center; cursor: pointer; width: 90px; height: 90px; } . karo-bt a { display: block; padding-top: 12px; text-decoration: önemli;! } karo-bt img {. margin: 0 auto 0 auto; padding-bottom: 5px; yüksekliği: 48px; width: 48px; position: relative; display: block; } . karo-bt açıklıklı { font-size: 12px; padding-bottom: 10px; display: block; } . karo-bt: active { opacity: 0.5; } / * End Standart Düğmeler * / / * Büyük Düğmeler * / . karo-bt-large { width: 190px; height: 90px; line-height: 90px; text-align: center; cursor: pointer; } . karo-bt- Büyük bir { display: block; text-decoration:! önemli; } . karo-bt-büyük img { vertical-align: middle; margin: auto; padding: 0px; position: relative; width: 48px; height: 48px; } . karo-bt-büyük açıklıklı { vertical-align: middle; display: inline; } . karo-bt-large: active { opacity: 0.5; } / * End Büyük Düğmeler * / / * ExtraLarge Düğmeler * / . karo-bt -ExtraLarge { text-align: center; cursor: pointer; width: 190px; height: 190px; } karo-bt-ExtraLarge bir. { display: block; padding-top: 52px; text-decoration:! önemli; } . kiremit -bt-ExtraLarge img { margin: 0 auto 0 auto; padding-bottom: 22px; height: 80px; width: 80px; position: relative; display: block; } . karo-bt-ExtraLarge açıklıklı { font-size: 14px; padding-bottom: 20px; display: block; } . karo-bt-ExtraLarge: active { opacity: 0.5; } / * End ExtraLarge Düğmeler * / / * END ÇİNİ BUTTONS * / / * SHADOW LİSTESİ * / . gölge-beyaz, . gölge-siyah, gölge-mavi, yeşil-gölge, gölge-kırmızı {... / * display: inline-block; * / } shadow-beyaz: hover {. box-shadow: 0px 0px 6px 3px # fff; - webkit-box-shadow: 0px 0px 6px 3px # fff; -moz-box-shadow: 0px 0px 6px 3px # fff; -o-box-shadow: 0px 0px 6px 3px # fff; -ms-box-shadow: 0px 0px 6px 3px # fff; } shadow-mavi:. hover { box-shadow: 0px 0px 6px 3px # 38D1F7, -webkit-box-shadow: 0px 0px 6px 3px # 38D1F7, -moz-box-shadow: 0px 0px 6px 3px # 38D1F7, -o-box-shadow: 0px 0px 6px # 38D1F7 3px; -ms-box-shadow: 0px 0px 6px 3px # 38D1F7; } shadow-yeşil: hover {. box-shadow: 0px 0px 6px 3px # AACA37; - webkit-box-shadow: 0px 0px 6px 3px # AACA37, -moz-box-shadow: 0px 0px 6px 3px # AACA37, -o-box-shadow: 0px 0px 6px 3px # AACA37, -ms-box-shadow: 0px 0px 6px 3px # AACA37; } shadow-kırmızı:. hover { box-shadow: 0px 0px 6px 3px # E81750, -webkit-box-shadow: 0px 0px 6px 3px # E81750, -moz-box-shadow: 0px 0px 6px 3px # E81750, -o-box-shadow: 0px 0px 6px 3px # E81750, -ms-box-shadow: 0px 0px 6px 3px # E81750; } . shadow-siyah: hover { box-shadow: 0px 0px 6px 3px # 444; - webkit-box-shadow: 0px 0px 6px # 444 3px; -moz-box-shadow: 0px 0px 6px 3px # 444; -o-box-shadow: 0px 0px 6px 3px # 444; -ms-box-shadow: 0px 0px 6px 3px # 444; } / * END SHADOW LİSTESİ * / / * GEÇMİŞİ LİSTESİ * / / * Katı Renkler * / katı-mavi {background: #. 00BBE2;} . katı-mavi-2 {background: # 2C84EE;} . Katı-lacivert {background: # 044E94;} katı-violetred {background: # 781766;}. . katı-kırmızı {background: # E51400;} . katı-kırmızı-2 {background: # E81750;} . katı-pembe { background: # FF539B;} katı-mor {background: #. D02090;} katı-turuncu {background: #. FB8F02;} katı-portakal-2 {background: #. FF6600;} katı-turuncu-3 {background.: # DD5F37;} katı-mercan {background: #. CD5B45;} . katı-yeşil {background: # 67B239;} katı-yeşil-2 {background: #. 96BF01;} katı-darkgreen {background: #. 016C38;} . katı-zeytin {background: # 999900} katı çim {background: # CDCD00;}. katı-darkred. {background: # 5F0000;} katı altın {background: # FEE9AE;}. katı-san {background.: # F7D100;} . katı-siyah {background: # 000;} . katı-duman {background: # f5f5f5;} / * End Solid Renkler * / / * ÇEŞİTLİ * / . Clearspace {clear: both;} . floatleft {float : left;} floatright {float:. hakkı;} . yok {display: none önemli; width: 0px önemli;}! ışık metin {. color: # fff; } koyu metin {. color: # 1e1e1e; } . gradyan { background:-moz-linear-gradyan (-45deg, rgba (255,255,255,0)% 0, rgba (255,255,255,0.3)% 100); / * FF3.6 + * / background:-webkit-gradyan (doğrusal sol üst, sağ alt, renk-stop (% 0, rgba (255,255,255,0)), renk-stop (% 100, rgba (255,255,255,0.3))); / * Krom, Safari4 + * / background:-webkit- doğrusal değişimli (-45deg, rgba (255,255,255,0) 00%, rgba (255,255,255,0.3)% 100); / * Chrome10 +, Safari5.1 + * / background:-o-lineer-gradyan (-45deg, rgba ( 255,255,255,0)% 0, rgba (255,255,255,0.3)% 100); / * Opera 11.10 + * / background:-ms-lineer-gradyan (-45deg, rgba (255,255,255,0)% 0, rgba (255,255,255,0.3 )% 100); / * IE10 + * / background: doğrusal gradyan (-45deg, rgba (255,255,255,0)% 0, rgba (255,255,255,0.3)% 100); / * W3C * / } . margin-5 {margin : 5px;}

5- Şablonunuzu kaydedip çıkın.
6- Kumanda Paneli > Yerleşim > Gadget Ekle > HTML/Javascript yolunu izleyin.
7- Yeni Açtığınız gadgetin içerisine aşağıda ki kodları ekleyin ve gadgetinizi kaydedin.

<- Mblmetromenu -> 
<div class="mblmetromenu"> <div data-navid="om-nav" class="tile-bt-extralarge solid-violetred shadow-black margin-5 floatleft MblMetroMenu"> <a href = " # "class =" degrade "> <img src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHbS1tbMbLEa-l7wDWynZkazHjx3Clejpd_UBuPa7YxHUJrfL8y9AX3jH5jjQhGR_JfXRwysNY86g_zrPxou7mR9stUZggJ_uyMi2NdAR2i2FEX1ai4VEmV_VRTkXu54jQE3mLXk2EjK4/s1600/home.png" alt = "" / > <span class="light-text"> Anasayfa </ span> </ a> </ div> <div veri-Navid = "om-nav" class = "kiremit-bt-büyük solid-mercan gölge-kırmızı marjı -5 floatleft MblMetroMenu "> <a href = " # "class =" degrade "> <img src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ8R28HgLeONfUbZo5NVCyb32yRRfVwnQEIo3-ImUm7a2AnoFFgovWsNaL3lVCwQJEqFlo9565T0xnGvIYgbNHTkjAUH_98a3azFXN5-Rxw4WIJl8xUKXdhnM2om_IltJAW_sC2E1_dlA/s1600/messanger . png "alt =" "/> <span class="light-text"> Hakkında</ span> </ a> </ div> <div veri-Navid = "om-nav2" class = "kiremit-bt Katı-mor gölge mavi margin-5 "> MblMetroMenu floatleft <a href = " # degrade ">" = class " <img src = "http://1.bp.blogspot.com/-ZabrvxcoO_A/UMnH-8h_glI/ AAAAAAAAJag/qtGW4c9kOKg/s1600/rss.png "alt =" "/> class="light-text"> <span RSS beslemeleri </ span> </ a> </ div>  <div veri-Navid = "om-nav "class =" kiremit-bt-büyük solid-gölge kırmızı-kırmızı margin-5 "> MblMetroMenu floatleft <a href = " # ">" class = "degrade http://3.bp.blogspot img src = <". com/-PXSPYg5B3dI/UMnIKNsGLDI/AAAAAAAAJao/XWlIvLhJTAg/s1600/search.png "alt =" "/> class="light-text"> <span Arama </ span> </ a> </ div>  <div veri- Navid = "om-nav2" class => "kiremit-bt katı DarkRed gölge-kırmızı margin-5 MblMetroMenu floatleft" <a href = " # "class =" degrade "> <img src = "http://2. bp.blogspot.com/-0XPGQ944VLU/UMnIlODiItI/AAAAAAAAJaw/LNBotNMbPD0/s1600/mail.png "alt =" "/> <span class="light-text"> Bize Ulaşın </ span> </ a> </ div > <div data-navid="om-nav2" class="tile-bt solid-black shadow-black margin-5 floatleft MblMetroMenu"> <a href = " # "class =" degrade "> <img src = "http :/ / 4.bp.blogspot.com/-GckD4Ca5lVA/UMnIplw9GDI/AAAAAAAAJa4/M6OypxXIBhY/s1600/help.pn "alt =" "/>  <span class="light-text"> Yardıma alın </ span> </ a>  </ div> <div data-navid="om-nav2" class="tile-bt solid-orange shadow-black margin-5 floatleft MblMetroMenu"> <a href = " # "class =" degrade "> < img src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhirKef5fv22AXNWMcghqc3vGfi0cL3uXgqS3A8R-T44hAuR4ttMQfsWNJF8BXpGNqJdD4cqQyf0Ll42YVdDHalTSiPdvTy7HoWh1T6IFjHqCqgKM3lQuzy-HhTj4Hq1XZ1ct0K4t_TisE/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 =" degrade "> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7m2y0ON7py7RIcStdRV_xm2Mh3oPXBj5E7QjFwnm4QoIsgEo_ARuZpjrtDIiPhaHFZ8b7czNgmiG19dhlioy_Q_OtIpCuV0ow9OxewhcOCmqmmJXtDAr7ozQgwl0Jsvi8vcQe7wJrl1s/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 =" degrade "> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDwnYsJHOV_IXGn3DSVhZHWtCIGA5hbbTpA7Z3Sr6bo2mZDid1VLdrysTtHS8R2aD2rl0X8ZE8_K06Oa_03gy1PQScMR-oLr7tbIQihNhrRKPBgM5p9UmhB9g7NqMTcalfU5lNIuxf7EA/s1600/photo.png" alt="" /> <span class = "light-text"> Fotoğraflar </ span> </ a> </ div> <div data-navid="om-nav2" class="tile-bt solid-olive shadow-green margin-5 floatleft MblMetroMenu"> <a href = " # "class =" degrade "> <img src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYuainVyV9yNrJvpksltiwL2SdY_HAdaZJW0VkumX6GxShFgpt_LZ0rgPzpwu8QqbtGjOr6Vp-TdMtg5TUj3kD0PPhibXGc1zbkhmN10OU6md5co6Y0kfI0kXyQ4uWrqLizsYUslxcSwI/s1600/music.png" alt = "" / > <span class="light-text"> Müzik </ span> </ a>  </ div> <div veri-Navid = "om-nav" class = "kiremit-bt-büyük solid-mavi-2 shadow- mavi margin-5 MblMetroMenu floatleft "> <a href="http://www.mybloggerlab.com" class="gradient"> <img src = "http://3.bp.blogspot.com/-9xF88_PUrZE/UMnrZV_8rJI / AAAAAAAAJdQ/uoC0sUcGUmQ/s1600/MBL.png "alt =" "/> <span class="light-text"> MyBloggerLab </ span> </ a> </ div>         <- End MblMetroMenu -> < / div> <- END mblmetromenu ->

8- Üsteki kod içerisinde renkli olarak işaretlemiş olduğum yerleri kendinize göre değiştirin.
    İşlem bukadar.