Tuesday, September 7, 2010

Animasi Hover Untuk Link Tertentu


Selamat Pagi Sahabat DJ Site Semua,

Semoga anda Semua tetap Dalam keadaan baik hhe.... Potingan ini Jujur bener-bener gak sengaja keluar haha..... soalnya tadinya hari ini saya mau cerita doank, tapi besok aja lah ceritanya haha... Nah, kenapa saya bilang postingan ini gak sengaja keluar? karena Idenya dateng setelah saya bikin 1 postingan reQuest di Blog Sejarah (biasa Anak-anak SMP dan SMA lagi pada getol Ngerjain Tugas sejarah jadi pada nyasar kesitu dan berhubung saya Admin Blog itu juga ya saya Penuhi dulu janji saya hhe). Sebenernya reQuestnya gak ada nyambung-nyambungnya sama Blog ini Soalnya yang di ReQuest kan Sejarah Indische partij dan yang mau saya posting pagi ini masih berbentuk tutorial. Tapi waktu bikin Link Lestarikan Sejarah Bangsa Kita!! diakhir postingan blog itu, Ide ini mendadak muncul, Ide apaan? Link dengan Animasi Hover. Sebenernya penerapan Link Animasi Hover ini harusnya untuk semua Link, tapi berhubung saya gak terlalu suka dan lebih suka untuk link-link tertentu sebagai penekanan makanya saya cuma bikin untuk Link yang saya mau kasih. Dan saya pikir kenapa gak sekalian saya kasih aja ke Anda.

Demonya ke Blog Sejarah aja ya klik DISINI, terus masuk kepostingan paling atas tentang Sejaran Indische Partij dan arahkan Kuesor anda ke tulisan paing bawah, Persis kaya gambar diatas deh pokoknya(Klo gak disentuh Kursor Warna biru dan klo diarahkan Kursor Berubah merah), Udah deh gak usah lama-lama, langsung aja ya:

1. Login dengan akun Blogger anda masing-masing(jangan pake Punya orang ya haha)
2. Sampai di Dasbor Pilih Rancangan atau Design
3. masuk ke Edit HTML(centang Expand Template Widget-nya)
4. Biar aman Save Dulu deh mendingan templatenya(takutnya anda gak percaya sama saya wkwkw)
5. Cari Kode Dibawah ini

]]></b:skin>

6. Udah ketemu? Masukkan Script CSS dibawah ini tepat diatas Kode ]]></b:skin>

a.animacss3 {
font:12px Trebuchet MS;
font-weight: bold;
text-decoration: none;
color: blue;
cursor: pointer;
-webkit-transition: all .85s ease;
-moz-transition: all .85s ease;
-o-transition: all .85s ease;
transition: all .85s ease;
}
a.animacss3:hover {
color: red;
text-shadow:1px 1px 2px #000;
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
text-decoration: underline;
background: #CCC;
}


7. klo udah save template anda

Dan untuk manggilnya anda bisa menggunakan Ini:

<a class="animacss3" href="http://dj-site.blogspot.com.blogspot.com">DJ Site</a>

Taruhnya ya di Edit HTML postingan anda klo mau taruh di postingan, pokoknya suka-suka terserah anda, dan warnanya fontnya juga silahkan sesuaikan aja dengan keinginan anda, saya pake warna Biru dan merah karena blog sejarah saya kebanyakan menuju merah haha....

* Karena saya masih belum terlalu Ngerti beda CSS sama CSS3 itu apa jadi di judulnya saya belum berani bilang itu CSS3, klo Bang Hendro bilang itu CSS 3 baru di judul saya tambahin......

Buat Sahabat DJ Site Semua Happy Blogging 'N Met Aktivitas hhe....


39 komentar:

yudex said...

pagi sob.. :)

aku gak mau kalah sama kamu, besok aku juga mau ngasih tutorial.. "tutorial membuat bayi" hahahaha..

Nuy said...

waah sekarang sering ngasih tutorial yah, hebaaat.. =D

riesta said...

wah,,,tiap hari ada tutorial baru ya....
tapi knapa gak ada 1 pun yang aku ngerti ya....
puyeeeeng...hehehehe

dindasaurus said...

hmmmmmmm.aku mau bkn tutorial tp takut menyesatkan hehe.hmm kayaknya ak mau bkn tutorial:CARA MUTILASI ORANG deh 8DDDD

narti said...

cara manggilnya begitu bener ya?
duh edit html lagi....gi pusing nih...

sda said...

warna background bisa diganti2 juga ya? keren nih...
tapi kapan nyobanya?
makasih tutorialnya.

riesta said...

hehehehe,,,bukan blog yg ini kok...
blog ku yg jadul,,yg 1 lagi dan ancur gara2 kuotak-atik...hehehe

sebenernya tutorialnya gampang siy,,,cuma aku puyeng duluan liat kode2itu..hehehehe

Asis Sugianto said...

Jadi linknya berubah warna gitu yah sob???? menarik banget tipsnya.... tapi lagi males ngutak atik HTML kode nih sob, kapan-kapan aja saya coba, izin save kodenya dulu yach sob...

mixedfresh said...

baru tau yang namanya animasi hover ni, hehe
pengen juga ikut nyoba2, moga2 ga eror
udahan dulu ya, mau baca2 blog dj site yang satunya

indobrad said...

tampilan yang sederhana, tapi kok mbikinnya rumit ya? hehe *gaptek akut*

Manchester United Tech | Berita Sepak Bola said...

wah, sekarang post tentang Tutorial yah..mantep nih sob..

maaf baru bisa mampir sob, makasih udh share nih n happy blogging aja

digendong google said...

tutornya dari kemarin 'tema merangsang' terus.. merangsang link dengan mouse..wkwkwk.. gada span, ada webkit, hmm.. aroma css3, gatau juga ding.. ga mudeng2 amat :D .email '9matahari' wis ku send. matur nuwun.. mo mandiin kebo dulu.. chiaaat..byur

oempak said...

boleh jg nih kawan, editan css nya, hmm... bwt ngasi modifikasi link nih, asik

blog anak smp ganti baju said...

benul pak, itu lagi efeknya doang. katanya konvertan dari tmp wp.. belum tak mutilasi babar blas, mo mudik dulu ke seberang 'got' -haiyah- lha mbok dari dulu kasih tutorial.. jadi saia bisa gampang nyari contekannya.. permizi disik, naik bemo ~mbreem, mbreem~ ..

Corat - Coret [Ria Nugroho] said...

oh iya udah ke TKP bagus juga kalo bisa ganti warna gtu ya ^^

btw blognya udah bisa nih make chrome
kemaren2 kalo aku buka blog kamu pasti gak bisa kebuka kalo make chrome

blogger admin said...

waduh blognya berat sob..

nah kalu ini css3 kan terlihat di transform dengan scale yang menambahkan pembesaran,di tambah skew, rotate, origin juga bisa..pokonya mantep sob..

berpikir positif said...

iya aku lihat tadi sob memang bagus tampilannya , wah mau libur ya sob iya aku mau liburan juga lusa besok mungkin masih ngeblog

Menjadi blogger Yang Bahagia said...

aku akan coba pake in di blog aku yang lain sob

windflowers said...

tar edit2nya ah..skrg gi aga bingung heheh...thanks ya...:)

Herdoni Wahyono said...

Tambah ilmu lagi nih aq, trims tutorialnya sobat. Salam sukses dari lereng Gunung Lawu. Happy and enjoy selalu sobat.

Karlz said...

dengan adanya CSS3 jadi lebih mudah untuk mempercantik blog.. nnt d coba dech.. bny yg perlu d ganti nich

Sukses slalu sob.. btw mudik ga nich sob

Djangan Pakies said...

Met siang Kang, makin keren aja ilmu tutornya hhhh.
Tentang Pakies Note, masih mikir dulu. Ngurusi si Djangan aja belum maksimal.
Oke sob, met berkarya, met bekerja, met tidak mudik (lho) ..........

tomo said...

wah ini menarik kawand.aku belum mengetahui

uswah said...

berkunjung sore

hikmah said...

salam ukhuwah saja

Takuya said...

hah? itu manggil apaan? xixixixixi.. kalo udah dipanggil bisa disuruh bikinin es kelapa g yaaaa *emgnya pembantu, bletak!*

suwune said...

dari muncul balon dan ada lagi seperti ini ya, tak coba ah pa tahu bisa di wp, suwun kang

cHugy - gOgOg said...

Keren juga brader....link hover ng CSS3 kapan2 saya coba .... di save dulu brader kodenya.

Topi said...

Oh jadinya seperti itu ya sob , ngomong 2 warnanya bisa di ubah g' ?

syahida said...

Keknya mulai merambah tutorial blog ya shob ... but that's all very nice .. pokoknya OK'S banged..

Eka Ninjitsu said...

Sekarang sudah malam Sobat hehehe... Met malam yah...

Rizky2009 said...

sementara saya save dulu sob nanti kl inet saya dah lancar lg akan saya test

infoponsel said...

TerimAKASIH INFO Link dengan Animasi HoverNYA

Tihang said...

Ampun dech kl css3 ama html5, ini pelajaran br buat saya, punya rekomendasi tempat belajarnya gak fer ?....

om rame said...

mirip-mirip sama yang kemaren yah, cuma beda pada penempatan baLonnya aja.
Langsung ngebLank kaLo baca tutor CSS, apaLagi bedanya. hehehe...

atanotonogoro said...

hei hei hei aku udah main ke blog sejarah, aku ngerti kok maksudnya yang mana. tapi aku justru pengen tau itu gimana deh poto bisa ngambang-ngambang gitu *halah bahasanya ngambang. hahaha pokoknya gimana caranya bisa bikin poto gerak gitu? udah ada tutorialnya belom? mau dong. thankyou.

Gaphe said...

aduuh.. seperti biasa saya yang gaptek ini tidak memahami ini semua... minta tolong donk, dibikinin aja.. Gyahahahahahaa. Kayak pesen es teh aja..

Djangan Pakies said...

Taqabbalallahu minna waminkum, semoga segala amal ibadah kita diterima Allah SWT. Selamat Idul Fitri 1431 H, mohon maaf lahir batin

tiwi said...

ass...weleh2...apaan tuh? ora mudeng!..he3..ohya mau ngucapin Selamat Idul Fitri,mhn maaf ats sgl khilaf dlm penulisan selama ini....tq...

Visit the Site

Butuh template blog ini? monggo DOWNLOAD DISINI

Yahoo bot last visit powered by MyPagerank.Net Msn bot last visit powered by MyPagerank.Net Internet Blog Directory Computers Blogs

IBX582988F60A263

Matur suwun sanget wes neympet-nyempeti mampir dulur-dulur Blogger dan Netter sekalian