Kamis, 22 Maret 2012

Membuat tag link terkeren dengan css3


Hohoho Judulnya sangat menggoda banget emmm nemu artikel dari InsertHtml yang membuat tag link dengan lebih indah dengan css, itu dalam artian saya lo memang gak nyambung sama judul post InsertHTML, tapi saya hanya menyambung judul post ini hehhee, di postingan ini saya hanya memodifikasi pada backgroundnya saja, saya menggunakan background linear-gradient biar lebih indah hehehee modelnya seperti gambar di bawah ini

Tag link terkeren dengan css

Hemmm begitulah modelnya gimana. . .? sekarang membuat tag gak perlu make' gambar dengan css juga bisa hehehe dari pada anda penasaran silahkan anda lihat demonya

DEMO

1. Masuk di blog anda
2. Klik Rancangan
3. Klik Edit HTML
4. Cari kode ]]></b:skin>
5. Simpan kode di bawah ini di atas kode ]]></b:skin>

#SystemOf_TagMenu {
padding: 10px;
padding-left: 30px;
background: -moz-linear-gradient(left, #3dbc34 0%, #089316 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#3dbc34), color-stop(100%,#089316));
background: -webkit-linear-gradient(left, #3dbc34 0%,#089316 100%);
background: -o-linear-gradient(left, #3dbc34 0%,#089316 100%);
background: -ms-linear-gradient(left, #3dbc34 0%,#089316 100%);
background: linear-gradient(left, #3dbc34 0%,#089316 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3dbc34', endColorstr='#089316',GradientType=1 );
color: #FFF;
text-decoration: none;
margin: 15px;
font-family: "Times new roman";
font-size: 15px;
line-height: 1.5
}

#SystemOf_TagMenu:after {
content: "";
width: 0;
height: 0;
border: 19px solid;
border-color: transparent transparent transparent #089316;
position: absolute;
margin-top: -8px;
margin-left: 10px
}

#SystemOf_TagMenu:before {
content: "";
width: 0;
height: 0;
border: 7px solid #CCC;
position: absolute;
margin-top: 5px;
margin-left: -25px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px
}

#SystemOf_TagMenu:hover {
background: #070
}

#SystemOf_TagMenu:hover:after {
border-left-color: #070
}


6. Klik SIMPAN TEMPLATE

7. Cara pemanggilannya / penggunaanya

Simpan kode di bawah ini di dalam sidebar dengan menambahkan Gadget HTML/Javascript, di postingan juga bisa dengan beralih ke mode EDIT HTML bukan COMPOSE

<a href='#' id='SystemOf_TagMenu'>HOMEPAGE</a>

Lihat kode id='SystemOf_TagMenu' tambahkan kode itu setiap anda ingin menggunakan Tag Link gak susah kan, nah jika anda ingin menggunakan lebih dari satu link anda hanya tinggal menambahkan lagi kode pemanggilnya, untuk desain warnanya silahkan ganti jika anda merasa kurang srek dengan warna yang ada.