ads here

CONTOH BAGAIMANA CARANYA MEMBUAT BLOG SENDIRI

Tutorialkhusus
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?


Comments

  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..

    ReplyDelete
  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.

    ReplyDelete
    Replies
    1. Mas Himawan sy masih belajar dan sampai sekarang juga pintar pintar

      Delete
    2. *Gak pintar pitar, maksudku

      Delete

Post a Comment

请给我们一个礼貌的评论与任何相关的主题
Just give us a polite comments with any related topics
Hanya komentar yang sopan dan berhubungan dengan topik