keatas
Informasi dari webmaster tool Google: tindakan halaman di nonaktifkan untuk sementara, ...Does it means parmanent? .....NO...! It is being temporary!...Oh..feel like my site subjectly to be suspended......ok, hanya sementara ya...katanya sih sedang maintenance selama seminggu...halaman tetap di crawl kok.

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?
sofyan Ya-an
Pekerja keras yang tidak fokus Menulis hanya buat kesenangan

6 komentar

  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

Posting Komentar

2 IN 1: from EDITBLOGTEMA to EDITBLOGTEMPLATE

Kirim Email