Sabtu, 22 Januari 2011
Membuat Efek Mirror/Reflect Pada Gambar di Blog
Diposting oleh
ayo Indonesia
Tutorial kali ini saya sajikan untuk temen-temen blogger yang seneng dengan modifikasi gambar di dalam postingan. Selain membuat efek shadow pada gambar postingan, kita juga bisa memberikan efek mirror atau reflect pada gambar yang ada di postingan. Sebenarnya membuat efek mirror ini bisa juga dengan menggunakan situs-situs online, seperti reflectionmaker.com untuk gambar dan mirrortext.net untuk membuat efek mirror pada teks atau tulisan.
Cara membuat image reflection atau gambar dengan efek bayangan pada posting adalah dengan menambahkan kode javascript pada template blog. Gambar diatas adalah salah satu contoh dari efek mirror yang saya buat dengan cara menambahkan perintah class="reflect" pada setiap image yang telah diupload ke posting. Untuk lebih jelasnya perhatikan langkah-langkah berikut ini :
Cara membuat image reflection atau gambar dengan efek bayangan pada posting adalah dengan menambahkan kode javascript pada template blog. Gambar diatas adalah salah satu contoh dari efek mirror yang saya buat dengan cara menambahkan perintah class="reflect" pada setiap image yang telah diupload ke posting. Untuk lebih jelasnya perhatikan langkah-langkah berikut ini :
Membuat image reflection otomatis pada posting
- Login ke blogger dengan id anda
- Klik Tata Letak
- Pilih menu Edit HTML
- Letakkan kode berikut di atas kode </head>
<script type='text/javascript'>
//<![CDATA[
if (!document.myGetElementsByClassName) {
document.myGetElementsByClassName = function(className) {
var children = document.getElementsByTagName('*') || document.all;
var elements = new Array();
for (var i = 0; i < children.length; i++) {
var child = children[i];
var classNames = child.className.split(' ');
for (var j = 0; j < classNames.length; j++) {
if (classNames[j] == className) {
elements.push(child);
break;
}
}
}
return elements;
}
}
var Reflection = {
defaultHeight : 0.5,
defaultOpacity: 0.5,
add: function(image, options) {
Reflection.remove(image);
doptions = { "height" : Reflection.defaultHeight, "opacity" : Reflection.defaultOpacity }
if (options) {
for (var i in doptions) {
if (!options[i]) {
options[i] = doptions[i];
}
}
} else {
options = doptions;
}
try {
var d = document.createElement('div');
var p = image;
var classes = p.className.split(' ');
var newClasses = '';
for (j=0;j<classes.length;j++) {
if (classes[j] != "reflect") {
if (newClasses) {
newClasses += ' '
}
newClasses += classes[j];
}
}
var reflectionHeight = Math.floor(p.height*options['height']);
var divHeight = Math.floor(p.height*(1+options['height']));
var reflectionWidth = p.width;
if (document.all && !window.opera) {
/* Fix hyperlinks */
if(p.parentElement.tagName == 'A') {
var d = document.createElement('a');
d.href = p.parentElement.href;
}
/* Copy original image's classes & styles to div */
d.className = newClasses;
p.className = 'reflected';
d.style.cssText = p.style.cssText;
p.style.cssText = 'vertical-align: bottom';
var reflection = document.createElement('img');
reflection.src = p.src;
reflection.style.width = reflectionWidth+'px';
reflection.style.display = 'block';
reflection.style.height = p.height+"px";
reflection.style.marginBottom = "-"+(p.height-reflectionHeight)+'px';
reflection.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(opacity='+(options['opacity']*100)+', style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy='+(options['height']*100)+')';
d.style.width = reflectionWidth+'px';
d.style.height = divHeight+'px';
p.parentNode.replaceChild(d, p);
d.appendChild(p);
d.appendChild(reflection);
} else {
var canvas = document.createElement('canvas');
if (canvas.getContext) {
/* Copy original image's classes & styles to div */
d.className = newClasses;
p.className = 'reflected';
d.style.cssText = p.style.cssText;
p.style.cssText = 'vertical-align: bottom';
var context = canvas.getContext("2d");
canvas.style.height = reflectionHeight+'px';
canvas.style.width = reflectionWidth+'px';
canvas.height = reflectionHeight;
canvas.width = reflectionWidth;
d.style.width = reflectionWidth+'px';
d.style.height = divHeight+'px';
p.parentNode.replaceChild(d, p);
d.appendChild(p);
d.appendChild(canvas);
context.save();
context.translate(5,image.height-1);
context.scale(1,-1);
context.drawImage(image, 0, 0, reflectionWidth, image.height);
context.restore();
context.globalCompositeOperation = "destination-out";
var gradient = context.createLinearGradient(0, 0, 0, reflectionHeight);
gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
gradient.addColorStop(0, "rgba(255, 255, 255, "+(1-options['opacity'])+")");
context.fillStyle = gradient;
context.rect(0, 0, reflectionWidth, reflectionHeight*2);
context.fill();
}
}
} catch (e) {
}
},
remove : function(image) {
if (image.className == "reflected") {
image.className = image.parentNode.className;
image.parentNode.parentNode.replaceChild(image, image.parentNode);
}
}
}
function addReflections() {
var rimages = document.myGetElementsByClassName('reflect');
for (i=0;i<rimages.length;i++) {
var rheight = null;
var ropacity = null;
var classes = rimages[i].className.split(' ');
for (j=0;j<classes.length;j++) {
if (classes[j].indexOf("rheight") == 0) {
var rheight = classes[j].substring(7)/100;
} else if (classes[j].indexOf("ropacity") == 0) {
var ropacity = classes[j].substring(8)/100;
}
}
Reflection.add(rimages[i], { height: rheight, opacity : ropacity});
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
addReflections();
});
//]]>
</script> - Klik tombol Simpan Template
- Selesai
Misalnya anda upload image saat membuat postingan di blogger. Ada dua pilihan yaitu upload dari komputer atau dari URL tertentu, maka anda tinggal menambahkan perintah class="reflect" pada kode gambar. Sebagai catatan, lakukan ini pada posisi posting pilihan Edit HTML, jangan pada posisi Compose.
Contoh pertama:
Upload gambar dari komputer seperti ini :
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8MRM1uerlPa1h5UV95471L56f5ryM_D8Shs6qSMVxo54OSjJ_pPa8ZFgdtVUIt3nOVKz82U9_c8n-T0zbYpn9v51hR_UZmr6T579-BZThM7rTz1g5oboLimpqEyk0uXUik_DBkWrs5StS/s1600-h/hello.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 175px; height: 150px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8MRM1uerlPa1h5UV95471L56f5ryM_D8Shs6qSMVxo54OSjJ_pPa8ZFgdtVUIt3nOVKz82U9_c8n-T0zbYpn9v51hR_UZmr6T579-BZThM7rTz1g5oboLimpqEyk0uXUik_DBkWrs5StS/s400/hello.jpg" alt="" id="BLOGGER_PHOTO_ID_5399272130099778354" border="0" />
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8MRM1uerlPa1h5UV95471L56f5ryM_D8Shs6qSMVxo54OSjJ_pPa8ZFgdtVUIt3nOVKz82U9_c8n-T0zbYpn9v51hR_UZmr6T579-BZThM7rTz1g5oboLimpqEyk0uXUik_DBkWrs5StS/s1600-h/hello.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 175px; height: 150px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8MRM1uerlPa1h5UV95471L56f5ryM_D8Shs6qSMVxo54OSjJ_pPa8ZFgdtVUIt3nOVKz82U9_c8n-T0zbYpn9v51hR_UZmr6T579-BZThM7rTz1g5oboLimpqEyk0uXUik_DBkWrs5StS/s400/hello.jpg" alt="" class="reflect" id="BLOGGER_PHOTO_ID_5399272130099778354" border="0" />
Upload gambar dari URL tertentu, seperti ini :
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg26QVVJ7hJrDc5OuxoTAmwjvaTvrUieQPpKKQKKPNk-b6z-h5At0GT67_HVGSH_zHrFFllrl86nNbe6Wdzq94NZf-F1MJaGoURCJt1tbSgFmjtzElKNcOqE7hVjEJiMMIhLF0saBWj6GM/s1600/shadow+Download Disini.jpg" imageanchor="1"><img alt="shadow effect Download Disini" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg26QVVJ7hJrDc5OuxoTAmwjvaTvrUieQPpKKQKKPNk-b6z-h5At0GT67_HVGSH_zHrFFllrl86nNbe6Wdzq94NZf-F1MJaGoURCJt1tbSgFmjtzElKNcOqE7hVjEJiMMIhLF0saBWj6GM/s1600/shadow+Download Disini.jpg" style="margin-left: 1em; margin-right: 1em;" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg26QVVJ7hJrDc5OuxoTAmwjvaTvrUieQPpKKQKKPNk-b6z-h5At0GT67_HVGSH_zHrFFllrl86nNbe6Wdzq94NZf-F1MJaGoURCJt1tbSgFmjtzElKNcOqE7hVjEJiMMIhLF0saBWj6GM/s1600/shadow+Download Disini.jpg" imageanchor="1"><img alt="shadow effect Download Disini" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg26QVVJ7hJrDc5OuxoTAmwjvaTvrUieQPpKKQKKPNk-b6z-h5At0GT67_HVGSH_zHrFFllrl86nNbe6Wdzq94NZf-F1MJaGoURCJt1tbSgFmjtzElKNcOqE7hVjEJiMMIhLF0saBWj6GM/s1600/shadow+Download Disini.jpg" class="reflect" style="margin-left: 1em; margin-right: 1em;" /></a>
Kalau sudah selesai, sekarang klik Publish Post atau terbitkan entri dan lihat hasilnya. Sekian tutorial malam ini semoga tidak ada kesulitan, selamat mencoba dan semoga bermanfaat.
Label:
tutorial blog
Blog Archive
-
▼
2011
(496)
-
▼
Januari
(135)
- Membuat Tampilan Author Berbeda Pada Kotak Komentar
- Modifikasi Kotak Pencarian di Blog
- Menaikkan Traffic Blog Dengan Autosurf Traffic Exc...
- Membuat Subdomain Pada Domain CO.CC
- Membuat Efek Pelangi Pada Link di Blog
- Membuat Artikel Tampil Di Halaman Utama (Post Sticky)
- Membuat Page Flip (Peel Page) di Blog
- Membuat Menu Horisontal Dengan MyCSSMenu
- Cara Import Data Dari Blogspot ke Wordpress
- Memasang Yahoo Messanger di Blog
- Merubah Tampilan Kursor Blogger
- Mengganti Template (Theme) Wordpress
- Membuat Insert More Tag di Wordpress
- Mengenal Nama dan Fungsi Tombol Fasilitas Penyunti...
- Memasang Gambar Pada Pojok Blog
- Memasang Banner Berjajar Horisontal di Blog
- Membuat Acrobatic Horizontal Menu di Blog
- Mengganti Tampilan Huruf di WordPress
- Memasang Emoticon Pada Kotak Komentar di Blog
- Membuat Blog Di WordPress.com
- Cara Install Joomla Via Fantastico
- Cara Install Joomla Manual
- Permudah Mencari Target Hacking Dengan Google ( Go...
- Membuat Tombol Share Post Melayang di Blog
- Membuat Syntax Highlighter di Blog
- Hacker WikiLeaks tentang Perang Cyber
- Membuat Rounded Corner dengan CSS di Blog
- Membuat Tombol Back To Top Di Blogger
- Memasang Tooltip Pada Link di Blog
- Memasang Baloon Tooltip Dengan Kode CSS di Blog
- Mengatur General Settings di Wordpress
- [Tutorial] SQL Injection menggunakan Havij
- Cara Daftar dan Menghasilkan Uang di Neobux
- Membuat Widget Hanya Tampil di Halaman Tertentu
- Membuat Scroll Pada Kotak Komentar Blogger
- Memasang Google CSE di Bawah Posting Blog
- Membuat Teks Berkedip (Blink Text) di Blog
- Membuat Background Gambar di Postingan Blog
- Update Mengaktifkan Plugin Akismet di Wordpress
- Memonitor Pengunjung dengan Google Analytics
- Upload File Themes dan Plugin Wordpress dengan FTP...
- Membuat Kategori Di WordPress
- Membuat Efek Mirror/Reflect Pada Gambar di Blog
- Memasang Alert Message di Blog
- Mengganti Read More Dengan Icon di Blog
- Memasang Bookmark AddThis Di Blog
- Auto play and auto replay youtube embed
- Menghilangkan Icon Quick Edit di Blog
- Cara Membagi Header Menjadi Dua Kolom di Blog
- Modifikasi Blockquote Di Blogspot
- Cara Memasang Tombol "Save as PDF" Di Blogger
- Membuat Dock Menu di Blog
- Mengganti Pager Link Blogger Dengan Icon
- Tutorial CSS Border Padding dan Margin
- Membuat Border Dan Background Template Blogger
- Membuat Reply Pada Kotak Komentar di Blog
- Cara Membuat Internal Link di Blog
- Cara Penempatan Internal Link di Blog
- Optimasi Gambar Untuk SEO Dengan Alt Tag di Blogspot
- Membuat Kolom Iklan Sidebar Ads di Blogspot
- Mengganti Tanggal Posting Dengan Icon di Blog
- Cara Membuat Spolier Di Blogspot
- Memasang Kategori tententu dengan Thumbnail di Blog
- Menambah Dua Kolom Dibawah Postingan
- Cara Merubah Lebar Kolom Template
- Solusi Buat Yahoo Messenger Yang Tidak Keluar Text...
- Memasang Slider Gambar ala Drakon Template
- Memasang Gambar Slide Ala Zinmag Primus
- Memasang Jam di Blogspot
- Memasang Translate Gambar Bendera di Blog
- Membuat Menu Navigasi Horisontal dan Kotak Pencari...
- Membuat Bingkai Tulisan di Blog
- Memasang Menu Slide-In di Blogspot
- Tips Untuk Meningkatkan Google Page Rank
- Google Page Rank Dan Manfaatnya
- SEO Tips dengan Melakukan Blog Ping
- Cara Submit Blog di DMOZ
- 10 Situs Template Blogger Terbaik
- Membackup Template, Widgets dan Artikel Blogger
- Mengganti Header Template Blogger
- Cara Optimasi Tampilan Blog Dengan Template Baru
- Membuat Hosting File Javascript di Google Code
- Menambah Add a Gadget pada Template Blogger
- Menghilangkan Angka Pada Label di Blog
- Meningkatkan Alexa dan Google Page Rank Dengan Gro...
- Membuat Efek Gradiasi Dengan CSS3 di Blog
- Download 20+ set icon RSS pilihan
- Daftar Blog ke Berbagai Search engines
- Cara Daftar Blog di Bing Webmaster Center
- Mengkompress File Gambar di Postingan Blog
- Modifikasi Sidebar di Blogspot
- Memasang Tracker atau Sitemeter di Blog
- Mengenal Area Post Editor Blogger
- Cara Daftar Blog di Google Webmaster Tools
- Memasang Feedjit di Blogspot
- Memasang Widget pada Halaman Tertentu
- Membuat Related Post di Wordpress
- Daftar Blog di Yahoo Site Explorer
- Membuat Form Kontak (Contact Us) Dengan Emailmeform
- XCODE vs Yogyacarderlink
-
▼
Januari
(135)