Foto Sampul

Tab Profil

Kronologi Tentang Teman Foto
Santa Mars

Konsep Pembuatan Kotak Instalasi Widget Blog


Sunday, March 24, 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTZUV-ykMUIhxOYdRhT8X_ttc4-fRlktWgm-MJmd-sVqStm4T1-X8k0QvitrI_IYY76dOgkR3Sb4MiWyrJnWi5flP0jE-knUXXC632NGKHZabGr8If3dpiEfGNrX4wzolxnVYAvTVy2xs/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/AVvXsEjSe1YPXoRAesyI8rjJ8tYzdnrz92svNiNUrEclYFN6Nj8eY-vVZRUbo6pKW-1lXM3i5optPEHk9EonUnueGN3ZzVThTyBcTw57B8QF8_4iKpdBwkSUS3AadVsDEYoYFTxbutwc_RS6vTY/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/AVvXsEjSe1YPXoRAesyI8rjJ8tYzdnrz92svNiNUrEclYFN6Nj8eY-vVZRUbo6pKW-1lXM3i5optPEHk9EonUnueGN3ZzVThTyBcTw57B8QF8_4iKpdBwkSUS3AadVsDEYoYFTxbutwc_RS6vTY/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 comments:

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

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

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

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

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

    ReplyDelete
  6. Keren tutorialnya bro! Thanks banget ya.. :)

    ReplyDelete
  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 ?

    ReplyDelete
  8. 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/

    ReplyDelete
  9. kirain jquerynya ditulis seperti DOM ternyata inline :-bd

    ReplyDelete
  10. mau coba buat ya gan, terima kasih buat infonyaaa

    ReplyDelete
  11. keren tutor nya sob , , ,
    izin comot and praktek , , :D:D:D:D

    ReplyDelete
  12. Agen Bola Online & Casino Online Terpercaya
    1 USER ID UNTUK SEMUA PERMAINAN !!!
    Casinobet77 Menyediakan Permainan Terbaru & Terbaik
    Livecasino | Bolaonline | Sabungayam | PokerDomino | SpadeGaming | SlotGame | Tangkas | BatuGoncang | Jdb168 SlotGame | NumberGame Lottery
    -----------------------------------------------------------------------
    - Bonus Deposit MEMBER BARU Sportbook 100%
    - Bonus Deposit 30% Khusus Permainan Sportbook
    - Bonus Deposit 10% Setiap Hari Untuk Semua Game
    - Bonus Deposit Setiap hari 5rb - 25rb
    - Bonus Casino Rollingan 0.8% Setiap Hari Senin
    - Bonus Rollingan Poker & domino 0,3%
    - Bonus Cashback Game & Tangkas 5%
    - Bonus Cashback Sportbook 5%
    - Bonus Cashback Sabungayam 5%
    - Bonus Referall 2% Semua Game
    - Bonus Referall 1% dari member Togel
    Contact Us Now :
    Livechat Casinobet77
    whatsapp : +85599495431
    PIN BBM : D6235F1C
    Wechat : casinobet77cs1
    Line : casinobet77
    skype : casinobet77
    Link pendaftaran :lc.chat/now/8523001/

    ReplyDelete

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