Alıntı (Blockquote) Kümesini Otomatik Numaralandırma

Genel olarak, otomatik numaralandırma bir listede yaygın olarak kullanılır, örneğin popüler posta defterleri listesinde numaralandırma ve farklı işlemlerinizde ki isteğinize bağlı numaralandırma aşamaları olabilir, bu size ve blog sitenize bağlı bir şey. Önizleme'de göreceğiniz gibi otomatik numaralandırılmış alıntı kümesi yapmak ve bunu blogger sitenizde uygulamak istiyorsanız, yazımızı okuyup oldukça kolay olan bu adımları uygulayabilirsiniz.

Bu makalemizde alıntı olarak belirttiğimiz ve neredeyse her blogda kullanılan alıntı (blockquote) kümesini otomatik numaralandırma yapacağız.

Bu sistem, ünlü insanların sözlerini alıntı yapan, sevilen sözcükleri ve diğer şeyleri alıntılayan blog yazarları için kullanışlıdır ve bahsettiğimiz gibi blockquote etiketi kullanır. Örneğin, yazısında 25 söz yayınlayan bir blogger bu sözleri numaralandırmak istiyor ve aynı zamanda bunların hepsinin alıntı şeklinde de görünmesini istiyor. Burada blockquote kullandığı 25 sözü paylaştı. Dolayısıyla bu blockquote ile 1 - 25 arasında bir numaralandırma oluşturdu. Bu bizim sözler arasında daha kolay bir ulaşıma sahip olabileceğimizi gösteriyor. Elbette bu sistemi istediğimiz gibi geliştirebiliriz. Bu tarz geliştirmeler biz bloggerlar için oldukça önemli çünkü iyi bir blogger olmak sadece makale yazmakla değil aynı zamanda gelen ziyaretçilerimizin sitemizde rahat etmesini sağlamaktan geçiyor.
Bknz. İyi Bir Blogger Sitesi için Yapılması Gerekenler

Önizlemede olduğu gibi. Açılan sayfada Run (Çalıştır) butonuna tıklayın.

• Önizleme

Şimdi isterseniz kendi blogunuzda bunu nasıl uygulayabileceğinizi gösterelim. Öncelikle;

• Aşağıdaki CSS stillerini Blog kontrol panelinizde Tema > HTML'i Düzenle kısmından </head> kodunu aratarak bu kodun üst kısmına kaydedin, AMP uyumlu bloglarınız için CSS stilini style amp-custom şeklinde kaydetmeyi unutmayın. Şablon üzerindeki eklememiz bu kadar basitti.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
/*<![CDATA[*/.post-body {counter-reset:blockquote;}
.post-body blockquote.sosyalform{font-size:18px;font-family:Georgia;color:#000;border-left:3px solid #FF1744;padding:10px 10px 10px 40px;margin:0;background:#efefef;counter-increment:blockquote;position:relative;text-align: justify;}
.post-body blockquote.sosyalform:before{content:counter(blockquote)'.';position:absolute;left:0;top:0;color:#000;font-size:18px;font-weight:700;z-index:2;width:40px;height:40px;line-height:40px;text-align:center; }
/*]]>*/
</style>
</b:if>

• Ardından, blogumuza yazı ekleme esnasında aşağıdaki gibi her blockquote kümesine class="sosyalform" şeklinde klas atayalım ve sonucu kendi gözlerimizle görelim.

<blockquote class="sosyalform">Yazınız buraya gelmeli.</blockquote>
<br />
<blockquote class="sosyalform">Yazınız buraya gelmeli.</blockquote>
<br />
<blockquote class="sosyalform">Yazınız buraya gelmeli.</blockquote>
<br />
<blockquote class="sosyalform">Yazınız buraya gelmeli.</blockquote>
<br />
<blockquote class="sosyalform">Yazınız buraya gelmeli.</blockquote>
<br />

Umarım yazı faydalı olmuştur. Şimdilik bu yazımız bu kadardı.