Bismillah. Pada artikel sebelumnya Blogger Tune-Up pernah membahasa tentang "Menambahkan Catatan Kaki pada Artikel Blog", tetapi pada artikel tersebut penambahannya masih menggunakan cara manual. Kemudian Blogger Tune-Up memperbaikinya dengan menggunakan bantuan jQuery agar proses pembuatan catatan kaki dilakukan secara otomatis tanpa perlu kita memasukannya secara manual. Walaupun belum 100% otomatis tapi proses pembuatan catatan kaki dengan jQuery lebih sederhana, kita hanya perlu menambahkan sumber artikel dan judul artikel yang telah kita kutip dari artikel orang lain. Maka secara otomatis catatan kaki pada akhir halaman artikel akan terbentuk dengan susunan secara ascending (dari atas ke bawah) menggunakan nomor, tanpa perlu kita membuatnya.
Bagaimana membuat catatan kaki otomatis dengan jQuery? Ayo pelajari...
Membuat Catatan Kaki Otomatis dengan jQuery
Langkah 1Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:
]]></b:skin>Langkah 4
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 3:
blockquote {
position: relative;
padding: 0 10px;
background-color: #ddd;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
blockquote p {
padding: .5em;
margin: 0;
}
blockquote sup {
position: absolute;
top: 3px;
right: 3px;
}
#footnotes {
margin-top: 3em;
padding: 1em 2em;
border-top: 4px solid #ccc;
}
Langkah 5Cari kode dibawah ini:
</head>Langkah 6
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 5:
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'/>Langkah 7
<script language='javascript'>//<![CDATA[
$(document).ready(function() {
$(".blog-posts").append("<a name=\"footnotes\"><ol id=\"footnotes\"></ol></a>");
footnote = 1;
$("q[sumber],q[judul],blockquote[sumber],blockquote[judul]").addClass("footnote");
$(".footnote").each(function() {
$(this).append("<sup><a href=\"#footnotes\">["+footnote+"]</a></sup>");
sumber="<li>";
url=$(this).attr("sumber");
judul=$(this).attr("judul");
if(judul && url) {
sumber+="<a href=\""+url+"\">"+judul+"</a>";
} else if(judul) {
sumber+=judul;
} else if(url) {
sumber+="<a href=\""+url+"\">"+url+"</a>";
}
sumber+="</li>";
$("#footnotes").append(sumber);
footnote++;
});
});
//]]></script>
Simpan template dan lanjutkan membaca artikel...
Menyisipkan kode Catatan Kaki Otomatis pada Artikel
Untuk mengutip suatu artikel orang lain yang kita masukan dalam artikel kita terdapat dua cara, yaitu :- Ada yang dikutip langsung beberapa baris atau paragraf kedalam artikel kita dan dibuat suatu quote (blockquote)
- Ada juga yang hanya mengambil beberapa kalimat atau kata saja yang kemudian kita sisipkan kedalam artikel kita tanpa dipisahkan/diberi tanda khusus, seakan-akan kutipan tersebut menyatu dalam artikel kita.
(1) Cara kutipan yang kesatu menggunakan kode blockquote (kode ini sebenarnya terintegrasi pada editor blogger)
Contoh:
<blockquote>Hari Valentine (bahasa Inggris: Valentine's Day) atau disebut juga Hari Kasih Sayang, pada tanggal 14 Februari adalah sebuah hari di mana para kekasih dan mereka yang sedang jatuh cinta menyatakan cintanya di Dunia Barat.</blockquote>
(2) Cara kutipan yang kedua menggunakan kode q
Contoh :
Koneksi antara ketiga martir ini dengan hari raya cinta romantis tidak jelas. Bahkan Paus Gelasius I, pada tahun 496, menyatakan bahwa sebenarnya tidak ada yang diketahui mengenai martir-martir ini namun hari 14 Februari ditetapkan sebagai hari raya peringatan <q>santo Valentinus.</q>
Tetapi jika kita perhatikan kode diatas tak mampu menampilkan sumber dan judul artikel yang dikutip, maka harus kita sempurnakan kodenya menjadi seperti dibawah ini:
(1) Cara kutipan yang kesatu menggunakan kode blockquoteContoh:
<blockquote sumber="http://alamatlink.com" judul="Hari Raya Valentine">Hari Valentine (bahasa Inggris: Valentine's Day) atau disebut juga Hari Kasih Sayang, pada tanggal 14 Februari adalah sebuah hari di mana para kekasih dan mereka yang sedang jatuh cinta menyatakan cintanya di Dunia Barat.</blockquote>
(2) Cara kutipan yang kedua menggunakan kode q
Contoh :
Koneksi antara ketiga martir ini dengan hari raya cinta romantis tidak jelas. Bahkan Paus Gelasius I, pada tahun 496, menyatakan bahwa sebenarnya tidak ada yang diketahui mengenai martir-martir ini namun hari 14 Februari ditetapkan sebagai hari raya peringatan <q sumber="http://alamatlink.com" judul="Hari Raya Gereja">santo Valentinus.</q>
Keterangan:
- Untuk mengedit kode-kode catatan kaki artikel maka kita harus pada mode editor "Edit HTML"
- Kode didalam sumber="" akan ditampilkan pada catatan kaki sebagai link, jika kode sumber="" tidak di ikuti oleh kode judul="" maka yang akan ditampilkan pada catatan kaki adalah sumbernya saja yang berupa link
- Kode didalam judul="" akan ditampilkan pada catatan kaki sebagai judul biasa tanpa link, jika kode judul diikuti oleh kode sumber="" maka judul akan ditampilkan dan judul tersebut memiliki link jika diklik.
- Kode sumber="" dan kode judul="" bisa saja tidak disertakan kedua-duanya tetapi wajib menggunakan salah satunya.
- Catatan kaki pada akhir halaman akan disusun otomatis dengan angka yang dimulai dari kode catatan kaki yang paling atas dari halaman artikel.
- Artikel yang merupakan kutipan secara otomatis akan diberi nomor berupa angka yang tersusun secara otomatis dari atas halaman artikel ke akhir halaman artikel.
Special thanks to CSSNewbie.com for great idea
