BloG Fitra cezzi

Konsep Pembuatan Kotak Instalasi Widget Blog

Posted by : Unknown

Selasa, 26 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi1unlQxVJF4YJLRiSXtdC45ehB9AMFPY2hSu28IGfx-nFNaH6QEv_0ioVk33Ki01_M-WRqZ8bTKs6IXSE6OYjSwCep2_ubB1nQshOQqublhRODFiU_daCUGhL7duHf7HPdc8gAuDMwcE/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/AVvXsEjTsO2lRv4u7rxj-UyXMqyI0oRTiABoG8xCKReCEnSZa1xFcwVmOfl748qKUMIGK_bK4R34ROp8tsqz5YSE3BbxaX9mvsNgODH09l_Q991Z0FK6Ag1Hu12xnStCqEUVAmmcj96HiEBXgFo/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://windowsxp-8.blogspot.com/2013/03/konsep-pembuatan-kotak-instalasi-widget.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/AVvXsEjTsO2lRv4u7rxj-UyXMqyI0oRTiABoG8xCKReCEnSZa1xFcwVmOfl748qKUMIGK_bK4R34ROp8tsqz5YSE3BbxaX9mvsNgODH09l_Q991Z0FK6Ag1Hu12xnStCqEUVAmmcj96HiEBXgFo/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://windowsxp-8.blogspot.com/2013/03/konsep-pembuatan-kotak-instalasi-widget.html" target="_blank" style="color:#0186CB;">Fitra cezzi</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

Demo Kotak Instalasi Widget Blog

Posted by : Unknown

0 komentar

membuat Comments Box atau Kotak Komentar

Posted by : Unknown

2 komentar

Senin, 25 Maret 2013

Comments Box atau Kotak Komentar adalah suatu kotak yang berfungsi untuk memberikan komentar terhadap isi dari suatu artikel dalam sebuah weblog. Jika di Wordpress.com kotak komentar tersebut akan langsung muncul tepat di bawah artikel. Namun tidak halnya di Blogspot/Blogger, kotak komentar dilayanan blog ini hanya berupa link yang kemudian baru akan muncul kotak komentar bagi pengunjung yang mau memberikan komentar terhadap artikel tersebut, hal ini menyebabkan para komentator sedikit enggan untuk melakukannya karena merasa malas untuk membuka window baru yang tentu saja akan memerlukan sedikit waktu untuk membukanya. Sehingga para pengguna layanan Blogspot lebih sedikit menerima komentar dibanding dengan para pengguna layanan Wordpress.

WARNING : KARENA BANYAK BLOGGER YANG GAGAL MENGGUNAKAN TRIK INI DAN JUGA ADA YANG KEHILANGAN POSTINGNYA, JADI ANDA HARUS MEMBACKUP DULU TEMPLATE ANDA. YANG GAGAL MEMAKAI INI MUNGKIN KARENA ADANYA KETIDAKCOCOKAN DENGAN TEMPLATE YANG DIGUNAKAN. JIKA TERJADI HAL-HAL YANG TIDAK DIINGIINGINKAN SEGERA KEMBALIKAN TEMPLATE ANDA YANG LAMA. TAPI BANYAK JUGA KOK YANG BERHASIL, SEMOGA BERUNTUNG

Tapi bagi kamu yang memakai layanan Blogspot tidakperlu khawatir lagi karena trik berikut ini akan mengulas bagaimana caranya menambahkan kotak komentar atau comments box sehingga menjadi kotak komentar yang ada di Wordpress yaitu persis berada dibawah artikel caranya adalah dengan menggunakan layanan di http://www.haloscan.com. Satu hal yang perlu diperhatikan sebelum kamu menggunakan layanan ini yaitu "komentar-komentar terdahulu akan hilang", jadi pikirkanlah dulu sebelum kamu memakai layanan ini. Kalau kamu sudah yakin mau menerapkannya maka berikut ini dalah caranya:

Buka website http://www.haloscan.com.

Daftarkan diri kamu di website tersebut.

Setelah selesai lalu Login dengan username dan password yang sama dengan pada saat mendaftar.

Setelah login berhasil maka akan muncul beberapa menu. Pertama-tama pilih menu setting. Didalam menu Setting ada beberapa pengaturan yang harus disi silahkan atur sesuai dengan keinginanmu. Supaya kotak komentarnya muncul dibawah postingan, ganti status "open in popup window" menjadi "off". kamudian simpan.

Langkah selanjutnya yaitu pilih menu Template. Silahkan pilih mana yang kamu sukai, sebaiknya sesuaikan dengan warna blog kamu kemudian simpan.

Langkah berikutnya yaitu pilih menu Install

Beri tanda pada radio button di samping tulisan Blogger or Blogspot lalu klik Tombol Next

Klik Tombol Brows , silahkan pilih file template yang sudah dibackup. Kalau belum silahkan backup dulu. Jika belum tahuh caranya backup klik disini

Klik tombol Upload Blogger Template.

Jika sudah berhasil klik tombol Download New Template kemudian di save.

Pilih Template kemudian klik menu Edit HTML

Untuk Upload template klik tombol Brows. Masukkan template yang sudah didownload dari haloscan tadi lalu Upload kemudian simpan setting.

Coba buka buka web blog kamu dan lihat hasilnya. Sekarang kamu sudah mempunya kotak komentar seperti yang ada di wordpress.
Trus gimana caranya nampilin komen-komen terbaru biar bisa kelihatan di sidebar? caranya gampang, yiatu kembali ke haloscan trus pilih dashbord nha disitu kan ada recent comments trus dibawahnya ada link tulisannya gini "put this widget on your site" nha kamu klik link tersebut, setelah itu dibawahnya akan muncul kotak yang berisi kode. Copy kode tersebut dan pasang di blog kamu, gampang to?

Selamat Mencoba... SEMOGA BERHASIIIIILLLLLL :y

Loading

3

2

1

Welcome To BloG Fitra cezzi

BloG Fitra cezzi

SELAMAT DATANG

Sekilas Tentang Fitra CEzzi

Contributors

BloG Fitra cezzi

Konsep Pembuatan Kotak Instalasi Widget Blog

CSS Kotak Instalasi

HTML dan jQuery Kotak Instalasi

Tombol Untuk Memanggil Kotak Instalasi

Demo Kotak Instalasi Widget Blog

membuat Comments Box atau Kotak Komentar

Blog Archive

Popular Posts

Followers