Contoh struktur halaman pembuatan posting

Contoh struktur halaman pembuatan posting

by Adi Jaya

HTML

<div class="container-post">
  <h2>Halaman Posting</h2>
  <p>Resvonsive Area = 768px<br>
  <code>@media screen and (min-width: 768px) {...}</code>
  </p>
  <hr>
  <form action="" method="post">
    
     <p class="">
       <!-- publish, save == type submit -->
       <button type="button">Terbitkan</button>
       <button type="button">Simpan</button>
       <button type="button">Lihat</button>
     </p>
    
    <div class="blog-row">
      <div class="blog-col-75">
        
        <div class="blog-form-field">
            <!-- gunakan js agar saat enter tidak terpublish -->
			<input data-enter="false" spellcheck="false" autocomplete="off" type="text" name="title" value="" placeholder="Title...">
		</div>
        
        <div class="blog-form-field">
			<textarea class="block-text-code" spellcheck="false" name="content" id="post" rows="10" cols="80"></textarea>
		</div>
        
        <div class="blog-panel">
          <label class="blog-panel-title" for="post-excerpt">Excerpt</label>
          <div class="blog-panel-body">
            <textarea class="textarea" name="listcategory" id="post-excerpt"></textarea>
          </div>
        </div>
        
      </div>
      
      <div class="blog-col-25">
        
        <div class="blog-panel">
          <label class="blog-panel-title" for="listcategory">Kategori</label>
          <div class="blog-panel-body">
            <textarea class="textarea" name="listcategory" id="listcategory"></textarea>
          </div>
        </div>
        
        <div class="blog-panel">
          <label class="blog-panel-title" for="description">Deskripsi</label>
          <div class="blog-panel-body">
            <textarea class="textarea" name="description" id="description"></textarea>
          </div>
        </div>
        
        <div class="blog-panel">
          <label class="blog-panel-title">More</label>
          <div class="blog-panel-body">
            <em>your data</em>
          </div>
        </div>
        ...

CSS

body {
    margin: 0;
    font-family: sans-serif;
    font-size: 13px;
    line-height: 1.5;
}

code {
  color: #E91E63;
}

input[type=checkbox],
input[type=color],
input[type=date],
input[type=datetime-local],
input[type=datetime],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=radio],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week],
select, textarea {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
    background-color: #fff;
    color: #444444;
    outline-color: #0065ba;
    transition: 50ms border-color ease-in-out;
    box-sizing: border-box;
}

.blog-form-field input[type=email],
.blog-form-field input[type=number],
.blog-form-field input[type=password],
.blog-form-field input[type=search],
.blog-form-field input[type=tel],
.blog-form-field input[type=text],
.blog-form-field input[type=url],
.blog-form-field textarea,
.textarea {
    border-style: solid;
    border-width: 1px;
    border-color: #ccc;
    width: 100%;
    padding: 8px 3px;
    border-radius: 0;
    margin: 2px 0;
    font-weight: inherit;
    resize: vertical;
}


.container-post {
    padding: 15px;
}

.blog-clear {
  clear: both;
}

.blog-form-field {
    margin-bottom: 1em;
    padding: 0;
    font-size: 13px;
}

.blog-panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.blog-panel-title {
    font-weight: bold;
    display: block;
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    margin: 0;
    color: #333;
    background-color: #efebeb;
    border-color: #ddd;
    font-size: 1em;
}

.blog-panel-body {
    padding: 15px;
}

@media screen and (min-width: 768px) {
  .blog-row {
    margin: 0 -15px;
  }

  .blog-col-75 {
    float:...