Daftar 100% free dan dapatkan dollar dengan mudah no tipu

Adsense Indonesia
READ ME
jika anda suka dengan artikel milik saya mohon ,,bila anda ingin mengcopy paste kan artikel nya berikan sumber nya trimakasi salam admin
jangan lupa kunjungin blog saya yg satu nya lagi loekman is the best||~||[sharing Cheat NS,,software full,tips N trick dll]

Please,,Demi blog ini klik iklan di bawah ini ya

Kamis, 15 September 2011

Tips Memperbesar Gambar (zoom),Saat Pointer Mouse Berada di Atasnya


Bagi saya,blog tutorial blogspot ini ibarat rumah,pulau bahkan hewan peliharaan yang mana akan 'sengsara' saat kita menelantarkannya juga tak memperdulikan kesehatannya.
Namun tak jarang ya sob,beberapa blog tutorial yang sulit untuk dinikmati karena salah satu penyebabnya adalah penulis blog tersebut tidak memberikan akses untuk melihat lebih jelas gambar yang ia posting.
Misal seperti gambar terlalu kecil dan tidak diberikannya anchor link untuk akses gambar ukuran aslinya pada jendela baru.Dan saya pikir masalah seperti ini dapat berpengaruh terhadap kenyamanan visitor dalam menikmati blog yang kita miliki.

Nah,berikut tips yang tak kalah menarik dalam belajar mempercantik dan menghias blog,betul gan,trik meperbesar (zoom) gambar atau image pada blogger secara otomatis hanya dengan meletakkan pointer mouse di atasnya dan mengkliknya..Ini saya dapat dari sebuah blog yang bagus banget di www.roadrash.no


Contohnya,klik aja gambar-gambar dibawah ini ya:



Highslide JSHighslide JS



Langkah Cara Membuat Zoom Gambar / Image Blog Blogspot


Seperti biasa gan,teknik zoom gambar blog ini kita menggunakan metode css javascript.
Pertama,sobat blogger pergi ke sawangan depok,eits salah zoom gambar image blog.,maksud ane pergi ke dashboardlalu pilih tata letak / rancangan (gb1) kemudian edit html (gb2) dan checklist (contreng) tulisanexpand widget templates (gb3) lihat gambar aja ya :D
Membuat Zooming Gambar untuk Blogger.
gb1


Membuat Effek Zoom Gambar di Blog.
gb2


Membuat efek ZOOM Gambar Blogspot.
gb3


Kemudian,cari kode </head> dan tepat diatasnya letakkan barisan kode css berikut:

<script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/zoompelajaranblog-fullzoomlengkapbanget.js' type='text/javascript'/>
<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="http://www.roadrash.no/hs-support/highslide/highslide-ie6.css" /> <![endif]-->
<script type='text/javascript'>
//<![CDATA[
hs.graphicsDir = 'http://www.roadrash.no/hs-support/highslide/graphics/';
hs.wrapperClassName = 'borderless';
hs.align = 'center';
hs.dimmingOpacity = 0.65;
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
// close button
hs.registerOverlay({
html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
position: 'top right',
fade: 2 // fading the semi-transparent overlay looks bad in IE
});
hs.isUnobtrusiveAnchor = function(el) {
if (el.href && /.(jpg|gif|png)$/.test(el.href) && !el.onclick) {
el.className = 'highslide'; // for the zoom-in cursor
el.title = 'Click to enlarge'; // for title
return 'image';
}
};
if (hs.addEventListener && hs.Outline) hs.addEventListener(window, 'load', function () {

new hs.Outline('rounded-white');

new hs.Outline('glossy-dark');

});
// The gallery example on the front page
var galleryOptions = {

slideshowGroup: 'gallery',

wrapperClassName: 'dark',

//outlineType: 'glossy-dark',
dimmingOpacity: 0.8,
align: 'center',
transitions: ['expand', 'crossfade'],
fadeInOut: true,
wrapperClassName: 'borderless floating-caption',
marginLeft: 100,
marginBottom: 80,
numberPosition: 'caption'

};
if (hs.addSlideshow) hs.addSlideshow({
slideshowGroup: 'gallery',
interval: 5000,
repeat: false,
useControls: true,
overlayOptions: {
className: 'text-controls',
position: 'bottom center',
relativeTo: 'viewport',
offsetY: -60
},
thumbstrip: {
position: 'bottom center',
mode: 'horizontal',
relativeTo: 'viewport'
}
});
hs.Expander.prototype.onInit = function() {
hs.marginBottom = (this.slideshowGroup == 'gallery') ? 150 : 15;
}
// focus the name field
hs.Expander.prototype.onAfterExpand = function() {

if (this.a.id == 'contactAnchor') {
var iframe = window.frames[this.iframe.name],
doc = iframe.document;
if (doc.getElementById("theForm")) {
doc.getElementById("theForm").elements["name"].focus();

}
}
}

//]]>
</script>
<style type='text/css'>
pre {
background: white;
padding: 5px;
font-size: 10.9px;
}
</style>


Setelah itu sobat simpan templates ya.
Selanjutnya,untuk menampilkannya sobat bisa letakkan kode berikut di postingan sobat (ini hanya contoh saja)

<div class="thumbwrapper">
<a class="highslide" href="http://1.bp.blogspot.com/-HnBZZrw91HA/TiKkxoOWiGI/AAAAAAAAA34/KY-2AU7-Ktk/s1600/pohon%2Bpelajaran%2Bblog%2Bzoom%2Bgambar.jpg" onclick="return hs.expand(this, galleryOptions)"><img alt="Highslide JS" src="http://1.bp.blogspot.com/-HnBZZrw91HA/TiKkxoOWiGI/AAAAAAAAA34/KY-2AU7-Ktk/s1600/pohon%2Bpelajaran%2Bblog%2Bzoom%2Bgambar.jpg" height="150" width="150" title="Click to enlarge" />
</a><a class="highslide" href="http://1.bp.blogspot.com/-3kr3pA6UAQc/TiKkxmuy8UI/AAAAAAAAA4A/-JQNIZQh9mc/s1600/pohon%2Bpelajaran%2Bblog%2Bzoom%2Bgambar%2B2.jpg" onclick="return hs.expand(this, galleryOptions)"><img alt="Highslide JS" src="http://1.bp.blogspot.com/-3kr3pA6UAQc/TiKkxmuy8UI/AAAAAAAAA4A/-JQNIZQh9mc/s1600/pohon%2Bpelajaran%2Bblog%2Bzoom%2Bgambar%2B2.jpg" height="150" width="150" title="Click to enlarge" />
</a>
</div>

Ket:
Tulisan berwarna merah sobat ganti ya dengan url / alamat dari gambar yang sobat telah upload di blogger atau dari suatu situs.
Moga berhasil dan met berpusinx ria ya :D see you!!

1 komentar:

carikost mengatakan...

makasih gan, ane ud nyari nyari ini dari tadi. sekalian ijin test emot kaskusnya. :malu

:cendolbig :batabig :ilovekaskus :kiss :najis :marah :repost :sup2 :takut :shakehand2 :hammer :toast :cystg :selamat :2thumbup :matabelo :request :babyboy1 :sorry :travel :kimpoi :ultah :rate5 :bola :kbgt :iloveindonesia :maho :nosara :berduka :ngakak :recsel :ngacir2 :bingung :cd :peluk :hoax :dp :malu :cekpm :thumbup :angel1 :kr :nohope :ngacir :salahkamar :cool :sup :mewek :babyboy :babygirl

Poskan Komentar