Membuat Foto atau Gambar Dengan Efek Memutar

Silahkan sorot gambar dibawah ini dengan mouse anda.

Bagaimana menurut anda apakah cukup menarik untuk di pasang di blog anda...?

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>

<style>#tejahtcganteng{ -o-transition: all 0.8s ease;-moz-transition: all 0.8s ease;-webkit-transition: all 0.8s ease;}#tejahtcganteng:hover{ -o-transform: scale(1.5) rotate(720deg) translate(0px);
-moz-transform: scale(1.5) rotate(720deg) translate(0px);
-webkit-transform: scale(1.5) rotate(720deg) translate(0px);}#ganteng a:hover{transition: all 0.5s;-moz-transition: all 0.5s;}</style>
<div style="text-align: left;">
<a href="http://dhecun.blogspot.com/2012/12/membuat-foto-atau-gambar-dengan-efek.html" target="_blank"><span style="font-size: xx-small;">[ Get Widget ]</span></a></div>

Jika anda tidak mau pusing , kode diatas bisa anda masukkan dalam Gadget HTML
8. Klik simpan template

Catatan:
Anda bisa mengubah efek membesarnya dengan cara mengubah ukuran yang saya sudah tandai dengan warna merah (1.5)
Contoh :
- Mengecilkan : 0.9 , 1.0
- Membesarkannya lagi : 2.0 , 2.5 dst.

Cara pemakaiannya :
Tambahkan kode dibawah ini di setiap posting atau widget anda.

<center><div id='tejahtcganteng'>simpan tulisan / gambar anda disini</div>
<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/12/membuat-foto-atau-gambar-dengan-efek.html" target="_blank"><span style="font-size: xx-small;">[ Get Widget ]</span></a></div></center>

Contoh :

<center><div id="tejahtcganteng"><img border="0" height="170" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGLdwfowzOMSa0PoAoIq4THv1dHUgYEKEnddYkAEpd5q8KWxdIrYEMLmO_GzmDH5D6MZ7VjdhfPy2emj9ktxgQWXtDgLsuqiB7KC1R0nj8L34ZVzvEy9D8Bp5Iz7oJJzjFMugyvDC_meg/s1600/DhecunBlog.png" width="170" /></div>
<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/12/membuat-foto-atau-gambar-dengan-efek.html" target="_blank"><span style="font-size: xx-small;">[ Get Widget ]</span></a></div></center>

<center> <div id="tejahtcganteng"> <img border="0" height="170" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGLdwfowzOMSa0PoAoIq4THv1dHUgYEKEnddYkAEpd5q8KWxdIrYEMLmO_GzmDH5D6MZ7VjdhfPy2emj9ktxgQWXtDgLsuqiB7KC1R0nj8L34ZVzvEy9D8Bp5Iz7oJJzjFMugyvDC_meg/s1600/DhecunBlog.png" width="170" /></div> <div style="text-align: right;"> <a href="http://dhecun.blogspot.com/2012/12/membuat-foto-atau-gambar-dengan-efek.html" target="_blank"><span style="font-size: xx-small;">[ Get Widget ]</span></a></div> </center>

Semoga bermanfaat...!!!

Read More

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>

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

Read More

Komentari artikel ini...!!!

Membuat Accordion Menu dengan Efek Transisi Keren

Kali ini Dhecun Blog kembali ingin berbagi salah satu trik yaitu membuat Menu Accordion Dengan Efek Transisi Keren seperti pada gambar diatas.

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 diatas kode ]]></b:skin>

.navbox {position:relative;float:left;}ul.nav {list-style:none;display:block;width:220px;position:relative;padding:0px 0 0px 0;-webkit-background-size: 50% 100%;-moz-background-size: 50% 100%;}li {margin: 10px 0 0 50px;}ul.nav li a { font-family:Arial,Helvetica,Sans-serif;font-size:14px;font-weight:700;letter-spacing:1px;text-transform:uppercase;-webkit-transition:all 0.3s ease-out;-moz-transition: all 0.3s ease-out;background:#ffc000 ;color:#1e1e1e;padding:3px 15px 3px 15px;-webkit-border-top-right-radius:0px;-webkit-border-bottom-right-radius:0px;-moz-border-radius-topright:0px;-moz-border-radius-bottomright:0px;width:150px;display:block;text-decoration:none;-webkit-box-shadow:4px 2px 0px #1e1e1e;-moz-box-shadow:4px 2px 0px #1e1e1e;}ul.nav li a:hover {background:#1e1e1e;color:#fff;padding: 3px 15px 3px 30px;}

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

<div class="navbox">
<ul class="nav">
<li><a href="http://dhecun.blogspot.com">Dhecun Blog</a></li>
<li><a href="http://infodaridhecun.blogspot.com">Info Dhecun</a></li>
<li><a href="http://www.facebook.com/dhecun.blog">Facebook</a></li>
<li><a href="http://dhecundoank.blogspot.com">Download</a></li>
</ul>
<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/11/membuat-accordion-menu-dengan-efek.html" target="_blank"><span style="font-size: xx-small;">[ Widget by Dhecun Blog ]</span></a></div></div>

<div class="navbox"> <ul class="nav"> <li><a href="http://dhecun.blogspot.com">Dhecun Blog</a></li> <li><a href="http://infodaridhecun.blogspot.com">Info Dhecun</a></li> <li><a href="http://www.facebook.com/dhecun.blog">Facebook</a></li> <li><a href="http://dhecundoank.blogspot.com">Download</a></li> </ul> <div style="text-align: right;"> <a href="http://dhecun.blogspot.com/2012/11/membuat-accordion-menu-dengan-efek.html" target="_blank"><span style="font-size: xx-small;">[ Get Widget ]</span></a></div> </div>

Semoga bermanfaat...!!!

Read More

Komentari artikel ini...!!!

Membuat Menu Horizontal Keren Dengan Efek Suara

Kali ini Dhecun Blog ingin mencoba share sebuah trik blogger yaitu trik membuat menu horizontal keren dengan efek suara.
Ya , sesuai dengan judulnya yang membuat menu horizontal ini lebih unik dan keren daripada menu horizontal yang lainnya yaitu ketika anda menyentuh (hover) menu di dalamnya maka akan menghasilkan suatu bunyi.
Contoh tampilan menunya seperti ini :

< Demo >

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="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
(function($) {
$.fn.lavaFlash = function(options) {
var that = this;
var settings = {
container: 'ul',
cursor: '#lava-cursor',
current: '.current',
speed: 800,
sound: $('#sound', that)[0],
volume: 5
};
options = $.extend(settings, options);
return that.each(function() {
options.sound.volume = parseFloat(options.volume / 10);
$(options.cursor).css('left', $(options.container).find(options.current).position().left).fadeIn(options.speed);
$('li', $(options.container)).each(function() {
var $li = $(this);
$li.mouseover(function() {
$(options.cursor).animate({
left: $li.position().left
}, options.speed, function() {
options.sound.play();
});
});
});
});
};
})(jQuery);
$(function() {
$('#navigation').lavaFlash({speed: 500});
});
</script>

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

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
#navigation {
height: 3em;
background: #000;
border-top: 1px solid #00bfff;
border-bottom: 1px solid #00bfff;
position: relative;
}
#navigation ul {
margin: 0.4em 0 0 0;
padding: 0;
list-style: none;
height: 2.6em;
font: 90% 'Open Sans', sans-serif;
}
#navigation li {
float: left;
width: 6em;
height: 100%;
display: block;
margin-right: 1em;
}
#navigation a {
float: left;
width: 100%;
height: 100%;
color: #90ff00;
text-transform: uppercase;
text-align: center;
line-height: 2.6;
text-decoration: none;
display: block;
}
#navigation a:hover {font-weight:700;padding-left:15px;-webkit-transition:all .2s linear;-moz-transition:all .2s linear;-o-transition:all .2s linear;transition:all .2s linear;
color: #000;background:#90ff00;
}
#xgen11 {
width: 100%;
height: 0.2em;
background: #ccc;
position: relative;
}
#xgen11-cursor {
width: 6.4em;
height: 100%;
background: #90ff00;
display: none;
position: relative;
}
#sound {
width: 0px;
height: 0px;
display: block;
overflow: hidden;
position: absolute;
left: -1000em;
}

10. Cari kode id='Header1' kira-kira kode lengkapnya seperti ini :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your Blog (Header)' type='Header'/>
</b:section>
</div>11. Lihat kode </div> yang berwarna merah diatas , masukkan script dibawah ini tepat di bawah kode </div> tersebut.

<div id="navigation">
<div id="xgen11">
<div id="xgen11-cursor"></div>
</div>
<ul>
<li><a href="http://dhecun.blogspot.com">Home</a></li>
<li class="current"><a href="http://facebook.com/dhecun.blog">Facebook</a></li>
<li><a href="http://plus.google.com">Google+</a></li>
<li><a href="http://twitter.com">Twitter</a></li>
<li><a href="http://youtube.com">Youtube</a></li>
</ul>
<audio id="sound">
<source src="http://system-svn.googlecode.com/svn/mp3/sound.mp3"></source>
</audio>
</div>

Keterangan :
- Link yang berwarna merah adalah isi menunya , silahkan ganti dengan link anda.
- Link yang berwarna biru adalah link suaranya , silahkan ganti dengan punya anda untuk berjaga-jaga jika suatu saat link itu dihapus.

12. Klik pratinjau , jika sukses silahkan klik simpan template

Semoga bermanfaat...!!!

Read More

Komentari artikel ini...!!!

Membuat Menu Sidebar Melayang dengan Efek Jquery Keren

Hallo sobat sobat blogger , sebelumnya Dhecun Blog telah membuat trik blogger yang berjudul Cara Membuat Gambar Bergetar Otomatis Di Blog , nah pada trik blogger kali ini saya ingin berbagi trik Cara Membuat Menu Sidebar Melayang dengan Efek Jquery yang Keren.

Untuk contoh Menu Sidebar Melayang Jquery silahkan klik disini.

Bagaimana keren kan sob...?

Ayo pasang di blog anda sekarang juga jangan sampai ketinggalan hehehe :)

Jika anda tertarik untuk memasangnya , 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>

/* Starts Menu Sideabr Jquery melayang by dhecun.blogspot.com Starts*/
ul#navigation {
position:fixed;
margin: 0px;
padding: 0px;
top: 55px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#navigation li {
width: 100px;
}
ul#navigation li a {
display: block;
margin-left: -2px;
width: 100px;
height: 50px;
background-color: #ffffff;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #fff;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
opacity: 0.9;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}
ul#navigation .home a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUMQkF9ueC2PuwxdfBb1h4x0pEDlRQd3orlOPzJbuARJc2lo9Qvye09Xj2V5NiBb3_387TRkk3lbMC54-PHjMg8houGe7Z_O5pGHHBv5NedAgX4bAuWglU5sZ3djrGthBEGlZN2UWmQ9w/s1600/home.png);
}
ul#navigation .about a      {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdvhfWtH6VU9h70S4vjgH94lDsmmGKPWQqnevqqHrzjypZZgf1F97_KW9TMJiTpAC0-O8-5UXM2oP6PdkxL589KjrZgKrq8JbWdvV12RI8fTBRVmgu8m3TNYdWLNhqbNpEymMGC0p6kAQ/s1600/konco.png);
}
ul#navigation .rss a      {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPCoMmRqcdE4KCB0XEP9zdJNItiJuH5UCNoNIH1RRaTx47XKWOuNB5Seyw-C5-E0B9eaXqN2vSPgo-bY7u3hluvdBNgkg2d8ck3qgG789NOxc8poFb8qJIu5FcPMXhX8yIlbmrCRTfTvk/s1600/rss.png);
}
ul#navigation .mail a      {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFdWGcGyFsi9KUiDAmMSutnBaANyeV1NicIWo6NhDbVBOSumGaTzCz8PszMdZ-IyDe58K0YmLanCyY3xZJqP9-hWIrBOxclXb7zYob_rXL92J8W0w6ctudQ9Qu2DXWNBscGF1KGqcIuD8/s1600/mail_receive.png);
}
ul#navigation .facebook a   {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioZT5M1TvxAcj3vWewzwbNr0QWFplZ2hO5CucHHWNasmT16RpcoEZoIr0RnWckdeAckpKIvcpjExfWHFgtP47bHGY80pN2NauxfYJY7zAduPMNGanh1MnfYxvylAjaGZEKNOcp_X4SiCI/s1600/about.png);
}
ul#navigation .twitter a     {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIVgFTBWEckaxf4cdt_Jpm_4eMOREgg7YliacVDUM85BaCIDyH84AA1WaLrim54dNHzkXx2XFOMNOhSTqkOL6NfD13HM4z5Z8KtN50jZv05Ke3P7mYzcM4lGp6JYBu2Qx4VG4oGAb9L5k/s1600/twitter.jpg);
}
ul#navigation .youtube a    {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvdcG5Ep91NlHfDhUX7mualqCEzJKKctc5B8ilva7IxG6fEKt1lWgSncZ7kGvqsCrnr1B3_l7Zx4ztkc04y7qU6jWG8xahoEXTb4U_VQoTu3D5CSNq5sJVCC8aLYg_zl-d0ULiL90aRoA/s1600/You+Tube.png);
}
ul#navigation .googleplus a    {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXuagE8NckhkCqQxIfaC82F6f_IZcW4cjBzuy_QHctQ_pgqLNVLDhhaES7JHZjGxTmWc3LQoZN-IwNTdcjuuCSuC8t6FDhCAQOU6fFMl-0_ytZRqQsMO04ig14lIp1a2_TJs5fk7hCmSU/s1600/google+plus+circle.jpeg);
}
ul#navigation .yahoo a    {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhevT8LiFbnp5VU9KThkuzsZsy4Hp6ztf4ZMKumLr0HxfEPxwpHsWhROwQk9PF2foZS54llgkopVdaWaNKwQFWum7PfLb5D8bgLtsnfXa2IQ-p7weO0h5Ov5-g1FlP3vDzUcNf6uMJG3xc/s1600/yahoo+icon.jpg);
}
/* End Menu Sideabr Jquery melayang by dhecun.blogspot.com End*/

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

<script src='http://x-gen.googlecode.com/files/x-gen-jquery.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$(&#39;#navigation a&#39;).stop().animate({&#39;marginLeft&#39;:&#39;-85px&#39;},1000);
$(&#39;#navigation &gt; li&#39;).hover(
function () {
$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-2px&#39;},200);
},
function () {
$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-85px&#39;},200);
}
);
});
</script>

10. Klik simpan template
11. Selanjutnya pilih Tata Letak >> Tambah Gadget >> HTML/JavaScript
12. Masukkan script dibawah ini
13. Klik simpan

<div class='header'></div>
<div class='scroll'></div>
<ul id='navigation'>
<li class='home'><a href='http://dhecun.blogspot.com/' title='Home'></a></li>
<li class='about'><a href='http://dhecun.blogspot.com/' target='_blank' title='About us'></a></li>
<li class='rss'><a href='http://feeds.feedburner.com/' target='_blank' title='Rss feed'></a></li>
<li class='mail'><a href='http://mail.google.com/' target='_blank' title='Contact Me'></a></li>
<li class='facebook'><a href='http://www.facebook.com/dhecun.blog/' target='_blank' title='Add Me on facebook'></a></li>
<li class='twitter'><a href='http://twitter.com/' target='_blank' title='Follow us on twitter'></a></li>
<li class='youtube '><a href='http://youtube.com/' target='_blank' title='Follow Me on Youtube'></a></li>
<li class='googleplus '><a href='https://gplus.to/' target='_blank' title='Follow Me on google plus'></a></li>
<li class='yahoo'><a href='http://yahoo.com/' target='_blank' title='YM With Me'></a></li>
</ul>
<div style="text-align: center;">
<a href="http://dhecun.blogspot.com/2012/11/membuat-menu-sidebar-melayang-dengan.html" target="_blank"><span style="font-size: xx-small;">[ Get Widget ]</span></a></div>

Catatan :
Ganti tulisan yang berwarna merah dengan URL anda , tulisan yang berwarna biru ganti dengan teks sesuai keinginan anda.

<div class='header'> </div> <div class='scroll'> </div> <ul id='navigation'> <li class='home'><a href='http://dhecun.blogspot.com/' title='Home'></a></li> <li class='about'><a href='http://dhecun.blogspot.com/' target='_blank' title='About us'></a></li> <li class='rss '><a href='http://feeds.feedburner.com/' target='_blank' title='Rss feed'></a></li> <li class='mail'><a href='http://mail.google.com/' target='_blank' title='Contact Me'></a></li> <li class='facebook'><a href='http://www.facebook.com/dhecun.blog/' target='_blank' title='Add Me on facebook'></a></li> <li class='twitter'><a href='http://twitter.com/' target='_blank' title='Follow us on twitter'></a></li> <li class='youtube '><a href='http://youtube.com/' target='_blank' title='Follow Me on Youtube'></a></li> <li class='googleplus '><a href='https://gplus.to/' target='_blank' title='Follow Me on google plus'></a></li> <li class='yahoo'><a href='http://yahoo.com/' target='_blank' title='YM With Me'></a></li> </ul> <div style="text-align: center;"> <a href="http://dhecun.blogspot.com/2012/11/membuat-menu-sidebar-melayang-dengan.html" target="_blank"><span style="font-size: xx-small;">[ Get Widget ]</span></a></div>

Semoga bermanfaat...!!!

Read More

Komentari artikel ini...!!!

Script Efek Banjir

Kali ini Dhecun Blog akan mencoba share tentang Cara Membuat Efek Banjir di halaman blog anda , bukan hanya daerah kita saja yang banjir tapi kita juga bisa membuat blog kita banjir hahahaha :D
Bagi anda yang ingin blognya tampil lebih cantik , silahkan pakai efek banjir ini.

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

<script language="javascript">
nd_mode="flood";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://aksota.googlecode.com/files/efek_banjir.js"></script>
<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/11/script-efek-banjir.html" target="_blank"><span style="font-size: xx-small;">[ Widget by Dhecun Blog ]</span></a></div>

<script language="javascript"> nd_mode="flood"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://aksota.googlecode.com/files/efek_banjir.js"></script> <div style="text-align: right;"> <a href="http://dhecun.blogspot.com/2012/11/script-efek-banjir.html" target="_blank"><span style="font-size: small;">[ Pasang efek banjir di blog ]</span></a></div>

Semoga bermanfaat...!!!

Read More

Komentari artikel ini...!!!

Script Efek Loading Gambar

Dhecun Blog sarankan script ini untuk blog yang banyak menggunakan gambar dalam postingannya.
Dhecun Blog yakin banyak yang sudah bisa membuatnya karena memang tidak sulit , tapi Dhecun Blog coba membuat postingan ini barang kali ada yang belum tau.

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

1. Login ke akun Blogger anda.
2. Klik Template lalu pilih Edit HTML.
3. Download Template Lengkap terlebih dahulu untuk berjaga-jaga jika terjadi kesalahan.
4. Centang Expand Template Widget.
5. Tekan tombol Ctrl+F.
6. Cari kode <body> , jika sudah ketemu hapus , ganti dengan script dibawah ini.

<body onLoad='waitPreloadPage();'><!-- Loading with Image --> <div id='prepage' style='display:scroll;position:fixed;top:100px;left:3px'>
<img border='0' src='http://i811.photobucket.com/albums/zz36/asksalman/loading2.gif'/></div>
<!-- Ends Loading with Image -->

7. Kemudian cari kode </body> , hapus dan ganti dengan script dibawah ini :

<script language='javascript' src='http://pageprotection.googlecode.com/files/loading.js' type='text/javascript'/></body>

8. Klik simpan template

Keterangan :
Tulisan yang berwarna merah adalah URL gambar loadingnya , bisa anda ganti dengan URL gambar sesuai keinginan anda , anda dapat mencari sendiri di google image search silakan masukan kata kunci loading.gif.

Semoga bermanfaat...!!!

Read More

Komentari artikel ini...!!!

Script efek blur

Arahkan kursor mouse anda pada gambar dibawah ini :

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. Edit sesuai keinginan anda , saya rasa anda sudah tau
5. Klik simpan

<script src="gradualfader.js" type="text/javascript"> </script> <script> var gradualFader={} gradualFader.baseopacity=0.4 //set base opacity when mouse isn't over element (decimal below 1) gradualFader.increment=0.2 //amount of opacity to increase after each iteration (suggestion: 0.1 or 0.2) document.write('<style type="text/css">\n') //write out CSS to enable opacity on "gradualfader" class document.write('.gradualfader{filter:progid:DXImageTransform.Microsoft.alpha(opacity='+gradualFader.baseopacity*100+'); -moz-opacity:'+gradualFader.baseopacity+'; opacity:'+gradualFader.baseopacity+';}\n') document.write('</style>') gradualFader.setopacity=function(obj, value){ //Sets the opacity of targetobject based on the passed in value setting (0 to 1 and in between) var targetobject=obj if (targetobject && targetobject.filters && targetobject.filters[0]){ //IE syntax if (typeof targetobject.filters[0].opacity=="number") //IE6 targetobject.filters[0].opacity=value*100 else //IE 5.5 targetobject.style.filter="alpha(opacity="+value*100+")" } else if (targetobject && typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax targetobject.style.MozOpacity=value else if (targetobject && typeof targetobject.style.opacity!="undefined") //Standard opacity syntax targetobject.style.opacity=value targetobject.currentopacity=value } gradualFader.fadeupdown=function(obj, direction){ var targetobject=obj var fadeamount=(direction=="fadeup")? this.increment : -this.increment if (targetobject && (direction=="fadeup" && targetobject.currentopacity<1 || direction=="fadedown" && targetobject.currentopacity>this.baseopacity)){ this.setopacity(obj, targetobject.currentopacity+fadeamount) window["opacityfader"+obj._fadeorder]=setTimeout(function(){gradualFader.fadeupdown(obj, direction)}, 50) } } gradualFader.clearTimer=function(obj){ if (typeof window["opacityfader"+obj._fadeorder]!="undefined") clearTimeout(window["opacityfader"+obj._fadeorder]) } gradualFader.isContained=function(m, e){ var e=window.event || e var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement) while (c && c!=m)try {c=c.parentNode} catch(e){c=m} if (c==m) return true else return false } gradualFader.fadeinterface=function(obj, e, direction){ if (!this.isContained(obj, e)){ gradualFader.clearTimer(obj) gradualFader.fadeupdown(obj, direction) } } gradualFader.collectElementbyClass=function(classname){ //Returns an array containing DIVs with specified classname var classnameRE=new RegExp("(^|\\s+)"+classname+"($|\\s+)", "i") //regular expression to screen for classname within element var pieces=[] var alltags=document.all? document.all : document.getElementsByTagName("*") for (var i=0; i<alltags.length; i++){ if (typeof alltags[i].className=="string" && alltags[i].className.search(classnameRE)!=-1) pieces[pieces.length]=alltags[i] } return pieces } gradualFader.init=function(){ var targetobjects=this.collectElementbyClass("gradualfader") for (var i=0; i<targetobjects.length; i++){ targetobjects[i]._fadeorder=i this.setopacity(targetobjects[i], this.baseopacity) targetobjects[i].onmouseover=function(e){gradualFader.fadeinterface(this, e, "fadeup")} targetobjects[i].onmouseout=function(e){gradualFader.fadeinterface(this, e, "fadedown")} } } </script> <div class="gradualfader"> Simpan tulisan / text / gambar anda disini. </div> <script type="text/javascript"> gradualFader.init() //activate gradual fader </script>

Semoga bermanfaat...!!!

Read More