Wikipedia'daki sisteme kısmen benzeyen bir dipnot sistemi için basit bir HTML ve CSS dosyası hazırladım.
Bu dosya, dipnotları sayfa içinde kolayca yönetmenizi ve düzenlemenizi sağlıyor. Dipnot numarasına tıkladığınızda sayfanın altındaki ilgili dipnotun üzerine gelirsiniz ve dipnottaki geri ok simgesine tıkladığınızda da kaldığınız yere dönersiniz.
Bu tek dosyalık yapıyı kullanarak kendi metinlerinize kolayca dipnot ekleyebilirsiniz. Eğer bu sistemi daha karmaşık bir proje için kullanmak isterseniz, daha gelişmiş bir yapıda nasıl uygulayabileceğiniz size kalmış.
Toparlarsam...
- Metindeki [1] gibi dipnot numaralarına tıkladığınızda sayfanın altındaki ilgili dipnotun üzerine gidersiniz.
- Dipnotların başındaki ↑ okuna tıkladığınızda ise sizi metindeki ilgili dipnot numarasına geri götürür.
Dipnotlarda kullandığımız ↑ sembolünün üzerine geldiğinizde "Metindeki referansa dön" gibi bir açıklama da gösterilecek. Bu sayede geri dönüş işlevi daha net anlaşılabilir olmakta.
Peki nasıl kullanacaksınız?
İlgili kodları projenize ekleyebilirsiniz.
See the Pen dipnot by grknzsy (@grknzsy) on CodePen.
Koddaki
<sup class="footnote" id="ref-1"><a href="#footnote-1">[1]</a></sup> kısmında gördüğünüz 1 sayısını 2-3-4-... yaparak ve sonra dipnotta
<ol class="footnotes"> <li id="footnote-1"> <a class="footnote-backlink" href="#ref-1" title="Metindeki referansa dön">↑</a> Kaynak: Wikimedia Vakfı, Dipnot kullanımı rehberi, 2023. </li> </ol> kısmında bu sayıyı 2-3-4-... diye değiştirerek dipnot ekleyebilirsiniz. Kullandığınız sisteme, mesela diyelim PHP tabanlı sisteme bunu entegre edebilir veya entegre etmesi için başkasından yardım alabilirsiniz.