BLOGmaslukis.com

Tampilkan postingan dengan label Belajar JQuery. Tampilkan semua postingan

Minggu, 05 Juni 2016

Membuat Animasi Login Di Home Blog Membuat Animasi Login Di Home Blog

Animasi Login Di Home Blog ini memberikan efek manipulasi terhadap blog agar nampak seperti sedang login dengan Cap Jempol. Inspirasi ini saya dapatkan dari tetangga blogger kita dan saya padukan dengan pengalaman tentang jQuery saya. Yah, lumayan memberikan kesan yang menarik para pengunjung ketika berada di home blog kita.

Ya udah langsung tancap tutorialnya gan.

Animasi Login Home Blog

Letakkan Element dibawah ini tepat di atas </body>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- Animasi Login Begin -->
<div id='animasi-loginSM' style='position:fixed;z-index:9001;background:transparent;height:100%;width:100%;left:0;top:0;'>
<script type='text/javascript'>
// ----- Gambar Ukuran 28 x 28 Pixel -----
var  Gambar_Login_Anda ='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAV04jDzosCRsLfuUk6OXAl2qBlbmyd8MTs_7No_Ok6mAY7KEA666gZ7CfVK23QSBrq6E7cNps4X7YzcsQ_ZANsnlx3yPkmKVVetQSVa_kWkBUkKHckr6M-e91ZOxZi1dbs29mFqlINaQ/s28/Shutdown.png',
       Nama_Login_Anda = 'Santa_Mars';
</script>
<script src='https://sites.google.com/site/blogsantamars/css-santa-mars/animasi-login3.js' type='text/javascript'></script>
</div>
<div id='animasi-munyer1' style='position:fixed;z-index:9000;background:black;height:55%;width:100%;left:0;top:0;'></div>
<div id='animasi-munyer2' style='position:fixed;z-index:9000;background:black;height:55%;width:100%;left:0;bottom:0;'></div>
<div id='animasi-munyer3' style='position:fixed;z-index:9000;background:black;height:100%;width:55%;left:0;top:0;'></div>
<div id='animasi-munyer4' style='position:fixed;z-index:9000;background:black;height:100%;width:55%;right:0;bottom:0;'></div>
<!-- Animasi Login End -->
<b:else/>
</b:if>

Demo

Note!

Gambar Login ukuran 28 x 28 pixel

Konsep Pembuatan Kotak Instalasi Widget Blog

Selamat datang sobat, saya ingin berbagi bagaimana cara pembuatan "Kotak Instalasi Widget" dengan bantuan CSS dan jQuery. Konsep ini terinspirasi dari penginstalan software di Windows dan setelah itu saya coba untuk membuat di blog.

Ok rekan-rekan, langsung aja nyoba "Konsep Pembuatan Kotak Instalasi Widget Blog" ini di blog kamu.

Untuk memasang di posting blog anda harus menggunakan Tab HTML.

CSS Kotak Instalasi

.instalasi-widget-sm{z-index:9999;position:fixed;top:0px;left:0px;height:100%;background:rgba(240,240,240,0.7);width:100%;}
.kotak-instalasi{position:relative;top:25%;margin:auto;background:#333;color:white;width:500px;height:auto;border-radius:4px;padding:2px;
box-shadow:0pt 1px 1px 1px black;-webkit-box-shadow:0pt 1px 1px 1px black;-moz-box-shadow:0pt 1px 1px 1px black;}
.judul-instalasi{font-size:14px;font-family:Broadway;margin:5px;position:relative;color:white;border-radius:6px;padding:0px 2px 2px 24px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR8vwT7nr9C2YVNRRMfRB-zMG_Bc2ICYxZ6KBCEz3s1cTgILte8C10T5pJuBSvAbAAfgz-nLlPI0ySw0K0zWagzvdPKlchpqDvHukwIjxp7GJooWmTFfMbRSccKr3Ay_SnynGqytmt7SU/s16/share-sm.png") no-repeat scroll 2px 1px transparent}
.text-instalasi{padding:4px 10px;background:#FFF;color:#222;}
.instalasi-widget-sm pre {background: #2d2d2d;background: -moz-linear-gradient(top, #2d2d2d 0%, #2a2a2a 25%, #272727 50%, #242424 75%, #222222 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2d2d2d), color-stop(25%,#2a2a2a), color-stop(50%,#272727), color-stop(75%,#242424), color-stop(100%,#222222));background: -webkit-linear-gradient(top, #2d2d2d 0%,#2a2a2a 25%,#272727 50%,#242424 75%,#222222 100%); background: -o-linear-gradient(top, #2d2d2d 0%,#2a2a2a 25%,#272727 50%,#242424 75%,#222222 100%); background: -ms-linear-gradient(top, #2d2d2d 0%,#2a2a2a 25%,#272727 50%,#242424 75%,#222222 100%); background: linear-gradient(to bottom, #2d2d2d 0%,#2a2a2a 25%,#272727 50%,#242424 75%,#222222 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d2d2d', endColorstr='#222222',GradientType=0 );font:normal 12px/14px Monaco,Monospace;color:#ccc;padding:10px 15px;margin:10px 0px 10px;position:relative;max-height:500px;width:96%;word-wrap: normal;overflow:auto;border:1px solid #444;border-left:3px solid rgb(45, 166, 223);}
.text-instalasi pre{max-height:150px;width:400px}
.text-instalasi img{opacity:1;}
.tombol-instalasi{padding:10px;background:#CDD;text-align:right}
.dalam-tombol{margin:0px 4px;padding:2px 4px;background:#FFF;
box-shadow:0pt 1px 1px 1px #70a3e9;-webkit-box-shadow:0pt 1px 1px 1px #70a3e9;-moz-box-shadow:0pt 1px 1px 1px #70a3e9;
cursor:pointer;color:#333;}
.dalam-tombol-next{margin:0px 4px;padding:2px 4px;background:#0186CB;
box-shadow:0pt 1px 1px 1px #70a3e9;-webkit-box-shadow:0pt 1px 1px 1px #70a3e9;-moz-box-shadow:0pt 1px 1px 1px #70a3e9;
cursor:pointer;color:white;}

HTML dan jQuery Kotak Instalasi

<div class="instalasi-widget-sm" style="display:none;">

  <div id="instalasi-1" class="kotak-instalasi">
        <div class="judul-instalasi">Konsep Kotak Instalasi Widget Blog</div>
              <div class="text-instalasi">
              <center><table cellpadding="5" cellspacing="5"><tbody><tr> 
              <td align="left" valign="top" width="160"><img width="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmo8qPhBCUgsQHUYlfNFAFuWV8ILIibpYfSZxubndo9nt3OOkaiY6HqgWj5WtiyO9y44NM-P0g4D5uyr0aeaKfcR7FDVmYAaqOUib7USgOTks3IsfkhZx7sRiL9mzGyEGWwKznsu_-2DQ/s1600/no_image.jpg"/></td>
              <td><span><b>Disini</b> merupakan deskripsi atau penjelasan tentang widget yang anda buat.</span></td> 
              </tr></tbody></table></center>
              </div>
        <div class="tombol-instalasi">
              <span class="dalam-tombol-next" onClick="$('#instalasi-2').fadeIn('slow');$('#instalasi-1').fadeOut('slow');">Lanjut</span><span class="dalam-tombol" onClick="$('.instalasi-widget-sm').hide('slow');">batalkan</span>
        </div>
  </div>

  <div id="instalasi-2" class="kotak-instalasi" style="display:none;">
       <div class="judul-instalasi">Perihal Lisensi</div>
            <div class="text-instalasi">
            <center><table cellpadding="5" cellspacing="5"><tbody>
            <tr> <td>Mohon di baca dan menyetujui persyaratan lisensi di bawah ini sebelum memasang.</td></tr>
            <tr> <td>
<textarea style="width:100%;height:150px;padding:4px;">
Disini adalah letak lisensi tentang widget yang anda buat

</textarea>
            </td></tr>
            </tbody></table></center>
     </div>
     <div class="tombol-instalasi">
             <span class="dalam-tombol" onClick="$('#instalasi-1').fadeIn('slow');$('#instalasi-2').fadeOut('slow');">Mundur</span><span class="dalam-tombol-next" onClick="$('#instalasi-3').fadeIn('slow');$('#instalasi-2').fadeOut('slow');">Setuju</span><span class="dalam-tombol" onClick="$('.instalasi-widget-sm').hide('slow');">batalkan</span>
     </div>
  </div>

  <div id="instalasi-3" class="kotak-instalasi" style="display:none;">
       <div class="judul-instalasi">Tutorial Memasang Part 1</div>
             <div class="text-instalasi">
             <center><table cellpadding="5" cellspacing="5"><tbody>
             <tr> <td>
             <ul>
             <li>Pilih Tab Template lalu klik <b>Edit HTML</b></li>
             <li>Letakkan CSS berikut di atas <b>]]&gt;&lt;/b:skin&gt;</b></li>
             </ul>
             </td></tr>
             <tr> <td>
<pre>Kode CSS
Paste kan disini aja</pre>
             </td></tr>
             </tbody></table></center>
        </div>
        <div class="tombol-instalasi">
              <span class="dalam-tombol" onClick="$('#instalasi-2').fadeIn('slow');$('#instalasi-3').fadeOut('slow');">Mundur</span><span class="dalam-tombol-next" onClick="$('#instalasi-4').fadeIn('slow');$('#instalasi-3').fadeOut('slow');">Lanjut</span><span class="dalam-tombol" onClick="$('.instalasi-widget-sm').hide('slow');">batalkan</span>
        </div>
  </div>

  <div id="instalasi-4" class="kotak-instalasi" style="display:none;">
       <div class="judul-instalasi">Tutorial Memasang Part 2</div>
            <div class="text-instalasi">
            <center><table cellpadding="5" cellspacing="5"><tbody>
            <tr> <td>
            <ul>
            <li>Buat Gadget <b>HTML/JavaScript</b> baru</li>
            <li>Masukkan Elemen ini dan klik Simpan</li>
            </ul>
            </td></tr>
            <tr> <td>
<pre>Kode HTML
Anda bisa konvert di
http://santa-mars.blogspot.com/2013/02/generator-konverter-html-blog.html
</pre>
            </td></tr>
            </tbody></table></center>
       </div>
       <div class="tombol-instalasi">
             <span class="dalam-tombol" onClick="$('#instalasi-3').fadeIn('slow');$('#instalasi-4').fadeOut('slow');">Mundur</span><span class="dalam-tombol-next" onClick="$('#instalasi-5').fadeIn('slow');$('#instalasi-4').fadeOut('slow');">Lanjut</span><span class="dalam-tombol" onClick="$('.instalasi-widget-sm').hide('slow');">batalkan</span>
       </div>
  </div>

  <div id="instalasi-5" class="kotak-instalasi" style="display:none;">
        <div class="judul-instalasi">Konsep Instalasi Selesai</div>
               <div class="text-instalasi">
               <center><table cellpadding="5" cellspacing="5"><tbody><tr> 
               <td align="left" valign="top" width="160"><img width="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmo8qPhBCUgsQHUYlfNFAFuWV8ILIibpYfSZxubndo9nt3OOkaiY6HqgWj5WtiyO9y44NM-P0g4D5uyr0aeaKfcR7FDVmYAaqOUib7USgOTks3IsfkhZx7sRiL9mzGyEGWwKznsu_-2DQ/s1600/no_image.jpg"/></td>
               <td><span>Terimakasih anda telah memasang <b>Widget bla,bla,bla....</b>, semoga dapat bermanfaat.</span><br/><br/>
              <span>by <a href="http://santa-mars.blogspot.com" target="_blank" style="color:#0186CB;">Santa Mars</a></span><br/>
              <span>Copyright © 2013</span>
              </tr></tbody></table></center>
              </div>
        <div class="tombol-instalasi">
              <span class="dalam-tombol-next" onClick="$('#instalasi-5').fadeOut('slow');$('#instalasi-1').fadeIn('slow');$('.instalasi-widget-sm').hide('slow');">Selesai</span>
        </div>
  </div>

</div>

Tombol Untuk Memanggil Kotak Instalasi

<center><button onclick="$('.instalasi-widget-sm').show(400)">Open Instalasi</button></center>

Demo Unduh

JQuery .show(), .hide() dan .toggle()

.slideDown() digunakan untuk mengubah objek yang tersembunyi menjadi muncul dengan menciptakan efek sliding membuka.
.slideUp() digunakan untuk menyembunyikan objek dengan menciptakan efek sliding menutup.
.slideToggle() merupakan gabungan antara efek .slideDown() dan .slideUp(). Jadi, saat elemen sedang muncul, maka .slideToggle() bertugas untuk menyembunyikannya, sedangkan saat elemen sedang menghilang, maka .slideToggle() bertugas untuk menampilkannya.

Penulisan Secara Umum

$(sasaran).show(durasi);
$(sasaran).hide(durasi);
$(sasaran).toggle(durasi);

Sasaran: adalah objek yang akan dikenai perintah
Durasi: adalah kecepatan aksi. Nilainya bisa berupa milidetik (misal: 1500, 2000) atau 'slow', 'normal' dan 'fast'.

Kerangka

<button class="hilang">Hilang!</button>
<button class="muncul">Muncul!</button>
<button class="bukatutup">Muncul &amp; Hilang!</button>
<div id="target"></div>

CSS

body {padding:30px;}

#target {
  background:rgb(37, 42, 61);
  height:160px;
  padding:5px;
}

Deklarasi JQuery

$('.hilang').click(function() {
    $('#target').hide(500);
});
$('.muncul').click(function() {
    $('#target').show(500);
});
$('.bukatutup').click(function() {
    $('#target').toggle('slow');
});

Langsung Belajar Sendiri

JQuery .slideDown(), .slideUp() dan .slideToggle()

Penulisan Secara Umum

$(sasaran).slideDown(durasi);
$(sasaran).slideUp(durasi);
$(sasaran).slideToggle(durasi);

Sasaran: adalah objek yang akan dikenai perintah
Durasi: adalah kecepatan aksi. Nilainya bisa berupa milidetik (misal: 1500, 2000) atau 'slow', 'normal' dan 'fast'

Kerangka

<button class="hilang">Tutup!</button>
<button class="muncul">Buka!</button>
<button class="bukatutup">Buka & Tutup</button>
<div id="target"></div>

CSS

body {padding:30px;}

#target {
  background:rgb(37, 42, 61);
  width:200px;
  height:200px;
  padding:5px;
}

Deklarasi JQuery

$('.hilang').click(function() {
    $('#target').slideUp('slow');
});
$('.muncul').click(function() {
    $('#target').slideDown('fast');
});
$('.bukatutup').click(function() {
    $('#target').slideToggle(1000);
});

Langsung Belajar Sendiri

Sabtu, 04 Juni 2016

JQuery .fadeIn(), .fadeOut(), .fadeTo() dan .fadeToggle()

.fadeIn() digunakan untuk memunculkan objek yang tersembunyi dengan menciptakan efek kenaikan tigkat transparasi.
.fadeOut() digunakan untuk mnyembunyikan objek yang tampil dengan menciptakan efek penurunan tigkat transparasi hingga pada akhirnya menghilang total (display:none).
.fadeToggle() adalah gabungan antara efek .fadeIn() dan .fadeOut(). Jadi, saat elemen sedang menghilang, maka .fadeToggle() bertugas untuk menampilkannya, sedangkan saat elemen sedang tampil, maka .fadeToggle() bertugas untuk menyembunyikannya.
.fadeTo() memungkinkan kita untuk menciptakan penurunan tingkat transparasi sampai pada titik tertentu tanpa harus menghilangkan elemen layaknya menggunakan efek .fadeOut()

Penulisan Secara Umum

$(sasaran).fadeIn(durasi);
$(sasaran).fadeOut(durasi);
$(sasaran).fadeToggle(durasi);
$(sasaran).fadeTo(durasi, opacity);

Sasaran: adalah objek yang akan dikenai perintah
Durasi: adalah kecepatan aksi. Nilainya bisa berupa milidetik (misal: 1500, 2000) atau 'slow', 'normal' dan 'fast'
Opacity: variabel untuk menentukan tingkat transparasi akhir. Nilai opacity/transparasi dimulai dari 0 sampai 1 (misal: 1, 0.4, 0.7).

Kerangka

<button class="hilang">Hilang!</button>
<button class="muncul">Muncul!</button>
<button class="fd-to">FadeTo 0.5</button>
<button class="fd-to1">Reset</button>
<div id="target"></div>

CSS

body {padding:30px;}

#target {
  background:rgb(37, 42, 61);
  margin-bottom:15px;
  height:200px;
  padding:5px;
}

Deklarasi JQuery

$('.hilang').click(function() {
    $('#target').fadeOut('normal');
});

$('.muncul').click(function() {
    $('#target').fadeIn('normal');
});

$('.fd-to').click(function() {
    $('#target').fadeTo('fast', 0.5);
});

$('.fd-to1').click(function() {
    $('#target').fadeTo(1000, 1);
});

LANGSUNG BELAJAR SENDIRI

Langganan: Komentar ( Atom )

Ganti Tampilan



Url Gambar
Tipe Font
Warna Font
Ukuran Huruf
Reset?

BLOGmaslukis.com

Menu

Tombol Atas

Navbar Bawah

Cari Blog Ini

Minggu, 05 Juni 2016

Membuat Animasi Login Di Home Blog Membuat Animasi Login Di Home Blog

Animasi Login Home Blog

Konsep Pembuatan Kotak Instalasi Widget Blog

CSS Kotak Instalasi

HTML dan jQuery Kotak Instalasi

Tombol Untuk Memanggil Kotak Instalasi

JQuery .show(), .hide() dan .toggle()

Penulisan Secara Umum

Kerangka

CSS

Deklarasi JQuery

JQuery .slideDown(), .slideUp() dan .slideToggle()

Penulisan Secara Umum

Kerangka

CSS

Deklarasi JQuery

Sabtu, 04 Juni 2016

JQuery .fadeIn(), .fadeOut(), .fadeTo() dan .fadeToggle()

Penulisan Secara Umum

Kerangka

CSS

Deklarasi JQuery

Dialog perhatian

1 Perhatian ... !

JS

Navbar Bawah

Cari Blog Ini

Minggu, 05 Juni 2016

Membuat Animasi Login Di Home Blog Membuat Animasi Login Di Home Blog

Animasi Login Home Blog

Konsep Pembuatan Kotak Instalasi Widget Blog Konsep Pembuatan Kotak Instalasi Widget Blog

CSS Kotak Instalasi

HTML dan jQuery Kotak Instalasi

Tombol Untuk Memanggil Kotak Instalasi

JQuery .show(), .hide() dan .toggle() JQuery .show(), .hide() dan .toggle()

Penulisan Secara Umum

Kerangka

CSS

Deklarasi JQuery

JQuery .slideDown(), .slideUp() dan .slideToggle() JQuery .slideDown(), .slideUp() dan .slideToggle()

Penulisan Secara Umum

Kerangka

CSS

Deklarasi JQuery

Sabtu, 04 Juni 2016

JQuery .fadeIn(), .fadeOut(), .fadeTo() dan .fadeToggle() JQuery .fadeIn(), .fadeOut(), .fadeTo() dan .fadeToggle()

Penulisan Secara Umum

Kerangka

CSS

Deklarasi JQuery

Dialog perhatian

1 Perhatian ... !

JS

Konsep Pembuatan Kotak Instalasi Widget Blog

JQuery .show(), .hide() dan .toggle()

JQuery .slideDown(), .slideUp() dan .slideToggle()

JQuery .fadeIn(), .fadeOut(), .fadeTo() dan .fadeToggle()