Para Pencari Ilmu Tuts: Web Design

Download Aplikasi Text Editor Terbaru

Assalamualaikum Wr. Wb.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://ppi-tuts.blogspot.com/2016/06/download--text-editor-terbaru-2016.html" target="_blank"><img alt="Download Aplikasi Text Editor Terbaru" border="0" height="146" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL1AZA0jK2S_eeUASLCMhFlYhABm3pxHRnECQd25tbXEvMULp2bpxQazcy4S_M58W4PpF9Q706hncuVqLWO6mZHEq6JCmYFuS1kAkEDW9KChJ9T1wGSUP75hPNmRsx0AzI1zpfeCPJPm8/s400/ppiii.jpg" title="Download Aplikasi Text Editor Terbaru" width="400" /></a></div>
<br />
<div style="text-align: justify;">
<b>Download Aplikasi Text Editor Terbaru</b> | Bagi teman teman yang suka membaca <i>Tutorial </i>di blog ini pasti sering membaca "...Copy script di bawah ke <u><i>text editor</i></u>" nah, kali ini saya akan berbagi <i><a href="http://ppi-tuts.blogspot.com/search/label/Software" target="_blank">software </a></i>gratis yang biasa saya dan jutaan programmer lainnya gunakan untuk menulis script.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Oke langsung saja kita mulai.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-size: large;">1. Notepad++</span></div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHQULLkO_9_CltVjIcwlMsvvPrAMXHKzoD5LqyQtw2xjh8yEC4T0VXKE16DNNctuPeFhMNqSy1lwe5bW0OAxT2QKle0VWLblV3H49BPALnkm-3av5sOcKrHhPtjL-yT6_O5t33MNcuN98/s1600/Screenshot_3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Download Aplikasi Text Editor Terbaru" border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHQULLkO_9_CltVjIcwlMsvvPrAMXHKzoD5LqyQtw2xjh8yEC4T0VXKE16DNNctuPeFhMNqSy1lwe5bW0OAxT2QKle0VWLblV3H49BPALnkm-3av5sOcKrHhPtjL-yT6_O5t33MNcuN98/s400/Screenshot_3.png" title="Download Aplikasi Text Editor Terbaru" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Aplikasi ini adalah sebuah text editor yang cocok digunakan untuk menulis banyak bahasa pemrograman seperti, <a href="http://ppi-tuts.blogspot.com/search/label/HTML" target="_blank"><i>HTML</i></a>, <i><a href="http://ppi-tuts.blogspot.com/search/label/CSS" target="_blank">CSS</a></i>, <i><a href="http://ppi-tuts.blogspot.com/search/label/PHP" target="_blank">PHP</a> </i>dan lain lain. Tampilannya cukup sederhana dan mudah di gunakan untuk pemula.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: center;">
<a href="http://sh.st/D4PdG" rel="nofollow" target="_blank">DOWNLOAD</a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-size: large;">2. Brackets</span></div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidKyvySQhsmnjyR4-Px-a5iyQWMESNmGbcWBx-HXAScj1do_9byk2pEamylZNAS3loFkKsmFaAMWB5cVPtqSLxXzzIIhBkkDtTcM3MYrJ6smcsm6zleTIiodjvQWcsmlPLcOgf0MFiS8o/s1600/Screenshot_4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Download Aplikasi Text Editor Terbaru" border="0" height="168" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidKyvySQhsmnjyR4-Px-a5iyQWMESNmGbcWBx-HXAScj1do_9byk2pEamylZNAS3loFkKsmFaAMWB5cVPtqSLxXzzIIhBkkDtTcM3MYrJ6smcsm6zleTIiodjvQWcsmlPLcOgf0MFiS8o/s400/Screenshot_4.png" title="Download Aplikasi Text Editor Terbaru" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Hampir sama dengan notepad++, aplikasi ini mempunyai antar muka pengguna yang cukup menarik, selain itu juga sangat mudah di gunakan untuk menulis Bahasa Pemrograman.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: center;">
<a href="http://sh.st/D4PdP" rel="nofollow" target="_blank">DOWNLOAD</a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-size: large;">3. Atom</span></div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisS0_gomOf9U4-_ym5W4OJYJJb3VWHm4eO80Cm6pPw47BxwYopUs7NbZ5l2VuDuxhIVXIkA8XHn286RhxuU11l7V9ZfPKGSK4FyaGtruOMaOuZloFIhaws_m5GSPVO8rPoDHmNlu8tDUw/s1600/Screenshot_5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Download Aplikasi Text Editor Terbaru" border="0" height="268" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisS0_gomOf9U4-_ym5W4OJYJJb3VWHm4eO80Cm6pPw47BxwYopUs7NbZ5l2VuDuxhIVXIkA8XHn286RhxuU11l7V9ZfPKGSK4FyaGtruOMaOuZloFIhaws_m5GSPVO8rPoDHmNlu8tDUw/s400/Screenshot_5.png" title="Download Aplikasi Text Editor Terbaru" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Yang terakhir ada Atom, aplikasi ini mirip dengan Brackets, tetapi mempunyai antar muka pengguna yang lebih futuristik dan menarik, selain itu aplikasi ini mempunyai fitur Smart Autocompletion yang mempermudah ketika kita salah menulis bahasa pemrograman.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: center;">
<a href="http://sh.st/D4PdT" rel="nofollow" target="_blank">DOWNLOAD</a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Nah, itulah beberapa software editing gratis yang bisa teman teman gunakan untuk coding dirumah atau mempraktikkan tutorial dari blog kami.<br />
<br />
<div style="text-align: center;">
<span style="font-size: large;"><b><a href="http://sh.st/D80cz" rel="nofollow" target="_blank">Download All In One</a></b></span></div>
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Semoga bermanfaat, jangan lupa follow dan subscribe blog kami, follow semua Social Media <i>Facebook </i>dan <i>Twitter</i>.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Terima Kasih.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Wassalamualaikum Wr. Wb.</div>

Download Aplikasi Text Editor Terbaru

Assalamualaikum Wr. Wb. Download Aplikasi Text Editor Terbaru | Bagi teman teman yang suka membaca Tutorial di blog ini pasti sering m...

Baca selengkapnya »

HTML Dasar: Bermain dengan Table

<div style="text-align: justify;">
Assalamualaikum Wr. Wb.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://ppi-tuts.blogspot.com/2016/06/html-dasar-table.html" target="_blank"><img alt="HTML Dasar: Bermain dengan Table" border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmgYJDpALxKUP_88fsfYpND_vqBwed4SLJNX0PtPTlNsKIU71EbitaYuF7iYPUjuexRH4FeCax07EiAe20xZgdaxE44yrJkO_pKnXDYJZhVFQ6nrkfBQUZ2cpDmgHtfyqMiJSWTNGY5yc/s320/g.png" title="HTML Dasar: Bermain dengan Table" width="320" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>HTML Dasar: Bermain dengan Table</b> | Pada kesempatan ini saya akan membahas tentang table dalam <a href="http://ppi-tuts.blogspot.com/search/label/HTML" target="_blank">HTML</a>, Fungsi tabel ini sangat banyak dan di butuhkan dalam <i><a href="http://ppi-tuts.blogspot.com/search/label/Web%20Design" target="_blank">Web</a></i>, biasanya fungsi table dalam HTML di gunakan untuk membuat sebuah tabel, layouting, design form, dan lain sebagainya.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Oke, langsung saja kita mulai dengan tag awal yang di gunakan dalam table adalah tag <table>..</table>, tag ini adalah sebuah tag pembuka untuk mengidentifikasi sebuah table dalam file HTML, selanjutnya yaitu untuk membuat sebuah row atau baris dengan tag <tr>..</tr>, di dalam sebuah tag row, barulah ada tag <td>...</td> yang mengidentifikasikan sebuah coloumn atau kolom yang menyamping ke kanan, dan ada juga tag <th>..</th> yang digunakan untuk membuat sebuah table heading.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Langsung saja kita praktikkan...</div>
<div style="text-align: justify;">
<br /></div>
<pre class="brush: html"><table border="1" style="width:50%">
  <tr>
    <td><b>No</b></td>
    <td><b>Heading</b></td> 
    <td><b>Heading Lagi</b></td>
  </tr>
  <tr>
    <td>1</td>
    <td>Data</td> 
    <td>Datadata</td>
  </tr>
</table>
</pre>
<div style="text-align: justify;">
<br />
Maka hasilnya seperti ini:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpHrxHnQi65hASlEoLw59YnulKBzsoil8KtroDqasmb8ZZ0RvEXo0rrGhtvSyqXB40iX9BQ4Ddxl-ENG0SsHNeX9QcM3V6ecB6HTxL9MjWBRFoxSDLYQbOxV_68UcpNOCpkxaCCGYpyI8/s1600/Screenshot+from+2016-06-25+08%253A05%253A47.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="HTML Dasar: Bermain dengan Table" border="0" height="172" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpHrxHnQi65hASlEoLw59YnulKBzsoil8KtroDqasmb8ZZ0RvEXo0rrGhtvSyqXB40iX9BQ4Ddxl-ENG0SsHNeX9QcM3V6ecB6HTxL9MjWBRFoxSDLYQbOxV_68UcpNOCpkxaCCGYpyI8/s400/Screenshot+from+2016-06-25+08%253A05%253A47.png" title="HTML Dasar: Bermain dengan Table" width="400" /></a></div>
<br />
Atribut border diatas digunakan untuk menentukan bahwa tabel tersebut terdapat border (garis) atau tidak, sedangkan width digunakan untuk menentukan lebar tabel tersebut.<br />
<br />
Sekarang kita akan mencoba untuk styling tabel menggunakan <i><a href="http://ppi-tuts.blogspot.com/search/label/CSS" target="_blank">CSS</a></i> dengan menambahkan tag <style> atau dengan file <i><a href="http://ppi-tuts.blogspot.com/search/label/CSS" target="_blank">CSS</a></i>.<br />
<br /></div>
<pre class="brush: css">table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
</pre>
<br />
Maka border akan berubah<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwSNOkcVlu6XJpywQ7M8-PhQad5q_j6kPDscXJlGn8WCH3JSUebiMHuKHvIIMHC9YpHUvl5pkNrjjW-N-ROuAs9EV6d7GSqZLCj0PDmGNDn4VMTnK-7BFIRVw5suoXIiogcBMweybG-7E/s1600/Screenshot+from+2016-06-25+08%253A10%253A56.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="HTML Dasar: Bermain dengan Table" border="0" height="173" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwSNOkcVlu6XJpywQ7M8-PhQad5q_j6kPDscXJlGn8WCH3JSUebiMHuKHvIIMHC9YpHUvl5pkNrjjW-N-ROuAs9EV6d7GSqZLCj0PDmGNDn4VMTnK-7BFIRVw5suoXIiogcBMweybG-7E/s400/Screenshot+from+2016-06-25+08%253A10%253A56.png" title="HTML Dasar: Bermain dengan Table" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: justify;">
Terlihat border pada tabel tersebut menjadi tanpa space dan berwarna hitam tebal dan berukuran 1 px.</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Sekarang kita akan belajar tentang colspan dan rowspan, colspan adalah sebuah fungsi yang digunakan untuk membuat beberapa kolom dalam sebuah tabel menjadi satu, sedangkan rowspan membuat beberapa baris menjadi satu. Langsung saja kita praktikkan</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<pre class="brush: html"><table border="1" width="50%">
  <tr>
    <th>Nama:</th>
    <td>Roihan Azian</td>
  </tr>
  <tr>
    <th rowspan="2">HP:</th>
    <td>555 77 854</td>
  </tr>
  <tr>
    <td>555 77 855</td>
  </tr>
  <tr>
      <td colspan="2">Telpon</td>
  </tr>
</table></pre>
<br />
Maka jika kita preview hasilnya akan seperti gambar di bawah:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyS7efUNRIvrhj8Z12d089cyTMp9sSedlS1Y06GYyO-XZ985wMKzJ5vnVp4kGu8cronjexKVpZUaVR9zs2JK_9ara1EMU9RKGZNWJ1FABRhWDY0i3cxo054G4l7x5fcd2s1xvdzz4C3j8/s1600/Screenshot+from+2016-06-25+08%253A21%253A40.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="HTML Dasar: Bermain dengan Table" border="0" height="115" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyS7efUNRIvrhj8Z12d089cyTMp9sSedlS1Y06GYyO-XZ985wMKzJ5vnVp4kGu8cronjexKVpZUaVR9zs2JK_9ara1EMU9RKGZNWJ1FABRhWDY0i3cxo054G4l7x5fcd2s1xvdzz4C3j8/s400/Screenshot+from+2016-06-25+08%253A21%253A40.png" title="HTML Dasar: Bermain dengan Table" width="400" /></a></div>
<div style="text-align: justify;">
Kolom <i>HP</i> diatas menjadi seperti itu karena menggabungkan 2 baris dengan atribut <i>rowspan="2"</i>, sedangkan kolom <i>telpon</i> menjadi panjang karena menggabungkan 2 kolom dengan atribut colspan="2".</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Itulah sedikit pembahasan tentang <i>HTML</i> table, jika ada kesalahan atau pertanyaan silahkan kirimkan ke <i><b><a href="https://www.facebook.com/ppituts/" rel="nofollow" target="_blank">Facebook</a></b></i> dan <b><i><a href="https://twitter.com/Official_PPI" rel="nofollow" target="_blank">Twitter</a></i></b> kami, atau bisa juga dengan berkomentar di bawah.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Terima kasih atas kunjungan anda, semoga bermanfaat.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Wassalamualaikum Wr. Wb.</div>

HTML Dasar: Bermain dengan Table

Assalamualaikum Wr. Wb. HTML Dasar: Bermain dengan Table | Pada kesempatan ini saya akan membahas tentang table dalam HTML , Fungs...

Baca selengkapnya »

Belajar HTML dan Menjalankannya Secara Online

Assalamualaikum Wr. Wb.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://ppi-tuts.blogspot.com/2016/06/online-html-editor.html" target="_blank"><img alt="Belajar HTML dan Menjalankannya Secara Online" border="0" height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1uYcenBz87SUBt9Cz8kgLsevornoFx1hSoMqzxQMJ8nuNC3ttrQ4egKpMwDbDTzyGXWJ_Zy85AjAsC07nG4tiPnEy60kgAodOPCFUmHtradA5ADcUzy2954GxpjbQ7cbrZevsHXoS57g/s400/Screenshot+from+2016-06-24+14%253A53%253A42.png" title="Belajar HTML dan Menjalankannya Secara Online" width="400" /></a></div>
<br />
<br />
<div style="text-align: justify;">
<b>Belajar HTML dan Menjalankannya Secara Online</b> | Pada kesempatan kali ini saya akan berbagi sedikit untuk mempermudah kita dalam belajar <a href="http://ppi-tuts.blogspot.com/search/label/Web%20Design" target="_blank">Pemrograman Web</a> khususnya <i><a href="http://ppi-tuts.blogspot.com/search/label/HTML" target="_blank">HTML</a></i>, mungkin teman-teman sudah sering membaca artikel tentang Tutorial <i><a href="http://ppi-tuts.blogspot.com/search/label/Web%20Design" target="_blank">Web Design</a></i> <i>HTML</i> dan <a href="http://ppi-tuts.blogspot.com/search/label/CSS" target="_blank"><i>CSS</i></a> disini, di tutorial tersebut biasanya teman teman akan mempraktikkannya secara langsung di notepad dan di jalankan di browser.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Tetapi kali ini saya akan berbagi sedikit tips untuk mempermudah menjalankan sebuah file HTML dan CSS untuk pemula agar mudah dalam praktik nya nanti.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Oke langsung saja kita mulai dari yang pertama.</div>
<br />
<span style="font-size: large;">1. html-online.com</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVAfTZP_AHUt34AOU5rUq3zRYJHUZAMRENsyRnuukb481NCYMrPMoq5GO8t4qcIb3JcyuUOiaLVBeQEfdUyEn4zAjLnhaBV-qD7Aua8HSCpvrfSUWBTGaz6mNj4u2kQ-uHchMJqTe_FiQ/s1600/Screenshot+from+2016-06-24+14%253A39%253A59.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Belajar HTML dan Menjalankannya Secara Online" border="0" height="176" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVAfTZP_AHUt34AOU5rUq3zRYJHUZAMRENsyRnuukb481NCYMrPMoq5GO8t4qcIb3JcyuUOiaLVBeQEfdUyEn4zAjLnhaBV-qD7Aua8HSCpvrfSUWBTGaz6mNj4u2kQ-uHchMJqTe_FiQ/s400/Screenshot+from+2016-06-24+14%253A39%253A59.png" title="Belajar HTML dan Menjalankannya Secara Online" width="400" /></a></div>
<br />
<div style="text-align: justify;">
Dalam aplikasi ini anda bisa secara langsung menjalankan file HTML dnegan live preview di layar sebelah kirinya, jadi bisa mempermudah anda dalam belajar HTML.</div>
<br />
<span style="font-size: large;">2. onlinehtmleditor.net</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqVTtsUo95X3915k5ocevsrW9ag-4lIesZWJYjRCNGnE7Lmx8KWdKOVZICa-R_tvgQ7N7vI0xeB56zBp_MU7TaKFsmoxfP16v3NXxq4MWdAUN6yGDWVNlruVo4Hrd8vjvTaEXo9rzJetA/s1600/Screenshot+from+2016-06-24+14%253A44%253A00.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Belajar HTML dan Menjalankannya Secara Online" border="0" height="166" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqVTtsUo95X3915k5ocevsrW9ag-4lIesZWJYjRCNGnE7Lmx8KWdKOVZICa-R_tvgQ7N7vI0xeB56zBp_MU7TaKFsmoxfP16v3NXxq4MWdAUN6yGDWVNlruVo4Hrd8vjvTaEXo9rzJetA/s400/Screenshot+from+2016-06-24+14%253A44%253A00.png" title="Belajar HTML dan Menjalankannya Secara Online" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Hampir sama dengan yang atas, aplikasi/web ini mempunyai tampilan yang lebih sederhana, dan bentuk previewnya hampir sama dengan browser pada umumnya, tidak seperti editor atas yang mempunyai tampilan seperti di text editor.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-size: large;">3. www.tutorialspoint.com/try_html_online.php</span></div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1QxJw8xWK0nHW3V5_hgD3ybkw5iiTnhAz63FES6qLzzFc2tW1rdicvpzWcQE5u7bK0Z1MQGfBEfED5fdDovTZATBmxFHPU5nMWY1Eo82rDZ2AGqeh1W8Ukk-5VeMp56RXhLPQeEpMC54/s1600/Screenshot+from+2016-06-24+14%253A49%253A41.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Belajar HTML dan Menjalankannya Secara Online" border="0" height="190" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1QxJw8xWK0nHW3V5_hgD3ybkw5iiTnhAz63FES6qLzzFc2tW1rdicvpzWcQE5u7bK0Z1MQGfBEfED5fdDovTZATBmxFHPU5nMWY1Eo82rDZ2AGqeh1W8Ukk-5VeMp56RXhLPQeEpMC54/s400/Screenshot+from+2016-06-24+14%253A49%253A41.png" title="Belajar HTML dan Menjalankannya Secara Online" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Yang terakhir ada dari sebuah situs penyedia layanan pembelajaran online secara gratis, TutorialsPoint, didalamnya tidak hanya bisa menjalankan HTML saja, tapi banyak sekali Bahasa Pemrograman yang bisa di jalankan seperti, PHP, MySQL, Java, Perl, dan lain sebagainya.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Nah, itulah beberapa Online HTML editor yang bisa mempermudah kita dalam menjalankan atau mencoba menjalankan file HTML, semoga bermanfaat untuk anda yang masih belajar.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Sekian dan Terima Kasih.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Wassalamualaikum Wr. Wb.</div>

Belajar HTML dan Menjalankannya Secara Online

Assalamualaikum Wr. Wb. Belajar HTML dan Menjalankannya Secara Online | Pada kesempatan kali ini saya akan berbagi sedikit untuk mem...

Baca selengkapnya »

HTML Dasar: Bermain Dengan Paragraf

Assalamualaikum Wr. Wb.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmgYJDpALxKUP_88fsfYpND_vqBwed4SLJNX0PtPTlNsKIU71EbitaYuF7iYPUjuexRH4FeCax07EiAe20xZgdaxE44yrJkO_pKnXDYJZhVFQ6nrkfBQUZ2cpDmgHtfyqMiJSWTNGY5yc/s1600/g.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmgYJDpALxKUP_88fsfYpND_vqBwed4SLJNX0PtPTlNsKIU71EbitaYuF7iYPUjuexRH4FeCax07EiAe20xZgdaxE44yrJkO_pKnXDYJZhVFQ6nrkfBQUZ2cpDmgHtfyqMiJSWTNGY5yc/s320/g.png" width="320" /></a></div>
<br />
<div style="text-align: justify;">
<b>HTML Dasar: Bermain Dengan Paragraf</b> | Setelah lama tak berjumpa, kali ini saya akan berbagi sedikit ilmu tentang Web Programming <i><a href="http://ppi-tuts.blogspot.com/search/label/HTML" target="_blank">HTML</a></i> karena beberapa request dari teman-teman yang baru memulai belajar tentang Web Programming, setelah sebelumnya saya pernah posting tentang <a href="http://ppi-tuts.blogspot.co.id/2015/08/html-dasar-part-1.html" target="_blank">HTML dasar</a>, kali ini adalah lanjutan dari artikel tersebut.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Pertama, apa sih yang di maksud dengan paragraf ? Paragraf adalah merupakan suatu kumpulan suatu kesatuan pikiran yang lebih tinggi serta lebih luas dari pada kalimat. Atau definisi paragraf adalah bagian yang berasal dari suatu karangan yang terdiri dari sejumlah kalimat, yang isinya mengungkapkan satuan informasi/kalimat dengan pikiran utama sebagai pengendaliannya dan juga pikiran penjelas sebagai pendukungnya. (<a href="http://www.pengertianku.net/2014/12/pengertian-paragraf-dan-jenisnya-secara-lengkap.html" rel="nofollow" target="_blank">Link</a>).</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Tetapi dalam dunia Web Programming, paragraf digunakan untuk memulai sebuah baris baru dalam penulisan text, atau digunakan untuk sebuah judul (heading) di suatu paragraf.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Langsung saja kita mulai dengan tag yg pertama yaitu tag <p>...</p>, tag ini digunakan untuk membuat sebuah paragraf dengan ukuran huruf normal, dan setiap tag ini akan di batasi oleh break line</div>
<div style="text-align: justify;">
<br />
<span style="font-size: large;">Tag <p></span><br />
<br /></div>
<div style="text-align: justify;">
Contoh: </div>
<pre class="brush: html">Baris Pertama
Baris Kedua
<p>Baris Pertama</p><p>Baris Kedua</p></pre>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Maka Hasilnya akan seperti ini :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyoWyoYOJ-yaH6pYVs5r4veGtQS5fdT2Crmezk21pXoVJthvoY62Yf03nkzcSajhzZ8K6MrPppmMgnfDY5BQBmWiCegdEbW355lPMHWoqkTD4tP8uwNPRtG_2k23R3Rjoy0vu7XcVp3iw/s1600/Screenshot+from+2016-06-23+12%253A37%253A31.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="HTML Dasar: Bermain Dengan Paragraf" border="0" height="313" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyoWyoYOJ-yaH6pYVs5r4veGtQS5fdT2Crmezk21pXoVJthvoY62Yf03nkzcSajhzZ8K6MrPppmMgnfDY5BQBmWiCegdEbW355lPMHWoqkTD4tP8uwNPRtG_2k23R3Rjoy0vu7XcVp3iw/s400/Screenshot+from+2016-06-23+12%253A37%253A31.png" title="HTML Dasar: Bermain Dengan Paragraf" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
Artinya adalah tag <p></p> Akan secara otomatis membuat paragraf baru, dan tanpa tag tersebut maka sebuah tulisan tidak akan menjadi paragraf.<br />
<br />
<span style="font-size: large;">Tag <h1> - <h6></span><br />
<br />
Selanjutnya kita akan membahas tag <h1> - <h6>, tag ini digunakan untuk membuat sebuah Heading, H berarti heading dan nomor menentukan ukuran heading tersebut.<br />
<br />
Contoh:
<br />
<br />
<pre class="brush: html"><h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6></pre>
<br />
Maka Hasilnya akan seperti ini :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil9kORpwFKynus-09Rp7YG8JUd1XOKEsNzdwUBtsqUsCypHTxulIu1rKGCHDWCGeODmPVoTaziAP_47BhRC4i2OzLUFniDi7OZ9uqQ4ZHOjdIPuHLiaZMnRrpDihLXjKy57gV3B4TInfk/s1600/Screenshot+from+2016-06-23+12%253A46%253A02.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="HTML Dasar: Bermain Dengan Paragraf" border="0" height="241" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil9kORpwFKynus-09Rp7YG8JUd1XOKEsNzdwUBtsqUsCypHTxulIu1rKGCHDWCGeODmPVoTaziAP_47BhRC4i2OzLUFniDi7OZ9uqQ4ZHOjdIPuHLiaZMnRrpDihLXjKy57gV3B4TInfk/s400/Screenshot+from+2016-06-23+12%253A46%253A02.png" title="HTML Dasar: Bermain Dengan Paragraf" width="400" /></a></div>
<br />
Heading biasanya digunakan untuk sebuah judul atau awalan sebuah laman.<br />
<br />
Selanjutnya kita akan membahas tentang beberapa font styling<br />
<br /></div>
<pre class="brush: html"><strong>Strong</strong>
<em>Text<em><br>
<i>AAAA</i>
<b>BOLD</b></pre>
<br />
Maka Hasilnya akan seperti ini:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtDGKpHPmZT3974KQb3FbJ6jKbXzLdjdKejIRmqr-_6LHPDLCmOXKmHdGovOWzjA5Pzjm6TT-8INgXqgn3l0H5lpRpLQlQwTmG4h8RxN24ru9AGuagdr44aND9lTEYZsukQjahX10a0-s/s1600/Screenshot+from+2016-06-23+12%253A53%253A25.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="HTML Dasar: Bermain Dengan Paragraf" border="0" height="287" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtDGKpHPmZT3974KQb3FbJ6jKbXzLdjdKejIRmqr-_6LHPDLCmOXKmHdGovOWzjA5Pzjm6TT-8INgXqgn3l0H5lpRpLQlQwTmG4h8RxN24ru9AGuagdr44aND9lTEYZsukQjahX10a0-s/s400/Screenshot+from+2016-06-23+12%253A53%253A25.png" title="HTML Dasar: Bermain Dengan Paragraf" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<strong> Digunakan untuk menebalkan text sama seperti <b>, sedangkan <em> dan <i> digunakan untuk memiringkan text (Italic), dan <br> digunakan untuk membuat baris baru (Break Line)<br />
<br />
Sekian artikel kali ini, untuk semua kritik dan saran harap kirimkan ke Twitter dan Facebook kami atau bisa berkomentar di bawah.<br />
<br />
Terima Kasih atas kunjungannya.<br />
<br />
Wassalamualaikum Wr. Wb.

HTML Dasar: Bermain Dengan Paragraf

Assalamualaikum Wr. Wb. HTML Dasar: Bermain Dengan Paragraf | Setelah lama tak berjumpa, kali ini saya akan berbagi sedikit ilmu tent...

Baca selengkapnya »

Belajar Teknik Pencarian dengan PHP

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-_SDSIBqxT3mq-zKbG-4Uc8eQzOkSBiLwCS2RmceHfcASmJFG8TXx1VL780r_kSQGnAjapyrWkOsv_cf4_qCDBh9NQ1wJ1-Y-3I2olyojx4HzUWQLGZDKVgv7jqUl05dRcutPVhHkyYU/s1600/googlesearch.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Belajar Teknik Pencarian dengan PHP" border="0" height="167" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-_SDSIBqxT3mq-zKbG-4Uc8eQzOkSBiLwCS2RmceHfcASmJFG8TXx1VL780r_kSQGnAjapyrWkOsv_cf4_qCDBh9NQ1wJ1-Y-3I2olyojx4HzUWQLGZDKVgv7jqUl05dRcutPVhHkyYU/s320/googlesearch.jpg" title="Belajar Teknik Pencarian dengan PHP" width="320"></a></div>
<br />
Assalamualaikum Wr. Wb.<br />
<div style="text-align: justify;">
<b>Belajar Teknik Pencarian dengan PHP</b> | Siang ini saya akan menjelaskan tentang Teknik Teknik sederhana yang bisa di gunakan untuk melakukan pencarian kata di dalam suatu website, biasanya untuk melakukan ini kita harus menggunakan bahasa <i>proccessing </i>seperti PHP dan lain sebagainya untuk melakukan proses pengambilan data ke <i>database </i>dari <i>query </i>yang di inputkan di suatu <i>Text Field.</i></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Pertama mari buat database terlebih dahulu, karena dulu saya pernah membuat <b><a href="http://ppi-tuts.blogspot.co.id/2015/02/menampilkan-data-dari-database-dengan.html" rel="nofollow" target="_blank">Tutorial Menampilkan Data dari </a></b><i><b><a href="http://ppi-tuts.blogspot.co.id/2015/02/menampilkan-data-dari-database-dengan.html" rel="nofollow" target="_blank">Database</a></b> </i>maka saya akan menggunakan database dan tabel tersebut</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhnLRJqqE7Es9N4tUo5iNy8dbrAvkmVBfxyKkZIrXTEAX8qGoJ2V4IgQrVlH3KpG2BIGVhPrjaltfeCPco0a7OPtZVwm9CaKSvq1yVra6AG5xCq786XMSlTyaM6mFp0cvXpnDsOAPnDyU/s1600/sslike1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Belajar Teknik Pencarian dengan PHP" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhnLRJqqE7Es9N4tUo5iNy8dbrAvkmVBfxyKkZIrXTEAX8qGoJ2V4IgQrVlH3KpG2BIGVhPrjaltfeCPco0a7OPtZVwm9CaKSvq1yVra6AG5xCq786XMSlTyaM6mFp0cvXpnDsOAPnDyU/s1600/sslike1.png" title="Belajar Teknik Pencarian dengan PHP"></a></div>
<br /></div>
<div style="text-align: justify;">
Yang kita perlukan disini adalah dengan menggunakan Query SELECT dan Like, seperti sebagai contoh kita akan mencari record tabel dengan nama <i>roihan</i>, maka querynya menjadi<br />
<pre class="brush: sql">SELECT * FROM siswa WHERE nama LIKE '%roihan%'</pre>
Maka hasilnya akan seperti ini :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB2vzp8-ZHzkOb8yTXxrzBPnbERMu6ciT3HZdOejIthZxY8F4TaL5T3mQdhIFIcfGNbsQ4IZnger1zsaNPJu_RbhnafRMNemJOvnEgm9Q9YHT_1nmM9iGgCyOuz5VyePwiMuZeXjuVnxk/s1600/sslike2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Belajar Teknik Pencarian dengan PHP" border="0" height="224" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB2vzp8-ZHzkOb8yTXxrzBPnbERMu6ciT3HZdOejIthZxY8F4TaL5T3mQdhIFIcfGNbsQ4IZnger1zsaNPJu_RbhnafRMNemJOvnEgm9Q9YHT_1nmM9iGgCyOuz5VyePwiMuZeXjuVnxk/s320/sslike2.png" title="Belajar Teknik Pencarian dengan PHP" width="320"></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Jika kita menggunakan : </div>
<pre class="brush: sql">SELECT * FROM siswa WHERE nama LIKE 'r%'</pre>
</div>
<div style="text-align: justify;">
Hasilnya akan seperti ini :</div>
<div style="text-align: justify;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj03zJ_t5-fQwvrSX0N4eFs4iPABW5fKA_h91NMLhtbw-ViVdoUZEew0jr0mOwy_R5O77ufJ7aZ37M4O0D0g76NwQYDGEiJycjSV03QQZtrfQVB3DDDMQnBZeWELrLBrLYDitzXhgEuEuA/s1600/sslike3.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Belajar Teknik Pencarian dengan PHP" border="0" height="268" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj03zJ_t5-fQwvrSX0N4eFs4iPABW5fKA_h91NMLhtbw-ViVdoUZEew0jr0mOwy_R5O77ufJ7aZ37M4O0D0g76NwQYDGEiJycjSV03QQZtrfQVB3DDDMQnBZeWELrLBrLYDitzXhgEuEuA/s320/sslike3.png" title="Belajar Teknik Pencarian dengan PHP" width="320"></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Karena mengambil record yang berhuruf awalan 'R'</td></tr>
</tbody></table>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Jika kita menggunakan :</div>
<div style="text-align: justify;">
<pre class="brush: sql">SELECT * FROM siswa WHERE nama LIKE '%o'</pre>
</div>
<div style="text-align: justify;">
Maka hasilnya seperti ini : </div>
<div style="text-align: justify;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfUyqUo363gEZ1qs_7fmup6M0mM9ciQkR0iBk_evl6FmLwn6RqivpiucfCcbeSL5O8Ny0Dxlw-38TWLiu2ioBXTKhEfZNjkSluJ9zxQEk73ACGRKuHAFNcnSP_kxueFlbS0H_cUrlh3ZU/s1600/sslike4.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Belajar Teknik Pencarian dengan PHP" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfUyqUo363gEZ1qs_7fmup6M0mM9ciQkR0iBk_evl6FmLwn6RqivpiucfCcbeSL5O8Ny0Dxlw-38TWLiu2ioBXTKhEfZNjkSluJ9zxQEk73ACGRKuHAFNcnSP_kxueFlbS0H_cUrlh3ZU/s1600/sslike4.png" title="Belajar Teknik Pencarian dengan PHP"></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Karena mengambil record dengan akhiran huruf  'o'</td></tr>
</tbody></table>
<br />
<div style="text-align: justify;">
Jadi kesimpulannya yaitu :</div>
<div style="text-align: justify;">
<br />
<ol>
<li>Tanda <b>%string%</b> digunakan jika kita ingin mencari record dengan kata yg di inputkan di dalam string tersebut.</li>
<li><i><b>R%</b></i> digunakan untuk mencari record dengan awalan R.</li>
<li><i><b>%R</b></i> digunakan untuk mencari record dengan akhiran R.</li>
</ol>
<div>
Sekian tutorial kali ini, jika ada kesahalan dalam penulisan atau penyampaian silahkan berikan komentar di bawah ini, Terima Kasih sudah mau membaca, silahkan Like dan Follow Blog ini untuk Tutorial-tutorial selanjutnya.</div>
<div>
<br /></div>
<div>
Wassalamualaikum Wr. Wb.</div>
</div>

Belajar Teknik Pencarian dengan PHP

Assalamualaikum Wr. Wb. Belajar Teknik Pencarian dengan PHP | Siang ini saya akan menjelaskan tentang Teknik Teknik sederhana yang bis...

Baca selengkapnya »

Template Web: PPI Design

<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<img alt="Template Web: PPI Design" border="0" height="204" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiRjrqffVV7MMUlgdB6hz5iX0m0Ho-mXkaQGr5F2kcj-KuGCtuzwFc_qSXR8xIWVu_WdOFEF5djhTQI3E2q8zZYwULpMofPYH6sz-O2xj1_97WoiYiUwR4Hpf6ueTE5j_NdcP8AlNBqqk/s1600/ss+shadow1.jpg" title="Template Web: PPI Design" width="640" /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Assalamualaikum Wr. Wb.</div>
<div class="separator" style="clear: both; text-align: justify;">
<b>Template Web: PPI Design</b> | Posting kali ini kami akan membagikan kepada anda sebuah web design buatan kami yang berjudul <b><i><a href="http://ppi-tuts.blogspot.com/2014/02/ppi-design.html" target="_blank">PPI Design</a></i></b>, yap, ini adalah Template <a href="http://ppi-tuts.blogspot.com/search/label/Web%20Design" rel="nofollow" target="_blank">Web Design</a> pertama yang kami rilis, Template ini cocok untuk Profile Perusahaan, Web Pribadi, Tempat pemesanan Jasa Online, dan kegunaan lainnya.</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0G9ddJEfhk4DbziNNTmlHc3BZ6wrY5KCJlBH15pSUBvJhrbcAtXYndvNf8f7dHX-ZAjdVjyLLInUTEKGBNdlua34hhknDe5WtLDmGupTWYIFos4FKKGQZslnqyYrZkGK6SVTK5m_3Emc/s1600/ppidesignss3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Template Web: PPI Design" border="0" height="312" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0G9ddJEfhk4DbziNNTmlHc3BZ6wrY5KCJlBH15pSUBvJhrbcAtXYndvNf8f7dHX-ZAjdVjyLLInUTEKGBNdlua34hhknDe5WtLDmGupTWYIFos4FKKGQZslnqyYrZkGK6SVTK5m_3Emc/s1600/ppidesignss3.jpg" title="Template Web: PPI Design" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Template ini berjenis <i>fixed width</i> yang berarti lebarnya full ke layar monitor anda, dilengkapi juga dengan <i>Social Icon</i> yang berguna untuk mempermudah pengunjung untuk mengetahui Social Account kita.</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Kami Juga bersedia untuk mendesign page lainnya seperti <i>About</i>, <i>Contact</i> dan lainnya sesuai permintaan anda dengan <b>Jasa Design Web </b>Kami.</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Jika anda berminat silahkan kirimkan ke <b><i>Facebook</i></b> dan <b><i>Twitter</i></b> kami untuk pemesanan design dengan Template ini dan Template-template selanjutnya.</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-size: large;"><b><a href="http://ppi-design-demo.bl.ee/" rel="nofollow" target="_blank">DEMO</a></b> | <b><a href="https://www.paywithatweet.com/pay/?id=af8a55408790232290c35a14751c500f" rel="nofollow" target="_blank">DOWNLOAD</a></b></span></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Sekian artikel kali ini, semoga bermanfaat, <b><i><a href="http://twitter.com/Official_PPI" rel="nofollow" target="_blank">Follow</a></i></b> dan <b><i>Like Fanspage</i></b> kami untuk Update selalu artikel tentang pengetahuan dan pemrograman.</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Wassalamualaikum Wr. Wb.</div>
<br />
<div style="text-align: center;">
<a href="http://api.idhostinger.com/redir/858332" target="_blank"><img alt="Hosting Gratis" border="0" height="125" src="http://www.idhostinger.com/banners/id/hostinger-125x125-powered-2.gif" width="125" /></a></div>

Template Web: PPI Design

Assalamualaikum Wr. Wb. Template Web: PPI Design | Posting kali ini kami akan membagikan kepada anda sebuah web design buatan kami...

Baca selengkapnya »

Membuat Efek Shadow atau Bayangan dengan CSS

<div class="separator" style="clear: both; text-align: center;">
<img alt="Membuat Efek Shadow atau Bayangan dengan CSS" border="0" height="203" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYIF5FJwjlm_440Ji15Wwle4zT_OhUUJNspaoUMFjYFc9Mi_XdnvwJJbyGILWautOES_bEnvRDeWH-JvBlt0E0pho_7ERGh4rQ6zPVCHzkCz975tYQgNBJSkX4v1-GxUUj9Lt1p9ymUmU/s1600/ss+shadow1.jpg" title="Membuat Efek Shadow atau Bayangan dengan CSS" width="640" /></div>
<br />
Assalamualaikum Wr. Wb.<br />
<div style="text-align: justify;">
<b>Membuat Efek Shadow atau Bayangan dengan CSS</b> | <b><i><a href="http://ppi-tuts.blogspot.com/" target="_blank">Para Pencari Ilmu</a></i></b> kembali lagi setelah 4 hari tidak posting artikel karena kesibukan sekolah ^_^ kali ini kami akan share tentang Web Design, yaitu efek shadow atau bayangan dengan <i><a href="http://www.parapencariilmu.com/search/label/CSS" target="_blank">CSS</a></i>.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Yap, Mari kita mulai dengan membuat file html, silahkan ketikkan script seperti di bawah (di tutorial ini mulai dari bagian intinya saja, silahkan ketikkan script utama <b><i><html></i></b> dan <b><i><link ... css</i></b>  telebih dahulu).</div>
<blockquote class="tr_bq">
<p <span style="color: purple;">class</span>="<span style="color: blue;">button1</span>"><a href="http://www.parapencariilmu.com" title="Like" target="blank">Like Us</a></p></blockquote>
<div style="text-align: justify;">
Ya, ini hanyalah contoh, anda bisa isi dengan sesuai kebutuhan anda, code yang berwarna <span style="color: blue;">biru</span> tersebut adalah nama <span style="color: purple;">class</span> efek shadow nantinya. Setelah itu kita membuat file <b><i><a href="http://ppi-tuts.blogspot.com/search/label/CSS" target="_blank">css</a> </i></b>nya, ketikkan script seperti di bawah.<br />
<br />
<pre name='code' class='css'>
.button1 {
text-align: center;<br /> background-color: #333;<br /> height: 50px;<br /> width: 150px;<br /> padding-top: 1.4em;<br /> margin-left: 14.8em;<br /> border-radius: 8px;<br /> -moz-border-radius: 8px;<br /> -webkit-border-radius: 8px;<br /> -moz-border-radius: 8px;<br /> -webkit-border-radius: 8px;<br />}<br />.button1:hover {<br /> box-shadow: #333 0px 0px 15px;<br /> -moz-box-shadow: #333 0px 0px 15px;<br /> -webkit-box-shadow: #333 0px 0px 15px;<br />}<br />.button1 a {<br /> color: #ADADAD;<br />}<br />.<br /><br />button1 a:hover {<br /> text-decoration: none;<br /> color: #FFF;
</pre><div>
<br /><div style="text-align: justify;">
Script di atas adalah contoh button like yang di lengkapi juga dengan efek <span style="color: lime;">border radius</span>, code <span style="color: yellow;">.button1:hover</span> disitu berguna ketika mouse hover/menuju ke button tersebut, maka button itu akan mengeluarkan bayangan <span style="color: #e06666;">15px</span> di setiap sisi dengan warna #333 (hitam), maka hasilnya akan seperti ini :</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUvu-HMkqVfcnaZ-SJKz0AjgS3zAqnbmN4eVMqJJ_Elk3N_soE8Xzz0rc2Z2UYxSOsKRGTEi4MQJ5sFWoMmKouFnyGlueuXUdJmQEfEx8LLO5pW5vwvzshgrNWG7C4G8KcKULnLzcUAcY/s1600/ss+shadow2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Efek Shadow atau Bayangan dengan CSS" border="0" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUvu-HMkqVfcnaZ-SJKz0AjgS3zAqnbmN4eVMqJJ_Elk3N_soE8Xzz0rc2Z2UYxSOsKRGTEi4MQJ5sFWoMmKouFnyGlueuXUdJmQEfEx8LLO5pW5vwvzshgrNWG7C4G8KcKULnLzcUAcY/s1600/ss+shadow2.jpg" title="Membuat Efek Shadow atau Bayangan dengan CSS" width="320" /></a></div>

<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Jika menurut anda bayangan kurang lebar, anda bisa merubah <span style="color: #e06666;">15px </span>sesuai keinginan anda.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Cukup mudah dipahami bukan ? Jika ada pertanyaan seputar script di atas silahkan <b>berkomentar</b> di bawah yaa ^_^</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Anda juga bisa request artikel ke kami dengan mengirimkannya ke <a href="http://twitter.com/Official_PPI" rel="nofollow" target="_blank"><b><i>Twitter</i></b></a> atau <b><i>Fanspage</i></b> kami.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Jika artikel ini dirasa bermanfaat silahkan share artikel ini ke orang yang membutuhkan dengan mencantumkan sumbernya yaa ^_^</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Sekian artikel kali ini, mohon maaf jika ada kesalahan.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Wassalamualaikum Wr. Wb.<br />
<br />
<br />
<div style="text-align: center;">
<span style="font-size: large;"><a href="http://ppi-tuts.blogspot.com/2014/02/ppi-design.html" target="_blank">Download Template PPI Design</a></span></div>
</div>
</div>

Membuat Efek Shadow atau Bayangan dengan CSS

Assalamualaikum Wr. Wb. Membuat Efek Shadow atau Bayangan dengan CSS | Para Pencari Ilmu kembali lagi setelah 4 hari tidak posting ar...

Baca selengkapnya »

Mempercantik Kontak Form dengan CSS3

<div class="separator" style="clear: both; text-align: center;">
<img alt="Mempercantik Kontak Form dengan CSS3" border="0" height="318" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtC9HJ63yh4iKaQEMGsH6wr9dCNzmZflIENbOBYWSBeOTxnGDuq1N3erE_igqm2pPELfqpMZ1gyOUk1mtYC1ZSoogTQaRCCszdVlbFWjPIT8-MmZdakNCrVYXyNH3lT4Hq_AnevYeYxSg/s1600/contact+form+1.jpg" title="Mempercantik Kontak Form dengan CSS3" width="320" /></div>
<br />
Assalamualaikum Wr. Wb.<br />
<div style="text-align: justify;">
<b>Mempercantik Kontak Form dengan CSS3</b> | Kali ini kami akan share tentang cara membuat kontak form dengan HTML dan <a href="http://ppi-tuts.blogspot.comsearch/label/CSS" target="_blank">CSS</a>3, file-file yang di butuhkan disini ada 2, yaitu contact-form.html dan style.css, pertama-tama kita buat file contact-form.html terlebih dahulu.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Silahkan buat file HTML baru, bisa di edit dengan notepad atau dreamweaver, setelah itu copy script di bawah dan paste-kan ke file tersebut.</div>
<div style="text-align: justify;">
</div>
<blockquote>
<!DOCTYPE html><br />
<html><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><head><br />
<span class="Apple-tab-span" style="white-space: pre;">  </span><title>CSS Contact Form</title><br />
<span class="Apple-tab-span" style="white-space: pre;">  </span><meta charset="utf-8"><br />
<span class="Apple-tab-span" style="white-space: pre;">  </span><link rel="stylesheet" type="text/css" href="style.css" media="all"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></head><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><body><br />
<span class="Apple-tab-span" style="white-space: pre;">  </span><h2>Kontak Kami</h2><br />
<span class="Apple-tab-span" style="white-space: pre;">  </span><form class="form"><br />
<span class="Apple-tab-span" style="white-space: pre;">   </span><p class="name"><br />
<span class="Apple-tab-span" style="white-space: pre;">    </span><input type="text" name="name" id="name" placeholder="Nama Anda"><br />
<span class="Apple-tab-span" style="white-space: pre;">    </span><label for="name">Nama</label><br />
<span class="Apple-tab-span" style="white-space: pre;">   </span></p><br />
<span class="Apple-tab-span" style="white-space: pre;">   </span><p class="email"><br />
<span class="Apple-tab-span" style="white-space: pre;">    </span><input type="text" name="email" id="email" placeholder="mail@contoh.com"><br />
<span class="Apple-tab-span" style="white-space: pre;">    </span><label for="name">Email</label><br />
<span class="Apple-tab-span" style="white-space: pre;">   </span></p><br />
<span class="Apple-tab-span" style="white-space: pre;">   </span><p class="web"><br />
<span class="Apple-tab-span" style="white-space: pre;">    </span><input type="text" name="web" id="web" placeholder="www.contoh.com"><br />
<span class="Apple-tab-span" style="white-space: pre;">    </span><label for="name">Website</label><br />
<span class="Apple-tab-span" style="white-space: pre;">   </span></p><br />
<span class="Apple-tab-span" style="white-space: pre;">   </span><p class="text"><br />
<span class="Apple-tab-span" style="white-space: pre;">    </span><textarea name="text" placeholder="Tulis apa yang ingin anda sampaikan ke kami"></textarea><br />
<span class="Apple-tab-span" style="white-space: pre;">   </span></p><br />
<span class="Apple-tab-span" style="white-space: pre;">   </span><p class="submit"><br />
<span class="Apple-tab-span" style="white-space: pre;">   </span><input type="submit" value="Kirim"><br />
<span class="Apple-tab-span" style="white-space: pre;">   </span></p><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></body><br />
</html></blockquote>
Pada bagian class jangan sampai ada yang di ubah namanya, jika ingin di rubah silahkan di edit juga di file CSSnya. Save file dengan nama <b>contact-form.html</b><br />
<br />
Maka hasilnya akan seperti ini :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrvd5-QJOtMxKO7makcifTLEakmDdnJNzIS-D5bOesRAmuHnv2XjU_yF7f97rHfO7p2i28XKbUDZ0ExDODL7xoGZ7PCVQYsI5cDJG2ODRfbpNRYjJvtMrfWPBNd9K3_R99mwbfN78eH7U/s1600/contact+form+2jpg.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Mempercantik Kontak Form dengan CSS3" border="0" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrvd5-QJOtMxKO7makcifTLEakmDdnJNzIS-D5bOesRAmuHnv2XjU_yF7f97rHfO7p2i28XKbUDZ0ExDODL7xoGZ7PCVQYsI5cDJG2ODRfbpNRYjJvtMrfWPBNd9K3_R99mwbfN78eH7U/s1600/contact+form+2jpg.jpg" title="Mempercantik Kontak Form dengan CSS3" width="320" /></a></div>
<br />
Tampilannya memang sederhana karena belum kita buat file CSSnya, sekarang kita buat file <a href="http://ppi-tuts.blogspot.com/search/label/CSS" target="_blank">CSS</a>nya.<br />
<br />
Silahkan lihat file css di bawah<br />
<br />
<blockquote>
body {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>padding: 40px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>font-size: 14px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>font-style: Verdana, Arial, Sans-serif;<br />
}<br />
h2 {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>margin-bottom: 20px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>color: #474E69;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>font-style: Arial;<br />
}<br />
input, textarea {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>padding: 10px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>border: 1px solid #E5E5E5;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>width: 200px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>color: #999999;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>box-shadow: rgba(0,0,0,0.1) 0px 0px 8px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>-moz-box-shadow: rgba(0,0,0,0.1) 0px 0px 8px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>-webkit-box-shadow: rgba(0,0,0,0.1) 0px 0px 8px;<br />
}<br />
textarea{<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>width: 400px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>height: 150px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>max-width: 400px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>line-height: 18px;<br />
}<br />
input:hover, textarea:hover,<br />
input:focus, textarea:focus{<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-color: 1px solid #06f;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>box-shadow: #333 0px 0px 8px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>-moz-box-shadow: #333 0px 0px 8px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>-webkit-box-shadow: #333 0px 0px 8px;<br />
}<br />
.form label {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>margin-left: 10px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>color: #333<span class="Apple-tab-span" style="white-space: pre;"> </span>;<br />
}<br />
.submit input {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>width: 100px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>height: 40px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>background-color: #06f;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>color: #fff;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-radius: 4px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>-moz-border-radius:4px;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>-webkit-border-radius:4px;<br />
} </blockquote>
<br />
<ul>
<li>Pada bagian <b><i>color</i></b> bisa di ubah sesuai keinginan.</li>
<li><b><i>box shadow</i></b> berguna untuk memberikan effect bayangan pada textarea dan input.</li>
<li><b><i>hover</i></b> dan <b><i>focus</i></b> berguna jika cursor menuju ke textarea, maka dibagian luarnya akan ada effect bayangan dan jika di klik bordernya akan berwarna #06f biru muda (bisa di ganti)</li>
</ul>
<div>
Nah tadi itu adalah file <a href="http://www.parapencariilmu.com/search/label/CSS" target="_blank">CSS</a>nya, silahkan di save dengan nama <b><i>style.css</i></b>, anda bisa mengubah isinya sesuai kebutuhan. Maka hasilnya akan seperti ini </div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvDrhBPFyLNys8lRTb4uBdPU2LJa8RBHbVv7b2b8RrtRmDXX2T1OCiZzxTnVwsw9ceyHrSJ5_I99Dhz48B-1VIR9eZN4MPWOu7P84coNrog2PFT9S2ZTxNyjFYUOL6T_jSS7grw6TVj9A/s1600/contact+form+1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Mempercantik Kontak Form dengan CSS3" border="0" height="318" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvDrhBPFyLNys8lRTb4uBdPU2LJa8RBHbVv7b2b8RrtRmDXX2T1OCiZzxTnVwsw9ceyHrSJ5_I99Dhz48B-1VIR9eZN4MPWOu7P84coNrog2PFT9S2ZTxNyjFYUOL6T_jSS7grw6TVj9A/s1600/contact+form+1.jpg" title="Mempercantik Kontak Form dengan CSS3" width="320" /></a></div>
<div>
<br />
<div style="text-align: center;">
<span style="font-size: large;"><a href="http://ppi-design-demo.bl.ee/demo/contact%20form.html" rel="nofollow" target="_blank"><b>DEMO</b></a></span></div>
</div>
<div>
<br /></div>
<div>
Untuk penjelasan tentang file CSS dan file HTMLnya bisa anda tanyakan dengan komentar di bawah atau kirim ke <b><i>Twitter</i></b> dan <b><i>fanspage</i></b> kami.</div>
<div>
<br /></div>
<div>
Sekian <a href="http://ppi-tuts.blogspot.com/search/label/Tutorial" target="_blank">Tutorial</a> kali ini, jika dirasa bermanfaat silahkan share ke Social Media dan Web anda dengan mencantumkan sumbernya.</div>
<div>
<br /></div>
<div>
Follow <b><i><a href="http://twitter.com/official_PPI" target="_blank">@Official_PPI</a></i></b> di Twitter dan Like <b><i>Fanspage</i></b> Kami di Facebook untuk update seputar blog ini.</div>
<div>
<br /></div>
<div>
Wassalamualaikum Wr. Wb.</div>
<br />
<div style="text-align: center;">
<a href="http://api.idhostinger.com/redir/858332" target="_blank"><img alt="Hosting Gratis" border="0" height="125" src="http://www.idhostinger.com/banners/id/hostinger-125x125-powered-2.gif" width="125" /></a></div>

Mempercantik Kontak Form dengan CSS3

Assalamualaikum Wr. Wb. Mempercantik Kontak Form dengan CSS3 | Kali ini kami akan share tentang cara membuat kontak form dengan HTML d...

Baca selengkapnya »

Cara Membuat Effect Background Transparan dengan CSS

<div class="separator" style="clear: both; text-align: center;">
<img alt="Cara Membuat Effect Background Transparan dengan CSS" border="0" height="137" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHy5EKYj6oSyvXt5rQZdpNYM_qdtHkTcib1JYnnlUATG6WhXyNg6XfVAl6Z_FqoXJ4fs7gg6yAAzKy4_qnKvv8J3EbqbCgG5dl2LuFbs7RKD1L4fwkMIuPfjUojiKDrXz2xzTh7I8t_-w/s400/ss+hover1.jpg" title="Cara Membuat Effect Background Transparan dengan CSS" width="400" /></div>
<br />
Assalamualaikum Wr. Wb.<br />
<div style="text-align: justify;">
<b>Cara Membuat Effect Background Transparan dengan CSS</b> | Pada malam hari ini admin akan membagikan cara membuat effect background <a href="http://ppi-tuts.blogspot.com/2013/11/membuat-effect-transparan-css-1.html" target="_blank">transparan</a> dengan menggunakan <b>CSS</b> (<b>Cascading Style Sheet</b>), cara ini tidak hanya bisa digunakan untuk background saja, tapi bisa juga di gunakan untuk gambar, table, dan lain lain.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Langkah pertama, buatlah file CSSnya : </div>
<div style="text-align: justify;">
</div>
<blockquote class="tr_bq">
<style title="<span style="color: red;">transparan1</span>" type="text/css"><br />
.transparan1{background:<span style="color: lime;">#333333</span>;opacity:0.7;-moz-opacity:0.7;-khtml-opacity: 0.7;filter:alpha(opacity=<span style="color: blue;">70</span>);}<br />
</style></blockquote>
<div class="separator" style="clear: both; text-align: justify;">
Pada teks yang berwarna <b><span style="color: red;">merah</span></b> bisa anda ganti sesuai keinginan anda, untuk teks berwarna <b><span style="color: blue;">biru</span></b> adalah tingkat transparannya,  yang berwarna <span style="color: lime;">hijau</span> adalah warna backgroundnya, anda bisa mengganti warna tersebut sesuai keinginan anda, untuk peletakannya bisa lihat seperti gambar di bawah</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img alt="Cara Membuat Effect Background Transparan dengan CSS" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjekJszj5O6pOsft3JWVugnDPoGF13luvYj0PGLUi8zfsBFk2ZqafZIvXYYFZa4A-ue_fghdjqJDaJCSSX4O_V38tCcbsydEfmNprB6LVwPRcN1os_r_7DjLKIj5Ywc7DOsStyxS-T02LU/s1600/ss+transparan1.jpg" title="Cara Membuat Effect Background Transparan dengan CSS" /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
Setelah itu kita akan memanggil CSS tersebut dengan menggunakan class="transparan1" pada bagian yang ingin diberikan effect transparan, contohnya :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPeeC4XjOoRPKsq7CVCdwN7U_TKeejLPHg8VYAz2hn-dO-bQorhwdA-1gR2eRhQMvb-igQJ-oVzEXIH-tJCjDACV0DunpjTx-aNxDYg4XA6bQNRnJpXYCe5jIcDt5enkcD3QAglo7q4tg/s1600/ss+transparan2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Effect Background Transparan dengan CSS" border="0" height="209" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPeeC4XjOoRPKsq7CVCdwN7U_TKeejLPHg8VYAz2hn-dO-bQorhwdA-1gR2eRhQMvb-igQJ-oVzEXIH-tJCjDACV0DunpjTx-aNxDYg4XA6bQNRnJpXYCe5jIcDt5enkcD3QAglo7q4tg/s640/ss+transparan2.jpg" title="Cara Membuat Effect Background Transparan dengan CSS" width="640" /></a></div>
<br />
Jika sudah, silahkan preview di Browser, bisa di Firefox atau Chromium.<br />
<br />
Nah, tadi itu adalah cara mudah untuk membuat effect transparan menggunakan <b>CSS</b>, jika ada kesulitan silahkan komentar di bawah atau kirimkan ke fanspage kami, bisa juga mention ke twitter kami :D<br />
<br />
Semoga Bermanfaat<br />
<br />
Wassalamualaikum Wr. Wb.

Cara Membuat Effect Background Transparan dengan CSS

Assalamualaikum Wr. Wb. Cara Membuat Effect Background Transparan dengan CSS | Pada malam hari ini admin akan membagikan cara membuat ...

Baca selengkapnya »

Download Aplikasi Text Editor Terbaru

HTML Dasar: Bermain dengan Table

Belajar HTML dan Menjalankannya Secara Online

HTML Dasar: Bermain Dengan Paragraf

Belajar Teknik Pencarian dengan PHP

Template Web: PPI Design

Membuat Efek Shadow atau Bayangan dengan CSS

Mempercantik Kontak Form dengan CSS3

Cara Membuat Effect Background Transparan dengan CSS

Artikel Populer Minggu Ini

Kategori

Arsip