Setelah menyelesaikan part sebelumya (tutorial membuat website HTML CSS sederhana part 9), sekarang lanjutkan ke part 10 dari 11 part.

Pada part 10 ini kita akan membuat tombol link share dan membuat kolom sistem komentar dibagian bawah artikel / pos yang sudah ada.

Membuat Tombol Share Post

Untuk mempercepat, bisa disalin aja bagian media sosial di widget yang sudah dibuat sebelumnya.

        <div class="mediaSosial">
            <h3>Let's Connect !</h3>
            <a href=""><img src="images/googleplus.png" title="Follow Me on G+"></a>
            <a href="http://www.facebook.com/bermanorio" target="_blank"><img src="images/facebook.png" title="Like Us on Facebook"></a>
            <a href="http://www.twitter.com/bermanorio"><img src="images/twitter.png"></a>
            <a href="http://www.instagram.com/riobermano"><img src="images/instagram.png"></a>
            <a href=""><img src="images/linkedin.png"></a>
            <a href=""><img src="images/youtube.png"></a>
            <a href=""><img src="images/pinterest.png"></a>
         </div>

Ini adalah bagian media sosial di widget yang digunakan untuk mengarahkan ke masing-masing media sosial, sekarang tinggal ganti fungsinya untuk share. Salin code tersebut tempelkan dibagian bawah pos / artikel, supaya tombol share media sosial ini masih berada didalam pos silahkan tempelkan code tersebut tepat sebelum akhir class single-post.

Setelah ditempel / paste didalam post, silahkan ganti nama class nya sesuai keinginan misalnya class mediasosial diganti menjadi class sharesosial supaya enak mengkustomnya. Maka code didalam single-post akan menjadi seperti ini:

<div class="single-post">
   <a href=""><img src="images/dua.jpg"></a>
   <a href="https://posciety.com"><h2>Tutorial Bagi Pemula</h2></a>
   <p>ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice</p><br/><p>ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicessage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice</p><br/><p>ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicessage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice</p><br/><p>ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicessage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice</p><br/><br/>
   <div class="sharePost">
      <h3>Share This Post !</h3>
      <a href=""><img src="images/googleplus.png" title="Follow Me on G+"></a>
      <a href="" target="_blank"><img src="images/facebook.png" title="Like Us on Facebook"></a>
      <a href=""><img src="images/twitter.png"></a>
      <a href=""><img src="images/instagram.png"></a>
      <a href=""><img src="images/linkedin.png"></a>
      <a href=""><img src="images/youtube.png"></a>
      <a href=""><img src="images/pinterest.png"></a>
   </div><!--akhir class sharePost--><br/>
</div><!--akhir class single-post-->

Ada tambahan bagian share artikel dibagian bawah post nya, ini adalah contoh dari salah satu post yang ada silahkan terapkan di masing-masing post yang ingin diberikan tombol share. Karena sudah diganti class mediasosial tadi menjadi class sharePost maka perlu dibuatkan nilai CSS untuk class sharePost ini. Salin nilai-nilai CSS class mediasosial tempelkan dibagian mana saja didalam file CSS kemudian ubah .mediasosial menjadi .sharePost misalnya seperti ini:

.buaya .single-post .sharePost {
   margin: 0 5px;
}
.buaya .single-post .sharePost h3 {
   margin: 10px 0 10px;
}
.buaya .single-post .sharePost img {
   width: 30px;
   height: 30px;
}
.buaya .single-post .sharePost img:hover {
   opacity: 0.5;
}

Nilai ini tetap sama dengan nilai-nilai class mediasosial, sekarang jika ingin menambahkan gaya baru (berbeda dengan gaya widget mediasosial) bisa tambahkan nilai-nilai nya disini dan tidak akan merubah gaya class mediasosial karena namanya sudah dibedakan. Save dan lihat hasilnya, silahkan sesuaikan gayanya sesuai keinginan. Pada link didalam sharePost bisa diisi dengan link untuk share artikel, dapatkan link share disini.

Membuat Kolom Komentar Post

Untuk membuat kolom komentar memerlukan form, silahkan kode berikut dan tempelkan dibawah tombol share tadi tapi masih didalam class single-post.

<div class="komentar">
            <h3>Tinggalkan Komentar</h3>
            <form>
               <input type="text" required placeholder="Nama Anda...">
               <input type="email" required placeholder="Email Anda...">
               <textarea name="isiKomentar" required placeholder="Tulis Komentar Anda Disini..."></textarea>
               <input type="submit" value="Kirim Komentar">
            </form>
         </div><!-- akhir class komentar -->

Kemudian tambahkan nilai-nilai CSS berikut ini didalam file .css nya:

.buaya .single-post .komentar {
   width: 100%;
   margin: 0 0 5px;
   border-top: 5px solid #333;
   padding-top: 20px;
}
.buaya .single-post .komentar form {
   width: 100%;
   padding: 0 2px 0;
}
.buaya .single-post .komentar h3 {
   text-align: center;
   margin: 10px 0 10px;
}
.buaya .single-post .komentar input[type="text"] {
   width: 97%;
   height: 20px;
   margin-bottom: 5px;
}
.buaya .single-post .komentar input[type="email"] {
   width: 97%;
   height: 20px;
   margin-bottom: 5px;
}
.buaya .single-post .komentar textarea {
   width: 97%;
   max-width: 97%;
   height: 100px;
   max-height: 120px;
   margin-bottom: 5px;
}
.buaya .single-post .komentar input[type="submit"] {
   padding: 5px;
   cursor: pointer;
   margin-bottom: 5px;
}

Silahkan ganti nilai-nilai nya untuk menyesuaikan gaya kolom komentar ini sesuai keinginan karena ini hanya contoh standar saja.

Klik disini untuk melihat lebih lanjut tentang membuat form HTML CSS. Masih bingung ? Lihat : Video tutorial cara membuat web HTML Part 10.

Save dan lihat hasilnya, sekarang halaman tunggal post / artikel sudah memiliki bagian tambahan dibawahnya yaitu bagian tombol share dan kolom komentar.

Kesimpulan

Pada tutorial ini tidan dijelaskan satu persatu setiap tag HTML atau nilai CSS yang digunakan, silahkan lihat video tutorialnya untuk mengetahui fungsi dari masing-masing tag / nilai tersebut. Code-code diatas hanya contoh untuk bentuk standar / simple, silahkan ganti tag HTML / nilai CSS sesuai selera atau sesuaikan dengan gaya website yang kalian buat.

Sejauh ini, kode yang telah dibuat untuk halaman single post seperti ini:

<!doctype html>
<html>
   <head>
      <title>Membuat Website - HTML</title>
   <link href="css/style.css" type="text/css" rel="stylesheet">
   </head>
<body>
   <header>
      <img src="images/satu.jpg">
   </header>
   <menu>
      <li><a href="membuatwebsite.html">Home</a></li>
      <li><a href="">Download</a></li>
      <li><a href="">Tutorial</a></li>
      <li><a href="">Software</a></li>
      <li><a href="">Design</a></li>
      <li><a href="">Support</a></li>
      <li><a href="contoh-halaman.html">Kontak</a></li>
   </menu>

   <div class="buaya">
      <div class="widget">
         <div class="artikelTerlaris">
            <h3>Artikel Terlaris</h3>
            <img src="images/empat.jpg">
            <a href=""><h4>Terlaris Satu</h4></a>
            <p>ey College in Virginia, looked up one of the more obscure Latin words</p><br/>
            <img src="images/empat.jpg">
            <a href=""><h4>Terlaris Dua</h4></a>
            <p>ey College in Virginia, looked up one of the more obscure Latin words</p><br/>
            <img src="images/empat.jpg">
            <a href=""><h4>Terlaris Tiga</h4></a>
            <p>ey College in Virginia, looked up one of the more obscure Latin words</p>
         </div><!--akhir class artikelTerlaris-->
         <div class="mediaSosial">
            <h3>Let's Connect !</h3>
            <a href=""><img src="images/googleplus.png" title="Follow Me on G+"></a>
            <a href="http://www.facebook.com/bermanorio" target="_blank"><img src="images/facebook.png" title="Like Us on Facebook"></a>
            <a href="http://www.twitter.com/bermanorio"><img src="images/twitter.png"></a>
            <a href="http://www.instagram.com/riobermano"><img src="images/instagram.png"></a>
            <a href=""><img src="images/linkedin.png"></a>
            <a href=""><img src="images/youtube.png"></a>
            <a href=""><img src="images/pinterest.png"></a>
         </div><!--akhir class mediaSosial-->
         <div class="subscribe">
         <h3>Subscribe</h3>
            <form>
               Nama:<br/><input type="text" required><br/>
               Email:<br/><input type="email" required>
               <input type="submit" value="Kirim">
            </form>
         </div><!--akhir class kontakForm-->
      </div>
      <div class="single-post">
         <a href=""><img src="images/dua.jpg"></a>
         <a href="https://posciety.com"><h2>Tutorial Bagi Pemula</h2></a>
         <p>ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice</p><br/><p>ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicessage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice</p><br/><p>ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicessage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice</p><br/><p>ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicessage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice</p><br/><br/>
         <div class="sharePost">
            <h3>Share This Post !</h3>
            <a href=""><img src="images/googleplus.png" title="Follow Me on G+"></a>
            <a href="" target="_blank"><img src="images/facebook.png" title="Like Us on Facebook"></a>
            <a href=""><img src="images/twitter.png"></a>
            <a href=""><img src="images/instagram.png"></a>
            <a href=""><img src="images/linkedin.png"></a>
            <a href=""><img src="images/youtube.png"></a>
            <a href=""><img src="images/pinterest.png"></a>
         </div><!--akhir class sharePost--><br/>
         <div class="komentar">
            <h3>Tinggalkan Komentar</h3>
            <form>
               <input type="text" required placeholder="Nama Anda...">
               <input type="email" required placeholder="Email Anda...">
               <textarea name="isiKomentar" required placeholder="Tulis Komentar Anda Disini..."></textarea>
               <input type="submit" value="Kirim Komentar">
            </form>
         </div><!-- akhir class komentar -->
      </div><!--akhir class single-post-->
   </div><!--akhir class buaya-->

   <div class="footer">
      <p>Copyright 2016 | <a href="https://posciety.com" target="_blank">Rio Bermano</a></p>
   </div><!--akhir class footer-->


   </body>
   </html>

Dan file CSS nya seperti ini:

* {margin: 0; padding: 0;}
body {
   width: 900px;
   margin: auto;
}

header {
   width: 900px;
   height: 250px;
}
header img {
   width: 900px;
   height: 250px;
}

menu {
   width: 880px;
   height: 30px;
   background-color: blue;
   padding: 10px;
   margin-top: 5px;
}

menu li {
   list-style: none;
   float: left;
   margin-right: 20px;
   margin-top: 5px;
   color: #fff;
}
menu li a {
   text-decoration: none;
   color: #fff;
}
menu li a:hover {
   color: orange;
}

/* class recomended */
.recomended {
   width: 100%;
   overflow: hidden;
   background-color: #a9a9a9;
   margin-top: 5px;
}
.recomended h1 {
   text-align: center;
}
.recomended .recomendedKiri {
   width: 435px;
   float: left;
   margin: 10px 5px 5px 10px;
}
.recomended img {
   width: 150px;
   height: 100px;
   float: left;
   margin: 0 5px 5px 0;
   box-shadow: 2px 2px 2px #333;
}
.recomended p {
   text-align: justify;
}
.recomended .recomendedKanan {
   width: 435px;
   margin: 10px 10px 5px 5px;
   float: left;
}
.recomended a {
   text-decoration: none;
   color: #140fcd;
}
.recomended a:hover {
   color: #000;
}
.recomended h3 {
   color: #140fcd;
}
/* akhir class recomended */

/* class buaya */
.buaya {
   width: 100%;
   overflow: hidden;
   background-color: #333;
   margin-top: 5px;
}

/* class widget */
.buaya .widget {
   width: 245px;
   float: left;
   background-color: #f90;
}
.buaya .widget .artikelTerlaris {
   margin: 0 5px;
}
.buaya .widget .artikelTerlaris img {
   width: 100px;
   height: 50px;
   float: left;
   margin-right: 2.5px; 
}
.buaya .widget .artikelTerlaris h3 {
   text-align: center;
   margin: 10px 0 10px;
}
.buaya .widget .artikelTerlaris a {
   text-decoration: none;
   color: #000;
}
/* akhir class widget */

/* class artikelTerbaru */
.buaya .artikelTerbaru {
   width: 650px;
   background-color: #f90;
   float: left;
   margin-left: 5px;
}
.buaya .artikelTerbaru img {
   width: 550px;
   margin: 5px 50px 0;
}
.buaya .artikelTerbaru h2 {
   margin-left: 5px;
}
.buaya .artikelTerbaru p {
   margin: 0 5px;
   text-align: justify;
}
.buaya .artikelTerbaru a {
   text-decoration: none;
   color: #000;
}
.buaya .pagination li {
   list-style: none;
   margin: 5px;
}
.buaya .pagination a {
   text-decoration: none;
   color: #fff;
}
.buaya .pagination .kiri {
   float: left;
}
.buaya .pagination .kanan {
   float: right;
}

/* akhir class artikelTerbaru */

/* class mediaSosial */
.buaya .widget .mediaSosial {
   margin: 5px;
   border-top: 5px solid #333;
}
.buaya .widget .mediaSosial h3 {
   text-align: center;
   margin: 10px 0 10px;
}
.buaya .widget .mediaSosial img {
   width: 30px;
   height: 30px;
}
.buaya .widget .mediaSosial img:hover {
   opacity: 0.5;
}
/* akhir class mediaSosial */

/* class subscribe */
.buaya .widget .subscribe {
   margin: 0 5px;
   border-top: 5px solid #333;
}
.buaya .widget .subscribe h3 {
   text-align: center;
   margin: 10px 0 10px;
}
.buaya .widget .subscribe input[type="text"] {
   width: 95%;
}
.buaya .widget .subscribe input[type="email"] {
   width: 95%;
   margin-bottom: 5px;
}
.buaya .widget .subscribe input[type="submit"] {
   width: 50%;
   padding: 5px;
   cursor: pointer;
   margin-bottom: 5px;
   margin-left: 50px;
}
/* akhir class subscribe */

/* class single-post */
.buaya .single-post {
   width: 650px;
   background-color: #f90;
   float: left;
   margin-left: 5px;
}
.buaya .single-post img {
   width: 550px;
   margin: 5px 50px 0;
}
.buaya .single-post h2 {
   margin-left: 5px;
}
.buaya .single-post p {
   margin: 0 5px;
   text-align: justify;
}
.buaya .single-post a {
   text-decoration: none;
   color: red;
}

/* class sharePost */
.buaya .single-post .sharePost {
   margin: 0 5px;
}
.buaya .single-post .sharePost h3 {
   margin: 10px 0 10px;
}
.buaya .single-post .sharePost img {
   width: 30px;
   height: 30px;
}
.buaya .single-post .sharePost img:hover {
   opacity: 0.5;
}
/* akhir class sharePost */

/* class komentar */
.buaya .single-post .komentar {
   width: 100%;
   margin: 0 0 5px;
   border-top: 5px solid #333;
   padding-top: 20px;
}
.buaya .single-post .komentar form {
   width: 100%;
   padding: 0 2px 0;
}
.buaya .single-post .komentar h3 {
   text-align: center;
   margin: 10px 0 10px;
}
.buaya .single-post .komentar input[type="text"] {
   width: 97%;
   height: 20px;
   margin-bottom: 5px;
}
.buaya .single-post .komentar input[type="email"] {
   width: 97%;
   height: 20px;
   margin-bottom: 5px;
}
.buaya .single-post .komentar textarea {
   width: 97%;
   max-width: 97%;
   height: 100px;
   max-height: 120px;
   margin-bottom: 5px;
}
.buaya .single-post .komentar input[type="submit"] {
   padding: 5px;
   cursor: pointer;
   margin-bottom: 5px;
}
/* akhir class komentar */

/* akhir class single-post */

/* footer */
.footer {
   width: 100%;
   height: 50px;
   background-color: blue;
   margin-top: 10px;
   position: relative;
}
.footer p {
   color: #fff;
   position: absolute;
   bottom: 10px;
   left: 350px;
}
.footer p a {
   text-decoration: none;
   color: #fff;
}
.footer p a:hover {
   color: #f90;
}

Seperti itulah jika tidak ada perubahan yang dilakukan dari awal tutorial.

Setelah berhasil menyelesaikan part 10 ini, silahkan lanjutkan ke part terakhir (part 11).

Selamat mencoba !