Membuat Blog Sederhana Dengan PHP – Pembuatan Template

HTML5 – Hyperspace

Untuk template saya akan menggunakan template Hyperspace buatan HTML5 UP!. Untuk mendownloadnya bisa langsung ke websitenya atau melalui link ini Download.

Persiapan

1. Silakan nyalakan apache dan mysql
2. Buat folder baru di htdocs dengan nama simple-blog
3. Extract template pada simple-blog
4. Lalu coba akses http://localhost/simple-blog jika benar maka akan muncul tampilan seperti dibawah ini.

HTML5 – Hyperspace Desktop

Setiap kali membuat aplikasi website. Saya selalu membuat virtual host untuk meminimalisir error setelah diupload ke server.

Buat virtual host http://simple-blog.localhost/ lalu arahkan ke folder scrip simple-blog kamu.

Jika masih bingung cara mensetting virtual host bisa langsung ke postingan saya sebelumnya: Setting Virtual Host Pada Windows 7

Lanjut!

Tampilan folder simple-blog:

Tampilan Folder simple-blog

Ubah nama index.html menjadi index.php

Sekarang buka file yang baru saja di ubah namanya yaitu index.php.

Ganti baris ini:

<li><a href="#intro">Welcome</a></li>
<li><a href="#one">Who we are</a></li>
<li><a href="#two">What we do</a></li>
<li><a href="#three">Get in touch</a></li>

Menjadi seperti dibawah ini:

<li><a href="#intro">Home</a></li>
<li><a href="#one">Articles</a></li>
<li><a href="#three">Contact Us</a></li>

Disini hanya menganti tulisan pada navigasi dan menghapus baris What we do. Cukup mudah.

Tampilan baru

Tampilan Navigasi

Jika kamu perhatikan pada konten sebelah kanan. Bagian What we do masih belum hilang. Mari kita hilangkan bagian yang tidak diperlukan ini:

Cari bagian ini lalu hapus:

<!-- Two -->
<section id="two" class="wrapper style3 fade-up">
  <div class="inner">
    <h2>What we do</h2>
    <p>Phasellus convallis elit id ullamcorper pulvinar. Duis aliquam turpis mauris, eu ultricies erat malesuada quis. Aliquam dapibus, lacus eget hendrerit bibendum, urna est aliquam sem, sit amet imperdiet est velit quis lorem.</p>
    <div class="features">
      <section>
        <span class="icon major fa-code"></span>
        <h3>Lorem ipsum amet</h3>
        <p>Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.</p>
      </section>
      <section>
        <span class="icon major fa-lock"></span>
        <h3>Aliquam sed nullam</h3>
        <p>Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.</p>
      </section>
      <section>
        <span class="icon major fa-cog"></span>
        <h3>Sed erat ullam corper</h3>
        <p>Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.</p>
      </section>
      <section>
        <span class="icon major fa-desktop"></span>
        <h3>Veroeros quis lorem</h3>
        <p>Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.</p>
      </section>
      <section>
        <span class="icon major fa-chain"></span>
        <h3>Urna quis bibendum</h3>
        <p>Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.</p>
      </section>
      <section>
        <span class="icon major fa-diamond"></span>
        <h3>Aliquam urna dapibus</h3>
        <p>Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.</p>
      </section>
    </div>
    <ul class="actions">
      <li><a href="#" class="button">Learn more</a></li>
    </ul>
  </div>
</section>

Lalu coba test simple-blog.localhost sekali lagi. Maka baris tersebut tidak akan ada lagi.

Coba perhatikan baris yang sudah diubah tadi. Ada yang perlu diubah sedikit. Lihat pada bagian #three. Agak sedikit mengganggu mata walaupun tidak ada error yang ditimbulkan. #intro, #one langsung loncat ke #three. Ubah #three menjadi #two

<li><a href="#intro">Home</a></li>
<li><a href="#one">Articles</a></li>
<li><a href="#three">Contact Us</a></li>

Menjadi seperti ini:

<li><a href="#intro">Home</a></li>
<li><a href="#one">Articles</a></li>
<li><a href="#two">Contact Us</a></li>

Lalu cari baris <!– Three –>

Ganti menjadi seperti dibawah ini:

...
<!-- Two -->
  <section id="two" class="wrapper style1 fade-up">
...

Silakan test website simple-blog kamu. Silakan coba klik link navigasi disamping. Jika semua berjalan dengan normal. Maka kamu sudah melakukannya dengan benar.

Kamu dapat mendownload source code blog ini disini