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-bie{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:15px;font-family:Broadway;margin:5px;position:relative;color:white;border-radius:6px;padding:0px 2px 2px 28px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyVhT16TuWs0uOX-vlYkB28BkW7E4tb8pYNncpRHLB-2rr1D-yaYEopzDm6Kc5DXMbRJpQm53Qavq38T7u9d7ZUnM8XlC7QmC951a364Pu-Wiu5rc0yTTW4k92vclCwEI75XLivRSPyJse/s1600/speaker_irvan-efendy.blogspot.com.png") no-repeat scroll 2px 1px transparent}
.text-instalasi{padding:4px 10px;background:#FFF;color:#222;}
.instalasi-widget-bie 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-bie" 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/AVvXsEhMMVEw72hMHn4NCsAvxa1Hr3Al8GWACUb0jFKH_ZCLLtAGBGppXvcAcuFpH-fYkkzfRRBy6zgInzEb7mXqAI4uFUgZ66nB_hdbGab88TN2P4gYCXSy6IQW7uQQWDlDXzRNIeza7R76y58/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-bie').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
<div style="text-align: right;">
Copyright ©2013 by IRvan EFendy™
</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-bie').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><span style="color: #EF4836;">Edit HTML</span></b></li>
<li>Letakkan <b><span style="color: #1676AC;">CSS</span></b> berikut di atas <b><span style="color: #03A678;">]]></b:skin></span></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-bie').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><span style="color: #0B12B7;">HTML/JavaScript</span></b> baru</li>
<li>Masukkan <span style="color: red;">Elemen</span> ini dan klik <b><span style="color: green;">Simpan</span></b></li>
</ul>
</td></tr>
<tr> <td>
<pre>Kode HTML
Anda bisa konvert di
http://irvan-efendy.blogspot.com/p/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-bie').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/AVvXsEhMMVEw72hMHn4NCsAvxa1Hr3Al8GWACUb0jFKH_ZCLLtAGBGppXvcAcuFpH-fYkkzfRRBy6zgInzEb7mXqAI4uFUgZ66nB_hdbGab88TN2P4gYCXSy6IQW7uQQWDlDXzRNIeza7R76y58/s1600/no_image.jpg"/></td>
<td><span>Terimakasih anda telah memasang <b>Widget bla,bla,bla....</b><br /> Semoga dapat bermanfaat.</span><br/><br/>
<span>Copyright ©2013 by <a href="http://irvan-efendy.blogspot.com" target="_blank" style="color:#0186CB;">IRvan EFendy</a>
</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-bie').hide('slow');">Selesai</span>
</div>
</div>
</div>
Tombol Untuk Memanggil Kotak Instalasi
<center><button onclick="$('.instalasi-widget-bie').show(400)">Open Instalasi</button></center>
.jpg)
.png)
.jpg "Cara Cek Pulsa Operator Selular Indonesia")
.jpg){kind=logo}
.jpg)
.jpg)
.jpg)
.jpg){kind=spacer}
.PNG)