efeck gambar pecah dan muncul gambar ke 2 ketika cursor melintas with jquery

Demonya bisa dilihat disini 
1. Log in blogger, Rancangan, edit html,
2. cari kode ]]></b:skin> dan simpan css berikut tepat diatasnya :

.box_container{
margin-left:80px;
position:relative;
width:420px
;height:350px;
overflow:hidden;
color:white;
}
.images_holder{
position:absolute;
}
.image_div {
position:relative;
overflow:hidden;
width:50%;
float:left;
}
.kiri{
}
.kanan img{
margin-left: -100%;
}

Selanjutnya cari kode </head> dan letakkan kode berikut tepat di atas kode tadi :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){$(&#39;.box_container&#39;).hover(function(){var width = $(this).outerWidth() / 2;$(this).find(&#39;.kiri&#39;).animate({right:width},{queue:false,duration:1000});$(this).find(&#39;.kanan&#39;).animate({left:width },{queue:false,duration:1000});}, function(){$(this).find(&#39;.kiri&#39;).animate({ right : 0 },{queue:false,duration:1000});$(this).find(&#39;.kanan&#39;).animate({ left : 0 },{queue:false,duration:1000});});});
</script>

simpan template....

Cara pemanggilannya, misalkan pada Edit Html Posting :

<div class="box_container">
<div class="images_holder">
<div class="image_div kiri">
<img class="box_image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib0xNReAY4Cl90afyIm0MapiE0fhfANFvdaJG7yvwzW_9bZec083PILXXYKQ4KySM_R2oGs48kT2-mzXFHc9nJlG9VdmWXtfZ0Ud4N3R-VUzH2-BYjFObjHG1s3OJDZfsCFRTOu6RbbO0/s1600/iwan+%252C+ranu.jpg" style="width: 420px;" /></div>
<div class="image_div kanan">
<img class="box_image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib0xNReAY4Cl90afyIm0MapiE0fhfANFvdaJG7yvwzW_9bZec083PILXXYKQ4KySM_R2oGs48kT2-mzXFHc9nJlG9VdmWXtfZ0Ud4N3R-VUzH2-BYjFObjHG1s3OJDZfsCFRTOu6RbbO0/s1600/iwan+%252C+ranu.jpg" style="width: 420px;" /></div>
</div>
<img class="box_image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6x3g4x7dAATlWJdhlZkh0mO8XXkSyiNwAWMkvqQR1Ju0Xz7hOoMaLngLwADeeHR3JUM3ptH-664pIPHOfI6g5qV0v_30km37lCxMq0DmIBgJBLjbSBYAMN_3NTZDqcQgdOzpmkzbLgmc/s1600/full+happy.jpg" style="width: 420px;" /></div>

Simpan..........

Usahakan ukuran gambar keduanya sama, dan bila diatas kode </head> sudah ada java script jquery nya <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>; tak perlu ditambahkan lagi. 

cara memberi efeck image zoom with jquery

contohnya bisa langsung klik disini

Cara membuatnya :
1. Login blogger
2. Rancangan, Edit Html, Cari kode ]]></b:skin>
3. Dan Simpan kode berikut diatasnya :

/* ---------------
Zoom efect with jquery
---------------------------------- */
ul.jzoom {
        float: left;
        list-style: none;
        margin: 0;
        padding: 10px;
        width: 360px;

    }

ul.jzoom li {
    margin: 0; padding: 5px;
    float: left;
    position: relative; /* Set the absolute positioning base coordinate */
    width: 110px;
    height: 110px;

    }

ul.jzoom li img {

    width: 100px; height: 100px; /* Set the small jzoomnail size */
    -ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
    border: 1px solid #ddd;
    padding: 5px;
    background: #f0f0f0;
    position: absolute;
    left: 0; top: 0;

    }

ul.jzoom li img.hover {

    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_bHN8lfFRLO9QQ6hYcVVGUfoxca-_pc6KZneecSomPqELaGgJvVjE0ljxZDylcIIFKawy8CvVos3_2qzn4sri4SPmp2DTOCaclZKfh8X8KKojql6YWlxf70BO7GYmKM7OxVUIc6dFslac/) no-repeat center center;

    }

selanjutnya simpan kode berikut tepat diatas kode </head> :

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

<script type='text/javascript'> $(document).ready(function(){  $(&quot;ul.jzoom li&quot;).hover(function() {$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop()

.animate({

    marginTop: &#39;-110px&#39;,marginLeft: &#39;-110px&#39;,

    top: &#39;50%&#39;, left: &#39;50%&#39;,

    width: &#39;174px&#39;,height: &#39;174px&#39;,

    padding: &#39;20px&#39;}, 200);


    } , function() {

    $(this).css({&#39;z-index&#39; : &#39;0&#39;});

    $(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop()

    .animate({

    marginTop: &#39;0&#39;,marginLeft: &#39;0&#39;,

    top: &#39;0&#39;,left: &#39;0&#39;,

    width: &#39;100px&#39;, height: &#39;100px&#39;,

    padding: &#39;5px&#39; }, 400);

    }); $(&quot;ul.jzoom li a&quot;).click(function() {


    var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name

    $(&quot;#main_view img&quot;).attr({ src: mainImage });


    });


    });

    </script>

cara pemanggilannya :

<ul class="jzoom">
<li><a href="#"><img alt="Description" height="150" src="http://i1094.photobucket.com/albums/i447/kang-da2ng/iwanranu.jpg" width="200" /></a></li>
<li><a href="#"><img alt="Descriptions" height="150" src="http://i1094.photobucket.com/albums/i447/kang-da2ng/iwanranu.jpg" width="200" /></a></li>
<li><a href="#"><img alt="Description" height="150" src="http://i1094.photobucket.com/albums/i447/kang-da2ng/iwanranu.jpg" width="200" /></a></li>
</ul>

silahkan kawan-kawan simpan di gadget ataupun di postingan sesuai kebutuhan dan pengembangannya,,,,,

seperti biasa karena memang pakai jquery pasti ada jquery yang bentrok,,, kesimpulannya jika script jquery nya sudah ada, kawan-kawan tidak perlu menambahkannya lagi,,, 

cara membuat menu scrollbox elastis

contohnya bisa langsung klik disini

Cara membuatnya :
1. Login blogger
2. Rancangan, Edit Html, Cari kode ]]></b:skin>
3. Dan Simpan kode berikut diatasnya :

.elastcx {
float: left;
position: relative;
width: 170px;
height: 200px;
margin: 0 10px 5px 0;
}
.elastbx {
top: 0; left: 0; position: absolute;
line-height: 11px;width: 150px;    height: 188px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5UU4t4dZEH7ueEuRma9u8gm7TP_gr0q7ZDfz6IcVAql1TzyaGzy_LShWgBXPu34ifCgefk4fTcJlAidln31papPSK6q00e_K4AyQ7SgtKtHzTVNk8pGBlk1s7XpZfsfFpQbBNUcEbgmI-/s1600/papers.jpg) repeat;
border: 2px solid #999999;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;  
border-top-left-radius: 12px;
border-bottom-right-radius: 12px;
-moz-border-radius-topleft: 12px;
-moz-border-radius-bottomright: 12px;
-webkit-border-top-left-radius: 12px;
-webkit-border-bottom-right-radius: 12px;
overflow-x: hidden;
font-family: trebuchet ms;font-size: 9px;
padding: 8px 8px 15px;
overflow: hidden;-o-transition: all 0.9s ease-out;
-moz-transition: all 0.6s ease-out;
-webkit-transition: all 0.9s ease-out;
}
.elastbx:hover {
line-height: 15px;width: 500px; height: 300px;
color: #000;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5UU4t4dZEH7ueEuRma9u8gm7TP_gr0q7ZDfz6IcVAql1TzyaGzy_LShWgBXPu34ifCgefk4fTcJlAidln31papPSK6q00e_K4AyQ7SgtKtHzTVNk8pGBlk1s7XpZfsfFpQbBNUcEbgmI-/s1600/papers.jpg) repeat;
font-size: 14px;overflow: auto;
}
 

Simpan template.........

Untuk memanggilnya pada posting, simpan kode berikut pada edit html posting kawan :

<div class="elastcx">
<div class="elastbx">Masukkan teks nya disini kaw an.........Masukkan teks nya disini kawan.........Masukkan teks nya disini kawan.........Masukkan teks nya disini... </div></div>

selesai........... 

cara memberi waktu dengan tokoh cartoon kesukaan anda

anda mau jam di blog anda bersama dengan tokoh film animasi kesukaan anda

langsung saja anda bisa memilih tokon mana saja yang anda sukai dan kalian gemari

anda bisa langsung ke alamat link ini http://anime-widget.blogspot.com

anda bisa memilih jam dengan tokoh cartoon faforit anda

!. masuk ke blogger
2. masuk ke edit tata letak
3. lalu tambah gadged
4. masukan code yang anda pilih
contohnya :
<embed pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://www.deviantart.com/download/85887874/Naruto_Kakashi_Flash_clock_by_sd0711.swf" type="" wmode="transparent" height="158" width="162"></embed>

5. simpan template dan lihat hasilnya

bagus dan lucu- lucu kan

cara membuat animasi ketika loading page

contohnya bisa lihat langsung disini pas loading page

Cara membuatnya :
1. Login blogger
2. Rancangan, Edit Html, Cari kode ]]></b:skin>
3. Dan Simpan kode berikut diatasnya :

/* ---------------
 jquery animation loading page
---------------------------------- */
.QOverlay {
background-color: #000000; /*background color loading */
z-index: 9999;
}

.QLoader {
background-color: #CCCCCC; /* color bar loading */
height: 1px;
}

.QAmt {
color:#FF530D; /*loading Color number*/
font-size:50px;
font-weight:bold;
line-height:50px;
height:50px;
width:100px;
margin:-60px 0 0 -50px;
}

dan simpan script berikut diatas kode </head>:

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

<script src='http://kangdadang.googlecode.com/files/queryLoaderpre.js' type='text/javascript'/>

dan simpan script berikut diatas kode </body:

<script>
QueryLoader.selectorPreload = &quot;body&quot;;
QueryLoader.init();
</script>

simpan template dan lihat hasilnya........

jangan lupa kalau sudah ada Script jquery, tidak perlu ditambahkan lagi script jQuery....
Selamat mencoba... :) 

cara memper aman blog dari tukang copas

anda ingin karya yang anda tulis sampai keringatan itu aman dari tukang copas
ini saya menyediakan anti blok
maka tulisan yang anda buat itu tidak bisa di blok sama sekali
apakah anda mau?
mau ? benarkah anda mau
ini sya akan berikan tutorialnya lengkap dech dari fahmix-paz.blogspot.com
pelajari dengan sungguh2 psti anda bisa

1. Masuk ke Dasbor
2. Klik tab Tata Letak
3. Klik tab Edit HTML
4. Beri tanda centang pada kotak kecil  Expand Template Widget
5. Silahkan cari di dalam template anda kode <head>
6. Kalau sudah ketemu, anda Copy Pastekan script yang ada dibawah ini "Persis setelah kode<head>".

<SCRIPT type="text/javascript">
if (typeof document.onselectstart!="undefined") {
document.onselectstart=new Function ("return false");
}
else{
document.onmousedown=new Function ("return false");
document.onmouseup=new Function ("return true");
}
</SCRIPT>

7. Klik Simpan Template
8. Selesai************** selamat mencoba semoga sukses************************

mengubah alamat www.fahmix-paz.blogspot.com ke www.fahmix-paz.com

Mengubah Blog fahmix-paz.blogspot.com ke www.fahmix-paz.web.id

Nama adalah identitas pribadi yang melekat pada sesuatu. Jadi jika sesuatu itu berkesan dan bermanfaat , maka sangatlah mudah untuk mengingat apa atau siapa sih namanya. Sama seperti blog. Jika nama domain blogger anda saat ini adalah www.fahmix-paz.blogspot.commungkin terlalu panjang dan susah diingat bagi orang awam. Olehnya itu anda ingin merubahnya menjadi www.fahmix-paz.web.id (atau domain lain yang berekstensi or.id, co.id, net.id dan lain-lain)


Nah bagaimana caranya mengubah Blog anda dari www.fahmix-paz.blogspot.com menjadi www.fahmix-paz.web.id? Contoh website yang menggunakan cara ini adalah www.musikji.net dan www.ebs.or.id

Selain domain resmi, keamanan juga lebih mantap blom lagi yang hostingnya yang TIDAK ADA MATINYA, Google gituloh yang punya. Tunggu apalagi.... buruan....


Mau tau ngga caranya?
Baik, secara garis besar langkah-langkahnya sebagai berikut:
1. Dapatkan Domain dot id contoh www.fahmix-paz.web.id atau yang lain misal www.fahmix-paz.co.id
2. Mengelola Domain www.fahmix-paz.web.id di situs penyedia DNS (Domain Name Server) www.dnspark.net DNSPARK adalah salah satu penyedia DNS gratis. Salah satunya kita gunakan www.dnspark.net

3. Setup Blog atau blogspot anda ke www.fahmix-paz.web.id



Aksi mulai dari 0 (nol):
1. Tentukan domain anda. Silahkan mengkhayalkan domain apa yang cocok untuk blog anda. Misalnya www.fahmix-paz.web.id atau www.fahmix-paz.web.id atau www.fahmix-paz.or.id Ingat domain paling murah untuk Indonesia adalah web.id seharga Rp. 25.000. Melihat daftar harga dan persyaratan domain Indonesia di sini
2. Persiapkan fotocopy KTP atau SIM yang sudah di scanner
3.Mendapatkan Domain dot id


Silahkan mendaftar atau Registrasi domain di website PANDI http://register.pandi.or.id/. Hingga artikel ini ditulis, website PANDI merekomendasikan membuka www.register.pandi.or.id di browser Mozilla Firefox. Jadi, jika anda membuka di Internet Explorer kemungkinan pendaftaran domain sering mengalami masalah. Jika anda sudah membuka website pandi, Silahkan mendaftar sebagai user atau pengguna baru.




Silahkan buka website PANDI (Pengelolaan Nama Domain Internet Indonesia).
(kalo mau besarkan gambar tinggal klk kanan open new window)

Setelah itu muncul form pendaftaran. Silahkan isi identitas anda secara lengkap lalu klik register di bagian bawah pendaftaran. Lihat gambar di bawah:

Jika pendaftaran anda sukses maka akan muncul halaman sukses account registration dan mengarahkan agar anda membuka email. Lihat Gambar di bawah:

Saatnya anda membuka email dan klik link aktifasi account lalu membuka halaman baru sebagai tanda sukses aktifasi account. Setelah itu masukkan user dan password anda. Jangan lupa isi image confirmation. Lihat gambar di bawah.

Selanjutnya Klik domain management dan cari link membuat domain baru. Lihat gambar di bawah ini:

Setelah itu, silahkan cek domain yang ingin anda anda pakai. Masukkan salah satu kata domain anda (contoh yang kami masukkan testji) di domain lalu select ekstensi apakah web.id, go.id, or.id dll. Lalu klik tombol Check, maka akan muncul informasi apakah tersedia ( available) atau unavailable. Jika tersedia, lanjutkan registrasi dengan menekan register Lihat gambar di bawah:

Selanjutnya akan mengarahkan untuk mengisi domain information. Isi dengan data valid. Name Server Data juga harus di isi. Berhubung karena kita akan setup domain di dnspark artinya kita harus mengisi Name Server Data dengan nilai sebagai berikut:


Primary Server : fns1.dnspark1.net
Net Address :
Secondary Server : fns2.dnspark1.net
Net Address :
Secondary Server : fns3.dnspark1.net
Net Address :
Secondary Server : fns4.dnspark1.net
Net Address :


Biarkan semua net addres tidak terisi. Selanjutnya klik register.
Lihat gambar berikut:

Jika register sukses maka akan diarahkan ke halaman sukses mendaftarkan domain. Artinya permohonan Pendaftaran nama domain telah sukses dilakukan.

Untuk proses selanjutnya anda diminta melengkapi dokumen pendukung yakni fotocopy KTP atau SIM. Silahkan klik link Upload Document. Dan anda akan diarahkan kehalaman Upload Document. Gambar Sebagai Berikut:

Setelah halaman upload document muncul, select domain dengan mengklik tombol gambar search di form domain name. Lihat Gambar:

Setelah itu akan muncul jendela baru. Nah silahkan pilih domain. Lihat gambar

Silahkan lanjutkan dengan mengisi form lain seperti select document type dengan KTP atau SIM, lalu nama document dengan nama dokumen anda seperti upload KTP. Dan Klik tombol browse lalu cari file fotocopy KTP atau SIM anda. Setelah itu klik Submit. Lihat Gambar di bawah:

Jika sukses maka anda akan mendapatkan halaman dengan isi sbb:
"Sukses Membuat Dokumen
Terima kasih, silahkan tunggu konfirmasi melalui email"


Nah silahkan buka email anda dan anda di minta mengirim Biaya domain web.id anda sebesar Rp. 25.000. untuk domain web.id selama 1 (satu) tahun.


Silahkan transfer ke rekening PANDI:
PANDI - Pengelola Nama Domain Internet Indonesia
BCA KCU Sudirman Jl. Jend Sudirman kav 22-23, Jakarta 12920.
No. Rek : 035.3095665
Bank Mandiri KC Jakarta Wisma Indosemen Jl. Jend. Sudirman kan 70-71 Jakarta 12910. No. Rek : 122.0004848.647


Jika Biaya domain telah di transfer. Silahkan scanner bukti transfer lalu kirim ke email: pembayaran@pandi.or.id
Dalam waktu maksimal satu hari (Hari Kerja), domain anda akan aktif.


Nah sekarang domain www.fahmix-paz.web.id telah anda miliki. Sekarang saatnya mengelola domain www.fahmix-paz.web.id kewww.dnspark.com Silahkan membuka website dnspark di sini. dan langsung melakukan registrasi (mendaftar)


5. Silahkan mengisi form pendaftaran. Isi dengan identitas yang valid terutama email.
6. Jika selesai mendaftar, maka anda dapat login sesuai identitas yang anda masukkan atau cek email anda.
7. Berikut gambar halaman pertama saat login:

8. Perhatikan kolom kiri dan temukan daftar Configuration Menu. Lalu klik DNS Hosting. Lihat gambar dibawah:

9. Pada Menu DNS Hosting, klik Add Domains dari tiga link menu lagi yakni Add Domains, Edit Domains dan Backup Domains. Lihat Gambar dibawah:

10. Setelah itu akan muncul halaman untuk menambahkan domain. Siahkan diisi seperti contoh dibawah ini:

11. Setelah itu akan muncul link List Domain di pojok kiri bawah.
12. Klik www.fahmix-paz.web.id di link Domain List dan tampak hasilnya seperti gambar di bawah:



13. Kini kita melangkah ke intinya yakni setup domain.
14. Perhatikan gambar dibawah. Silahkan select add record Type ke CNAME, lalu masukkan alias www di kolom Alias Name dan isi ghs.google.com di kolom Destination Name. Sementara kolom TTL otomatis terisi 3600. Jika yakin sudah benar klik Update All.

15. Setup Domain Anda selesai.
16. Saatnya kita ke setup Blog atau blogspot kita ke domain.
17. Silahkan Login Panel Admin Blog anda. www.blogger.com (masukkan email dan password)

18. Jika login telah sukses, Silahkan masuk ke tab Pengaturan. Setelah itu, klik lagi tab Publikasikan. Dan klik link domain kostum. Gambar seperti di bawah ini:
19. Selanjutnya klik link domain kostum tadi. Setelah itu akan muncul halaman dan kolom menuntun anda membeli domain. Abaikan kolom itu lalu cari dan klik link beralih ke pengaturan lanjut di bagian kiri. Lihat gambar di bawah:

20. Setelah itu akan muncul halaman Pengaturan Lanjut. Silahkan masukkan domain anda di form Domain Anda. Contoh yang kami masukanhttp://www.ebsfm.web.id Lalu klik simpan pengaturan. Lihat gambar di bawah:

21. Nah semua setup telah selesai. Silahkan tunggu maksimal 48 Jam agar website www.fahmix-paz.web.id bisa diakses dan dapat berjalan dengan baik. Mengubah blog dari Blogspot ke dot com, net, org dll sama prosesnya. Kita akan bahas di waktu luang lagi yah... happy Bulkumers.