Blogger Rollever CSS3 Menü Ekleme

Blogger yeni bir css menü ile daha karşılaşıyoruz bu menüde sizlere sunulan özelliklerin başında gelen güzel görüntü sağlaması ve her türlü blogger sitenine oldukça şık görüntü vermesidir bence.Ekleme konusunda daha önceki menülerdede sizlere bahsettiğim gibi kolay bir eklemedir.Daha önce sizlere paylaştığım diğer menü seçeneklerinden bir kaçınıda sizlere bağlantı linkini vererek paylaşıyorum belki bunlarda ilginizi çekebilir.

• Blogger Kumanda Paneli girin
• Daha  sonra Şablon seçin
• HTML'yi Düzenle diyin ve daha sonra Witget Şablonu Genişlet tıklayın CTRL + F yardımı ile bu  ]]></b:skin> kodunu bulun
• Sonra Aşağıdaki Kodu Hemen  ]]></b:skin>  Üstüne Yapıştırın

/* Rollever CSS3 Menüsü bloggerturkey.com */ ul{ margin:0; padding:0; }  li{ display:inline; list-type:none; }  a.glidebutton{ display: inline-block; position: relative; color: #4A4A4A; /* default color */ background: #ececec; /* default bg color */ text-decoration: none; font: bold 14px Arial; /* font settings */ letter-spacing: 2px; /* font settings */ overflow: hidden; height: 30px; /* height of each button */ text-align: center; border-radius: 5px; /* border radius */ -moz-transition: all 0.3s ease-in-out; /* Enable CSS transition between property changes */ -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }  a.glidebutton > span:first-child{ /* first span inside button */ position: relative; display: block; height: 100%; padding: 6px; /* padding of button */ -moz-box-sizing: border-box; box-sizing: border-box; -moz-transition: all 0.3s ease-in-out; /* Enable CSS transition between property changes */ -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }  a.glidebutton > span:first-child:after{ /* CSS generated content */ content: attr(data-text); /* Duplicate text of span markup */ display: block; width: 100%; height: 100%; -moz-box-sizing: border-box; box-sizing: border-box; padding: inherit; position: absolute; top:100%; left:0; }  a.glidebutton:hover{ color: black; /* color of button on hover */ background: #72cb47; /* bg color of button on hover */ box-shadow: 0 0 4px green inset; }  a.glidebutton:hover > span:first-child{ -moz-transform: translateY(-100%); -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); }

• Daha  sonra Yerleşim >> Gatget Ekle >> Html/JavaScript >> içersine aşağıdaki kodları ekleyin seçin

<ul>

<li><a class="glidebutton" href="#"><span data-text="Ana Sayfa">Ana Sayfa</span></a></li>

<li><a class="glidebutton" href="#"><span data-text="Eklentileri">Blogger</span></a></li>

<li><a class="glidebutton" href="#"><span data-text="Hakımızda">Hakımızda</span></a></li>

<li><a class="glidebutton" href="#"><span data-text="Site Arşivi">Site Arşivi</span></a></li>

<li><a class="glidebutton" href="#"><span data-text="Bize Yazın">İletişim</span></a></li>

</li>

</ul>

Kodlar içersinde # bu simgenin yanına bağlantı linkini vericeksiniz diğer kırmızı renk ile boyadığıma ise vermiş olduğunuz bağlantı linkinin adını yazıcaksınız 

ve son olarak kodu nasıl yerleştireceğimizi resimde gördüğünüz gibi yapıyoruz.