CSS ile Blogger Link Düzenleme - Linklerinize Makyaj Yapın!

Nice titles adresinde örneklerini görebileceğiniz uygulamayı blogunuza uygulamak ister misiniz?

Alttaki örnek görüntüde görebileceğiniz gibi "Afiili Link" yazısının üzerine fare ile gelindiğinde linke ait içerisine o linke özel yazılmış ("Güzeller Güzeli Link" gibi) açıklamaların yer aldığı kutucuk açılır. Açıklamanın hemen altında da link adresi görüntülenir. Böylece ziyaretçi tıklayacağı adres hakkında herşeyi ögrenerek linke tıklayabilir. CSS ile Blogger Link Düzenleme için,



Yapılması Gerekenler

Adım 1: Bu uygulama blogunuzda çalışabilmek için ".js" uzantılı bir dosyaya ihtiyaç duymaktadır. Gerekli dosyayı bu linkten indirebilirsiniz.

Adım 2: İndirmiş olduğunuz bu dosyayı Blogger'da JavaScript Nasıl Kullanılabilir? yazından yardım alarak uzantısı .js olan dosyaları yüklemenize izin veren bir yükleyici isteye yükleyin. Ve size vermiş olduğu adresi kaydedin.

Adım 3: Yerleşim > HTML'yi Düzenle > Widget Şablonlarını Genişlet' e tıklayın. "Ctrl+F" yardımı ile </head> kodu bulun ve bu kodun öncesine alttaki kodu yapıştırın.

<script type="text/javascript" src="URL_baslik.js"></script>

yukarıdaki kodda kırmızı ile renklendirilmiş URL_baslik.js yerine yükleyici siteden size yüklediğiniz dosya için verilen linkini yapıştırın.

Adım 4: ]]</b:skin> den hemen önce alttaki CSS kodunu yapıştırın.

div.nicetitle {
background-color: #A6A6A6;
color: #fff;
font: bold 13px "Trebuchet MS", Verdana, Arial, sans-serif;
padding: 4px;
position: absolute; top: 0; left: 0;
text-align: left;
width: 25em;
z-index: 20;
}

div.nicetitle p {
margin: 0;
padding: 0 3px;
}

div.nicetitle p.destination {
font-size: 9px;
padding-top: 3px;
text-align: left;
}

3 kısımdan oluşan bu CSS kodunda yapabileceğiniz bazı değişiklikler;

a) div.nicetitle : Bu kısım linkin üzerinde gelindiğinde açılacak olan kutucuğun arkaplan, yazı tipi, genişlik ve kenarlıklarını düzenleyebileceğiniz kısımdır.

b) div.nicetitle p : Kutucuğun içinde girinti çıkıntıları değiştirebilirsiniz. Padding ve margins değerlerini değiştirerek nasıl etki ettiğini görebilirsiniz.

c) div.nicetitle p.destination : Kutucuğun içinde en altta yer alacak olan web adresinin yazı boyutunu, sağa yada sola yaslanmasını, girinti miktarını düzenleyebileceğiniz alandır. Bazı kullanıcılar görüntülenmemesini isteyebilir bunun için display: none; kodunu ekleyebilirsiniz.

Adım 5: Düzenlemeleriniz bitti ise şablonu kaydedin.

Not: Bu özelliğin verdiğiniz linklerde çalışması için vereceğiniz linklerinizi alttaki gibi düzenlemelisiniz.

<a href="site_URL" title="Link Açıklama">Link Başlığı</a>

Bu şekilde linklerinizi düzenlerseniz, linkleriniz yukarıdaki örnek resimdeki gibi görüntülenir.

Kolay gelsin...