Dhecun Blog: Kotak

Showing posts with label Kotak. Show all posts

Cara Mengganti Background Kotak Komentar 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 <div class='comment-form'>
7. Jika sudah ketemu , ganti kode tersebut dengan kode dibawah ini

<div id='ib-form'>

Catatan :
Template biasanya berbeda-beda jadi bisa saja ada 2 buah kode atau lebih , jika anda menemukan ada kode yang sama , cari saja kode yang pertama atau paling atas.

8. Kemudian cari kode ]]></b:skin>
9. Masukkan script dibawah ini tepat diatas kode ]]></b:skin>

#ib-form iframe{background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLY9pF6m2UL8-ycy_SYbmKShG2niKAAfXbk1A-CLoAB8Jpw6YuYrCM5pbOAMbhscXJmpqV1OCIYUnOefHtdUsQJMa7FYfURCvIlj5WcK00GCPh4cq9PzTy5Iep8L2PlFhAdJ2TbwIXOCA/s640/Dhecun+Blogspot.png) no-repeat bottom right;border:5px solid #3b5998;padding:5px;font:normal 12pt "ms sans serif", Arial;color:#3b5998;width:95%;height:250px;}#ib-form iframe:hover{background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLY9pF6m2UL8-ycy_SYbmKShG2niKAAfXbk1A-CLoAB8Jpw6YuYrCM5pbOAMbhscXJmpqV1OCIYUnOefHtdUsQJMa7FYfURCvIlj5WcK00GCPh4cq9PzTy5Iep8L2PlFhAdJ2TbwIXOCA/s640/Dhecun+Blogspot.png) no-repeat bottom right;border:5px solid #3b5998;}#ib-form a{color:#3b5998;}

Catatan :
1. Tulisan warna merah adalah URL gambar , ganti dengan URL gambar anda.
2. Tulisan warna biru adalah warna border , bisa anda ganti sesuai keinginan anda.
3. Tulisan warna pink adalah tingginya , bisa anda atur sesuai keinginan anda.

10. Klik simpan template

Jika anda bingung mencari warna apa yang cocok , klik saja disini

Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Membuat Show Hide Kotak Komentar Dengan JQuery

Saya rasa anda sudah tau maksud dari judul artikel ini hehehe :)

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 ]]></b:skin>
7. Masukkan script dibawah ini tepat diatas kode ]]></b:skin>

#comments {
display : none;
}
.tombol-komentar a{
text-align: center;
}
.stylewadah {padding: 5px;}

.tombol {width:100%;display: inline-block;zoom: 1; *display: inline;vertical-align: baseline;margin: 0;outline: none;cursor: pointer;text-align: center;text-decoration: none;padding: .3em 2em .35em;text-shadow: 0 1px 1px rgba(0,0,0,.3);font-weight:bold;font: 13px/20px 'Open Sans',Arial,Helvetica,Verdana,sans-serif;}
.tombol:hover {text-decoration: none;}
.tombol:active {position: relative;top: 1px;}
.black {color: #d7d7d7;border: solid 1px #282828;box-shadow:0 0 2px #000 inset;-webkit-box-shadow: 0 0 2px #000 inset;-moz-box-shadow: 0 0 2px #000 inset;background: #282828;background: -webkit-gradient(linear, left top, left bottom, from(#282828), to(#000));background: -moz-linear-gradient(top, #282828, #000);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#282828', endColorstr='#000000');}
.black:hover {background: #000;background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));background: -moz-linear-gradient(top, #444, #000);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');}
.black:active {color: #666;background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));background: -moz-linear-gradient(top, #000, #444);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');}

8. Kemudian cari kode </head> dan paste kode berikut diatas kode </head>

9. Kemudian cari kode <b:includable id='comments' var='post'>
10. Masukkan script dibawah ini tepat dibawah kode tersebut

<center>
<div class='stylewadah'>
<a class='tombol-komentar' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 0'>Tambahkan Komentar<b:else/><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></b:if>
</a>
</div>
<div style="text-align: center;">
<a href="http://dhecun.blogspot.com/2012/12/membuat-show-hide-kotak-komentar-dengan.html" target="_blank" title="Membuat Show Hide Kotak Komentar Dengan JQuery"><span style="font-size: xx-small;">Widget by Dhecun Blog</span></a></div>
</center>

11. Kemudian masukkan script warna merah dibawah ini diantara kode yang saya tandai warna biru

<div id='backlinks-container'>
    <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
       <b:if cond='data:post.showBacklinks'>
         <b:include data='post' name='backlinks'/>
       </b:if>
    </div>
    </div>
  </div>
</b:includable>

Sehingga menjadi seperti ini.

<div id='backlinks-container'>
    <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
       <b:if cond='data:post.showBacklinks'>
         <b:include data='post' name='backlinks'/>
       </b:if>
    </div>
    </div>
  </div>
<button class='tombol black' id='bukakeun'><b:if cond='data:post.numComments == 1'>1 Komentar</b:if><b:if cond='data:post.numComments &gt;= 2'><data:post.numComments/> Komentar</b:if></button>
</b:includable>

12. Yang terakhir klik simpan template dan lihat hasil pekerjaan anda.

Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Membuat Kotak Area Dengan Efek Membesar dan Berputar

Pada kesempatan kali ini Dhecun Blog akan mencoba share tentang bagaimana cara Membuat Kotak Area Dengan Efek Membesar dan Berputar saat disorot mouse.
Maksud dari Kotak Area Dengan Efek Membesar dan Berputar saat disorot mouse adalah kotak yang apabila disorot mouse maka akan Membesar dan Berputar.
Begitulah kira-kira definisi dari judul posting yang saya share untuk anda.

Silahkan lihat demonya , klik disini

Bagaimana keren bukan hehehe..!!

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 ]]></b:skin>
7. Masukkan script dibawah ini tepat diatas kode ]]></b:skin>
8. Klik simpan template

#tejakode {-o-transition:1.2s ease-out; -moz-transition:1.2s ease-out; -webkit-transition:1.2s ease-out;padding:0.75em;width:80%;color: #FFFFFF;border:1px solid #3b5998;-moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius: 5px;border-radius:5px;background: #3b5998;}#tejakode:hover {color: #FFFFFF;-o-transform:scale(1.2) translate(40px,40px) rotate(360deg);-moz-transform:scale(1.2) translate(40px,40px) rotate(0deg);-webkit-transform:scale(1.2) translate(40px,40px) rotate(360deg); background:#3b5998;-o-transition: all 1.2s ease-in;-moz-transition: all 1.2s ease-out;-webkit-transition: all 1.2s ease-in;}

Catatan :
360 adalah kotak area tersebut berputar 360 derajat , jika anda tidak ingin kotak tersebut berputar dan hanya membesar saja , silahkan ganti angka 360 dengan angka 0 , atau anda ganti sesuai keinginan anda.

Lalu bagaimanakah cara pemakaiannya...?

Cara meletakan di dalam Postingan dan Gadget :
Pada tab HTML ( ingat tab HTML ) , masukkan kode berikut :

<div id="tejakode">Simpan disini apapun terserah anda</div>
<div style="text-align: left;">
<a href="http://dhecun.blogspot.com/2012/12/membuat-kotak-area-dengan-efek-membesar.html" target="_blank"><span style="font-size: xx-small;">[ Get Widget ]</span></a></div>

Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Membuat Kotak Facebook Tersembunyi

Jika blog anda ingin kelihatan lebih "cantik" atau lebih "keren" seperti pada Dhecun Blog maka anda dapat menggunakan kotak facebook yang terus berada pada sisi kanan layar.
Untuk tampilannya seperti pada gambar diatas , jika gambar yang bertuliskan facebook disentuh oleh kursor mouse maka kotak yang tersembunyi disampaingnya akan muncul seperti pada gambar dibawah ini :

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 </head>
7. Masukkan script dibawah ini tepat diatas kode </head>

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

8. Klik simpan template
9. Kemudian pilih Tata Letak >> Tambah Gadget >> HTML/JavaScript
10. Masukkan script dibawah ini
11. Klik simpan

Catatan :
Ganti tulisan yang berwarna merah dengan URL fans page anda.

Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Script Kotak Gambar Berputar 1

Photo Cube Generator Jika anda tertarik untuk membuat gambar berputar seperti gambar diatas , silahkan kunjungi alamat situsnya klik disini , tidak perlu mendaftar dan tidak perlu memasukkan alamat email , siapkan terlebih dahulu gambar dengan ukuran 200x200 pixel.
Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Membuat Kotak Komentar Blogger , Facebook dan Twitter Berdampingan

Cara Membuat Kotak Komentar Blogger , Facebook dan Twitter Berdampingan.

Dhecun Blog selalu berinofasi untuk membuat sesuatu yang baru yang dapat membuat tampilan blog anda lebih menarik dari blog orang lain.

Langsung saja , kami telah mencoba berbagai cara untuk membuat seperti yang anda lihat pada gambar diatas.

Awalnya saya hanya menggunakan penggabungan Blogger Comment dengan Facebook Comment , tapi saya melihat banyak juga saat ini para penggguna Twitter Mania , akhirnya saya mencari solusi sebuah inofasi.

Seperti inilah yang dapat Dhecun Blog lakukan untuk menggabungkan 3 komentar langsung (Blogger , Twitter dan Facebook) sehingga membuat komentar pada blog kita menjadi indah dan saya langsung mempraktekkan nya pada blog Dhecun Blog , alhamdulillah akhirnya berhasil...!

Apakah anda tertarik untuk membuatnya...?

Untuk membuat komentar Blogger , Twitter , Facebook dengan digabungkan , silahkan ikuti langkah berikut ini :

Yang kita butuhkan adalah :

- APP ID (pada facebook)

- API Key (pada twitter)

- ID Blogger (pada bgogger)

Bingung cara membuatnya...?

1. Untuk mendapatkan API Key , buatlah aplikasi di Twitter.

Untuk membuatnya klik disini , kemudian ikuti langkah-langkah yang diajukan.

2. Untuk mendapatkan APP ID , buatlah aplikasi di Facebook Devoleper.

Untuk membuatnya klik disini , kemudian ikuti langkah-langkah yang diajukan.

3. Untuk mendapatkan ID Blogger.

Anda masuk pada blogger kemudian lihat pada Address Bar (copy angka setelah ID=…….)

Sekarang anda telah selesai membuat langkah yang pertama.

Sebelum memulai , terlebih dulu Download Template Lengkap anda untuk berjaga-jaga jika terjadi kesalahan atau jika kita ingin mengembalikan ke template semula.

Sekarang kita mulai langkah-langkah memasang kotak komentar facebook dan twitter di blogger.

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

7. Masukkan script dibawah ini tepat dibawah kode <head>

<meta content='Profile_ID' property='fb:admins'/> 
<meta content='APP_ID' property='fb:app_id'/>
<script src='http://code.jquery.com/jquery-latest.pack.js'/>
<script src='http://jsblogstop.googlecode.com/svn/commentpages/jsCommentPages.js'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://jsblogstop.googlecode.com/svn/jstweetbox/v1/jsTweetBox.js'/>
<script src='http://platform.twitter.com/anywhere.js?id=API_KEY&amp;v=1'/>

8. Perhatikan tulisan yang berwarna merah :

- Ganti tulisan Profile_ID dengan ID profil atau username facebook anda.ID profil bisa berupa angka atau huruf , ara mengetahui ID profil anda adalah dengan membuka halaman profil dan lihatlah kolom alamat (address bar).Seperti alamat facebook saya adalah www.facebook.com/dhecun.blog , maka ID profil saya adalah dhecun.blog

Anda juga bisa men setting username anda dengan masuk ke account settings (pengaturan akun) >> username (nama pengguna) >> edit (sunting).

- Ganti tulisan APP_ID dengan ID Aplikasi facebook yang sudah anda buat sebelumnya.

- Ganti tulisan API_KEY dengan API KEY dari aplikasi twitter yang sudah anda buat sebelumnya.

9. Kemudian cari kode berikut

class='comments'

10. Masukkan script dibawah ini tepat di bawah kode tersebut

<div class='comments-tab' id='blogger-comments' title='Comments from Blogger'> 
<data:post.numComments/> Komentar Blogger
</div>
<div class='comments-tab' id='twitter-comments' title='Comments with Twitter'>
<span class='js-page-tweet-count' expr:href='data:post.url'/> Tweets
</div>
<div class='js-default-tab comments-tab' id='fb-comments' title='Comments made on Facebook'>
<fb:comments-count expr:href='data:post.url'/> Komentar Facebook
</div>
<div class='clear'/>
</div>
<div class='comments-page' id='twitter-comments-page'>
<div id='js-tweet-box'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='10' width='500'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/12/membuat-kotak-komentar-blogger-facebook.html" target="_blank"><span style="font-size: xx-small;">[ Widget by Dhecun Blog ]</span></a></div>

11. Perhatikan tulisan yang berwarna merah :

- Anda bisa mengganti kata Komentar Blogger , Komentar Facebook dan Tweets dengan kata yang anda inginkan.

- Anda bisa mengganti angka 10 dengan jumlah komentar facebook yang ingin anda tampilkan.

- Anda bisa mengganti angka 500 dengan ukuran lebar kotak komentar yang anda inginkan

12. Klik simpan template dan hasilnya bisa anda lihat sendiri di halaman blog anda yang sudah anda buat tadi.

Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Membuat Kotak Permalink di Bawah Artikel

Jika anda belum tau apa itu Kotak Permalink , lihat gambar diatas.

Kotak ini juga digunakan dalam blog ini / Dhecun 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 ]]></b:skin>

7. Masukkan script dibawah ini tepat diatas kode ]]></b:skin>

.permalink {border: 1px solid rgb(102, 153, 204); padding: 5px; background: #f9f9f9;-moz-border-radius:5px;} .permalink a {background:none;} img.float-right {margin: 5px 0px 0 10px;} img.float-left {margin: 5px 10px 0 0px;}

8. Cari kode <data:post.body/> (bila anda menggunakan read more di blog anda akan muncul kode seperti itu lebih dari satu , gunakan kode yang kedua)

9. Masukkan script dibawah ini tepat dibawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'><div class='permalink'> <center><medium><b>Anda sekarang sedang membaca artikel tentang <strong><u><data:blog.pageName/></u></strong>.Anda bisa menemukan artikel <data:blog.pageName/> saya ini dengan url <strong><data:post.url/></strong> , anda boleh menyebar luaskan artikel ini atau meng copy paste artikel <strong><data:blog.pageName/></strong> ini jika memang bermanfaat untuk teman-teman anda.Tapi jangan lupa untuk menyertakan Link <u><a expr:href='data:post.url'><data:blog.pageName/></a></u> sebagai sumbernya.Terima kasih...Salam Blogger.<div style="text-align: right;"><a href="http://dhecun.blogspot.com/2012/11/memuat-kotak-permalink-di-bawah-artikel.html" target="_blank"><span style="font-size: xx-small;">[ Widget by Dhecun Blog ]</span></a></div></b></medium></center></div></b:if>

10. Edit tulisan yang berwarna merah sesuai keinginan anda , kemudian klik simpan template

Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Cara Memasang Emoticon Smile.gif di Kotak Komentar

:10 :11 :12 :13
:14 :15 :16 :17
:18 :19 :20 :21
:22 :23 :24 :25
:26 :27 :28 :29
:30 :31 :32 :33
:34 :35 :36 :37
:38 :39 :40 :41
:42 :43 :44 :45
:46 :47 :48 :49
:50 :51 :52 :53
:54 :55 :56 :57
:58 :59 :60 :61
:62 :63

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

1. Login ke akun Blogger anda
2. Pilih Template
3. Pilih Edit HTML
4. Tekan tombol Ctrl+F
5. Cari kode </body>
6. Masukkan script dibawah ini tepat diatas kode </body>

<script src='http://sites.google.com/site/t4belajarblogger/js_t4belajarblogger/emoticonplus-v2.js' type='text/javascript'/>

7. Selanjutnya cari kode berikut

<b:if cond='data:post.embedCommentForm'>

8. Masukkan script dibawah ini tepat diatas kode tersebut

8. Klik simpan template

Semoga bermanfaat...!!!

Komentari artikel ini...!!!

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

Friday, December 21, 2012

Tuesday, December 18, 2012

Saturday, December 8, 2012

Saturday, December 1, 2012

Tuesday, November 27, 2012

Monday, November 26, 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