Bloggerde Değişen Renk de Devamını Oku Eklentisi Nasıl Yapılır?

Bu makalemizde Blogger blogunuza yazdığınız yazıları anasayfa da Devamını Oku ismi ile gösteren bağlantı linkine hiçbir resim eklemeden   farklı renklerden oluşan, çift renkli ve sağ tarafa yanaşmış olarak görülmesini sağlayan eklenti uygulamasının nasıl yapıldığını açıklamaya çalışacağız.

Uygulamayı resim kullanarak yapabileceğimiz gibi resim kullanmadan da yapabiliriz. Ancak biz uygulamamızda resim kullanmayacağız.

Maus ile üzerine gelince siyah ve mavi olarak düzenlediğimiz renk değişimini Css kodlar içinden renk kodlarıyla oynayarak istediğiniz renge sahip olabilirsiniz. İsterseniz yazı fontunu ve yüksekliğini de değiştirebilirsiniz. Sonucu görmek için DEMO linkine tıklayınız.

Önce blogunuzun bir yedeğini alınız.

1- Blogger kumanda paneli Şablon sekmesinden HTML yi Düzenle'yi tıklayarak açınız.

2- Ctrl+F yaparak hasJumpLink yazan kodu bulunuz. Bu kodun üstündeki 

<data:post.body/>

kodunu bulup siliniz. 

3- Sildiğiniz bu kodun yerine aşağıdaki kodu kopyalayıp yapıştırınız.

<p>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if></p>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='readmore'>
<a expr:href='data:post.url'>Devamını Oku</a>
</div>
</b:if>
</b:if>

4. Daha sonra Ctrl+F ile aşağıdaki kodu bulunuz.

]]></b:skin>

5. Bu kodun üzerine aşağıdaki Css kodlarını yapıştırarak işlemleri bitiriniz.

.readmore{margin-bottom:5px;float:right;}
.readmore a{color:#FFFFFF;background:#160000;font-size:12px;line-height:12px;display:inline-block;text-decoration:none;text-transform:none;padding:8px 14px;}
.readmore a:hover{color:#FFFFFF;background:#4285F4;text-decoration:none;}
.postmeta-primary,.postmeta-secondary{color:#999;font-size:12px;line-height:18px;padding:0 0 10px;}