Popular posts

About

Login melalui blogger


Konsep Pembuatan Kotak Instalasi Widget Blog

Sabtu, 23 Maret 2013
Posted by Firliana Ayu Oktafia
Add Comments
Read More...
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/AVvXsEhgwn9QjFZ2pbtTSyPXOd4ECmGC6bDKqN9fyxzqX6d7sv8WAYnzWneN9amJupbIrcAYfXiBPWwwHvBgGQH2zLHsGEl7YkzAQD9md3nzvPTpjuK_myBYf_CLYSgM_RftEM76s_zRxE32kbA/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/AVvXsEiiQScWo87uHgzYWF7oLWvMcAJcwRZwLD1TohCA8TQJ-8_Lx2-pzXXCrqDhI0wvwM1c25KkcXwZb7jQ717z0aNUR4D6nzlFjNI4epaxUXmiuKKuIl1sBVdiuL0O5S-yiXmnTVPysELKSSw/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/AVvXsEiiQScWo87uHgzYWF7oLWvMcAJcwRZwLD1TohCA8TQJ-8_Lx2-pzXXCrqDhI0wvwM1c25KkcXwZb7jQ717z0aNUR4D6nzlFjNI4epaxUXmiuKKuIl1sBVdiuL0O5S-yiXmnTVPysELKSSw/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

Pembuatan Element Blog Dengan Notepad

Posted by Firliana Ayu Oktafia
Add Comments
Read More...
Notepad kita miliki di Windows ini mempunyai banyak fungsi, bukan hanya untuk menuliskan catatan biasa tapi Notepad ini mempunyai kelebihan yang luar biasa. Notepad yang aku tahu bisa membuat Virus, Java Script, HTML, Text, Auto Run dan banyak lagi. Untuk kali ini aku akan menggunakan jasa Notepad untuk pembelajaran Blogger tanpa membuat Blog baru lagi.

Bagaimana caranya?

Unduh dulu Template Pembelajaran Notepad yang sudah saya rancang untuk kamu.
Setelah mengunduh anda bisa memulai pembelajaran sendiri dengan pengalaman anda.


Berikut adalah Srennshot dari Template Pembelajaran Blog

.


Note!

  1. Untuk Mengedit Anda bisa membuka file .htm tadi dengan Notepad.
  2. Untuk Menjalankan Element yang sudah jadi, buka dengan browser Anda.
  3. Didalam file .htm tadi terdapat jQuery, jQuery UI, CSS, HTML, dan Java Script.


Template Pembelajaran Blog NotePad


[ 660 Byte ] Via Google Code		Belajar biar pintar sob,
Jangan lupa koment ya sob, hhe

Membuat Animasi Login Di Home Blog

Posted by Firliana Ayu Oktafia
Add Comments
Read More...
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/AVvXsEhYNZ1wNgdNRpP3xklzGjOYxfIKE-cNyzE58tfT1FRjXPVGBH7iXnaYfKhyphenhyphenE91mPIY8teEsjUtJ6otLrrNbG5hG2g5xP7Xyd1jSkSV61XJdmiX6wVN0C_ovLSkvW4gyPiXRycAQPReE7aE/s28/Shutdown.png',
       Nama_Login_Anda = 'Santa_Mars';
</script>
<script src='http://fuck-u-admin.googlecode.com/files/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

CSS Position

Minggu, 17 Maret 2013
Posted by Firliana Ayu Oktafia
Add Comments
Read More...
CSS Position

Pernahkah kalian melihat elemen yang tampak saling bertumpukan, melayang, atau tampak keluar dari garis batas? Itu semua dibuat menggunakan CSS Position. Ada empat posisi elemen dalam CSS: Static, Relative, Absolute dan Fixed. Selain deklarasi posisi, terdapat pula beberapa properti yang biasanya dituliskan bersama dengan deklarasi posisi seperti top, right, bottom, left dan z-index.

top, right, bottom dan left adalah koordinat posisi. Saat kita menambahkan nilai koordinat pada posisi yang sesungguhnya, maka elemen akan bergeser sesuai dengan besar nilai koordinat.
top, right, bottom dan left berbeda dengan margin-top, margin-right, margin-bottom dan margin-left. Nilai margin difokuskan kepada jarak elemen terhadap elemen lainnya, sedangkan nilai koordinat lebih difokuskan kepada offset posisi elemen dari tempat asalnya.
z-index adalah urutan tumpukan. Saat kita mendeklarasikan position:absolute, maka kemungkinan yang terjadi adalah elemen akan bertumpuk di sebelah atas elemen atau di bawah elemen. Jika yang terjadi adalah yang ke dua, maka untuk mengangkatnya, kita harus mendeklarasikan z-index dengan nilai yang lebih besar dari 1.


Static
Ini adalah posisi sebenarnya. Mendeklarasikan position:static sama saja dengan tidak mendeklarasikan CSS Posisi.

Relative
Mendeklarasikan position:relative pada elemen secara kasat mata tidak akan mengubah apapun, namun kita bisa menerapkan koordinat posisi dan urutan tumpukan pada tipe posisi ini.

Absolute
Mendeklarasikan position:absolute pada elemen akan benar-benar memutuskan aliran elemen dari tempat asalnya dan membuat elemen bertumpuk dengan elemen lainnya.

Fixed
Mendeklarasikan position:fixed pada elemen akan benar-benar memutuskan aliran elemen dari tempat asalnya dan membuat elemen bertumpuk dengan elemen lain. Kelebihan penerapan posisi ini adalah akan membuat elemen tampak melayang dan tidak terpengaruh gerakan scroll bar.

Contoh Deklarasi RelativeContoh Deklarasi AbsoluteContoh Deklarasi Fixed
#area1 {
position:relative;
top:10px;
left:20px;
z-index:10;
}		#area1 {
position:absolute;
top:10px;
left:20px;
z-index:10;
}		#area1 {
position:fixed;
top:10px;
left:20px;
z-index:10;
}

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

Posted by Firliana Ayu Oktafia
Add Comments
Read More...

.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).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);
});

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

Posted by Firliana Ayu Oktafia
Add Comments
Read More...

.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);
});

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

Posted by Firliana Ayu Oktafia
Add Comments
Read More...

.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');
});