Fungsi CDATA Dalam JS dan CSS

Fungsi CDATA

Jika kamu sering mengotak-atik CSS maupun JS atau mungkin cuma drag and drop kode dari orang lain kamu terkadang akan menemukan yang namanya CDATA atau tertulis // <![CDATA[, kenapa saya bilang terkadang ? karena tidak semua JS dan CSS menggunakan itu. Oke, pernahkah terlintas rasa penasaran akan fungsi dari CDATA ini ? jika iya silahkan lanjutkan membaca karena kita akan mengulasnya disini dan mungkin ini hanyalah pembelajaran kecil-kecilan, namun untuk menambah wawasan kita tidak ada salahnya kita pelajari ini.

CDATA, menurut salah satu pengguna stackoverflow.
CDATA adalah kumpulan XML yang menetapkan isi tag yang biasanya #PCDATA - mengurai data karakter, untuk dijadikan sebagai CDATA, yaitu data karakter non-parsing (Tidak terurai).
Menurut saya, CDATA ini memiliki fungsi untuk mencegah penguraian yang dilakukan XML pada character tertentu sepertu &,<,>,",' dll. Dari beberapa kasus yang saya temui ketika saya membuat sebuah script ataupun CSS yang didalamnya terdapat karakter seperti diatas awalnya normal dengan menunjukkan wujud aslinya, namun ketika saya save HTML dan keluar lalu masuk lagi, yang terjadi adalah karakter diatas berubah wujud menjadi terurai, contohnya yang terjadi pada CSS tepatnya properti content:"" yang diurai menjadi content:&quot;&quot; dan JS yang terjadi pada data String '#monyet' diurai menjadi &#39;#monyet&#39; . Untuk lebih jelasnya perhatikan contoh kode dibawah.

Tanpa CDATA

<script>
$(function(){
if($(&quot;#HTML2&quot;).length){
var o=$(&quot;#HTML2&quot;),i=$(&quot;#HTML2&quot;).offset().top,t=$(&quot;#HTML2&quot;).height();$(window).scroll(function(){
var s=$(&quot;.bloginfo&quot;).offset().top-t-20,n=$(window).scrollTop(),f=$(window).width();
if(i&lt;n&amp;&amp;f&gt;1200?o.css({position:&quot;fixed&quot;,top:0,width:&quot;291px&quot;}):o.css(&quot;position&quot;,&quot;static&quot;),s&lt;n){var c=s-n;o.css({top:c})}})}});
</script>

Dengan CDATA

<script>
//<![CDATA[
$(function(){if($("#HTML2").length){var o=$("#HTML2"),i=$("#HTML2").offset().top,t=$("#HTML2").height();$(window).scroll(function(){var s=$(".bloginfo").offset().top-t-20,n=$(window).scrollTop(),f=$(window).width();if(i<n&&f>1200?o.css({position:"fixed",top:0,width:"291px"}):o.css("position","static"),s<n){var c=s-n;o.css({top:c})}})}});
//]]>
</script>

Seperti yang dikatakan diatas, kode tidak akan terurai jika menggunakan CDATA.
Semoga ada sedikit bayangan tentang fungsi CDATA, jika ada tambahan silahkan ditambahkan dibawah. Sekian dan terima kasih.

Cara Paling Mudah Memotong Snippet Tanpa JS

Cara Paling Mudah Memotong Snippet Tanpa JS

Pernahkah kawan merasa risih dengan snippet bawaan blogger yang memiliki kode <data:post.snippet>  terasa terlalu panjang terutama pada post homepage ? Jika pernah kita sama, selama ini yang saya gunakan adalah snippet yang sudah diatur dalam JS, jadi mengatur snippet bukan masalah. Namun, untuk sedikit meringankan kerja browser untuk membaca XML blog kita, kita akan mengganti settingan snippet tersebut menggunakan hanya sebaris kode HTML.Ya, hanya sebaris, ngapain panjang-panjang kalo ada yang pendek dan ringan.

Baiklah kita mulai praktekkan.
Sebenarnya cara ini sangatlah simple dan pastense, jika kamu menggunakan auto read more yang menggunakan kode <data:post.snippet> sebagai pengambil snippet, kamu cukup mengubahnya dengan kode dibawah ini.
<b:eval expr='snippet(data:post.body, {length: 50, links: false})'/>
Angka yang saya tandai adalah panjang karakter yang ingin kamu tentukan, terserah silahkan diubah sesuka hati :D.

Singkat saja bukan ?, baik sekian artikel saya. Terima kasih.

Pakai Credit Link ? Gengsi !

Blogger

Seperti itulah segelintir Blogger yang saya temui selama ini. Saya memulai ngeblog dari tahun 2013, saat itu saya masih kelas 1/2 SMP, saya mempunyai ketertarikan pada blog namun tidak mengerti sama sekali apa itu koding apa itu CSS/HTML, yang saya tau cuma nulis dan publikasi. (Sangat  pemula sekali).

Semakin lama saya bermain bersama Blogger, entah kenapa saya mulai tertarik untuk mempercantik tampilan blog saya, saya pun mencarinya di Google dan taraaa! saya baru mengetahui ternyata Blogger itu punya template, kebetulan template yang pertama kali saya gunakan adalah template yang berasal dari maskolis, saya terkesima dengan template buatan Maskolis yang terkenal dengan "Johny"nya =D, setelah sekian lama saya pake kok saya risih dengan link yang ada di footer yang berisi "Template by Creating Website published by Mastemplate", wah saya pun mulai coba membuka tempat sakral Blogger, yaitu kode HTMLnya, WOW saya seperti membaca aksara Jawa dan tidak ngerti apa-apa itu kode fungsinya apa, oke kemudian saya pun mulai scroll kebawah dan akhirnya menemukan sebaris kode yang sepertinya mengarah ke link footer template saya, saya pun mengubahnya menjadi link menuju ke FP Facebook saya, hahahah tanpa merasa bersalah saya setelah mengubah link tersebut.

Semakin lama saya semakin tertarik untuk mengenal kode HTML&CSS, saya pun mulai mencari referensi belajar, searching.... saya pun menemukan banyak blogger dan pandangan saya tidak jauh dari tampilan blog yang unik dan memukau, tidak lupa juga saya melihat kebawah, Wah! luar biasa templatenya udah di modifikasi sekeren ini tapi link asli sang pembuat template tidak dihapus. Seakan habis diceramahi Naruto, saya pun mulai sadar tentang pentingnya sebuah apresiasi, dan hal itu dapat dilakukan dengan tetap mencantumkan nama sang kreator.

Namun sekarang saya banyak menemukan hal yang aneh terjadi di tengah Blogger, mereka mengeluh dengan si pembuat template yang melarang menghapus link kreditnya

Anti Kredit Link
Lah, kan udah dishare gratis malah protes. (orang kaya gini memang berat gan).

Pengalaman, saya coba membuat sebuah template dan waktu yang saya habiskan adalah 1 minggu dan itu sampe larut, membuat tampilannya presisi dalam segala  jenis perangkat itu rumit dan butuh ketelitian. Itu juga yang dirasakan oleh pembuat template blogger, "udah cape-cape buat template gratis, eh malah ngamuk-ngamuk gara-gara dilarang hapus kredit".

Buanglah gengsi untuk dihargai, sekian dan terima kasih

Cara Membuat Laman Khusus Error Page

404 Error

Kali ini saya akan memberikan tutorial dasar blogger tentang Cara Membuat Laman Khusus Error Page untuk blogspot terutama, laman error page sebenarnya tidak begitu signifikan pengaruhnya terhadap SEO atau apapun itu yang berhubungan dengan Search Engine, namun adanya desain yang sedikit lebih menarik pada saat Error hal itu pun menambah kesan cantik untuk blog :D.
Oke, sebenarnya Error Page bisa kita desain dengan cara membungkus kode Error Page kedalam tag kondosional khusus Error Page yaitu <b:if cond='data:blog.pageType == &quot;error_page&quot;'>.

Apa itu Tag Kondosional ?
Tag Kondosional itu adalah tag yang ada kondosionalnya =D. Ok ralat, Tag Kondosional adalah sebuah tag yang berfungsi untuk membuat sebuah kode elemen HANYA jalan di kondisi tertentu sesuai Tag Kondosionalnya masing-masing. Tag Kondosional sebenarnya punya 2 perintah yaitu "==" (tanpa tanda kutip) yang berarti Hanya Dihalaman Yang Dimaksud dan "!=" yang berarti Kecuali Halaman Yang Dimaksud. Contohnya untuk yang "==", kita ingin menghilangkan header di halaman khusus artikel, kita bisa gunakan.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#header-wrapper {display:none}
</style>
</b:if>
Apa yang terjadi ?, iya tentu Header akan hilang entah kemana di halaman artikel namun tetap muncul dihalaman lain kecuali artikel. Saya harap anda dapat mempunyai bayangan sedikit mengenai Tag Kondosional.

Oke cukup tentang Tag Kondosionalnya, kita kembali ke bahasan. Silahkan cek link dibawah.

Demo

Sederhana saja, namun kamu bisa ubah sesuka hati kamu. Oke ikuti langkah dibawah.
Letakkan kode ini diatas </head>, namun jika templatemu sudah terdapat meta tag kamu bisa taro diatasnya supaya keliatan :D.


<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
    <title>404 :(</title>
    <b:else/>
    <title><data:blog.pageName/></title>
</b:if>

Apa fungsi kode diatas ? Kode diatas berfungsi mengatur Title yang terletak diatas Address Bar Browser. (Silahkan diubah sesuka hati)

Yang kedua letakkan kode dibawah ini diatas </head> 


<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type='text/css'>
.bloginfo, #header, #outer-wrapper, #post-wrapper, #sidebar-wrapper, #content-wrapper,#footer-wrapper {display:none;}
.container404{transition:all .3s;margin:auto;padding-top:16%;width:400px;height:auto;text-align:center;animation: ticking 1s infinite;}
.body404 {background:#444;width:100%;height:100%;position:absolute;animation: body 2s infinite}
.container404:hover {animation:none}
.container404 h1 {font-size:150px;color:#ccc;animation: judul 1s infinite}
.container404 a {font-size:20px;color:#ccc;text-transform:uppercase}
@keyframes ticking {
    0%   {transform:scale(1.0)}
    15%  {transform:scale(1.1)}
}
@keyframes judul {
    0%   {color:#ddd}
    15%  {color:#eee}
}
@keyframes body {
    0%   {background:#444}
    15%  {background:#333}
}
</style>
</b:if>

Kode apa itu ? Itu adalah CSSnya yang mengatur desain dari Error Page nya, isinya bisa kita lihat saya menghilangkan beberapa elemen seperti bloginfo,header,outer,post-wrapper dan lain-lain. Dan juga saya menggunakan keyframes  yang berfungsi sebagai custom animation yang saya atur secara infinite yang artinya bergerak tanpa batas berhenti, tetapi akan berhenti jika kursor diatas tulisan seperti yang di perintahkan di .container404:hover {animation:none}. Dalam keyframes saya membuat salah satu perintah untuk membuat containernya membesar dan mengecil dengan menggunakan transform:translate(x.x).

Terakhir, kita letakan kode pemanggilnya.

<div class='body404'>
  <div class='container404'>
     <h1 class='error'>404 :(</h1>
     <a href='/'>Back To The Homepage</a>
  </div>
</div>

Apakah kode diatas ?  nah ini adalah HTMLnya yang fungsinya membangun elemen sesuai perintah desain dari CSS tadi. Letakan saja diatas </body>.

Selesai saya harap penjelasan ini dapat dimengerti oleh para blogger. Jika ada kode yang tidak jalan bisa komentar dibawah. Sekian terima kasih.

Buat Template Sendiri Dari 0

Template
Kali ini saya akan berbagi pengalaman tentang pembuatan  template blogger yang mandiri, maksudnya eksklusif karena kita bikin sendiri. Saya awalnya iseng-iseng saja ingin membuat sebuah template atau lebih dikenal dengan theme untuk bisa diterapkan website self-hosted, tapi semakin lama saya makin tertarik dengan template ini, saya pun berpikir "Lagian saya gak punya ide/rencana untuk build website self-hosted mending pasang di blog", saya pun memilih untuk memasangnya di blog, dengan sedikit penyesuaian upload file script & css untuk di hosting, karena saya membuat template secara offline menggunakan sebuah aplikasi yang namanya Sublime Text 3.Aplikasi ini enak banget, pluginnya lengkap, dengan adanya plugin induk untuk memasang plugin atau yang lebih dikenal dengan package control, kawan dapat memasang banyak plugin secara bebas. Aplikasi ini juga sangat efisien, dimana disana tersedia plugin yang namanya emmet, plugin ini sangat meringankan waktu untuk membuat template, contohnya jika saya ingin  membuat sebuah kerangka untuk HTML 5, saya tinggal mengetik HTML:5 lalu tab, jengjeng kerangka terbentuk. Saya sangat merekomendasikan aplikasi ini untuk kawan-kawan.

html

html

Pembentukan Kerangka

Membuat kerangka blog ini harus kamu perhatikan juga tentunya, dan juga ini menurut saya menjadi dasar pembentukan template. Kamu harus tau, kamu mau buat template dengan berapa kolom, 1/2/3, dan juga penempatan atau pemasangan elemen seperti header, sidebar,  ataupun footer, saran saya buatlah sesuai fungsi blog. Dalam project ini saya hanya membuatnya secara sederhana dengan tampilan 1 kolom dengan hanya bagian penting yang akan saya desain. contohnya saya hanya mendesain tampilan homepage dan static page saja, jika seperti post-page saya abaikan karena saya sepertinya tidak saya tidak menggunakannya.  
Kenapa saya tidak menggunakan post-page ?
Nah ini, seperti yang sudah saya sampaikan diatas, buatlah sesuai fungsi dan kebutuhan, template ini rencananya akan saya gunakan untuk blog yang bertipe galeri atau apalah itu, jadi saya tidak membutuhkan post-page, karena saya akan menampilkannya di halaman depan tanpa harus masuk post-page untuk melihat gambar.
Untuk demonya, silahkan klik link dibawah


Penggunaan Framework Bootstrap

Untuk pembentukan template saya dibantu oleh bootstrap, Bootsrap menurut saya sangatlah efektif jika ingin menghemat waktu untuk membuat elemen yang responsif dan cepat, dan juga elemen class yang banyak sudah siap sedia didalam cssnya bootstrap yang ..../boostrap.min.css, dan jangan lupa juga dengan javascript yang sudah disediakan bootstrap, karena beberapa elemen responsif tidak akan jalan jika ini tidak dipasang seperti contohnya seperti menu navbar versi mobile yang menggunakan sistem yang saya gak tau namanya ini :D, pokoknya dia menggunakan sistem navigasi buka tutup gitulah. Berbagai fitur yang sangat membantu dari bootstrap, pencatuman bootstrap sangat direkomendasikan untuk blog sobat, 

Mengenal Lebih Dalam Kode Pembangun

Nah ini dia perbedaannya kamu desain template yang sudah ada dengan kamu membuat sendiri templatenya, kamu akan jauh lebih mengenal templatemu, penempatan serta seluk beluk blog udah dikenal jadi kalau mau desain lagi anda sudah tidak kerepotan mencari id ini mencari class ini dan js yang aneh-aneh ditanam di template.
Saya mulai tertarik untuk lebih mengenal javascript, karena mau tidak mau javascript gak lepas dari penulisan si builder template, jika kamu suka dengan effect-effect cantik di blog seperti effect dropdown menu yang suka memantul, membuat sebuah effect pada saat klik link tertentu dengan menggunakan event, kamu wajib tau atau sedikit tau tentang javascript, untuk penggunaan JSnya bisa tolong google carikan.

Coba-coba aja gan buat template sendiri siapa tau jadi, kalo udah jadi dijamin bakal senyum-senyum sendiri karena akan ada pertanyaan dalam batin "lah kok jadi yah ?", terutama bagi saya yang newbie hahahaha. 
BTW, saya butuh saran untuk template saya gan untuk lebih mengembangkannya lagi :D.
Oke sekian artikel saya, terima kasih.