30 Temmuz 2015 Perşembe

Blogger Header, Üstbilginin Sağına Gadget Ekleme

Bu yazımda bir çok hazır temada gördüğünüz Blogger blog üstbilgisinde(header bölümünde), blog başlığı ve blog tanımının sağ yanında bir çok tip eklenti ekli olarak geliyor özellikle arama kutusu. Eğer hazır bir tema kullanmak yerine standart bir temada iseniz sizlere nasıl blogunuzun header kısmına widget ekleyip, eklenti kurabileceğinizi anlatacağım.

Yapacağımız kod düzenlemelerinden sonra blogunuzun nasıl görüneceğini tam olarak anlamak için alttaki resimlere bakın. Göründüğü gibi blogunuzda headerın sağ tarafına eklenti eklenebilecek. Nasıl yapabileceğinizi öğrenmek için yazımın devamını okuyun.

düzenleme yapmadan önce
düzenlemeden sonra istediğiniz eklentiyi resimdeki gibi ekleyebileceksiniz




Bu düzenlemeler nasıl yapılır?


NOT : Bu eklentiyi blogunuza eklerken blogunuzun şablonunda birkaç ekleme, çıkarma yapacağız ve bu düzenlemeleri yaparken yanlış bir şey yaptığınız taktirde sıkıntı olmaması ve rahat bir şekilde düzenleme yapabilmek için şablondan şablon yedeğini almayı unutmayınız.


1. yapılacak : Şablondan HTML'yi Düzenleye tıklayın ardından Ctrl + F yardımıyla  <b:section class='header' id='header' maxwidgets= kodunu bulun ve buradaki kırmızı renk ile yazdığım kod kısmını alttaki hazırladığım kısım ile değiştirin.

kod:
class='header header-left'

2. yapılacak : Şimdi ise Ctrl + F yardımıyla  <div class='header-cap-bottom cap-bottom'> kodunu bulun, üstünde iki tane </div> kodu göreceksinizdir ve bunların bir satır üstüne alttaki kodu ekleyin.

kod:
<div style='clear:both;'/>

bu kodu ekledikten sonra bununda bir satır üzerine alttaki kodu ekleyin.

kod:
<b:section class='header-right crosscol' id='header-right' maxwidgets='1' showaddelement='yes'/>

3. yapılacak : Son kod eklemesini de tamamladıktan sonra Ctrl + F yardımıyla  </head> kodunu bulun ve bir satır üzerine alttaki kodları da ekledikten sonra işlemimiz tamamlanıyor.

kod:
 <style>
.header-left{
display: inline-block;
float: left;
}
#header-right {
display:inline-block;
float:right;
}
</style>

Bunlardan sonra headerın sağına nasıl eklentileri ekleyebileceğiz? 


Eğer tüm işlemleri başarıyla tamamladıysanız Yerleşim'e girdiğinizde alttaki resimdeki gibi header-right başlıklı bir bölüm eklenecektir sayfa elemanlarınıza ve buradan önceki ekli olan bölümlerdeki gibi Gadget Ekle linkine tıklayarak açılan pencereden her türlü eklentiyi ekleyebilirsiniz.


Yazımın başındaki görseldeki arama kutusunu blogunuza eklemek isterseniz Blogger Blogunuza Şık Bir Arama Kutusu Eklentisi adlı yazımı ziyaret edin. Bu düzenlemenin faydasını görmeniz dileğiyle...
                                                                                          Kolay gelsin, iyi bloglar!

author

Yazar Hakkında

Merhaba ben Onur Gücer, hobi olarak uzun zamandır blog yazmaktayım ve bu blogda sizlere deneyimlerimi paylaşıyorum.. İyi günler, iyi bloglar.. (:

2 yorum:

  1. Yüz ifadeleri deneme :) :( :(( =)) =D> :D :P :- O :-? :-SS :-f d( :-* b-( h-( g-) 5-p y-) c-) s-) d-) w-) :-h :X

    YanıtlaSil
  2. Çok güzel ve önemli bir anlatımdı, elinize sağlık.

    YanıtlaSil

Yorum Kuralları
1. Dediklerinizde kimseye kırıcı olmayınız.
2. Lütfen konu dışı şeyleri iletişim sayfamızdan yazmaya çalışınız.
3. Sorularınıza en kısa sürede cevap verilmeye çalışılacaktır.