Eğer web sitenizin navigasyon menüsünden sıkıldıysanız? Windows 8 Metro Stili Menüyü kullanabilirsiniz. Şık ve zarif tasarımıyla dikkat çeken bu Menü Windows 8 navigasyon arayüzünden esinlenilmiştir. Herkesin Microsoft Windows 8 veya Windows akıllı telefonları yeni serisinin arayüz deneyimi varsa, o zaman bu METRO arayüzü menü onlar için yeni bir şey değil. Animasyonlu butonları, arka plan resimlerini kendiniz ayarlayabildiğiniz kullanıcı dostu güzel bir eklenti.
ÖNİZLEME
1. Adım: CSS Style kodlarını Ekleme :
- Blogger panelinize giriş yapın Şablon → HTML'yi Düzenle
- Ctrl+F yardımı ile ]]></b:skin> kodunu aratıp bulun ve hemen üstüne aşağıdaki kodları kopyalayıp yapıştırın.
- Şablonu Kaydet diyip çıkın.
.MEFmetromenu{width:960px;margin:10px auto;font-family:'Oswald',Arial,sans-serif;} @media screen and max-width:960px { .MEFmetromenu{position:relative;width:100%;} } .karo-mf{text-align:center;cursor:pointer;width:90px;height:90px;} .karo-mf a{display:block;padding-top:12px;text-decoration:none;} .karo-mf img{padding-bottom:5px;height:48px;width:48px;position:relative;display:block;margin:0 auto;} .karo-mf span{font-size:15px;padding-bottom:4px;display:block;} .karo-mf-large{width:190px;height:90px;text-align:center;cursor:pointer;} .karo-mf-large a{display:block;padding:21px;text-decoration:none;} .karo-mf-large img{vertical-align:middle;position:relative;width:48px;height:48px;margin:0 auto;} .karo-mf-large span{font-size:15px;vertical-align:middle;display:inline;} .karo-mf-extralarge{text-align:center;cursor:pointer;width:190px;height:190px;} .karo-mf-extralarge a{display:block;padding-top:52px;text-decoration:none;} .karo-mf-extralarge img{padding-bottom:22px;height:80px;width:80px;position:relative;display:block;margin:0 auto;} .karo-mf-extralarge span{font-size:15px;padding-bottom:14px;display:block;} .karo-mf,.karo-mf-large,.karo-mf-extralarge{-webkit-transition: all 0.1s linear;-moz-transition: all 0.1s linear;-o-transition: all 0.1s linear;-ms-transition: all 0.1s linear;transition: all 0.1s linear;} .karo-mf:hover,.karo-mf-large:hover,.karo-mf-extralarge:hover{-webkit-transform: scale(0.92,0.92);-moz-transform: scale(0.92,0.92);-o-transform: scale(0.92,0.92);-ms-transform: scale(0.92,0.92);transform: scale(0.92,0.92);} .shadow-beyaz:hover{box-shadow:0 0 6px 3px #fff;-webkit-box-shadow:0 0 6px 3px #fff;-moz-box-shadow:0 0 6px 3px #fff;-o-box-shadow:0 0 6px 3px #fff;-ms-box-shadow:0 0 6px 3px #fff;} .shadow-mavi:hover{box-shadow:0 0 6px 3px #38D1F7;-webkit-box-shadow:0 0 6px 3px #38D1F7;-moz-box-shadow:0 0 6px 3px #38D1F7;-o-box-shadow:0 0 6px 3px #38D1F7;-ms-box-shadow:0 0 6px 3px #38D1F7;} .shadow-yesil:hover{box-shadow:0 0 6px 3px #AACA37;-webkit-box-shadow:0 0 6px 3px #AACA37;-moz-box-shadow:0 0 6px 3px #AACA37;-o-box-shadow:0 0 6px 3px #AACA37;-ms-box-shadow:0 0 6px 3px #AACA37;} .shadow-kirmizi:hover{box-shadow:0 0 6px 3px #E81750;-webkit-box-shadow:0 0 6px 3px #E81750;-moz-box-shadow:0 0 6px 3px #E81750;-o-box-shadow:0 0 6px 3px #E81750;-ms-box-shadow:0 0 6px 3px #E81750;} .shadow-siyah:hover{box-shadow:0 0 6px 3px #444;-webkit-box-shadow:0 0 6px 3px #444;-moz-box-shadow:0 0 6px 3px #444;-o-box-shadow:0 0 6px 3px #444;-ms-box-shadow:0 0 6px 3px #444;} .renk-mavi{background:#00BBE2;} .renk-mavi-2{background:#2C84EE;} .renk-koyumavi{background:#044E94;} .renk-meneksekirmizi{background:#781766;} .renk-kirmizi{background:#E51400;} .renk-kirmizi-2{background:#E81750;} .renk-pembe{background:#FF539B;} .renk-mor{background:#D02090;} .renk-turuncu{background:#FB8F02;} .renk-turuncu-2{background:#F60;} .renk-turuncu-3{background:#DD5F37;} .renk-mercankirmizisi{background:#CD5B45;} .renk-yesil{background:#67B239;} .renk-yesil-2{background:#96BF01;} .renk-koyuyesil{background:#016C38;} .renk-zeytinyesili{background:#990;} .renk-cimenyesili{background:#CDCD00;} .renk-koyukirmizi{background:#5F0000;} .renk-gold{background:#FEE9AE;} .renk-sari{background:#F7D100;} .renk-siyah{background:#000;} .renk-dumanrengi{background:#F5F5F5;} .sola-daya{float:left;} .saga-daya{float:right;} .beyaz-text{color:#fff;} .siyah-text{color:#1e1e1e;} .gradient{background: -moz-linear-gradient(-45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%);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)));background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0) 00%,rgba(255,255,255,0.3) 100%);background: -o-linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%);background: -ms-linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%);background: linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%);} .ara-bosluk{margin:5px;}
2. Adım: METRO Menüyü Ekleme:
<div class="MEFmetromenu"> <div class="karo-mf-extralarge renk-meneksekirmizi shadow-siyah ara-bosluk sola-daya MEFMetroMenu"> <a href="#" class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWxZOC-xn9rlddJe6u9GtTzp88N_PgP9qEe9P5B_PxMqQ3j0ZVk0SVCrswJka9A1tvryQAELklZfQmQNfZJfkKvydMEiiHVP6eeolrrsQ_0Sc94YR15Te4N31Kzs9k5KjK70Ks1QnqF-Q/s1600/home.png" border="0" alt="home" /> <span class="beyaz-text">Ana Sayfa</span> </a> </div> <div class="karo-mf-large renk-mercankirmizisi shadow-siyah ara-bosluk sola-daya MEFMetroMenu"> <a href="#" class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7RWA_bdjXT-csuyqssMCI7SWRc6jhAwOsaeR1e0V8-rrm-Mld18CSPrXmmdjHUgjLqa7H_M1ivfvmyaEhMR1ryMw60xBFdgiCsU5ZcTdfDol0O10n___hge265dUY8-RUQByu4n1ZyMw/s1600/messanger.png" border="0" alt="messanger" /> <span class="beyaz-text">Hakkımızda</span> </a> </div> <div class="karo-mf renk-mor shadow-kirmizi ara-bosluk sola-daya MEFMetroMenu"> <a href="#" class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkUYOboK_GprcDqnWE5q07ePUx0aTI5CHeC9AZmrwj4_sVOLLI7KiSIVo-AQwGetTg2dh-w_nh6ayG_deZlJy2kZgSU0zEd09lDD-ssnkUd2gKKWppQxTEfqJLL8i1pViGceLsZOBny34/s1600/rss.png" border="0" alt="rss" /> <span class="beyaz-text">RSS Feeds</span> </a> </div> <div class="karo-mf-large renk-turuncu shadow-siyah ara-bosluk sola-daya MEFMetroMenu"> <a href="#" class="gradient"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi3eKjyILJlvBC1j7OmkRWPpB61twZo2edZrDnrYyMwGUn5ZHzWG9Z3t5hYwXfjY_S-E0jcM8R48xuUmKt3O8h-LgREmrkSkY8AtA-Zz36ntXUXuzDDYq8CPbWFWnorAogKLVsLhtdF4A/s1600/search.png" border="0" alt="search" /> <span class="beyaz-text">Arama</span> </a> </div> <div class="karo-mf renk-koyukirmizi shadow-kirmizi ara-bosluk sola-daya MEFMetroMenu"> <a href="#" class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3vkfZCfRJzRKUNAvYwxUuFGwI20U8iu5FJ_cklcobfFBXl3EaR762rIbJ_86Ik9WytvbhvUd_tPu2iQOHwELKqbRhVjFf5wHzUVFm1kSGK2sMs4hEOXAexWEKb2C36CKhS6ZJFRc5q4Q/s1600/mail.png" border="0" alt="mail" /> <span class="beyaz-text">İletişim</span> </a> </div> <div class="karo-mf renk-siyah shadow-siyah ara-bosluk sola-daya MEFMetroMenu"> <a href="#" class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMBEpRYVqvlWoHUcvLqDanTIVuGyzFu_BWmIIgqBZwXP_v-k5fNkXw0em_qp7nbpu4lHlTAZ5hJ6bHm53VaB1kzyrtBjinMbIMSknjcIlkxdMVWAfNY-Mk1dsH2Ir2Xe4akt_-OSJUqo8/s1600/help.png" border="0" alt="help" /> <span class="beyaz-text">Yardım</span> </a> </div> <div class="karo-mf renk-kirmizi shadow-kirmizi ara-bosluk sola-daya MEFMetroMenu"> <a href="#" class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiJ25VApWZXti3jLbnUfck4yGOv2bXhjgdSFGXs4ls2J6Z6tDMAnWP7pOh62SceIXeHjH910nuCstb7Egp_vNfY4RQtoY7fH2t29BMOVbBiU-pc4MW1aLADFr39DTGZUhOxN3bYi5O4wk/s1600/youtbe.png" border="0" alt="YouTube" /> <span class="beyaz-text">YouTube</span> </a> </div> <div class="karo-mf renk-koyumavi shadow-mavi ara-bosluk sola-daya MEFMetroMenu"> <a href="#" class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMtKm79XlJlfWeldE979Rma9w7GnntbfT7FXuu5vG3EqCtkGd0EsHSF6E1WLutC8nx1NZDe9rKD2fAZ9TRTF8IsDGjrM0DTqt4ecsfoaRyOCugTZO8PngKws2rFiOjhVSNJDvaXMbYXM8/s1600/face.png" border="0" alt="Facebook" /> <span class="beyaz-text">Facebook</span> </a> </div> <div class="karo-mf-large renk-mavi shadow-mavi ara-bosluk sola-daya MEFMetroMenu"> <a href="#" class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU5AAeu29UZu5wNMRN-5ppUSuytYer1bb8CHatlKCfA-RRXwFt1TyTpMwzPhuO4RWLRuMuFGVMHY0ln5JgYQHsUll0NslqeFTYJ_c1__yjCTeeV2uRCWOMidSdXvhc_gfDi2iqZnGvvDw/s1600/photo.png" border="0" alt="photo" /> <span class="beyaz-text">Fotoğraflar</span> </a> </div> <div class="karo-mf renk-zeytinyesili shadow-yesil ara-bosluk sola-daya MEFMetroMenu"> <a href="#" class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH-SO9MUuM1KE98FClkW4kzf1fcRPXNCDskcj5LVLfUAZvVOqOnxOdXBXYjX-tQLmEDrKCf6CIgOyknMa91_QK9Ekg5oK9iSeZD_VpUUvY-dtDhGQmq9nJ95vGzJmnsP77DYyPb1qaiAQ/s1600/music.png" border="0" alt="music" /> <span class="beyaz-text">Müzik</span> </a> </div> <div class="karo-mf-large renk-mavi-2 shadow-mavi ara-bosluk sola-daya MEFMetroMenu"> <a href="https://www.meftunmede.com" class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwxvO03Wt0i6bfI00GLbxRUX9DVYl2EvX6WC1X3EogZ7jo_NOJZFSgENHbs4EssGr4pIvdHKYfdVEJkimVjzeM5e4L8vz1xQMQbyx4NaIkb1EXLQXZEEXi_RTkJeV6TapDOjdLrfOgvIo/s1600/MEF.png" border="0" alt="Meftun" /> <span class="beyaz-text">Meftun MEDE</span> </a> </div> </div>
3. Adım: Özelleştirme:
Örneğin 2. adımdaki kodlardan Ana Sayfa butonu "renk-meneksekirmizi", buton gölgesi "shadow-siyah", buton boyutu ekstra büyük "karo-mf-extralarge"; Bunu değiştirmek için "renk-cimenyesili", buton gölgesi "shadow-pembe", buton boyutu büyük "karo-mf-large" yada kücük "karo-mf" olarak değiştirebilirsiniz. Bu bölümleri kırmızı renkle işaretledim.
Örnek: <a href="http://örnek.com/örnek.html" class="gradient">
<div class="buton boyutu buton-rengi gölge-rengi ara-bosluk sola-daya MEFMetroMenu"> <a href="Link url'nizi buraya" class="gradient"> <img src="Resim url'niz" border="0" alt="home" /> <span class="beyaz-text">Sayfa adı</span> </a>
Biraz karışık gibi görünüyo ama öyle değil. Gerçekten basit ve güzel bi menü. Windows 8 görünüm metro stil Navigasyon menüsü web sitenize entegre edilmiştir.
Not olarak: Bu menü HTML ya da CSS yani WordPress, Joomla ve destekleyen herhangi Platformu kullanılabilir. Herkeze kolay gelsin. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...
hocam ben blogum açıldığında demodaki gibi olsun istiyorum, yani ana sayfam o şekilde olsun ancak bunun için 2.adımdaki kodları nereye ekliycemi bilemedim. acil cevap bekliyorum kolay gelsin.
YanıtlaSilBlogunuzu göremiyorum Google+ profilinizde. O yüzden sağlıklı bir cevap veremiyorum. Lütfen blogunuzu yada websitenizi yazın. Ona göre cevap veririm. Ama genelde eski menünüzün yerine bu menüyü istiyorsanız; O menünün baslayıp bittiği yere kadar olan bölümü silip, ikinci adımdaki kodları oraya ekliyorsunuz. (gerekli değisikligi yaptıktan sonra).
YanıtlaSilhocam iletişim formundan yazmıştım farklı bir konu için, oraya bi bakarsanız cevap bekliyorum sizden. ayrıca kod deneyip siliyorum açtığım blogları, bloggerda uzmanlaşmaya çalışıyorum o yüzden sabit olarak bir blog kullanmıyorum. ancak yeni açılmış bir basit şablonda blog düşünün bahsettiğiniz menü başlangıç ve bitiş kodlarını nasıl bulabilirim.
YanıtlaSilYorum Gönder
Lütfen yalnızca yazı ile ilgili yorumlar yazın. Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın. Ve lütfen yorumlara tıklanabilir link yazmayın!