0
comments
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:
Terlihat lebih menarik dari sebelumnya(menurut saya hee..), jika anda ingin membuatnya silahkan anda tambahkan code css berikut pada website blogger anda:
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.
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>
<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%;
}
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.
