Blogger Duyarlı Devamını Oku Eklentisi

Blogger, blog'unuza yazdığınız yazıları ana sayfada Devamını Oku ismi ile gösteren bağlantı linkine hiçbir resim eklemeden duyarlı çift renkli ve sağ tarafta görülmesini sağlayan eklenti.

Devamını Oku bağlantı linkinin sağ tarafta görülmesi ve farklı renklerden oluşması Blogger yazarlarının çok sevdiği uygulamalar arasındadır. Bu düşünce ile yapacağımız uygulamada resim kullanmayacağız. Ancak uygulamayı blogunuza eklediğinizde Css kodlar içinde siyah, mavi gibi yapabileceğiniz renk değişimi, maus ile üzerine gelince farklı bir renk elde ederek dikdörtgen bir alana sahip olacaksınız. İsterseniz yazı fontunu ve yüksekliğini bir tıklama ile değiştirebilirsiniz. Uygulamayı kullanabilmeniz için aşağıdaki adımları takip edin.

NOT: Blog’unuzun yedeğini alın.

1. Blogger kumanda paneline giriş yapın ve şablon kodlarınızı açın.

2. (Ctrl+F)  ile aşağıdaki kodu bulun. Şablon kodlarınız da bu kod birkaç tane çıkacaktır. Arama sonucunda bulacağınız kodun hemen alt kısmında bu kodları “ hasJumpLink” göreceksiniz. Bu kodun üstündeki kod doğru olandır. Aşağıdaki kodu bulun.

<data:post.body/>

3. Bulduğunuz bu kodu silerek aşağıdaki kod’u kopyalayıp sildiğiniz kodun olduğu yere yapıştırın ve blog’u kaydedin. Blog’unuzu önizleme yapıp inceleyin.

<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. Son olarak CSS stil kodlarımızı ekleyerek Devamını Oku ismini renkli ve sağ tarafa yaslanmış olarak göreceğiz. Aşağıdaki kodu bulun. ( Ctrl+F) ile aratın.

]]></b:skin>

5. Bulduğunuz bu kodun hemen üstüne aşağıdaki kodları ekleyin.

/* Read More G59P--------------------------------- */
.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;}

Tüm işlemleri bitirdi iseniz şu anda Devamını Oku isim linkinin beyaz, çerçevenin siyah ve mausu yanaştırdığınızda (hover) mavi olarak görmeniz gerekir.
Ayrıca önerilen okuma linkleri ⇒ 
→ Blogger Sidebar Mavi Sekmeli Gadget Eklentisi
→ Yazı resmini sola otomatik yaslayan sağda devamını oku eklentisi
→ Blogger Sidebar Siyah Sekme Başlık Eklentisi