Kumpulan Widget Social Share Keren ala Mintshare

Salah satu keunggulan memakai widget share ini adalah :

1. Dibuat dengan CSS & HTML , tidak dengan JavaScript.
2. Loading benar - benar cepat.
3. Kecil dalam ukuran.

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 <data:post.body/>
7. Masukkan script dibawah ini tepat dibawah kode <data:post.body/>
8. Klik simpan template

1. MintShare Classic Float Left

Script :

<div id='mintshare_fl'>
<a class='sharetext'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSOnqQZ14M7llzBAxNiaHRCMyUxd6Z4WPcA40Xk0_wVMpjNc7hyphenhyphenAdqJqCxFR2_VXFKFofj7JnOk8CbmT0kJzsqU-1FjWWEsZBmWhlaeZypUMCfKr2hXYTm3BJwwnMkjZ7u03oLJFr4tKvx/s1600/share_text.jpg'/></a>


<div class='flyout'>
<ul class='icons'>
<li class="drop-li"><a expr:href=""http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_ZcGDbaBgv6-WhFRy7WqQudblj_HBUs3wUckNHmge4BRTOK_HHED-hDQP9kjYVoSLHVsge9b5gggFPc9UzDlkKvjRSKenYiohCJQ4Sgj3Remw_KgAdt9ebql2uivAloFakjNtmgF6jkp4/s1600/facebook.png"/><b>Share on FB</b></a></li>
<li class="drop-li"><a expr:href=""http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhav4DXIZu_Q56CDQY-097YE0xqdrV1UEWTa4oAbAGcVuBOlfiy24SqZRqGtynYG_YcuDqGban1DzuqEnLRCaRGnpmKQuJFKFV-7KFTMQbKaEi6BzyAshfvUnCSxsXLCU3vu8mpS0ckg4a2/s1600/twitter.png"/><b>Tweet This</b></a></li>
<li class="drop-li"><a expr:href=""http://www.stumbleupon.com/refer.php?url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHwWzjzlJC8fJpXXSFNRMx2zBcSEWDVLdRmxjQV8YWBEL4eT6I8br2gxuAtEIH_5UGvKV1h_gInOguXlFRedZ3fJ_0G2hneh2sygMXp5xjp_MrmycJybprOLx_7YzXvI0EG1Mfj61LZLTf/s1600/stumbleupon.png"/><b>Stumble It</b></a></li>
<li class="drop-li"><a expr:href=""http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVlw47SoBLmQblSYi1MezbRlA7I5vqPNTuVnmeU2nQb3bgm2BPpZP3G4BDtJQxxfWtTTWlRKKqlXtF49xE9w5T_3JCrn7sCPvHFLlUiVtTEFVyUnPPPxR8J3f9_ghvdGp42bOl7JW72X5r/s1600/digg.png"/><b>Digg This</b></a></li>
<li class="drop-li"><a expr:href=""http://www.technorati.com/faves?add=" + data:post.url" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4x7KYlXuodaY1eRu_SsCshmcDiuraJ3Hj-P5MfUXhpfhUL5mOdafweCZVoYT6A4xqEX4R_vDcMdEp5n-l9E5VWFLM70OJFGzv0Z8gBpTsX-4UxNnb21xLWHsTkk5F_6JVBh_V5HUz0Iko/s1600/technorati.png"/><b>Technorati</b></a></li>
<li class="drop-li"><a expr:href=""http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJN9Gc-rByhmOTNi_BVk98AZpYysGwTf7DA3qWDlGACqs8migf7OJcN_kiIdjFGEad0OmNPDAK2xkqaln477trVfcQQx6hMGqYZ-j7sr5Qqe4r6WH-VyxWoloVG4hS9eQZ-cLE9PiS_uwM/s1600/delicious.png"/><b>Delicious</b></a></li>

<span class="get_mintshare"><a href="http://dhecun.blogspot.com/2012/12/kumpulan-widget-social-share-keren-ala.html/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjrLustxiZD3zHaqxbEflLZ6mL6kUjqbV1s_J6o5oeqacuwFRHWk6R4KepB2FI7nhVHwmBvQBvA9MWZuQUsqKb9s_a1sK1Ty5YoZmh0R3Zx4YdaSYTI9C9jDe0CrgohGlJCarw2RLdL6w5/s1600/getmintshare.png"/></a></span>

</ul>
</div>
</div>

2. MintShare Share Button

Script :

<div id='mintshare_mini'>
<a class='sharetext'><b>Share This</b></a>


<div class='flyout'>
<ul class='icons'>
<li class="drop-li"><a expr:href=""http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsG2BffiVKvznXGHmCcYBm6Lesq5viTVwUtagOS-fThmtGqJu-exXy4ET-KBWewruj1ngrfvoblvXOnj0IJBgkQleyEgIVe92s5xvECoUDL_iG86KaCETrpCezrwXNH5gIpzUBkrAaSCma/s1600/facebook_small.png"/></a></li>
<li class="drop-li"><a expr:href=""http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPEofR3mUqQs4jjyKxUoKMQaszdDWgDHfalHkdJX0wIC-_9E2bcnz5q6ImpcFg3ZO6fv_r2p7Ts5sSchDyu5XgqQSIIJ8o5_43hp_D7wN4giGTDuTkhln7-2vuhXNIhglqJnMEqux0V0hH/s1600/twitter_small.png"/></a></li>
<li class="drop-li"><a expr:href=""http://www.stumbleupon.com/refer.php?url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmZYtTZQY4XWT_Kr6Z8cQRT-caTlVHjSnuh2ZH9dC6dU1SipUDi0DONshsd1yy6bSTJmzT-xuSBH-4SypclsrtPtfEkXAXXASJm7M1GMbuh272HyGVL8uZ-H7782ribYcpvajWaqjrOjBW/s1600/stumbleupon_small.png"/></a></li>
<li class="drop-li"><a expr:href=""http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq9CY3thJIBsfv9WvACjhnPGu1q6G9hjmEdHAYXl9bvd_tkFNyMwmNSQ0UAqdpeD5ikO0uVcX5SpSELd_WmouofRk9obSP0UsPdZtOK_06-I-lKkwtL29ThUafUR-a3754OJbmZUD1x4q4/s1600/digg_small.png"/></a></li>
<li class="drop-li"><a expr:href=""http://www.technorati.com/faves?add=" + data:post.url" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs6WXy-cZkRJ2J_VM1_Mx35KOXEdHMULZegmp2XwtwHH6IL-Pt0hmkYsOH89_-pjH975fccSErwJm-3v13WKOdjc35BYFf_FxFEJt7OOQuJRBpPBdeD_oPwIRoTh2AZoaKHm3s72zqI5Pf/s1600/technorati_small.png"/></a></li>
<li class="drop-li"><a expr:href=""http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRDxeeAPzoFW8L2B2a8l9Lzc_dAxjp1Hvup9rJOfmvhyphenhyphen6wODqVqeVBlY0JjsBasOcRRAvtcVAr-y9owS0A_aqmdwW01QbKRQGUwf4nt-MA8DqbQOvjfMIGjb5ZpiRLIdRUvA90NtGIEEtn/s1600/reddit_small.png"/></a></li>
<li class="drop-li"><a expr:href=""http://myweb2.search.yahoo.com/myresults/bookmarklet?t=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTroYjQvuDMGeIa4T6tbhbwfAUUDJFh9Kuv__wZFplblEWS5rg4Eg0jUtoFJ8bNqIbFf4DCOR28LwpKl266ZUY62Ol1XhvkTSzgCyZg-RIQmCauChlkiPI1o6-dB1YfM3XX1mzgGdjqRV7/s1600/yahoo_small.png"/></a></li>
<li class="drop-li"><a expr:href=""http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQC8Cnd9IzDnUQI64zafSaBcDXbr3RQ7ifHsva25snflRrDMaEOpcqV15FqxpmcMQ1QGZhUIlCxrQ0F4ji5c7g4nCKuQH49qmEjxUXAWTMy0uEVHfKy4A6a7diaQoJ1-hsWocyN3ClUvjN/s1600/delicious_small.png"/></a></li>

<span class="get_mintshare"><a href="http://dhecun.blogspot.com/2012/12/kumpulan-widget-social-share-keren-ala.html/">Get MintShare!</a></span>

</ul>
</div>
</div>

3. MintShare Float Left

Script :

4. MintShare Float Top

Script :

<div id="mintshare_ft">
<div class="mintshare-wrap"><a class="top-a">Share This</a>

<div class="flyout">
<ul class="icons">
<li class="drop-li"><a expr:href=""http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_ZcGDbaBgv6-WhFRy7WqQudblj_HBUs3wUckNHmge4BRTOK_HHED-hDQP9kjYVoSLHVsge9b5gggFPc9UzDlkKvjRSKenYiohCJQ4Sgj3Remw_KgAdt9ebql2uivAloFakjNtmgF6jkp4/s1600/facebook.png"/><b>Share on FB</b></a></li>
<li class="drop-li"><a expr:href=""http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhav4DXIZu_Q56CDQY-097YE0xqdrV1UEWTa4oAbAGcVuBOlfiy24SqZRqGtynYG_YcuDqGban1DzuqEnLRCaRGnpmKQuJFKFV-7KFTMQbKaEi6BzyAshfvUnCSxsXLCU3vu8mpS0ckg4a2/s1600/twitter.png"/><b>Tweet This</b></a></li>
<li class="drop-li"><a expr:href=""http://www.stumbleupon.com/refer.php?url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHwWzjzlJC8fJpXXSFNRMx2zBcSEWDVLdRmxjQV8YWBEL4eT6I8br2gxuAtEIH_5UGvKV1h_gInOguXlFRedZ3fJ_0G2hneh2sygMXp5xjp_MrmycJybprOLx_7YzXvI0EG1Mfj61LZLTf/s1600/stumbleupon.png"/><b>Stumble It</b></a></li>
<li class="drop-li"><a expr:href=""http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVlw47SoBLmQblSYi1MezbRlA7I5vqPNTuVnmeU2nQb3bgm2BPpZP3G4BDtJQxxfWtTTWlRKKqlXtF49xE9w5T_3JCrn7sCPvHFLlUiVtTEFVyUnPPPxR8J3f9_ghvdGp42bOl7JW72X5r/s1600/digg.png"/><b>Digg This</b></a></li>
<li class="drop-li"><a expr:href=""http://www.technorati.com/faves?add=" + data:post.url" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4x7KYlXuodaY1eRu_SsCshmcDiuraJ3Hj-P5MfUXhpfhUL5mOdafweCZVoYT6A4xqEX4R_vDcMdEp5n-l9E5VWFLM70OJFGzv0Z8gBpTsX-4UxNnb21xLWHsTkk5F_6JVBh_V5HUz0Iko/s1600/technorati.png"/><b>Technorati</b></a></li>
<li class="drop-li"><a expr:href=""http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJN9Gc-rByhmOTNi_BVk98AZpYysGwTf7DA3qWDlGACqs8migf7OJcN_kiIdjFGEad0OmNPDAK2xkqaln477trVfcQQx6hMGqYZ-j7sr5Qqe4r6WH-VyxWoloVG4hS9eQZ-cLE9PiS_uwM/s1600/delicious.png"/><b>Delicious</b></a></li>

<span class="get_mintshare"><a href="http://dhecun.blogspot.com/2012/12/kumpulan-widget-social-share-keren-ala.html/">Get MintShare Now</a></span>

</ul>
</div>

</div>
</div>

5. MintShare Compact Float Top

Script :

<div id="mintshare_ft_c">
<div class="mintshare-wrap"><a class="top-a">Share This</a>

<div class="flyout">
<ul class="icons">
<li class="drop-li"><a expr:href=""http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOxm3gep3z3Xe7wu61c-iZl7gDiRKMYbPwiS3FnnWRUu7FqUZox_SGdK85ZgWsNvsDIYMugVOdNdBhSzLkA9D6ql4J-DgNZwb6F5A3ryCDvJs8HX0sYtfoqZ_a0tQorFYzEw6AKQhiMtDK/s1600/facebook_mini.png"/></a></li>
<li class="drop-li"><a expr:href=""http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheZ2gstVM6khxXRSw1HU6SSu95tHhjDbPhCNGiB0Dhs2jipY1Ibjy29vb0T_1-Ms5Lz1yUaIVCC3L_y75gmB60IZaVG347WWzp9cU1PwqkLdIQdg9hpkKtIqo67enXX7b4GHcBIBRwF0Tt/s1600/twitter_mini.png"/></a></li>
<li class="drop-li"><a expr:href=""http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWDIQ3DNEZWLscxP0jy4G_J5lfUlJseHaYdKsj89_i8rkKgEQzffUF0vCMRKJWnOyRoxJiNliuLIGwrNB3rBdorf6-9KilbsMuIbWMXXMfGAguh9QYMT43APUkVzbwBlCle5byOjD61TFZ/s1600/delicious_mini.png"/></a></li>
<li class="drop-li"><a expr:href=""http://www.stumbleupon.com/refer.php?url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhE_2JYvtQu9i9fxb0webXASji4OQUDZDwfkOwKwIRJO-aF8oB-HCiwG11H14jRASNyM4Abz4maGMBRGQOiejA68dUkxdCP2ivRn3xrFVcWBfwcw5ZndYUW4g18BRX45vUkCzJ4ViuvGRc/s1600/stumbleupon_mini.png"/></a></li>
<li class="drop-li"><a expr:href=""http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvPtnhCfhCJf8thJ0Pki_EEA3tKUz64BE_P3QUzRiJxHiS0_gpVZcM-4cwNbm-O5WDU_nl-N01CjQLxw3h0is2YipZw4eWrGGaxhjU9q1VdV8K9O0nL8JY6yECW__5seM0Og28RzIk4w6m/s1600/digg_mini.png"/></a></li>
<li class="drop-li"><a expr:href=""http://www.technorati.com/faves?add=" + data:post.url" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdsMO7PqGaopGMt569_mSxVZqaTXbxs05JqP-bYO0ZX5P6hCM_eWZY2oDLUKId-lPVi0qQtWyNmQOo7ZVnE2fav9UoTN2OWD7Jfk9qpd7v8Zrx0kRUEyqUh42fWHQgSsyZTxGWNd3OhYj-/s1600/technorati_mini.png"/></a></li>
<li class="drop-li"><a expr:href=""http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1zgoSS3bnT4GcnqB8vFjqyP9f-8PeSaze9xHIG1b8ub2uTGNceqf5_4PeAo4U4ndQKkYu75BkKliQbyUQlgYbC1DWMaogxJ_yaewFQofbgEoBcz4Aq37_XLudqHcbfcLWxXRAzQMeVfIS/s1600/reddit_mini.png"/></a></li>
<li class="drop-li"><a expr:href=""http://myweb2.search.yahoo.com/myresults/bookmarklet?t=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrVqSPJFpW8c5kIBwMFemWt9LKXexWyIfcGohCDndXAIOE2KErBb69kSqwWBJSgEc2RDDFdch1H-InJvavTo5FhqubKql-E73_eaEQmy-Vs-Psc-DENrCnVPSeDq0BNQab5iwka_LNBcUH/s1600/yahoo_mini.png"/></a></li>

<span class="get_mintshare"><a href="http://dhecun.blogspot.com/2012/12/kumpulan-widget-social-share-keren-ala.html/">Get MintShare Now</a></span>

</ul>
</div>

</div>
</div>

Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Admin

.:: Get Widget ::.

Keterangan Artikel

Ditulis oleh : Dhecun Blog
Judul : Kumpulan Widget Social Share Keren ala Mintshare
Berlangganan artikel
Komentari artikel ini...!!!

<b>Dhecun Blog : <a href='http://dhecun.blogspot.com/2012/12/kumpulan-widget-social-share-keren-ala.html'>Kumpulan Widget Social Share Keren ala Mintshare</a></b>

Silahkan Copy Paste artikel ini tapi jangan lupa untuk mencantumkan link sumber aslinya. Terima kasih.

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>

3 komentar:

Balas

Anonymous

January 3, 2013 at 3:53 AM

posts and your blog is very interesting article, keep this blog so I can visit again to see your blog posts and articles later .. thanks for the info

Unknown

January 4, 2013 at 1:56 PM

@store-online999 thank's for your information...

October 26, 2014 at 10:27 AM

mantap gan, izin praktekin

Blogger templates

Pages

Beranda

My Facebook

Kirim SMS Gratis

Download Gratis

Contact us

Dhecun Blog

Kumpulan Widget Social Share Keren ala Mintshare

Monday, December 3, 2012

3 komentar:

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