Menyimpan javascript pada blog template

Third party java script atau hosted java script sering menjadi salah satu kambing yang hitam (maksudnya penyebab) dari blog dengan loading yang berat disamping berbagai image source dan status tracker (Google tracker, adds dan lain-lain).
Tetapi dalam beberapa hal, bagaimanapun juga tetap diperlukan hosted Java Script.

Jadi menurut sumbernya ada 2 jenis java script, yaitu hosted dan embed.

Hosted javascript

Yaitu javascript yang disimpan pada sebuah situs tertentu di tempat lain.
Contoh kode dari hosted java script;

<script src="http://KODE URL JAVASCRIPT.js" type="text/javascript"></script>


Contoh 1

Biasanya diletakkan sebelum kode </head> pada template.

Yang ingin saya bahas sekarang adalah merubah hosted java menjadi embed javascript (tapi ingat, tidak semua hosted java script dapat dirubah menjadi embed, misalnya java script iklan, tracker, dll).

Embed javascript

Tentu saja maksudnya adalah kode javascript yang disimpan langsung pada template.
Ini juga berguna bagi yang tidak mempunyai file hosting.
Untuk membuat embed javascript, perhatikan dan ikuti petunjuk kode di bawah ini.

<script type='text/javascript'>
//<![CDATA[

PASTE SELURUH KODE JAVASCRIPT ANDA DI SINI

//]]>
</script>

Contoh 2

Simpan kode diatas tepat pada hosted java script yang anda ingin gantikan dengan fungsi yang sama (biasanya sebelum kode </head>).

Lalu bagimana mengkopi data javascript?

Ok. Ada 2 hal, yaitu;

1. File Javascript di hard drive.
   klik kanan lalu anda bisa pilih buka dengan firefox, internet explorer ataupun notepad. Anda akan bisa lihat kode javascript dan mengkopinya.


2. Javascript masih di file hosting.
   Misalnya pada contoh 1 di atas,perhatikan url javascript-nya,
   http://KODE URL JAVASCRIPT.js.
   Anda tinggal copy url ini dan paste di address bar browser anda, (tentu saja url ini tidak ada, khan ini hanya contoh).
   
   Dari sana anda akan diminta konfirmasi untuk mendowload javascript, download lalu simpan pada hard drive anda.
   
   Selanjutnya anda bisa mengkopi seperti cara no 1 tadi.

Related posts;
Menbuat Daftar isi dengan gampang pada blog
Membuat caption apik pada blog

Ditulis oleh Wira




>> Selengkapnya...

Membuat Daftar isi dengan gampang pada blog

Pada blog tertentu atau bahkan semua blog kadang perlu daftar isi. Ini akan memudahkan pengunjung melihat seluruh judul postingan anda, lihat contoh di atas.

Cara ini pertama kali diperkenalkan oleh Hans pada blognya Beautifulbeta, kemudian oleh Kang Rohman. Sesungguhnya ada tiga langkah mudah untuk membuat ini dan hasilnya anda bisa lihat sendiri. Saya rasa loadingnya tidak berat walau menggunakan third party java script.

OK, kita mulai.

Langkah Pertama, buat widget di sebelah atas post body.

Caranya, login ke blogger, layout, lalu Edit HTML. pastikan anda download dan simpan template anda yang ada buat jaga jaga kalau anda bikin kesalahan, anda masih punya cadangan template yang sama.
Lalu cari kode seperti di bawah ini;

<b:section class='main' id='main' showaddelement='no'>

Atau setidaknya yang ada kode;
<b:section class='main' id='main'>.

Ganti kode itu dengan kode di bawah ini

<b:section class='main' id='main' showaddelement='yes' maxwidgets:'2'>

Save template.

Langkah Kedua, masukkan kode untuk daftar isi

Masih dalam tab layout, klik page elements. Akan terlihat ada widget baru di atas post body. Pada widget yang baru itu, klik add gadget, lalu pilih HTML/Java Script kemudian copy seluruh kode dibawah ini dan paste di dalam widget itu. Lalu save.

<style type="text/css">
#toc {
 border: 0px solid #000000;
  background: #ffffff;
  padding: 5px;
  width:475px;
  margin-top:10px;
  border-bottom: 1px solid #717171;
}

.toc-header-col1,
.toc-header-col2,
.toc-header-col3 {
  background: #ffd595;
  color: #000000;
  padding-left: 5px;
  width:250px;
}

.toc-header-col2 {
  width:75px;
}

.toc-header-col3 {
  width:125px;
}

.toc-header-col1 a:link,
.toc-header-col1 a:visited,
.toc-header-col2 a:link,
.toc-header-col2 a:visited,
.toc-header-col3 a:link,
.toc-header-col3 a:visited {
  font-size:80%;
  text-decoration:none;
}

.toc-header-col1 a:hover,
.toc-header-col2 a:hover,
.toc-header-col3 a:hover {
  font-size:80%;
  text-decoration:underline;
}


.toc-entry-col1,
.toc-entry-col2,
.toc-entry-col3 {
  padding-left: 5px;
  font-size:90%;
}

</style>

<div id="toclink"><a href="javascript:showToc();">Show Table of Content</a><br/><br/></div>

<script src="http://wiraarta.fileave.com/tableofcontent.js" type="text/javascript"></script>

<script src="http://NAMA BLOG ANDA.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>
<div id="toc"></div>

Langkah ketiga, modifikasi kode

1. Perhatikan kode di atas yang diberi warna Coklat (475px), anda mesti mengganti nilainya agar lebarnya sesuai dengan lebar kolom post bodi anda,


2. Kode yang berwarna hijau (Show Table of Content). Ganti dengan bahasa yang anda gunakan, misalnya, Lihat daftar isi jika anda hendak memakai Bahasa Indonesia.


3. Kode yang bewarna biru pada kode di atas (tableofcontent) adalah java script yang menggunakan Bahasa Inggris, jika anda mau menggunakan Bahasa Indonesia, ganti kode itu dengan daftarisi


4. Kode yang berwarna merah, (NAMA BLOG ANDA). Gantilah dengan nama blog anda, misalnya pada blog ini, saya ganti dengan wirelect.

Lalu klik save, dan anda sudah mempunyai daftar isi blog...

SELAMAT MENCOBA...

Ditulis oleh Wira
>> Selengkapnya...