Membuat Syntax Highlighter Ringan dengan CSS di Blogger - Syntax Highlighter merupakan tempat/area yang menyoroti kode program dimana dipasang pada postingan blogger, agar pengunjung bisa mengenali mana kode program dan mana tulisan biasa. Cara ini biasanya di pasang untuk blog yang berisi tutorial - tutorial program. Berbeda apabila tidak dipasang syntax highlighter, pengunjung besar kemungkinan akan bingung karena tidak bisa mengenali mana kode program dan mana tulisan biasa, selain itu nilai estetika dan kerapiannya berkurang. Karena tentu kode program yang akan kamu share tidak selamanya pendek dalam artian hanya satu dua baris saja, mungkin bisa lebih dari sepuluh baris, dari situ akan membuat pengunjung pusing membaca di blog kamu.

Jika blog kamu isi artikelnya berisi tutorial kode program, yang tentu nya harus membagikan secara langsung di dalam postingan tersebut. Berarti kamu tidak salah membuka artikel ini, lanjutkan saja membacanya.

Artikel lainnya : Cara Mudah Memasang Parse HTML di Blogger

Syntax Highlighter ini kalo kata saya sangat ringan karena hanya HTML dan CSS saja, yang tidak akan membuat blog kamu menjadi berart setelah memasang syntax highlighter ini. Selain itu, dari sisi estetika desain nya cukup bagus dan soft.

Cara Memasang Syntax Highlighter di Blogger

Sebelum memasang syntax highlighter ini di cek dulu apakah terpasang kode .post-body pre dan .post-body pre code, lebih baik di hapus dulu.

Baik sekarang masuk ke teknis memasang syntax highlighter nya di blogger.

• Masuk ke blog, lalu ke menu Tema dan pilih Edit HTML
• Copy kode dibawah ini dan paste kan diatas kode ]]></b:skin>

.post-body pre {
  background-color: #292E34; /* warna background */
  border-left: 5px solid #008c5f; /* variasi border kiri */
  padding:0; margin:.5em auto; white-space:pre; word-wrap:break-word; overflow:auto; position:relative; width:100%; -moz-tab-size:2; -o-tab-size:2; tab-size:2; word-break:normal; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; -webkit-hyphens:none; -moz-hyphens:none; -ms-hyphens:none; hyphens:none
}
.post-body pre code {
  color: #BFBF90; /* warna huruf */
  font-size: 12px; /* ukuran huruf */ 
  max-height:250px; line-height:1.5em; display:block; background:none; border:none; padding:10px 15px; font-family:'source code pro',menlo,consolas,monaco,monospace; white-space:pre-wrap; overflow:auto; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text
}

Terakhir tempatkan kode di bawah ini pada postingan kamu, pada menu HTML

<pre><code>
  <!-- Masukkan semua kode CSS, HTML atau Javascript disini -->
</pre></code>

Jika tidak berhasil, pada kode CSS diatas bisa di hapus kode .post-body nya saja.
Bagaimana mudah bukan Membuat Syntax Highlighter di Blogger nya, ini dibuat pure CSS dan HTML saja, apabila ingin membuat tulisan nya ada warna - warni nya bisa dibantu dengan JS, tapi kemungkinan akan agak berat pada saat membuka postingan.

Cara - Cara Menghubungkan CSS ke halaman HTML - Dimana yang sudah sama - sama kita bahas mengenai CSS ialah baru mengenai pengertian CSS serta cara penulisannya saja. Namun, ada yang bertanya seperti ini, "Bagaimana mas cara menerapkan/menghubungkan ke HTML nya?", dari pertanyaan itu saya tergerak untuk membuat tutorial ini. Bagi yang biasa hidupnya tidak lepas dari pengkodingan website, pasti bukan istilah yang asing lagi, dimana CSS ini seperti yang kita ketahui, mempunyai peran yang sangat penting, salah satunya untuk mengatur tata letak serta gaya halaman agar bisa terlihat rapi dan enak dilihat oleh pengunjung. Kenapa saya hubungkan antara website yang rapi dan bagus gaya nya dengan pengunjung, itu karena pengunjung tidak hanya melihat isi dari postingan saja, tetapi melihat dari sisi lainnya juga, seperti dari kerapian, gaya, dll sehingga pengunjung betah berselancar di website kita. Karena bagaimana pun juga pengunjung adalah nyawa bagi website kita. Ya. . . walaupun misal nya kita kurang dalam hal seni nya, minimal kita bisa membuat webiste tersebut bisa menjadi rapi dan nyaman bagi para pengunjung.

Ada beberapa cara untuk menghubungkan dari CSS ke HTML, diantaranya :
1. Internal style sheet
 Pada cara pemberian gaya HTML ini apabila kondisinya anda ingin memberikan gaya yang unik pada satu halaman saja. Penempatan gaya nya pada bagian kepala HTML, misal dengan style seperti dibawah ini :
<head>
<style>

 ..area kode css..

</style>

</head>
2. External style sheet
Pada cara ini apabila kita sedang membuat halaman lebih dari satu atau banyak, dengan cara ini lah anda cukup melakukan pengeditan pada satu halaman saja yang nantinya harus terhubung ke halaman - halaman yang dibutuhkan gaya/style. Kita gunakan tag <link>. Yang ditempatkan pada bagian kepala HTML, untuk lebih jelasnya, seperti contoh dibawah ini :
<head><link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
Sekarang membuat file CSS nya, bisa dibuat dengan web editor apa saja, misal notepad. Disimpan dengan ekstensi *.css. Contoh nya seperti dibawah ini :
p {margin-right:15px;}
h2 {color:blue;}
3. Inline style
Pemberian gaya HTML pada cara ini disisipkan pada tag HTML. Contoh nya seperti dibawah ini :
<p style="color:sienna; margin-left:100px;">This is a paragraph.</p>
Coba simpan dengan format *.html

Seperti itu lah cara - cara menghubungkan CSS ke halaman HTML, apabila ada yang kurang boleh ditanyakan dikolom komentar bawah ini.

Penerapan selector id dan class pada CSS - Dalam penerapan selector id dan class pada CSS ini termasuk ke dalam kelompok tutorial CSS dasar. Yang mana kita selalu kebingungan antara id dengan class, mungkin dari fungsi nya ada kesamaan yaitu sama - sama untuk memanggil gaya dari css luar, tetapi ada sisi perbedaannya, yang akan sama - sama kita bahas. Untuk itu mari disimak ya.
CSS atau merupakan singkatan dari Cascading Style Sheet merupakan bahasa pemrograman untuk membantu pembuatan struktur web dengan HTML agar lebih mudah dan menarik. Bila kita postingan sebelum ini membahas Pengertian dan Pengenalan tag CSS dasar dimana postingannya berisi tentang pengertian serta pengenalan tag dasar dari CSS.


Kelanjutan dari itu, CSS mempunyai id dan class, kedua tag tersebut disebut dengan selector, dimana dibawah akan dijelaskan pengertiannya.
Selector id
Digunakan untuk memberikan style pada elemen tunggal saja. Diberikan definisi "#", yang bisa dicontoh kan sebagai berikut ini :
#pilih
{
text-align : left;
color : blue;
}
syntax diatas akan diterapkan pada file css luar atau pada file html, dan diterapkan dengan id = "pilih"

Selector class
Digunakan untuk memberikan style pada beberapa elemen. Disinilah titik perbedaan nya bahwa selector class bisa memberikan gaya pada halaman web lebih dari satu elemen. Pendefinisiannya pun berbeda pada selector class didefiniskan ".", yang bisa dicontoh kan sebagai berikut ini :
.kanan
{
text-align : right;
}
Dengan syntax diatas kita bisa artikan bahwa element HTML yang mempunyai class kanan akan dibuat perataannya kanan.
Contoh lain
p.kanan
{
text-aling : right;
}
Dengan syntax diatas kita bisa artikan bahwa element HTML p dengan class = "kanan" akan dibuat perataan kanan

Perlu Diingat !!!
"Jangan gunakan angka untuk memberikan nama pada id dan class, karena tidak akan bekerja pada mozilla firefox"

Seperti itu lah tutorial mengenai selector id dan class pada CSS, bagaimana? sekarang sudah lumayan jelas bukan? atau masih remang - remang. he..he..he.., kalau masih ada yang kurang jelas bisa anda tanyakan pada komentar dibawah ini. Semoga tutorial penerapan selector id dan class pada CSS ini bisa bermanfaat.

Pengertian dan Mengenal tag CSS dasar - Ini merupakan pembahasan mengenai CSS perdana, pertama kali yang dibuat. CSS ini singkatan dari Cascading Style Sheet, yang masuk ke dalam kelompok bahasa pemrograman, dimana nanti nya kelanjutan dari HTML. Sudah pasti, apabila anda ingin mempelajari CSS maka harus mengetahui terlebih dahulu HTML nya. Yang akan menstruktur kan halaman web menjadi lebih rapi dan enak untuk dilihat. Sebetulnya bisa tanpa CSS, hanya menggunakan bahasa HTML saja, tetapi pembuatan yang rumit yang akan berimbas ke harga menjadi mahal apabila program tersebut akan dijual, seperti yang dialami ketika HTML pada versi 3.2.

CSS adalah suatu bahasa pemrograman, untuk menstruktur komponen - komponen web sesuai keinginan kita, dimulai dari pewarnaan, tata letak, sampai pengaturan paragrap sekalipun bisa dengan CSS. Karena dengan CSS ini lah pengerjaan kita bisa semakin mudah, serta cepat. Namun, mudah dan cepat ini tanpa mempunyai alasan, itu karena ketika kita ingin membuat dan mengedit hanya dari 1 file saja, berbeda apabila kita ingin mengubah warna pada halaman 1 dan halaman 2, maka harus mengedit di kedua file tersebut. Mending kalo yang dibuat halaman nya hanya 2, coba misal yang dibuat pada web tersebut lebih dari 2 halaman, maka proses pembuatan dan pengeditan akan memakan waktu yang tidak sebentar. Maka dengan CSS ini lah bisa memudahkan kita baik dalam proses pembuatan maupun pengeditan.
Dibawah akan saya coba memberikan tag dasar mengenai syntax yang akan digunakan dalam pembuatan CSS dasar ini.
h5 { font-size : 18px; color : red; }
Keterangan :
h5, merupakan selector atau tag HTML yang dipilih untuk diformat
font-size, merupakan properti dari CSS
18px, nilai dari properti CSS
{ }, merupakan tanda kurawal yang akan menjadi deklarasi atau statement CSS
Setiap proses akan diakhir dengan tanda ;
Tanda pemisah antara properti dengan nilai dengan menggunakan tanda titik dua (:)


Seperti hal nya bahasa pemrogram lainnya, katakan saja PHP, JavaScript, ASP dan lainnya. CSS pun mempunyai tag komentar, ini dimaksudkan agar tag yang dituliskan pada web editor tidak bekerja atau tampil pada web browser. CSS comment tersebut bisa kita buat dengan tag /* dan diakhir dengan */. Seperti tutorial sebelumnya yang sudah kita sama - sama pelajari mengenai Komentar pada PHP dengan mudah, tag nya sama.
Seperti itu lah pembahasan mengenai CSS dasar serta penulisan nya, apabila ada pertanyaan silakan bisa diajukan di kolom komentar saja ya. ^_^

Kamu pernah membuat tabel di HTML? Apabila iya, artikel ini pas. Untuk itu, lanjutkan simak sampai kebawah ya. Karena topik yang dibawakan sekarang cukup menarik yaitu : Membuat Tabel HTML Responsive dengan CSS di Blog. Blog disini ditujukan untuk pembuatan blog nya di blogger, untuk secara HTML secara offlinenya next time ya. Dari judul ini mungkin muncul pertanyaan kenapa harus responsive? Berawal dari maraknya penggunaan gadget, dimulai dari smartphone sampai tablet. Tampilan situs webiste/blog harus mengikuti ukuran layar ponsel secara fleksibel, karena begitu banyak nya orang yang menggunakan gadget untuk melakukan aktifitas nya dalam berselancar di internet. Terlepas dari pada itu, tabel pun yang kita tahu begitu banyak kegunaannya, mau tidak mau/bahkan harus menjadikan tabel yang responsive. Ya..kalau tidak mau ditinggal langsung oleh pengunjung. hehe

Mungkin apabila kamu buka di laptop/PC tabel akan normal - normal saja. Tapi, coba dibuka di gadget smartphone yang ukuran layarnya cukup sempit, maka tabel tidak mengikuti layar atau malah menyamping, melampaui batas layar bagian samping.

Pembuatan tabel untuk di web menggunakan kode HTML, tetapi harus ada penunjang nya agar tabel menjadi responsive yaitu dengan kode CSS. Karena disini tidak akan mengulas lebih dalam mengenai apa itu CSS. Bagi yang ingin tahu mengenai dasar nya mari bisa baca di : Pengertian dan Mengenal tag CSS dasar.

Kembali ke topik yang sekarang kita bahas, mari langsung saja praktekan.

#Membuat Tabel Standar
Buat postingan baru di blog
Ke tab HTML, kamu ketikan kode dibawah ini

<table border=1>

<tr>

<th>Spesifikasi</th>

<th>Minimum</th>

</tr>

<tr>

<td>Processor</td>

<td>500 MHz</td>

</tr>

<tr>

<td>RAM</td>

<td>256 MB(512 MB up recomended</td>

</tr>

 </table>

Silakan Publikasikan
Apabila kamu lihat hasil nya sampai sini, tabel belum responsive dan tampilannya masih biasa saja
Untuk itu mari kita lanjut ke tahap selanjutnya

#Membuat CSS

• Menuju menu Template
• Kemudian Edit HTML
• Akan muncul kotak tempatnya kode-kode HTML
• Langsung cari kode </head> (cara cepat : CTRL+F lalu ketikan </head>)
• Ketikan kode dibawah, diatas kode </head>

/* CSS Post Table by JT*/



.post-body table th, .post-body table td, .post-body table caption{border:1px solid #d8dde1;padding:.2em .5em;text-align:left;vertical-align:top;}



.post-body table.tr-caption-container {border:1px solid #d8dde1;}



.post-body th{font-weight:700;}



.post-body table caption{border:none;font-style:italic;}



.post-body table{}



.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;border:1px solid #d8dde1;}



.post-body th{background:#109C02;color:#fff;}



.post-body table.tr-caption-container td {border:none;padding:8px;}



.post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;}



.post-body td.tr-caption {color:#666;font-size:80%;padding:0px 8px 8px !important;}



img {max-width:100%;height:auto;border:none;}



table {max-width:100%;width:100%;margin:1.5em auto;}



table.section-columns td.first.columns-cell{border-left:none}



table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}



table.columns-2 td.columns-cell{width:50%}



table.columns-3 td.columns-cell{width:33.33%}



table.columns-4 td.columns-cell{width:25%}



table.section-columns td.columns-cell{vertical-align:top}



table.tr-caption-container{padding:4px;margin-bottom:.5em}



td.tr-caption{font-size:80%}

• Kemudian kamu coba Simpan dan Lihat hasilnya
• Selamat tabel nya sudah responsive mobile

Hasilnya kurang lebih seperti dibawah ini :
Tabel standar (baca : banyak digunakan) diatas apabila tidak terlalu membutuhkan banyak bagian kepala dari struktur tabel tersebut. Seperti contoh diatas kan hanya membuat bagian Spesifikasi dan Minimum saja. Ada lagi bentuk tabel yang mengharuskan bagian kepala tabel nya banyak, seperti yang digunakan untuk tabel spesfikasi handphone, motor, dan lain lain.

#Membuat Tabel bentuk kedua(spesifikasi handphone,motor,dll)

• Buat postingan baru di blog
• Masuk ke tab HTML, lalu ketikan kode dibawah

<table border=1>

<tr>

<th width=35%>Peluncuran</th>

<td>Januari 2016</td>

</tr>

<tr>

<th width=35%>Kartu SIM</th>

<td>Dual SIM (Nano-SIM/ Micro-SIM, dual stand-by)</td>

</tr>

</table>

• Terakhir Publikasikan dan lihat hasilnya

Hasilnya kurang lebih seperti dibawah ini :

Seperti itulah artikel tutorial mengenai Membuat Tabel HTML Responsive dengan CSS di Blog, dengan membuat tabel yang responsive bisa memanjakan dan membuat betah pengunjung yang membukanya dengan menggunakan gadget.