Cara Membuat Kotak Highlighter di Blog

Kuliahawan.com -kali ini kuliahawan akan membagikan cara membuat Kotak highlighter di blog kotak highighter adalah sebuah kotak untuk membungkus sebuah elemen-elemen atau syntax html, css, javascript, boostrap dan lain lain.Cara ini cocok untuk blog yang membahas seputar Blogging atau Membuat Web dengan coding sendiri.Jika kamu tertarik dengan artikel ini simak caranya di bawah ini.


Cara Membuat Kotak Highlighter di Blog

Kotak Highighter yang saya bagikan ini cuman menggunakan css saja jadi tidak akan membuat blog  kamu jadi berat, kotak highighter ini sangat responsive dan simple cara menerapkannya juga gampang 

Cara Membuat Kotak Highliter di Blog
1. Masuk ke akun blogger 
2. Piih tema atau template 
3. Klik edit html
4. Kemudian cari kode ]]></b:skin>    caranya dengan klik kode sembarang yang ada di dalam  edit html kemudian tekan ctrl dan f
5. Kalau sudah ketemu masukkan kode css yang ada di bawah ini pastekan di atas kode ]]></b:skin>  


/* CSS Highlighter */
.post-body pre .google-auto-placed, .post-body table .google-auto-placed, .post-body blockquote .google-auto-placed, #header-container .google-auto-placed, .sidebar-sticky .google-auto-placed{display:none;}
.post-body pre {background-color: #292E34; /* warna background */border-left: 5px solid #de0985 /* 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}

6. Lalu simpan tema 
7. Cara menerapkanya di blog, pergi ke menu postingan kemudian ada dua pilihan yaitu Compose dan HTML kamu pilih yang HTML  cara pemanggilanya cukup menggunakan tag pembuka dan penutup yaitu <code><pre>  isi kodingan yang mau di tampikan </code></pre>
Contohnya seperti di bawah ini

<code>
<pre>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

</code>
</pre>
Semoga bermanfaat

0 Response to "Cara Membuat Kotak Highlighter di Blog"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel