On Sabtu, 23 Maret 2013
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>]]></b:skin></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>
