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.

Ön İzleme

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.