Cara Membuat Footnote Catatan Kaki Blogger dengan CSS

Cara Membuat Catatan Kaki (Footnote) Pada Blogger atau Blogspot

Mungkin anda sering membaca buku, laporan penelitian dan sebagainya, nah..! dari yang anda baca pasti tidak terlepas dari footnote / catatan kaki, yaitu adanya angka / huruf kecil pada akhir kalimat tertentu, dimana angka / huruf kecil tersebut menunjukkan suatu keterangan.

Dan bagi anda yang dekat dengan MS. Word dan sering membuat Catatan kaki atau footnote di Microsoft Word, itu adalah langkah mudah dalam pembuatannya, tapi bagaimana jika anda sedang menulis artikel di blogger?, berikut sedikit penjelasan tentang bagimana membuat footnote pada blogspot:

Caranya tidak begitu sulit cuman kita harus agak sedikit memahami langkah-langkah berikut. Akan tetapi saya yakin anda sanggup dan bisa untuk melakukannya, Yang harus anda lakukan adalah:

1. Login ke akun Blogger.
2. Kemudian klik menu Tata Letak > Edit HTML.
3. Backup dulu template anda dengan mendownload template lengkap buat jaga-jaga jika terjadi kesalahan.
4. Centang Expand Template Widget.
5. Cari kode ]]></b:skin>.
6. Copy paste kode berikut tepat di atas kode ]]></b:skin> tadi.

   /* Footnote CSS Code */
     .footnote{
     border-top:1px dashed #333;
     padding:0 0 10px 0;
     margin:10px 0 0 0;
     font-size:smaller;
     }

7. Kemudian Simpan Template.
8. Klik tab Posting dan pilihlah Buat Entri Baru.
9. Pilih penulisan Edit HTML
10. Perhatikan kode berikut:

    <sup><a href="#1">[1]</a></sup>
    <sup><a href="#2">[2]</a></sup>
    <sup><a href="#3">[3]</a></sup>

    Tiga Kode diatas merupakan kode yang akan kita pasang pada tiga akhir kata / kalimat yang akan kita terangkan sebagai footnote.

    Misalnya kita punya tiga kata / kalimat yang ingin dijadikan footnote, contoh:

    Muhammad utusan Alloh
    Kakeknya memanggilnya Ahmad
    Julukannya Al-Amin

    Nah sekarang pasanglah tiga kode diatas pada akhir tiga kalimat tersebut sehingga menjadi:

    Muhammad utusan Alloh <sup><a href="#1">[1]</a></sup>
    Kakeknya memanggilnya Ahmad <sup><a href="#2">[2]</a></sup>
    Julukannya Al-Amin <sup><a href="#3">[3]</a></sup>

11. Kemudian pada akhir postingan ketik kode berikut:

    <div class="footnote">
      <p><a name="1">[1]</a> penjelasan footnote 1</p>
      <p><a name="2">[2]</a> penjelasan footnote 2</p>
      <p><a name="3">[3]</a> penjelasan footnote 3</p>
    </div>

---

Dan hasilnya kira-kira bisa dilihat sendiri.

Go to Link

Anda mungkin tertarik artikel ini:

Anda telah membaca artikel berjudul Cara Membuat Footnote Catatan Kaki Blogger dengan CSS, jangan lupa klik IKUTI untuk berlangganan artikel gratis, dan klik BAGIKAN jika menurut Anda bermanfaat. Terima kasih.

Dukung Blog Tutorial dengan amal donasi:

Donasi via Saweria Donasi via Trakteer Donasi via PayPal Donasi Scan Code