Anda mungkin telah melihat efek berguling Gambar di banyak blog profesional dan komersial. Dengan berguling Maksud saya, ketika Anda membawa kursor mouse Anda pada gambar, gambar perbatasan warna, dan gaya / penampilan perubahan. Baik menggunakan CSS sederhana Anda dapat menambahkan beberapa efek menakjubkan Blog Anda Images. Tanpa membuang waktu memungkinkan langsung menuju langkah-langkah yang harus diikuti.
and then you will need to add a small HTML code like class="xyz" to the image">Tutorial ini menggunakan pola sederhana untuk menambahkan kode yaitu Pertama, Anda akan perlu menambahkan kode CSS tepat di atas ]]> dan kemudian Anda perlu menambahkan kode HTML kecil seperti class = "xyz" ke foto kode dalam posting Anda.
seperti contoh nya, bisa anda lihat di sini >>klik disini<<
Cara menambahkan Top 10 Amazing Gambar Mouse Hover Effects Untuk Blogger?
Untuk melakukannya ikuti langkah berikut,
1. Layout > Edit HTML">Pergi ke Blogger> Layout> Edit HTML
2. ">Search for ]]>
3. ">Dan sekarang sisipkan salah satu pilihan Anda CSS: kode tepat di atas ]]>
Sekarang setiap kali Anda menulis suatu posting, cukup meng-upload gambar di blogger anda Editor dan kemudian beralih ke mode Edit HTML lalu cari kode ini
Number #1
CSS:
.simple1 {
padding:5px;
border:1px solid #ccc;
}
.simple1:hover {
padding:5px;
background-color:#ccc;
}
HTML:
class="simple1"
Number #2
CSS:
.simple2 {
padding:5px;
background-color:#ccc;
border:1px solid #ddd;
}
.simple2:hover {
padding:5px;
background-color:#eee;
border:1px solid #666;
}
HTML:
class="simple2"
Number #3
CSS:
.black-white {
padding:5px;
border:1px solid #ccc;
}
.black-white:hover {
padding:5px;
background-color:#fff;
border:10px solid #000;
}
HTML:
class="black-white"
Number #4
CSS:
.dashed {
padding:5px;
border:1px solid #ccc;
}
.dashed:hover {
padding:5px;
background-color:#fff;
border:2px dashed #000;
}
HTML:
class="dashed"
Number #5
CSS:
.top-bottom {
padding-top:5px;
padding-bottom:5px;
border-top:3px solid #ddd;
border-bottom:3px solid #ddd;
}
.top-bottom:hover {
background-color:#fff;
border-top:3px solid #000;
border-bottom:3px solid #000;
}
HTML:
class="top-bottom"
Number #6
CSS:
.curtain {
padding-top:10px;
padding-bottom:10px;
border-top:2px solid #ddd;
background-color:#000;
border-bottom:2px solid #ddd;
}
.curtain:hover {
background-color:#fff;
border-top:3px solid #000;
border-bottom:3px solid #000;
}
HTML:
class="curtain"
Number #7
CSS:
.red {
padding:5px;
border:1px solid #ccc;
}
.red:hover {
padding:5px;
background-color:#E71305;
border:10px solid #ddd;
}
HTML:
class="red"
Number #8
CSS:
.Fadein{
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.Fadein:hover{
filter:alpha(opacity=50);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
HTML:
class="Fadein"
Number #9
CSS:
.Fadein2{
filter:alpha(opacity=50);
-moz-opacity: 0.30;
opacity: 0.30;
border:2px solid #000;}
.Fadein2:hover{
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:2px solid #000;
}
HTML:
class="Fadein2"
Number #10
CSS:
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{
position: absolute;
background-color: #7AA1C3;
padding: 0px;
left: -1000px;
border: 1px solid gray;
visibility: hidden;
color: white;
text-decoration: none;
}
.thumbnail span img{
border-width: 0;
padding: 0px;
}
.thumbnail:hover span{
visibility: visible;
top: 0;
left: 5px;
}
HTML: For knowing how to apply this popping effect in detail read this post –> Image Pop-up Effect
Anda dapat menikmati bermain dengan kode ini MBT menggunakan HTML Editor. Saya harap Anda akan menemukan tutorial ini sangat berguna dalam lebih meningkatkan cool blogging experience
Terdapat 0 komentar:
Posting Komentar