Setelah menyelesaikan tutorial membuat website HTML CSS sederhana part 8, kita lanjut lagi disini part 9 dari total 11 part.
Pada part 9 ini kita akan membuat halaman detail / single page yang digunakan untuk halaman single blog / detail dari sebuah artikel seperti postingan ini yang sedang kalian buka di browser merupakan halaman halaman pos / blog tunggal yang berisi konten / artikel.
Langkah awal, kita copy code untuk bagian-bagian yang disamakan dengan halaman utama / homepage seperti bagian menu / navigasi dan footer. Buka kembali codingan halaman beranda / home sebelumnya yang sudah dibuat kemudian salin code dari atas sampai akhir menu, jadi seperti ini:
<!doctype html>
<html>
<head>
<title>Membuat Website Sederhana - Single Post</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>
Ini merupakan code yang disalin dari halaman Home (jika tidak ada yang diubah), paste di halaman baru pada code editor misalnya Sublime Text kemudian Save dan berinama.
Karena ini untuk halaman tunggal sebuah pos maka berinama sesuai judul pos / artikelnya misalnya judul artikel ini Cara Membuat Akun Facebook maka nama file ini juga tidak jauh seperti itu dan ini mempengaruhi SEO juga ketika di online kan, silahkan berinama yang sesuai dengan isi dari artikelnya. Ketika online, nama file ini akan menjadi URL di browser nantinya.
Pada tutorial ini saya membuat container / div utama pada isi body menggunakan div class buaya, silahkan copy dari pembuka div class buaya sampai akhir termasuk bagian Footer, penutup tag /body dan penutup tag /html karena tadi kita salin code diatas belum di tutup body dan html nya.
<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="artikelTerbaru">
<a href=""><img src="images/lima.jpg"></a>
<a href="https://posciety.com"><h2>Artikel Baru Satu</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</p><br/>
<a href=""><img src="images/lima.jpg"></a>
<a href=""><h2>Artikel Baru Dua</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</p><br/>
<a href=""><img src="images/lima.jpg"></a>
<a href=""><h2>Artikel Baru Tiga</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</p><br/>
<div class="pagination">
<li class="kiri"><a href="">← Sebelumnya</a></li>
<li class="kanan"><a href="">Selanjutnya →</a></li>
</div><!-- akhr class pagination -->
</div><!--akhir class artikelTerbaru-->
</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>
Paste code dari halaman Home bagian div class buaya ini di halaman single post setelah penutup menu tadi dan code nya seperti ini jika kalian tidak melakukan perubahan di tutorial-tutorial sebelumnya.
Silahkan Save dan lihat single post ini di browser, sudah hampir mirip dengan bagian Home tapi tidak ada bagian Artikel Disarankan karena kita hanya copy dari mulai div class buaya saja yang artinya melawati bagian div class recommended.
Pada halaman Home kita tampilkan beberapa artikel dari mulai yang terbaru sampai terlama dengan menggunakan gambar masing-masing artikel dan kutipan / excerpt dari masing-masing artikel tersebut didalam div class artikelTerbaru. Karena ini halaman single post maka kita hanya perlu satu artikel saja disini dengan menampilkan keseluruhan isi dari artikel tersebut. Silahkan hapus beberapa gambar, judul dan excerpt artikel dari code div class artikelTerbaru diatas sisakan satu saja maka code div class artikelTerbaru diatas akan berubah 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><!--akhir class single-post-->
Sekalian ganti juga div class artikelTerbaru menjadi div class single-post karena isinya akan dibuat berbeda. Lihat code tersebut, hanya ada 1 gambar, 1 judul dan keseluruhan isi konten yang menandakan ini bukan lagi sebuah daftar artikel terbaru seperti dihalaman Home melainkan halaman pos tunggal yang menampilkan detail artikel.
Jangan lupa, karena disini kita mengganti class artikelTerbaru menjadi class single-post maka pada CSS nya pun harus dibuatkan baru untuk class single-post. Silahkan buka file CSS nya kemudian cari bagian CSS untuk class artikelTerbaru copy semuanya lalu paste di bagian mana saja dari file tersebut dan mulai mengganti .artikelTerbaru menjadi .single-post seperti ini:
.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;
}
Bisa perhatikan pada CSS baru ini, nilainya tetap sama dengan nilai yang dimiliki .artikelTerbaru hanya saja .artikelTerbaru nya diganti menjadi .single-post karena di file HTML nya kita membuat class baru (single-post) tapi bentuknya sama dengan bagian class artikelTerbaru. Silahkan Save dan lihat hasilnya di browser. (lihat gambar)
Inilah hasilnya, tidak berbeda jauh style nya dengan style .artkelTerbaru karena memang tidak ada perubahan pada nilai-nilainya. Silahkan tambahkan style lain atau merubah style nya jika kalian ingin membuatnya beda dengan tampilan class artikelTerbaru.
Sekarang kita coba 1 link yang mengarah ke halaman single ini, silahkan buka kembali codingan halaman Home lalu tambahkan single-post.html di dalam link (a href=””) misalnya saya akan tambahkannya di tulisan Baca Selengkapnya dan judulnya pada bagian Artikel Disarankan halaman Home. Sekarang, ketika diklik Baca Selengkapnya / judulnya akan mengarah ke halaman single-post ini.
(lihat gambar) Jika tidak berhasil, mungkin ada salah penulisan pada a href=”” nya, silahkan diperiksa kembali.
Catatan: single-post.html yang ditulis didalam a href=”” itu adalah nama file dari post nya, silahkan disamakan jangan sampai salah. Untuk mempelajari lebih lanjut tentang bagaimana cara memasukkan link pada menu seperti diatas bisa lihat disini.
Begitu juga di file single-post.html pada bagian menu Home nya silahkan masukkan file membuatwebsite.html / home.html (nama file halaman Home) didalam a href=”” untuk mengarahkan ke halaman Home ketika klik menu Home di halaman single post.
Mudah kan ? Kalo masih bingung penjelasan tutorial Part 9 ini bisa lihat video tutorialnya disini atau tinggalkan komentar dibawah.
Selanjutnya kalian bisa buat beberapa post tunggal sesuai artikel yang diinginkan seperti contoh diatas, karena biasanya situs blog itu memiliki banyak artikel tidak cuma satu saja. Selain itu, kalian juga dapat memasukkan link seperti diatas kedalam judul atau gambar yang ada di bagian Artikel Terlaris widget yang sudah ada.
Sejauh ini, code yang kalian miliki dari awal mulai tutorial sampai sekarang akan seperti ini:
HTML – Halaman Home
<!doctype html>
<html>
<head>
<title>Membuat Website - HTML Rio Bermano</title>
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<img src="images/satu.jpg">
</header>
<menu>
<li><a href="">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="recomended">
<h1>Artikel Disarankan</h1>
<div class="recomendedKiri">
<img src="images/dua.jpg">
<h3><a href="single-post.html">Tutorial Bagi Pemula</a></h3>
<p>ey College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and the cites of the word. 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 Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes. <a href="single-post.html"><strong>Baca Selengkapnya</strong></a></p>
</div><!--akhir class recomendedKiri-->
<div class="recomendedKanan">
<img src="images/tiga.jpg">
<h3><a href="">Hi, There</a></h3>
<p>ey College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and the cites of the word. 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 Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes. <a href=""><strong>Baca Selengkapnya</strong></a></p>
</div><!--akhir class recomendedKanan-->
</div><!--akhir class recomended-->
<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="artikelTerbaru">
<a href=""><img src="images/lima.jpg"></a>
<a href="https://posciety.com"><h2>Artikel Baru Satu</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</p><br/>
<a href=""><img src="images/lima.jpg"></a>
<a href=""><h2>Artikel Baru Dua</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</p><br/>
<a href=""><img src="images/lima.jpg"></a>
<a href=""><h2>Artikel Baru Tiga</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</p><br/>
<div class="pagination">
<li class="kiri"><a href="">← Sebelumnya</a></li>
<li class="kanan"><a href="">Selanjutnya →</a></li>
</div><!-- akhr class pagination -->
</div><!--akhir class artikelTerbaru-->
</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>
HTML – Halaman Pos Tunggal
<!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><!--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>
CSS
* {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;
}
/* 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;
}
Setelah selesai part 9, silahkan lanjut ke part berikutnya (part 10).
Selamat mencoba !