Blogger Mavi Renkli Devamını Oku - Read More Css Eklentisi

Blogger ’un, varsayılan blog tema özelliklerini bozmadan kısa sürede blog tema nıza Hover Mavi renkli Devamını Oku - Read More özelliğini...

...

Blogger’un, varsayılan blog tema özelliklerini bozmadan kısa sürede blog temanıza Hover Mavi renkli Devamını Oku - Read More özelliğini ekleyebilirsiniz. Birçok özelleştirilmiş Blogger temaların da gördüğünüz Ana sayfadaki yazınızın belli bir yerinden otomatik kesilmesi, yazınızdaki resmin küçültülerek otomatik sol köşeye alınması ve yazının kalan bölümünün okunması için Devamını oku ifadesinin sağ tarafta üzerine gelindiğinde değişen renkler ile görülme işlemi hayal edemeyeceğiniz kadar zor değildir. Tüm bu anlatılanları Blogger Tema Tasarımını Özelleştir başlıklı yazımı talip ederek yapabilirsiniz.

Blogger temanız ile ilgili yazımı okuyarak kurulum yaptı iseniz, bugün ki konumuz olan, Devamını oku isminin normal konumda iken mavi görünümlü Maus ile üzerine gelindiğinde siyah renkli görünüm olan diğer ismi ile Hover, CSS kodlarından oluşturulmuş eklenti'i bir önceki farklı kodların yerlerini değiştirerek kullanabileceksiniz. Bu eklentiyi kullanabilmeniz için yukarıda verdiğim bağlantı link’indeki kodların tema'nıza eklenmiş olması yeterlidir. İlgili yazıda verilen Read More CSS kodları yerine aşağıda verilen CSS kodlarını kullanacaksınız. Yaptığınız uygulama sonucunu ise yukarıdaki resimde görebilirsiniz. Verilen bağlantı ile ilgili kodları eklediginizi düşünerek Mavi Hover görünümlü tamamen CSS kodlarından oluşan Devamını Oku - Read More CSS kodlarını düzenlemeye başlayabiliriz.
Hover Mavi Renkli Devamını Oku Css kod uygulaması :

1. Blogger kumanda paneline giriş yapın.
2. Kumanda panelinizi açın. Sırası ile ;
3. Şablon → Html’yi düzenle ismine tıklayarak kodları açık konuma getirin.
4. Aşağıdaki etiketi bulun. ( Ctrl+F ) klavye kısa yolu tuşlarını kullanabilirsiniz.
]]></b:skin>


5. Bulduğunuz bu etiketin hemen üstüne aşağıda verilen kodları kopyalayıp yapıştırın ve blog’u kaydedin.
/* Read More G59P adnanguney----*/ .readmore{margin-bottom:5px;float:right;} .readmore a{color:#FFFFFF;background:#4285F4;font-size:12px;line-height:12px;display:inline-block;text-decoration:none;text-transform:none;padding:8px 14px;} .readmore a:hover{color:#FFFFFF;background:#160000;text-decoration:none;} .postmeta-primary,.postmeta-secondary{color:#999;font-size:12px;line-height:18px;padding:0 0 10px;}


6. Tüm yaptığımız işlem sonucunda ilk görünüm Mavi Maus üzerine gelince Siyah renkli Hover görünümlü Devamını Oku isminin özelleştirilmiş görüntüsünü aşağıda görüyorsunuz.