FOOTNOTE USING CSS3 FOR BLOGGER

Footnotes is catatan kaki...wekekekkk. Footnote atau catatan kecil yang berupa angka-angka atau lambang-lambang kecil disatu kalimat yang berfungsi memberikan keterangan serta diletakan dibagian footer (bawah/akhir) dari sebuah postingan (artikel). Panjang bener penjelasannya =)). Mungkin trik ini akan kita jumpai pada web² yang sudah memiliki library directory yang sudah menggunung :D Contoh yang jelas dan gampang mungkin tatkala kita memasuki web Wikipedia. Pasti kita akan menemui itu si Footnote. Trik ini juga mungkin cucok :"> pada weblog yang memang suka menulis panjang lebar dan tentunya ingin menambah gaya b-) pada tulisannya :-" This is demo for it DEMO.

Screenshot...

Syarat memakai trik ini, sobat harus sudah memiliki script berikut didalam templatenya :)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js?ver=1.4.0"></script>
Kalau sudah punya tinggal memanggilnya saja deh ;) Masukan script berikut sebelum/diatas tag </body>

<!--[if gte IE 6]>
<script type="text/javascript">
$(document).ready(function() {

 $("li").removeClass("customTarget");
 var myLocation = document.location.hash.replace("#","");
 if (myLocation) {
  document.getElementById(myLocation).className = "customTarget";
 }

 $("a").click(function () {
  $("li").removeClass("customTarget");
  var clickedLink = this.href.split("#");
  if (clickedLink.length > 1) {
   document.getElementById(clickedLink[1]).className = "customTarget";
  }
 });

});
</script>
<![endif]-->

Itu dia script pemanggilnya sobat. Sekarang tinggal memasukan beberapa kode CSS kedalam template blog kita. Letakan seperti biasa diatas/sebelum tag ]]></b:skin> Ini contoh sumber dan link download kodenya!

Live Demo Download Code

Secara default nanti sobat akan diberi kode CSS seperti berikut...

img {
border: none;
}
h1 {
line-height: 1em;
font-family: Arial, Helvetica, sans-serif;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
margin: 0 0 8px 0;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: .8em;
line-height: 1.5em;
margin: 0 0 14px 0;;
}
ul, ol {
font-family: Arial, Helvetica, sans-serif;
font-size: .9em;
}
ul li, ol li {
padding: 5px;
}
:target {
background: #ccc;
border: solid 1px #aaa;
}
.customTarget {
background: #ccc;
border: solid 1px #aaa;
}

Biasanya di dalam template bawaan blogger ini sudah ada beberapa kode CSS yang tertera seperti diatas. Jadi kita tidak memerlukannya lagi. Kita tinggal memasukan kode CSS yang diperlukan saja. Baiknya kalau sobat mengerti CSS, tinggal menghiasnya menurut selera ^:)^ Kalau mau masukan saja kode CSSnya menjadi...

p {
font-family: Arial, Helvetica, sans-serif;
font-size: .8em;
line-height: 1.5em;
margin: 0 0 14px 0;;
}
ul, ol {
font-family: Arial, Helvetica, sans-serif;
font-size: .9em;
}
ul li, ol li {
padding: 5px;
}
:target {
background: #ccc;
border: solid 1px #aaa;
}
.customTarget {
background: #ccc;
border: solid 1px #aaa;
}

Paham sampai sini kan ;)) Sekarang penulisan didalam postingannya. Seperti ini BeBeN^[1]...sobat tinggal menuliskan kode syntax <sup><a href="#one">[1]</a> lanjutkan tulisan #one dengan jumlah footnote yang akan dipanggilnya nanti. Kalau mau sampai sepuluh ya ada sepuluh syntaxnya :D Nah sekarang buat Footnote yang berfungsi untuk menjelaskan angka² yang kecil tadi. Pada akhir setelah sobat beres memosting sebuah artikel buatlah penulisan macam begini (ingat akhir postingan).

<ol>
<li id="one">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
<li id="two">Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.</li>
<li id="three">Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam.</li>
</ol>

Disini BeBeN si bloglang ganteng kalem tea membuat 3 buah Footnote. Gantilah tulisan yang gak jelas itu dengan kata-kata terserah sobat (baiknya penjelasan/penekanan apa yang dimaksud). Setiap kita mengklik syntax yang kita buat tadi akan menuju ke tulisan yang gak jelas itu. Good luck and happy blogging. Source and Pic by : www.impressivewebs.com