HTML mr. galau.com
Rasanya gatal jemari ini kalau nggak posting dan berbagi hasil utak-atik script untuk mempercantik blog. Sebelumnya Sakahayang sudah berbagi Bikin Textarea Cantik untuk Code. Bila sobat sudah ada yang mempraktekannya, apakah anda tahu textarea ada kelemahannya ?
Bila anda jeli, dalam textarea kita tidak bisa menulis code script yang ditampilkan dalam textarea berwarna merah atau style font lainnya seperti bold, italic dsb. Padahal dengan memberi warna pada code script ini sangat membantu para pembaca.
Dengan menggunakan tag div kelemahan itu bisa kita atasi dan hasilnya sama kerennya dengan menggunakan textarea. Berikut hasil utak-atik iseng DIV Keren untuk Tampilkan Code untuk mempresentasikan code script dalam konten blog.
- Login ke dasbor anda
- Pilih Template ==> Edit HTML => Lanjutkan tidak perlu mencentang Expand Template Widget
- Cari code ]]></b:skin>
- Copy code berikut dan paste tepat di atas ]]></b:skin>
- Ganti URL image background dengan image milik anda.
- Simpan template
- Tutup editor Template
.divkeren {background:#82cafa;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi69TydkJU77s2GwhDT3vuQM-l79ohn3eD2WB6fnKLdwQpVmnDN4Cx22TkSF5WliKofR1FdkpuJeqWsH9AutnPmUWBO6zFKIxsxL-HW4z-UsYs4GSbwLtyskCunwp205WUMbbMrKAOjabsy/s1600/sakahayangcode.gif);background-repeat:no-repeat;border:solid #B24700;color:#000;font:13px 'Courier New', Courier, monospace;line-height:16px;max-height:200px;min-height:16px;overflow:auto;width:90%;border-width:1px 1px 1px 20px;padding: 10px; text-align: left;}
.divkeren:hover{background:#82cafa} - #82cafah adalah kode warna background, bisa anda ganti dengan warna kesukaan anda, kode warna bisa lihat di halaman Color Code.
- Warna merah yang kedua adalah image transparan bisa menggunakan GIF atau PNG.
- 200px adalah tinggi div atau tinggi area untuk code script.
- Kemudian pada content page atau postingan anda tulis kode div
dengan mode HTML, sedangkan code scriptnya yang akan ditampilkan bisa
menggunakan mode Compose.
<div class='divkeren'>
sisipkan di sini code script yang akan di tunjukkan kepada pembaca blog anda.
</div>
- Selesai ,,,,
Tidak ada komentar:
Posting Komentar