Dhecun Blog: Membuat

Showing posts with label Membuat. Show all posts

Cara Membuat Image Preview Menggunakan Tombol

Image Preview ini berfungsi untuk melihat gambar dalam ukuran yang lebih bersar , dan cara kerjanya menggunakan tombol perbesar dan tombol normal , yaitu bila di klik tombol perbesar maka gambar menjadi ukuran besar dan di klik tombol normal untuk mengembalikan gambar pada posisi ukuran semula.
Jika di web atau blog anda banyak menampilkan gambar , cara ini dapat jadi alternatif untuk dimanfaatkan agar pengunjung bisa melihat gambar anda secara jelas.

Berikut contoh bentuk Image Preview menggunakan tombol.














 

Widget
















 

Sticky Bar

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

<script type='text/javascript'>function gambarbesar1(){document.getElementById("gambar1").height="200"; document.getElementById("gambar1").width="200";}function gambarnormal1(){document.getElementById("gambar1").height="100"; document.getElementById("gambar1").width="120";}</script><style type='text/css'>div.galleryagambar{position:relative; margin: 2px; padding:8px; border: 2px solid #ccc; background-color:#E3E3E3; float:left;}div.gallerya{position:relative; margin: 2px; border: 2px solid #D8D8D8; background-color:#ECECEC; float:left; text-align: center;}div.gallerya img{ border: 2px solid #ccc; margin-top: 5px;}div.gallerya a:hover img{ border: 2px solid #000000;/* for IE */ filter:alpha(opacity=40);/* CSS3 standard */ opacity:0.4;}div.labela{ border: 0px solid #D2D2D2; background-color:#ccc; text-align: center; font-weight: bold; height: 12px;width:120px; padding:3px;}</style>

Catatan :
Untuk menambah gambar , anda tinggal menambah kode yang berwarna merah dan simpan dibawah kode yang berwarna merah tersebut tapi ganti nomor yang berwarna biru menjadi nomor 2 dan seterusnya.

7. Klik simpan template

Langkah selanjutnya anda tinggal menambahkan kode HTML pada saat menulis artikel.
Jangan lupa tambahkan kode HTML pada bagian HTML bukan Compose.
Cara ini bila gambar akan ditampilkan pada halaman posting.

Tapi bila anda ingin menampilkan Gallery pada sidebar blog anda , berarti anda tinggal menambah gadget.
Silahkan ikuti langkah berikut ini :

1. Pilih Tata Letak >> Tambah Gadget >> HTML/JavaScript
2. Masukkan script dibawah ini

<div class="galleryagambar">
<div class="gallerya"><table border="0" width=""><tbody><tr><td bgcolor="#ECECEC"><a href="http://AlamatLinkAnda" target="_blank"><img height="100" id="gambar1" src="URL Gambar" width="120" /></a><br /><div align="center"><input onclick="gambarbesar1()" type="button" value="Perbesar" /><input onclick="gambarnormal1()" type="button" value="Normal" /></div></td></tr><tr><td bgcolor="#ccc"><div class="labela">Label Gambar</div></td></tr></tbody></table></div>
</div>

Komentari artikel ini...!!!

Membuat Widget Artikel Terbaru Keren

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 Widget Template
5. Tekan tombol Ctrl+F
6. Cari kode ]]></b:skin>
7. Masukkan script dibawah ini tepat diatas kode ]]></b:skin>

#mas-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
#terbaru{margin:0px}
.mas-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
.mas-elemen img{background:#999;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
.mas-elemen h6,.mas-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
.mas-elemen:hover{background-color:#c3c3c3}
.mas-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}
#mas-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#141414 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQKTrmIQ8xvFCV2t6XoJkrqhyphenhyphenB3AvFTuM9cBUtjrBpBdrpT6o5J5NVSZ2UqZnOFoln6s7gjEE5AgwAE1ssp7ic8B2Xblf227by6Ut8HPobpJ0QVC85csKEY3WLx1l7XpVwsybGe0TLZF8/s1600/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
#mas-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
#mas-navigasifeed:hover{background-color:#c3c3c3}
#mas-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#mas-navigasifeed span{padding:5px 10px}
#mas-navigasifeed .next{float:right}
#mas-navigasifeed .previous{float:left}
#mas-navigasifeed .home{text-align:center}
#mas-navigasifeed a:hover,#mas-navigasifeed span.noactived{color:transparant!important}

Catatan :
Tulisan warna biru adalah lebar dan tinggi thumbnail image.

8. Kemudian cari kode </head>
9. Masukkan script dibawah ini tepat diatas kode </head>

<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "http://dhecun.blogspot.com";
var charac = 100;
var urlprevious, urlnext;function maskolisfeed(johny,banget){
var showfeed = johny.split("<");
for(var i=0;i<showfeed.length;i++){
if(showfeed[i].indexOf(">")!=-1){
showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
}
}
showfeed = showfeed.join("");
showfeed = showfeed.substring(0,banget-1);
return showfeed;
}
function showterbaru(json) {
var entry, posttitle, posturl, postimg, postcontent;
var showblogfeed = "";
urlprevious = "";
urlnext = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
urlprevious = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
urlnext = json.feed.link[k].href;
}
}
for (var i = 0; i < numfeed; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = "";
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFHOJZuuOs4gPF4OWYDuKkqFpwsH3stkmeySf0WK543kj8fblgn1f47FdYnIP-jALxOCluQYoINGTE9kEJvqdQVhkoGxVnSxhT-ucP7a8uq0u2jrOFjaLlYfCgr5nXnXzmZ1Q-jOaKjlw/s1600/no+image.jpg";
}
showblogfeed += "<div class='mas-elemen'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + maskolisfeed(postcontent,charac) + "...</p>";
showblogfeed += "</div>";
}
document.getElementById("terbaru").innerHTML = showblogfeed;
showblogfeed = "";
if(urlprevious) {
showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>◄ Previous</a>";
} else {
showblogfeed += "<span class='noactived previous'>◄ Previous</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next ►</a>";
} else {
showblogfeed += "<span class='noactived next'>Next ►</span>";
}
showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
document.getElementById("mas-navigasifeed").innerHTML = showblogfeed;
}
function navigasifeed(url){
var p, parameter;
if(url==-1) {
p = urlprevious.indexOf("?");
parameter = urlprevious.substring(p);
} else if (url==1) {
p = urlnext.indexOf("?");
parameter = urlnext.substring(p);
} else {
parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
}
parameter += "&callback=showterbaru";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(startfeed==1) {removerscript();}
document.getElementById("terbaru").innerHTML = "<div id='mas-loading'></div>";
document.getElementById("mas-navigasifeed").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
var terbaru = document.createElement('script');
terbaru.setAttribute('type', 'text/javascript');
terbaru.setAttribute('src', archievefeed);
terbaru.setAttribute('id', 'MASLABEL');
document.getElementsByTagName('head')[0].appendChild(terbaru);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("MASLABEL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { navigasifeed(0); }
//]]>
</script>

Keterangan :
var numfeed = 5; adalah jumlah Artikel terbaru yang ditampilkan pada widget.
var urlblog = http://dhecun.blogspot.com : ganti dengan URL blog anda.
var charac = 100; adalah jumlah karakter atau huruf pada setiap post.

10. Setelah itu klik simpan template
11. Kemudian pilih Tata Letak >> Tambah Gadget >> HTML/Javascript
12. Masukkan script dibawah ini

<div id="terbaru"></div>
<div id="mas-navigasifeed"></div>
<div style="text-align: center;">
<a href="http://dhecun.blogspot.com/2012/12/membuat-widget-artikel-terbaru-keren.html" target="_blank" title="Membuat Widget Artikel Terbaru Keren"><span style="font-size:xx-small;"><span style="text-shadow:1px 1px 1px #333;"><input class="button" name="go" value="Widget by Dhecun Blog" type="submit" /></span></span></a></div>

13. Klik simpan dan lihat hasil pekerjaan anda.

Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Membuat Daftar Isi Seperti Rak Buku

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

<style>
#daftar-isi-body{width:760px!important;height:600px!important;padding:30px 40px;margin:0 auto;}
#daftar-isi-wrap{margin: 0 auto;}.box-posting{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5rDKzHC_HYIGUGVhCFXNlcsAO8MPEF-t358C1s9cECvhwp3Ej9utYvzQDSQr4lmdEtNR_UubHeC_J6-h3Hd_3s58QU2PB062gUOhclZ0y746a_4tLBLO3hLtB_pa60T92EJ5Juz0172Q/s1600/bg-box.png);background-position:bottom center;background-repeat:no-repeat;overflow:hidden;cursor:pointer;float:left;height:140px;width:248px;margin:-50px 0 0 0;}
.box-posting img{height:46px;width:46px;float:left;margin:20px 0 0 25px;background-color:#2E0700;border:1px solid #2E0700;-webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 50%;}
.box-posting .judul-posting{float:left;height:35px;margin:0;width:220px;}
.box-posting .judul-posting a{font-family:arial,Serif !important;color:#774A34!important;text-shadow:0 0 1px rgba(0,0,0,0.9);margin:-40px 0 0 80px;display:block;font-size:13px !important;line-height:18px!important;font-weight:bold !important;}
.box-posting .judul-posting a:hover{color:#333!important;}
.box-posting:hover{border-left-color:#C6EB04;}#totales{text-align:center;color:#774A34 !important;text-shadow:0 1px rgba(0,0,0,0.2);}#loadingscript{color:#444;font-family:Century Gothic;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;}#paginacion{color:#BBB;font-size:24px;font-weight:bold;height:35px;line-height:28px;padding:0;margin:0 auto;text-align:center;}#paginacion span,#paginacion a{display:inline-block;font-size:13px !important;line-height:24px;font-weight:bold;margin:0 1px;width:25px;height:25px;}#paginacion a, #paginacion span.actual {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgKglDn3JF2Y8AsdbTknYsZvOqcY2eIsOkCOxpCS6V89ovW06FUrLBNDRnaV04cIlf_hBHjvm27RglsSYkpENUPcDXYjVL5mWxoY68ctRubhMHdn_W9iirjAhUYzg_8nEoMqs6LBUvlK4/s1600/page-link.png);background-position:top center;background-repeat:no-repeat;color:#250700 !important;text-shadow:0px 1px 0px rgba(255,255,255,0.1);}#paginacion span.actual{color:#774A34 !important;}#paginacion a:hover{color:#FFF !important;}#paginacion .nextprev-link,#paginacion span.nextprev-link{border:none;color:#250700 !important;text-shadow:0px 1px 0px rgba(255,255,255,0.1);width:100px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzDQ6z-DyN0xhm1DNndKHkctH4ohn-3On7QQBM4vdy8fS6-h5kOIx0IDutq3s-t42yL-wCsgrqPymkFfKMzsoZOK0gFP_4Dehs9FZq2o-tSd2Q5hhhexEIHG9OAzGB5iGdVCPn00dpttU/s1600/nextprev.png);background-position:top center;background-repeat:no-repeat;}
</style>
<script type="text/javascript">var jumlahposting = 18;var urlblog = "http://dhecun.blogspot.com";var minpaginas = 5;var maxpaginas = 10;var thumbs = "http://upload.wikimedia.org/wikipedia/commons/6/66/Colour_wheel_(black_background).JPG";</script>
<script language="javascript" src="http://hanjs.googlecode.com/files/sitemaps.js"></script>
<div style="text-align: center;">
<a href="http://dhecun.blogspot.com/2012/12/membuat-daftar-isi-seperti-rak-buku.html" target="_blank" title="Membuat Daftar Isi Seperti Rak Buku"><input class="button" name="go" value="Widget by Dhecun Blog" type="submit" /></a></div>

Catatan :
Ganti tulisan warna merah dengan URL blog anda

Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Membuat Widget 3 in 1 Melayang

<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHv1DEwYRFnquqSfoTM6JnmgvjWpmI_84T4J1yE9gIWGhzPuePutyID4x6e8kHGIkdJOQHOaoIyydDjluzn2I-26tjTTW8qjb3Phb8BdQza8eLGt2xKFfYQrc20xEiAekA1GCQBmgCqQ_8/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:50px; z-index:1000;}
.barrightbloggerc{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0a2A_QeYD02FkD49eYOqEgAYBOqz1xP5EAvtkDtiZeLVSv5FSLodkrdm5xHpoOvFJoxHxgxUbWtsGt8lEYIzRUPpnCZc6bh6krxdP8Opc_50xoPDkgkk_mrqF5g-bTYbtUnFRMJB56ILC/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:50px; z-index:1100;}
.barconteblogger{margin:5px 0 0 47px}
.barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmqs4NzaiXTORLsKZVLJCF1B421RPKxieHfQCSoNA6_g_c8NwwN4_it5EoPQXOURHIYu9A-19ob22CmBbud-yuOCYG1eZz2uYgDlp-h7KDbcyPIM1d5-lVDC3zuacafxY2Vdc7MRa59-B5/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:370px; z-index:1000;}
.barrightfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOaGRqFdG90lVcajmCGyJdNo0MdOwBVLKgh7X4A-AMgh9iVwGaRG-Sptzd5UcAacL7kPejDSA4eMuusklDlPtDw23q6U8-B2GB3S5ZjQli9juxGc5iNv702bQyAyIh-S68Bgnu58EeEVDk/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:185px; z-index:1100;}
.barcontefacebook{margin:5px 0 0 47px}
.barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoGfo9_iCFJIQWvbfYUDqP505kpEaOESMwcgvLf34jKBtFDO7o6gvSNtIiMCREwTERKsrjLsWNp402rO4gmoYumLHyhDDkjrk2b61JLTIRdJCnlfd0llvbBO4QGTbBi-Q2Da4KLnD24Y2M/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:210px;z-index:1000;}
.barrighttwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfPG3lMZyWobxZdO6aLegALNFADlYe9G59THbHTNFhvRXL37-PUzAgJBs-unzdjISHIgGso772T4qRr8S_-y9440AUXiad3vOtZ8VWFj2X1_Ev5cG0UwmBOuEfz3ntuqyvp4F7MP0Vjpr4/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:120px; z-index:1100;}
.barcontetwitter{margin:5px 0 0 47px}
</style>
<div class="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'">
<div class="barconteblogger">
Simpan kode friend connect atau kode CBox anda di sini
<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/12/membuat-widget-3-in-1-melayang.html" target="_blank" title="Membuat Widget 3 in 1 Melayang"><span style="font-size: xx-small;">[ Widget by Dhecun Blog ]</span></a></div>
</div>
</div>
<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
<div class="barcontefacebook">
Simpan kode Fan Page Facebook anda disini
<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/12/membuat-widget-3-in-1-melayang.html" target="_blank" title="Membuat Widget 3 in 1 Melayang"><span style="font-size: xx-small;">[ Widget by Dhecun Blog ]</span></a></div>
</div>
</div>
<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">
Simpan kode twitter anda disini
<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/12/membuat-widget-3-in-1-melayang.html" target="_blank" title="Membuat Widget 3 in 1 Melayang"><span style="font-size: xx-small;">[ Widget by Dhecun Blog ]</span></a></div>
</div>
</div>

Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Membuat Navigasi Nomor Halaman 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 </body>
7. Masukkan script dibawah ini tepat diatas kode </body>

<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://eaction.googlecode.com/files/pagenav.js' type='text/javascript'/>
</b:if>

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

.showpageArea a {text-decoration:underline;}.showpageNum a {text-decoration:none;border: 0px solid #cccccc;margin:0 3px;padding:3px;}.showpageNum a:hover {border: 0px solid #cccccc;background-color:#3b5998;}.showpagePoint {color:white;text-decoration:none;border: 0px solid #cccccc;background: #3b5998;margin:0 3px;padding:3px;}.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpage a {text-decoration:none;border: 0px solid #cccccc;padding:3px;}.showpage a:hover {text-decoration:none;}.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}

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

Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Kumpulan Gambar Tipuan Mata Yang Akan Membuat Anda Kagum dan Pusing

Bagi anda yang mengaku punya ketelitian yang bagus , sebaiknya anda melihat gambar-gambar dibawah ini.

Jika anda dapat melihat gambar atau objek-objek tersembunyi di dalamnya berarti anda betul-betul hebat dan saya acungin 4 jempol buat anda (2 jempol tangan + 2 jempol kaki) hehehe...

Tapi jika anda puyeng melihat gambar-gambar dibawah ini , jangan salahkan saya ya hehehe :)... , peace brother...!

Gambar kapal laut atau pilar...?

Penonton atau gedung...?

Berapa banyak kuda yang bisa anda temukan...? , jika mata anda cukup tajam , anda seharusnya menemukan 7...!

Berapa banyak orang dalam gambar ini...?

Cincin yang mustahil...!

Bisakah anda menemukan 4 orang dalam gambar diatas...?

Siapakah yang tertinggi...? , percaya atau tidak , ketiganya sama tinggi...!

Karpet hidup.

Air terjun atau manusia terjun...?

Ada 5 ekor rusa yang bersembunyi di hutan , bisakah anda menemukannya...?

Berapa pilar yang ada , tiga atau dua...? , perhatikan pilar tengah , dimanakah ujungnya...?

Sebuah wajah atau sebuah kata liar...?

Apa yang anda lihat...? , bisakah anda melihat kata LIFT atau hanya sebuah gambar kotak-kotak hitam tanpa makna...?

Impossible Triangle...!

Temukanlah wajah-wajah dalam gambar ini:

Ada sebelas wajah dalam gambar , bisakah anda menemukan semuanya...? , orang normal akan menemukan empat atau lima. 
Jika anda menemukan 8 , anda memiliki tingkat ketelitian lebih dari orang normal.
Jika anda menemukan 9 , anda memiliki tingkat ketelitian diatas rata-rata.
Jika anda menemukan 10 , anda sangat teliti.
Jika anda menemukan 11 , anda luar biasa teliti sekali.

Sekedar share saja untuk menguji sampai mana tingkat ketelitian mata kita...!

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 Menu Dropdown Multi Level

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

<!--MULTI-LEVEL-DD-MENU-STARTS-http://dhecun.blogspot.com-->
<link rel="stylesheet" href="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/style.css" type="text/css" />
<script type="text/javascript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/script.js"></script>
<!--MULTI-LEVEL-DD-MENU-http://dhecun.blogspot.com-->

7. Klik simpan template
8. Langkah selanjutnya pilih Tata Letak >> Tambah Gadget >> HTML/JavaScript
9. Masukkan script dibawah ini

<ul class="menunew" id="menu">
<li><a href="#" class="menulink">Dropdown One</a>
<ul>
<li><a href="#">Navigation Item 1</a></li>
<li>
<a href="#" class="sub">Navigation Item 2</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</li>
<li>
<a href="#" class="sub">Navigation Item 3</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li>
<a href="#" class="sub">Navigation Item 3</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
<li><a href="#">Navigation Item 6</a></li>
</ul>
</li>
<li><a href="#">Navigation Item 4</a></li>
</ul>
</li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</li>
<li><a href="#" class="menulink">Help</a></li>
<li>
<a href="#" class="menulink">Dropdown Two</a>
<ul>
<li><a href="#">Navigation Item 1</a></li>
<li>
<a href="#" class="sub">Navigation Item 2</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" class="menulink">Dropdown Three</a>
<ul>
<li><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
<li>
<a href="#" class="sub">Navigation Item 6</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
</ul>
</li>
<li><a href="#">Navigation Item 7</a></li>
<li><a href="#">Navigation Item 8</a></li>
<li><a href="#">Navigation Item 9</a></li>
<li><a href="#">Navigation Item 10</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
var menu=new menu.dd("menu");
menu.init("menu","menuhover");
</script>

<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/12/membuat-menu-dropdown-multi-level.html" target="_blank" title="Menu Dropdown Multi Level"><span style="font-size: xx-small;">[ Widget by Dhecun Blog ]</span></a></div>

<!--MULTI-LEVEL-DD-MENU-

STARTS-http://dhecun.blogspot.com-->
<ul class="menunew" id="menu">
<li><a href="#" class="menulink">Dropdown One</a>
<ul>
<li><a href="#">Navigation Item 1</a></li>
<li>
<a href="#" class="sub">Navigation Item 2</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</li>
<li>
<a href="#" class="sub">Navigation Item 3</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li>
<a href="#" class="sub">Navigation Item 3</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
<li><a href="#">Navigation Item 6</a></li>
</ul>
</li>
<li><a href="#">Navigation Item 4</a></li>
</ul>
</li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</li>
<li><a href="#" class="menulink">Help</a></li>
<li>
<a href="#" class="menulink">Dropdown Two</a>
<ul>
<li><a href="#">Navigation Item 1</a></li>
<li>
<a href="#" class="sub">Navigation Item 2</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" class="menulink">Dropdown Three</a>
<ul>
<li><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
<li>
<a href="#" class="sub">Navigation Item 6</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
</ul>
</li>
<li><a href="#">Navigation Item 7</a></li>
<li><a href="#">Navigation Item 8</a></li>
<li><a href="#">Navigation Item 9</a></li>
<li><a href="#">Navigation Item 10</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
var menu=new menu.dd("menu");
menu.init("menu","menuhover");
</script>

<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/12/membuat-menu-dropdown-multi-level.html" target="_blank" title="Menu Dropdown Multi Level"><span style="font-size: xx-small;">[ Widget by Dhecun Blog ]</span></a></div>

10. Klik simpan

Catatan :
Untuk penjelasan mengganti link dan teks , saya rasa anda sudah tau , silahkan edit sesuai keinginan anda.

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 Tombol Perintah Keatas dan Kebawah Halaman Blog

Untuk membuat tombol perintah ke atas dan ke bawah ini sebenarnya cukup mudah , anda tinggal menambahkan link image tersebut.

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

#floating-atas-bawah {
position:fixed; _position:absolute; bottom:5px; right:5px; clip:inherit; z-index:+1000;}

7. Kemudian cari kode </head>
8. Masukkan script dibawah ini tepat dibawah kode </head>

<div id='floating-atas-bawah'>
<a href='#' title='Ke Atas'><img border="0" src='http://sites.google.com/site/ruangsc/imgsb/arrow-up.gif'/></a>
<a href='#footer' title='Ke Bawah'><img border="0" src='http://sites.google.com/site/ruangsc/imgsb/arrow-down.gif'/></a>
</div>

9. Klik simpan template

Keterangan :
- Tulisan warna merah adalah URL gambar dari tombol keatas dan kebawah (

) .
- Jika perintah kebawah tidak bekerja , gantilah #footer dengan #bottom.

Gambar-gambar yang bisa anda gunakan :

 URL : http://sites.google.com/site/ruangsc/imgsb/arrow-up.gif
 URL : http://sites.google.com/site/ruangsc/imgsb/arrow-down.gif

 URL : http://sites.google.com/site/ruangsc/imgsb/keatas.png
 URL : http://sites.google.com/site/ruangsc/imgsb/kebawah.png

 URL : http://sites.google.com/site/ruangsc/imgsb/scrolltop.png
 URL : http://sites.google.com/site/ruangsc/imgsb/scrolldown.png

 URL : http://i563.photobucket.com/albums/ss76/peace_enes/keatas-1.png
 URL : http://i563.photobucket.com/albums/ss76/peace_enes/kebawah-1.png

 URL : http://i563.photobucket.com/albums/ss76/peace_enes/go-top.png
 URL : http://i563.photobucket.com/albums/ss76/peace_enes/go-down.png

 URL : http://i563.photobucket.com/albums/ss76/peace_enes/to-top.png
 URL : http://i563.photobucket.com/albums/ss76/peace_enes/to-down.png

 URL : http://i563.photobucket.com/albums/ss76/peace_enes/kaluhur.png
 URL : http://i563.photobucket.com/albums/ss76/peace_enes/kahandap.png

Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Membuat Peta Situs Pada Sidebar Blog

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

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

Sunday, December 30, 2012

Thursday, December 27, 2012

Monday, December 24, 2012

Friday, December 21, 2012

Thursday, December 20, 2012

Tuesday, December 18, 2012

Sunday, December 16, 2012

Friday, December 14, 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