Blogger Devamını Oku Bölümünü Özelleştirmek

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 dotteddeğ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. 

Penulis : Unknown ~ Sebuah blog yang menyediakan berbagai macam informasi

Artikel Blogger Devamını Oku Bölümünü Özelleştirmek ini dipublish oleh Unknown pada hari 8 Kasım 2014 Cumartesi. Semoga artikel ini dapat bermanfaat.Terimakasih atas kunjungan Anda silahkan tinggalkan komentar.sudah ada 0 komentar: di postingan Blogger Devamını Oku Bölümünü Özelleştirmek