Tips Membuat Border Hover Menarik Pada Posting Artikel ( 2 )

Membuat tampilan border pada suatu area text tertentu yang unik sangatlah menarik sekali. Contohnya seperti dibawah ini ada tampilan border versi yang lainnya, dan bagaimana cara pembuatannya? kali ini saya unduh dari om subagya nih, cuman berbekal telaten dan sering berkunjung ke rumah-rumah tetangga HeHeHe. Ya maklumlah namanya kita saling belajar dan bertukar informasi ok. Dan berikut ini mari kita terapkan dalam aplikasi CSS blog kita.


Nah sekarang ikuti langkah berikut ini :

1. Login blog anda

2. Edit HTML, janga lupa di backup dahulu "Download Full Template"

3. Setelah itu cari kode berikut --> ]]></b:skin>

4. Kemudian copy-paste kode dibawah ini diatasnya kode ]]></b:skin>

.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;

}

]]></b:skin>

5. Setelah itu save template

Sekarang untuk implementasinya adalah seperti ini --><code>area text yang akan diborder</code>

Atau contohnya seperti ini :

<code>

.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;

}

</code>

source : subagya