Blogger Standart Devamını Oku Bölümünü Değiştirme

Blogumu takip eden arkadaşlar bilir yakın zamanda blogumdaki standart devamını oku alanını biraz güzelleştirdim. Bu yazımda ise sizlerinde bu tip bir kişiselleştirmeyi nasıl yapabileceğinizi anlatacağım. Blogunuza böyle süslemeler yapmanızı tavsiye ederim çünkü tek kalıp bloglar okuyuculara fazla cazip gelmemekte hem de dıştan gelen anlık ziyaretçiler blogunuzun içeriğini sevecek olsa bile blogunuzu terk etmesine sebep olabiliyor.

Alttaki ilk resimde bu orijinal alanda değişlik yapmadığım görüntü, ikinci resimde ise şuanda blogumda kullandığım hali olan özelleştirme yaptığım görüntü bulunmaktadır. Yazımın devamında ise sizlerinde bu kişiselleştirmeleri yapabilmeniz için anlatımımı bulacaksınız.

Bu düzenlemeyi bloguma nasıl yaparım?

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 <div class='jump-link'> kodunu bulun kodu bulduğunuzda standartta bize lazım olan kod görüntüsü alttaki gibi olacaktır.

kod:

<div class='jump-link'>

<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>

</div>

2. yapılacak :  Yukarıdaki kodları altta paylaştığım kodlarda kırmızı renkli alana istediğiniz devamını oku yazısını yazarak değiştirin.

kod:

<div class='jump-link'>

<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>Yazıyı okumaya devam et...</a>

</div>

3. yapılacak : Kodları değiştirdikten sonra Ctrl + F yardımıyla ]]></b:skin> kodunu bulun ve bir satır üstüne alttaki kodları yapıştırıp kodların altında paylaştığım kodun düzenlemelerine göre düzenleme yapın yada hoşunuza giderse oluşan şekildeki gibi de kullanabilirsiniz.

kod:

.jump-link {

text-align:center;

}

.jump-link a {

font-size:12px;

padding:8px;

border: 1.5px solid #E97584;

background-color:#A5EC94;

color:#292D29;

font-weight:bold;

}

Kodun Düzenlemeleri 

Kodlarda düzenleme yaparken renk kodları lazım olduğunda HTML Renk Kodları İsimleriyle Tüm Renkler adlı yazıma bakabilirsiniz.

1. düzenleme : font-size:12px; yazısındaki 12px yazı boyutudur.

2. düzenleme : border: 1.5px solid #E97584; yazısındaki 1.5px çevrede oluşan kutunun kalınlığı, #E97584 yazısı ise renk kodudur.

3. düzenleme : background-color:#A5EC94; yazısındaki #A5EC94 arka plan renk kodudur.

4. düzenleme : color:#292D29; yazısındaki #292D29 görünen hazırladığınız yazının renk kodudur.

Umarım bu düzenlemenin faydasını görürsünüz... 

                                                                                          Kolay gelsin, iyi bloglar!

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.. (: