Foto Sampul

Tab Profil

Kronologi Tentang Teman Foto
Santa Mars

Konsep Pembuatan Kotak Instalasi Widget Blog


Minggu, 24 Maret 2013

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("http://1.bp.blogspot.com/-QlYIFQkYAPw/UQQC6J6HUMI/AAAAAAAAB04/xeW5vCPUvRM/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="http://4.bp.blogspot.com/-VfqOC_ZKUCo/UU58b7S4AII/AAAAAAAACTw/73QLNyxyW14/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="http://4.bp.blogspot.com/-VfqOC_ZKUCo/UU58b7S4AII/AAAAAAAACTw/73QLNyxyW14/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

Artikel Terkait

24 komentar:

  1. pasang nya di bagian mna tuh html yang ke 2 n ke 3.

    BalasHapus
  2. Mkasih Banget SANTA Kamu Baik banget \o/

    BalasHapus
  3. SANTA GW BISA ANDA BISA LIAT DISINI UNTUK TESTING :D http://aldo-saputra.blogspot.com/2013/03/konsep-kotak-instalasi-widget-blog.html :))

    BalasHapus
  4. mau nanya ni gan ???
    mau ngbh foto yang ada di tamplate windows gmana ???
    http://indonesianlov.blogspot.com/

    BalasHapus
  5. Mas tutorial buat iframenya dong keren.

    BalasHapus
  6. mas santa trma ksih dah kbulin request nyx \o/ ^:D :-bd

    BalasHapus
  7. Mas, bisakah saya memesan satu template ? untuk biaya tidak perlu kuatir, untuk kriteria yang saya mau, nanti saya akan kirim by email.
    bagaimana mas ?

    BalasHapus
  8. keren tutorialnya mas, terima kasih

    BalasHapus
  9. Hello
    I installed the "Template Blogger Revolution" on my blog and would like to know how to replace my own Chatbox?
    separatedblogger@gmail.com
    http://bloggerseparado.blogspot.com.br/

    BalasHapus
  10. kirain jquerynya ditulis seperti DOM ternyata inline :-bd

    BalasHapus
  11. baru tahu saya konsep pembuatannya makasih

    BalasHapus
  12. mau numpang copy script ya gan terima kasih

    BalasHapus
  13. mau coba buat ya gan, terima kasih buat infonyaaa

    BalasHapus
  14. Kereeeeennnn... lanjutkan Sob (",)

    BalasHapus
  15. keren tutor nya sob , , ,
    izin comot and praktek , , :D:D:D:D

    BalasHapus

Copyright © 2016 | Privasi | SiteMap | Follow | Download Template