Pada part-part sebelumnya kita sudah membuat sebagian halaman home (index.html) dan halaman penampil Semua Projects / portfolio, kali ini kita lanjutkan membuat halaman single / pos single untuk masing-masing projects / portfolio yang ada.

Sebelum itu, silahkan buat folder baru terlebih dahulu di root website kalian silahkan beri nama misalnya portfolio.

Selanjutnya buka code editor yang digunakan misalnya Sublime Text / Adobe Dreamweaver kemudian buat file baru misalnya contohportfolio1.html (nama file ini adalah nama dari portfolionya, silahkan sesuaikan karena ini nanti akan menjadi URL). Simpan file contohportfolio1.html ini didalam folder baru portfolio tadi.

Persiapan

Seperti biasa, kita buat bagian navigasi terlebih dahulu dan navigasi ini sama dengan navigasi-navigasi di halaman sebelumnya. Jadi, copy code yang ada di file sebelumnya (semuaprojects.html / halaman yang kemarin dibuat untuk menampilkan semua projects) dari bagian atas code (!doctype) sampai tag penutup </nav> kemudian tempelkan di file baru contohportfolio1.html.

Kasih jarak dengan menekan Enter beberapa kali supaya tidak bingung, kemudian copy lagi code yang ada di file sebelumnya (semuaprojects.html) bagian Copyright sampai paling bawah (tag penutup </html>) tempelkan di file baru contohportfolio1.html.

Sebelum melanjutkan membangun pos tunggal contohportfolio1.html ini, kita buat sedikit perubahan terlebih dahulu pada semuaprojects.html (halaman yang menampilkan semua project) dengan menambahkan link dibagian a href=”” nya. Silahkan isi link supaya mengarah ke pos tunggal contohportfolio1.html misalnya:

<div class="col-md-3 col-sm-6">
   <div class="panel panel-default">
      <div class="panel-body text-center">
         <a href="../portfolio/contohportfolio1.html"><img src="../media/image/test1.jpg" class="img-responsive"></a>
         <h2>Portfolio 1</h2>
      </div>
   </div>
</div>

Perhatikan pada bagian a href=”” nya, silahkan masukkan link yang mengarah ke file contohportfolio1.html (sesuaikan dengan nama file yang kalian buat). Dengan begitu, ketika seseorang mengklik Portfolio 1 di halaman Semua Projects akan diarahkan ke pos tunggal contohportfolio1.html.

Bisa pelajari disini bagaimana cara memanggil file di HTML dan disini.

Silahkan lakukan ini pada semua a href=”” portfolio yang ada di halaman Semua Projects dan arahkan ke pos tunggal portfolionya masing-masing. Silahkan di coba yang Portfolio 1 tadi, maka akan mengarah ke pos tunggal / detail dari contohportfolio1.html tapi belum ada apa-apanya karena belum kita bangun pos tunggalnya.

Hal ini juga dapat kalian lakukan pada link a href=”” yang ada di bagian My Projects di halaman beranda (index.html), silahkan terapkan masing-masing link portfolio supaya ketiak di klik portfolionya akan mengarah ke pos tunggal portfolio juga.

Pos Tunggal Portfolio

Biasanya, pada pos tunggal itu terdapat sidebar / widget di samping dari pos detail. Posisinya silahkan kalian yang tentukan apakan sidebar nya mau di sebelah kiri atau di sebelah kanan, jika disebelah kanan maka kode nya seperti ini:

<div class="container-fluid">
  <div class="col-md-9 col-sm-12 detail-portfolio"></div>
  <div class="col-md-3 col-sm-12 widget-portfolio"></div>
</div>

Jika ingin di sebelah kiri tinggal diubah saja posisi col-md-3 berada diatas, silahkan atur juga ukuran lebar masing-masing col- sesuai selera seperti yang sudah dijelaskan pada part-part sebelumnya. Jangan lupa tambahkan class baru juga buatan kalian sendiri contohnya detail-portfolio dan widget-portfolio supaya kita bisa memberi gaya bebas nantinya untuk bagian-bagian tersebut.

Setelah mempelajari dari part 1 sampai part 5 kemarin, saya rasa tidak perlu dijelaskan terlalu panjang tentang pembuatan halaman seperti ini karena tidak berbeda jauh dengan halaman-halaman yang kita buat sebelumnya. Tapi untuk contoh aja, misalnya saya membuat pos tunggal ini dengan code berikut:

<div class="container-fluid">
  <div class="col-md-9 col-sm-12 detail-portfolio">
    <div class="row">
      <h2>Detail Portfolio 1 Rio Bermano</h2>
      <p><img src="../media/image/test1.jpg" class="img-responsive"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
  </div>
  <div class="col-md-3 col-sm-12 widget-portfolio">
    <div class="widget-portfolio-terbaru">
      <h2 class="text-center">Portfolio Terbaru</h2>
        <ul>
          <li>
            <div class="gambar-portfolio-terbaru">
              <img src="../media/image/test2.jpg">
            </div>
            <div class="judul-portoflio-terbaru" style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
              <a href="">Portfolio 1 Rio Bermano</a>
            </div>
          </li>
          <li>
            <div class="gambar-portfolio-terbaru">
              <img src="../media/image/test2.jpg">
            </div>
            <div class="judul-portoflio-terbaru">
              <a href="">Portfolio 2 Rio Bermano</a>
            </div>
          </li>
          <li>
            <div class="gambar-portfolio-terbaru">
              <img src="../media/image/test2.jpg">
            </div>
            <div class="judul-portoflio-terbaru">
              <a href="">Portfolio 3 Rio Bermano</a>
            </div>
          </li>
          <li>
            <div class="gambar-portfolio-terbaru">
              <img src="../media/image/test2.jpg">
            </div>
            <div class="judul-portoflio-terbaru">
              <a href="">Portfolio 4 Test Test Rio Bermano</a>
            </div>
          </li>
          <li>
            <div class="gambar-portfolio-terbaru">
              <img src="../media/image/test2.jpg">
            </div>
            <div class="judul-portoflio-terbaru">
              <a href="">Portfolio 5 5 7 8 Rio Bermano</a>
            </div>
          </li>
        </ul>
    </div>
  </div>
</div>

Mungkin tidak terlalu bagus, karena ini hanya contoh saja. Silahkan gunakan code diatas jika ingin membuat pos tunggal yang sama atau silahkan buat baru atau bisa juga mengedit kode-kode diatas. Style yang saya gunakan untuk pos tunggal ini adalah:

/* DETAIL PORTFOLIO */
.detail-portfolio p {
   text-align: justify;
}
.detail-portfolio p img {
   width: 250px;
   float: left;
   margin: 0 1% 1% 0;
}

/* Widget Portfolio */
/* Portfolio Terbaru */
.widget-portfolio-terbaru ul {
   list-style: none;
}
.widget-portfolio-terbaru ul li {
   overflow: hidden;
   margin-bottom: 4%;
}
.widget-portfolio-terbaru ul li:hover {
   box-shadow: 2px 2px 2px #000;
}
.gambar-portfolio-terbaru img {
   width: 40%;
   float: left;
   margin-right: 2%;
}
.judul-portoflio-terbaru a {
   color: #c41617;
}
.judul-portoflio-terbaru a:hover {
   text-decoration: none;
}

Save dan lihat hasilnya !

Contoh dari pos tunggal ini, menampilkan gambar mini di float left / hamparan kiri supaya gambarnya berada di sebelah kiri dari tulisan-tuilisan portfolio. Pada widget nya sendiri disini baru saya tambahkan 1 widget saja yaitu Portfolio Terbaru yang menampilkan semua postingan portfolio terbaru, silahkan tambahkan widget yang kalian butuhkan dibagain bawahnya dan pastikan itu diisi link juga yang mengarah ke masing-masing pos tunggal portfolionya.

Jika text / tulisan yang ditampilkan di widget terlalu panjang akan terlihat jelek, maka jangan lupa gunakan overflow hidden seperti yang diterapkan pada style code diatas supaya tulisannya tidak berantakan.

Masih bingung ? Lihat : Video tutorial cara membuat single post dan sidebar.

Sedikit tambahan saja, pada bagian navigasi silahkan masukkan link yang mengarah ke halaman semuaporjects.html (halaman yang menampilkan semua project / portfolio) di bagian menu Portfolio supaya ketika di klik dari pos tunggal portfolio akan mengarahkan ke halaman Semua Projects.

Sudah paham ? Lanjutkan ke part berikutnya atau baca lagi part sebelumnya.

Selamat mencoba !