Home Effects Blogger Trik Blogger Mempercantik Gambar Dengan Style CSS

Mempercantik Gambar Dengan Style CSS

Unknown Jumat, 15 November 2013 82 komentar Print

Mempercantik Gambar Dengan Style CSS

Untuk membuat tampilan blog menarik juga enak di pandang mata maka harus berupaya
Dan berusaha walau keberadaanya tidak ada kaitanya dengan SEO namun stidak nya
Tutorial ini akan memperbaiki sekor di Chkme, karena script yang akan saya publikasi
Pada pertemuan kali ini, sengaja saya lengkapi dengan title , alt dan caption pada gambar
Di blog anda. Dan tentunya selain lebih SEO sudah pasti lebih menarik dengan effects
Style CSS yang sekarang yang akan saya share untuk sobat blogging silahkan di simak

Sebelum melanjutkan tutorial ini silahkan untuk melihat demo di bawah ini :

DEMO

Untuk membuat Gambar di blog lebih bervariatif unik, appear attractive style
Yang akan menghiasi homepage blog anda tentunya script ini bisa bermanfaat
Buat anda yang berminat mendesain tampilan yang baru dengan gaya artistic
Nah untuk memasang scripts diatas silahkan anda simak berikut di bawah ini

Cara memasangnya :

Sign in di accaount blog anda masuk dasboard, pilih template lalu pilih edite template
Cari kode <head> tekan Ctrl + f untuk memudahkan pencarian kodenya. copy kode
CSS di bawah ini kemudian anda pastekan kodenya tepat di bawah kode <head>

<style type="text/css">.mode8{
border: 3px solid #F7A808;
border-style:double;
margin:10px auto;
text-align:center;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
padding-top:5;
padding-left:5;
padding-bottom:5;
padding-right:5;
}
.mode8:hover{
-webkit-transform:rotate(720deg) scale(2,2);
-moz-transform:rotate(720deg) scale(2,2);
-o-transform:rotate(720deg) scale(2,2);
-ms-transform:rotate(720deg) scale(2,2);
transform:rotate(720deg) scale(2,2);   
}</style>
<style type="text/css">
.mode12{
    box-shadow: 1px 1px 13px 3px rgba(0,0,0,0.5);
    border-radius:0;
    -moz-border-radius:0;
    -webkit-border-radius:0;
    -o-border-radius:0;
}
.mode12:hover {
    border-radius: 33px 0 30px 0;
    -moz-border-radius: 30px 0 30px 0;
    -webkit-border-radius: 33px 0 30px 0;
    -o-border-radius: 33px 0 33px 0;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
}</style>
<style type="text/css">
.mode6 {   opacity:0.5;   filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);   -moz-opacity:0.5;   -khtml-opacity:0.5; } .mode6:hover {   opacity:1.0;   filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);   -moz-opacity:1.0;   -khtml-opacity:1; }
</style>
<style type="text/css">
.mode13 {-webkit-transition-duration:.4s;}
.mode13:hover {filter: alpha(opacity=60);opacity: .9.9;border-radius:50px;border: 1px #FF66CC;-webkit-box-shadow: 0px 0px 20px #FF66CC;-moz-box-shadow: 0px 0px 20px #FF66CC;}</style>

Setelah penerapan kode CSS nya terpasang dengan benar klik save - simpen template

Untuk memasang effects pada gambar copy kode Html, di bawah ini pada saat anda membuat
Artikel baru, disini saya memberikan 4 karakter effects gambar dengan CSS dan nantinya anda
Tinggal memilih tampilan dengan keunikan 4 karakter effects style CSS copy kode di bawah ini
Pada artikel blog baru anda, pada posisi mode HTML, jangan pada kolom compose

Copy - paste kode Html di bawah ini di artikel baru blog anda :

<div class="separator" style="clear: both; text-align: center;"><img alt="Mempercantik Gambar Dengan Style CSS" class="mode6" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3OC2822VilNfnmfnjTPPnNdpueQClwJZt4YlkgZ4RAoirQGQIMA28Kz5ohf4IJPo2ZtBcphrdKlDA_AXwtp5wXF37IP2id-py6J_W5N8yQHfQUyB5NzDIVQZbR884SWzn3j2nfWqWB6U/s1600/DEMO2.jpg" title="Mempercantik Gambar Dengan Style CSS" width="320" /></div>

Keterangan kode diatas :

Yang berwarna Biru ganti dengan tag Alt - Title atau dengan judul artikel anda
Yang berwarna Merah silahkan ganti dengan URL Gambar, yang anda sukai
Yang berwarna Hijau silahkan sesuaikan gambar sesuai yang anda kehendaki
Yang berwarna Orange, pilihan number Effects ganbar kode nya ada 4 mode
Setelah semuanya tertata dengan benar silahkan anda publikasi artikel barunya

Kesimpulan :

Ada 4 jenis karakter effects CSS ini contoh lists nya seperti di bawah ini

* Mode8 = Effects rotasi spining atau berputar kemudian Zoom
* Mode12 = Effects Ketupat melengkung atas, kanan bawah border
* Mode6 = Effects Fade in gambar menjadi blur ligth di sorot mouse
* Mode13 = Effects Melingakar bundar menyerupai gelembung baloon

Demikianlah artikel saya semoga bermanfaat buat anda semua...

Advertisment 300 x 250

82 Response to "Mempercantik Gambar Dengan Style CSS"

Intan Sudibjo

15 November 2013 pukul 10.20

wuss.. pertamax hehe.
btw itu foto yang ada di demo siapa ya mas? :D
mungkin saya akan terapkan style nya mas lain waktu, tipsnya keren mas mantap! :)

Mempercantik Gambar Dengan Style CSS