Membuat Button Sederhana Dengan CSS Di Blog

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge7wbJX7ShrZg0W1vsufWZQn2RXZeOMqh9FcbTDt9KVjGvnUlgXA6o9xuezF4cAuv9bGl3pLh8eva0IwaGRn8vIE7LHiK5ahu2G5ML29G5pWFPN-56ZOtfNB9Cue5UiYggHmDfOkDfNho1/s1600/button.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Button Sederhana Dengan CSS Di Blog" border="0" height="295" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge7wbJX7ShrZg0W1vsufWZQn2RXZeOMqh9FcbTDt9KVjGvnUlgXA6o9xuezF4cAuv9bGl3pLh8eva0IwaGRn8vIE7LHiK5ahu2G5ML29G5pWFPN-56ZOtfNB9Cue5UiYggHmDfOkDfNho1/s320/button.jpg" title="Membuat Button Sederhana Dengan CSS Di Blog" width="320" /></a></div><br />Membuat Button Sederhana Dengan CSS Di Blog | Ada banyak bentuk dan macam button tergantung bumbu CSS yang kita buat. Button yang baik menurut saya, adalah yang simple dan mudah dibaca oleh reader. Tapi tidak adalah salahnya jika anda memakai button default yang sudah ada pada HTML.<br /><input type="button" value="Contoh Button" /> Contoh tombol diatas adalah default. Lalu bagaimana kita membuat dengan CSS di Blog ?<br /><br />Letakkan kode dibawah ini diatas  ]]></b:skin> :<br /><br /><pre class="brush:js;">.button{<br /><br />    margin: 10px;<br /><br />    padding: 1px 4px;            <br /><br />    width: 130px;<br /><br />    cursor: pointer;<br /><br />    border: 1px solid #2493FF;<br /><br />    overflow: visible;<br /><br />    display: inline-block;<br /><br />    color: #fff;<br /><br />    font: bold 1.4em arial, helvetica;<br /><br />    text-shadow: 0 -1px 0 rgba(0,0,0,.4);          <br /><br />    background-color: #2493ff;<br /><br />    background-image: linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0)); <br /><br />    transition: background-color .2s ease-out;<br /><br />    border-radius: 3px;<br /><br />    box-shadow: 0 2px 1px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .5) inset;                                    <br /><br />}<br /><br /><br /><br />.button:hover{<br /><br />      background-color: #7cbfff;<br /><br />        border-color: #7cbfff;<br /><br />}<br /><br /><br /><br />.button:active{<br /><br />    position: relative;<br /><br />    top: 3px;<br /><br />    text-shadow: none;<br /><br />    box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;}<br /><br /></pre><br />Sedangkan untuk memanggilnya kita masukan ini di dalam artikel pada HTML :<br /><pre class="brush:js;"><a class="button" href="URL" target="_blank" title="">Nama Tombol</a><br /><br /></pre>Nantinya akan seperti ini : <br /><div style="text-align: center;"><a class="button" href="http://herlambang.net78.net/mod_project/data-form.php?no=8" target="_blank" title="Wammy">DEMO KLIK DISINI</a>  </div>

Membuat Button Sederhana Dengan CSS Di Blog

Membuat Button Sederhana Dengan CSS Di Blog | Ada banyak bentuk dan macam button tergantung bumbu CSS yang kita buat. Button yang baik menur...

Baca selengkapnya »

Membuat Fungsi $ Post Dengan Form HTML

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLF5hp3WrwkmKAy75oBVr1hX1DOKXXCT7_nmn9hVLUEXRa3qHGqKQbjn4yWpPjN4RxwSTqn3FXRvfnSahJXFU1MQbLKAQ83c7V_3MPjn5ccM-vY3Ru5qlEauEQWoDrVIxh_SzEmocCjYSs/s1600/29278.PostPHP1.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Fugsi $ Post Dengan Form HTML " border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLF5hp3WrwkmKAy75oBVr1hX1DOKXXCT7_nmn9hVLUEXRa3qHGqKQbjn4yWpPjN4RxwSTqn3FXRvfnSahJXFU1MQbLKAQ83c7V_3MPjn5ccM-vY3Ru5qlEauEQWoDrVIxh_SzEmocCjYSs/s1600/29278.PostPHP1.gif" title="Membuat Fugsi $ Post Dengan Form HTML " /></a></div><br />Membuat Fugsi Get Post Dengan Form HTML  | Mengembangkan sebuah aplikasi web, seorang developer dihadapkan kepada beberapa opsi dalam melakukan update, insert, dan delete record database. Dan itu semua diawali pada penggunaan form dengan berbagai action dan method. Begitupun halnya pada implementasi ketika user memasukkan data ke dalam form inputan. Yang kemudian dilanjutkan kepada proses pengolahan dimana setelahnya hasil dari olahan tersebut dimasukkan kedalam database. Nah disinilah pemilihan fungsi method dibutuhkan. Method ini terbagi menjadi 2, yakni POST dan GET, masing masing memiliki perbedaan yang tipis. Sederhananya method ini bekerja ketika si user menekan tombol submit dengan action yang telah disetting sebelumnya. ( kalo pusing baca lagi dari awal.<br /><br />Dalam implementasi contoh kasusnya seperti ini, buat satu file html bernama <span style="color: blue;"><b>input.php </b></span>:<br /><br /><br />Form HTML :<br /><br /><pre class="brush:js;"><form method="post" action="output.php"> <br /><label>Nama</label><br /><input type="Text"name="nama"><br /><label>URL</label><br /><input type="url" name="url"><br /><label>Pesan</label><br /><textarea name="pesan" placeholder="ketik pesan anda"></textarea><br/><br /><input type="submit" value="Kirim" name="submit" id="proses"> <br /><input type="Reset" value="Ulangi" id="proses"> <br /></form> <br /></pre>Dan kita buat satu file lagi dengan nama <b><span style="color: blue;">output.php</span> :</b><br /><br /><pre class="brush:js;"><?php<br /><br /> if($_POST['submit']) { <br />  echo("Nama Anda : $_POST[nama]"); <br />   echo("URL  : $_POST[url]"); <br />  echo("Pesan  : $_POST[pesan]"); <br /> } <br />?><br /><br /></pre>Jika user memasukkan data melalui form input yang ada di input.php, maka hasil yang dikirimkan dengan method post tidak akan ditampilkan di address bar, namun tetap tersimpan dalam memory, untuk mengambilnya cukup dengan menggunakan variable $_POST[?variable?], hal ini tentunya dapat mencegah url yang terlihat kotor, berantakan.<br />Selamat Mencoba !:D

Membuat Fungsi $ Post Dengan Form HTML

Membuat Fugsi Get Post Dengan Form HTML  | Mengembangkan sebuah aplikasi web, seorang developer dihadapkan kepada beberapa opsi dalam melaku...

Baca selengkapnya »

Membuat Fungsi Switch PHP Dengan Form HTML

<div class="separator" style="clear: both; text-align: center;"><a href="http://jasonpitts.com/wp-content/uploads/2011/12/PHP_Tutorial_Learn_PHP_Switch.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Fungsi Switch PHP Dengan Form HTML" border="0" src="http://jasonpitts.com/wp-content/uploads/2011/12/PHP_Tutorial_Learn_PHP_Switch.png" title="Membuat Fungsi Switch PHP Dengan Form HTML" /></a></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><span style="color: blue;">Membuat Fungsi Switch PHP Dengan Form HTML</span> | Terakhir kali adalah artikel <a href="http://www.bocahit.com/2013/04/memodifikasi-dan-membuat-order-list.html" target="_blank">Memodifikasi List Order</a>, kali ini kembali ke masalah PHP. Kita bicara tentang Switch, memang kenyataannya dalam membuat program yang berkaitan dengan daftar list yang menampilkan hari, dan lain-lain sangat sulit dikerjakan dengan logika yang berkaitan pada arah program masih belum jelas. Apalagi kita memasukan value bukan dari scriptnya tapi dengan menggunakan form html juga dengan menampilkan output dalam halaman yang sama. Jadi ada 3 hal yang akan kita esekusi. Jika ingin menambahkan dengan CSS silahkan saja. Berikut adalah contoh programnya :D</div><br /><pre class="brush:js;"><!doctype html><br /><html><br /><head><br /><meta charset="utf-8"><br /><style type="text/css"><br />body {<br />    background-color:#c4e5c1;<br />    font-family:"Comic Sans MS", cursive;<br />}<br /><br />#proses{<br />    margin: 10px;<br />    padding: 1px 4px;            <br />    width: 130px;<br />    cursor: pointer;<br />    border: 1px solid #2493FF;<br />    overflow: visible;<br />    display: inline-block;<br />    color: #fff;<br />    font: bold 1.4em arial, helvetica;<br />    text-shadow: 0 -1px 0 rgba(0,0,0,.4);          <br />    background-color: #2493ff;<br />    background-image: linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0)); <br />    transition: background-color .2s ease-out;<br />    border-radius: 3px;<br />    box-shadow: 0 2px 1px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .5) inset;                                    <br />}<br /><br />#proses:hover{<br />      background-color: #7cbfff;<br />        border-color: #7cbfff;<br />}<br /><br />#proses:active{<br />    position: relative;<br />    top: 3px;<br />    text-shadow: none;<br />    box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;}<br />table {<br />    border-collapse: collapse;}<br />h1 {<br />    font-size: 2em;<br />    margin: 0.67em 0;<br />    color:#fff; <br />    text-shadow:0 0 5px #66FFFF;<br />}<br /><br />h2 {<br />    font-size: 1.5em;<br />    margin: 0.83em 0;<br />    color:#fff; <br />    text-shadow:0 0 5px #66FFFF;<br />}<br /><br />h3 {<br />    font-size: 1em;<br />    margin : 1.00em 0;<br />    color: #FFF;<br />    text-shadow:0 0 5px #66FFFF;<br />}<br />strong,td {<br />    font-weight: bold;<br />    text-shadow: #0F0 0 0 10px;<br />}<br />header {<br />    margin-top:30px;<br />    text-align:center;<br />    display:block;<br />}<br /></style><br /><title>Switch On Form HTML With CSS</title><br /></head><br /><br /><body><br /><header><br /><h1><strong>Switch</strong> On <strong>Form HTML </strong> With CSS</h1><br /><h2>Fun With <strong>Herlambang</strong> &gt; aka Wammy San</h2><br /><h3><strong>Switch</strong> GET POST FUNCTION</h3><br /></header><br />    <!-- FORM ID HTML Start --><br />    <form name="form1" action="switchku.php" method="post"><br />    <table width="300px" align="center" style="margin-top:70px;"><br />      <tr><br />        <td width="116">Value</td><br />        <td width="362"><label for="value"></label><br />    <input type="text" name="wammy" placeholder="Input Value"></td></tr><br />    <tr><br />        <td>&nbsp;</td><br />        <td><input type="submit" name="proses" id="proses" value="PROSES" /></td><br />      </tr><br />    </table></form><br />    <!-- FORM ID HTML End --><br />    <center><br />    <?PHP<br />    $herlambang = $_POST['wammy'] ; //Mengambil Dengan Method POST<br />    switch ($herlambang) {<br />    case 1:<br />    echo("Bulan Ke-1 Adalah Januari");<br />    break;<br />    case 2:<br />    echo("Bulan Ke-2 Adalah Februari");<br />    break;<br />    case 3:<br />    echo("Bulan Ke-3 Adalah Maret");<br />    break;<br />    case 4:<br />    echo("Bulan Ke-4 Adalah April");<br />    break;<br />    case 5:<br />    echo("Bulan Ke-5 Adalah Mei");<br />    break;<br />    case 6:<br />    echo("Bulan Ke-6 Adalah Juni");<br />    break;<br />    case 7:<br />    echo("Bulan Ke-7 Adalah Juli");<br />    break;<br />    case 8:<br />    echo("Bulan Ke-6 Adalah Agustus");<br />    break;<br />    case 9:<br />    echo("Bulan Ke-9 Adalah September");<br />    break;<br />    case 10:<br />    echo("Bulan Ke-10 Adalah Oktober");<br />    break;<br />    case 11:<br />    echo("Bulan Ke-11 Adalah November");<br />    break;<br />    case 12:<br />    echo("Bulan Ke-12 Adalah Desember");<br />    break;<br />    default:<br />    echo("-_- !!");<br />    }<br />    ?><br />    </center><br /></body><br /></html></pre><br /><blockquote class="tr_bq">Pada pernyataan switch, ekpresi_case_1 akan diperiksa terlebih dahulu. Bila nilainya cocok dengan nilai ekpresi maka pernyataan_1 akan dijalankan dan kemudian eksekusi dilanjutkan ke pernyataan yang terletak sesudah tanda penutup switch {;}. Kalau tidak cocok, pembandingan nilai ekpresi dan ekpresi_case_2 akan dilakukan. Jika pada hasil pembandingan yang kedua ini benar maka pernyataan_2 akan dijalankan, dan kemudian eksekusi dilanjutkan ke pernyataan yang terletak sesudah tanda penutup switch (;). Sekiranya tidak ada bagian ekpresi_case yang cocok maka pernyataan_n yang mengukuti kata default akan dijalankan.</blockquote>Yang harus anda ubah adalah :<br /><span style="color: red;"><i>switchku.php</i> dengan nama file yang anda simpan.</span>

Membuat Fungsi Switch PHP Dengan Form HTML

Membuat Fungsi Switch PHP Dengan Form HTML | Terakhir kali adalah artikel Memodifikasi List Order , kali ini kembali ke masalah PHP. Kita b...

Baca selengkapnya »

Memodifikasi Dan Membuat Order List Dengan CSS3 Di Blog

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9SUM7TTjwMAtbWM-ABTTzjnqRlVe42kHRnM40Xrmu2qsWQZqoQQjcYFUt6A_u0b-Oh6ScMO-VsVZ2-LxFDZAkwKSim4RtdEkeCJwq-JMLBrg3_QmG5rcc7YmZix-_0lbReo0inpFiaLH6/s1600/List.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Memodifikasi Dan Membuat Order List Dengan CSS3 Di Blog" border="0" height="156" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9SUM7TTjwMAtbWM-ABTTzjnqRlVe42kHRnM40Xrmu2qsWQZqoQQjcYFUt6A_u0b-Oh6ScMO-VsVZ2-LxFDZAkwKSim4RtdEkeCJwq-JMLBrg3_QmG5rcc7YmZix-_0lbReo0inpFiaLH6/s320/List.JPG" title="Memodifikasi Dan Membuat Order List Dengan CSS3 Di Blog" width="320" /></a></div><br /><span style="color: lime;">Memodifikasi Dan Membuat Order List Dengan CSS3 Di Blog</span> | Order List memang telah disediakan oleh blogger sebelumnya. Listnya memang standar dengan list yang biasa kita buat dengan Microsoft Word.<br /><ol><li>List standar</li><li>Model list blogger</li><li>Tanpa CSS3</li><li> </li></ol>Nah contoh diatas adalah model yang disediakan blogger. Bagaimanajika disisipan dengan CSS3? Apapun yang dihasilkan lewat CSS3 akan menjadi lebih indah. Seperti demo dibawah ini. <br /><br /><div style="text-align: center;"><a class="button" href="http://bukakedok.blogspot.com/2013/04/list-css3.html" target="_blank" title="DEMO">D E M O</a>  </div>HTML :<br /><br /><pre class="brush:js;"> <ol class="wammy-list"><br /><li><a href="/">Sebagai ajang pengenalan dunia Web kepada masyarakat.</a></li><br /><li><a href="#">Mempermudah pencarian informasi.</a></li><br /><li><a href="#">Mempermudah sistem akademik suatu sekolah.</a></li><br /><li><a href="#">Meningkat kualitas dan mutu teknologi terutama di bidang Web.</a></li><br /></ol>  </pre><br />CSS taruh diatas kode <i><b>]]></b:skin></b></i><br /><pre class="brush:js;"><br />.wammy-list a{<br /> position: relative;<br /> display: block;<br /> padding: .4em .4em .4em .8em;<br /> *padding: .4em;<br /> margin: .5em 0 .5em 2.5em;<br /> background: #ddd;<br /> color: #444;<br /> text-decoration: none;<br /> transition: all .3s ease-out; <br />}<br /><br />.wammy-list a:hover{<br /> background: #eee;<br />} <br /><br />.wammy-list a:before{<br /> content: counter(li);<br /> counter-increment: li;<br /> position: absolute; <br /> left: -2.5em;<br /> top: 50%;<br /> margin-top: -1em;<br /> background: #fa8072;<br /> height: 2em;<br /> width: 2em;<br /> line-height: 2em;<br /> text-align: center;<br /> font-weight: bold;<br />}<br /><br />.wammy-list a:after{<br /> position: absolute; <br /> content: '';<br /> border: .5em solid transparent;<br /> left: -1em;<br /> top: 50%;<br /> margin-top: -.5em;<br /> transition: all .3s ease-out;   <br />}<br /><br />.wammy-list a:hover:after{<br /> left: -.5em;<br /> border-left-color: #fa8072;   <br />} <br /><br />ol{<br /> counter-reset: li; /* Initiate a counter */<br /> list-style: none; /* Remove default numbering */<br /> *list-style: decimal; /* Keep using default numbering for IE6/7 */<br /> font: 15px 'trebuchet MS', 'lucida sans';<br /> padding: 0;<br /> padding-left:100px;<br /> padding-right:190px;<br /> margin-bottom: 4em;<br /> text-shadow: 0 1px 0 rgba(255,255,255,.5);<br />}<br /><br />ol ol{<br /> margin: 0 0 0 2em; <br />}</pre> Selamat Mencoba!!

Memodifikasi Dan Membuat Order List Dengan CSS3 Di Blog

Memodifikasi Dan Membuat Order List Dengan CSS3 Di Blog | Order List memang telah disediakan oleh blogger sebelumnya. Listnya memang standa...

Baca selengkapnya »

Template Blogger Under Construction

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4hAYsNkWpoqzqS9qwegZmU4oyZ2-DoJggvTBJUH3Jcne8lD6jrhJhhRAiE79feh1-1JKDDa3zj8QY8lBKAm5Fx6d2OnRsHLrZ3ttVXdYPX6XtFbZnBgHKUzccZXVLL6DJaa2IAxt_ToTI/s1600/Under.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Template Blogger Under Construction" border="0" height="140" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4hAYsNkWpoqzqS9qwegZmU4oyZ2-DoJggvTBJUH3Jcne8lD6jrhJhhRAiE79feh1-1JKDDa3zj8QY8lBKAm5Fx6d2OnRsHLrZ3ttVXdYPX6XtFbZnBgHKUzccZXVLL6DJaa2IAxt_ToTI/s320/Under.png" title="Template Blogger Under Construction" width="320" /></a></div><br /><span style="color: yellow;">Template Blogger Under Construction </span>| Waktu share template blogger lagi. Siapa bilang pemberitahuan tidak butuh template? malah jika ada blog yang benar - benar parah banget kerusakannya, saya sarankan untuk segera memasang ini. Jika hanya kesalahan kecil, anda bisa memakai tips yang <a href="http://www.bocahit.com/2012/07/cara-menampilkan-pemberitahuan-under.html" target="_blank">satu ini</a>. Selain bisa tetap melakukan Submit RSS, pengunjung juga bisa mengetahui kira - kira, kapan blog kembali normal lagi. Sangat membantu sekali bukan...<br /><br /><br /><br /><div style="text-align: center;"><a class="button" href="http://newbloggerthemes.com/wp-launcher-black-blogger-template/">Download</a><a class="button" href="http://newbloggerthemes.com/wp-launcher-black-blogger-template/demo/">Demo</a></div>

Template Blogger Under Construction

Template Blogger Under Construction | Waktu share template blogger lagi. Siapa bilang pemberitahuan tidak butuh template? malah jika ada blo...

Baca selengkapnya »

Rumah Kedua, Alasan Tak Bisa BW

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtjLC7LNkWURve2igFbpp9RO-h6qmvltmo9bKNpkFi2q1J83dmzVu8peErtGo3J7B2TQna_cyruqS-yrwF46Y7wFsUcyK-n2gVyM-olqV7smfTsx9R0C_6IEyAXVv3Ic9jbcndGiQnoJQl/s1600/whoami.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Rumah Kedua, Alasan Tak Bisa BW" border="0" height="213" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtjLC7LNkWURve2igFbpp9RO-h6qmvltmo9bKNpkFi2q1J83dmzVu8peErtGo3J7B2TQna_cyruqS-yrwF46Y7wFsUcyK-n2gVyM-olqV7smfTsx9R0C_6IEyAXVv3Ic9jbcndGiQnoJQl/s320/whoami.png" title="Rumah Kedua, Alasan Tak Bisa BW" width="320" /></a></div><br /><span style="color: #351c75;">Rumah Kedua, Alasan Tak Bisa BW | </span>Tugas kuliah selesai, script Pemrograman Web udah <i>Perfect</i>. Beberapa komentar belum sempat aku balas, maaf banget sebelumnya. Karena sibuk di dunia nyata jadi sulit untuk klik login di blogger.<br /><br />Rumah kedua saya sudah jadi, yah dengan penampilan pas - pasan, juga SEO yang standard aja dech, yang penting bisa aku nikmatin. Blog ini terlalu banyak artikel jadi bingung mau isi apa. Sudah aku putuskan, Wammy's Blog aku isi, khusus Pemrograman Web.<br /><a href="http://www.blogger.com/goog_1316309367"><br /></a><a href="http://tekotekotekot.blogspot.com/">http://tekotekotekot.blogspot.com/</a> Domain yang aneh banget ya.. Ga tau dah, kenapa bisa muncul nama itu. Tapi ini hanya sementara beberapa minggu kedepan rencana jika tidak ada halangan, akan saya ganti dengan web.id, mungkin.<br /><br />Okey jangan lupa berkunjung ya..maaf artikelnya belum banyak. Semoga tidak lekas bosan.

Rumah Kedua, Alasan Tak Bisa BW

Rumah Kedua, Alasan Tak Bisa BW | Tugas kuliah selesai, script Pemrograman Web udah Perfect . Beberapa komentar belum sempat aku balas, maaf...

Baca selengkapnya »