CSS ile Tıklanan Linklerin Renklerini Belirleme

css-link-visitedSitemizde bulunan linkler default olarak tıklanmadan mavi tıklandıktan sonra da mor renkli olarak gözükmektedir. Bu yan yana bulunan linklerin  farklı renklerde görünmesine sebep olabiliyor, bu da çirkin bir tablo oluşturuyor.

Bu yüzden CSS üzerinden visited özelliğini kullanarak linklere tıklandıktan sonra belirlediğimiz rengin görünmesini sağlayabiliriz.

Eğer tıkladıktan sonra değişmesini istemiyorsak color’a doğrudan Blue atayabiliriz.

a:visited{
color: Blue;
}
Reklamlar

Facebook Link Paylaşırken Otomatik Resim Seçimi

facebook-link-paylas

Sitemizin sayfaları Facebook‘ta paylaşılırken facebook sharer otomatik olarak gösterilecek resimleri seçmekte. Ancak bu sitemizde bulunan alakasız resimler ya da sayfanın ana temasını işlemeyen resimler olabiliyor.

Bu istenmeyen durumu engellemek için sayfamızın head taginin altında paylaşılmasını istediğimiz 1. resmin linkini veriyoruz.


<link href="http://www.test.com/image.jpg" rel="image_src" />

Buna ek olarak Open Graph taglarını kullanıyorsak o da resmin seçiminde etkili olacaktır.


<meta property="og:image" content="http://www.test.com/image.jpg" />

Not: 10Kb altındaki resimleri çok kalitesiz bulduğu için belirtseniz dahi Facebook sharer göz ardı etmektedir.

Websitenize Google +1 Ekleme

google-plus-kırmızı-logo
Google’ın sosyal medyaya son zamanlarda çok önem verdiğini biliyoruz. Özellikle kendi uygulması olan Google Plus özelliğini kendi sitenize eklemenizde önem taşımakta.
Sitenize Google +1 özelliğini eklemek oldukça kolay.

Aşağıdaki Javascript kodunu <head> tagımızın içine ekliyoruz.


<link rel="canonical" href="http://www.example.com" />
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">

Bu kodu ise +1 özelliğinin sitemizde görünmesini istediğimiz alanlarına ekliyoruz. ( <body> içinde olması gerekli)
Birden fazla yere bu özelliği ekleyebilirsiniz.


<g:plusone></g:plusone>

Farklı boyutlarda Google +1 imajı eklemek ve detaylı bilgi için aşağıdaki adresi ziyaret edebilirsiniz.

https://developers.google.com/+/plugins/+1button/

Html Sağdan Sola İçerik Oluşturma

sagdan-sola-dil-arapca Sitemizi Arapça ya da İbranice gibi sağdan sola yazılan dillerde yapıyorsak; sağdan sola olmasını istediğimiz taglerimizin içine dir=”rtl” özelliğini ekliyoruz.
Direction= right to left yani Yön sağdan sola doğru ilerlesin anlamına geliyor.



<div class="navigation" dir="rtl">
<ul>
<li><a href="">الصفحة الرئيسية</a></li>
<li><a href="corporate.asp">المؤسساتية </a></li>
<li><a href="projects.asp">مشاريعنا </a></li>
<li><a href="news.asp">الأخبار </a></li>
<li><a href="application_form.asp">الوظائف</a></li>
<li><a href="contact.asp">إتصل بنا </a></li>
</ul>
</div>

Sayfa Adreslerini Klasör Şeklinde Gösterme

Adreslerimizin http://www.siteadi.com/duyurular/yeniduyuru.html şeklinde gözükmesi yerine,

http://www.siteadi.com/duyurular/yeniduyuru/ şeklinde gözükmesini sağlayabiliriz. Bu sayede html, php, aspx gibi uzantıları gizleyip görüntü kirliliği oluşturmayız.

Bu görünümü sağlayabilmek için oluşturduğumuz sayfalarımızın  her biri için klasör açıyoruz ve sayfamızı içerisine ekliyoruz.

Klasör içindeki sayfa isimlerimizi de index.html ya da  default.aspx gibi tarayıcıların otomatik yönlendiği sayfa ismi olarak değiştiriyoruz.

Site içi linklerimizi de doğrudan klasörlere veriyoruz.


<a href="duyurular/yeniduyuru/">Git</a>

Linklere ve Resimlere Açıklama Eklemek

Tarayıcılarda bazı  resimlerin ve linklerin üzerine geldiğimiz zaman bilgi baloncuğu çıktığını görüyoruz.
Bu özelliği resimlerde alt linklerde ise title tagı ile belirtiyoruz.


<a href="http://www.siteadı.uzantı" title="Bu sitenin içeriğinde ... vardır." target="_blank"></a>

<img  src="/resim.png" alt="Bu resim .... anlatmaktadır."/>

Bu bilgi kutuları hem sitemizi kaliteli göstermekte hem de SEO açısından önem taşımaktadır.

Sayfalarımıza Favicon Eklemek

Tarayıcıda sayfa tablarının sağında gördüğümüz küçük resimlere favicon diyoruz. Bunları siz de sayfalarınıza ekleyebilirsiniz.

Faviconlar genellikle .ico uzantılı resim dosyalarıdır. Ancak güncel tarayıcılar .gif ve .png uzantılarını da gösterebilmektedirler.

Örneğin resim.png adlı dosyamızı favicon yapmak istiyoruz. Öncelikle bu resmi paint ya da benzeri bir programla fazla yer kaplamaması için küçültelim.

Şeklinin güzel gözükmesi için kırparak kare bir şekil verelim. Sonrasında bunu yayınlayacağımız sayfa ile aynı klasöre koyalım ve adını favicon.png olarak kaydedelim.

Son olarak yayınlamak istediğimiz sayfalarımıza aşağıdaki html kodunu ekleyelim.


<link rel="shortcut icon" href="favicon.png" />