Cara Membuat Efek Link Scrollover

Written by RA_Syihan on Friday, October 15, 2010 | Category: Trick, Tutorial

Sebetulnya ada beberapa macam dekorasi link ini dan pasti sudah banyak yang tahu, diantaranya ada efek blink, rainbow atau berganti-ganti warna, berubah warna apabila di sorot kursor mouse, berubah huruf dan lain-lain. Perbedaan dari scrollover ini yaitu sebuah link akan bergulung dari atas kebawah sekaligus berganti warna. Untuk warna anda dapat menyesuaikan sendiri sesuai dengan keinginan anda.
Lalu bagaimana triknya? Silahkan ikuti langkah-langkah berikut:

Login ke dashboard blogger anda, lanjutkan dengan klik Layout – Edit HTML. Jangan lupa untuk membackup template anda sebelum melakukan perubahan pada kode HTMLnya.
Cari kode <head> pertama pada template dan tambahkan kode berikut dibawahnya:

Setelah itu cari kode ]]></b:skin> dan tambahkan kode berikut diatasnya:

<style>
a.scrollover {
/* Warna pertama */
color: #557AFF;
}
a.scrollover em:first-line {
/* Warna kedua */
color: #FF5B3C;
}
</style>

Sesuaikan warna dengan selera anda. Untuk kode-kode warna dapat dilihat disini. Setelah anda menambahkan kode-kode diatas pada template anda, sekarang anda sudah dapat menggunakan efek scrollover tersebut. Jika anda membuat link biasa baik dalam posting atau membuat daftar link di sidebar dengan menggunakan HTML/Java script maka kodenya akan seperti ini:

Dan jika anda ingin menggunakan efek scrollover maka kodenya seperti ini:

Sebetulnya efeknya masih bisa diatur misalkan anda ingin mengatur kecepatan scroll ataupun arah scrollnya, tapi mungkin akan sedikit rumit karena anda harus mendownload scriptnya lalu mengedit dan mengupload kembali ke hosting anda sendiri. Untuk itu saya tidak akan menjelaskannya. Jika anda tidak berhasil atau ada masalah silahkan kontak saya baik melalui komentar ataupun shoutbox, selamat mencoba..

Tombol Dinamis Dengan CSS3

Written by RA_Syihan on Friday, October 15, 2010 | Category: CSS3, Trick, Tutorial

Setelah sekian postingan telah terupdate bukan mengenai CSS3 sekarang muncul lagi trik tentang CSS3. Mungkin banyak teman - teman saya yang menunggu postingan tentang css3 namun tidak saya tanggapi karena ada kesibukan offline namun sekarang saya berikan walaupun tidak banyak. Trik CSS3 kali ini tentang cara Tombol dinamis dengan CSS3, pada postingan sebelumnya mengenai Membuat Tombol Dengan CSS3 juga saya telah memberikan trik membuat tombol dengan CSS3, walaupun kedengarannya sama tapi bentuk dari tombolnya berbeda dengan yang sebelumnya.Sebenarnya saya sangat menyukai sekali dengan CSS3 namun karena keterbatasan waktu dan uang untuk online, postingan tentang CSS3 agak terlambat saya update di blog ini, makannya apabila sahabat oketrik ingin diberi tanggapan pertanyaan yang telah dikirim ke saya, Klik lah iklan yang ada di blog ini, hanya sekali klik saja loh ga ada ruginyakan? malah istilahnya beramal. Oke deh dari pada saya cuap-cuap lebih baik saya langsung jelaskan saja tentang Tombol dinamis dengan CSS3. Lihat demonya dulu yuk!

Demo

tombol dinamis 1

Trik Blog

Tutorial

tombol dinamis 2

Free Download

Free Blogger Template

Jasa Kami

Pembuatan Web/Blog

CSS Yang di pakai :

.tmbl{display:inline-block; background:url(btn.bg.png) repeat-x 0px 0px; padding:5px 10px 6px 10px; font-weight:bold; text-shadow:1px 1px 1px rgba(255,255,255,0.5); border:1px solid rgba(0,0,0,0.4); -moz-border-radius:5px; -moz-box-shadow:0px 0px 2px rgba(0,0,0,0.5); -webkit-border-radius:5px; -webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.5)}

.tmbl:hover{text-shadow:1px 1px 1px rgba(0,0,0,0.5); cursor:pointer}

.biru{background-color:#CCC; color:#141414}
.biru:hover{background-color:#00c0ff; color:#fff}

.hijau{background-color:#CCC; color:#141414}
.hijau:hover{background-color:#8aff00; color:#fff}

HTML yang di pakai :

<p>tombol dinamis 1 </p>
<div class="tmbl hijau">Trik Blog</div>
<div class="tmbl biru">Tutorial</div>
<div class="tmbl merah">Cheats</div>

<p>tombol dinamis 2 </p>
<div style="font-size:24px;">
<div class="tmbl hijau">Free Download</div>
<div class="tmbl biru">Free Blogger Template</div>
</div>

<div style="font-size:36px;">
<div class="tmbl hijau b2">Jasa Kami</div>
<div class="tmbl biru">Pembuatan Web/Blog</div>
</div>

Nah bagaiman Menarik bukan Tombol yang di buat dengan sentuhan CSS3? memang sich kalau dibandingkan dengan tombol yang di buat dengan jquery ataupun javascript lebih bagus tapi masing-masing mempunyai kelemahan tersendiri sekarang terserah sobat ingin memakai yang mana. Akhir kata Terima kasih dan Happy Blogging.
gambar oleh : http://free-css-menu.com

Membuat Tombol Dengan CSS

Written by RA_Syihan on Friday, October 15, 2010 | Category: CSS3, Trick, Tutorial

Alhamdulilah setelah belajar mengenai CSS3 akhirnya saya bisa mengplikasikannya kedalam template dan berusah untuk mencoba-coba akhirnya bisa juga membuat widget yang berfungsi untuk blog. Kali ini saya akan menjelaskan bagaimana cara membuat Tombol dengan CSS3. Namun pada kenyataanya trik ini belum begitu baik untuk diterapkan, lalu kenapa ente bagikan kepada kita? walaupun belum sempurna, tapi tidak salahkan kalau saya bagikan ke sobat semua? Nah kalau ingin melihat tombolnya, sobat lihat aja ke bawah ini.

Demos

Bagaimana lumayan bagus bukan?? nah kode css yang saya gunakan bisa sobat lihat di bawah ini

.tombol {
width: 200px;
height: 50px;
margin: -30px auto;
border: 2px solid #4F93CA;
background-color: #428CF0;
-moz-border-radius-topleft:20px;
-moz-border-radius-bottomright:20px;
-moz-box-shadow:0 20px 20px #428CF0;
background-image: -moz-linear-gradient(#1C5B9B 0%, #6CBFFF 90%);
-webkit-border-radius-topleft: 20px;
-webkit-border-radius-bottomleft: 20px;
-webkit-box-shadow:0 20px 20px #428CF0;
background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(#1C5B9B), to(#6CBFFF));
}

.tombol span {
text-shadow: 0px 1px 8px #2867A5;
font-family: Verdana;
color: #ffcc66;
font-size: 40px;
position: relative;
top: -5px;
left: auto;
}

dan kode HTML-nya dibawah ini

<div class="tombol"><span>Demos</span></div>

mungkin singkat sekali y kode HTML-nya. Walaupun simple tapi efeknya sob, gak nahan...!!! okelah kalau sobat ingin menanyakan sesuatu tentang trik ini, sobat bisa tinggalkan pesan di kotak komentar oke. sekarang saya akhiri dahulu.

sumber