Blogunuza CSS ile ONLİNE menü oluşturmak ister misiniz ?

Bugün sizlere CSS tarzında online menü oluşturabileceğiniz bir siteyi tanıtacağım. Bu sitede 5 çeşit menü tarzı mevcut. URL'yi paylaştıktan sonra istediğiniz formatta menü oluşturabilir daha sonra üzerindeki tasarımları rahatlıkça değiştirebilirsiniz. Şuan kullanmakta olduğum menüyü oluşturduğum siteyi sizinle paylaşıyorum.

3 Adımda rahatlıkça uygulayabileceğiniz CSS menü

1. Adım: Siteye gidin: Online CSS Menü oluşturmak için TIKLAYIN. Daha sonra sitede bulunan 5 çeşit menü tarzlarından birini seçin.


2. Adım: Menü stilini seçtikten sonra artık menü tasarımına geçmiş olacaksınız. Açılan sayfada " Customize " sekmesini tıklayın. Aşağıdaki resimde gördüğünüz gibi. 


3.Adım: Yani son adımda ise artık menü başlıklarına isim vermek veya arttırıp eksiltmek bölümü olarak sonlandıracağız. Açılan sayfada Menü başlıklarını değiştiriyoruz.
Örneğin: 
  • Home --> Ana Sayfa 
  • Contack --> İletişim gibi
İsim düzenleme işlemini yaptıktan sonra menü URL kısmını dolduruyoruz son olarak da yaptığımız işlemi kaydetmek için: Update İtem butonuna tıklıyoruz. 

Bu işlemleri tüm menü adları için tek tek uyguluyoruz. Son olarak online hazırladığımız bu CSS MENÜ'yü blogumuzda uygulamaya geldi.



Yukarıdaki resimde gördüğünüz gibi HTML ve CSS butonları mevcut. İşimize yarayacak kodlar onlarda saklı. 
HTML; kısmındaki kodları blogumuzda yeni gadget oluşturarak içine ekleyeceğimiz kodlar mevcut. Yani menüye verdiğimiz isimler ve gidilecek url adresleri
CSS; kısmında menü tasarımı arka plan, yazı fontu vs içerikler mevcut. Bu tasarım kodunu ise; 
  • Kumanda Paneli
  • Şablon
  • HTML'yi Düzenle
  • Widget'i Genişlet ( demeyeceğim artık. Geçenlerde Blogger HTML Editörünü Yenilemişti ) 
Widget'i genişlettikten sonra aşağıdaki kodu bulun:
]]></b:skin>
Yukarıdaki kodun üzerine gelecek şekilde kopyaladığınız CSS kodlarını yapıştırın ve şablonu kaydedip çıkın. Online CSS tarzından oluşturduğunuz Menüyü artık kullanabilirsiniz.

Bu anlattıkların tam bir karmaşa !!! Diyenler olabilir elbette onlar için kısa bir video hazırladım.
Buyrun iyi seyirler.

Blogger CSS Metro Menü Eklemek

Metro Tarzı Blogger Menü

Klasik blogger menülerinde sıkılmadınız mı? Hadi bir değişiklik yapalım. Blog menünüzü rengarenk yapıp blogunuza canlılık katalım. Windows 8 kullanıcıları bu tasarımı daha iyi bilir. Windows 8'de kullanıcı dostu bir menü oluşturulmuş. Her uygulama için bir menü hazırlanmış ve kullanımı çok basit ve çok kolay. Göz yormayan bir renk tasarımı mevcut. Hatta bazı telefonlarda Windows 8 işletim sistemi mevcut. Mobil cihazlarda da kullanılmaya başlanılmış durumda.

Hadi gelin, klasik blog menünüzü bir kenara bırakalım Windows 8 görünümlü bir menü oluşturalım.

Tüm temalara uygun bir tasarımı mevcut, resimde gördüğünüz gibi. Şimdi bu menüyü blogumuza uygulayalım.

1.ADIM: Blogumuzun ŞABLON bölümüne girip CTRL + F yardımı ile ]]></b:skin> kodunu aratalım. Hemen üzerine gelecek şekilde Metro Tarzı Menünün CSS kodlarını ekleyelim.
/*===METRO Menu==*/

body {
 font-family:sans-serif;
}
a {
 text-decoration:none;
}
.metromenu {
 width:960px;
 margin:auto;
}
@media screen and (max-width:960px) {
 .metromenu {
 width:100%;
 }
}

/* MetroMenu */
.MetroMenu {
 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)" !important;
 filter: alpha(opacity=50) !important; /* For IE8 and earlier */ }
.om-ctrlitem:hover {
 opacity:0.8;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=80)" !important;
 filter: alpha(opacity=80) !important; /* For IE8 and earlier */ }
.om-activectrlitem {
 opacity:1 !important;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
 filter: alpha(opacity=100) !important; /* For IE8 and earlier */ }
.om-controlitems {
 width:960px;
 margin:auto;
}
.om-controlitem {
 height:48px;
 cursor:pointer;
}
.om-closenav {
 float:left;
}
.om-movenext {
 float:right;
}
.om-itemholder {
 margin:auto;
 padding:20px 0px;
}
@media screen and (max-width:960px) {
 .om-closenav {
  position:absolute;
  z-index:9999;
  left:0;
  top:0;
 }
 .om-movenext {
  position:absolute;
  z-index:9999;
  right: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 MetroMenu */

/* TILE BUTTONS */
/* Standar Buttons */
.tile-bt {
 text-align:center;
 cursor:pointer;
 width:90px;
 height:90px;
}
.tile-bt a {
 display:block;
 padding-top:12px;
 text-decoration: !important;
}
.tile-bt img {
 margin:0 auto 0 auto;
 padding-bottom:5px;
 height:48px;
 width:48px;
 position:relative;
 display:block;
}
.tile-bt span {
 font-size:12px;
 padding-bottom:10px;
 display:block;
}
.tile-bt:active {
 opacity:0.5;
}
/* End Standard Buttons */


/* Large Buttons */
.tile-bt-large {
 width:190px;
 height:90px;
 line-height:90px;
 text-align:center;
 cursor:pointer;
}
.tile-bt-large a {
 display:block;
 text-decoration: !important;
}
.tile-bt-large img {
 vertical-align: middle;
 margin:auto;
 padding:0px;
 position:relative;
 width:48px;
 height:48px;
}
.tile-bt-large span {
 vertical-align: middle;
 display:inline;
}
.tile-bt-large:active {
 opacity:0.5;
}
/* End Large Buttons */
/* Extralarge Buttons */
.tile-bt-extralarge {
 text-align:center;
 cursor:pointer;
 width:190px;
 height:190px;
}
.tile-bt-extralarge a {
 display:block;
 padding-top:52px;
 text-decoration: !important;
}
.tile-bt-extralarge img {
 margin:0 auto 0 auto;
 padding-bottom:22px;
 height:80px;
 width:80px;
 position:relative;
 display:block;
}
.tile-bt-extralarge span {
 font-size:14px;
 padding-bottom:20px;
 display:block;
}
.tile-bt-extralarge:active {
 opacity:0.5;
}
/* End Extralarge Buttons */

/* END TILE BUTTONS */

/* SHADOW LIST */
.shadow-white, .shadow-black, .shadow-blue, .shadow-green, .shadow-red {
 /*display:inline-block;*/
}
.shadow-white: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-blue: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 3px #38D1F7;
 -ms-box-shadow:0px 0px 6px 3px #38D1F7;
}
.shadow-green: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-red: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-black:hover {
 box-shadow:0px 0px 6px 3px #444;
 -webkit-box-shadow:0px 0px 6px 3px #444;
 -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 LIST */
/* BACKGROUND LIST */
/* Solid Colors */
.solid-blue { background:#00BBE2; }
.solid-blue-2 { background:#2C84EE; }
.solid-darkblue { background:#044E94; }
.solid-violetred { background:#781766; }
.solid-red { background:#E51400;}
.solid-red-2 { background:#E81750; }
.solid-pink { background:#FF539B; }
.solid-purple { background:#D02090; }
.solid-orange { background:#FB8F02; }
.solid-orange-2 { background:#FF6600; }
.solid-orange-3 { background:#DD5F37; }
.solid-coral { background:#CD5B45; }
.solid-green { background:#67B239; }
.solid-green-2 {background:#96BF01; }
.solid-darkgreen { background:#016C38; }
.solid-olive { background:#999900}
.solid-grass { background:#CDCD00; }
.solid-darkred { background:#5F0000; }
.solid-gold { background:#FEE9AE; }
.solid-yellow { background:#F7D100; }
.solid-black { background:#000; }
.solid-smoke { background:#F5F5F5; }
/* End Solid Colors */

/* MISC */
.clearspace { clear: both; }
.floatleft { float:left; }
.floatright { float:right; }
.none { display: none !important; width:0px !important; }
.light-text {
 color:#fff;
}
.dark-text {
 color:#1e1e1e;
}
.gradient {
 background: -moz-linear-gradient(-45deg,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%); /* FF3.6+ */
 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+ */
 background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,0) 00%,rgba(255,255,255,0.3) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* IE10+ */
 background: linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* W3C */
}
.margin-5 { margin:5px; }

2.ADIM: Şablona eklediğim CSS kodlarında sonra artık menümüzün HTML kodlarını ekleyeceğiz. Blogunuzun YERLEŞİM bölümünden yeni gadget oluşturarak içerisine aşağıdaki kodları ekleyin.

<!-- metromenu -->
<div class="metromenu">

<div data-navid="om-nav" class="tile-bt-extralarge solid-violetred shadow-black margin-5 floatleft MetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1A5nKcqUWEQtkTs2hiygXKwqWTLwzVBLphvC3jG1rlY_CCEl4Km_aw2QeDQ0o4uLsKvmmFBPUELO0G5E_X6RKU69jIGM9j7iZXihDZ-oWnnIZAPuQ9ndGIc5vmyhf229lfB2qqFODlP0/s1600/home.png" alt="" />
<span class="light-text">Anasayfa</span>
</a>
</div>
 
<div data-navid="om-nav" class="tile-bt-large solid-coral shadow-red margin-5 floatleft MetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTCwzRW8NYk0XNZs4Nf3030O3n-kKqgS_gBMugc7bvrDCpqerKRusl43xQaRWBgymqq1SAX6phm7tgmgj5KqNCOGDDo0z5TRd943dnBDHUVGeKrWIe6GxuCcBvMlAEd7jk_fZON7CMEKY/s1600/messanger.png" alt="" />
<span class="light-text">Hakkımda</span>
</a>
</div>
 
<div data-navid="om-nav2" class="tile-bt solid-purple shadow-blue margin-5 floatleft MetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz4nwfWMGuksvpvC3ychMQXWZbFoYr2NTK6nAap2li14kGRh4O_BKwh05sMYVD_pr_8EZjyhVw0Dx-Gn6NxzdfUHBOrlr8jc7B2WsnQfagot8Mzhwz9DbdlKEEAVRrdG2fYfve3ANewD8/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 MetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy29ibrVCJtdpCyndkTo-xeZItxqrZFybR3E8KRrxZww-YMQIIWT2HTiDxOE7ENzPKzdXV02SDo4-xa9J1WGocmeybSf3biSfZJT2U6_eMzNh4Wi7SwI6zeVWgjFtOU6HZ9ipBHPaJrCY/s1600/search.png" alt="" />
<span class="light-text">Ne Aramıştınız?</span>
</a>
</div>
   
 <div data-navid="om-nav2" class="tile-bt solid-darkred shadow-red margin-5 floatleft MetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjddxbVb5KvpvJXZZHlAvQercb6RJ_yA_GoQPlacsw3E1HIc8EN5mNQA-GU7S-SpEfO_VH0uspsgFq15nWHP254tMNwUCUOv5zN39ElMUcGqtL3JoCHvid6koFXeoPrv9G6vGfwN-xajMY/s1600/mail.png" alt="" />
<span class="light-text">İletişim</span>
</a>
</div>
   
<div data-navid="om-nav2" class="tile-bt solid-orange shadow-black margin-5 floatleft MetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCdCljzVxUFLIWz_TROJtsl_ANqJk25QKsOOBAAQxNNgqOYsueXjze0QXkayZc-bt5X4VL7PaEc7MYZX6YCnN22U0KsU3d6fYlnUyhItioePCOKdjLJSM5wZt5gKqiz3cbDRV8WhSC2_4/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 MetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAvXW58ckqIOozFGqnrTS_owYdF18omgZIfGDu3l42Dr5DzTmMm_MIL-VWo2nqtLTTFE-UDskLlBBiEO20QE3olvkoCCtRqQ_mboBucJR6CJ9fBa0LUhgmhNZOSsmbVyfOUXEz3uX_0T8/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 MetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk6LQndT7K2a-6GKYeNLdkuJ4fc8xNiE-qBLMnQvjG7DLiNKOdaL88QdpWuz55N2-Fu2pMIPJyPcEDETFKJNUjt0Wfj5MxN1w6VhGENMAPvq3wMuNqIK4FsCtnmztTF5Gnm66oh1UChlM/s1600/photo.png" alt="" />
<span class="light-text">Galeri</span>
</a>
</div>
   
<div data-navid="om-nav2" class="tile-bt solid-olive shadow-green margin-5 floatleft MetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGEwsJ5CQpasoecKtKKjkRYjkZAwv7b0FlNq9AkxfQVIMCP5URl1DBcQtFuFsAK-RuRq9vhY9jZcxJz23hKfaW6XimjnxgxwDpU0vNDZt3lko-eM4Kyz8aiq99O89XPUFYlG88IK4tAmE/s1600/music.png" alt="" />
<span class="light-text">Müzik</span>
</a>
 </div>
   
        <!-- End MetroMenu -->
  </div>
<!-- END metromenu -->
# işaretli yerlere menü URL adreslerini ekleyin. Eğer menü seçenekleri fazla geldiyse örnek menü silme işlemi:
<div data-navid="om-nav2" class="tile-bt solid-olive shadow-green margin-5 floatleft MetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGEwsJ5CQpasoecKtKKjkRYjkZAwv7b0FlNq9AkxfQVIMCP5URl1DBcQtFuFsAK-RuRq9vhY9jZcxJz23hKfaW6XimjnxgxwDpU0vNDZt3lko-eM4Kyz8aiq99O89XPUFYlG88IK4tAmE/s1600/music.png" alt="" />
<span class="light-text">Müzik</span>
</a>
 </div>