Anasayfa'ya dönme butonu yapımı

  • On Aralık 19, 2018
homebutton

Bugün sizlere Blogger'da  belirlediğimiz alanda ortaya çıkan buton yapımını anlatmak istiyorum. Bunun için blogger'ın bizlere sunmuş olduğu özelleştirme kodundan yararlanacağız.


 Ben yaptığım butonun sadece içerik kısmında gözükmesini istediğim için aşağıdaki koddan yararlandım.
<b:if cond='data:blog.pageType != "index"'>
...
</b:if>
 Bu kodun arasına yazdığımız kodlar anasayfa da gözükmeyecek,içerik sayfalarında aktif hale gelecektir.
  Şimdi basit bir anasayfa butonu yapalım.Bunun için öncelikle html kodlarımızı yazıyoruz.
<div class="homebutton">
<a href="/">AnaSayfa</a>
</div>
Div'e 'homebutton' adında bir sınıf ve onun içerisinede 'AnaSayfa' adında bağlantı çıkışı eklemiş olduk.Şimdi de Css kodlarıyla görünümünü ve pozisyonunu ayarlayalım. 

.homebutton {
    right: 0px;
    width: 125px;
    padding-top: 20px;
    padding-right: 20px;
    position: fixed;
    z-index: 2;}
 
.homebutton a {
    display: block;
    margin-bottom: 1em;
    padding: 0.3em 1.25em;
    border: 1px solid #c2c7cc;
    font-family: 'Open-Sans', sans-serif;
    font-size: 1.1em;
    line-height: 1.667em;
    text-decoration: none;
    color: #8a9199;
    cursor: pointer;
    background: #fff;
    transition: color,border-color ease 0.3s;
    border-radius: 2em;
}
.homebutton a:hover {
    border-color: #42B6F3;
    color: #42B6F3;
    text-decoration: none;
}
Bu stil kodları ile güzel bir görünüm elde etmiş olduk.Geriye bu kodlarımızı sitemize eklemek kaldı.Öncelikle yazımın başında vermiş olduğum kodların arasına html kodumuzu ekleyelim. 
<b:if cond='data:blog.pageType != "index"'>
<div class="homebutton">
<a href="/">AnaSayfa</a>
</div>
</b:if>
Yukarıdaki kodumuzu Tema > Html'yi Düzenle > Ctrl + F yaparak 
<body>
kodunu bulalım ve hemen altına ekleyelim.Stil kodlarımızı ise yine arama kısmından 
]]></b:skin>
kodundan önce ekleyelim ve temamızı kaydedelim vee bitti.

 Yapmış olduğumuz butonun demosunu görmek için tıklayınız.
Tags:

0 Comments:

Yorum Gönder