How add Hover effect to image with link for blogger


Lihat dan hitung, seberapa banyak aplikasi Android yang Anda instal di smartphone Anda? 

Pernahkah terbersit di benak Anda bagaimana cara membuat aplikasi-aplikasi tersebut?

Apakah Anda Saat Ini Ingin Sekali Bisa Bikin Aplikasi Android Sendiri? Seperti aplikasi game edukasi, media pembelajaran, aplikasi berbasis sensor, aplikasi multimedia, dan lain sebagainya?

Tetapi

1. Tidak Ngerti Coding
2. Tidak Tahu Computer Programming
3. Tidak Paham Bahasa Pemrograman Android
4. Dan Sama Sekali Bukan Lulusan IT?

Jangan Khawatir ...
Ternyata, bikin aplikasi Android itu SANGAT MUDAH, bahkan bagi Pemula sekalipun.

Sekarang Anda bisa bikin aplikasi Android dengan Cepat, bahkan TANPA HARUS CODING.

Tak peduli apapun latar belakang Anda, bikin aplikasi Android itu MUDAH, semudah bermain Puzzle.

Anda Hanya Perlu 4 Langkah berikut ini :

1. Drag & drop komponen-komponen yang dibutuhkan
2. Percantik tampilan aplikasi dengan mengatur layout dan desain tampilan
3. Susun blok-blok kode programnya, dan
4. Build aplikasi Anda jadi file instalasi *.APK

Lantas, Bagimana Cara Memulainya?
Mudah kok, karena sudah hadir untuk Anda Di Sini :


Video tutorial yang membahas cara membuat aplikasi Android dengan sangat MUDAH, CEPAT, & TANPA CODING menggunakan tools App Inventor 2. 
Images can tell thousands of words.We can customize performances of images as we like.This post shows you how to add Hovering effects to images with links.I added this effect to image using CSS easily.You can add this effect to your blog posts.Look at below image.It is just an image without any effects.


Now Hover below image.I added hovering effects to this image.It change the transparency of image.



Recommended Tutorials:-
  1. Change Blog title to 3D styled Header title
  2. Design Own Image Effect for Blogger Posts
  3. Create Rollover image Effect
  4. How to Set All links to open in New tab Easily


Add Hover effects on your blog


Step 1. Log in to your blogger account.
Step 2. Go to Template >> Edit HTML.
Step 3. Now find ]]></b:skin> tag.(tip:You can use Inbuilt searching tool)
Step 4. Paste below codes just above/before ]]></b:skin> tag.


a.linkop img
{
-moz-opacity:0.5;
-khtml-opacity:0.5;
filter:alpha(opacity=50%);
opacity:0.5;
}
a.linkop img:hover
{
-moz-opacity:1;
-khtml-opacity:1;
filter:alpha(opacity=100%);
opacity:1;
}

Step 5. Now save your Template.

When you want to add this image hover effect into any image with a link,paste below code on HTML section and make below changes.

<a class="linkop" href="http://bestlodge.blogspot.com/"  target="_blank"><img src="Image_URL"></a>

.....................................................................................................................................

Customization

.....................................................................................................................................

http://bestlodge.blogspot.com/-target URL of your image or any website
target="_blank"-Remove this code,if you don't want to open image/website in new tab.
Image_URL-Link of your image

That's all. Enjoy...!

Pengelola Blog : ABDUL WAHAB

Judul : How add Hover effect to image with link for blogger
Ditulis oleh : Kejutan Internet pada hari
Rating Blog : 5 dari 5
Terima kasih Anda telah membaca artikel tentang How add Hover effect to image with link for blogger
Anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel ini sangat bermanfaat bagi Blog dan teman-teman anda.
Namun jangan lupa harap memberikan link aktif dofollow yang mengarah ke URL ini ya
http://kejutaninternet.blogspot.com/2013/04/how-add-hover-effect-to-image-with-link.html

Dan Terima kasih sekali lagi atas kunjungan Anda.

Kritik dan saran atau apapun bisa anda sampaikan melalui kotak komentar.
Dan mohon maaf jika komentar atau pertanyaan tidak bisa cepat saya respon,
karena Saya tidak bisa selalu online selama 24 Jam.


Mau Di Buatkan Blog Siap Pakai Seperti Ini ?.

Artikel Terkait

Previous
Next Post »