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/AVvXsEjHbS1tbMbLEa-l7wDWynZkazHjx3Clejpd_UBuPa7YxHUJrfL8y9AX3jH5jjQhGR_JfXRwysNY86g_zrPxou7mR9stUZggJ_uyMi2NdAR2i2FEX1ai4VEmV_VRTkXu54jQE3mLXk2EjK4/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/AVvXsEjQ8R28HgLeONfUbZo5NVCyb32yRRfVwnQEIo3-ImUm7a2AnoFFgovWsNaL3lVCwQJEqFlo9565T0xnGvIYgbNHTkjAUH_98a3azFXN5-Rxw4WIJl8xUKXdhnM2om_IltJAW_sC2E1_dlA/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/AVvXsEhii6JGvvlt0Yv9Oq8u177QNLv4Hcz1nHohFAqvYPeZu62o2LURSPPfwkPzgmoL6b7VwmBvLKbuictDGS-nS_yzGCXtdz0ofyzKZ6uCMtamWH5NUnSO46PkIUgS1PBNMei0r3uAfQIFZJw/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/AVvXsEjTRNRn9h5wtbuGLqX8wbG_dKFMY-QVFtxkxoL8csk8Gaiqrqa9Qmwe5JtyAhNheNkJ-cI12f5xeJVSDEts7Q5TJjJE3f_YXMN56pitmmVRl-Y9iwbKfLN-s3IDW6yUvDLvh9sgb3VgBpM/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/AVvXsEiePMW2uQAfWAkPz-fGUrdZ0aI4-KhIaxHhUCCmBxiKgLBjFu12vC6lqzY2TOjcfd33m54wgbFs9D2xlWbvkuqFK7oMdfnWi5OFixDZ2fMEIt7GxATq2SsRCozlLjWl7I6X7zA-VwGOZz0/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/AVvXsEjbB-m1lyg97UNv7Eut5167yKm7TvYtyoc7skk0CdauZVg5TmO2IvJAVwhPBqE3WQdjIksF88hVEFXcrtAvycGSIUP41exfB2XFgD_CzwCktDBJGc455g-PwhYU-eWXKhNGZ-eNtC4l-Pw/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/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="gradient">
<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="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDwnYsJHOV_IXGn3DSVhZHWtCIGA5hbbTpA7Z3Sr6bo2mZDid1VLdrysTtHS8R2aD2rl0X8ZE8_K06Oa_03gy1PQScMR-oLr7tbIQihNhrRKPBgM5p9UmhB9g7NqMTcalfU5lNIuxf7EA/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/AVvXsEgYuainVyV9yNrJvpksltiwL2SdY_HAdaZJW0VkumX6GxShFgpt_LZ0rgPzpwu8QqbtGjOr6Vp-TdMtg5TUj3kD0PPhibXGc1zbkhmN10OU6md5co6Y0kfI0kXyQ4uWrqLizsYUslxcSwI/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/AVvXsEiy5hcFZPz7xTBC-6mOM-Wb5S7RgJwyhOFdL9xv_zD3FzX77fA9s4gqL-Lf1u2aJN3fKVHjXhFV_6ZzoLvMLl4FrToTpfyMp3BpuXY3rRw1jMVuUOG-f51n3pl83uu_1wsWcQTDanWnw1w/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.


Blogger Metro UI Navigasyon Üst Menü Ekleme
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 ala...

Devamı »

Sanal Disk Oluşturma Programı(Daemon Tools Lite 4)
Sanal Disk Oluşturma Programı(Daemon Tools Lite 4)

Daemon Tools Lite 4    DAEMON Tools Lite , kullanıcıların bilgisayarları üzerinde hızlı ve kolay bir şekilde  sanal diskler (sürüc...

Devamı »

İnternet Download Manager (IMD)
İnternet Download Manager (IMD)

   Ülkemizde en çok kullanılan  dosya indirme  yöneticilerinden birisi şüphesiz  İnternet Download Manager  (IDM)'dir. IDM ...

Devamı »

Poedit İle WordPress Temalarınızı Türkçeleştirin
Poedit İle WordPress Temalarınızı Türkçeleştirin

Poedit  adından anlaşılacağı üzere .po uzantılı dosyaların çevirisini yapmaya yarayan bir yazılım. Genellikle  WordPress  temalarda buluna...

Devamı »

Alternatif PhotoShop Programları
Alternatif PhotoShop Programları

1-   PhotoShop:     Photoshop'un grafik tasarım ve resim düzenleme konusunda kullanıcıların tüm isteklerine tam anlamıyla karşılık v...

Devamı »

Programsız Film İndirme Yöntemi
Programsız Film İndirme Yöntemi

        Merhaba Arkadaşlar...     Bu makalemizde programsız ve uygulama gibi bir eklentileri kullanmadan her türlü filmleri indirmeniz ...

Devamı »

Maxthon İle Film İndirme Yöntemi - Güncellendi 2019
Maxthon İle Film İndirme Yöntemi - Güncellendi 2019

         Maxthon ile sınırsız her türlü film indirmenize olanak sağlayan geliştirilmiş kullanışlı internet tarayıcısını kullanacağız.Da...

Devamı »
 
Top