Tampilkan postingan dengan label efek gambar. Tampilkan semua postingan
Cara Memperbesar Gambar Blog sudah saya jelaskan pada artikel yang lain di blog ini yaitu cara memberikan efek memperbesar (zoom) gambar blog. Memang judul artikel yang saya gunakan sama yaitu mempebesar gambar blog tapi ada perbedaan tampilan gambar yang terlihat dengan artikel sebelumnya dan artikel ini. Tentu efek mempebesar gambar blog ini memiliki perbedaan tampilan karena kode yang digunakan seperti yang terlihat pada demo berikut ini
Demo perbandingannya nich...
Dari contoh tampilan demo diatas, anda tentunya sudah memiliki gambaran tentang cara memperbesar gambar blog yang terbaik yang bisa anda gunakan kedalam artikel blog anda.
Perbedaan lainnya adalah pada artikel ini tampilan gambar memiliki keunikan tersendiri yaitu saat gambar membesar, maka daerah disekitarnya akan terpengaruh dan cenderung btertutup jika tampilan gambar melewati batas area postingan. Artinya, ia tetap menggunakan lebar dari lebar artikel blog anda!
Cara memperbesar gambar blog yang satu ini juga terbilang mudah dalam membuatnya, anda tidak perlu memasang kode kedalam template blog tapi cukup memasukkan kode berikut ini kedalam setiap postingan gambar blog anda.
Salin kode berikut untuk memberikan efek zoom pada gambar
<style type="text/css">
border: none;
vertical-align: top;
</style>
<script src="http://yourjavascript.com/21133715255/zoomeffectpict2.js" type="text/javascript"></script>
<img class="expando" height="120" src="Url Gambar" width="100" />
Keterangan :
height="120" : Ukuran tinggi gambar
width="100" : Ukuran lebar gambar
Url Gambar : Ganti dengan link gambar
Selesai. Demikian cara memperbesar gambar blog yang mungkin bisa anda gunakan dan semoga bermanfaat. Jika ada kesalahan, silahkan berkomentar untuk artikel ini, cara memperbesar gambar blog
Demo perbandingannya nich...
| Demo A untuk artikel sebelumnya | Demo B untuk artikel ini | ||
|---|---|---|---|
| |
Dari contoh tampilan demo diatas, anda tentunya sudah memiliki gambaran tentang cara memperbesar gambar blog yang terbaik yang bisa anda gunakan kedalam artikel blog anda.
Perbedaan lainnya adalah pada artikel ini tampilan gambar memiliki keunikan tersendiri yaitu saat gambar membesar, maka daerah disekitarnya akan terpengaruh dan cenderung btertutup jika tampilan gambar melewati batas area postingan. Artinya, ia tetap menggunakan lebar dari lebar artikel blog anda!
Cara memperbesar gambar blog yang satu ini juga terbilang mudah dalam membuatnya, anda tidak perlu memasang kode kedalam template blog tapi cukup memasukkan kode berikut ini kedalam setiap postingan gambar blog anda.
Salin kode berikut untuk memberikan efek zoom pada gambar
<style type="text/css">
border: none;
vertical-align: top;
</style>
<script src="http://yourjavascript.com/21133715255/zoomeffectpict2.js" type="text/javascript"></script>
<img class="expando" height="120" src="Url Gambar" width="100" />
Keterangan :
height="120" : Ukuran tinggi gambar
width="100" : Ukuran lebar gambar
Url Gambar : Ganti dengan link gambar
Selesai. Demikian cara memperbesar gambar blog yang mungkin bisa anda gunakan dan semoga bermanfaat. Jika ada kesalahan, silahkan berkomentar untuk artikel ini, cara memperbesar gambar blog
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Cara Memperbesar Gambar Blog
Cara Memberikan Efek Memperbesar (Zoom) Gambar Blog memiliki keuntungan tersendiri yaitu menghemat ruang artikel pada tulisan blog dan selain itu memberikan efek memperbesar gambar blog juga mempercepat proses loading blog. Berapa pun banyaknya gambar yang ingin ditampilkan kedalam artikel tidak akan pernah jadi masalah dan anda juga tidak perlu kwuatir terhadap loading blog anda karena saat proses loading berjalan, yang terbaca adalah gambar kecil yang telah diatur sebelumnya.
Cara memberikan efek memperbesar (zoom) gambar blog ini telah saya gunakan pada salah satu artikel saya yang menggunakan banyak gambar dan bisa anda lihat di cara mengetahui kode template atau pada contoh tampilan gambar berikut ini
Demonya
Silahkan arahkan kursor mouse ke gambar berikut ini
Untuk membuat efek memperbesar gambar blog seperti demo diatas, silahkan ikuti caranya sebagai berikut. Dan jika anda tidak tertarik menggunakan efek zoom gambar blog ini, saya juga telah membuat trik lainnya yang bisa anda baca di Cara Memperbesar Gambar Blog
Berikut Cara Memberikan Efek Memperbesar (Zoom) Gambar Blog
Demikian cara memberikan efek memperbesar (zoom) gambar blog yang mungkin bisa anda gunakan dan semoga bermanfaat. Jika ada kesalahan, silahkan berkomentar untuk artikel ini, cara memberikan efek memperbesar (zoom) gambar blog
Cara memberikan efek memperbesar (zoom) gambar blog ini telah saya gunakan pada salah satu artikel saya yang menggunakan banyak gambar dan bisa anda lihat di cara mengetahui kode template atau pada contoh tampilan gambar berikut ini
Silahkan arahkan kursor mouse ke gambar berikut ini
Untuk membuat efek memperbesar gambar blog seperti demo diatas, silahkan ikuti caranya sebagai berikut. Dan jika anda tidak tertarik menggunakan efek zoom gambar blog ini, saya juga telah membuat trik lainnya yang bisa anda baca di Cara Memperbesar Gambar Blog
Berikut Cara Memberikan Efek Memperbesar (Zoom) Gambar Blog
- Masuk ke akun blogger anda
- Pilih menu Template >> Edit Html >> tekan Ctrl+F pada keyboard
- Cari kode </head>
- Letakkan kode berikut diatas </head>
<script src="http://yourjavascript.com/29031127131/zoomeffectpict.js" type="text/javascript"></script>
<script src="http://yourjavascript.com/82412173123/zoomeffectpict1.js" type="text/javascript"></script>
<style>#preview{position:absolute;border:1px solid #ccc;background:#333;padding:5px;display:none;color:#fff;}</style> - Simpan template
- Setelah memasang kode diatas kedalam template blog anda, gunakan kode berikut setiap kali anda ingin memberikan efek memperbesar gambar blog kedalam artikel atau postingan
<a class="preview" href="Ulr Gambar Besar" title="Judul Gambar"><img alt="gallery thumbnail" height="110" src="Ulr Gambar Besar Tapi Kecil" width="170" /></a>
Keterangan- Ulr Gambar Besar : Ukuran asli dari gambar
- Ulr Gambar Besar Tapi Kecil : Ukuran asli dari gambar yang sudah memiliki ukuran kecil karena sudah memiliki skala 110 untuk tinggi gambar dan 170 untuk lebar gambar
- height="110" : Ukuran tinggi gambar
- width="170" : Ukuran lebar gambar
- Untuk kode JavaScript, jika ia tidak bekerja atau kadaluarsa karena gangguan host, silahkan baca panduannya Disini atau tinggalkan komentar
- Atau pastikan didalam template anda sudah terpasang kode javascript dari Jquery. Jika belum, silahkan ambil kodenya di Jquery.com yang saat sudah berada pada versi 1.9
Demikian cara memberikan efek memperbesar (zoom) gambar blog yang mungkin bisa anda gunakan dan semoga bermanfaat. Jika ada kesalahan, silahkan berkomentar untuk artikel ini, cara memberikan efek memperbesar (zoom) gambar blog
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Cara Memberikan Efek Memperbesar (Zoom) Gambar Blog
Cara Memasang Tombol Link Gambar Blog - Pada artikel sebelumnya, saya telah menjelaskan tentang cara membuat tombol klik pada background gambar yang masih ada kaitannya dengan artikel ini yaitu cara memasang tombol link gambar blog. Pada artikel sebelunya, saya juga memberitahukan kalau artikel cara memasang tombol link gambar blog ini memiliki perbedaan dengan artikel sebelumnya. Kalau pada artikel sebelumnya, seluruh tampilan (background dan garis border) menggunakan gambar tapi pada artikel ini, seluruh tampilan menggunakan kode-kode CSS dan html dan tidak menggunakan gambar sama sekali
Contoh dalam gambar
Demonya
Nantikan mini-site template khusus blogger....
Dengan tidak menggunakan gambar pada tampilan tersebut, hal ini tentunya memiliki keuntungan tersendiri yaitu loading blog lebih cepat daripada yang menggunakan gambar. Sedangkan dari tingkat kesulitan, juga lebih mudah dilakukan pada artikel ini daripada artikel sebelumnya.. Padahal ya sama-sama sulit hehee..
Berikut Cara Memasang Tombol Link Gambar Blog
Silahkan buka menggunakan password panduantemplateblog dan masukkan kode html kedalam artikel atau dimanapun anda ingin memasangnya didalam blog anda
Keterangan: Tidak ada, silahkan mainkan imajinasi anda :)
Horeee.. capek dah! Terimakasih telah membaca artikel ini, cara memasang tombol link gambar blog
Contoh dalam gambar
Demonya
Harga..
Rp. 1 Trilliun
Penawaran Ini Ditutup
Jika Penjualan Sudah Mencapai 100 Sales
Jika Penjualan Sudah Mencapai 100 Sales
Nantikan mini-site template khusus blogger....
Dengan tidak menggunakan gambar pada tampilan tersebut, hal ini tentunya memiliki keuntungan tersendiri yaitu loading blog lebih cepat daripada yang menggunakan gambar. Sedangkan dari tingkat kesulitan, juga lebih mudah dilakukan pada artikel ini daripada artikel sebelumnya.. Padahal ya sama-sama sulit hehee..
Berikut Cara Memasang Tombol Link Gambar Blog
Silahkan buka menggunakan password panduantemplateblog dan masukkan kode html kedalam artikel atau dimanapun anda ingin memasangnya didalam blog anda
Keterangan: Tidak ada, silahkan mainkan imajinasi anda :)
Horeee.. capek dah! Terimakasih telah membaca artikel ini, cara memasang tombol link gambar blog
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Cara Memasang Tombol Link Gambar Blog
Cara Membuat Tombol Klik Pada Background Gambar - hmm.. maksudnya apa ya? Saya sendiri juga bingung dengan judul artikel ini, cara membuat tombol klik pada background gambar blog.. Tapi baiklah, karena kita sama-sama bingung mari kita bahas artikel ini agar kebingungan ini tidak menjadi penyakit heheheee. Begini, biasanya saat membuat background gambar pada blog atau didalam artikel dan menyertakan link kedalam background gambar tersebut maka gambar itu sendiri lah yang bisa di klik dan kali ini kita akan membuat tombol klik yang memiliki background!
Tampilan tombol klik pada background gambar ini biasanya terdapat pada sebuah halaman penawaran (landing page, squeeze pade, mini site) bisnis online seperti yang terlihat pada gambar berikut ini
Demonya
Nantikan mini-site template khusus blogger....
Bagaimana? Menarik bukan? Memang cara membuat tombol klik pada background gambar ini bisa menggunakan cara manual seperti yang saya telah saya jelaskan dalam artikel Cara Memasang Tombol Link Gambar Blog yang memiliki perbedaan dengan artikel yang anda baca saat ini.
Untuk membuat tombol klik pada background gambar berikut caranya
Silahkan tambahkan kode berikut ini kedalam artikel atau dimanapun anda ingin memasangnya didalam blog anda
<div style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV1oQWta-JDTfrYXtvbINhiwTB5qEuycj23mjqVr6QBAjRit-ypcD-GICrztcZDO4gzmPp3wy4Rb3JcRJyI21rnDZpjzsxjJiMPZCXoMQwyN-ayabMZuNeO0dxcP_4JMnnNy5Q7UoRjs8/s1600/tombol-beli-sekarang-001.png)no-repeat; height: 350; margin-bottom: 20px; margin-left: auto; margin-right: auto; margin-top: 20px; padding-bottom: 60px; padding-left: 2px; padding-right: 2px; padding-top: 120px; width: 450;">
<span style="margin-bottom: 20px; margin-left: auto; margin-right: auto; margin-top: 20px; padding-bottom: 60px; padding-left: 0px; padding-right: 20px; padding-top: 100px;"><a href="http://panduantemplateblog.blogspot.com/2013/02/cara-membuat-tombol-klik-pada.html"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz8MCXhQdS8aueIhipMuL5l-wFydsUGtV5y6mwl7CydSBOfJvBYQ8CrPgnNqkfQjxvVF2-VHacI_6h-FiIsB4Wpb9Q2z7KRgg1wCQDI9hsEoBbDieUL65qLrJnt634gy0n8b1J6IKOsos/s1600/tombol-beli-sekarang.png" width="400" /></a></span></div>
Keterangan:
Merah : gambar background
Biru : link aktif
Ungu : gambar tombol
Adakah ide lain yang lebih baik dari cara membuat tombol klik pada background gambar ini? Mari kita bertukar ide dan mendiskusikannya dengan berkomentar di artikel ini, Cara Membuat Tombol Klik Pada Background Gambar
Tampilan tombol klik pada background gambar ini biasanya terdapat pada sebuah halaman penawaran (landing page, squeeze pade, mini site) bisnis online seperti yang terlihat pada gambar berikut ini
Demonya
Nantikan mini-site template khusus blogger....
Bagaimana? Menarik bukan? Memang cara membuat tombol klik pada background gambar ini bisa menggunakan cara manual seperti yang saya telah saya jelaskan dalam artikel Cara Memasang Tombol Link Gambar Blog yang memiliki perbedaan dengan artikel yang anda baca saat ini.
Untuk membuat tombol klik pada background gambar berikut caranya
Silahkan tambahkan kode berikut ini kedalam artikel atau dimanapun anda ingin memasangnya didalam blog anda
<div style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV1oQWta-JDTfrYXtvbINhiwTB5qEuycj23mjqVr6QBAjRit-ypcD-GICrztcZDO4gzmPp3wy4Rb3JcRJyI21rnDZpjzsxjJiMPZCXoMQwyN-ayabMZuNeO0dxcP_4JMnnNy5Q7UoRjs8/s1600/tombol-beli-sekarang-001.png)no-repeat; height: 350; margin-bottom: 20px; margin-left: auto; margin-right: auto; margin-top: 20px; padding-bottom: 60px; padding-left: 2px; padding-right: 2px; padding-top: 120px; width: 450;">
<span style="margin-bottom: 20px; margin-left: auto; margin-right: auto; margin-top: 20px; padding-bottom: 60px; padding-left: 0px; padding-right: 20px; padding-top: 100px;"><a href="http://panduantemplateblog.blogspot.com/2013/02/cara-membuat-tombol-klik-pada.html"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz8MCXhQdS8aueIhipMuL5l-wFydsUGtV5y6mwl7CydSBOfJvBYQ8CrPgnNqkfQjxvVF2-VHacI_6h-FiIsB4Wpb9Q2z7KRgg1wCQDI9hsEoBbDieUL65qLrJnt634gy0n8b1J6IKOsos/s1600/tombol-beli-sekarang.png" width="400" /></a></span></div>
Keterangan:
Merah : gambar background
Biru : link aktif
Ungu : gambar tombol
Adakah ide lain yang lebih baik dari cara membuat tombol klik pada background gambar ini? Mari kita bertukar ide dan mendiskusikannya dengan berkomentar di artikel ini, Cara Membuat Tombol Klik Pada Background Gambar
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Cara Membuat Tombol Klik Pada Background Gambar
Cara Membuat Efek Terang (Fokus) Gambar Blog merupakan kebalikan dari efek blur gambar blog yang telah saya bahas sebelumnya yaitu memberikan efek pada gambar dimana tampilan awal dari gambar tersebut adalah buram atau blur namun setelah di sorot dengan mouse maka tampilan gambar akan berubah menjadi terang atau fokus. Membuat efek terang gambar blog merupakan cara terbaik merubah tampilan blog daripada menggunakan efek blur karena ia akan lebih memperjelas tampilan gambar itu sendiri.
Namun, meskipun memberikan efek terang atau fokus gambar blog, ia tidak lebih baik dari mempebesar gambar blog karena adanya tampilan terbatas yang ditampilkan oleh gambar tersebut. Dan detail yang ditampilakn juga kurang terlihat jelas namun berbeda jika memberikan efek Zoom gambar blog seperti yang terlihat pada tampilan gambar berikut ini
Demonya
Dan jika anda ingin membuat efek terang (fokus) gambar blog berikut caranya ;
Masukkan kode berikut kedalam artikel gambat blog anda
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyHUSdNfIdq2zjDDp0NtD47d3xxMX5SaS4AQBfYeAVthHFrgMvMymQNh7Uwcg1aQjgwKkd-OdFGHuvpEGJX6x67L3g5zqyImdaDkdIeAOMGe3plxVTfTt8mHF6hjhwQe7K-dvowEAKyBU/s320/New+Picture+%2812%29.png" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"/>
Ganti warna biru dengan link gambar anda
Sekian. Terimakasih telah berkunjung dan membaca artikel ini, cara membuat efek terang (fokus) gambar blog
Namun, meskipun memberikan efek terang atau fokus gambar blog, ia tidak lebih baik dari mempebesar gambar blog karena adanya tampilan terbatas yang ditampilkan oleh gambar tersebut. Dan detail yang ditampilakn juga kurang terlihat jelas namun berbeda jika memberikan efek Zoom gambar blog seperti yang terlihat pada tampilan gambar berikut ini
Demonya
Dan jika anda ingin membuat efek terang (fokus) gambar blog berikut caranya ;
Masukkan kode berikut kedalam artikel gambat blog anda
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyHUSdNfIdq2zjDDp0NtD47d3xxMX5SaS4AQBfYeAVthHFrgMvMymQNh7Uwcg1aQjgwKkd-OdFGHuvpEGJX6x67L3g5zqyImdaDkdIeAOMGe3plxVTfTt8mHF6hjhwQe7K-dvowEAKyBU/s320/New+Picture+%2812%29.png" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"/>
Ganti warna biru dengan link gambar anda
Sekian. Terimakasih telah berkunjung dan membaca artikel ini, cara membuat efek terang (fokus) gambar blog
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Cara Membuat Efek Terang (Fokus) Gambar Blog
Cara Membuat Efek Blur Gambar Blog sebenarnya bukanlah suatu gaya atau style yang harus dipasang atau diberikan pada gambar blog untuk mempercantik atau memberikan nuansa lain pada blog karena dengan membuat efek blur gambar blog malah tidak akan memperindah tampilan blog itu sendiri dan menurut saya akan menjadi aneh karena dengan adanya efek blur gambar blog akan memperburuk tampilan blog itu sendiri.
Seperti contohnya, ketika anda memasang gambar blog di artikel dan itu gambar yang sangat bagus untuk dilihat namun karena adanya efek blur ini maka gambar yang seharusnya tampil cantik tiba-tiba menjadi buram dan jelas ini akan memperburuk tampilan blog anda. Seperti yang terlihat pada gambar beikut ini
Demo
Gambar asli
Efek blur
Namun sebagai pemilik blog, tentu anda memiliki pemikiran dan penilaian tersendiri seperti apa tampilan blog yang anda inginkan, mau diapakan tampilan blog anda tersebut, semua ada ditangan anda. Dan, sebagai saran saja, lebih baik membuat efek terang gambar blog itu yaitu membuat fokus gambar blog atau memperbesar blog dengan efek Zoom. Dua pilihan terakhir menurut saya lebih baik digunakan.
Dan jika anda ingin membuat efek blur gambar blog, berikut caranya ;
Masukkan kode berikut kedalam artikel gambar di blog anda
<img onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyHUSdNfIdq2zjDDp0NtD47d3xxMX5SaS4AQBfYeAVthHFrgMvMymQNh7Uwcg1aQjgwKkd-OdFGHuvpEGJX6x67L3g5zqyImdaDkdIeAOMGe3plxVTfTt8mHF6hjhwQe7K-dvowEAKyBU/s320/New+Picture+%2812%29.png" style="opacity: 0.4;" />
Ganti warna biru dengan link gambar anda
Terimakasih telah membaca artikel ini, cara membuat efek blur gambar blog. Jika ada salah kata atau kalimat yang saya tulis, saya mohon maaf karena sebuah ide untuk membangun blog tergantung personal masing-masing dan jika ada ide yang lain mari kita diskusikan bersama dengan meninggalkan komentar untuk artikel ini, Cara Membuat Efek Blur Gambar Blog
Seperti contohnya, ketika anda memasang gambar blog di artikel dan itu gambar yang sangat bagus untuk dilihat namun karena adanya efek blur ini maka gambar yang seharusnya tampil cantik tiba-tiba menjadi buram dan jelas ini akan memperburuk tampilan blog anda. Seperti yang terlihat pada gambar beikut ini
Demo
Gambar asli
Efek blur
Namun sebagai pemilik blog, tentu anda memiliki pemikiran dan penilaian tersendiri seperti apa tampilan blog yang anda inginkan, mau diapakan tampilan blog anda tersebut, semua ada ditangan anda. Dan, sebagai saran saja, lebih baik membuat efek terang gambar blog itu yaitu membuat fokus gambar blog atau memperbesar blog dengan efek Zoom. Dua pilihan terakhir menurut saya lebih baik digunakan.
Dan jika anda ingin membuat efek blur gambar blog, berikut caranya ;
Masukkan kode berikut kedalam artikel gambar di blog anda
<img onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyHUSdNfIdq2zjDDp0NtD47d3xxMX5SaS4AQBfYeAVthHFrgMvMymQNh7Uwcg1aQjgwKkd-OdFGHuvpEGJX6x67L3g5zqyImdaDkdIeAOMGe3plxVTfTt8mHF6hjhwQe7K-dvowEAKyBU/s320/New+Picture+%2812%29.png" style="opacity: 0.4;" />
Ganti warna biru dengan link gambar anda
Terimakasih telah membaca artikel ini, cara membuat efek blur gambar blog. Jika ada salah kata atau kalimat yang saya tulis, saya mohon maaf karena sebuah ide untuk membangun blog tergantung personal masing-masing dan jika ada ide yang lain mari kita diskusikan bersama dengan meninggalkan komentar untuk artikel ini, Cara Membuat Efek Blur Gambar Blog
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Cara Membuat Efek Blur Gambar Blog
