BAYRAĞIM


Ey mavi göklerin beyaz ve kızıl süsü

Kızkardeşimin gelinliği, şehidimin son örtüsü.

Işık ışık, dalga dalga bayrağım,

Senin destanını okudum, senin destanını yazacağım.



Sana benim gözümle bakmayanın

Mezarını kazacağım.

Seni selamlamadan uçan kuşun

Yuvasını bozacağım.



Dalgalandığın yerde ne korku ne keder...

Gölgende bana da, bana da yer ver!

Sabah olmasın, günler doğmasın ne çıkar!

Yurda, ay-yıldızının ışığı yeter.



Savaş bizi karlı dağlara götürdüğü gün

Kızıllığında ısındık;

Dağlardan çöllere düşürdüğü gün

Gölgene sığındık.



Ey şimdi süzgün, rüzgarlarda dalgalı;

Barışın güvercini, savaşın kartalı...

Yüksek yerlerde açan çiçeğim;

Senin altında doğdum,

Senin dibinde öleceğim.


Tarihim, şerefim, şiirim, herşeyim;

Yer yüzünde yer beğen:

Nereye dikilmek istersen

Söyle seni oraya dikeyim!

 

Sizler için bir çok menü kombinasyonu incelemeye çalıştıysam da şüphesiz içlerinde en etkili olanlar hareketli css ile tasarlanmış resim içeren menü zincirleri oldu. CSS ile tasarlanmış şık bir menü tablosunu göstermeye çalışacağım. 


Blogger Resim Vurgu Efektli Çember Menü Oluşturmak 

1 ) Blogger Kumanda paneline>Şablon>HTML'yi Düzenle sekmesiyle kodlarımızı açıyoruz. Widgetleri genişlet kutucuğunu işaretliyoruz.
2 ) Ardından CTRL+F yardımı ile ]]></b:skin> kodunu bularak hemen üzerine Blogger Resim Vurgu Efektli Çember Menü kodlarını ekliyoruz.

.Btrix-item { width: 150px; height: 150px; border-radius: 50%; position: relative; cursor: default;} .Btrix-info-wrap, .Btrix-info{ position: absolute;border: 1px solid #8D8D8D;margin-top: -1px;width: 150px; height: 150px; border-radius: 50%;} .Btrix-info-wrap { background: #07CFE0 url(../images/bg.jpg); box-shadow: 0 0 0 20px rgba(255,255,255,0.2), inset 0 0 3px rgba(115,114, 23, 0.8); } .Btrix-info > div { display: block;position: absolute;width: 150px;height: 150px; border-radius: 50%; background-position: center center; -webkit-backface-visibility: hidden; /*Just for webkit to have a smooth font*/ } .Btrix-info .Btrix-info-front { -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .Btrix-info .Btrix-info-back { opacity: 0;background: #07CFE0;pointer-events: none; -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); -webkit-transition: all 0.4s ease-in-out 0.2s; -moz-transition: all 0.4s ease-in-out 0.2s; -o-transition: all 0.4s ease-in-out 0.2s; -ms-transition: all 0.4s ease-in-out 0.2s; transition: all 0.4s ease-in-out 0.2s; } .Btrix-img-1 { background-image: url(http://2.bp.blogspot.com/-4XCvJshy9x8/UIDjlYZiXDI/AAAAAAAAFQY/ttkRA-S1f6g/s1600/bloggertrix-image+1.jpg);} .Btrix-img-2 { background-image: url(http://2.bp.blogspot.com/-Jb6h8JyvgY0/UIDkIf-Qz6I/AAAAAAAAFQg/mkh-ENaD86c/s1600/bloggertrix-image+2.jpg);} .Btrix-img-3 { background-image: url(http://3.bp.blogspot.com/-Ll04NZIOfmk/UIDkJV5vrtI/AAAAAAAAFQo/fYqC8FW7g7U/s1600/bloggertrix-image+3.jpg);} .Btrix-info h3 { color: #fff; text-transform: uppercase;letter-spacing: 2px;font-size: 16px;margin: -20px 15px; padding: 40px 0 0 0; height: 80px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); } .Btrix-info p { color: #fff; padding: 10px 5px 0; font-style: italic; margin: -60px 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5); } .Btrix-info p a { display: block;color: #e7615e;font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 4px; font-family: 'Open Sans', Arial, sans-serif; } .Btrix-info p a:hover { color: #fff; } .Btrix-item:hover .Btrix-info-front { -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); opacity: 0; } .Btrix-item:hover .Btrix-info-back { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; pointer-events: auto;} .Btrix-grid { margin: 20px 0 0 0; padding: 0; list-style: none; display: block; text-align: center; width: 100%;} .Btrix-grid:after, .Btrix-item:before { content: ''; display: table;} .Btrix-grid:after { clear: both;} .Btrix-grid li { width: 150px; height: 150px; display: inline-block; margin: 4px; }


***Kırmızı ile yazılmış resim linkleri menüde görünecek olan resimlerdir kendinize göre düzenleyebilirsiniz. Resimlerin oval olmasına gerek yok, kodlar otomatik olarak oval bir açıyla gösterim sunacaktır. 
Daha sonra Menüyü isterseniz Gadget ekle diyerek yada yayın yaparken HTML bölümüne geçerek Blogger ile tasarlanmış temalarda kullanabilirsiniz. Kullanmak istediğiniz yerde eklemeniz gereken kod dizini aşağıdaki kodlardır.


<section class="main"> <ul class="Btrix-grid"> <li> <div class="Btrix-item Btrix-img-1"> <div class="Btrix-info-wrap"> <div class="Btrix-info"> <div class="Btrix-info-front Btrix-img-1"> </div> <div class="Btrix-info-back"> <h3> Kodlar</h3> Blogger Kodları <a href="Buraya Konu Etiketini Ekle"><br />Tüm Kodları Gör</a><br /> </div> </div> </div> </div> </li> <li> <div class="Btrix-item Btrix-img-2"> <div class="Btrix-info-wrap"> <div class="Btrix-info"> <div class="Btrix-info-front Btrix-img-2"> </div> <div class="Btrix-info-back"> <h3> Şablonlar</h3> Blogger Şablonları <a href="Buraya Konu Etiketini Ekle"><br />Tüm Şablonları Gör</a><br /> </div> </div> </div> </div> </li> <li> <div class="Btrix-item Btrix-img-3"> <div class="Btrix-info-wrap"> <div class="Btrix-info"> <div class="Btrix-info-front Btrix-img-3"> </div> <div class="Btrix-info-back"> <h3> Eklentiler</h3> Blogger Eklentileri <a href="http://etralibela-61.blogspot.com/"><br />Tüm Eklentileri Gör</a><br /> </div> </div> </div> </div> </li> </ul> </section>

Blogger Resim Vurgu Efektli Çember Menü Değişiklikleri:
  • Mavi olarak yazılmış olan alanlar mouse ile menü üzerine geldiğinizde, açılacak olan menü başlığı.
  • Pembe olarak verilmiş olanlar menü açıklaması. 
  • Kırmızı verilmiş yerler menünün içerisinde yer alacak link yazısı ve linkin ulaşacağı adres. 



Bizi Takip Edin
Pinterest Facebook Twitter
 © by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakın.



Yorum Gönder Blogger

 
Top