Blogger html css kodlari
Blogger html css kodlari
Blogger html css kodlari ücretli ve ücretsiz tasarimlari

Blogger da Yazıların İlk Harfi Gazetelerdeki Gibi yap

Yazdir
er blog yazarı yazılarını ziyaretçiye daha güzel göstermek ister. Şimdi bahsedeceğim şey ise Blogger'da yazıların ilk harfini büyük göstermek olacaktır. Bildiğiniz üzere gazetelerde bulunan haberlerin ilk harfi çoğunlukla daha kalın ve büyük olur. Bu büyük harfler "drop caps" ya da "first letter (character)" olarak bilinirler. Şu anda benim de kullanmış olduğum bu eklenti sayesinde yazılarınız daha çok dikkat çekecektir diye düşünüyorum. Özellikle hikaye, şiir vb. yazılar yazanlar için faydalı bir eklenti olacaktır. Hemen aşağıya bir örnek görsel ekliyorum.
Harfi drop caps olarak göstermek istediğiniz yayının düzenleme kısmına geliniz. Yayın düzenleme kısmının üst kısmında bulunan "HTML" seçeneğine tıklayınız.
Aşağıda vermiş olduğum HTML kodunu yazınızın ilk kelimesinin ilk harfini sildikten hemen sonra yapıştırınız. Yapacağınız işlemler bu kadardı. Artık yazınızın ilk harfi istediğiniz gibi gözükecektir. HTML kodundan hemen sonra ise kod içerisinde düzenlenebilir yerlerden bahsedeceğim.
Kod İpuçları 1. float: left; (Bu kısım büyük gösterilecek harfin sağda mı yoksa soldamı olduğunu belirtmek içindir. Yani arap blog yazarları için "left" yerine "right" yazması gerekir.) 2. font-size: 70px; (Bu kısım büyük gösterilecek harfin boyutu ile ilgilidir. px değerini isterseniz yükseltebilir ya da alçaltabilirsiniz.) 3. font-weight: bold; (Bu kısım büyük gösterilecek harfin stili ile ilgilidir. Kalın harf için "bold", eğik harf için "italic", altı çizili olması için "underline" yazabilirsiniz.) Diğer kısımlarda büyük görünen harfin diğer harf ile arasındaki boşluk değerleri vs. var. Onları çok da kurcalamaya gerek yoktur herhalde. Yapamadığınız durumlarda çekinmeden söyleyebilir, sorularınızı sorabilirsiniz.
<span style="float: left; font-size: 70px; font-weight: bold; line-height: 50px; margin: 0px 5px 0px 0px; padding: 0px; position: relative;">A</span>
......
-

Related Posts

Post a Comment

Daha fazla kod ve widged paylasimi icin yorumunuza ihtiyacimiz var TESEKKÜRLER

Followers