Saturday, July 04, 2015
| http://wanskawani.blogspot.com/ | KAWANI MEDIA |
Berbagi pengalaman dalam ngoding pada sebuah artikel akan terlihat menarik kalau sebuah Code yang akan dibagikan tampil beda dengan tulisan biasa. Cara ini lebih mudah dalam WordPress dengan hanya meng klik Code pada WYSIWG editor ( What You See Is What Yoe Get, bar yang ketika kita bikin post, icon bold italic dll ). Kemudian masukan Code yang akan kita share dan munculah Code yang sudah otomatis di wrap oleh Style CSS yang berbeda dengan isi konten.
Pertanyaannya adalah apakah ini bisa diterapkan pada Blog kita?
Jawabannya, Sangat Bisa!!!
Disini kita akan mencoba sebuah Code agar Code itu tampak berbeda dengan tulisan biasa. Sebelumnya kita buat Code style CSS untuk si Code, berikut adalah contoh ketika ingin berbagi Code misal struktur HTML:
<html>
<head>
<title>Struktur Dasar HTML</title>
<head>
<body>
Kawani Media
</body>
<html>
Code diatas terlihat kurang menarik kan? itu karena tidak menonjolkan bahwa itu adalah Code, bandingkan dengan yang diberi style dibawah ini:
<html>
<head>
<title>Struktur Dasar HTML</title>
<head>
<body>
Kawani Media
</body>
<html>
<head>
<title>Struktur Dasar HTML</title>
<head>
<body>
Kawani Media
</body>
<html>
Hasilnya lebih menarik kan? jika kita ingin membuatnya maka sebelumnya kita tambahkan dulu Code CSS berikut pada Blog kita, ini Codenya :
.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%;
}
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%;
}
Setelah menambahkan Code CSS diatas cara mengunakannya ketika kita menulis sebuah artikel masuk ke tab html lalu tambahkan code dibawah ini:
<div class="code">
Konten code yang akan dibagikan
</div>
Demikian share saya kali ini, Jangan lupa Kritik, Saran dan Komentarnya, semoga bermanfaat!!! Salam Kawani.
Materi diambil dari berbagai Sumber
Diposting Oleh : Unknown
Anda sedang membaca artikel tentang Posting Cantik dengan Box Code. Anda diperbolehkan mengcopy paste isi blog ini, namun jangan lupa untuk mencantumkan link ini sebagai sumbernya. Beritahukan kepada saya jika ada Link yang rusak atau tidak berfungsi. Apabila suka dengan postingan ini silahkan di Like dan Share dengan tidak lupa Komentar dan Masukannya.
0 komentar:
Post a Comment