Blog Ponsel Si Oon

Cara Membuat Css Loader

<a href="/"><b>Blog Ponsel Si Oon</b></a> - <a href="https://oon23.blogspot.com/2016/11/cara-membuat-css-loader.html" title="Cara Membuat Css Loader"><b>Cara Membuat Css Loader</b></a> Selamat malam pemirsa :D pembaca setia <a href="/"><b>Blog Oon</b></a> .. oopss tapi mungkin lebih tepat <b>Blogger Trash ( Blogger Sampah )</b> kali ya .. hahaha tapi ya sudahlah .. mau apapun juga gk apa - apa .. yang penting happy :D .. ok dweh next pada kesempatan malam ini .. admin mau sedikit berbagi cara buat loader dengan menggunakan CSS .. tapi sebelumnya sudah pada tahu belum ni ?? Apa yang saya maksud ini ?? Jika tidak tahu .. ya sudah .. saya juga gk tahu harus dimulai dari mana dulu .. yang pasti lagi BeTe ( BT ) banget .. dan tanpa basa basi lagi .. dibawah ini contoh / model - model loader .. berupa gambar dan sebenarnya masih banyak model - model nya tetapi tidak akan saya buatkan semuanya karena terlalu banyak .. jadi disini saya cuma ngasih cara buat css nya beberapa model aja ya .. <br/><br/>

Dari beberapa model yang ada di contoh pada gambar diatas .. akan saya buatkan cuma 3 jenis saja .. yaitu pada bentuk yang lebih besar dari gambar - gambar yang lain nya .. kenapa cuma 3 ?? Karena cara buatnya tidak jauh berbeda .. sama saja untuk kerangka nya kita buat dengan css dan HTML .. namun jika diterapkan untuk Loader page ( loading halaman ) .. kita harus sedikit menambahkan kode lain .. yakni kode JavaScript dan sejenisnya ..<br/><br/>

<h3><b>Contoh CSS & HTML</b></h3><br/>

<b>01. Kode Css Loader</b><br/><br/>

<div style="background: #eeeeee; border: 1px solid #dddddd; margin: 1em 1 em 1em 1em; padding: 1em 1em 1em 1em; width:auto;height:auto;border-radius:4px;box-shadow:0 3px 2px 0 #ccc;"> <button class="button button5">Code Css / Html</button><br/>
<pre><code>.loader {
border-top: 16px solid blue;
border-bottom: 16px solid blue;
}</code></pre>
<button class="button button5">By : Ocha</button></div><br/><br/>

<b>02. Cara Pasangnya</b><br/><br/>

<h3><b>Kode Loader HTML</b></h3><br/>

<b>Hasilnya :</b><br/><br/>

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
<center><div class="loader"></div></center><br/><br/>

Gimana setelah lihat hasilnya ?? Mudahkan ?? Tidak terlalu ribet dan panjang .. banyak kode ?? Yalah diatas cuma sepenggal css nya doank .. makanya pendek .. cuma 2 baris saja hehehe .. untuk mengetahui keseluruhan Css nya .. copas aja semua kode yang ada di bawah ini ..<br/><br/>

<div style="background: #eeeeee; border: 1px solid #dddddd; margin: 1em 1 em 1em 1em; padding: 1em 1em 1em 1em; width:auto;height:300px;border-radius:4px;box-shadow:0 3px 2px 0 #ccc;"> <button class="button button5">Code Css / Html</button><br/>
<pre style="height: 217px; overflow: auto;"><code><style>
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

Memang dari keseluruhan CSS nya saja sangat pendek kan ?? Tidak terlalu banyak kode .. dan kode css yang di atas dengan model yang berbeda dari pada contoh asli di atas .. contoh asli cuma satu warna saja .. yaitu warna <font color="blue"><b>Blue ( Biru )</b></font> .. namun kode yang berada di textarea .. dengan model 4 warna .. tetapi hasilnya tetep menjadi 1 warna saja .. yaitu biru .. maka dari itu .. jika loader nya ingin berwarna menjadi 4 warna dalam 1 lingkaran nya .. kita hanya cuma menambahkan beberapa kode warna saja .. kurang lebihnya .. silahkan lihat CSS di bawah ini .. dan contohnya lihat pada gambar di atas ( gambar loader yang berada di samping tulisan kode CSS ) ..<br/><br/>

<h3><b>Contoh CSS Loader 4 Warna ( Blue / Red / Pink / Green )</b></h3><br/>

<div style="background: #eeeeee; border: 1px solid #dddddd; margin: 1em 1 em 1em 1em; padding: 1em 1em 1em 1em; width:auto;height:auto;border-radius:4px;box-shadow:0 3px 2px 0 #ccc;"> <button class="button button5">Code Css / Html</button><br/>
<pre><code>.loader {
 border-top: 16px solid blue;
 border-right: 16px solid green;
 border-bottom: 16px solid red;
 border-left: 16px solid pink;
}</b></pre></code>
<button class="button button5">By : Ocha</button></div><br/><br/>

Setelah kode css diatas dibuat .. lalu tambahkan kode border radius nya .. untuk membuat loader menjadi melengkung ( bulat ) menjadi lingkaran .. dengan menambahkan kode seperti dibawah ini :<br/><br/>

<div style="background: #eeeeee; border: 1px solid #dddddd; margin: 1em 1 em 1em 1em; padding: 1em 1em 1em 1em; width:auto;height:auto;border-radius:4px;box-shadow:0 3px 2px 0 #ccc;"> <button class="button button5">Code Css / Html</button><br/>
<pre><code>border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;</pre></code>
<button class="button button5">By : Ocha</button></div><br/><br/>

<h3><b>Keterangan :</b></h3><br/>

<ul><li><mark>border-top</mark> : Border atas dengan ukuran lebar <mark>16px</mark></li>
<li><mark>border-right</mark> : Border kanan dengan ukuran lebar <mark>16px</mark></li>
<li><mark>border-bottom</mark> : Border bawah dengan ukuran lebar <mark>16px</mark></li>
<li><mark>border-left</mark> : Border kiri dengan ukuran lebar <mark>16px</mark></li>
<li>Kode <mark>16px</mark> supaya imbang / rata .. maka atas / bawah / kanan / kiri dengan nilai angka yang sama ..</li>
<li><mark>border-radius: 50%</mark> : loader dengan bentuk bulatatan <mark>50%</mark></li>
<li>dan <mark>Width : 120px;</mark> / <mark>Height: 120px;</mark> .. jumlah angka besar kecilnya bulatan loader tersebut .. ( width : lebar kesamping ) dan ( height : lebar kebawah ) maka keduanya harus dengan jumlah angka yang sama .. supaya pas ..</li></ul><br/>

Udah cukup segitu .. sangat mudah bukan ?? Dan saya rasa cukup sampe disini perjumpaan kita pada malam hari ini .. semoga sedikit berguna :D dan terimakasih sudah meluangkan waktunya mampir ke sini .. untuk memabaca <b>Cara Membuat Css Loader</b> jika sobat minat ingin buatnya silahkan copas dan pelajari lagi sendiri .. dari stiap masing - masing kodenya .. dan dibawah ini sekedar tambahan saja ..<br/><br/>

<h3><b>Cara Membuat Css Loader</b></h3><br/>

<b>Note :</b> Awalan <mark>-webkit-</mark> dan <mark>-ms-</mark> adalah untuk browser yang tidak mendukung animasi .. seperti contoh kode css diatas yang saya kasih tanda merah .. yaitu seperti ini ( <mark>animation: spin 2s linear infinite;</mark> )<br/><br/>

Tag : <font color="#00bfff"><b>#Loader CSS, #Css Loader, #Cara, #Cara Membuat, #Cara Buat, #Cara Buat Css Loader, #Cara Membuat Css Loader, #Css, #Html, #Kode Css, #Kode Html, #How To Create A Loader</b></font><br/><br/>

Cara Membuat Css Loader

Blog Ponsel Si Oon - Cara Membuat Css Loader Selamat malam pemirsa :D pembaca setia Blog Oon .. oopss tapi mungkin lebih tepat Blogger Trash ( Blogger Sampah ) kali ya .. hahaha tapi ya sudahlah .. ma…

08 Nov 2016

Cara Buat Css Toggle Switch

<a href="/"><span style="font-family:oswald;color:#ff1493;font-size:13px;"><b>Blog Ponsel Si Oon</b></span></a> - <span style="font-family:tangerine;color:#ffd700;font-size:25px;"><b>Cara Buat Css Toggle Switch</b></span> selamat malam sobat <span style="font-family:tangerine;color:#00bfff;font-size:25px;"><b>Mickey</b></span> pada malam ini admin <span style="font-family:tangerine;color:#ff0000;font-size:25px;"><b>Blog Oon</b></span> akan sedikit berbagi cara buat Css toggle .. yang sebelumnya .. tadi sore sudah membuat post <a href="http://oon23.blogspot.co.id/2016/11/cara-buat-flip-toggle-switch.html"><b><u>Cara Buat Flip Toggle Switch</u></b></a> .. postingan ini bisa dikatakan sambungan dari post sebelumnya .. namun sebelumnya sudah diringkas dengan menggunakan kode JQuery dan HTML .. sekarang Kita Buat CSS nya .. untuk cara buat css nya tidak begitu rumit ataupun terlalu panjang .. cuma beberapa baris saja .. namun hasilnya pun sederhana / toggle switch simple .. untuk lebih jelasnya silahkan sobat lihat hasil contohnya di bawah ini ..<br/><br/>

Nah kira - kira seperti itulah sob jadinya .. dan jenis toggle ini tidak otomatis / autoklik ( dalam arti saat di pindah / di geser kanan kiri .. tidak akan berfungsi apa - apa ) .. karena ini cuma tahap awal nya saja .. dalam pembuatan CSS nya saja .. dengan kata lain bisa dikatakan cuma kerangkanya saja .. karena kalau ingin toggle switch ini berjalan sebagaimana mestinya .. harus ada penambahan kode lainnya .. gk cuma membutuhkan CSS nya saja .. dan untuk kode HTML cuma sebatas bentuk dari pembuatan css nya saja .. dan dibawah ini hasilnya .. cuma dapat di geser ke kanan kiri saja .. tanpa ada perubahan apapun ..<br/><br/>

<span style="font-family:oswald;color:#ffd700;font-size:13px;"><b>Contoh Toggle Switch Simple Dengan Css</b></span><br/><br/>

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: #ff1393;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 30px;
}

.slider.round:before {
  border-radius: 50%;
}
</style>

OK Next .. itulah contoh dari pembuatannya .. kurang lebihnya tinggal sesuaikan saja sendiri .. dari mulai border / bakground / bentuk / ukuran dan sebagainya .. langsung saja dibawah ini css nya .. yang minat copas saja kode css / html nya ..<br/><br/>

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: #ff1393;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 30px;
}

.slider.round:before {
  border-radius: 50%;
}
</style>

<h2>Cara Buat Css Toggle Switch</h2>

Next .. itulah sekiranya yang dapat admin sampaikan di malam hari ini .. kurang lebihnya di maklumi saja .. jika banyak kekurangan ataupun kesalahan dalam penyampaian maupun penulisan .. dan terimakasih sudah membaca Cara Buat Css Toggle Switch dari awal sampe akhir .. moga sedikit membantu bagi sobat yang membutuhkan nya :D ..

Tag : #Toggle, Toggle Switch, Toggle Switch Simple, #Tombol, #Tombol Button, #Tombol On Off, #Tombol Button On Off, #Tombol Toggle, #Tombol Switch Toggle, #Tombol Button Toggle, #Tombol Button Toggle Switch, #Flip Toggle, #Flip Toggle Switch, #Cara, #Cara Buat, #Cara Membuat, #Cara Buat Flip Toggle Switch, #Cara Buat Css Toggle Switch

Cara Buat Css Toggle Switch

Blog Ponsel Si Oon - Cara Buat Css Toggle Switch selamat malam sobat Mickey pada malam ini admin Blog Oon akan sedikit berbagi cara buat Css toggle .. yang sebelumnya .. tadi sore sudah membuat post C…

Cara Buat Flip Toggle Switch

<a href="/"><span style="font-family:oswald;color:#ff1493;font-size:16px;"><b>Blog Ponsel Si Oon</b></span></a> - <span style="font-family:tangerine;color:#00bfff;font-size:24px;"><b>Cara Buat Flip Toggle Switch</b></span> Selamat Sore Sahabat <span style="font-family:tangerine;color:#ffd700;font-size:24px;"><b>Mickey</b></span> Pada kesempatan sore hari ini .. admin <span style="font-family:tangerine;color:#ff0000;font-size:24px;"><b>Ocha</b></span> akan sedikit berbagi cara buat Flip Toggle Switch .. tapi sebelumnya sudah pada tahu belum nih apa itu toggle switch ?? .. tentunya semua sahabat mickey sudah tahu apa itu toggle switch .. namun mungkin diantara pembaca .. belum tahu kegunaan dan cara buat nya .. iya kan ?? Hehehe .. nah maka dari itu .. dikesempatan kali ini admin akan sedikit berbagi cara buat nya sekaligus contohnya .. di bawah ini contoh dari pembuatan toggle switch yang admin bahas kali ini ..<br/><br/>

Gimana .. setelah lihat contoh hasil pembuatan nya .. sekarang sudah faham / tahu semuanyakan .. apa yang admin bahas ?? Nah kira - kira seperti itulah hasilnya .. kegunaan nya dari toggle switch ini .. tergantung penggunanya .. mau di terapkan dimana dan bertujuan untuk apa ?? .. bisa dipasang di website / blog / wap .. atau bisa juga di pasang pada aplikasi - aplikasi .. untuk menghidupkan / mematikan .. misal untuk on / of musik pada aplikasi Musik player / aplikasi game sebagai soundtrack game tersebut .. atau bisa juga untuk menghidupkan profil pada aplikasi chat tertentu .. dan sebagainya ..<br/><br/>

Namun yang mau admin bahas dan bagikan ini .. bukan untuk di pasang pada bagian tertentu .. apa lagi dibahasnya secara detail hehehe .. dan untuk cara buatnya kita gunakan Script JQuery .. dibawah ini contohnya .. silahkan geser kebagian On Untuk menghidupkan .. dengan mengklik tombol "Submit" Untuk menuju kehalaman "Demo"<br/><br/>

<center>Klik <span style="font-family:oswald;color:#0000ff;font-size:14px;"><b>Submit :</b></span> Intuk Menuju Ke TKP :-D</center><br/><br/>

<center><button class="button button5"><a href="http://0ch423.wapgem.com/toggle-switch"><font color="#fff" size="24"><b>Submit</b></font></a></button></center><br/><br/>

Kurang lebihnya kira - kira seperti itulah hasilnya .. dan jika sobat ada yang tertarik ingin mencobanya .. silahkan copas saja kode nya dibawah ini .. selebihnya silahkan sobat utak - atik lagi sendiri dan pasang di tempat yang sobat inginkan .. kalau untuk dipasang pada aplikasi tentunya memerlukan kode yang berbeda .. ini cuma sebatas contoh dari apa yang kita bahas ..<br/><br/>

<div style="background: #eeeeee; border: 1px solid #dddddd; margin: 1em 1 em 1em 1em; padding: 1em 1em 1em 1em; width:233px;height:auto;border-radius:4px;box-shadow:0 3px 2px 0 #ccc;"> <button class="button button5">Code JQuery / Html</button><br/><br/>
<textarea name="code" rows="2" cols="25" style="background:#000;color:#fff;border:1px solid #ff1493;border-left:10px solid #ff1493;line-height:1.5em;padding:5px;">

<div data-role="page">
  <div data-role="main" class="ui-content">
    <form method="post" action="http://oon23.blogspot.com/p/blog-page_30.html">
      <label for="switch">Ini Contoh Cara Buat Flip Toggle Switch : ( Geser Untuk Menghidupkan / On ) lalu klik "Submit"</label>
        <input type="checkbox" data-role="flipswitch" name="switch" id="switch">
        <br>
      <input type="submit" data-inline="true" value="Submit">
    </form>
  </div>
</div>

Ok next .. saya rasa cukup sampe disini dulu perjumpaan kita kali ini .. kurang lebihnya mohon d maklum aja jika ada salah - salah kata dalam penyampian maupun dalam penulisan .. sampe ketemu lagi dilain waktu dan lain kesempatan .. semoga sedikit mambantu untuk sobat yang membutuhkan dan terimakasih sudah meluangkan waktunya untuk membaca Cara Buat Flip Toggle Switch ..

Tag : #Toggle, Toggle Switch, Toggle Switch Simple, #Tombol, #Tombol Button, #Tombol On Off, #Tombol Button On Off, #Tombol Toggle, #Tombol Switch Toggle, #Tombol Button Toggle, #Tombol Button Toggle Switch, #Flip Toggle, #Flip Toggle Switch, #Cara, #Cara Buat, #Cara Membuat, #Cara Buat Flip Toggle Switch

Cara Buat Flip Toggle Switch

Blog Ponsel Si Oon - Cara Buat Flip Toggle Switch Selamat Sore Sahabat Mickey Pada kesempatan sore hari ini .. admin Ocha akan sedikit berbagi cara buat Flip Toggle Switch .. tapi sebelumnya sudah pad…

Cara Buat Table Dalam Postingan Berikut Contoh Dan Beberapa Model Table

<span style="font-family:tangerine;font-size:23px;color:#ff1493;">Assalamu Alaikum WR.WB</span><br/><br/>

Hello selamat malam sahabat <span style="font-family:tangerine;font-size:21px;color:#ff1493;">Mickey</span> Pada kesempatan kali ini .. Admin <span style="font-family:tangerine;font-size:22px;color:#ff1493;">Ocha</span> Akan Sedikit berbagi Cara Buat table pada postingan .. sebelumnya sudah tahukah apa itu table ??? .. table yang mau admin bahas bukan Table ( Meja ) .. hehehe jangan salah arti ya .. table berbahasa inggrisnya memang meja .. tapi yang admin maksud table ini yang berbahasa indonesia nya tabel ( sebuah kolom ) yang gunanya buat mencantumkan daftar nama - nama .. dari mulai No / nama / Profesi / Pendidikan dsb .. dari mulai A - Z atau pun dari  1 dst .. seperti contoh nya di bawah ini .. yaitu contoh table 2 kolom 6 baris ..<br/><br/>

Nah .. sekarang sudah tahukan .. apa yang saya maksud table disini ?? .. seperti itulah hasilnya .. source gambar saya ambil dari postingan <a href="https://so-gaul.blogspot.co.id/2016/11/kisah-25-nabi-dan-rasul-dalam-al-quran.html"><b><u>Kisah 25 Nabi Dan Rasul Dalam Al - Qur'an</u></b></a> .. silahkan diklik postingan tersebeut ( jika minat ) hehehe .. ok next .. langsung saja .. dibawah ini saya kasih beberapa modelnya saja ya .. karena caranya sangat mudah .. jadi jika ingin membuat dengan tampilan beberapa kolom dan baris .. yang digunakan hanyalah bermain kode <font color="red"><b><tr></b></font> dan <font color="blue"><b><td></b></font> saja .. kurang lebihnya nanti akan sedikit saya jelaskan di akhir postingan .. dan berikut ini beberapa contoh nya ..<br/><br/>

<button class="button button5">A. Contoh Table 2 Kolom 6 Baris</button><br/><br/>

<tr>
<td align="center" style="width:10%;background-color:#5c000d;color:white;border:1px solid #515151;">1.
</td>
<td align="left" style="background-color:#fff;border:1px solid #515151;">Nabi Nuh A.S
</td>
</tr>
<tr>
<td align="center" style="width:10%;background-color:#5c000d;color:white;border:1px solid #515151;">2.
</td>
<td align="left" style="background-color:#fff;border:1px solid #515151;">Nabi Ibrahim A.S
</td>
</tr>

<tr>
<td align="center" style="width:10%;background-color:#5c000d;color:white;border:1px solid #515151;">3.
</td>
<td align="left" style="background-color:#fff;border:1px solid #515151;">Nabi Musa A.S
</td>
</tr>
<tr>
<td align="center" style="width:10%;background-color:#5c000d;color:white;border:1px solid #515151;">4.
</td>
<td align="left" style="background-color:#fff;border:1px solid #515151;">Nabi Isa A.S
</td>
</tr>
<tr>
<td align="center" style="width:10%;background-color:#5c000d;color:white;border:1px solid #515151;">5.
</td>
<td align="left" style="background-color:#fff;border:1px solid #515151;">Nabi Muhammad S.A.W
</td>
</tr>
</table><br/><br/>

<tr>
<td align="center" style="width:10%;background-color:#5c000d;color:white;border:1px solid #515151;">3.
</td>
<td align="left" style="background-color:#fff;border:1px solid #515151;">Nabi Musa A.S
</td>
</tr>
<tr>
<td align="center" style="width:10%;background-color:#5c000d;color:white;border:1px solid #515151;">4.
</td>
<td align="left" style="background-color:#fff;border:1px solid #515151;">Nabi Isa A.S
</td>
</tr>
<tr>
<td align="center" style="width:10%;background-color:#5c000d;color:white;border:1px solid #515151;"<5.
</td>
<td align="left" style="background-color:#fff;border:1px solid #515151;">Nabi Muhammad S.A.W
</td>
</tr>
</table>

http://oon23.blogspot.co.id

Admin

Ocha

Admin

Ocha

Blog Mickey

Ocha

http://oon23.blogspot.co.id

Nama	Blog URL
Ocha	http://oon23.blogspot.com

Admin	Nama Blog
Ocha	Mickey

No.	Nama	Blog
1.	Ocha	Mickey

Nama	Blog
Ocha	https://oon23.blogspot.com
Wida	https://so-gaul.blogspot.com

Nah itulah kira - kira nya hasil dan contoh pembuatan nya .. gimana masih ada yang mau lanjutin gk nih ?? .. kalau masih mau lanjut .. silahkan atur - atur / buat sendiri aja ya .. karena cara buatnya sangat mudah tidak terlalu ribet .. seperti yang sudah admin katakan diatas .. yaitu cuma bermain kode <tr> dan kode <td> .. yang sebelumnya dimulai dari kode <table> dan di akhiri dengan kode penutup </table> ..

Dan untuk mempermudah supaya dapat di fahami .. silahkan sobat copas salah satu contoh code table di atas .. dan utak - atik lagi sendiri .. semisal ganti kolom dan baris .. yang semula 2 kolom 1 baris jadi 3 kolom 4 baris dst .. begitupun code warna background / warna text dsb .. sesuaikan saja menurut keinginan masing - masing .. dan yang bertulisan ( no. / angka / nama / url blog ) seperti contoh diatas .. silahkan ganti dengan isi konten yang mau sobat terapkan .. untuk lebih mudahnya silahkan baca rangkuman singkat di bawah ini ..

Rangkuman :

<table> : Berfungsi membuka code yang biasanya berada di awalan kode dan di akhiri penutup kode </table> ..
<tr> : ( Table Row ) Berfungsi membangun Baris "Atas-Bawah" .. dan ditutup kode </tr> ..
<td> : ( Table Collum ) Berfungsi membangun Kolom "Kiri-Kanan" .. dan ditutup kode </td> ..
,-'-,-'-,-' Jika sobat sudah menghapal kodenya .. sobat akan lebih leluasa menggunakan kodenya .. sobat bisa menambahkan kode lain lagi untuk mempercantiknya .. semisal ( align, width, height, background, padding, margin, style, border, dll .. )
#ff1493 ( Warna background ) .. sobat bisa menggantinya menjadi background color ( latar belakang ) dengan kesukaan sobat .. misal : Merah ( #ff0000 ) .. Biru ( #0000ff ) .. Biru Muda ( #00bfff ) .. Gold : oranye / oren ke'emasan ( #ffd700 ) .. Hitam ( #000000 ) .. Untuk warna White ( putih ) code nya ( #ffffff ) .. untuk warna pink seperti contoh .. code nya ( #ff1493 ) .. dan untuk kode warna lainnya sesuaikan saja sendiri ..

Itulah tadi seputar Cara Buat Table Dalam Postingan Berikut Contoh Dan Beberapa Model Table yang dapat admin bagikan .. kurang lebihnya mohon dimaklum saja .. jika ada salah - salah kata dalam penulisan .. dan semoga bermanfaat .. sampe ketemu lagi dilain waktu dan lain kesempatan .. Selamat bermalam sabtu'an aja sob hehehe ..

Cara Buat Table Dalam Postingan Berikut Contoh Dan Beberapa Model Table

Author	Ocha
Blog	Mickey Mouse

https://oon23.blogspot.co.id

Tag : #Table, #Tabel, #Cara, #Cara Buat, #Cara Membuat, #Cara Buat Table Dalam Postingan Berikut Contoh Dan Beberapa Model Table

Cara Buat Table Dalam Postingan Berikut Contoh Dan Beberapa Model Table

Assalamu Alaikum WR.WB Hello selamat malam sahabat Mickey Pada kesempatan kali ini .. Admin Ocha Akan Sedikit berbagi Cara Buat table pada postingan .. sebelumnya sudah tahukah apa itu table ??? .. ta…

<span style="font-family:tangerine;font-size:25px;color:#ff1493;">Assalamu Alaikum Wr.Wb</span><br/><br/>

Hai sahabat <span style="font-family:tangerine;font-size:22px;color:#ff1493;">Mickey</span> Pada kesempatan malam hari ini .. admin <span style="font-family:tangerine;font-size:22px;color:#ff1493;">Blog Oon</span> akan berbagi cara buat <span style="font-family:tangerine;font-size:25px;color:#ff1493;">Pop Up Login</span> yang sebelumnya sudah memposting <a href="https://oon23.blogspot.co.id/2016/10/cara-buat-basic-modal-dialog-box.html"><b><u>CARA BUAT BASIC MODAL DIALOG BOX</u></b></a> dan sekarang akan sedikit berbagi soal cara buat Pop Up Login .. guna nya untuk sebuah wapsite / website yang mengkhususkan tempat sign up / sign in untuk para membernya ( kurang lebih nya seperti itulah ) .. tapi sebelumnya sudah pada tahu belum ni semuanya ?? ..<br/><br/>

Sebagian besar dari pembaca mungkin sudah tahu apa iti Pop Up ?? .. apa lagi jika sobat adalah seorang blogger dan masternya codding .. tentunya sudah faham dan tau dengan semua hal yang berurusan dengan codding .. dan mendengar kata pop up tentunya sudah tidak asing lagi .. bahkan bisa menciptakan / membuat yang jauh lebih keren dari pada apa yang mau admin bagikan ini .. tetapi buat sobat yang belum tahu apa itu pop up .. khusus nya untuk buat pop up login .. dan tidak tau cara buat nya .. berikut akan admin kasih contoh nya dan cara buat nya .. yang mungkin bisa sobat gunakan .. jika suatu waktu membutuhkan untuk di web / wap form sobat .. kalau ini menurut sobat bermanfaat .. dan dibawah ini contoh pembuatan nya ..<br/><br/>

Gimana .. setelah lihat hasilnya .. sudah tahu kan .. apa yang saya maksud ?? .. yang saya maksud ini .. sama halnya seperti pop up / jendela munculan like box fb / follow G+ / follow twitter dan sebagainya .. akan tetapi bedanya .. jika like box fb dsb .. dapat muncul dengan menggunakan beberapa code yakni HTML / CSS / JS .. dan akan muncul ditiap kali blog di buka .. contoh nya seperti pada blog ini .. pop up follow G+ akan muncul ditiap kali membuka blog / halaman / postingan dengan otomatis .. yang sebelum nya sudah di setting untuk tampil sekian detik nya .. tapi jenis modal login ini .. akan muncul secara manual .. atau kata lain .. jika sobat mengklik tombol button tersebut barulah pop up login tersebut tampil .. kurang lebih nya silahkan klik tombol di bawah ini .. untuk mengetahui hasil nya .. dengan mengklik tombol button <span style="font-family:tangerine;font-size:22px;color:#ff1493;">Login</span><br/><br/>

input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

button {
    background-color: #ff1493;
    color: white;
    padding: 14px 17px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}

button:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

.cancelbtn {
    width: auto;
    padding: 10px 18px;
    background-color: #ff1493;
}

.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
}

img.avatar {
    width: 30%;
    border-radius: 30%;
}

.container {
    padding: 10px;
}

span.psw {
    float: right;
    padding-top: 3px;
    padding-bottom: 20px;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: bottom;
    }
    .cancelbtn {
       width: 40%;
    }
}
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    padding-top: 3px;
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 3px auto; /* 14% from the top and centered */
    border-radius: 6px;
    width: 90%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    /* Position it in the top right corner outside of the modal */
    position: absolute;
    right: 10px;
    top: 0;
    bottom: 30px;
    color: #ff1493;
    font-size: 40px;
    font-weight: bold;
}

/* Close button on hover */
.close:hover,
.close:focus {
    color: black;
    cursor: pointer;
}

/* Add Zoom Animation */
.animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0)} 
    to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
    from {transform: scale(0)} 
    to {transform: scale(1)}
}
</style>

<button onclick="document.getElementById('id01').style.display='block'">Login</button>

<div id="id01" class="modal">

<form class="modal-content animate" action="http://dp-bbm23.blogspot.com">
<span onclick="document.getElementById('id01').style.display='none'" 
class="close" title="Close Modal">×</span>
    <div class="imgcontainer">
      <img alt="Avatar" class="avatar" src="https://lh3.googleusercontent.com/-fRzhkMCnZNs/AAAAAAAAAAI/AAAAAAAAABM/Tvy_iRHUfSY/s80-c/photo.jpg">
    </div>

<div class="container">
      <label><b>Username</b></label>
      <input type="text" placeholder="Enter Username" name="uname" required>

<label><b>Password</b></label>
      <input type="password" placeholder="Enter Password" name="psw" required>

<button type="submit">Login</button><br/>
      <input type="checkbox" checked="checked"> Remember me
    </div>

<div class="container" style="background-color:#fafafa">
      <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
      <span class="psw">Forgot <a href="#">password ??</a></span>
    </div>
  </form>
</div><br/><br/>

Nah itulah hasilnya .. seperti yang sobat lihat .. gimana .. kira - kira masih ada yang mau lanjutin gak nih baca nya ?? .. dan kira - kira ada yang penasaran pengen buat juga gk tuh ?? .. ya udah .. langsung saja dibawah ini .. admin kasih tahu cara buat nya ..<br/><br/>

<div style="background: #eeeeee; border: 1px solid #dddddd; margin: 1em 1 em 1em 1em; padding: 1em 1em 1em 1em; width:233px;height:auto;border-radius:4px;box-shadow:0 3px 2px 0 #ccc;"> <button class="button button5">Code Css / Html</button><br/><br/>
<blockquote>
<font color="red"><<font color="blue">!DOCTYPE html</font>></font><br/>
<font color="red"><<font color="#ffd700">html</font>></font><br/>
<font color="red"><<font color="#ffd700">title</font>></font><font color="#000">oon23.blogspot.co.id</font><font color="red"><<font color="#00bfff">/</font><font color="#ffd700">title</font>></font><br/>
<font color="red"><<font color="#ff1493">meta</font> <font color="#ffd700">name</font><font color="blue">="viewport"</font> <font color="red">content</font><font color="blue">="width=device-width, initial-scale=1"</font>><br/>
<<font color="#ff1493">link</font> <font color="#ffd700">rel</font><font color="red">="stylesheet"</font> href<font color="blue">="http://0ch423.wapgem.com/oka/modal01/code.css"/</font>><br/>
<<font color="#ffd700">body</font>><br/><br/>

<font color="red"><<font color="#ffd700">button</font> onclick<font color="blue">="document.getElementById('id01')</font>.style.display<font color="blue">='block'"</font> class<font color="blue">="oka23-btn oka23-pink oka23-large"</font>><font color="#000">Login</font><<font color="#00bfff">/</font><font color="#ffd700">button</font>><br/><br/>

<<font color="ffd700">div</font> id<font color="blue">="id01" class="oka23-modal"</font>><br/>
    <<font color="ffd700">div</font> class<font color="blue">="oka23-modal-content oka23-card-8 oka23-animate-zoom" </font>style<font color="blue">="max-width:auto; height:auto;"</font>><br/><br/>

<<font color="#ffd700">div</font> class<font color="blue">="oka23-center"</font>><<font color="#ffd700">br</font><font color="#00bfff">/</font>><br/>
        <<font color="ffd700">span</font> onclick<font color="blue">="document.getElementById('id01').style.display='none'"</font> class<font color="blue">="oka23-closebtn oka23-hover-pink oka23-container oka23-padding-2 oka23-display-topright"</font> title<font color="blue">="Close Modal"</font>><font color="#000">&tim es;</font></<font color="#ffd700">span</font>><br/>
        <<font color="#ffd700">img</font> src<font color="blue">="<font color="green">https://url-gambar.jpg</font>"</font> alt<font color="blue">="Avatar"</font> style<font color="blue">="width:30%"</font> class<font color="blue">="oka23-circle oka23-margin-top"</font>><br/>
      <<font color="#00bfff">/</font><font color="#ffd700">div</font>><br/><br/>

<<font color="#ffd700">form</font> class<font color="blue">="oka23-container"</font> action<font color="blue">="form.html"</font>><br/>
        <<font color="#ffd700">div</font> class<font color="blue">="oka23-section"</font>><br/>
          <<font color="#ffd700">label</font>><<font color="#ffd700">b</font>><font color="#000">Username</font><<font color="#00bfff">/</font><font color="#ffd700">b</font>><<font color="#00bfff">/</font><font color="#ffd700">label</font>><br/>
          <<font color="#ffd700">input</font> class<font color="blue">="oka23-input oka23-border oka23-margin-bottom"</font> type<font color="blue">="text"</font> placeholder<font color="blue">="</font><font color="#000">Enter Username</font>" name<font color="blue">="usrname" required</font>><br/>
          <<font color="#ffd700">label</font>><<font color="#ffd700">b</font>><font color="#000">Password</font><<font color="#00bfff">/</font><font color="#ffd700">b</font>><<font color="#00bfff">/</font><font color="#ffd700">label</font>><br/>
          <<font color="#ffd700">input</font> class<font color="blue">="oka23-input oka23-border"</font> type<font color="blue">="password"</font> placeholder<font color="blue">="</font><font color="#000">Enter Password</font>" name<font color="blue">="psw" required</font>><br/>
          <<font color="#ffd700">button</font> class<font color="blue">="oka23-btn-block oka23-pink oka23-section oka23-padding"</font> type<font color="blue">="submit"</font>><font color="#000">Login</font><<font color="#00bfff">/</font><font color="#ffd700">button</font>><br/>
          <<font color="#ffd700">input</font> class<font color="blue">="oka23-check oka23-margin-top"</font> type<font color="blue">="checkbox"</font> checked<font color="blue">="checked"</font>><font color="#00bfff">Remember me</font><br/>
        <<font color="#00bfff">/</font><font color="#ffd700">div</font>><br/>

<<font color="#00bfff">/</font><font color="#ffd700">form</font>><br/><br/>
      <<font color="#ffd700">div</font> class<font color="blue">="oka23-container oka23-border-top oka23-padding-4 oka23-light-grey"</font>><br/>
        <<font color="#ffd700">button</font> onclick<font color="blue">="document.getElementById('id01')</font>.style.display<font color="blue">='none'"</font> type<font color="blue">="button"</font> class<font color="blue">="oka23-btn oka23-pink"</font>><font color="#000">Cancel</font><<font color="#00bfff">/</font><font color="#ffd700">button</font>><br/>
        <<font color="#ffd700">span</font> class<font color="blue">="oka23-right oka23-padding oka23-hide-small"</font>><font color="#000">Forgot</font><<font color="#ffd700">a</font> href<font color="blue">="<font color="green">#</font>"</font>><font color="#000">password ??</font><<font color="#00bfff">/</font><font color="#ffd700">a</font>><<font color="#00bfff">/</font><font color="#ffd700">span</font>><br/>
      <<font color="#00bfff">/</font><font color="#ffd700">div</font>><br/>
    <<font color="#00bfff">/</font><font color="#ffd700">div</font>><br/>
  <<font color="#00bfff">/</font><font color="#ffd700">div</font>><br/>
<<font color="#00bfff">/</font><font color="#ffd700">div</font>><br/><br/>

<<font color="#00bfff">/</font><font color="#ffd700">body</font>><br/>
<<font color="#00bfff">/</font><font color="#ffd700">html</font>></font></font>
</blockquote><br/>
<button class="button button5">By : Ocha</button></div><br/><br/>

Itulah code dan cara buat nya .. dan saya rasa tidak perlu lagi banyak penjelasan ya .. karena disana juga udah full color .. jadi tentunya tahu code mana aja nya yang perlu di copy .. dan admin rasa cukup sampe disini dulu perjumpaan kita kali ini .. kurang lebih nya mohon di maklum aja .. jika ada salah - salah kata dalam penulisan .. dan terimakasih sudah baca dari awal sampe akhir .. mengenai Cara Buat <span style="font-family:tangerine;font-size:25px;color:#ff1493;">Pop Up Login</span> .. semoga bermanfaat dan sampe ketemu lagi dilain waktu dan kesempatan .. <font color="#ff1493">See You Next Time !!!</font><br/><br/>

<b>Tag :</b> <font color="#00bfff"><b>#Pop Up, #Pop Up Like Box, #Pop Up Like Box Fb #Pop Up Like Box Facebook, #Pop Up Follower, #Pop Up Follow G+, #Pop Up Follow Google+, #Pop Up Tweet, #Pop Up Twitter, #Pop Up Dialog, #Pop Up Window, #Pop Up Dialog Box, #Cara, #Cara Buat, #Cara Membuat, #Cara Buat Basic Modal ( Dialog Box / Pop Up Window, #Cara Buat Basic Modal Dialog Box, #Basic, #Basic Modal, #Pop Up Login, #Sign in, #Sign Up, #Login, #Log Out, #Cara Buat Pop Up Login</b></font>

Cara Buat Pop Up Login

Assalamu Alaikum Wr.Wb Hai sahabat Mickey Pada kesempatan malam hari ini .. admin Blog Oon akan berbagi cara buat Pop Up Login yang sebelumnya sudah memposting CARA BUAT BASIC MODAL DIALOG BOX dan sek…

Blog Ponsel Si Oon

Cara Membuat Css Loader

Cara Buat Css Toggle Switch

Cara Buat Flip Toggle Switch

Cara Buat Table Dalam Postingan Berikut Contoh Dan Beberapa Model Table

Cara Buat Pop Up Login

Cara Buat Basic modal Dialog Box

Popular

Labels

Archive