Memasang Efek Berputar Pada Gambar di Blog

Bila anda pernah membaca artikel saya tentang bagaimana memberikan efek fading pada gambar maka pasti anda juga akan tertarik dengan efek yang satu ini yaitu bagaimana memberikan efek berputar pada gambar. Efek berputar ini  akan membuat gambar di blog anda lebih menarik dibandingkan gambar statis yang biasa anda lihat saat anda berkunjung ke blog orang lain. Pengunjung anda mungkin akan lebih terkesan dengan blog anda, bila anda memasang beberapa efek pada gambar di blog anda, dan salah satunya adalah efek ini. Meskipun penilaian dari pengunjung blog anda mengenai efek pada gambar ini pastinya akan berbeda-beda menurut selera masing-masing, akan tetapi memasang efek berputar pada gambar di blog anda tidak ada salahnya untuk dicoba.

Memasang Efek Berputar Pada Gambar di Blog

Sebelum anda mengubah atau menambah kode script pada halaman HTML Template anda, sebaiknya anda mem-backup template anda terlebih dahulu. 

Step 1

Masuk ke halaman dashboard > Template > HMTL

Step 2

Letakkan kode berikut di atas kode ]]><b:skin/>

.Kampoengspinning img {
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.Kampoengspinning img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

Step 3

Save Template

Step 4

Tambahkan class="Kampoengspinning" ke dalam kode href gambar anda

<a class="Kampoengspinning" href="URL GAMBAR" imageanchor="" style=""><img alt="" border="" height="" src="URL GAMBAR" title="" width="" /></a>

Selesai!
Anda bisa melihat contohnya di bawah ini

Live Demo

Happy Blogging!

Wassalam.

Baca Selanjutnya » | No comments

Membuat Efek Refleksi Pada Gambar di Blog

Terdapat berbagai macam efek yang bisa anda terapkan pada gambar anda, salah satunya adalah membuat efek refleksi pada gambar di blog. Efek refleksi ini, bila dipasang pada gambar, maka gambar akan terlihat seperti memiliki bayangan pantul yang terlihat samar. Contohnya seperti gambar di bawah ini.

Membuat Efek Refleksi Pada Gambar di Blog

Sebelum anda menambahkan kode script pada halaman HTML Template anda, sebaiknya anda mem-backup template anda terlebih dahulu. 

Step 1

Masuk ke halaman dashboard > Template > HTML > Expand widget template

Step 2

Letakkan kode berikut di atas kode  </head> 

<script src='http://the-kampoeng-blogger.googlecode.com/files/reflection.js' type='text/javascript'/>

Step 3

Ganti halaman post dari compose ke HTML

Step 4

Letakkan kode berikut, dimana saja anda ingin meletakkan gambar

<img src="URL GAMBAR" class="reflect"/> 

Silahkan anda mengganti kata URL GAMBAR dengan URL gambar anda.

Bagaimana? cukup mudah kan?
Selamat mencoba!
Wassalam.

Baca Selanjutnya » | No comments

Menambahkan Efek Zoom Pada Gambar di Blog

Pada artikel saya yang lalu, saya sudah pernah membahas tentang bagaimana membuat efek gabungan aantara drop shadow dengan efek zoom pada gambar. Oleh karena mungkin ada blogger yang hanya ingin salah satu efek dari kedua efek tersebut saja yang dipasangkan pada gambar, maka kali ini saya hanya akan membahas tentang bagaimana cara menambahkan efek zoom pada gambar. Dengan menambahkan efek zoom pada gambar anda di blog, maka anda tidak perlu untuk mengklik gambar agar gambar menjadi lebih besar. Anda hanya perlu meletakkan mouse anda pada gambar, maka gambar tersebut akan membesar secara otomatis (fungsi zoom). Contohnya dapat anda lihat pada link demo di bawah ini.

Live Demo

Menambahkan Efek Zoom Pada Gambar

Step 1

Masuk ke halaman dashboard > Template > HTML > Expand widget template

Step 2

Letakkan kode berikut tepat di atas kode ]]></b:skin>

.TKBZoom img{
-webkit-transform:scale(0.7);
-moz-transform:scale(0.7);
-o-transform:scale(0.7);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;
}

.TKBZoom img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}

Step 3

Save Template

Step 4

Tambahkan kode yang ditandai warna merah berikut sebelum kode gambar anda.

<div class="TKBZoom" style="text-align: center;">
<a href="URL GAMBAR" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="URL GAMBAR" /></a>
</div>

Bila anda ingin menyesuaikan letak gambar, anda hanya perlu mengubah "center" menjadi "left" atau "right".
Selamat mencoba!
Wassalam. 
 

Baca Selanjutnya » | No comments

Efek Rollover Pada Gambar

Efek rollover pada gambar adalah salah satu efek gambar dimana gambar otomatis akan berubah menjadi gambar lain bila mouse diletakkan di atas gambar (disebut dengan rollover) dan akan kembali seperti semula bila mouse disingkirkan dari gambar. Membuat Efek rollover pada gambar sangatlah gampang, anda hanya perlu beberapa langkah untuk memasang efek ini pada gambar anda. Sebagai contoh anda dapat melihat gambar di bawah ini.

Membuat Efek Rollover Pada Gambar

Step 1

Masuk ke halaman HTML (disamping compose)

Step 2

Letakkan kode berikut pada halaman HTML anda (letaknya terserah dari anda dimana anda ingin menempatkan gambar)

<a href="URL BLOG ANDA"><img src="URL GAMBAR PERTAMA" onmouseover="this.src='URL URL GAMBAR KEDUA'" onmouseout="this.src='URL GAMBAR PERTAMA'" /></a> 

Selesai!
Mudah kan? Anda baru bisa melihat hasilnya setelah anda mempublish artikel anda.
Selamat mencoba!
Wassalam.

Baca Selanjutnya » | No comments

Menggabungkan Efek Drop Shadow dan Perbesar Gambar Otomatis pada Gambar di Blog

Menarik sekali bahwa begitu banyak modifikasi yang bisa dilakukan terhadap gambar yang kita upload. Berbagai macam cara modifikasi untuk mempercantik tampilan gambar yang dapat anda coba untuk membuat pengunjung tertarik untuk datang ke blog anda. Salah satu modifikasi yang pernah saya bahas di blog ini adalah bagaimana anda memberikan efek fading pada gambar, efek lainnya yang dapat membuat pengunjung terkesima dengan blog anda adalah dengan menggabungkan efek drop shadow dan perbesar gambar otomatis pada gambar di blog. Dengan efek drop shadow dan perbesar gambar otomatis ini,  gambar anda akan terlihat seperti melayang saat mouse anda letakkan di atas gambar. Anda tertarik untuk memasangnya di blog anda?

Menggabungkan Efek Drop Shadow dan Perbesar Gambar Otomatis Pada Gambar

Sebelum anda melakukan perubahan pada halaman HTML Template anda, ada baiknya ada mem-backup template anda terlebih dahulu untuk berjaga-jaga bila terjadi error saat memasukkan kode.

Step 1

Masuk ke halaman dashboard > Template > Expand widget template

Step 2

Letakkan kode berikut tepat di atas kode ]]></b:skin> 

.TKBeffect img {
-webkit-transform:scale(0.6);
-moz-transform:scale(0.6);
-o-transform:scale(0.6);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s; 
opacity: 0.5;
margin: 0 10px 5px 0;
}
.TKBeffect img:hover {
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
box-shadow: 0px 0px 30px gray;
-webkit-box-shadow: 0px 0px 30px gray;
-moz-box-shadow: 0px 0px 30px gray;

opacity: 1;
}

Bila suatu saat anda ingin memperkecil ukuran gambar maka anda dapat menurunkan ukurannya 0.7 ke ukuran  yang lebih kecil atau bila anda ingin membuat image menjadi lebih buram (fade) maka anda hanya perlu menurunkan nilai 0.5 menjadi angka yang lebih kecil. 

Step 3

Tambahkan kode yang ditandai warna merah berikut sebelum kode gambar anda.

<div class="TKBeffect" style="text-align: center;">
<a href="URL GAMBAR" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="URL GAMBAR" /></a>
</div>

Bila anda ingin menyesuaikan letak gambar, anda hanya perlu mengubah "center" menjadi "left" atau "right"
Silahkan anda melihat hasilnya disini

Lihat Demo 

Bagaimana? efek yang lumayan bukan?
Selamat mencoba!
Wassalam.  

Baca Selanjutnya » | No comments

Membuat Efek Fading Pada Gambar di Blog

Efek fading seringkali kita dengar saat kita membuat animasi dokumen di power point. Efek ini akan memberikan efek buram atau kabur pada gambar sehingga gambar akan terlihat unik. Efek fading ini tidak terlalu jauh berbeda dengan yang ada pada power point. Saat anda membuat efek fading pada gambar di blog, dalam keadaan biasa, gambar akan terlihat buram, namun saat anda mengarahkan mouse anda ke atas gambar, gambar akan terlihat jelas kembali. Tertarik untuk membuat efek fading pada gambar di blog? Silahkan anda simak caranya berikut ini.

Membuat Efek Fading Pada Gambar di Blog

Sebelum anda mengubah atau menambah kode script ke dalam halaman HTML Template anda, sebaiknya anda mem-backup template terlebih dahulu. 

Membuat Efek Fade In Pada Gambar

Step 1

Masuk ke halaman dashboard > Template > HTML > Expand widget template

Step 2

Letakkan kode berikut tepat di atas kode ]]></b:skin> 

/*---THE KAMPOENG BLOGGER FADE IN CODE---*/
.Fadein img {
filter:alpha(opacity=20);
opacity: 1.0;
border:0;
}
.Fadein:hover img { 
filter:alpha(opacity=100);
opacity: 0.2;
border:0;
}

Step 3

Tambahkan kode class="Fadein" ke dalam kode gambar anda (untuk menambahkan kode pada gambar masuk ke halaman HTML yang ada disamping compose)

<a class="Fadein" href="URL GAMBAR" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="URL GAMBAR" width="194" /></a> 

Untuk melihat hasilnya silahkan anda lihat disini 

Lihat Demo

Membuat Efek Fade Out Pada Gambar

Step 1

Masuk ke halaman dashboard > Template > HTML > Expand widget template

Step 2 

Letakkan kode berikut di atas kode ]]></b:skin>

/*---THE KAMPOENG BLOGGER FADE OUT CODE---*/
.Fadeout img {
filter:alpha(opacity=100);
opacity: 0.2;
border:0;
}
.Fadeout:hover img { 
filter:alpha(opacity=20);
opacity: 1.0;
border:0;
}

Step 3

Tambahkan kode class="Fadeout" ke dalam kode gambar anda (untuk menambahkan kode pada gambar masuk ke halaman HTML yang ada disamping compose)

<a class="Fadeout" href="URL GAMBAR" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="URL GAMBAR" width="194" /></a> 

Untuk melihat hasilnya silahkan anda lihat disini

Lihat Demo

Bila anda tertarik untuk membuat gambar di artikel anda ada yang memiliki efek fade in dan gambar lain memiliki efek fade out maka anda hanya perlu meletakkan dan menggabungkan kedua kode script di atas dan meletakkannya tepat di atas kode ]]></b:skin>, lalu pada kode gambar letakkan kode class="Fadein" atau class="Fadeout" pada gambar yang anda inginkan. 

Bagaimana? Anda tertarik untuk memasangnya?
Selamat mencoba.
Wassalam.

Baca Selanjutnya » | No comments

Membuat Gambar Tidak Bisa di Klik (Unclickable Image)

Bila anda sedikit terganggu dengan gambar yang bila anda klik mengarahkan anda ke halaman full size image, maka anda patut untuk mencoba cara yang satu ini. Membuat gambar tidak bisa di klik (unclickable image) bukanlah suatu hal yang sulit untuk dilakukan. Anda hanya perlu untuk menghilangkan beberapa kode pada kode gambar anda. Bila anda tertarik untuk membuat gambar tidak bisa di klik (unclickable image), berikut adalah cara memasangnya.

Membuat Gambar Tidak Bisa di Klik (Unclickable Image)

Step 1 

Setelah anda meng-upload gambar anda, masuklah ke halaman HTML (disamping compose).

Step 2

Anda akan mendapatkan kode seperti ini (contoh)

<a href="URL GAMBAR" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Unclickable Luffy image" border="0" src="URL GAMBAR" title="Unclickable luffy image" /></a>

Step 3

Hilangkan href yang ditandai dengan warna merah.

Contoh gambar yang tidak bisa di klik (unclickable image)

Sekarang gambar anda sudah tidak dapat di klik lagi.
Semoga bermanfaat.
Wassalam.

Baca Selanjutnya » | 4 comments

Let's Go Green!: Memasang Mode Hemat Energi (Energy Saving Mode) di Blog

Apakah anda salah satu yang menyukai teknologi ramah lingkungan? Apakah anda sangat memperhatikan masalah lingkungan di sekitar anda? Jika jawabannya ya, maka widget yang satu ini tentunya akan sangat berarti bagi anda. Dan bila ternyata jawaban anda tidak, tidak mengapa, karena inilah saatnya anda mulai memperhatikan masalah lingkungan di sekitar anda, termasuk dalam masalah penghematan energi.

Mengapa mesti widget ini? apa kelebihannya? Nah, menyambung pernyataan saya sebelumnya, widget ini bisa digunakan untuk menghemat energi listrik yang digunakan termasuk aktivitas blog kita. Lalu bagaimana widget ini bekerja? Saat blog anda tidak ada aktivitas sama sekali, maka saat itulah mode hemat energi ini bekerja. Dengan membuat black screen pada blog sehingga menghemat energi yang dipakai saat blog tidak digunakan. Tentu saja anda harus mensetting waktu pada widget ini sehingga saat beberapa waktu terlampaui tanpa ada aktivitas di blog, maka mode hemat ini akan bekerja menghemat pemakaian energi anda. Menarik bukan?

Memasang Mode Hemat Energi (Energy Saving Mode)

Sebelum memasang kode script sebaiknya anda backup template blog anda, untuk berjaga-jaga bila terjadi error saat pemasangan kode. 

Step 1

Masuk ke halaman dashboard > Template > HTML

Step 2

Letakkan kode berikut tepat sebelum kode </head>

<script language='javascript' src='http://the-kampoeng-blogger.googlecode.com/files/ModeHematEnergy.js' type='text/javascript'/> 

Step 3 

Save Template

Step 4

Layout > Add Gadget > HTML/JavaScript

Step 5

Letakkan kode berikut ke dalam halaman HTML/JavaScript (Kolom Title kosongkan saja) 

<script language="javascript" type="text/javascript" src="http://the-kampoeng-blogger.googlecode.com/files/saving%20energy.js?time=180"></script>

Anda dapat mengganti waktu kapan mode hemat energi ini bekerja dengan mengganti angka yang diberi warna merah dengan waktu yang anda inginkan (dalam satuan detik). Misalnya anda ingin mensettingnya menjadi 5 menit berarti anda mengubahnya menjadi "300". 

Cara memasangnya mudah bukan? Lalu bagaimana dengan anda? apakah anda sudah memasangnya di blog anda?
Selamat mencoba!
Semoga bermanfaat.
Wassalam. 

Baca Selanjutnya » | 1 comment