CONTOH BAGAIMANA CARANYA MEMBUAT BLOG SENDIRI

Tutorialkhusus
cara membuat blog sendiri
Sebelumnya kita telah membahas cara pembuatan website secara umum. Sekarang kita mencoba membahas cara membuat blog plus demo HTMLnya melalui blog ini:

Perhatikan image dibawah ini dibuat berdasarkan HTML sehingga anda dapat mengeksplorasinya:


EB

Judul heading

deskripsi judul, 24 Nov 18
Image
Tulisan..
Bla bla bla bla bla bla.

Saya

GBR
Tulis disini bla bla bla bla..

Popular Post

GBR

GBR

GBR

follow

Tulisan..
Contoh kode diatas diatas adalah sebagai berikut:

1. CONTOH TATALETAK:

<div class="header">
<h2>Blog Name</h2>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg"style="height:200px;">Image</div>
<p>Some text..</p>
</div>
<div class="card">
<h2>JUDUL HEADING</h2>
<h5>Title description, 24 nov 18</h5>
<div class="fakeimg"style="height:200px;">Image</div>
<p>Some text..</p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>About Me</h2>
<div class="fakeimg"style="height:100px;">Image</div>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
</div>
<div class="card">
<h3>Popular Post</h3>
<div class="fakeimg">Image</div><br>
<div class="fakeimg">Image</div><br>
<div class="fakeimg">Image</div>
</div>
<div class="card">
<h3>Follow Me</h3>
<p>Some text..</p>
</div>
</div>
</div>

<div class="footer">
<h2>Footer</h2>
</div>


2. CONTOH MENAMBAHKAN CSS:

body {
font-family: Arial;
padding: 20px;
background: #f1f1f1;
}

/* Header/Blog Title */
.header {
padding: 30px;
font-size: 40px;
text-align: center;
background: white;
}

.leftcolumn {
float: left;
width: 75%;
}

/* Right column */
.rightcolumn {
float: left;
width: 25%;
padding-left: 20px;
}

/* Fake image */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}

/* Add a card effect for articles */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}

@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}


Apakah anda mendapatkan gambarannya?

6 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  1. dulu sewkt pertama kali ngeblog, malah blog saya sama sekali gak ada yg namanya sidebar, hehe... dari atas sampe bwh polos.. skrg udh agak males utak atik templatenya mas..

    BalasHapus
  2. Aku masih belum begitu paham benar utak-atik peletakan kodenya, takut salah.
    Tapi lewat post keren ini aku coba terus belajar biar pinter kayak mas Sarofudin.

    BalasHapus
    Balasan
    1. Mas Himawan sy masih belajar dan sampai sekarang juga pintar pintar

      Hapus
    2. *Gak pintar pitar, maksudku

      Hapus
Lebih baru Lebih lama

Formulir Kontak