Blogger Devamini Oku Bölümünü Css ile Özelleştirme

| |

Blogger yakın bir zamanda devanımı oku özelliğini standart hale getirmişti. Bu konu ile ilgili Blogger Atlama Aralığı Ekle - Standart Devamını Oku Özelliği başlıklı bir yazı yayımlamıştım. Devamını oku özelliğini nasıl kullanacağınızın detayları bu yazımda bulunmaktadır.

Blogger kullanıcılarından iletişim formum vasıtasıyla çeşitli istekler almaktayım. Bunlar bazı eklentilerin blogger entegrasyonu, blogger tema çevirisi ve bazı sorunların çözüm yöntemleri gibi çeşitli istekler diyebilirim.

İletişim fomundan istekte bulunan herkese elimden geldiğince yardımcı olmaya çalışıyorum. İstekleri belirli bir sıra düzenine koyarak gerçekleştiriyorum. Bu isteklerden bir tanesi de Blogger'in devamını oku özelliğinin nasıl özelleştirilebileceği yönünde olduğundan basit bir css yöntemi ile herkesin kolayca blogunda uygulayabileceği bir anlatım yapmaya çalışacağım.



Anlatıma başlamadan önce blog şablonunuzun yedeğini almayı unutmayın.

Anlatımı aşama aşama gerçekleştiriyorum ki herkes kolayca anlayabilsin.

1. İlk olarak devamını oku bölümünün arkaplan rengini ve çerçevesinin rengini belirleyelim.

.jump-link {
background: #DDE1CC;
padding: 1px 5px;
border: 1px solid #DDE1CC;
width: 70px;
}


Backround arkaplan rengini border ise çerçevenin rengini belirliyor. Buralarda bulunan renk kodlarını kendi blogunuza uyumlu hale getirebilirsiniz. Yine border satırında bulunan solid değerini dashed veya dotted değeri ile değiştirebilirsiniz.

2. Bu aşamada ise devamını oku yazısına tıkladığımızda almasını istediğimiz rengi belirliyoruz.

.jump-link a {
color: #000;
text-decoration: none;
font-weight: bold;
}


Burada bulunan color satırında ki renk kodunu isteğinize göre ayarlayabilirsiniz.

3. Bu aşamada ise mause ile devamını oku bölümünün üzerine geldiğimizde farklı bir renk almasını sağlayacağız.

.jump-link:hover {
background: #4172B3;
border: 1px solid #4172B3;
}

.jump-link a:hover{
}


Yine burada bulunan backround satırında ki renk kodunu kendi isteğinize göre değiştirebilirsiniz.

4. Şimdi ise devamını oku yazısının yazı alanının hangi tarafında olacağını belirleyeceğiz.

.jump-link {
float: right;
}


Burada float satırında bulunan right değeri devamını oku bölümünün yazı alanının sağında olacağını belirler. Siz kendi isteğinize göre bu değeri değiştirebilirsiniz. Solda olmasını istiyorsanız left, ortada olmasını istiyrosanız center değerlerini verebilirsiniz.

Artık devamını oku bölümünü kendimize göre özelleştirdik. Şimdi yapmamız gereken bu kodları şablonumuzun css kodları arasına yerleştirmek. Karışıklık olmaması için en basit şekilde tema kodlarınızda aşağıdaki kodu aratın.

]]></b:skin>

Bu kodu bulduktan hemen sonra hemen üstüne yukarıda oluşturduğumuz css kod öbeğini yerleştirin.

.jump-link {
background: #DDE1CC;
padding: 1px 5px;
border: 1px solid #DDE1CC;
width: 70px;
}

.jump-link a {
color: #000;
text-decoration: none;
font-weight: bold;
}

.jump-link:hover {
background: #4172B3;
border: 1px solid #4172B3;
}

.jump-link a:hover{
}

.jump-link {
float: right;
}


Css yöntemini kullanmanız devamını oku kısmında resim kullanmanızdan daha verimli olacaktır.

Soru görüş ve önerilerinizi yorum yaparak belirtebilirsiniz.