Dhecun Blog: Pada

Showing posts with label Pada. Show all posts

Mengenal Elemen Pada Kode HTML Blog

Font Properties
Property	Valid Values	Example
font-family	[font name or type]	font-family: Verdana, Arial;
font-style	normal \| italic	font-style:italic;
font-variant	normal \| small-caps	font-variant:small-caps;
font-weight	normal \| bold	font-weight:bold;
font-size	[ xx-large \| x-large \| large \| medium \| small \| x-small \| xx-small ] \| [ larger \| smaller ] \| percentage \| length	font-size:12pt;
font	[ font-style \|\| font-variant \|\| font-weight ] ? font-size [ / line-height ] ? font-family	font: bold 12pt Arial;

Color and Background Properties
Property	Valid Values	Example
color	color	color: red
background-color	color \| transparent	background-color: yellow
background-image	url \| none	background-image: url(house.jpg)
background-repeat	repeat \| repeat-x \| repeat-y \| no-repeat	background-repeat: no-repeat
background-attachment	scroll \| fixed	background-attachment: fixed
background-position	[ position \| length ] \| {1,2} \| [ top \| center \| bottom ] \|\| [ left \| center \| right ]	background-position: top center
background	transparent \| color \|\| url \|\| repeat \|\| scroll \|\| position	background: silver url(house.jpg) repeat-y

Text Properties
Property	Valid Values	Example
letter-spacing	normal \| length	letter-spacing:5pt
text-decoration	none \| underline \| overline \| line-through	text-decoration:underline
vertical-align	sub \| super \|	vertical-align:sub
text-transform	capitalize \| uppercase \| lowercase \| none	text-transform:lowercase
text-align	left \| right \| center \| justify	text-align:center
text-indent	length \| percentage	text-indent:25px
line-height	normal \| number \| length \| percentage	line-height:15pt

Box Properties
Property	Valid Values	Example
margin-top	length \| percentage \| auto	margin-top:5px
margin-right	length \| percentage \| auto	margin-right:5px
margin-bottom	length \| percentage \| auto	margin-bottom:1em
margin-left	length \| percentage \| auto	margin-left:5pt
margin	length \| percentage \| auto {1,4}	margin: 10px 5px 10px 5px
padding-top	length \| percentage	padding-top:10%
padding-right	length \| percentage	padding-right:15px
padding-bottom	length \| percentage	padding-bottom:1.2em
padding-left	length \| percentage	padding-left:10pt; }
padding	length \| percentage {1,4}	padding: 10px 10px 10px 15px
border-top-width	thin \| medium \| thick \| length	border-top-width:thin
border-right-width	thin \| medium \| thick \| length	border-right-width:medium
border-bottom-width	thin \| medium \| thick \| length	border-bottom-width:thick
border-left-width	thin \| medium \| thick \| length	border-left-width:15px
border-width	thin \| medium \| thick \| length {1,4}	border-width: 3px 5px 3px 5px
border-top-color	color	border-top-color:navajowhite
border-right-color	color	border-right-color:whitesmoke
border-bottom-color	color	border-bottom-color:black
border-left-color	color	border-left-color:#C0C0C0
border-color	color {1,4}	border-color: green red white blue; }
border-top-style	none \| solid \| double \| groove \| ridge \| inset \| outset	border-top-style:solid
border-right-style	none \| solid \| double \| groove \| ridge \| inset \| outset	border-right-style:double
border-bottom-style	none \| solid \| double \| groove \| ridge \| inset \| outset	border-bottom-style:groove
border-left-style	none \| solid \| double \| groove \| ridge \| inset \| outset	border-left-style:none
border-style	none \| solid \| double \| groove \| ridge \| inset \| outset	border-style:ridge; }
border-top	border-width \| border-style \| border-color	border-top: medium outset red
border-right	border-width \| border-style \| border-color	border-right: thick inset maroon
border-bottom	border-width \| border-style \| border-color	border-bottom: 10px ridge gray
border-left	border-width \| border-style \| border-color	border-left: 1px groove red
border	border-width \| border-style \| border-color	border: thin solid blue
float	none \| left \| right	float:none
clear	none \| left \| right \| both	clear:left

Classification Properties
Property	Valid Values	Example
display	none \| block \| inline \| list-item	display:none
list-style-type	disk \| circle \| square \| decimal \| lower-roman \| upper-roman \| lower-alpha \| upper-alpha \| none	list-style-type:upper-alpha
list-style-image	url \| none	list-style-image:url(icFile.gif)
list-style-position	inside \| outside	list-style-position:inside
list-style	keyword \|\| position \|\| url	list-style: square outside url(icFolder.gif)

Positioning Properties
Property	Valid Values	Example	Applies to
clip	shape \| auto	clip:rect(0px 200px 200px 0px)	all elements
height	length \| auto	height:200px	DIV, SPAN and replaced elements
left	length \| percentage \| auto	left:0px	absolutely and relatively positioned elements
overflow	visible \| hidden \| scroll \| auto	overflow:scroll	all elements
position	absolute\| relative \| static	position:absolute	all elements
top	length \| percentage \| auto	top:0px	absolutely and relatively positioned elements
visibility	visible \| hidden \| inherit	visibility:visible	all elements
width	length \| percentage \| auto	width:80%	DIV, SPAN and replaced elements
z-index	auto \| integer	z-index:-1	absolutely and relatively positioned elements

Printing Properties
Property	Valid Values	Example
page-break-before	auto \| always \|\| left \| right	page-break-before:always
page-break-after	auto \| always \|\| left \| right	page-break-before:auto

Pseudo Classes
Property	Valid Values	Example
cursor	auto \| crosshair \| default \| hand \| move \| e-resize \| ne-resize \| nw-resize \| n-resize \| se-resize \| sw-resize \| s-resize \| w-resize \| text \| wait \| help	{ cursor:hand; }
active, hover, link, visited	n/a	a:hover { color:red; }
first-letter, first-line	any font manipulating declaration	p:first-letter{ float:left;color:blue }

Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Membuat Toggle Pada Sidebar Blog Dengan jQuery

Sebagai contoh dari toggle dengan JQuery ini bisa anda lihat pada widget yang berada di bawah blog ini dengan judul "Profil Admin ◄[ Show / Hide ]► Berlangganan Artikel".

Jika anda tertarik untuk membuatnya , silahka ikuti langkah berikut ini :

1. Login ke akun Blogger anda
2. Pilih Template
3. Pilih Edit HTML
4. Centang Expand Template Widget
5. Tekan tombol Ctrl+F
6. Cari kode ]]></b:skin>
7. Masukkan script dibawah ini tepat diatas kode ]]></b:skin>

/*=== Toggle Sidebar jQuery ===*/
#toggle-sidebar {}
#toggle-sidebar h2 {cursor:pointer; display:block;}
#toggle-sidebar h2:hover {opacity: 0.75; -o-opacity: 0.75; -moz-opacity: 0.75; -webkit-opacity: 0.75; filter: alpha(opacity=75);}
#toggle-sidebar h2:active {color:#333} /*warna huruf ketika aktif*/
.toggle-content {}

8. Kemudian masukkan script dibawah ini tepat dibawah kode ]]></b:skin

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
jQuery(document).ready(function(){ 
    jQuery(".toggle-content").hide(); 
    jQuery("#toggle-sidebar>h2").click(function(){ 
        jQuery(this).toggleClass("active").next().slideToggle("slow");
    }); 
}); 
</script>

Catatan : Jika anda sudah menggunakan script JQuery , hapus salah satu script diatas.
9. Kemudian cari kode widget yang akan dibuatkan toggle , tiap template kadang berbeda , cari kode yang mirip dibawah ini :

<b:includable id='main'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
        <h2 class='title'><data:title/></h2>
    </b:if>
    <div class='widget-content'>
        <data:content/>
    </div>
    <b:include name='quickedit'/>
</b:includable>

10. Jika sudah ketemu , tambahkan kode berwarna merah sehingga menjadi seperti dibawah ini :

<b:includable id='main'>
<div id='toggle-sidebar'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
        <h2 class='title'><data:title/></h2>
    </b:if>
<div class='toggle-content'>
    <div class='widget-content'>
        <data:content/>
    </div>
</div><!--/toggle-content-->
</div><!--/toggle-sidebar-->
    <b:include name='quickedit'/>
</b:includable>

11. Klik pratinjau , jika sudah OK , klik simpan template

Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Membuat Peta Situs Pada Sidebar Blog

Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda
2. Pilih Tata Letak >> Tambah Gadget >> HTML/JavaScript
3. Masukkan script dibawah ini
4. Klik simpan

<div style="background-color: #e0e0e0;-moz-border-radius: 5px;border-radius: 5px; border: 1px solid #3b5998;"><br/><div style="overflow:auto; padding-left:5px; width:100%; height:250px;">
<script language="javascript">
numposts=1000;
home_page="NamaBlogAnda.blogspot.com";
explanpost="Baru..!";
</script>
<ul><script style="text/javascript" src="http://enes-sc.googlecode.com/files/sitemap-np.js"></script></ul>
</div><br/></div>
<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/12/membuat-peta-situs-pada-sidebar-blog.html" target="_blank"><span style="font-size: xx-small;"><span style="font-size: xx-small;"><span style="text-shadow:1px 1px 1px #333;">[ Widget by Dhecun Blog ]</span></span></a></div>

Keterangan :
Silahkan anda ganti tulisan warna merah sesuai keinginan anda.

Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Membuat Label Tag Cloud Animasi Pada Sidebar Blog

Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda
2. Pilih Template
3. Pilih Edit HTML
4. Centang Expand Template Widget
5. Tekan tombol Ctrl+F
6. Cari kode berikut :

<b:section class='sidebar' id='sidebar' preferred='yes'>

7. Masukkan script dibawah ini tepat dibawah kode tersebut

<b:widget id='Label99' locked='false' title='Label Tag Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://sites.google.com/site/ruangsc/enes/swfobject.js' type='text/javascript'/>
<div id='flashcontent'><a href='http://dhecun.blogspot.com/2012/12/membuat-label-tag-cloud-animasi-pada.html'><span style="font-size: xx-small;">[ Widget by Dhecun Blog ]</span></a></div>
<script type='text/javascript'>
var so = new SWFObject("http://sites.google.com/site/ruangsc/enes/tagcloud.swf", "tagcloud", "240", "240", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

8. Lakukan Pratinjau , jika sudah OK , klik simpan template

Keterangan :
Pada script di atas sudah di setting sebagai berikut (lihat tulisan warna merah) :
- Lebar widget : 240px
- Tinggi widget : 240px
- Warna latar : putih atau #ffffff
- Warna huruf : abu gelap atau 0x333333
- Ukuran huruf : 12
Anda dapat mengubah settingan tersebut disesuaikan dengan latar template dan lebar sidebar blog anda.
Misalnya mengubah warna latar menjadi hitam ditulis #000000 dan mengubah warna huruf menjadi putih ditulis 0xffffff
(mengenai kode warna silahkan baca artikel ini).

Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Membuat Redirect Pada Link Anchor Text

Maksud dari judul yang saya pakai pada posting kali ini adalah jika kursor diarahkan ke tulisan yang tercantum alamat link tertentu maka secara otomatis halaman akan mengalihkan / redirect ke halaman lain (tanpa link di klik).
Contohnya seperti link dibawah ini , coba arahkan kursor anda pada link tersebut , maka anda akan langsung di redirect ke alamat link yang saya cantumkan dinawah ini.

Arahkan kursor anda kesini

Kode :

<a href="http://dhecun.blogspot.com/2012/12/membuat-egg-share-slide-open-widget-di.html" onmouseover="window.location=this.href" target="_blank" title="tooltip mu">Arahkan kursor anda kesini</a>
<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/12/membuat-redirect-pada-link-anchor-text.html" target="_blank"><span style="font-size: xx-small;">[ Get Widget ]</span></a></div>

Catatan :
Ganti tulisan warna merah dengan alamat link yang anda inginkan.
Ganti tulisan warna biru dengan teks yang anda inginkan.

Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Membuat Snipping Pada Gambar Komentator Blogger

Maksud dari kata "Snipping" pada posting kali ini adalah ketika kursor diarahkan ke avatar komentator / gambar komentator maka avatar komentator tersebut akan berputar sebanyak 1 putaran.Keren bukan...?

Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda
2. Pilih Tata Letak >> Add Gadget >> HTML/JavaScript
3. Masukkan script dibawah ini
4. Klik simpan

Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Script Energy Saving Mode pada blog

Energy Saving Mode merupakan kondisi dimana tampilan blog akan menjadi gelap jika tidak ada aktivitas dari kita atau dari pengunjung blog itu sendiri dan akan kembali normal ke tampilan awal jika sudah ada aktivitas dari kita atau pengunjung blog itu sendiri.

Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda

2. Pilih Template

3. Pilih Edit HTML

4. Download Template Lengkap terlebih dahulu untuk berjaga-jaga jika terjadi kesalahan

5. Centang Expand Template Widget

6. Tekan tombol Ctrl+F

7. Cari kode </head>

8. Masukkan script dibawah ini diatas kode </head>

<script language="javascript" type="text/javascript" src="http://blog-dhecun.googlecode.com/files/widget%20energy%20saving%20mode.js"></script>

9. Klik simpan template

Semoga bermanfaat...!!!

Script kotak scroll pada blog

Kotak scrollbar adalah sebuah kotak yang bisa digulung kekanan atau kebawah sehingga bisa menghemat ruangan pada blog.

1. Kotak scroll menggunakan background warna putih :

Kode :

<div style="overflow:auto; padding:5px; width:150px; height:100px; background-color: #ffffff;-moz-border-radius: 5px;border-radius: 5px; border:1px solid #ccc;">Kotak scrollbar adalah sebuah kotak yang bisa digulung kekanan atau kebawah sehingga bisa menghemat ruangan pada blog</div><div style="text-align: right;"><a href="http://dhecun.blogspot.com/2012/11/script-kotak-scroll-pada-blog.html" target="_blank"><span style="font-size: xx-small;">[ Widget by Dhecun Blog ]</span></a></div>

2. Kotak scroll menggunakan background warna lain :

Kotak scrollbar adalah sebuah kotak yang bisa digulung kekanan atau kebawah sehingga bisa menghemat ruangan pada blog...
Kotak scrollbar adalah sebuah kotak yang bisa digulung kekanan atau kebawah sehingga bisa menghemat ruangan pada blog...
Kotak scrollbar adalah sebuah kotak yang bisa digulung kekanan atau kebawah sehingga bisa menghemat ruangan pada blog...
Kotak scrollbar adalah sebuah kotak yang bisa digulung kekanan atau kebawah sehingga bisa menghemat ruangan pada blog...
Kotak scrollbar adalah sebuah kotak yang bisa digulung kekanan atau kebawah sehingga bisa menghemat ruangan pada blog...
Kotak scrollbar adalah sebuah kotak yang bisa digulung kekanan atau kebawah sehingga bisa menghemat ruangan pada blog...
Kotak scrollbar adalah sebuah kotak yang bisa digulung kekanan atau kebawah sehingga bisa menghemat ruangan pada blog...
Kotak scrollbar adalah sebuah kotak yang bisa digulung kekanan atau kebawah sehingga bisa menghemat ruangan pada blog...
Kotak scrollbar adalah sebuah kotak yang bisa digulung kekanan atau kebawah sehingga bisa menghemat ruangan pada blog...
Kotak scrollbar adalah sebuah kotak yang bisa digulung kekanan atau kebawah sehingga bisa menghemat ruangan pada blog...
Kotak scrollbar adalah sebuah kotak yang bisa digulung kekanan atau kebawah sehingga bisa menghemat ruangan pada blog...
Kotak scrollbar adalah sebuah kotak yang bisa digulung kekanan atau kebawah sehingga bisa menghemat ruangan pada blog...
Kotak scrollbar adalah sebuah kotak yang bisa digulung kekanan atau kebawah sehingga bisa menghemat ruangan pada blog...

Kode :

<div style="background-color: #e0e0e0;-moz-border-radius: 5px;border-radius: 5px; height: 200px; overflow: auto; padding: 5px; width: 475px;">Kotak scrollbar adalah sebuah kotak yang bisa digulung kekanan atau kebawah sehingga bisa menghemat ruangan pada blog</div><div style="text-align: right;"><a href="http://dhecun.blogspot.com/2012/11/script-kotak-scroll-pada-blog.html" target="_blank"><span style="font-size: xx-small;">[ Widget by Dhecun Blog ]</span></a></div>

Catatan :
Ganti tulisan warna merah dan kode warna biru sesuai dengan keinginan anda.

Semoga bermanfaat...!!!

Pasang Widget Otomatis

Submit Web / Blog Ke 20+ Search Engines

Cek Ukuran dan Kecepatan Loading Blog / Web

Update Artikel Dhecun Blog

Berlangganan Artikel Gratis Lewat Email

Berlangganan artikel via email.

Dapatkan update artikel terbaru dari Dhecun Blog

yang akan dikirim ke email anda secara gratis...!

Jangan lupa buka Email anda untuk verifikasi.

RSS feeds

Space Iklan

Pasang Iklan

Kategori pasang iklan

Rp.10.000 per bulan
Rp.100.000 per tahun
Judul iklan
Deskripsi iklan
Gambar (220x150)

Iklan Sponsor 1

About Me

Profil Google+
My Facebook
Kirim SMS Gratis
Download Gratis
Print

Contact

Contact on Email
Contact on Facebook

Rekomendasi

Follow

Follow this blog

RSS feeds

RSS
Post RSS
Comments RSS

Widget Populer

Widget Zoom Detail Gambar

.magnifyarea{ /* CSS to add shadow to magnified image. Optional */
box-shadow: 5px 5px 7px #818181;
-webkit-box-shadow: 5px 5px 7px #818181;
-moz-box-shadow: 5px 5px 7px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
background: white;
}

</style>

/***********************************************
* Frame dcode

***********************************************/

</script>

jQuery(document).ready(function($){

$('#image1').addimagezoom({
  zoomrange: [3, 30],
  magnifiersize: [500,500],
  magnifierpos: 'right',
  cursorshade: true,
  largeimage: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSjU2O8BeMy8MvPmMYlB_xUs08Ebhn8Brb2wbGfp52nkvrSLS8vPCtxu_iHbXQOSjzpn14BZ5B7F8n8TOjDClFgh2mLenlkAzGT_4AP5qrFQhNFtNaJnUjWYTpl-RCEWnmrog05W7JuHM/s1600/DhecunBlog.png' //<-- No comma after last option!
 })

$('#image2').addimagezoom({
  zoomrange: [5, 5],
  magnifiersize: [400,400],
  magnifierpos: 'right',
  cursorshade: true,
  cursorshadecolor: 'pink',
  cursorshadeopacity: 0.3,
  cursorshadeborder: '1px solid red',
  largeimage: 'alamat gambar 2' //<-- No comma after last option!
 })

$('#image3').addimagezoom()

})

</script>

// feb 2 12
// modifikasi script

jQuery.noConflict()

jQuery('head').append('<style type="text/css">.featuredimagezoomerhidden {visibility: hidden!important;}</style>');

var featuredimagezoomer={
 loadinggif: 'spinningred.gif', //full path or URL to "loading" gif
 magnifycursor: 'crosshair', //Value for CSS's 'cursor' attribute, added to original image

/////NO NEED TO EDIT BEYOND HERE////////////////
 dsetting: { //default settings
   magnifierpos: 'right',
   magnifiersize:[200, 200],
   cursorshadecolor: '#fff',
   cursorshadeopacity: 0.3,
   cursorshadeborder: '1px solid black',
   cursorshade: false,
   leftoffset: 15, //offsets here are used (added to) the width of the magnifyarea when
   rightoffset: 10 //calculating space requirements and to position it visa vis any drop shadow
  },
 isie: (function(){/*@cc_on @*//*@if(@_jscript_version >= 5)return true;@end @*/return false;})(), //is this IE?

showimage: function($, $tracker, $mag, showstatus){
  var specs=$tracker.data('specs'), d=specs.magpos, fiz=this;
  var coords=$tracker.data('specs').coords //get coords of tracker (from upper corner of document)
  specs.windimensions={w:$(window).width(), h:$(window).height()}; //remember window dimensions
  var magcoords={} //object to store coords magnifier DIV should move to
  magcoords.left = coords.left + (d === 'left'? -specs.magsize.w - specs.lo : $tracker.width() + specs.ro);
  //switch sides for magnifiers that don't have enough room to display on the right if there's room on the left:
  if(d!=='left' && magcoords.left + specs.magsize.w + specs.lo >= specs.windimensions.w && coords.left - specs.magsize.w >= specs.lo){
   magcoords.left = coords.left - specs.magsize.w - specs.lo;
  } else if(d==='left' && magcoords.left < specs.ro) { //if there's no room on the left, move to the right
   magcoords.left = coords.left + $tracker.width() + specs.ro;
  }
  $mag.css({left: magcoords.left, top:coords.top}).show(); //position magnifier DIV on page
  specs.$statusdiv.html('Current Zoom: '+specs.curpower+'<div style="font-size:100%">Use Mouse Wheel to Zoom In/Out</div>');
  if (showstatus) //show status DIV? (only when a range of zoom is defined)
   fiz.showstatusdiv(specs, 400, 2000);
 },

hideimage: function($tracker, $mag, showstatus){
  var specs=$tracker.data('specs');
  $mag.hide();
  if (showstatus)
   this.hidestatusdiv(specs);
 },

showstatusdiv: function(specs, fadedur, showdur){
  clearTimeout(specs.statustimer)
  specs.$statusdiv.fadeIn(fadedur) //show status div
  specs.statustimer=setTimeout(function(){featuredimagezoomer.hidestatusdiv(specs)}, showdur) //hide status div after delay
 },

hidestatusdiv: function(specs){
  specs.$statusdiv.stop(true, true).hide()
 },

getboundary: function(b, val, specs){ //function to set x and y boundaries magnified image can move to (moved outside moveimage for efficiency)
  if (b=="left"){
   var rb=-specs.imagesize.w*specs.curpower+specs.magsize.w
   return (val>0)? 0 : (val<rb)? rb : val
  }
  else{
   var tb=-specs.imagesize.h*specs.curpower+specs.magsize.h
   return (val>0)? 0 : (val<tb)? tb : val
  }
 },

moveimage: function($tracker, $maginner, $cursorshade, e){
  var specs=$tracker.data('specs'), csw = Math.round(specs.magsize.w/specs.curpower), csh = Math.round(specs.magsize.h/specs.curpower),
  csb = specs.csborder, fiz = this, imgcoords=specs.coords, pagex=(e.pageX || specs.lastpagex), pagey=(e.pageY || specs.lastpagey),
  x=pagex-imgcoords.left, y=pagey-imgcoords.top;
  $cursorshade.css({ // keep shaded area sized and positioned proportionately to area being magnified
   visibility: '',
   width: csw,
   height: csh,
   top: Math.min(specs.imagesize.h-csh-csb, Math.max(0, y-(csb+csh)/2)) + imgcoords.top,
   left: Math.min(specs.imagesize.w-csw-csb, Math.max(0, x-(csb+csw)/2)) + imgcoords.left
  });
  var newx=-x*specs.curpower+specs.magsize.w/2 //calculate x coord to move enlarged image
  var newy=-y*specs.curpower+specs.magsize.h/2
  $maginner.css({left:fiz.getboundary('left', newx, specs), top:fiz.getboundary('top', newy, specs)})
  specs.$statusdiv.css({left:pagex-10, top:pagey+20})
  specs.lastpagex=pagex //cache last pagex value (either e.pageX or lastpagex), as FF1.5 returns undefined for e.pageX for "DOMMouseScroll" event
  specs.lastpagey=pagey
 },

magnifyimage: function($tracker, e, zoomrange){
  var delta=e.detail? e.detail*(-120) : e.wheelDelta //delta returns +120 when wheel is scrolled up, -120 when scrolled down
  var zoomdir=(delta<=-120)? "out" : "in"
  var specs=$tracker.data('specs')
  var magnifier=specs.magnifier, od=specs.imagesize, power=specs.curpower
  var newpower=(zoomdir=="in")? Math.min(power+1, zoomrange[1]) : Math.max(power-1, zoomrange[0]) //get new power
  var nd=[od.w*newpower, od.h*newpower] //calculate dimensions of new enlarged image within magnifier
  magnifier.$image.css({width:nd[0], height:nd[1]})
  specs.curpower=newpower //set current power to new power after magnification
  specs.$statusdiv.html('Current Zoom: '+specs.curpower)
  this.showstatusdiv(specs, 0, 500)
  $tracker.trigger('mousemove')
 },

init: function($, $img, options){
  var setting=$.extend({}, this.dsetting, options), w = $img.width(), h = $img.height(), o = $img.offset(),
  fiz = this, $tracker, $cursorshade, $statusdiv, $magnifier, lastpage = {pageX: 0, pageY: 0};
  setting.largeimage = setting.largeimage || $img.get(0).src;
  $magnifier=$('<div class="magnifyarea" style="position:absolute;width:'+setting.magnifiersize[0]+'px;height:'+setting.magnifiersize[1]+'px;left:-10000px;top:-10000px;visibility:hidden;overflow:hidden;border:1px solid black;" />')
   .append('<div style="position:relative;left:0;top:0;" />')
   .appendTo(document.body) //create magnifier container
  //following lines - create featured image zoomer divs, and absolutely positioned them for placement over the thumbnail and each other:
  if(setting.cursorshade){
   $cursorshade = $('<div class="cursorshade" style="visibility:hidden;position:absolute;left:0;top:0;" />')
    .css({border: setting.cursorshadeborder, opacity: setting.cursorshadeopacity, backgroundColor: setting.cursorshadecolor})
    .appendTo(document.body);
  } else {
   $cursorshade = $('<div />'); //dummy shade div to satisfy $tracker.data('specs')
  }
  $statusdiv = $('<div class="zoomstatus preloadevt" style="position:absolute;visibility:hidden;left:0;top:0;" />')
   .html('<img src="'+this.loadinggif+'" />')
   .appendTo(document.body); //create DIV to show "loading" gif/ "Current Zoom" info
  $tracker = $('<div class="zoomtracker" style="cursor:progress;position:absolute;left:'+o.left+'px;top:'+o.top+'px;height:'+h+'px;width:'+w+'px;" />')
   .css({backgroundImage: (this.isie? 'url(cannotbe)' : 'none')})
   .appendTo(document.body);
  $(window).resize(function(){ //in case resizing the window repostions the image
    var o = $img.offset();
    $tracker.css({left: o.left, top: o.top});
   });

function getspecs($maginner, $bigimage){ //get specs function
   var magsize={w:$magnifier.width(), h:$magnifier.height()}
   var imagesize={w:w, h:h}
   var power=(setting.zoomrange)? setting.zoomrange[0] : ($bigimage.width()/w).toFixed(5)
   $tracker.data('specs', {
    $statusdiv: $statusdiv,
    statustimer: null,
    magnifier: {$outer:$magnifier, $inner:$maginner, $image:$bigimage},
    magsize: magsize,
    magpos: setting.magnifierpos,
    imagesize: imagesize,
    curpower: power,
    coords: getcoords(),
    csborder: $cursorshade.outerWidth(),
    lo: setting.leftoffset,
    ro: setting.rightoffset
   })
  }

function getcoords(){ //get coords of thumb image function
   var offset=$tracker.offset() //get image's tracker div's offset from document
   return {left:offset.left, top:offset.top}
  }

$tracker.mouseover(function(e){
     $cursorshade.add($magnifier).add($statusdiv).removeClass('featuredimagezoomerhidden');
     $tracker.data('premouseout', false);
   }).mouseout(function(e){
     $cursorshade.add($magnifier).add($statusdiv.not('.preloadevt')).addClass('featuredimagezoomerhidden');
     $tracker.data('premouseout', true);
   }).mousemove(function(e){ //save tracker mouse position for initial magnifier appearance, if needed
    lastpage.pageX = e.pageX;
    lastpage.pageY = e.pageY;
   });

$tracker.one('mouseover', function(e){
   var $maginner=$magnifier.find('div:eq(0)')
   var $bigimage=$('<img src="'+setting.largeimage+'"/>').appendTo($maginner)
   var showstatus=setting.zoomrange && setting.zoomrange[1]>setting.zoomrange[0]
   $img.css({opacity:0.1}) //"dim" image while large image is loading
   var imgcoords=getcoords()
   $statusdiv.css({left:imgcoords.left+w/2-$statusdiv.width()/2, top:imgcoords.top+h/2-$statusdiv.height()/2, visibility:'visible'})
   $bigimage.bind('loadevt', function(){ //magnified image ONLOAD event function (to be triggered later)
    $img.css({opacity:1}) //restore thumb image opacity
    $statusdiv.empty().css({border:'1px solid black', background:'#C0C0C0', padding:'4px', font:'bold 13px Arial', opacity:0.8}).hide().removeClass('preloadevt');
    if($tracker.data('premouseout')){
     $statusdiv.addClass('featuredimagezoomerhidden');
    }
    if (setting.zoomrange){ //if set large image to a specific power
     var nd=[w*setting.zoomrange[0], h*setting.zoomrange[0]] //calculate dimensions of new enlarged image
     $bigimage.css({width:nd[0], height:nd[1]})
    }
    getspecs($maginner, $bigimage) //remember various info about thumbnail and magnifier
    $magnifier.css({display:'none', visibility:'visible'})
    $tracker.mouseover(function(e){ //image onmouseover
     $tracker.data('specs').coords=getcoords() //refresh image coords (from upper left edge of document)
     fiz.showimage($, $tracker, $magnifier, showstatus)
    })
    $tracker.mousemove(function(e){ //image onmousemove
     fiz.moveimage($tracker, $maginner, $cursorshade, e)
    })
    if (!$tracker.data('premouseout')){
     fiz.showimage($, $tracker, $magnifier, showstatus);
     fiz.moveimage($tracker, $maginner, $cursorshade, lastpage);
    }
    $tracker.mouseout(function(e){ //image onmouseout
     fiz.hideimage($tracker, $magnifier, showstatus)
    }).css({cursor: fiz.magnifycursor});
    if (setting.zoomrange && setting.zoomrange[1]>setting.zoomrange[0]){ //if zoom range enabled
     $tracker.bind('DOMMouseScroll mousewheel', function(e){
      fiz.magnifyimage($tracker, e, setting.zoomrange);
      e.preventDefault();
     });
    }
   }) //end $bigimage onload
   if ($bigimage.get(0).complete){ //if image has already loaded (account for IE, Opera not firing onload event if so)
    $bigimage.trigger('loadevt')
   }
   else{
    $bigimage.bind('load', function(){$bigimage.trigger('loadevt')})
   }
  })
 },

iname: (function(){var itag = jQuery('<img />'), iname = itag.get(0).tagName; itag.remove(); return iname;})()
};

jQuery.fn.addimagezoom=function(options){
 var $=jQuery;
 return this.each(function(){ //return jQuery obj
  if (this.tagName !== featuredimagezoomer.iname)
   return true; //skip to next matched element
  featuredimagezoomer.init($, $(this), options);
 });
}
</script>
<p><img id="image1" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSjU2O8BeMy8MvPmMYlB_xUs08Ebhn8Brb2wbGfp52nkvrSLS8vPCtxu_iHbXQOSjzpn14BZ5B7F8n8TOjDClFgh2mLenlkAzGT_4AP5qrFQhNFtNaJnUjWYTpl-RCEWnmrog05W7JuHM/s1600/DhecunBlog.png" style="width:170px;height:170px" /><p></p></p> 
<center>Mainkan roda mouse anda untuk membuat tampilan lebih besar</center>
<br/>
<div style="text-align:center; font-size:0.75em">
<a href="http://dhecun.blogspot.com/2012/11/script-zoom-gambar-dengan-detail.html">[ Get Widget ]</a></div>

Widget Share Button Melayang

<style>

#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px

0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>
<div id='pageshare' title="bagikan ke teman anda">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="http://dhecun.blogspot.com/2012/11/memasang-widget-share-button-facebook.html" target="blank" title="Cara Memasang Widget Share Button"><font color="blue">[Get Widget]<font></font></font></a></div></div>

Tukar Link

Traffic

Dhecun Blog Statistics summary for website

Semua Artikel

Tampilkan semua artikel

10 Artikel Terbaru

Gabungan

Ganti warna border

Ganti warna background

Ganti background dan border

Blogger templates

Pages

Tuesday, January 8, 2013

Sunday, December 16, 2012

Friday, December 14, 2012

Tuesday, December 4, 2012

Monday, December 3, 2012

Tuesday, November 13, 2012

Monday, November 12, 2012

Pasang Widget Otomatis

Submit Web / Blog Ke 20+ Search Engines

Cek Ukuran dan Kecepatan Loading Blog / Web

Update Artikel Dhecun Blog

Berlangganan Artikel Gratis Lewat Email

Berlangganan artikel via email.

Space Iklan

Kategori pasang iklan

Iklan Sponsor 1

About Me

Contact

Rekomendasi

Follow

RSS feeds

Widget Populer

Share

Tukar Link

Traffic

Semua Artikel

10 Artikel Terbaru

Followers

Advertiser

Pasang iklan dapat diut