Menampilkan kode HTML/Javascript yang unik di postingan (2)

Sesuai dengan judul titlenya (Menampilkan kode HTML/Javascript yang unik di postingan (2)), kali ini saya akan membuat blogger trick bagaimana menampilkan kode HTML/Javascript berbeda dengan versi sebelumnya, jika belum pernah baca versi sebelumnya silahkan klik di sini. Kalau mau lihat perbedaannya perhatikan contoh di bawah ini:

Versi 1 :

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

Versi 2 :

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}


Perhatikan perbedaanya ketika mouse di arahkan ke text area versi 2 warna backgroundnya berubah!!!

Blogger trick ini sangat simple sekali untuk kita aplikasikan di blog kita,mau tahu cara buatnya?

1. Seperti biasa login terlebih dahulu ke blogspot, kemudian masuk ke Tata Letak > edit HTML

Jangan lupa simpan template lengkapnya, klik Download Template Lengkap!!

2. Setelah itu cari kode ini ]]></b:skin> kemudian masukkan kode di bawah ini sebelum kode tersebut :


.post code {
font-family: 1.2em 'Courier New', Courier, Monospace;
display:block;
overflow: auto;
text-align: left;
padding: 10px;
color: #444E1F;
background-color: #F7BE81;
border-top: 2px solid #D0EC98;
border-right: 1px solid #D0EC98;
border-bottom: 1px solid #D0EC98;
border-left: 1px solid #D0EC98;
}
.post code:hover {
background-color:#F6E3CE;
}


Kemudian simpan hasil pekerjaan sobat.
3. Untuk mengaplikasikannya ke dalam postingan, sobat tinggal menaruh kode HTML/Javascript di antara <code> Kode HTML/Javascript </code> di mode edit HTML.
Contohnya :

<code> Kode HTML/Javascript </code>


Kalau berhasil berarti sobat orang yang beruntung, kalau gagal kasihan deeh loooh....!!!! Ok, sobat blogger nanti kita sambung lagi dengan blogger trick lainnya, happy blogging and have anice weekend :D