Blogger Sistelerine ICON Ekleme ve Kullanma - ICON (Simge), bilgisayar veya internet tarayıcı olan cihazlar veya mobil cihazlar üzerinden ziyaret edilen sitelerde gezinmeyi kolaylaştırmak için bir piktogram kullanıcı simgesidir. Bu simgeler site menülerinin yada sayfalarının daha hızlı bir şekilde anlaşılır olmasını sağlayan sembol yazılımlardır. Bir fonksiyon veya veri dosyası gibi çok çeşitli olan simgeler içerisinde bir trafik işareti de görebilirsiniz. Elektronik ortamda kısayol programı gibi verilere daha hızlı erişmeyi sağlayarak bir köprü görevi görmektedir. Bu sayede ekrandaki yerleşimleri simgelerle bağlantılı hale getirerek kullanıcıya daha fazla bilgi vererek kullanıcı deneyimini de artırmaktadır.
Genel olarak kullanım türleri çok farklıdır. Çünkü bu simgeler aynı zamanda bir adlandırma piktogramı yani işaretleme de diyebiliriz. Daha da açacak olursak bir semge bir ideogram fiziksel bir nesne ile resimsel benzerlik yoluyla anlam kazandırma da diyebiliriz. Buna benzer bir çok açıklama ekleyebiliriz, mesela fonetik harflerden oluşan hiyeroglif yazı gibi.. Mesela tarihsel, matematik, modern, standardizasyon ve galeri gibi blog sitelerinde de her bir bölümün farklı bir işlevi vardır. Bu nedenle eğer blogunuza yabancı ülkeden giriş yapan bir kullanıcı blog dilini bilmese bile bu simgeler sayesinde blogunuzun içeriği hakkında küçükte olsa anlayabilir.
Blogger sitelerinde de simgeler kullanarak blogunuzu daha kullanışlı hale getirebilirsiniz. Sizlere bir kaç ücretsiz icon seti hazırladım, bunları blogunuza nasıl ekleyeceğinizi tek tek açıklayarak size yardımcı olmaya çalıştım. Şimdi blogunuza icon eklemek için aşağıdaki adımları tek tek takip edin ve blogunuza en uygun olan icon setini eleyin.
Blogger Sitesine İcon Ekleme
1- Font Awesome İcon Seti: Bu icon seti diğer icon setlerine göre blogger veya diğer web sitelerinde en çok kullanılan icon setlerinin başında gelmektedir. Çok kullanılmasına rağmen bence daha da geliştirilebilir.a- Blogger sitenize Font Awesome İcon Setini eklemek için blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinden Şablon > HTML'i Düzenle tıklayın ve blogunuzun şablon kodlarının blunduğu sayfayı açın. Aşağıdaki CSS kodunu blogunuzun ]]></b:skin> veya </style> kodunu CTRL+F yardımıyla bulun ve CSS kodunu ]]></b:skin> veya </style> kodunun bir satır üzerine ekleyin. Bu CSS kodu simgelerin daha düzenli çalışmasını sağlayacaktır.
*,*:before, *:after {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}b- Aşağıdaki CSS linki blogunuzun şablon kodları arasında bulunan </head> kodunun bir satır üzerine ekleyin ve şablonu kaydedin.
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css'/>Farklı stilleri oluşturmak için CSS tekniklerini kullanarak harika stiller oluşturabilirsiniz.
Bu iconlara CSS ile nasıl yeni bir görünüm kazandırdık. İşte kodlar aşağıda size örnek olması için paylaştım.
// CSS Kodları
<style>
.icon-style{border: 1px solid #ddd;border-radius: 3px;text-align: center;padding: 30px;}
.icon-style span{padding:20px}
.style1{font-size:50px;color:#B8D30B}
.style2{font-size:50px;color:#2DAEBF;text-shadow:0 1px 0 #0092b3,0px 2px 0 #0087a6,0px 3px 0 #008099,0px 4px 0 #00758c,0px 5px 0 #555,0px 6px 0 #006a80,0px 0 0 #006073,0px 8px 7px #005566}
.style4{font-size:50px;text-shadow:0 1px 3px rgba(0,0,0,0.25);color:#A9014B}
.style3{font-size:50px;color:#E33100;text-shadow:0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #E33100,0 0 30px #E33100,0 0 40px #E33100,0 0 50px #E33100,0 0 75px #E33100}
.style5{font-size:50px;color:rgba(245,159,26,0.8);text-shadow:1px 4px 6px #FFF,0 0 0 #000,1px 4px 6px #FFF}
</style>
// HTML Kodlar
<div class="icon-style">
<span><i class="fa fa-heart style3"></i></span>
<span><i class="fa fa-refresh style1"></i></span>
<span><i class="fa fa-bullseye style4"></i></span>
<span><i class="fa fa-file-text style2"></i></span>
<span><i class="fa fa-sun-o style5"></i></span>
</div>
Font Awesome İconları Nasıl Kullanılır?
Font Awesome İcon Seti sayfasında her icona ait iki farklı kod bulunmaktadır;- Birinci kod fa-heart kodunu HTML kod içerisinde kullanma <i class="fa fa-heart"></i> ve HTML kodun görünümü gördüğünüz gibi HTML kod içerisinde fa sabit sadece belirtilen kodu değiştirerek istediğiniz icon kodunu ekleyebilirsiniz.
- İkinci kod ise CSS kodu kullanarak eklenen ve nadiren de kullanılsa önemli yerlerde çok fayda sağlamaktadır. Aşağıdaki gibi kullanılmaktadır. Bu konu biraz geniş olduğu için ilerleyen günler de bu konuyu daha iyi anlatmaya çalışacağım.
:before {
content: "\f100";
}
2- Foundation İcon Seti v 3.0: Yine yukarıdaki gibi Foundation İconları çok tercih edilen simgelerdendir. Foundation İconlarının blogunuza ekleme ve nasıl kullanıldığı hakkında Foundation İcon Seti v 3.0 sayfasında ayrıntılı olarak anlattım. Anlatılan adımları uygulayarak blog sitenizde rahatça kullanabilirsiniz.
Bu iconların haricinde blog siteleri için özel icon setleri hazırlıyorum, ilerleyen günlerde bu icon setlerini de yine blog sitemizde sizlerle paylaşmaya devam edeceğim. Özel iconlar demişken yani şunu söylemek istiyorum herhangi CSS linki kullanmadan doğrudan blogunuza entegre ederek sabit iconlar oluşturarak blogunuzun özgürlüğünü artırmaya devam edeceğiz. Bu yayın için yorum siteminden teşekkür etmeniz bize en büyük desteğinizdir. Teşekkürler.
Yorumlar
Yorum Gönder