Cara Simpel Membuat Gambar di blog Bisa di Zooming

Cara Simpel Membuat Gambar di blog Bisa di Zooming

   Selepas kang Roni memberikan tutorial Membuat Link pada Gambar yang bisa dipelajari dengan mudah dan sekarang kang Roni juga akan memberi tutorial yang tidak kalah mudahnya,apa itu?
So pasti sobat udah tahu karena dah membaca judul diatas...
Cara Simpel Membuat Gambar di blog Bisa di Zooming,jadi setiap gambar yang ada diblog sobat nantinya bisa diperbesar dengan cara diklik dan tanpa membuka tab baru,kerenkan!....Sebagai contoh sobat klik aja kang Roni yang lagi narsis dibawah karena blog amburadulnya lagi dibaca oleh para gadis yang lagi browsing..hehheheheeee salam kenalya....kok jadi ngelantur kayak gini.Oke langsung injak tu TKP


Untuk membuatnya sangat simpel sekali sobat tinggal ikutin ni langkah

1.Login Blogger.com
2.Klik Rancangan kemudian klik edit HTML
3.Jangan lupa beri centang pada kotak expand template widget
4.Selanjutnya cari kode </head>
5.Setelah sobat lihat tu kode sobat copy kode css dibawah ini dan taruh diatas kode yang ada pada langkah nomor empat (</head>)

<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>


6.Simpan template dan lihat hasilnya Gambar di blog Bisa di Zooming

Related Post:

6 comments:

naida fayla said...

kok gk disertai ma gmbr
Agk bngung ni kang roni...

roni said...

Kalo yg naida maksud gambar untuk setiap langkah memang kang roni tidak mencantumkan karena utk menghindari loading page yg terlalu lama,tp bila memang sangat dibutuhkan untuk mengikut sertakan gambar dalam setiap langkah insya Alloh kang roni akan membuatnya.

Just Let You Know! said...

Info nya keren gan..terima kasih..
Bagus banget buat saya yang baru belajar..he..

Kutipan Terkini said...

Wah... masi pemula... Ketemu yang segar-segar.
Info yang sangat menarik... Thx u.

http://caracara-tipstrik.blogspot.com/

agus darsana said...

Thanks buat infonya
sangat membantu .....

PERCETAKAN EM MANADO said...

Mas mohon pencerahanya, saya sudah terapkan kok gak work ya? apa ada yg salah proses penempatan kode saya, jika berkenan mohon bantuanya, blog saya www.percetakan-em.com

Post a Comment