Cara menambah code css di Blogger

Cara menambah code css di Blogger
Pada artikel sebelumnya yang berjudul "Cara membuat box code di blogger" kita diharuskan menambahkan code css pada blogger, namun muncul sebuah pertanyaan. Bagaimana cara menambahkan code css di blogger?

Ya, memang banyak pada kalangan beginner di blogger yang mencari-cari dimana tempat untuk menambah/mengganti code css untuk website nya. Berbeda halnya dengan platform lain yang code stylenya di pisahkan dengan file-file lain yang biasanya disimpan dalam file bernama "style.css", namun di Blogger ini kita hanya mengedit 1 file saja karena memang format yang digunakan adalah xml. Berikut adalah cara menambah code css di blogger:

  1. Masuk ke blogger dashboard
  2. Pilih website anda
  3. Masuk ke menu Template
  4. Pada option Live on Blog, klik Edit HTML. Kemudian akan muncul barisan code xml, klik pada field tersebut(maksudnya kolom code tersebut).
  5. Tekan Ctrl+F , kemudian ketik ]]></b:skin>
  6. Jika berhasil, anda bisa menambahkan code css anda di atas code ]]></b:skin>

Contoh penambahan code css:

.kotak{
width:200px;
height:200px;
background:#000;
}

]]></b:skin>

Selamat mencoba dan semoga bermanfaat.

Cara membuat box code di blogger

Cara membuat box code di blogger
Ada sebagian orang yang senang berbagi pengalaman ngoding pada sebuah artikel. Namun bagaimana agar code yang ingin kita sampaikan itu menarik atau berbeda dengan isi kontennya? Disini kita akan mencoba sebuah code agar code itu tampak berbeda dengan tulisan biasa.

Mungkin pada sebagian orang yang menggunakan WordPress sudah tidak asing menampilkan code pada kontennya, hanya tinggal klik code pada WYSIWG editor, kemudian masukan code yang ingin anda share dan muncullah code yang sudah otomati di wrap oleh style css yang berbeda dengan isi konten. Namun bagaimana caranya kita menampilkan code tersebut di blogger?

Di blogger ini teman-teman harus membuat style css untuk si code, berikut adalah salah satu contoh ketika ingin berbagi code misal struktur dasar HTML:


<html>
<head>
<title>Struktur Dasar HTML</title>
</head>
<body>
Halo Dunia
</body>
<html>


Code diatas terlihat tidak menarik karena tidak menonjolkan bahwa itu adalah code, bandingkan dengan yang diberi style:

<html>
<head>
<title>Struktur Dasar HTML</title>
</head>
<body>
Halo Dunia
</body>
<html>


Terlihat lebih menarik dari sebelumnya(menurut saya hee..), jika anda ingin membuatnya silahkan anda tambahkan code css berikut pada website blogger anda:

.code {
background: #F5F8FA;
background-repeat: no-repeat;
border: solid #0098FF;
border-width: 1px 1px 1px 20px;
color: #000; font: 13px 'Courier New', Courier, monospace;
line-height: 16px;
margin: 10px 0 10px 10px;
max-height: 200px;
min-height: 16px;
overflow: auto;
padding: 28px 10px 10px; width: 90%;
}


Jika sudah menambahkan code css diatas, cara menggunakan nya, ketika anda membuat sebuah artikel masuk ke tab HTML, lalu tambahkan seperti:

<div class="code">
Disini anda tambahkan code yang ingin anda bagikan.
</div>

Begitulah yang dapat saya sampaikan dalam Cara membuat box code di blogger, semoga bermanfat!

NOTE:
*WYSIWG singkatan dari What You See Is What You Get, bar yang ketika kita bikin post, icon bold, italic, dll.