CARA PROTEKSI CSS MENGGUNAKAN BASE64

Selamat sore sobat, apa kabarnya? Baik baik saja kah, kali ini saya akan berbagi sedikit tutorial dari Blog tetangga (ZTO) yg Kode aslinya dari Motyar - Blog kemudian di kreasikan lagi.. Sebelum sobat mencoba trik ini ada baiknya sobat mengenak dulu mengenal apa itu Base64 atau DataURI, jika sobat belum paham maka akan saya jelaskan sedikit disini..
Menurut wikipedia DataURI adalah penggunaan skema data secara inline didalam halaman web yang seakan - akan data tersebut berada pada web lain ( eksternal web ) Browser suppot DataURI silahkan sobat cek disini, pengkodean DataURI sebagai berikut 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/
2. Encoding baca selengkapnya
• US-ASCII
• UTF-8
• EBCDIC
• UTF-16
• UTF-32
3. Base64, Adalah Hasil Encode dari sebuah kode,url,teks dan gak tau apalagi, kodenya terlihat aneh jika dilihat namun memiliki isi. Contoh Base64,
   

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

4. 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 anda")
   </script>

4. Compres CSS sobat disini
5. Generate CSS anda menjadi Base64, 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..