MEMBUAT WEBSITE SENDIRI ITU MUDAH | editblogtema editblogtema: MEMBUAT WEBSITE SENDIRI ITU MUDAH

Logtema

×
tutorial dan teknik

MEMBUAT WEBSITE SENDIRI ITU MUDAH

Tutorial khusus
cara membuat website
PRAKATA
Dulu, sewaktu baru mulai membuat blog saya juga berfikir membuat website sendiri itu pasti susah banget. Jadi saya hanya ikut ikutan menggunakan tema tema dan cara standar yang ada. Saya fikir itu tidak memuaskan. Bukankan tidak semua orang memiliki cara berfikir yang sama?

Akan tetapi berusaha membuat web kita sendiri dan belajar keras adalah sebuah nilai lebih dan tentu saja akan sangat berguna untuk diri kita dan secara pribadi saya telah merasakannya. Ternyata sulit atau tidak sulit itu hanyalah pikiran atau cara berfikir kita sendiri.

MEMBUAT WEB SENDIRI?
Membuat suatu halaman web pada dasarnya adalah seperti contoh dibawah ini (image dibawah ini dibuat berdasarkan HTML, jadi anda bisa menyentuhnya untuk melihat reaksinya):
Page Title

EB

editblogtema.

perihal

Gambar kami:
Gambar
Teks:Bla bla bla bla bla bla bla bla bla bla..

TExt disini

Bla bla bla bla bla bla.
Gambar

Gambar

Gambar

JUDUL KEPALA

Keterangan judul, 24 nov 2018
Gambar
Teks disini...
Bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla.

BAGAIMANA CARA KERJANYA?

Perhatikan strukturnya:

<html lang="en">

<head>

<title>Page Title</title>

<style>

* {

box-sizing: border-box;

}

/* Style the body */

body {

font-family: Arial, Helvetica, sans-serif;

margin: 0;

}

/* Header/logo Title */

.header {

padding: 80px;

text-align: center;

background: #1abc9c;

color: white;

}

/* Increase the font size of the heading */

.header h1 {

font-size: 40px;

}

.navbar {

overflow: hidden;

background-color: #333;

position: sticky;

position: -webkit-sticky;

top: 0;

}

/* Style the navigation bar links */

.navbar a {

float: left;

display: block;

color: white;

text-align: center;

padding: 14px 20px;

text-decoration: none;

}

/* Right-aligned link */

.navbar a.right {

float: right;

}

/* Change color on hover */

.navbar a:hover {

background-color: #ddd;

color: black;

}

/* Active/current link */

.navbar a.active {

background-color: #666;

color: white;

}

/* Column container */

.row {

display: -ms-flexbox; /* IE10 */

display: flex;

-ms-flex-wrap: wrap; /* IE10 */

flex-wrap: wrap;

}

/* Create two unequal columns that sits next to each other */

/* Sidebar/left column */

.side {

-ms-flex: 30%; /* IE10 */

flex: 30%;

background-color: #6495ED;

padding: 20px;

}

/* Main column */

.main {

-ms-flex: 70%; /* IE10 */

flex: 70%;

background-color: white;

padding: 20px;

}

/* Fake image, just for this example */

.fakeimg {

background-color: #aaa;

width: 100%;

padding: 20px;

}

/* Footer */

.footer {

padding: 20px;

text-align: center;

background: #6495ED;

}

@media screen and (max-width: 700px) {

.row {

flex-direction: column;

}

}

@media screen and (max-width: 400px) {

.navbar a {

float: none;

width: 100%;

}

}

</style>

</head>

<body>

<div class="header">

<h1>

EditBlogTema</h1>

A <b>responsive</b> kami membantu dengan tulus.<br />

</div>

<div class="navbar">

<a class="active" href="https://draft.blogger.com/blogger.g?blogID=3894474860842702694#">Beranda</a>

<a href="https://draft.blogger.com/blogger.g?blogID=3894474860842702694#">Link</a>

<a href="https://draft.blogger.com/blogger.g?blogID=3894474860842702694#">Link</a>

<a class="right" href="https://draft.blogger.com/blogger.g?blogID=3894474860842702694#">Link</a>

</div>

<div class="row">

<div class="side">

<h2>

perihal</h2>

<h5>

Gambar kami:</h5>

<div class="fakeimg" style="height: 200px;">

Image</div>

Some bla bla bla bla.<br />

<h3>

More Text</h3>

Lorem ipsum dolor sit ame.<br />

<div class="fakeimg" style="height: 60px;">

Image</div>

<br />

<div class="fakeimg" style="height: 60px;">

Image</div>

<br />

<div class="fakeimg" style="height: 60px;">

Image</div>

</div>

<div class="main">

<h2>

JUDUL KEPALA</h2>

<h5>

Keterangan judul, 24 nov 2018</h5>

<div class="fakeimg" style="height: 200px;">

Image</div>

Text disini..<br />

Bla bla bla bla<br />

<br />

<h2>

JUDUL KEPALA</h2>

<h5>

Penjelasan judul, 24 November 2018</h5>

<div class="fakeimg" style="height: 200px;">

Image</div>

Text disini..<br />

Blab bla bla bla bla bla.<br />

</div>

</div>

<div class="footer">

<h2>

Footer</h2>

</div>

</body>

</html>


Perhatian!:
  1. Struktur ini tidak bisa langsung di masukan kedalam pengaturan blogger default melalui editHTML tanpa modifikasi, ini hanya standar penggunaan web biasa.
  2. Opsi sticky, atau navigasi lengket di kepala blog tidak berlaku untuk browser yang lebih tua seperti Internet Explorer dst.
  3. Anda dapat menerapkannya melalui postingan dengan memilih diantara 2 opsi: "compose" dan atau "HTML" jadi pilih saja HTML dan copy pastekan saja kode diatas lalu "view" untuk melihat hasilnya (lihat gambar)
  4. Tutorial ini walaupun sifatnya gratis memiliki hak cipta "tersembunyi" yang  kami jalin dalam algoritma terbaru pada jaringan web terdalam dan mungkin akan berakibat buruk bagi blog yang mengkopi-paste-nya. Silahkan mengkopi setelah mendapatkan ijin dari kami melallui komenter dibawah ini.

Bagikan (share):

4 comments:

  1. Thank you for sharing market information, here I M provide freer tips in share market
    Visit - TradeIndia Research , share market tips

    ReplyDelete
  2. wah, keren mas, bs bikin kodenya sendiri... ^_^b

    ReplyDelete
    Replies
    1. Pastinya dia tidak membuat kodenya sendiri , mas. Dia menyusun kode standard html, memanipulasi kode kode tersebut menjadi tampilan webdesain...

      Delete
    2. Ya benar, saya belum sampai ke level membuat bahasa program he he he

      Delete

🌐请给我们一个礼貌的评论与任何相关的主题
⚘⚘Kami menghargai semua masukan
👫👫 Namun kami juga menjunjung tinggi kesopanan