Blogger postlarına Drop Caps (ilk harf büyük) eklemek

Bugün size blogunuzu özelleştirmenin başka bir yolunu anlatacağım:drop cap nasıl ekleyebileceğinizi.Drop cap, yazıların ilk harfinin çok büyük yazılmasıdır.Belki bir çok dergi ve gazetelerde görmüşsünüzdür genellikle yazıların ilk harfi 3-4 satırın yerini almaktadır yanı 3-4 satır yüksekliğindedir.Buna drop cap diyoruz.Ayrıca bunun için farklı renklere ve fonlara başvurabilirsiniz.Drop capın bir örneğini alttaki resimde görebilirsiniz:




                            





Blogunuza drop cap eklemek için sırasıyla aşağıdaki adımları uygulayın:




Adım 1:Blogger hesabınıza giriş yapınız ve sırasıyla Şablon>HTML'yi düzenle tıklayın.




Adım 2:HTML kodu içinde herhangi bir yere tıklayın ve CTRL+F yardımıyla aşağıdaki kodu bulmaya çalışın:

]]></b:skin>

Adım 3:Yukarıda bulduğunuz kodun hemen üstüne aşağıdaki CSS kodu ekleyin:

.capital:first-letter { float: left; display: block; font-family: Times, serif, Georgia; font-size: 40px;
color: # color: #000000;
margin:0px 5px 0 0;
padding:0 0 0 10px;
} margin:0px 5px 0 0; padding:0 0 0 10px; }

-Sarı renkle belirtilen 40px rakamını küçülterek veya büyüterek ilk harfi yeniden boyutlandırabilirsiniz.


-Kırmızı renkle belirtilen değerleri değiştirerek ilk harfin rengini değiştirebilirsiniz.




Renk kodları için alttaki Renk kod jeneratörünü kullanabilirsiniz;





Adım 4:Şimdi CTRL+F kombinasyonu yardımıyla alttaki kodu bulmaya çalışın:
  <data:post.body/>

Adım 5:Adım 4 te bulduğunuz emen öncesine ve sonrasına kırmızı renkle belirtilen alttaki kodu ekleyin.Alttaki örnekte olduğu gibi.

  <div class='capital'><data:post.body/></div>

  Adım 6:Şablonu kaydet'e tıklayın

  Önemli:Eğer Adım 5'teki kod çalışmazsa aşağıdaki kodlardan deneyin.

  1- <p class="capital"><data:post.body/></p>

  2-<span class="capital"><data:post.body/></span>

 Yorumlarınıza cap drop eklemek için alttaki adımları takip edin:

 Adım 1:CTRL+F kombinasyonunu kullanarak aşağıdaki kodu bulmaya çalışın:

  ]]></b:skin>

Adım 2:Bulduğunuz kodun hemen üstüne alttaki kodu kopyalayıp yapıştırın:

  .capital:first-letter { float: left; display: block; font-family: Times, serif, Georgia; font-size: 40px; color: #000000; margin:0px 5px 0 0; padding:0 0 0 10px; }

 Adım 3:Şimdi CTRL+F kombinasyonu yardımıyla alttaki kodu bulun:

  <data:comment.body/>

Adım 4:Yukarıdaki kodun hemen öncesine ve sonrasına kırmızı renkle belirtilen alttaki kodu ekleyin alttaki örnekte olduğu gibi:

  <p class="capital"><data:comment.body/></p>

Adım 5:Şablonunuz kaydedin.