Kumpulan Efek Gambar Pada Postingan Blog Dengan CSS3

Setelah kemarin posting tentang Cara Memasang Rating Bintang Rich Snippets Pada Blogspot Kali ini lanjut lagi share tentang Kumpulan Efek Gambar Pada Postingan Blog Dengan CSS3. Efek gambar pada postingan blog, pastinya akan membuat blog lebih enak dipandang mata. Seperti yang kita tahu, ada banyak macam dan cara untuk membuat efek pada gambar di postingan blog, salah satunya yaitu efek image dengan JQuery, tapi yang akan saya bahas disini yaitu efek image dengan CSS3. Dibawah ini merupakan kumpulan efek-efek gambar pada postingan blog yang bisa saya kumpulkan.

Wuookeee.. langsung saja praktek sob !!
1. Login blogger
2. Pergi ke Edit HTML
3. Beri ceklist pada Expand Widget Templates
4. Cari kode CSS .post img dan .post img:hover, bila ada kode tersebut ganti/replace dengan kode yang saya siapakan dibawah. Tapi bila tidak ada kode seperti diatas, tinggal paste'kan saja diatas kode ]]></b:skin>

DEMO : Arahkan mouse ke gambar dan lihat efeknya.
Dan berikut adalah KODE CSS beserta DEMO untuk efek gambar pada postingan blog :

.post img {
    box-shadow: 0 3px 6px rgba(0,0,0,.25);
    transform:  rotate(+2deg);
    -o-transform: rotate(+2deg);
    -webkit-transform:  rotate(+2deg);
    -moz-transform: rotate(+2deg);
}
.post img:hover {
    box-shadow:  0 3px 6px rgba(0,0,0,.5);
    transform:  rotate(-1deg);
    -webkit-transform:  rotate(-1deg);
    -o-transform:  rotate(-1deg);
    -moz-transform: rotate(-1deg);
}

.post img {
    height:auto;
    transition: all 0.5s;
    -o-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.post img:hover {
    transition: all 0.3s;
    -o-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
}

.post img {
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
}
.post img:hover {
    box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5);
}

.post img {
    border-radius: 30px 0 30px 0;
    -moz-border-radius: 30px 0 30px 0;
    -webkit-border-radius: 30px 0 30px 0;
    -o-border-radius: 30px 0 30px 0;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
}
.post img:hover {
    box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5);
    border-radius:0;
    -moz-border-radius:0;
    -webkit-border-radius:0;
    -o-border-radius:0;
}

.post img{
    transition:all 1.2s ease-out; 
    -o-transition:all 1.2s ease-out; 
    -moz-transition:all 1.2s ease-out; 
    -webkit-transition:all 1.2s ease-out; 
} 
.post img:hover {
    z-index:99;
    transform:rotate(-10deg) scale(1.4) translate(5px,-3px);  
    -o-transform:rotate(-10deg) scale(1.4) translate(5px,-3px);
    -moz-transform:rotate(360deg) scale(2) translate(1px,-3px); 
    -webkit-transform:rotate(30deg) scale(2) translate(10px,-3px);
    box-shadow: 0 3px 6px rgba(0,0,0,.5);
} 

5. Bila sudah memilih salah satu efek gambar diatas, jangan lupa Save Template.

Manfaat TIK dalam Lingkungan Sekolah

Diposkan oleh Gustiar Dwi Saputra.s di 6/01/2012 03:49:00 AM

by: gustiar

Hello0,,!!   Brother and sister.   Semuanya yang mencintai TIK dalam proses pembelajaran dengan teknologi komunikasi yang canggih, saya akan menceritakan pengalaman ku tentang betapa penting nya proses pembelajaran dan cara berkomunikasi antar siswa dan Guru melalui Program TIK didalam Lingkungan sekolah.
               

Tentu saja sangat jauh sekali perbandingan nya, antara cara komunikasi siswa dan guru melakukan pembelajaran dengan cara melalui program TIK dibandingkan dengan belajar Biasa dikelas.
dengan belajar dikelas siswa dan guru dapat berinteraksi langsung untuk melakukan proses belajar mengajar, akan  tetapi cara berinteraksi siswa dan guru dibatasi oleh ruangan/kelas dan fokus kepada papan tulis. Namun secara perkembangan teknologi, dengan melalui TIK  Perkembangan ilmu pengetahuan dan teknologi dalam belajar dan membelajarkan, membuat sumber belajar juga lebih berkembang dan cara berinteraksi siswa dan guru pun kini berubah dari lingkungan sekolah dan kelas menjadi dunia tanpa batas formal, yang bisa berkomunikasi melakukan pengirimian Data,pesan dan tugas siswa kepada Guru  dimana saja, tanpa harus bertatap muka. TIK Bersahabat dengan dunia luas INTERNET, Kemampuan TIK dapat membuat siswa aktif, kreatif, inovatif, senang  serta termotivasi untuk terus belajar serta dapat mendorong dan meningkatkan kemampuan berpikir mereka  ke tingkat yang lebih tinggi.
                Brother and sister kita semua pasti tahu walaupun tidak semuanya di dunia luas INTERNET bermanfaat, akan tetapi kalau dipilih secara tepat, informasi itu dapat dijadikan salah satu sumber  dalam mempelajari  fakta, konsep, dan prosedur. Dan juga sangat berguna untuk pengembangan ilmu kita semua pastinya....

terimakasih....
semoga cerita pengalamanku tentang Pemanfaatan TIK tersebut, dapat memotivasi  para siswa dan Guru, untuk melakukan proses belajar-mengajar melalui program TIK, yang dapat mengenal kemajuan teknologi yang masuk ke dalam lingkungan sekolah secara sehat dan bermanfaat...

posting By: Gustiar Dwi Saputra.s