Mempercantik efek hover pada link

Pengertian hover:

Secara sederhana pengertian fungsi hover adalah merubah beberapa variable dalam blog/template ketika cursor berada di atas bagian tersebut. Variabel yang biasanya diterapkan sebagai hover adalah : background (baik background color ataupun background image), border, warna font, jenis font dan tebal font serta fungsi text decoration (pada link). Sumber : http://gubhugreyot.blogspot.com

Nah yang sekarang kita bahas adalah efek hover pada link, Berikut:
Sebelumnya buka dasbor > rancangan > edit html
Ingat! kode yang kita edit adalah:

a:hover {
color:$titlecolor;
text-decoration:underline;
}

- Mengubah warna font pada link saat hover
Lihat kode ini:

a:hover {
color:$titlecolor;
text-decoration:underline;
}

Lalu ubah kode yang berwarna merah menjadi: color:Kode warna;
Contoh: color:#999;
Contoh hasilnya bisa anda liat dilink menu diatas blog ini

- Membuat tulisan link menjadi kelap kelip saat hover
Lihat kode ini:

a:hover {
color:$titlecolor;
text-decoration:underline;
}

Kode yang berwarna merah diganti dengan kode ini: text-decoration:blink;
Contoh: tes

- Membuat link menjadi berubah rotate saat hover
Lihat kode ini:

a:hover {
color:$titlecolor;
text-decoration:underline;
}

Lalu tambahkan kode berikut sebelum tutup kurung (})

-moz-transform:rotate(7deg);
-o-transform:rotate(7deg);
-webkit-transform:rotate(7deg)

Hasilnya dapat dilihat pada blog saya yang pertama >> TOP
Link akan miring saat cursor mouse diarahkan ke link

7deg adalah derajat rotate

Sampai disini dulu sebenarnya masih banyak efek hovernya tapi karena terlalu panjang saya stop sampai disini dulu! semoga berhasil

Readmore..

CSS3 : Multi-column Layout

Akhirnya bisa post lagi tentang css3 . Sesuai dengan judulnya kita akan membahas tentang Multi-column Layout yaitu membuat beberapa kolom layout. Tapi sayangnya Multi-column Layout hanya didukung oleh browser Mozilla dan Safari 3.

Contoh:

Akhirnya bisa post lagi tentang css3 . Sesuai dengan judulnya kita akan membahas tentang Multi-column Layout yaitu membuat beberapa kolom layout. Tapi sayangnya Multi-column Layout hanya didukung oleh browser Mozilla dan Safari 3.

Akhirnya bisa post lagi tentang css3 . Sesuai dengan judulnya kita akan membahas tentang Multi-column Layout yaitu membuat beberapa kolom layout. Tapi sayangnya Multi-column Layout hanya didukung oleh browser Mozilla dan Safari 3.

Bukan hanya 2 dan 3 kolom tapi juga bisa 4 atau lebih.
Contoh:

Akhirnya bisa post lagi tentang css3 . Sesuai dengan judulnya kita akan membahas tentang Multi-column Layout yaitu membuat beberapa kolom layout. Tapi sayangnya Multi-column Layout hanya didukung oleh browser Mozilla dan Safari 3.

Kode yang saya gunakanan:
<style>.MCL {-moz-column-count: 3;-moz-column-gap: 1em;-moz-column-rule: 1px solid black;-webkit-column-count: 3;-webkit-column-gap: 1em;-webkit-column-rule: 1px solid black;}</style>
<div class="MCL"><p>Akhirnya bisa post lagi tentang css3 . Sesuai dengan judulnya kita akan membahas tentang Multi-column Layout yaitu membuat beberapa kolom layout. Tapi sayangnya Multi-column Layout hanya didukung oleh browser Mozilla dan Safari 3.</p></div>

Catatan:
1.Kode yang berwarna merah adalah jumlah kolom
2.Kode yang berwarna orange adalah tulisan yang ingin dimunculkan

Readmore..

CSS3 : Transform rotate (mengatur rotation tulisan dan gambar)

Bismillah, Lagi lagi saya membahas tentang CSS3, yang kita bahas adalah Transform rotate yang digunakan untuk mengatur rotation tulisan dan gambar. Efek ini bisa membuat tulisan atau gambar terbalik dan miring. Didalam efek ini kita menggunakan satuan deg atau degree yang artinya derajat.

Screenshot :
K-blogger

Kode Css yang saya gunakan:

-moz-transform:rotate(180deg);
-webkit-transform:(180deg);
-o-transform:(180deg);
-icab-transform:(180deg);
-khtml-transform:(180deg);

Sebagai contoh saya akan membuat Transform rotate pada post:
1. Cari code berikut:

.post {
font: 13px trebuchet ms;
margin-bottom:15px;
text-align:justify;
color: #000000;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-top: 0px;
}

2. Lalu tambahkan code berikut dibawahnya

.post rotate {
-moz-transform:rotate(180deg);
-webkit-transform:(180deg);
-o-transform:(180deg);
-icab-transform:(180deg);
-khtml-transform:(180deg);
}

3. Lalu save

Cara menggunakannya : <rotate>K-blogger</rotate>
Catatan: code yang berwarna merah adalah derajat rotatenya :)

Selamat mencoba!!!

Readmore..

RGBA Effect

Bismillah, Sekarang kita akan membahas tentang RGBA Effect yang juga termasuk dalam css3.
RGBA pada versi css sebelumnya disebut RGB (Red, Green, Blue) lalu pada versi css3 ditambah alpha atau opacity.
Contoh hasil penggunaan RGBA Effect:
Awal:






Menjadi:






Code yang saya gunakan adalah "background: rgba(0, 100, 110, .3);"
Nilai 0 adalah Red (R)
Nilai 100 adalah Green (G)
Nilai 110 adalah Blue (B)
Nilai 3 adalah Alpha (A)

Contoh pembuatannya:
1. Upload 1 gambar ke post
2. Klik tab edit html pada post
Lihat code berikut:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="Link gambar"><img style="float: left; margin: 0pt 10px 10px 0pt; cursor: pointer; width: 230px; height: 98px;" src="Url Gambar" alt="RGBA Effect" border="0" /></a>
3. Tambahkan code background: rgba(0, 100, 110, .3); disamping code yang berwarna merah
4. Terbitkan entri/simpan

Catatan :
Code RGBA adalah "rgba(Red, Green, Blue, Alpha)"
Jika belum jelas silahkan koment

Readmore..

Memberi efek shadow pada image/gambar

Bismillah, Merdeka! Merdeka! Merdeka!
Sebelumnya saya telah membahas tentang Memberi efek shadow pada text/tulisan karena menurut saya masih kurang jika hanya untuk text/tulisan saja. maka saya menulis post tentang Memberi efek shadow pada image/gambar (kayak mau pidato aja wkwkwkwk).
contoh hasilnya: (Sebenarnya juga bisa menggunakan MsWord 2007)

Logo google.co.id

Langsung saja caranya:
1. Masuk dasbor ->> Rancangan ->> Edit html
2. Cari kode berikut:

.post img {
margin: 0px;
padding:0px;
border:0px;
}

3. Lalu tambahkan kode berikut sebelum }

-webkit-box-shadow: 3px 3px 8px #777;
-moz-box-shadow: 3px 3px 8px #777;
box-shadow: 3px 3px 8px #777;

4. Maka setelah ditambahkan kodenya menjadi:

.post img {
margin: 0px;
padding:0px;
border:0px;
box-shadow: 3px 3px 8px #777;
-webkit-box-shadow: 3px 3px 8px #777;
-moz-box-shadow: 3px 3px 8px #777;
}

5. Save template
Ctt:
1.Setiap anda mengupload gambar atau memasukkan gambar ke post anda maka efek shadownya akan muncul.
2. Efek ini belum berfungsi di IE(Internet explorer)

Readmore..