Cara proteksi Css Dengan Base64

Selamat malam sobat blogger, gimana nih kabar kalian? sehat?. Kali ini saya akan membagikan sedikit tutorial tentang Cara Proteksi Css Dengan Base64 .Mwnurut wikipedia DataURI adalah penggunaan skema data secara in-line pada halaman blog sobat dan seakan - akan data tersebut berada pada blog lain. Browser yang support DataURI silahkan sobat cek langsung aja sendiri disini. Pengkodean DataURI itu sendiri seperti ini

data:[<MIME-type>][;charset=<encoding>][;base64],<data>

1. MIME-type berupa

• text/plain

• image/jpg

• image/gif

• image/png

• text/javascript

• text/html

• text/css

• audio/mp3

• audio/wav

• audio/ogg

• application/pdf

• text/xml

• Untuk semua jenisnya sobat bisa mengecek sendiri ke http://www.webmaster-toolkit.com/

1. Encoding baca selengkapnya

• US-ASCII

• UTF-8

• EBCDIC

• UTF-16

• UTF-32

1. Base64, Adalah Hasil Encode dari sebuah kode,url,teks dan gak tau apalagi, kodenya terlihat aneh jika dilihat namun memiliki isi. Contoh Base64,

1. iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAS5JREFUOI2tlNmNhDAQRCekCYFQOMR9gzg+nZlD2RA2hN4uC0s7yAYD81FCou3XXWXwi4he35a14Pu+F4YhxXFMSZLYJLkuoijynaBBEHhpmlLbtjQMg1F938umaURRFJRlme8EzfOcxnGkdV2NWpZFMtgDuK5rYYTCMmCsN1t3gf7yxJhWyQhFhrDMViQ/vbIsD6HQNE06CjJCcShbhujssaVT6DaxkhGKE0VXZNV1HbJSUFvuXBOYFEDAL0F5o8qMT/lDVVX9wPY8z9eh2ITNiOa/eI2q35p0b5sbCN1MA+/YV5OxXSW839Z9HNglKDbjqf8k3egR9OwC0Y0f2d8LNax5ZH+vW5Oe/VHOmZ7leCQbVH3syAuXii3LS1BYwYd9lCPkCsWlK2HfRTboH71yVt9PdsQQAAAAAElFTkSuQmCC

2. Data berupa teks yang dihasilkan dari Base64 ( seperti contoh diatas ).

Saya harap anda mengerti, sulit? Memang sulit untuk memahami hal baru karena saya sendiri pernah mengalaminya.

BERIKUT TUTORIALNYA

1. Backup terlebih dahulu template sobat..
2. Edit Template sobat, 
3. Copy Javascript ini di atas </head>
   

   <script type="text/javascript">
   function whatdepak(css){
     var xdx = document.createElement("link");
       xdx.href = "data:text/css;base64,"+css;
       xdx.rel = "stylesheet";
     document.head = document.head || document.getElementsByTagName('head')[0];
     document.head.appendChild(xdx);
    }
   whatdepak("kode css base64 sobat")
   </script>

4. Compres CSS sobat disini
5. Generate CSS anda menjadi Base64, disini / disini kemudian simpan ke dalam Notepad.

Untuk penerapann sobat perlu mengambil Kode base64, saja seperti yg saya tandai

data:text/css;base64,Ym9keXtiYWNrZ3JvdW5kOmJsYWNrfQ==

Kode yg di tandai di atas adalah Base64, jadi kesimpulannya Hasil Generate CSS sobat yg di Copy paste ke Notepad di depanya ada kode seperti ini data:text/css;base64, sobat bisa menghapusnya...

Langkah terkahir adalah menggabungkan Javascript dan Base64, itu menjadi satu..

<script type="text/javascript">
function whatdepak(css){
  var xdx = document.createElement("link");
    xdx.href = "data:text/css;base64,"+css;
    xdx.rel = "stylesheet";
  document.head = document.head || document.getElementsByTagName('head')[0];
  document.head.appendChild(xdx);
 }
whatdepak("Ym9keXtiYWNrZ3JvdW5kOmJsYWNrfQ==")
</script>

Jangan bertanya apakah menambah Berat Loading Blog?
Jawabnya tentu tidak, kenapa?
Silahkan sobat cari tahu sendiri..