Adsense Bağlantı Reklamlarına Benzer Blog Bağlantı Butonları

3.10.17
Adsense Bağlantı Reklamlarına Benzer Blog Bağlantı Butonları

Adsense, bloglarda ve web sitelerinde bağtı reklamlarını bir buton şeklinde yayınlıyor. Ayrıca, bu bağlantı reklamları arka plan rengine uyum sağlayarak sitenin bir parçasıymış gibi bütünlük sağlıyor.

Adsense reklamları ile blog tasarımının daha iyi bir uyum içerisinde olabilmesi ve bir bütünlük oluşturması için, bu yazımızda CSS ve HTML kodları kullanarak, Adsense bağlatı reklamlarına uyum sağlayacak blog bağlantı butonları oluşturmayı anlatacağım ve bağlantı butonlarına farklı renkler ekleyerek de kullanabileceksiniz.

Blog Bağlantı Butonları Nasıl Oluşturulur?


Aşağıdaki CSS kodlarını blogunuzun ]]></b:skin> yada </style> kodunun bir satır üzerine ekleyin ve şablonu kaydedin.

.link-button{font-weight:normal;font-size:16px;color:#fff;width:100%;max-width:350px;height:90%;margin:10px auto;text-align:center;display:block;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:41px;align-items:center;justify-content:center;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;border:1px solid #fff;border-radius:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-shadow:0 1px 1px rgba(255,255,255,0.35) inset,0px 1px 1px rgba(0,0,0,0.3)}
.link-black{background:#333}
.link-red{background:#f44336}
.link-pink{background:#e91e63}
.link-purple{background:#9c27b0}
.link-deep-purple{background:#673ab7}
.link-indigo{background:#3f51b5}
.link-blue{background:#2196f3}
.link-light-blue{background:#03a9f4}
.link-cyan{background:#00bcd4}
.link-teal{background:#009688}
.link-green{background:#4caf50}
.link-light-green{background:#8bc34a}
.link-lime{background:#cddc39}
.link-yellow{background:#ffeb3b}
.link-amber{background:#ffc107}
.link-orange{background:#ff9800}
.link-deep-orange{background:#ff5722}
.link-brown{background:#795548}
.link-grey{background:#9e9e9e}
.link-blue-grey{background:#607d8b}
.link-white{background:#fff;color:#222}
.link-button:hover{background:#fff;color:#222}

Yukarıdaki CSS kodları arasında her bir butona ait farklı renk kodu bulunmakta. Bu renk kodlara farklı renk kodları ekleyerek yada varolan renk kodunu değiştirerek farklı butonlar oluşturabilirsiniz.

Aşağıdaki HTML kodları blog sayfalarında, yayınlarında veya menülerinde kullanabilirsiniz. Her bir HTML kod farklı bir butonu oluşturmaktadır.

<a class="link-button link-red" href="#" target="_blank">Bağlantı Butonu</a>
<a class="link-button link-pink" href="#" target="_blank">Bağlantı Butonu</a>
<a class="link-button link-purple" href="#" target="_blank">Bağlantı Butonu</a>
<a class="link-button link-deep-purple" href="#" target="_blank">Bağlantı Butonu</a>
<a class="link-button link-indigo" href="#" target="_blank">Bağlantı Butonu</a>
<a class="link-button link-blue" href="#" target="_blank">Bağlantı Butonu</a>
<a class="link-button link-light-blue" href="#" target="_blank">Bağlantı Butonu</a>
<a class="link-button link-cyan" href="#" target="_blank">Bağlantı Butonu</a>
<a class="link-button link-teal" href="#" target="_blank">Bağlantı Butonu</a>
<a class="link-button link-green" href="#" target="_blank">Bağlantı Butonu</a>
<a class="link-button link-light-green" href="#" target="_blank">Bağlantı Butonu</a>
<a class="link-button link-lime" href="#" target="_blank">Bağlantı Butonu</a>
<a class="link-button link-yellow" href="#" target="_blank">Bağlantı Butonu</a>
<a class="link-button link-amber" href="#" target="_blank">Bağlantı Butonu</a>
<a class="link-button link-orange" href="#" target="_blank">Bağlantı Butonu</a>
<a class="link-button link-deep-orange" href="#" target="_blank">Bağlantı Butonu</a>
<a class="link-button link-brown" href="#" target="_blank">Bağlantı Butonu</a>
<a class="link-button link-grey" href="#" target="_blank">Bağlantı Butonu</a>
<a class="link-button link-blue-grey" href="#" target="_blank">Bağlantı Butonu</a>
<a class="link-button link-white" href="#" target="_blank">Bağlantı Butonu</a>
<a class="link-button link-black" href="#" target="_blank">Bağlantı Butonu</a>

Yukarıda her bir bağlatı butonuna ait farklı CSS kodu olduğunu belirtmiştik. Aşağıdaki örnek kodlarda gürüldüğü gibi siyah bağlantı butonuna ait CSS ve HTML kodları bulunmakta. Örnek kodlarda belirtilen yerleri değiştirerek daha farklı (renkli) butonlar elde edebilirsiniz. Eğer yeni bir buton oluşturursanız, butona ait CSS kodunu yukarıdaki CSS kodları arasına eklemeniz gerekir.

Örnek CSS kodu
.link-black{background:#333}

Örnek HTML kodu
<a class="link-button link-black" href="#" target="_blank">Bağlantı Butonu</a>

Yukarıdaki örnek HTML kod içerisinde belirtilen (#) yerine bağlantınızı ekleyin.


Yapılması ve kullanması bu kadar basit olan bağlantı butonları blogunuza farklı bir estetik de katacaktır. Blog bağlantı butonları ile ilgili görüşlerinizi yorum formunu kullanarak bildirebilirsiniz.
Bu makale faydalı mı?

Kategori İçerikleri

Blogger
Disqus
Yorum Ekle

5 yorum

Bu butonları görünce kalkıp oynayasım geldi. Hocam bir de içerik reklamları ile ilgili böyle bir tasarım yapsanız.

Cevap

Bakalım inşallah yaparız

Cevap

Çok güzel olmuş eline sağlık.

Cevap

Teşekkür ederim.

Cevap

Hava kulesi projeme sahip çıkmanızı talep ediyorum.
Türkiyenin enerji işsizlik ve kültürsüzlük sorunlarını çözecektir.
Helyum balonlarının yerden 40 000 metreye kadar kaldırma kapasitesi vardır.
Ağırlığı helyum balonları ile taşınan kompozit bir gövde ile yerden 40 000 metre yüksekliğe uzanan kule yapmak günümüz imkanları ile mümkündür.
Kule 50 metre çaplı sert hava koşullarına dayanıklı olarak tasarlanan helyum balonlarının 400 metre çapında kompozit bir hava tünelini sarmal olarak sarması ile elde edilir. Çelik kablolar ile yere ve kompozit gövdeye sarmal olarak bağlanan tasarım rüzgar direncini arttıracak gövdeye uygulanan baskıyı dağıtacaktır.
Yıldırım hatta uçak çarpması gibi kazalarda gövdenin parçalanmasını önler.
Helyum balonları kevlar destekli nano katman kumaşlar ile sarılır.
Bu sayede 60 yıl dayanıklı uzun ömürlü olur.
Kompozit kule boru biçimli metal eklemlerin kafes biçimli eklenmesi ile elde edilen iskelet üzerine iç kaplama olarak 3 mm reçine elyaf ile elde edilir.
Hafif metal iskelet aynı zamanda kule vinç vazifesi görür. Asansör bakım merdivenlerini taşır.
2.5 metre x 2.5 metre ebatlı iskelet 50 metrelik katlar halinde üst üste eklenir. Daire oluşturmak için 400 metre çap 1300 metre çevre için toplam 26 adet iskelet gereklidir.
Daire biçimli dizilen iskeletlere dıştan helyum balonları takılarak içten kompozit paneller takılarak kule edilir. Kule dış çapı 500 metredir. Havada durabildiği için deniz üzerine inşa edilebilir. İlk olarak 4000 metre yükseklikte ana kat inşa edilir. Diğer katlar kule yanında inşa edilip ana katın kızak olarak kullanılması ile yükseltilir. Bu sayede teknik olarak 25 000 metreye uzanan hava kulesi elde edilir..
Daha yükseklerde ısı aşırı hızlı rüzgar farkı nedeni ile arge gereklidir. Kulemiz teflon kaplıdır ve üstünde bulunan manyetik raylar üstünde hareket eden bakır resisdantlar ile düzenli oalrak dış gövde ısıtılarak buz tutmayı önler.
Kulenin ürettiği enerjinin 10 000 de biri kuleye harcanacaktır.
Kulenin 4000 metre yükseklikte taban ile tavan arasındaki ısı farkı 24 derecedir. Bu sayede yaz kış gece gündüz sürekli rüzgar üretir. Bu rüzgar rüzgar türbinlerini çevirerek elektirik üretir.
Süper türbin ile klasik rüzgar türbinleri yüzde 16 verim ile çalışırken benim modelim yüzde 80 verim ile çalışır. Manyetik halkalı sürtünmeyi sıfırlayan bu türbin ile en düşük güçteki rüzgar bile türbini döndürür. Türbin in ağırlığını sıfırlayan manyetik halka ile türbin parmakla bile döndürülebilir. 20 metre çapındaki türbinler için bu büyük bir başarıdır.
Kule Almanyada kurulan 200 metre yükseklikteki 10 metre çaplı hava kulesine sahip Güneş serası ile çalışan hava kulesinden 480000 kat fazla elektirik üretir.
Kule nükleer santrallere mükemmel bir alternatiftir. Çünkü ilk defa doğal rüzgar enerjisi hem kontrol edilebilir olacak hemde verimi yüzde 80 e çıkacaktır. Hidroelektirik santral seviyesine. Yakıt atık sorunu yoktur.
Teraslar ile kafeterya hizmeti sunar. Şehirdeki kirli havayı emerek uzaklaştırır. Maliyeti nükleer santralle aynı üretilen elektirik çok daha ucuzdur.
Çalışmamı newscienceway.blogspot.com ve enerjimerkezim..blogspot.com aderslerinde sunuyorum. blog ta hesabımı paylaşsanız bile yeter.

Cevap