Cara membuat border/kotak di blogger dengan coding HTML dan CSS - MS Guild

Baru!!

Indonesia.com

Kamis, 15 Maret 2018

Cara membuat border/kotak di blogger dengan coding HTML dan CSS


Yo... watsap sobat MSG yang kini masih butuh pencerahan untuk khilaf!! (^_^). kini mimin Rinc mau mengajari nih beberapa cara agar hasutan kalian bisa lancar jaya seraya di blog kalian. Butuh kotak? hubungi mimin rinc!! inilah caranya!! mimin cuma iseng iseng aja ngepost kali ini. Mungkin aja kalian masih baru dalam mendalami usaha blogger dan masih noob, bingung kesana kesini tanpa tujuan yang jelas kayak perempuan lagi di mall, maka mimin Rinc berikan solusinya, makan Baighon dong (^_^) jiwa tenang nyawa melayang!! okeh nggak usah basa basi lagi ini mimin kasih tau ke kalian semua para khilafer. tetapi sebelumnya baca dulu keterangannya ya...

Keterangan :
- Masukan tulisan disini - Ganti dengan code atau teks yang akan ditampilkan
- Warna Orange dan Biru  adalah warna bacground dan border 
- Warna merah adalah warna tulisan/ teks
- Warna hijau adalah tebal border
- Warna Ungu Ukuran Margin (kalau nggak tahu mending nggak usah diapa - apain, nggak harus diganti kok karena nggak ngaruh banyak (^_^)
- Warna Pink  untuk ukuran font ( kalau nggak tahu juga nggak apa apa)
- Warna Abu abu untuk rata tulisan (kalau nggak tahu biarin aja)

   CODE 1
<p style="border: solid 1px #eceff5; background: #29447E; padding: 15px; margin: 0; text-align: justifyline-height: 23px; color: white; font-size: 18px">Masukan tulisan disini</p>
    CODE 2 
<p style="border: solid 1px #aaabackground#ccc; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: black; font-size: 18px">Masukan tulisan disini</p>

  CODE 3
<p style="border: solid 1px #29447E; background: #8a9ac5; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: white; font-size: 18px">Masukan tulisan disini</p>
 
  CODE 4
<p style="border: solid 1px #333; background#999; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: black; font-size: 18px">Masukan tulisan disini</p>

CODE 5 ( bacground otomatis mengikuti latar postingan blog )

<p style="border: dashed 2px #eceff5; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #1a356e; font-size: 18px">Masukan tulisan disini</p>


CODE 6
<p style="border: dashed 2px #ee3f10; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #1a356e; font-size: 18px">Masukan tulisan disini</p>

CODE 7: Kotak simpel warna biru
Woy Khilaf Woy!!

<div style="border: 0; padding: 10px; background-color: #82CAFA; text-align: left;"> Masukan Tulisan Di sini </div>

CODE 8 :kotak simpel warna jingga
Bangun tidur ku terus khilaf

<div style="border: 2px #5f200e solid; padding: 10px; background-color: #d9da81; text-align: left;"> Masukan Tulisan di sini </div>

CODE 9 : Kotak dengan garis 1
Tak lupa boker di WC

<div style="border: 3px #5f200e outset; padding: 10px; background-color: #d9da81; text-align: left;"> Masukan Tulisan disini </div>

CODE 10 :kotak dengan garis 2
Habis boker kuterus mandi

<div style="border: 2px #006400 inset; padding: 10px; background-color: #d5839f; text-align: left;"> Masukan Tulisan disini </</div> 

CODE 11 :kotak dengan garis luar
habis mandi kuterus gosok gigi

<div style="border: 2px #006400 ridge; padding: 10px; background-color:#c2c2c2; text-align: left;"> Masukan Tulisan disini </div>


CODE 12 :Kotak dengan garis dobel
Habis gosok gigi kuterus lari

<div style="border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;"> Masukan Tulisan disini </div>

CODE 13 :kotak dengan garis putus putus
terus aja gitu sampai nenek moyang tujuh turunan

<div style="border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; text-align: left;"> Masukan Tulisan disini </div>
CODE 14 :kotak dengan garis putus putus
Salkus ya? sama tulisannya?

<div style="border: 2px #1B1A76 dotted; padding: 10px; background-color:#c2c2c2; text-align: left;"> Masukan Tulisan disini </div>

CODE 15:kotak dengan scroll
Scroll ke bawah!!                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   -Kok Ampas Ya?--------------->Efek Gabut mimin Rinc        


<div style="border: 2px #006400 solid; padding: 10px; background-color: #82CAFA; overflow: auto; height: 50px; width: 400px; text-align: left;"> Masukan Tulisan disini </div>

ket :  400pxadalah lebar kotak
          50pxadalah tinggi kotak

Gimana Tips and triknya? Semoga hal ini berguna untuk kedepannya kalian di dunia perkhilafan masing masing. Mimin Rinc juga mohon maaf kalau sampai saat ini mimin Rinc masih menghasut kalian bertubi tubi tanpa henti. Mimin Rinc tahu kok kalau menghasut itu tidak baik tetapi seiring berjalannya waktu mimin Rinc tetap saja ingin khilaf terang terangan (^_^). Apabila ada salah mimin minta maaf, apabila ada uang mimin minta semuanya, apabila ada dosa mimin transfer ke kalian semua. "Salam Micin, Salam Goblox"

Bagi mimin Rinc yang penting...

"Keep Khilaf and Stay Cool"

Admin: <RINC_>


Tags:
#membuat border di blogger
#membuat kotak di blogger
#coding di blogger
#cara agar blogger dikunjungi
#cara membuat blogger keren
#cara agar pengunjung blogger banyak
#cara keren membuat blogger dinamis
#tampilan blogger dinamis
#membuat aplikasi blogger
#cara membuat scroll di blogger
#cara membuat kotakan keren di blogger
#kode HTML
#kode CSS
#tampilan dinamis
#template blogger
#template dinamis
#belajar coding/koding cepat


Tidak ada komentar:

Posting Komentar