Selasa, 07 Februari 2012

Membuat Url / Link Lebih Keren Dengan Css


Kali ini kita membahas CSS Lagi setelah sebelumnya membahas tentang Rahasia url gambar di blogspot / blogger dan juga Caption image with css3 and jquery, nah sekarang ada yang baru nih meskipun kodenya sudah cukup lama juga sih, tapi belum di bahas oleh para blogger jadi sekarang aku post nih trik nya walaupun hanya trik sederhana sih hehehehe namanya juga belajar semua pelajaran yang saya tau selalu saya sisipkan di blog ini karena sebagai pengingat di saat saya lupa, oklah kita lanjut, maksud dari membuat link keren dengan css ini adalah link yang sudah kita beri nama misalnya system of blog maka tidak akan ada tambahan lain selain nama system of blog nah setelah Link kita modif dengan css ini, maka secara otomatis akan ada di sampingnya URL dari Nama System Of Blog Tersebut, dan urlnya adalah http://sin1aja.blogspot.com/ nah seperti apa modelnya coba lihat screenshot di bawah ini

Cool Link With CSS

Coba anda perhatikan secara detail penjelasan dari gambar di atas, Udah Ngerti belum. . .?? kalau belum aku jelasin lagi, jadi itu url yang http://sin1aja.blogspot.com/ akan tampil otomatis di samping nama Link, jadi anda tidak usah repot - repot lagi kalau mau menuliskan URL secara manual karena dengan kemampuan CSS ini URL nya akan tampil sendiri.
nah jika anda masih bingung juga silahkan cek DEMO nya

DEMO

Nah udah liat kan DEMO - nya mudah - mudahan anda sudah mengerti ok cara membuatnya mudah banget silahkan paste kode di bawah ini di blog anda

<div class='sin1aja_blogspot_com'>
<a href="http://sin1aja.blogspot.com/">SYSTEM OF BLOG</a><br />
<a href="http://rawamangun18.blogspot.com/">BLOG DEMO</a><br />
<a href="http://blogazine7.blogspot.com/">ZIN - ZINE</a><br />
<a href="http://1000pikiran.blogspot.com/">G-ZINE 7</a><br />
</div>
<style type="text/css">
.sin1aja_blogspot_com {
padding:5px;
}
.sin1aja_blogspot_com a {
color:#eee; /* warna link */
text-decoration:none;
}
.sin1aja_blogspot_com a:after {
content: " ( " attr(href) " )";
color:#ddd;/* warna URL dalam kurung */
}
</style>

Jika anda ingin simpan di sidebar silahkan anda klik
Rancangan + Tambah gadget + Pilih HTML/Javascript + paste kodenya di kotak bagian bawah
Jika anda ingin simpan di postingan silahkan anda beralih dari mode Compose ke Mode Edit HTML setelah itu paste kode nya. jangan lupa ganti warna merah dengan URL link anda.