11 Ağustos 2016

Awesome Fontu İle Sosyal Ağ Butonları Ekle


Awesome fontu aslında bir yazı tipi ama bu stilde hiç bir kelime yazmak mümkün değil..
Peki ne yapılabilir/ne işe yarar? diye bir soru sorabilisiniz.

awesome fontu kelime anlamını çevirecek olursak karşmıza bu fontun bize sunacak güzelliklerin ve bununla beraber kolaylığın tanımı çıkıyor:

Evet Müthiş!

Awesome fontu sadece ikonlardan oluşuyo, hem de tamı tamına 634 adet ikondan..
biz bugün bunlardan belki en fazla onadetini kullanıp çok mu çok mutlu ve sevindirik olacağız :)

Blogumuzun sağ tarafına sol tarafına alt veya üst kısmına kısaca sosyalağ butonlarımızı istediğim renkte istediğim yere eklemeyi öğreneceğiz..

An itibari ile blogumda sağ tarafta yer alan şirin minik butonlar bu fontun marifetidir..

BENİM DE OLSUN!
diyorsan..tamam fazla uzatmıyorum..

Hemen kolları sıvıyor ve başlıyoruz o halde..
Bismillah diyelim...


Evvela bu fontu şablonumuza eklememiz gerek,bunun için:

Şablonunuzun yedeğini mutlaka almanızı tavsiye ediyorum..olası bir hata yapma durumunda yedek can kurtarır.

Kumanda Paneli>Şablon bölümüne geçip HTML düzenle bölümünü açıyoruz.
Aşağıda görseli de mevcut.



Karşımıza çıkacak olan kodlar bölümünün hemen en üst sıralarında <head> kodunu bulalım.
Aşağıda göseli mevcut:


Bu kodun hemen altına da bu kodu girelim:

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />  

Yazı fontunu eklemiş olduk.
Kaydet deyip diğer aşamaya geçebiliriz.

Sosyal medya butonlarımızı diyelim ki blogumuzun sağ tarafına ekleyeceğiz(henüz yayın içine/altına/başlık altına-üstüne eklemeyi bilmiyorsak)kodları Gadget olarak eklemeniz gerek.

GADGET NASIL EKLENİR? diye merak edenler buraya bakabilirler.



Gadget ekleme bölümünde karşımıza içi boş bir pencere çıkacak,bu boşluk kodumuzu kabul edecek olan alandır..
Boşluğun içine aşağıdaki kodları ekleyelim:

 <div id="fawesomeicons">  
 <a href=LİNK YERİ" title="Facebook" target="_blank" rel="nofollow"><i class="fa fa-facebook"></i></a>  
 <a href=LİNK YERİ" title="Google Plus" target="_blank" rel="nofollow"><i class="fa fa-google-plus"></i></a>  
 <a href="LİNK YERİ" title="Twitter" target="_blank" rel="nofollow"><i class="fa fa-twitter"></i></a>  
 <a href="LİNK YERİ" title="Pinterest" target="_blank" rel="nofollow"><i class="fa fa-pinterest"></i></a>  
 <a href="LİNK YERİ" title="Instagram" target="_blank" rel="nofollow"><i class="fa fa-instagram"></i></a>  
 <a href="LİNK YERİ" title="Bloglovin" target="_blank" rel="nofollow"><i class="fa fa-heart"></i></a>   
 <a href="LİNK YERİ" title="Tumblr" target="_blank" rel="nofollow"><i class="fa fa-tumblr"></i></a>  
 <a href="LİNK YERİ" title="RSS" target="_blank" rel="nofollow"><i class="fa fa-rss"></i></a>  
 </div>  


Kod içerisinde yer alan LİNK YERİ bölümüne kendi sosyal hesap bağlantılarını ekleyelim.

Butonlarımız henüz tam oalrak eklenmiş değil,yerleri mevcut ama görsel olarak henüz görünmemektedir,bu gayet normaldir.
Gadget bölümündeki kodları KAYDET deyip çıkalım.

CSS kodları ile butonları ekleme sırası şimdi,yani ikonları şimdi görünür yapacağız. tekrar Kumanda paneli>Şablon ve HTML düzenle diyelim.
İlk adımlardaki gibi.

Kod bölümü açılınca ctrl+f deyip açılan boş yatay pencereye aşağıdaki kodu ekleyip ENTER tuşuna basalım:

 ]]></b:skin>  

Bu kodun tam üstüne de aşağıdaki kodları ekleyelim..tabii arzu ettikleğimiz görünümdeki kodları:


KARE GÖRÜNÜM


 #fawesomeicons {  
 text-align: center;  
 }  
 #fawesomeicons a {  
 background: #background-color;  
 color: #font-color;  
 display: inline-block;  
 font-size: 16px;  
 width: 30px;  
 height: 30px;  
 line-height: 30px;  
 margin: 0 1px 6px;  
 }  
 #fawesomeicons a:hover{  
 background: #hover-color;  
 }  

İÇİ DOLU YUVARLAK


 #fawesomeicons {  
 text-align: center;  
 }  
 #fawesomeicons a {  
 background: #background-color;  
 color: #font-color;  
 display: inline-block;  
 font-size: 16px;  
 width: 30px;  
 height: 30px;  
 line-height: 30px;  
 margin: 0 1px 6px;  
 -webkit-border-radius: 100%;  
 -moz-border-radius: 100%;  
 border-radius: 100%;  
 }  
 #fawesomeicons a:hover{  
 background: #hover-color;  
 }  

İÇİ BOŞ KARE


 #fawesomeicons {  
 text-align: center;  
 }  
 #fawesomeicons a {  
 border: 1px solid #border-color;  
 color: #font-color;  
 display: inline-block;  
 font-size: 16px;  
 width: 30px;  
 height: 30px;  
 line-height: 30px;  
 margin: 0 1px 6px;  
 }  
 #fawesomeicons a:hover{  
 background: #hover-color;  
 }  

İÇİ BOŞ YUVARLAK


 #fawesomeicons {  
 text-align: center;  
 }  
 #fawesomeicons a {  
 border: 1px solid #border-color;  
 color: #font-color;  
 display: inline-block;  
 font-size: 16px;  
 width: 30px;  
 height: 30px;  
 line-height: 30px;  
 margin: 0 1px 6px;  
 -webkit-border-radius: 100%;  
 -moz-border-radius: 100%;  
 border-radius: 100%;  
 }  
 #fawesomeicons a:hover{  
 background: #hover-color;  
 }  

SADECE İKON


 #fawesomeicons {  
 text-align: center;  
 }  
 #fawesomeicons a {  
 color: #font-color;  
 display: inline-block;  
 font-size: 23px;  
 margin: 0 6px 6px;  
 }  
 #fawesomeicons a:hover{  
 background: #hover-color;  
 }  


Seçmek size kalmış.
Kodları ekledikten sonra kaydet deyip eklentiyi sağ tarafın arzu edilen yerine sürüklüyoruz veya görünür olması için en üstte bırakıyoruz.

Kod içerisinde yer alan renkler kendi şablonunuzun link ve aktif linklerin rengidir.Özellikle renk kodu girmenize gerek yok ;)


SON OLARAK:
Ek yardım daha fazla bilgi veya kodlar ile ilgili her hangi soru veya merak ettikleriniz varsa yorum bırakabilirsiniz..


Kolaylıklar diliyorum,hadi bakalım :)






Değmesin Yağlı Boya
Değmesin Yağlı Boya

Değmesin Yağlı Boya bir hayat blogudur yani hayatta ne varsa burda da vardır.Konular özenle seçilir güvenle okuyucularıma sunulur çoğunlukla da hepimize iyi gelir,yayınlar özgün ve orjnaldir kopya yapılmaz yapılmasına rıza gösterilmez.Blogumu oku,sana da iyi gelecek:)

7 yorum:

  1. Bu güzel ve faydalı yazı için emeğinize sağlık :)

    YanıtlaSil
  2. Ay o kadar bilgisizim ki bu konularda. Yedeğini alıyoruz dediğin an umudumu kestim zaten. Mümkün değil böyle birşey yapmam. Sayfam da kendim gibi Allah'a emanet.

    YanıtlaSil
    Yanıtlar
    1. Denemek istersen farklı bir blog'da deneyebilirsin Yağmurcuğum :)

      Sil
  3. faydalı bilgiler bayılıyorum bu sayfana ,yedek almak şart evet:)

    YanıtlaSil
  4. Bende you tube butonu yok çünkü o zaman bir kanalım yoktu. Mevcut sistemi bozmadan ekleyebilir miyim acaba :)

    Bu arada harika bilgiler için teşekkürler

    YanıtlaSil