MEMBUAT WEBSITE HTML CSS PRAKTIS (SESI 2)
Artikel ini merupakan artikel lanjutan dari tutorial sebelumnya (MEMBUAT WEBSITE HTML CSS PRAKTIS (SESI 1) Part 1 – Part 8), pastikan kalian sudah mengikuti part-part sebelumnya.
PART 1
Sebelum kita mengisi bagian menu (nama menu yang sebenarnya dan isinya) dan membuat gambar/teks artikel yang sebenarnya di bagian artikel disarankan, artikel terlaris di sisi sidebar kiri dan artikel terbaru di sidebar kanan dan fasilitas lainnya pada website yang kita rancang, sebaiknya kita melakukan finishing home page terlebih dahulu untuk memperindah tampilan profil home page website yang dimaksud.
Membuat 2 Footer (Footer kanan dan footer kiri)
Pada part 1 Sesi 2 ini kita hanya membuat Footer menjadi 2 bagian yaitu footer kanan dan footer kiri untuk memperindah bagian bawah home page dari website yang kita rancang.
Pertama-tama silahkan buka file membuatwebsite.html nya, lalu file ini kita copykan dan beri nama membuatwebsite1.html, lalu disimpan di folder yang sama sejajar dengan file sebelumnya. Dan juga silahkan buka file style.css nya, lalu file ini kita copykan dan beri nama style1.css, lalu disimpan di folder yang sama sejajar dengan file style.css sebelumnya.
Silahkan buka kembali code editor (Sublime Text) dan buka codingan HTML dengan cara membuka file membuatwebsite1.html, dan juga buka codingan CSS dengan cara membuka file style1.css, kemudian pada HTML yang link ke CSS di bagian code <link href="css/style.css" type="text/css" rel="stylesheet"> kita gantikan dengan code <link href="css/style1.css" type="text/css" rel="stylesheet"> (singkatnya cukup menggantikan nama file style.css menjadi style1.css) tujuannya agar terjadi link code code CSS bisa dipanggil oleh HTML.
Nah, sekarang file yang aktif terbuka adalah membuatwebsite1.html dan style1.css.
Pada HTML kita sudah membuat bagian footer dengan code HTML nya adalah seperti ini:
<div class="footer">
<p>@Copyright 2020 | PMD Sesawi-AK | <a href="https://PMD Sesawi-AK.com" target="_blank">SR.Pakpahan,SST</a></p>
</div><!--akhir class footer-->
Dan pada CSS gaya footer tersebut, selanjutnya silahkan dihapus code CSS bagian footer nya yang ini:
/* class 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;
}
/* akhir class footer */
lalu gantikan dengan code CSS berikut ini:
/* class Footer Kanan */
.footer {
width: 100%;
height: 50px;
background-color: grey;
margin-top: 5px;
position: relative;
margin-left: 245px;
width: 660px;
}
.footer p {
color: #fff;
position: absolute;
bottom: 12.5px;
left: 150px;
}
.footer p a {
text-decoration: none;
color: #fff;
}
.footer p a:hover {
color: #f90;
}
/* akhir class Footer Kanan */
Kemudian untuk membuat footer kiri (seolah olah ada bagian footer di sidebar kiri), pada HTML kita tambahkan class di bagian sidebar kiri yaitu class footerKiri, seperti berikut ini:
<div class="footerKiri">
<h3>anone</h3>
</div><!--akhir class Footer Kiri-->
Tuliskan kode tersebut di setelah </div><!--akhir class subscribe--> atau di sebelum </div> <div class="artikelTerbaru">
Kemudian class footerKiri ini kita beri gaya (style) nya di CSS , tuliskan code CSS berikut ini di setelah /* akhir class subscribe */ atau di sebelum /* class Footer Kanan */ yaitu berikut ini:
/* class Footer Kiri */
.buaya .widget .footerKiri {
margin: 0 px;
border-top: 5px solid #333;
height: 50px;
background-color: grey;
margin-top: 10px;
}
.buaya .widget .footerKiri h3 {
text-align: center;
margin: 10px 0 10px;
color: grey
}
/* akhir class Footer Kiri */
Lihat hasilnya kreasi finishing home page bagian footer berikut ini : (lihat gambar)
Terlihat
bahwa tata letak bagian footer ada 2 yaitu footer di sebelah kanan
(footer yang sebenarnya origin) dan footer di sebelah kiri (seolah olah
sidebar kiri dibuat menjadi footer), dan kedua footer ini sudah sama
warnanya diberi warna abu-abu (grey). Teks pada footer kanan juga sudah
dirapikan tata letaknya, sementara teks pada footer kiri ada sebenarnya,
tapi tidak kelihatan oleh karena warna teknya adalah sama dengan warna
background footerKiri yaitu berwarna warna abu-abu (grey).
Code penggantian warnanya dengan code: background-color: grey; ada di CSS di bagian ini:
/* class Footer Kiri */
.buaya .widget .footerKiri {
margin: 0 px;
border-top: 5px solid #333;
height: 50px;
background-color: grey;
margin-top: 10px;
}
Bila ingin tahu teks apa yang saya tuliskan di footerKiri tersebut, caranya silahkan coba ganti warna backgroundnya.
Sampai disini, maka seluruh code HTML CSS kalian akan seperti ini (jika tidak ada yang diubah):
Code HTML:
<!doctype html>
<html>
<head>
<title>Membuat Website - HTML PMD Sesawi-AK</title>
<link rel="shortcut icon" type="image/png" href="images/favicon.ico"/>
<link href="css/style1.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<img src="images/logo pmd.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>Media Sosial, Let's Connect !</h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon 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 subscribe-->
<div class="footerKiri">
<h3>anone</h3>
</div><!--akhir class Footer Kiri-->
</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>
</div>
</div><!--akhir class buaya-->
<div class="footer">
<p>@Copyright 2020 | PMD Sesawi- AK | <a href="https://PMD Sesawi-AK.com" target="_blank">SR.Pakpahan,SST</a></p>
</div><!--akhir class footer-->
</body>
</html>
Code CSS:
* {margin: 0; padding: 0;}
body {
width: 900px;
margin: auto;
}
header {
width: 900px;
height: 240px;
}
header img {
width: 900px;
height: 240px;
}
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;
}
/* 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 Footer Kiri */
.buaya .widget .footerKiri {
margin: 0 px;
border-top: 5px solid #333;
height: 50px;
background-color: grey;
margin-top: 10px;
}
.buaya .widget .footerKiri h3 {
text-align: center;
margin: 10px 0 10px;
color: grey
}
/* akhir class Footer Kiri */
/* class Footer Kanan */
.footer {
width: 100%;
height: 50px;
background-color: grey;
margin-top: 5px;
position: relative;
margin-left: 245px;
width: 660px;
}
.footer p {
color: #fff;
position: absolute;
bottom: 12.5px;
left: 150px;
}
.footer p a {
text-decoration: none;
color: #fff;
}
.footer p a:hover {
color: #f90;
}
/* akhir class Footer Kanan */
Kesimpulan
Pada sisi bagian bawah kiri di sebelah kiri footerKanan (cara kita memandang home page) disitu dibiarkan kosong saja guna untuk kemudahan SEO (Search Engine Optimization) agar website kita mudah dan cepat ter-loading ke browser. Dan di atas bagian kosong tersebut adalah sisi sidebar kiri yang masih banyak kosong untuk kita tambahkan fasilitas/widget lainnya seperti membuat Komentar, dan sebagainya.
footer pada sebuah situs web tidak selalu hanya berupa hak cipta / copyright saja tapi juga ada yang menerapkan widget yang biasa digunakan untuk link-link situs yang tidak diterapkan dibagian menu seperti About Us – Contact Us – Advertising dan lainnya.
Ini semua tergantung dari bagaimana kalian ingin membuat situs web kalian karena ada juga beberapa situs web yang tidak menggunakan widget dibagian footer. Jika ingin menggunakan widget, bisa ikuti tutorial part-part sebelumnya yang menjelaskan tentang sidebar & widget kemudian kalian bisa terapkan tutorial itu di bagian widget.
Selamat mencoba !
PART 6
MENU DAN SUB SUB MENU
Secara default, menu ditampilkan sebagai penuntun arah bagi pengunjung berselancar di website agar tidak tersesat. Tapi saat ini sudah banyak sekali situs web yang membuat menu dengan sub nya bahkan beberapa tingkatan sub sub menu seperti yang akan kita bahas pada Part 6 ini.) a
Kita akan membuat Dropdown Menu (cara membuat sub menu tersembunyi, tapi bisa muncul ketika di klik). Buka file HTML sebelumnya yang bernama membuatwebsite1.html di lembar kerja code editor (Sublime Text), perhatikan pada bagian menu kita sudah membuat code HTML-sebelumnya yaitu:
<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>
Hapus code tersebut di atas dan tuliskan code HTML bagian menu-sub menu berikut ini, tuliskan disebelum class recomended (<div class="recomended">) atau disesudah penutup header (</header>) . yaitu berikut ini:
<menu>
<nav><ul>
<li><a href="">Home</a>
<ul><li> <a href="ul.html">Tentang Kami</a></li>
</ul>
<li>Artikel
<ul><li>Artikel Terlaris
<ul><li><a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm">TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1)</a></li></ul>
<li> Artikel Terbaru
<ul><li><a href="dokumen/DIBERKATI DAN MEMBERKATI.htm">DIBERKATI DAN MEMBERKATI</a></li></ul>
<li>Artikel Disaran
<ul><li><a href="PEMBAHARUAN KALENDER 1.htm">PEMBAHARUAN KALENDER</a></li></ul>
</li></li></li></li></ul></li>
<li>Tutorial
<ul><li> <a href="ul.html">Artikel Terbaru</a></li>
<li> <a href="ul.html">Artikel Musik</a></li>
</ul>
<li>Sabda
<ul><li> Sabda Minggu
<ul><li> <a href="dokumen/DIBERKATI DAN MEMBERKATI.htm">DIBERKATI DAN MEMBERKATI</a></li></ul>
<li> <a href="ul.html">Roti Hidup</a></li>
</ul>
<li>Design
<ul><li> <a href="ul.html">Artikel Terbaru</a></li>
<li> <a href="ul.html">Artikel Musik</a></li>
</ul>
<li>Support
<ul><li> <a href="ul.html">Artikel Terbaru</a></li>
<li> <a href="ul.html">Artikel Musik</a></li>
</ul>
<li><a href="">Kontak</a></li>
</ul></nav>
</menu>
.
Code HTML tersebut adalah code untuk membuat Menu dan Sub Menu Dropdown, disini saya ada membuat 7 buah Menu yaitu: Home - Artikel - Tutorial - Sabda - Design - Support - Kontak, dan dibawah menu tersebut ada lagi beberapa Sub Menu. Kalian bisa menggantikan nama Menu-nya dan nama Sub-Menunya sesuai dengan keinginan kalian merancang Menu Website kalian sendiri.
Disini saya menggunakan tag nav kemudian saya masukkan unordered list alias ul dan didalam nya saya kasih list alias li , setelah itu didalam li nya saya kasih a href ... (gunanya untuk memasukkan link, karena menu pasti ada link didalamnya. Pada bagian membuat submenu nya, dimulai lagi dari dengan memasukkan ul lagi pada bagian menu (list) yang akan dijadikan dropdown, misalnya pada contoh diatas saya akan membuat menu “Artikel” menjadi dropdown alias punya sub menu didalamnya. Maka sebelum tag penutup li pada “Artikel” kita masukkan menu baru lagi alias ul seperti biasa.
Kemudian buka file CSS sebelumnya yang bernama style1.css di lembar kerja code editor (Sublime Text), perhatikan pada bagian menu kita sudah membuat code CSS-sebelumnya yaitu:
.menu {
width: 880px;
height: 30px;
background-color: blue;
padding: 10px;
margin-top: 3px;
}
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;
}
Hapus
code CSS tersebut di atas dan tuliskan code CSS bagian style menu-sub
menu berikut ini, tuliskan disebelum class recomended (/* class recomended */) atau disesudah penutup header (/* akhir header */) . yaitu berikut ini:
/* menu */
menu {
width: 880px;
height: 20px;
background-color: blue;
padding: 10px;
margin-top: 3px;
}
menu li {
list-style: none;
float: left;
margin-right: 20px;
margin-top: 0px;
color: #fff;
}
menu li a {
text-decoration: none;
color: #fff;
}
menu li a:hover {
color: orange;
}
/* akhir menu */
/* nav menu */
nav {
position: relative;
top: 0px;
height: 20px;
line-height: 30px;
background-color: blue;
width: 880px;
margin: auto;
}
nav ul {
list-style: none;
}
nav ul li a {
text-decoration: none;
color: #fff;
float: left;
width: 100px;
display: block;
text-align: center;
}
nav ul li a:hover {
background: blue;
display: block;
}
nav ul li:hover ul {
display: block;
}
nav ul ul {
display: none;
position: absolute;
background: #ff0000;
top: 15px;
margin: 11px;
float: left;
}
/* akhir nav menu */
Selanjutnya pada folder dokumen, kita tambahkan file gambar yang nama filenya diberi gbr1 yang berekstensi png, juga tambahkan file artikel nama file saya di sini adalah DIBERKATI DAN MEMBERKATI yang telah dikonversikan dari MSWord (docx) ke dokumen html sehingga file tersebut berekstensi htm.
Maka akan diperoleh hasilnya berikut ini (lihat gambar):
Artikel ini merupakan artikel lanjutan dari tutorial sebelumnya (MEMBUAT WEBSITE HTML CSS PRAKTIS (SESI 1) Part 1 – Part 8), pastikan kalian sudah mengikuti part-part sebelumnya.
PART 1
Sebelum kita mengisi bagian menu (nama menu yang sebenarnya dan isinya) dan membuat gambar/teks artikel yang sebenarnya di bagian artikel disarankan, artikel terlaris di sisi sidebar kiri dan artikel terbaru di sidebar kanan dan fasilitas lainnya pada website yang kita rancang, sebaiknya kita melakukan finishing home page terlebih dahulu untuk memperindah tampilan profil home page website yang dimaksud.
Membuat 2 Footer (Footer kanan dan footer kiri)
Pada part 1 Sesi 2 ini kita hanya membuat Footer menjadi 2 bagian yaitu footer kanan dan footer kiri untuk memperindah bagian bawah home page dari website yang kita rancang.
Pertama-tama silahkan buka file membuatwebsite.html nya, lalu file ini kita copykan dan beri nama membuatwebsite1.html, lalu disimpan di folder yang sama sejajar dengan file sebelumnya. Dan juga silahkan buka file style.css nya, lalu file ini kita copykan dan beri nama style1.css, lalu disimpan di folder yang sama sejajar dengan file style.css sebelumnya.
Silahkan buka kembali code editor (Sublime Text) dan buka codingan HTML dengan cara membuka file membuatwebsite1.html, dan juga buka codingan CSS dengan cara membuka file style1.css, kemudian pada HTML yang link ke CSS di bagian code <link href="css/style.css" type="text/css" rel="stylesheet"> kita gantikan dengan code <link href="css/style1.css" type="text/css" rel="stylesheet"> (singkatnya cukup menggantikan nama file style.css menjadi style1.css) tujuannya agar terjadi link code code CSS bisa dipanggil oleh HTML.
Nah, sekarang file yang aktif terbuka adalah membuatwebsite1.html dan style1.css.
Pada HTML kita sudah membuat bagian footer dengan code HTML nya adalah seperti ini:
<div class="footer">
<p>@Copyright 2020 | PMD Sesawi-AK | <a href="https://PMD Sesawi-AK.com" target="_blank">SR.Pakpahan,SST</a></p>
</div><!--akhir class footer-->
Dan pada CSS gaya footer tersebut, selanjutnya silahkan dihapus code CSS bagian footer nya yang ini:
/* class 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;
}
/* akhir class footer */
lalu gantikan dengan code CSS berikut ini:
/* class Footer Kanan */
.footer {
width: 100%;
height: 50px;
background-color: grey;
margin-top: 5px;
position: relative;
margin-left: 245px;
width: 660px;
}
.footer p {
color: #fff;
position: absolute;
bottom: 12.5px;
left: 150px;
}
.footer p a {
text-decoration: none;
color: #fff;
}
.footer p a:hover {
color: #f90;
}
/* akhir class Footer Kanan */
Kemudian untuk membuat footer kiri (seolah olah ada bagian footer di sidebar kiri), pada HTML kita tambahkan class di bagian sidebar kiri yaitu class footerKiri, seperti berikut ini:
<div class="footerKiri">
<h3>anone</h3>
</div><!--akhir class Footer Kiri-->
Tuliskan kode tersebut di setelah </div><!--akhir class subscribe--> atau di sebelum </div> <div class="artikelTerbaru">
Kemudian class footerKiri ini kita beri gaya (style) nya di CSS , tuliskan code CSS berikut ini di setelah /* akhir class subscribe */ atau di sebelum /* class Footer Kanan */ yaitu berikut ini:
.buaya .widget .footerKiri {
margin: 0 px;
border-top: 5px solid #333;
height: 50px;
background-color: grey;
margin-top: 10px;
}
.buaya .widget .footerKiri h3 {
text-align: center;
margin: 10px 0 10px;
color: grey
}
/* akhir class Footer Kiri */
Lihat hasilnya kreasi finishing home page bagian footer berikut ini : (lihat gambar)
Code penggantian warnanya dengan code: background-color: grey; ada di CSS di bagian ini:
/* class Footer Kiri */
.buaya .widget .footerKiri {
margin: 0 px;
border-top: 5px solid #333;
height: 50px;
background-color: grey;
margin-top: 10px;
}
Bila ingin tahu teks apa yang saya tuliskan di footerKiri tersebut, caranya silahkan coba ganti warna backgroundnya.
Sampai disini, maka seluruh code HTML CSS kalian akan seperti ini (jika tidak ada yang diubah):
Code HTML:
<!doctype html>
<html>
<head>
<title>Membuat Website - HTML PMD Sesawi-AK</title>
<link rel="shortcut icon" type="image/png" href="images/favicon.ico"/>
<link href="css/style1.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<img src="images/logo pmd.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>Media Sosial, Let's Connect !</h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon 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 subscribe-->
<div class="footerKiri">
<h3>anone</h3>
</div><!--akhir class Footer Kiri-->
</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>
</div>
</div><!--akhir class buaya-->
<div class="footer">
<p>@Copyright 2020 | PMD Sesawi- AK | <a href="https://PMD Sesawi-AK.com" target="_blank">SR.Pakpahan,SST</a></p>
</div><!--akhir class footer-->
</body>
</html>
Code CSS:
* {margin: 0; padding: 0;}
body {
width: 900px;
margin: auto;
}
header {
width: 900px;
height: 240px;
}
header img {
width: 900px;
height: 240px;
}
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;
}
/* 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 Footer Kiri */
.buaya .widget .footerKiri {
margin: 0 px;
border-top: 5px solid #333;
height: 50px;
background-color: grey;
margin-top: 10px;
}
.buaya .widget .footerKiri h3 {
text-align: center;
margin: 10px 0 10px;
color: grey
}
/* akhir class Footer Kiri */
/* class Footer Kanan */
.footer {
width: 100%;
height: 50px;
background-color: grey;
margin-top: 5px;
position: relative;
margin-left: 245px;
width: 660px;
}
.footer p {
color: #fff;
position: absolute;
bottom: 12.5px;
left: 150px;
}
.footer p a {
text-decoration: none;
color: #fff;
}
.footer p a:hover {
color: #f90;
}
/* akhir class Footer Kanan */
Kesimpulan
Pada sisi bagian bawah kiri di sebelah kiri footerKanan (cara kita memandang home page) disitu dibiarkan kosong saja guna untuk kemudahan SEO (Search Engine Optimization) agar website kita mudah dan cepat ter-loading ke browser. Dan di atas bagian kosong tersebut adalah sisi sidebar kiri yang masih banyak kosong untuk kita tambahkan fasilitas/widget lainnya seperti membuat Komentar, dan sebagainya.
footer pada sebuah situs web tidak selalu hanya berupa hak cipta / copyright saja tapi juga ada yang menerapkan widget yang biasa digunakan untuk link-link situs yang tidak diterapkan dibagian menu seperti About Us – Contact Us – Advertising dan lainnya.
Ini semua tergantung dari bagaimana kalian ingin membuat situs web kalian karena ada juga beberapa situs web yang tidak menggunakan widget dibagian footer. Jika ingin menggunakan widget, bisa ikuti tutorial part-part sebelumnya yang menjelaskan tentang sidebar & widget kemudian kalian bisa terapkan tutorial itu di bagian widget.
Selamat mencoba !
Jika dirasa sudah paham part 1 Sesi 2 ini, silahkan tunggu dilanjutkan di Part 2.
PART 2
Membuat kolom Komentar
Setelah menyelesaikan tutorial membuat website sederhana HTML CSS Part 1 Sesi2, sekarang kita lanjutkan ke Part 2. Pada tutorial kali ini akan menjelaskan bagaimana cara membuat kolom Komentar sederhana yang tidak jauh beda dengan kontak form yang ditempelkan di sidebar sebelah kiri yang sudah dibuat sebelumnya.
Di tutorial sebelumnya sudah diselesaikan div class subscribe yang berisikan kontak form (nama, email dan kirim), nah sekarang kita tambahkan class berikutnya yaitu membuat class komentar, tinggal masukkan code HTML berikut didalam div class komentar, tuliskan di sesudah </div><!--akhir class subscribe--> atau di sebelum <div class="footerKiri"> sebagai berikut:
<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 class komentar ini dikustomisasi dengan memberi gayanya pada CSS,
tuliskan code CSS berikut ini di sesudah /* akhir class subscribe */ atau di sebelum /* class Footer Kiri */ yaitu sebagai berikut:
width: 100%;
margin: 0 0 5px;
border-top: 5px solid #333;
padding-top: 20px;
}
.buaya .widget .komentar form {
width: 100%;
padding: 0 5px 0;
}
.buaya .widget .komentar h3 {
text-align: center;
margin: 0px 0 10px;
}
.buaya .widget .komentar input[type="text"] {
width: 95%;
height: 20px;
margin-bottom: 5px;
}
.buaya .widget .komentar input[type="email"] {
width: 95%;
height: 20px;
margin-bottom: 5px;
}
.buaya .widget .komentar textarea {
width: 95%;
max-width: 95%;
height: 200px;
max-height: 250px;
margin-bottom: 5px;
}
.buaya .widget .komentar input[type="submit"] {
padding: 5px;
cursor: pointer;
margin-bottom: 5px;
margin-left: 50px;
}
/* akhir class komentar */
Seperti biasa, tag h3 diatas merupakan judul untuk widget komentar ini silahkan tentukan judul kalian sendiri seperti"Hubungi kami". Pada pembuatan form HTML memerlukan tag <form>, ini hanya sekedar contoh saja form yang sangat sederhana. Selengkapnya lihat tutorial tentang membuat form HTML CSS.
Seperti biasa berikan margin pada pembungkus dan border-top sebagai garis pemisah, silahkan tentukan warna garis sesuai selera kalian.
Pada lebar input form ini saya berikan width: 95% dan height: 350px, cukup untuk membuat isi komentar yang singkat. Widtg 95% agar tidak terlalu rapat sisinya dengan batas widget, silahkan tentukan lebar sesuai keperluan website kalian masing-masing.
Pada input type submit / tombol kirim terdapat cursor:pointer artinya ketika mouse menyentuh bagian ini akan berubah menjadi pointer (jari) bukan panah seperti biasanya, silahkan dihapus dan lihat perbedaannya.
Setelah berhasil membuat kode diatas, silahkan Save dan lihat hasilnya di browser. (lihat gambar)
Gimana, masih mau lanjut ? 😀
Sekarang, jika tidak ada code yang diubah dari part 1 sampai part 2 akan seperti ini:
Code HTML:
<!doctype html>
<html>
<head>
<title>Membuat Website - HTML PMD Sesawi-AK</title>
<link rel="shortcut icon" type="image/png" href="images/favicon.ico"/>
<link href="css/style1.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<img src="images/logo pmd.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>Media Sosial, Let's Connect !</h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon 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 subscribe-->
<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 class="footerKiri">
<h3>anone</h3>
</div><!--akhir class Footer Kiri-->
</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>
</div>
</div><!--akhir class buaya-->
<div class="footer">
<p>@Copyright 2020 | PMD Sesawi- AK | <a href="https://PMD Sesawi-AK.com" target="_blank">SR.Pakpahan,SST</a></p>
</div><!--akhir class footer-->
</body>
</html>
Code CSS:
* {margin: 0; padding: 0;}
body {
width: 900px;
margin: auto;
}
header {
width: 900px;
height: 240px;
}
header img {
width: 900px;
height: 240px;
}
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;
}
/* 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 */
width: 100%;
margin: 0 0 5px;
border-top: 5px solid #333;
padding-top: 20px;
}
.buaya .widget .komentar form {
width: 100%;
padding: 0 5px 0;
}
.buaya .widget .komentar h3 {
text-align: center;
margin: 0px 0 10px;
}
.buaya .widget .komentar input[type="text"] {
width: 95%;
height: 20px;
margin-bottom: 5px;
}
.buaya .widget .komentar input[type="email"] {
width: 95%;
height: 20px;
margin-bottom: 5px;
}
.buaya .widget .komentar textarea {
width: 95%;
max-width: 95%;
height: 200px;
max-height: 250px;
margin-bottom: 5px;
}
.buaya .widget .komentar input[type="submit"] {
padding: 5px;
cursor: pointer;
margin-bottom: 5px;
margin-left: 50px;
}
/* akhir class komentar */
/* class Footer Kiri */
.buaya .widget .footerKiri {
margin: 0 px;
border-top: 5px solid #333;
height: 50px;
background-color: grey;
margin-top: 10px;
}
.buaya .widget .footerKiri h3 {
text-align: center;
margin: 10px 0 10px;
color: grey
}
/* akhir class Footer Kiri */
/* class Footer Kanan */
.footer {
width: 100%;
height: 50px;
background-color: grey;
margin-top: 5px;
position: relative;
margin-left: 245px;
width: 660px;
}
.footer p {
color: #fff;
position: absolute;
bottom: 12.5px;
left: 150px;
}
.footer p a {
text-decoration: none;
color: #fff;
}
.footer p a:hover {
color: #f90;
}
/* akhir class Footer Kanan */
Kesimpulan
Pada tutorial part 2 Sesi 2 hanya membuat kolom Komentar saja di sidebar yang sudah disediakan pada part-part sebelumnya. Kolom komentar ini hanya sekedar contoh dan terbilang sangat sederhana, silahkan buat bentuk yang lebih menarik untuk website kalian dan tambahkan bidang / field lain jika memang diperlukan.
Selamat mencoba !
Jika dirasa sudah paham part 1 dan 2 ini, silahkan tunggu dilanjutkan di Part 3 Sesi 2.
PART 3
Folder dokumen yang telah berisi file gbr1.jpg, dan file TUTORIAL
CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm , ditempatkan
sejajar dengan file membuatwebsite.html atau dengan folder css yang
telah kita buat sebelumnya.
Selanjutnya artikel TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1) tersebut akan kita masukkan ke class widget Artikel Terlaris Satu, Ingat code HTML di widget class Artikel Terlaris yang sebelumnya adalah ini:
<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><br/>
lalu hapus code HTML tersebut, ganti dengan code HTML berikut ini:
<div class="artikelTerlaris">
<h3>Artikel Terlaris</h3>
<a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm" > <img src="dokumen/gbr1.jpg" ><h4>Tutorial Music Studio FL 11</h4></a> <p>Fungsi studio musik adalah wahana para musisi untuk berproduksi atau menghasilkann musik, baik dalam menggambar, mengedit, membangkitkan/pemakaian instrumen, memberi efek pada instrumen atau memixer musik, dan sebagainya sehingga terciptalah lagu yang merdu, nyaring berkualitas tinggi yang layak go publik di terima masyarakat dunia. <a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm"> KLIK </p><br/>
Perhatikan pada kode tag <img src="images/empat.jpg"> telah digantikan dengan code <img src="dokumen/gbr1.jpg" > lalu dimasukkan ke tag <a href ...>... </a> dengan tujuan agar gambar bisa di klik dan link membuka dokumen dan tampil di browser. Kemudian pada code HTML itu juga terdapat <a href ... yang fungsinya memanggil dokumen artikel TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm yang tersimpan di folder dokumen (perhatikan cara penulisan nama filenya harus tepat dengan nama file yang sebenarnya, huruf besar, huruf kecil, dan tanda baca lainnya), dan bila di klik teks Tutorial Music Studio FL 11 maka akan link membuka dokumen dan tampil di browser.
Dan di dalam paragraf <p ...</p> juga terdapat <a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm"> KLIK yang fungsinya sama jika teks KLIK kita klik maka akan link memanggil artikel dan menampilkannya di browser.
Setelah berhasil membuat kode diatas, silahkan Save dan lihat hasilnya di browser. (lihat gambar)
Masih bingung ? Jika sudah paham, silahkan lanjutkan ke part 4.
Sekarang, jika tidak ada code yang diubah dari part 1 sampai part 3 akan seperti ini:
Code HTML:
<!doctype html>
<html>
<head>
<title>Membuat Website - HTML PMD Sesawi-AK</title>
<link rel="shortcut icon" type="image/png" href="images/favicon.ico"/>
<link href="css/style1.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<img src="images/logo pmd.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>
<a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm" > <img src="dokumen/gbr1.jpg" ><h4>Tutorial Music Studio FL 11</h4></a> <p>Fungsi studio musik adalah wahana para musisi untuk berproduksi atau menghasilkann musik, baik dalam menggambar, mengedit, membangkitkan/pemakaian instrumen, memberi efek pada instrumen atau memixer musik, dan sebagainya sehingga terciptalah lagu yang merdu, nyaring berkualitas tinggi yang layak go publik di terima masyarakat dunia. <a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm"> KLIK </p><br/>
<h3>Media Sosial, Let's Connect !</h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon 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 subscribe-->
<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 class="footerKiri"> <h3>anone</h3>
</div><!--akhir class Footer Kiri-->
</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>
</div>
</div><!--akhir class buaya-->
<div class="footer">
<p>@Copyright 2020 | PMD Sesawi- AK | <a href="https://PMD Sesawi-AK.com" target="_blank">SR.Pakpahan,SST</a></p>
</div><!--akhir class footer-->
</body>
</html>
Code CSS:
masih tetap sama dengan yang sebelumnya.
Kesimpulan
Pada tutorial part 3 Sesi 2 hanya membuat artikel yang berisi gambar dan teksnya di sidebar yang sudah disediakan pada part-part sebelumnya. lalu bila di klik gambar atau teks itu maka artikel akan tampil di browser. Artikel yang dibuat terbilang sangat sederhana dikerjakan di MS Word agar kita tidak perlu capek-capek lagi mengetikannya di code editor (Sublime Text) dan di code CSS.
Bila mau lebih menarik lagi silahkan membuat halaman detail / single page yang digunakan untuk halaman single blog / detail dari sebuah artikel sebagai halaman halaman pos / blog tunggal yang berisi konten / artikel, bila dibuka di browser.
Selamat mencoba !
Jika dirasa sudah paham part 3 ini, silahkan tunggu dilajurkan di Part 4 Sesi 2.
PART 2
Membuat kolom Komentar
Setelah menyelesaikan tutorial membuat website sederhana HTML CSS Part 1 Sesi2, sekarang kita lanjutkan ke Part 2. Pada tutorial kali ini akan menjelaskan bagaimana cara membuat kolom Komentar sederhana yang tidak jauh beda dengan kontak form yang ditempelkan di sidebar sebelah kiri yang sudah dibuat sebelumnya.
Di tutorial sebelumnya sudah diselesaikan div class subscribe yang berisikan kontak form (nama, email dan kirim), nah sekarang kita tambahkan class berikutnya yaitu membuat class komentar, tinggal masukkan code HTML berikut didalam div class komentar, tuliskan di sesudah </div><!--akhir class subscribe--> atau di sebelum <div class="footerKiri"> sebagai berikut:
<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 class komentar ini dikustomisasi dengan memberi gayanya pada CSS,
tuliskan code CSS berikut ini di sesudah /* akhir class subscribe */ atau di sebelum /* class Footer Kiri */ yaitu sebagai berikut:
/* class Komentar */
.buaya .widget .komentar {width: 100%;
margin: 0 0 5px;
border-top: 5px solid #333;
padding-top: 20px;
}
.buaya .widget .komentar form {
width: 100%;
padding: 0 5px 0;
}
.buaya .widget .komentar h3 {
text-align: center;
margin: 0px 0 10px;
}
.buaya .widget .komentar input[type="text"] {
width: 95%;
height: 20px;
margin-bottom: 5px;
}
.buaya .widget .komentar input[type="email"] {
width: 95%;
height: 20px;
margin-bottom: 5px;
}
.buaya .widget .komentar textarea {
width: 95%;
max-width: 95%;
height: 200px;
max-height: 250px;
margin-bottom: 5px;
}
.buaya .widget .komentar input[type="submit"] {
padding: 5px;
cursor: pointer;
margin-bottom: 5px;
margin-left: 50px;
}
/* akhir class komentar */
Seperti biasa, tag h3 diatas merupakan judul untuk widget komentar ini silahkan tentukan judul kalian sendiri seperti"Hubungi kami". Pada pembuatan form HTML memerlukan tag <form>, ini hanya sekedar contoh saja form yang sangat sederhana. Selengkapnya lihat tutorial tentang membuat form HTML CSS.
Seperti biasa berikan margin pada pembungkus dan border-top sebagai garis pemisah, silahkan tentukan warna garis sesuai selera kalian.
Pada lebar input form ini saya berikan width: 95% dan height: 350px, cukup untuk membuat isi komentar yang singkat. Widtg 95% agar tidak terlalu rapat sisinya dengan batas widget, silahkan tentukan lebar sesuai keperluan website kalian masing-masing.
Pada input type submit / tombol kirim terdapat cursor:pointer artinya ketika mouse menyentuh bagian ini akan berubah menjadi pointer (jari) bukan panah seperti biasanya, silahkan dihapus dan lihat perbedaannya.
Setelah berhasil membuat kode diatas, silahkan Save dan lihat hasilnya di browser. (lihat gambar)
Dengan
menambahkan class komentar di atas class footer kiri yang di sidebar
kiri, maka penyesuaian tata letak footer kiri akan bergeser ke bawah.
Jangan sampai salah meletakkan code HTMLnya, jika code HTMLclass
komentar diletakkan di bawah class footer kiri maka nanti tata letak
kolom komentar akan berada di bawah footer kiri, jangan salah ya.
Sekarang, jika tidak ada code yang diubah dari part 1 sampai part 2 akan seperti ini:
Code HTML:
<!doctype html>
<html>
<head>
<title>Membuat Website - HTML PMD Sesawi-AK</title>
<link rel="shortcut icon" type="image/png" href="images/favicon.ico"/>
<link href="css/style1.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<img src="images/logo pmd.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>Media Sosial, Let's Connect !</h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon 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 subscribe-->
<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 class="footerKiri">
<h3>anone</h3>
</div><!--akhir class Footer Kiri-->
</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>
</div>
</div><!--akhir class buaya-->
<div class="footer">
<p>@Copyright 2020 | PMD Sesawi- AK | <a href="https://PMD Sesawi-AK.com" target="_blank">SR.Pakpahan,SST</a></p>
</div><!--akhir class footer-->
</body>
</html>
Code CSS:
* {margin: 0; padding: 0;}
body {
width: 900px;
margin: auto;
}
header {
width: 900px;
height: 240px;
}
header img {
width: 900px;
height: 240px;
}
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;
}
/* 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 Komentar */
.buaya .widget .komentar {width: 100%;
margin: 0 0 5px;
border-top: 5px solid #333;
padding-top: 20px;
}
.buaya .widget .komentar form {
width: 100%;
padding: 0 5px 0;
}
.buaya .widget .komentar h3 {
text-align: center;
margin: 0px 0 10px;
}
.buaya .widget .komentar input[type="text"] {
width: 95%;
height: 20px;
margin-bottom: 5px;
}
.buaya .widget .komentar input[type="email"] {
width: 95%;
height: 20px;
margin-bottom: 5px;
}
.buaya .widget .komentar textarea {
width: 95%;
max-width: 95%;
height: 200px;
max-height: 250px;
margin-bottom: 5px;
}
.buaya .widget .komentar input[type="submit"] {
padding: 5px;
cursor: pointer;
margin-bottom: 5px;
margin-left: 50px;
}
/* akhir class komentar */
/* class Footer Kiri */
.buaya .widget .footerKiri {
margin: 0 px;
border-top: 5px solid #333;
height: 50px;
background-color: grey;
margin-top: 10px;
}
.buaya .widget .footerKiri h3 {
text-align: center;
margin: 10px 0 10px;
color: grey
}
/* akhir class Footer Kiri */
/* class Footer Kanan */
.footer {
width: 100%;
height: 50px;
background-color: grey;
margin-top: 5px;
position: relative;
margin-left: 245px;
width: 660px;
}
.footer p {
color: #fff;
position: absolute;
bottom: 12.5px;
left: 150px;
}
.footer p a {
text-decoration: none;
color: #fff;
}
.footer p a:hover {
color: #f90;
}
/* akhir class Footer Kanan */
Kesimpulan
Pada tutorial part 2 Sesi 2 hanya membuat kolom Komentar saja di sidebar yang sudah disediakan pada part-part sebelumnya. Kolom komentar ini hanya sekedar contoh dan terbilang sangat sederhana, silahkan buat bentuk yang lebih menarik untuk website kalian dan tambahkan bidang / field lain jika memang diperlukan.
Selamat mencoba !
Jika dirasa sudah paham part 1 dan 2 ini, silahkan tunggu dilanjutkan di Part 3 Sesi 2.
PART 3
Salah
satu tips SEO (Search Engine Optimization) untuk meningkatkan ranking
search engine adalah dengan membuat konten website yang berkualitas. Membuat
dan mempublikasikan konten yang berkualitas merupakan fokus utama dari
strategi White Hat SEO, membuat konten yang berkualitas berarti seperti membuatat Konten yang Panjang dan Mendetail.
Riset
terbaru membuktikan bahwa membuat konten yang terlalu umum tidak lagi
efektif untuk meningkatkan ranking suatu website. Berdasarkan studi dari
search engine ranking factors menunjukkan bahwa adanya relasi yang kuat
antara in-depth content (konten yang mendetail) dengan search engine
ranking.
Untuk
membuat konten panjang dan mendetail, Isi website dianjurkan memuat
konten yang berisi berbagai macam konten yang mampu membahas beragam hal
dalam satu topik. Buat konten dengan 4000 kata lebih yang memaparkan
informasi yang meliputi seluruh topik yang hendak dibahas. Hindari
membuat topik umum yang memaparkan list atau daftar-daftar umum pada
sebuah topik.
Pada
rancangan website ini, di sidebar kiri pada widget class Artikel
Terlaris Satu akan kita ganti gambar dan isi artikelnya dengan artikel
yang baru TUTORIAL
CARA MEMBUAT LAGU DI STUDIO MUSIK. Tambahkan sebuah gambar lagi yang
sesuai dengan isi artikel disini, dan siapkan artikelnya. Semua artikel
dan semua gambar yang mendukung teks artikel harus dibuat dalam satu
folder agar pengelolaan filenya teratur dan rapi. Di sini saya membuat
folder baru diberi nama dokumen, folder dokumen ini berisikan gambar
file gbr1 yang berekstensi jpg, dan file artikel nama filenya TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1) yang berektensi htm, (perhatikan ekstensinya htm, bukanlah html).
dokumen artikel TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1) ini sebelumnya adalah hasil dari MSWord
sehingga ia berekstensi docx, agar dokumen word bisa dibuka di Web HTML
, maka ekstensi docx dokumen ini harus dikonversikan ke ekstensi htm,
yaitu dengan cara :
Langkah 1. Buka dokumen MS Word yang ingin ditampilkan dengan Microsoft Office Word (file dokumen saya disini adalah TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).
Langkah 2. Klik Office button > Save As.
Langkah 3. Pilih Save as Type, yaitu Web Page Filtered, ini untuk mengubah typenya Docx menjadi Web Type, Filtered. sehingga dokumen berekstensi htm.
Langkah 4. Klik Save.
Langkah 5. Siap deh, tinggal di masukkan aja tuh ke scrip HTML
Selanjutnya artikel TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1) tersebut akan kita masukkan ke class widget Artikel Terlaris Satu, Ingat code HTML di widget class Artikel Terlaris yang sebelumnya adalah ini:
<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><br/>
lalu hapus code HTML tersebut, ganti dengan code HTML berikut ini:
<div class="artikelTerlaris">
<h3>Artikel Terlaris</h3>
<a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm" > <img src="dokumen/gbr1.jpg" ><h4>Tutorial Music Studio FL 11</h4></a> <p>Fungsi studio musik adalah wahana para musisi untuk berproduksi atau menghasilkann musik, baik dalam menggambar, mengedit, membangkitkan/pemakaian instrumen, memberi efek pada instrumen atau memixer musik, dan sebagainya sehingga terciptalah lagu yang merdu, nyaring berkualitas tinggi yang layak go publik di terima masyarakat dunia. <a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm"> KLIK </p><br/>
Perhatikan pada kode tag <img src="images/empat.jpg"> telah digantikan dengan code <img src="dokumen/gbr1.jpg" > lalu dimasukkan ke tag <a href ...>... </a> dengan tujuan agar gambar bisa di klik dan link membuka dokumen dan tampil di browser. Kemudian pada code HTML itu juga terdapat <a href ... yang fungsinya memanggil dokumen artikel TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm yang tersimpan di folder dokumen (perhatikan cara penulisan nama filenya harus tepat dengan nama file yang sebenarnya, huruf besar, huruf kecil, dan tanda baca lainnya), dan bila di klik teks Tutorial Music Studio FL 11 maka akan link membuka dokumen dan tampil di browser.
Dan di dalam paragraf <p ...</p> juga terdapat <a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm"> KLIK yang fungsinya sama jika teks KLIK kita klik maka akan link memanggil artikel dan menampilkannya di browser.
Setelah berhasil membuat kode diatas, silahkan Save dan lihat hasilnya di browser. (lihat gambar)
Dengan cara yang sama di atas bisa diterapkan untuk mengisi konten widget class Artikel Terlaris Dua, dan Terlaris Tiga.
Sekarang, jika tidak ada code yang diubah dari part 1 sampai part 3 akan seperti ini:
Code HTML:
<!doctype html>
<html>
<head>
<title>Membuat Website - HTML PMD Sesawi-AK</title>
<link rel="shortcut icon" type="image/png" href="images/favicon.ico"/>
<link href="css/style1.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<img src="images/logo pmd.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>
<a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm" > <img src="dokumen/gbr1.jpg" ><h4>Tutorial Music Studio FL 11</h4></a> <p>Fungsi studio musik adalah wahana para musisi untuk berproduksi atau menghasilkann musik, baik dalam menggambar, mengedit, membangkitkan/pemakaian instrumen, memberi efek pada instrumen atau memixer musik, dan sebagainya sehingga terciptalah lagu yang merdu, nyaring berkualitas tinggi yang layak go publik di terima masyarakat dunia. <a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm"> KLIK </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"><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-->
<h3>Media Sosial, Let's Connect !</h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon 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 subscribe-->
<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 class="footerKiri"> <h3>anone</h3>
</div><!--akhir class Footer Kiri-->
</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>
</div>
</div><!--akhir class buaya-->
<div class="footer">
<p>@Copyright 2020 | PMD Sesawi- AK | <a href="https://PMD Sesawi-AK.com" target="_blank">SR.Pakpahan,SST</a></p>
</div><!--akhir class footer-->
</body>
</html>
Code CSS:
masih tetap sama dengan yang sebelumnya.
Kesimpulan
Pada tutorial part 3 Sesi 2 hanya membuat artikel yang berisi gambar dan teksnya di sidebar yang sudah disediakan pada part-part sebelumnya. lalu bila di klik gambar atau teks itu maka artikel akan tampil di browser. Artikel yang dibuat terbilang sangat sederhana dikerjakan di MS Word agar kita tidak perlu capek-capek lagi mengetikannya di code editor (Sublime Text) dan di code CSS.
Bila mau lebih menarik lagi silahkan membuat halaman detail / single page yang digunakan untuk halaman single blog / detail dari sebuah artikel sebagai halaman halaman pos / blog tunggal yang berisi konten / artikel, bila dibuka di browser.
Selamat mencoba !
Jika dirasa sudah paham part 3 ini, silahkan tunggu dilajurkan di Part 4 Sesi 2.
PART 4
Pada part 3 kita telah membuat konten widget class Artikel Terlaris, sekarang pada part 4 ini kita akan mengisi konten class recomended Artikel Disarankan. Pertama tama kita membuat untuk konten class recomendedKiri.
<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-->
hapus code HTML tersebut di atas, dan gantikan dengan code HTML berikut ini:
<div class="recomendedKiri">
<h3><a href="single-post.html"><img src="dokumen/gbr2.png">Luni Solar Kreator Allah</a></h3>
<p>Pada mulanya Allah menciptakan bumi dan langit, langit dan bumi yang masih kosong dan gelap gulita merupakan tempat yang diyakini memuat kehidupan dimana Roh Allah melayang layang diatas permukaan air dan Allah mulai berkarya menciptakan segala isi alam semesta di bumi dan di langit. Pada tempat dan isinya tempat itu (langit dan bumi), Allah sebagai Pencipta Maha Agung dan Maha Kuasa menciptakan segala sesuatunya dengan rapi tersusun membentuk suatu jalinan rantai jalan kehidupan dari ujung bumi menuju sorga yang didalam penciptaannya itu Allah mulai merealisasikan rencanaNya SEMUA UNTUK SATU, semua untuk Allah di Sorga. <a href="single-post.html"><strong>Baca Selengkapnya</strong></a></p>
</div><!--akhir class recomendedKiri-->
Pada part 4 ini kita akan membuat halaman detail / single page yang digunakan untuk halaman single blog (detail dari sebuah artikel) sebagai halaman pos / blog tunggal yang berisi konten / artikel.
Langkah awal kita membuat file HTML baru dengan nama single pos, ini pasti berekstensi html, dari halaman beranda (home page) yaitu file membuatwebsite.html kita copy sebagian code HTML home page-nya untuk bagian-bagian yang disamakan dengan halaman utama / homepage bagi halaman single pos, yaitu seperti bagian menu / navigasi dan footer. Buka kembali codingan halaman beranda / homepage sebelumnya yang sudah dibuat, kemudian salin code dari paling atas (dari <!doctype html> ) hingga sampai akhir menu (hingga </menu> ), jadi seperti ini:
<!doctype html>
<html>
<head>
<title>Membuat Website Sederhana - Single Post</title>
<link href="css/style1.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<img src="images/logo pmd.jpg">
</header>
<menu>
<li><a href="membuatwebsite1.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 page (jika tidak ada yang diubah), lalu pastekan di lembar kerja baru pada code editor (Sublime Text) kemudian Save dan pastinya beri nama filenya yaitu: single pos , file ini berekstensi html dan disimpan di sejajar dengan file membuatwebsite.html.
Karena ini untuk halaman tunggal sebuah pos maka berinama sesuai judul pos / artikelnya misalnya judul artikel ini Luni Solar Kreator Allah, maka nama file ini juga tidak jauh seperti itu dan ini mempengaruhi SEO juga ketika di online kan, di sini nama file saya buat adallah PEMBAHARUAN KALENDER 1, 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 class buaya termasuk juga bagian Footer, penutup tag /body dan penutup tag /html karena tadi kita salin code diatas sebelum di tutup body dan html nya.
<div class="buaya">
<div class="widget">
<div class="artikelTerlaris">
<h3>Artikel Terlaris</h3>
<a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm" > <img src="dokumen/gbr1.jpg" ><h4>Tutorial Music Studio FL 11</h4></a> <p>Fungsi studio musik adalah wahana para musisi untuk berproduksi atau menghasilkann musik, baik dalam menggambar, mengedit, membangkitkan/pemakaian instrumen, memberi efek pada instrumen atau memixer musik, dan sebagainya sehingga terciptalah lagu yang merdu, nyaring berkualitas tinggi yang layak go publik di terima masyarakat dunia. <a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm"> KLIK </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>Media Sosial, Let's Connect !</h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon 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 subscribe-->
<div class="komentar">
<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 class="footerKiri">
<h3>anone</h3>
</div><!--akhir class Footer Kiri-->
</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>
</div>
</div><!--akhir class buaya-->
<div class="footer">
<p>@Copyright 2020 | PMD Sesawi- AK | <a href="https://PMD Sesawi-AK.com" target="_blank">SR.Pakpahan,SST</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 (</menu>) tadi dan code nya menjadi seperti ini jika kalian tidak melakukan perubahan di tutorial-tutorial sebelumnya.
<!doctype html>
<html>
<head>
<title>Membuat Website Sederhana - Single Post</title>
<link href="css/style1.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<img src="images/logo pmd.jpg">
</header>
<menu>
<li><a href="membuatwebsite1.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>
<a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm" > <img src="dokumen/gbr1.jpg" ><h4>Tutorial Music Studio FL 11</h4></a> <p>Fungsi studio musik adalah wahana para musisi untuk berproduksi atau menghasilkann musik, baik dalam menggambar, mengedit, membangkitkan/pemakaian instrumen, memberi efek pada instrumen atau memixer musik, dan sebagainya sehingga terciptalah lagu yang merdu, nyaring berkualitas tinggi yang layak go publik di terima masyarakat dunia. <a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm"> KLIK </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>Media Sosial, Let's Connect !</h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon 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 subscribe-->
<div class="komentar">
<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 class="footerKiri">
<h3>anone</h3>
</div><!--akhir class Footer Kiri-->
</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>
</div>
</div><!--akhir class buaya-->
<div class="footer">
<p>@Copyright 2020 | PMD Sesawi- AK | <a href="https://PMD Sesawi-AK.com" target="_blank">SR.Pakpahan,SST</a></p>
</div><!--akhir class footer-->
</body>
</html>
Silahkan Save dan lihat single post ini di browser, sudah hampir mirip dengan bagian Home Page, 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 , class Artikel terbaru kita hapus
lalu digantikan dengan class single-pos, yaitu dengan code :
<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-->
Code HTML di atas kita masukkan ke HTML single pos.html dengan cara menggantikan 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 Page, melainkan halaman pos tunggal yang menampilkan detail artikel.
Code HTML hasil gabungan dari sebagian halaman home page dan halaman utuh single pos tersebut adalah menjadi seperti berikut ini:
<!doctype html>
<html>
<head>
<title>Membuat Website Sederhana - Single Post</title>
<link href="css/style1.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<img src="images/logo pmd.jpg">
</header>
<menu>
<li><a href="membuatwebsite1.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>
<a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm" > <img src="dokumen/gbr1.jpg" ><h4>Tutorial Music Studio FL 11</h4></a> <p>Fungsi studio musik adalah wahana para musisi untuk berproduksi atau menghasilkann musik, baik dalam menggambar, mengedit, membangkitkan/pemakaian instrumen, memberi efek pada instrumen atau memixer musik, dan sebagainya sehingga terciptalah lagu yang merdu, nyaring berkualitas tinggi yang layak go publik di terima masyarakat dunia. <a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm"> KLIK </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>Media Sosial, Let's Connect !</h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon 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 subscribe-->
<div class="komentar">
<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>
</form>
</div><!--akhir class komentar-->
<div class="footerKiri">
<h3>anone</h3>
</div><!--akhir class Footer Kiri-->
</div>
<div class="single-post">
<a href=""><img src="images/dua.jpg"></a>
<a href="dokumen/PEMBAHARUAN KALENDER 1.htm"><h2>Luni Solar Kreator Allah</h2></a>
<p>
“PEMBAHARUAN KALENDER :
</div>
</div><!--akhir class buaya-->
<div class="footer">
<p>@Copyright 2020 | PMD Sesawi- AK | <a href="https://PMD Sesawi-AK.com" target="_blank">SR.Pakpahan,SST</a></p>
</div><!--akhir class footer-->
</body>
</html>
Perhatikan pada kode tag <img src="images/dua.jpg"> telah digantikan dengan code <img src="dokumen/gbr2.png" > lalu dimasukkan ke tag <a href ...>... </a> dengan tujuan agar gambar bisa di klik dan link membuka dokumen dan tampil di browser. Kemudian pada code HTML itu juga terdapat <a href ... yang fungsinya memanggil dokumen artikel yang berjudul Luni Solar Kreator Allah, yang nama filenya PEMBAHARUAN KALENDER 1.htm tersimpan di folder dokumen (perhatikan cara penulisan nama filenya harus tepat dengan nama file yang sebenarnya, huruf besar, huruf kecil, dan tanda baca lainnya), dan bila di klik teks Luni Solar Kreator Allah maka akan link membuka dokumen dan tampil di browser.
Dan di dalam paragraf <p ...</p> juga terdapat <a href="dokumen/PEMBAHARUAN KALENDER 1.htm"> Baca Lebih Lanjut yang fungsinya sama jika teks Baca Lebih Lanjut ini kita klik maka akan link memanggil artikel dan menampilkannya di browser.
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 diperhatikan 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)
Itulah
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.
Pada part 3 kita telah membuat konten widget class Artikel Terlaris, sekarang pada part 4 ini kita akan mengisi konten class recomended Artikel Disarankan. Pertama tama kita membuat untuk konten class recomendedKiri.
Pada
folder dokumen, kita tambahkan file gambar yang nama filenya diberi
gbr2 yang berekstensi png, (pakai gambar jenis png saja ya, agar lebih
mudah terloading di browser bila dibanding jenis jpg atau jpeg). Dan
pada folder dokumen itu juga kita tambahkan file artikel nama file saya di sini adalah PEMBAHARUAN KALENDER 1 yang berektensi htm, (perhatikan ekstensinya htm, bukanlah html).
Gambar 2 (gbr2) dan dokumen artikel PEMBAHARUAN KALENDER 1.htm ini akan kita masukkan ke class recomendedKiri , ingat code HTML di widget class recomendedKiri yang sebelumnya adalah ini:
<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-->
hapus code HTML tersebut di atas, dan gantikan dengan code HTML berikut ini:
<div class="recomendedKiri">
<h3><a href="single-post.html"><img src="dokumen/gbr2.png">Luni Solar Kreator Allah</a></h3>
<p>Pada mulanya Allah menciptakan bumi dan langit, langit dan bumi yang masih kosong dan gelap gulita merupakan tempat yang diyakini memuat kehidupan dimana Roh Allah melayang layang diatas permukaan air dan Allah mulai berkarya menciptakan segala isi alam semesta di bumi dan di langit. Pada tempat dan isinya tempat itu (langit dan bumi), Allah sebagai Pencipta Maha Agung dan Maha Kuasa menciptakan segala sesuatunya dengan rapi tersusun membentuk suatu jalinan rantai jalan kehidupan dari ujung bumi menuju sorga yang didalam penciptaannya itu Allah mulai merealisasikan rencanaNya SEMUA UNTUK SATU, semua untuk Allah di Sorga. <a href="single-post.html"><strong>Baca Selengkapnya</strong></a></p>
</div><!--akhir class recomendedKiri-->
Pada part 4 ini kita akan membuat halaman detail / single page yang digunakan untuk halaman single blog (detail dari sebuah artikel) sebagai halaman pos / blog tunggal yang berisi konten / artikel.
Langkah awal kita membuat file HTML baru dengan nama single pos, ini pasti berekstensi html, dari halaman beranda (home page) yaitu file membuatwebsite.html kita copy sebagian code HTML home page-nya untuk bagian-bagian yang disamakan dengan halaman utama / homepage bagi halaman single pos, yaitu seperti bagian menu / navigasi dan footer. Buka kembali codingan halaman beranda / homepage sebelumnya yang sudah dibuat, kemudian salin code dari paling atas (dari <!doctype html> ) hingga sampai akhir menu (hingga </menu> ), jadi seperti ini:
<!doctype html>
<html>
<head>
<title>Membuat Website Sederhana - Single Post</title>
<link href="css/style1.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<img src="images/logo pmd.jpg">
</header>
<menu>
<li><a href="membuatwebsite1.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 page (jika tidak ada yang diubah), lalu pastekan di lembar kerja baru pada code editor (Sublime Text) kemudian Save dan pastinya beri nama filenya yaitu: single pos , file ini berekstensi html dan disimpan di sejajar dengan file membuatwebsite.html.
Karena ini untuk halaman tunggal sebuah pos maka berinama sesuai judul pos / artikelnya misalnya judul artikel ini Luni Solar Kreator Allah, maka nama file ini juga tidak jauh seperti itu dan ini mempengaruhi SEO juga ketika di online kan, di sini nama file saya buat adallah PEMBAHARUAN KALENDER 1, 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 class buaya termasuk juga bagian Footer, penutup tag /body dan penutup tag /html karena tadi kita salin code diatas sebelum di tutup body dan html nya.
<div class="buaya">
<div class="widget">
<div class="artikelTerlaris">
<h3>Artikel Terlaris</h3>
<a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm" > <img src="dokumen/gbr1.jpg" ><h4>Tutorial Music Studio FL 11</h4></a> <p>Fungsi studio musik adalah wahana para musisi untuk berproduksi atau menghasilkann musik, baik dalam menggambar, mengedit, membangkitkan/pemakaian instrumen, memberi efek pada instrumen atau memixer musik, dan sebagainya sehingga terciptalah lagu yang merdu, nyaring berkualitas tinggi yang layak go publik di terima masyarakat dunia. <a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm"> KLIK </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>Media Sosial, Let's Connect !</h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon 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 subscribe-->
<div class="komentar">
<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 class="footerKiri">
<h3>anone</h3>
</div><!--akhir class Footer Kiri-->
</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>
</div>
</div><!--akhir class buaya-->
<div class="footer">
<p>@Copyright 2020 | PMD Sesawi- AK | <a href="https://PMD Sesawi-AK.com" target="_blank">SR.Pakpahan,SST</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 (</menu>) tadi dan code nya menjadi seperti ini jika kalian tidak melakukan perubahan di tutorial-tutorial sebelumnya.
<!doctype html>
<html>
<head>
<title>Membuat Website Sederhana - Single Post</title>
<link href="css/style1.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<img src="images/logo pmd.jpg">
</header>
<menu>
<li><a href="membuatwebsite1.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>
<a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm" > <img src="dokumen/gbr1.jpg" ><h4>Tutorial Music Studio FL 11</h4></a> <p>Fungsi studio musik adalah wahana para musisi untuk berproduksi atau menghasilkann musik, baik dalam menggambar, mengedit, membangkitkan/pemakaian instrumen, memberi efek pada instrumen atau memixer musik, dan sebagainya sehingga terciptalah lagu yang merdu, nyaring berkualitas tinggi yang layak go publik di terima masyarakat dunia. <a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm"> KLIK </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>Media Sosial, Let's Connect !</h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon 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 subscribe-->
<div class="komentar">
<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 class="footerKiri">
<h3>anone</h3>
</div><!--akhir class Footer Kiri-->
</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>
</div>
</div><!--akhir class buaya-->
<div class="footer">
<p>@Copyright 2020 | PMD Sesawi- AK | <a href="https://PMD Sesawi-AK.com" target="_blank">SR.Pakpahan,SST</a></p>
</div><!--akhir class footer-->
</body>
</html>
Silahkan Save dan lihat single post ini di browser, sudah hampir mirip dengan bagian Home Page, tapi tidak ada bagian Artikel Disarankan karena kita hanya copy dari mulai div class buaya saja yang artinya melawati bagian div class recommended.
<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-->
Code HTML di atas kita masukkan ke HTML single pos.html dengan cara menggantikan 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 Page, melainkan halaman pos tunggal yang menampilkan detail artikel.
Code HTML hasil gabungan dari sebagian halaman home page dan halaman utuh single pos tersebut adalah menjadi seperti berikut ini:
<!doctype html>
<html>
<head>
<title>Membuat Website Sederhana - Single Post</title>
<link href="css/style1.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<img src="images/logo pmd.jpg">
</header>
<menu>
<li><a href="membuatwebsite1.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>
<a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm" > <img src="dokumen/gbr1.jpg" ><h4>Tutorial Music Studio FL 11</h4></a> <p>Fungsi studio musik adalah wahana para musisi untuk berproduksi atau menghasilkann musik, baik dalam menggambar, mengedit, membangkitkan/pemakaian instrumen, memberi efek pada instrumen atau memixer musik, dan sebagainya sehingga terciptalah lagu yang merdu, nyaring berkualitas tinggi yang layak go publik di terima masyarakat dunia. <a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm"> KLIK </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>Media Sosial, Let's Connect !</h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon 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 subscribe-->
<div class="komentar">
<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>
</form>
</div><!--akhir class komentar-->
<div class="footerKiri">
<h3>anone</h3>
</div><!--akhir class Footer Kiri-->
</div>
<div class="single-post">
<a href=""><img src="images/dua.jpg"></a>
<a href="dokumen/PEMBAHARUAN KALENDER 1.htm"><h2>Luni Solar Kreator Allah</h2></a>
<p>
“PEMBAHARUAN KALENDER :
PEMBAHARUAN HARI MINGGU HARI KETUJUH YANG TERSEMBUNYI”
Oleh: S.R.Pakpahan,SST
<br></br> 1. PENDAHULUAN
<br></br>Pada
mulanya Allah menciptakan bumi dan langit, langit dan bumi yang masih
kosong dan gelap gulita merupakan tempat yang diyakini memuat kehidupan
dimana Roh Allah melayang layang diatas permukaan air dan Allah mulai
berkarya menciptakan segala isi alam semesta di bumi dan di langit. Pada
tempat dan isinya tempat itu (langit dan bumi), Allah sebagai Pencipta
Maha Agung dan Maha Kuasa menciptakan segala sesuatunya dengan rapi
tersusun membentuk suatu jalinan rantai jalan kehidupan dari ujung bumi
menuju sorga yang didalam penciptaannya itu Allah mulai merealisasikan
rencanaNya SEMUA UNTUK SATU, semua untuk Allah di Sorga.
<br></br>Pada
mulanya adalah Firman, Firman itu bersama sama dengan Allah dan Firman
itu adalah Allah, di hari pertama dengan FirmanNya Allah menciptakan
TERANG, lalu Allah melihat ciptaannya Terang itu baik dan benar, jadilah
petang dan pagi itulah hari PERTAMA. Dihari kedua dengan FirmanNya
Allah menciptakan CAKRAWALA (LANGIT) sebagai pembatas antara bagian
tempat yang di bawah dengan bagian yang di atas, lalu Allah melihat
ciptaanNya Cakrawala itu baik dan benar, jadilah petang dan pagi itulah
hari KEDUA. Di hari ketiga dengan FirmanNya Allah menciptakan LAUT,
DARAT DAN TUMBUH TUMBUHAN, lalu Allah melihat ciptaanNya laut, darat dan
tumbuh tumbuhan itu baik dan benar, jadilah petang dan pagi itulah hari
KETIGA.
<br></br>Keterangan
bahwa penciptaan dari hari pertama sampai hari ketiga itu merupakan
penciptaan tempat kehidupan Sorgawi, yang selanjutnya penciptaan di hari
keempat dengan FirmanNya Allah menciptakan BENDA BENDA TERANG yang
menempati di cakrawala, Benda terang yang besar dinamakan Matahari yang
menguasai siang dan matahari tersebut sebagai penentu waktu. Benda
terang yang kecil dinamakan Bulan yang menguasai malam dan bulan sebagai
penentu hari, Bulan dan matahari sama sama sebagai penentu masa dan
zaman. Juga ALLah menciptakan bersamaan bulan yaitu bintang bintang
yang menghiasi cakrawala di malam hari. Lalu Allah melihat ciptaanNya
Benda Terang itu baik dan benar, jadilah petang dan pagi itulah hari
KEEMPAT. Di hari kelima dengan FirmanNya Allah menciptakan IKAN-IKAN DAN SEGALA BINATANG AIR DAN BURUNG BURUNG DAN SEGALA BINATANG BERSAYAP YANG DAPAT TERBANG,
lalu Allah melihat ciptaanNya ikan-ikan dan burung burung itu baik dan
benar, jadilah petang dan pagi itulah hari KELIMA. Lalu dihari keenam
dengan FirmanNya Allah menciptakan HEWAN-HEWAN, SEGALA BINATANG DAN
TERNAK, Lalu Allah melihat ciptaanya itu hewan-hewan, segala binatang
dan ternak adalah baik dan benar, juga di hari yang sama kemudian dengan
FirmanNya Allah menciptakan MANUSIA menurut gambar dan rupa Allah dan
menghembuskan nafas hidup ke dalam lobang hidung manusia itu, lalu Allah
melihat ciptaaNya hewan-hewan, segala binatang dan ternak itu juga
manusia itu baik dan benar, jadilah petang dan pagi itulah hari KEENAM.
<br></br>Keterangan
bahwa penciptaan dari hari keempat sampai keenam itu merupakan
penciptaan isi dari tempat bumi dan langit yang dihari pertama sampai
hari ketiga yang telah diciptakan Allah itu, di hari keempat hingga
keenam penciptaan ini mulai adanya berkat Allah bagi kehidupan di alam
semesta. Dihari ketujuh lalu Allah berhenti dari bekerja, Allah
menguduskan dan memberkati hari KETUJUH itu.
<br></br>Hari
ketujuh yang zaman sekarang adalah hari minggu tetapi setelah
kebangkitan Yesus Kristus, hari ketujuh hari minggu itu telah menjadi
hari pertama yang diyakini sebagai suatu tanda antara manusia dan
keturunan selanjutnya dengan Allah. Hari ketujuh merupakan hari
peristirahatan hari khusus untuk Tuhan Allah dimana manusia mulai
mencari hubungan dengan penciptaNya dan beribadah menyembah Sang
pencipta Khalik langit dan bumi: Allah Maha Kuasa.
<br></br>Usaha
dan upaya manusia mencari hari kudus, hari penuh kemuliaan, hari penuh
berkat dari Tuhan, hari khusus untuk pemujaan Tuhan Allah, manusia
mencari hadirat Allah yang Maha Kudus terus dilakukan dari zaman dahulu
hingga saat ini. Hari kudus yang bagaimana yang sebenarnya dimana Allah
hadir untuk dipuja dan disembah, hari itu berkenan bagi sorga Allah,
seperti pada orang orang muslim menyakini bahwa hari kudus itu di hari
Jumat mereka beribadah menyembah Tuhan Allah, juga seperti pada orang
orang Kristen aliran adven yang menyakini hari kudus itu di hari sabtu,
lau mereka beribadah di hari itu untuk memuja dan menyembah Tuhan
Allah, tetapi lain halnya pada orang orang Kristen pengikut kristus
sejati menyakini bahwa hari kudus itu adalah di hari ketujuh hari minggu
yang juga hari Kebangkitan Yesus Kristus. Hari ketujuh itu diyakini
para pengikut Kristus sejati adalah hari kudus yang diberkati Tuhan,
hari yang penuh kemuliaan, hari kebangkitan dimana mereka sejenak
melepaskan segala masalah persoalan hidup kematerialan dan kerohaniannya
kembali menjumpai PenciptaNya untuk kembali suci sama segambar dan
serupa dengan Allah penciptaNya. Dalam seminggu yang telah terlalui enam
hari bekerja yang tak mungkin tak segala dosa dan kesalahan yang telah
diperbuat mereka memohon pengampunan dari Allah agar kepudaran rupa
manusianya itu kembali lagi mereka menyerupai segambar dan serupa dengan
Allah penciptanya sebab manusia adalah wakil Allah di permukaan bumi.
Manusia adalah ciptaan Allah yang Maha KaryaNya Ciptaan yang paling
agung, manusia itu ciptaanNya yang paling dekat dengan Sorga dibanding
dengan ciptaanNYa yang lainnya, pada manusialah diberi amanah oleh
Allah.
<a href="dokumen/PEMBAHARUAN KALENDER 1.htm">Baca Lebih Lanjut
<br/><br/> </p>
</div><!--akhir class single-post--></div>
</div><!--akhir class buaya-->
<div class="footer">
<p>@Copyright 2020 | PMD Sesawi- AK | <a href="https://PMD Sesawi-AK.com" target="_blank">SR.Pakpahan,SST</a></p>
</div><!--akhir class footer-->
</body>
</html>
Perhatikan pada kode tag <img src="images/dua.jpg"> telah digantikan dengan code <img src="dokumen/gbr2.png" > lalu dimasukkan ke tag <a href ...>... </a> dengan tujuan agar gambar bisa di klik dan link membuka dokumen dan tampil di browser. Kemudian pada code HTML itu juga terdapat <a href ... yang fungsinya memanggil dokumen artikel yang berjudul Luni Solar Kreator Allah, yang nama filenya PEMBAHARUAN KALENDER 1.htm tersimpan di folder dokumen (perhatikan cara penulisan nama filenya harus tepat dengan nama file yang sebenarnya, huruf besar, huruf kecil, dan tanda baca lainnya), dan bila di klik teks Luni Solar Kreator Allah maka akan link membuka dokumen dan tampil di browser.
Dan di dalam paragraf <p ...</p> juga terdapat <a href="dokumen/PEMBAHARUAN KALENDER 1.htm"> Baca Lebih Lanjut yang fungsinya sama jika teks Baca Lebih Lanjut ini kita klik maka akan link memanggil artikel dan menampilkannya di browser.
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 diperhatikan 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)
Sejauh ini, code yang kalian miliki dari awal mulai tutorial sampai sekarang akan seperti ini:
Code HTML – Halaman Beranda (Home Page)
<!doctype html>
<html>
<head>
<title>Membuat Website - HTML PMD Sesawi-AK</title>
<link rel="shortcut icon" type="image/png" href="images/favicon.ico"/>
<link href="css/style1.css" type="text/css" rel="stylesheet">
<link rel=“stylesheet” href=“bootstrap/css/bootstrap.min.css” />
<link href="single pos.html
</head>
<body>
<header>
<img src="images/logo pmd.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">
<h3><a href="single pos.html"><img src="dokumen/gbr2.png">Luni Solar Kreator Allah</a></h3>
<p>Pada mulanya Allah menciptakan bumi dan langit, langit dan bumi yang masih kosong dan gelap gulita merupakan tempat yang diyakini memuat kehidupan dimana Roh Allah melayang layang diatas permukaan air dan Allah mulai berkarya menciptakan segala isi alam semesta di bumi dan di langit. Pada tempat dan isinya tempat itu (langit dan bumi), Allah sebagai Pencipta Maha Agung dan Maha Kuasa menciptakan segala sesuatunya dengan rapi tersusun membentuk suatu jalinan rantai jalan kehidupan dari ujung bumi menuju sorga yang didalam penciptaannya itu Allah mulai merealisasikan rencanaNya SEMUA UNTUK SATU, semua untuk Allah di Sorga. <a href="single pos.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>
<a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm" > <img src="dokumen/gbr1.jpg" ><h4>Tutorial Music Studio FL 11</h4></a> <p>Fungsi studio musik adalah wahana para musisi untuk berproduksi atau menghasilkann musik, baik dalam menggambar, mengedit, membangkitkan/pemakaian instrumen, memberi efek pada instrumen atau memixer musik, dan sebagainya sehingga terciptalah lagu yang merdu, nyaring berkualitas tinggi yang layak go publik di terima masyarakat dunia. <a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm"> KLIK </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>Media Sosial, Let's Connect !</h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon 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 subscribe-->
<div class="komentar">
<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>
</form>
</div><!--akhir class komentar-->
<div class="footerKiri">
<h3>anone</h3>
</div><!--akhir class Footer Kiri-->
</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>
</div>
</div><!--akhir class buaya-->
<div class="footer">
<p>@Copyright 2020 | PMD Sesawi- AK | <a href="https://PMD Sesawi-AK.com" target="_blank">SR.Pakpahan,SST</a></p>
</div><!--akhir class footer-->
</body>
</html>
Code HTML – Halaman Single Pos (Pos Tunggal)
<!doctype html>
<html>
<head>
<title>Membuat Website Sederhana - Single Pos</title>
<link href="css/style1.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<img src="images/logo pmd.jpg">
</header>
<menu>
<li><a href="membuatwebsite1.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>
<a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm" > <img src="dokumen/gbr1.jpg" ><h4>Tutorial Music Studio FL 11</h4></a> <p>Fungsi studio musik adalah wahana para musisi untuk berproduksi atau menghasilkann musik, baik dalam menggambar, mengedit, membangkitkan/pemakaian instrumen, memberi efek pada instrumen atau memixer musik, dan sebagainya sehingga terciptalah lagu yang merdu, nyaring berkualitas tinggi yang layak go publik di terima masyarakat dunia. <a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm"> KLIK </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>Media Sosial, Let's Connect !</h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon 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 subscribe-->
<div class="komentar">
<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 class="footerKiri">
<h3>anone</h3>
</div><!--akhir class Footer Kiri-->
</div>
<div class="single-post">
<a href=""><img src="images/dua.jpg"></a>
<a href="dokumen/PEMBAHARUAN KALENDER 1.htm"><h2>Luni Solar Kreator Allah</h2></a>
<p>
“PEMBAHARUAN KALENDER :
PEMBAHARUAN HARI MINGGU HARI KETUJUH YANG TERSEMBUNYI”
Oleh: S.R.Pakpahan,SST
<br></br> 1. PENDAHULUAN
<br></br>Pada mulanya Allah menciptakan bumi dan langit, langit dan bumi yang masih kosong dan gelap gulita merupakan tempat yang diyakini memuat kehidupan dimana Roh Allah melayang layang diatas permukaan air dan Allah mulai berkarya menciptakan segala isi alam semesta di bumi dan di langit. Pada tempat dan isinya tempat itu (langit dan bumi), Allah sebagai Pencipta Maha Agung dan Maha Kuasa menciptakan segala sesuatunya dengan rapi tersusun membentuk suatu jalinan rantai jalan kehidupan dari ujung bumi menuju sorga yang didalam penciptaannya itu Allah mulai merealisasikan rencanaNya SEMUA UNTUK SATU, semua untuk Allah di Sorga.
<br></br>Pada mulanya adalah Firman, Firman itu bersama sama dengan Allah dan Firman itu adalah Allah, di hari pertama dengan FirmanNya Allah menciptakan TERANG, lalu Allah melihat ciptaannya Terang itu baik dan benar, jadilah petang dan pagi itulah hari PERTAMA. Dihari kedua dengan FirmanNya Allah menciptakan CAKRAWALA (LANGIT) sebagai pembatas antara bagian tempat yang di bawah dengan bagian yang di atas, lalu Allah melihat ciptaanNya Cakrawala itu baik dan benar, jadilah petang dan pagi itulah hari KEDUA. Di hari ketiga dengan FirmanNya Allah menciptakan LAUT, DARAT DAN TUMBUH TUMBUHAN, lalu Allah melihat ciptaanNya laut, darat dan tumbuh tumbuhan itu baik dan benar, jadilah petang dan pagi itulah hari KETIGA.
<br></br>Keterangan bahwa penciptaan dari hari pertama sampai hari ketiga itu merupakan penciptaan tempat kehidupan Sorgawi, yang selanjutnya penciptaan di hari keempat dengan FirmanNya Allah menciptakan BENDA BENDA TERANG yang menempati di cakrawala, Benda terang yang besar dinamakan Matahari yang menguasai siang dan matahari tersebut sebagai penentu waktu. Benda terang yang kecil dinamakan Bulan yang menguasai malam dan bulan sebagai penentu hari, Bulan dan matahari sama sama sebagai penentu masa dan zaman. Juga ALLah menciptakan bersamaan bulan yaitu bintang bintang yang menghiasi cakrawala di malam hari. Lalu Allah melihat ciptaanNya Benda Terang itu baik dan benar, jadilah petang dan pagi itulah hari KEEMPAT. Di hari kelima dengan FirmanNya Allah menciptakan IKAN-IKAN DAN SEGALA BINATANG AIR DAN BURUNG BURUNG DAN SEGALA BINATANG BERSAYAP YANG DAPAT TERBANG, lalu Allah melihat ciptaanNya ikan-ikan dan burung burung itu baik dan benar, jadilah petang dan pagi itulah hari KELIMA. Lalu dihari keenam dengan FirmanNya Allah menciptakan HEWAN-HEWAN, SEGALA BINATANG DAN TERNAK, Lalu Allah melihat ciptaanya itu hewan-hewan, segala binatang dan ternak adalah baik dan benar, juga di hari yang sama kemudian dengan FirmanNya Allah menciptakan MANUSIA menurut gambar dan rupa Allah dan menghembuskan nafas hidup ke dalam lobang hidung manusia itu, lalu Allah melihat ciptaaNya hewan-hewan, segala binatang dan ternak itu juga manusia itu baik dan benar, jadilah petang dan pagi itulah hari KEENAM.
<br></br>Keterangan bahwa penciptaan dari hari keempat sampai keenam itu merupakan penciptaan isi dari tempat bumi dan langit yang dihari pertama sampai hari ketiga yang telah diciptakan Allah itu, di hari keempat hingga keenam penciptaan ini mulai adanya berkat Allah bagi kehidupan di alam semesta. Dihari ketujuh lalu Allah berhenti dari bekerja, Allah menguduskan dan memberkati hari KETUJUH itu.
<br></br>Hari ketujuh yang zaman sekarang adalah hari minggu tetapi setelah kebangkitan Yesus Kristus, hari ketujuh hari minggu itu telah menjadi hari pertama yang diyakini sebagai suatu tanda antara manusia dan keturunan selanjutnya dengan Allah. Hari ketujuh merupakan hari peristirahatan hari khusus untuk Tuhan Allah dimana manusia mulai mencari hubungan dengan penciptaNya dan beribadah menyembah Sang pencipta Khalik langit dan bumi: Allah Maha Kuasa.
<br></br>Usaha dan upaya manusia mencari hari kudus, hari penuh kemuliaan, hari penuh berkat dari Tuhan, hari khusus untuk pemujaan Tuhan Allah, manusia mencari hadirat Allah yang Maha Kudus terus dilakukan dari zaman dahulu hingga saat ini. Hari kudus yang bagaimana yang sebenarnya dimana Allah hadir untuk dipuja dan disembah, hari itu berkenan bagi sorga Allah, seperti pada orang orang muslim menyakini bahwa hari kudus itu di hari Jumat mereka beribadah menyembah Tuhan Allah, juga seperti pada orang orang Kristen aliran adven yang menyakini hari kudus itu di hari sabtu, lau mereka beribadah di hari itu untuk memuja dan menyembah Tuhan Allah, tetapi lain halnya pada orang orang Kristen pengikut kristus sejati menyakini bahwa hari kudus itu adalah di hari ketujuh hari minggu yang juga hari Kebangkitan Yesus Kristus. Hari ketujuh itu diyakini para pengikut Kristus sejati adalah hari kudus yang diberkati Tuhan, hari yang penuh kemuliaan, hari kebangkitan dimana mereka sejenak melepaskan segala masalah persoalan hidup kematerialan dan kerohaniannya kembali menjumpai PenciptaNya untuk kembali suci sama segambar dan serupa dengan Allah penciptaNya. Dalam seminggu yang telah terlalui enam hari bekerja yang tak mungkin tak segala dosa dan kesalahan yang telah diperbuat mereka memohon pengampunan dari Allah agar kepudaran rupa manusianya itu kembali lagi mereka menyerupai segambar dan serupa dengan Allah penciptanya sebab manusia adalah wakil Allah di permukaan bumi. Manusia adalah ciptaan Allah yang Maha KaryaNya Ciptaan yang paling agung, manusia itu ciptaanNya yang paling dekat dengan Sorga dibanding dengan ciptaanNYa yang lainnya, pada manusialah diberi amanah oleh Allah.
<a href="dokumen/PEMBAHARUAN KALENDER 1.htm">Baca Lebih Lanjut
<br/><br/></p>
</div><!--akhir class single-post-->
</div>
</div><!--akhir class buaya-->
<div class="footer">
<p>@Copyright 2020 | PMD Sesawi- AK | <a href="https://PMD Sesawi-AK.com" target="_blank">SR.Pakpahan,SST</a></p>
</div><!--akhir class footer-->
</body>
</html>
Code CSS:
* {margin: 0; padding: 0;}
body {
width: 900px;
margin: auto;
}
header {
width: 900px;
height: 240px;
}
header img {
width: 900px;
height: 240px;
}
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;
}
/* 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 Komentar */
.buaya .widget .komentar {
width: 100%;
margin: 0 0 5px;
border-top: 5px solid #333;
padding-top: 20px;
}
.buaya .widget .komentar form {
width: 100%;
padding: 0 5px 0;
}
.buaya .widget .komentar h3 {
text-align: center;
margin: 0px 0 10px;
}
.buaya .widget .komentar input[type="text"] {
width: 95%;
height: 20px;
margin-bottom: 5px;
}
.buaya .widget .komentar input[type="email"] {
width: 95%;
height: 20px;
margin-bottom: 5px;
}
.buaya .widget .komentar textarea {
width: 95%;
max-width: 95%;
height: 200px;
max-height: 250px;
margin-bottom: 5px;
}
.buaya .widget .komentar input[type="submit"] {
padding: 5px;
cursor: pointer;
margin-bottom: 5px;
margin-left: 50px;
}
/* akhir class komentar */
.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 Footer Kiri */
.buaya .widget .footerKiri {
margin: 0 px;
border-top: 5px solid #333;
height: 50px;
background-color: grey;
margin-top: 10px;
}
.buaya .widget .footerKiri h3 {
text-align: center;
margin: 10px 0 10px;
color: grey
}
/* akhir class Footer Kiri */
/* class Footer Kanan */
.footer {
width: 100%;
height: 50px;
background-color: grey;
margin-top: 5px;
position: relative;
margin-left: 245px;
width: 660px;
}
.footer p {
color: #fff;
position: absolute;
bottom: 12.5px;
left: 150px;
}
.footer p a {
text-decoration: none;
color: #fff;
}
.footer p a:hover {
color: #f90;
}
/* akhir class Footer Kanan */
Dengan cara yang sama di atas bisa diterapkan untuk mengisi konten class recomendedKanan, Artikel Disarankan yang berikutnya.
Mudah kan ? Selanjutnya kalian bisa buat beberapa post tunggal sesuai artikel yang diinginkan seperti contoh diatas, karena biasanya suatu 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.
Setelah selesai part 4, silahkan lanjut ke part berikutnya (part 5 Sesi 2).
<a href="dokumen/PEMBAHARUAN KALENDER 1.htm"><h2>Luni Solar Kreator Allah</h2></a> yang di dalam class single pos
digantikan menjadi berikut ini:
yang di dalam header menjadi <img src="images/logo pmd musik.jpg">
dan yang di dalam class single pos menjadi <div class="single-post">
<a href=""><img src="images/dokumen/gbr3.png"></a>
<a href="dokumen/KELOMPOK INSTRUMEN MUSIK (bagian 1).htm"><h2>Kelompok Instrumen Musik (Bagian 1)</h2></a>
Sehingga hasil code HTML single pos artikel rekomendedKanan adalah sebagai berikut:
Code HTML – Halaman Single Pos (Pos Tunggal)
<!doctype html>
<html>
<head>
<title>Membuat Website Sederhana - Single Post</title>
<link href="css/style1.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<img src="images/logo pmd musik.jpg">
</header>
<menu>
<li><a href="membuatwebsite1.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>
<a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm" > <img src="dokumen/gbr1.jpg" ><h4>Tutorial Music Studio FL 11</h4></a> <p>Fungsi studio musik adalah wahana para musisi untuk berproduksi atau menghasilkann musik, baik dalam menggambar, mengedit, membangkitkan/pemakaian instrumen, memberi efek pada instrumen atau memixer musik, dan sebagainya sehingga terciptalah lagu yang merdu, nyaring berkualitas tinggi yang layak go publik di terima masyarakat dunia. <a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm"> KLIK </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>Media Sosial, Let's Connect !</h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon 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 subscribe-->
<div class="komentar">
<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 class="footerKiri">
<h3>anone</h3>
</div><!--akhir class Footer Kiri-->
</div>
<div class="single-post">
<a href=""><img src="dokumen/gbr3.png"></a>
<a href="dokumen/KELOMPOK INSTRUMEN (bagian 1).htm"><h2>Kelompok Instrumen Musik (Bagian 1)</h2></a>
<p>
KELOMPOK INSTRUMEN MUSIK
(Bagian 1)
<br/>Oleh: SR.Pakpahan, SST
<br></br>
Kelompok Instrumen musik dalam PMD “Luni Solar” Music oleh PMD Sawi-AK ada sebanyak 7 tapi 8 kelompok instrumen musik yang posisi letak masing-masing instrumen tersusun rapi menurut Instrumen Penjuru Musik (IPM). Pembentukan kelompok instrumen musik ini, prosesnya dapat dilihat pada gambar IPM1 hingga gambar IPM6 di menu My photo/IPM PMD “Luni Solar” Music.
<br/>Adapun 7 tapi 8 kelompok instrumen musik tersebut adalah sebagai berikut
<li>1.a. Instrumen Vokal (Trebel)
<li>1.b. Instrumen Akhir / Penguat (Trebel)
<li>2. Instrumen Melodi (Trebel & Bass)
<li>3. Instrumen Ritme (Trebel & Bass)
<li>4. Instrumen Variasi Ketukan (Trebel & Bass)
Posisi Instrumen Variasi Ketukan berada diantara Instrumen Melodi dan Instrumen Ritme
<li>5. Instrumen Ketukan (Trebel & Bass)
<li>6. Instrumen Harmony (Trebel & Bass)
<li>7. Instrumen Variasi Melodi (Trebel & Bass)
<br/>Posisi Instrumen Variasi Melodi berada diantara Instrumen Ketukan dan Instrumen Harmony
<br/>Permainan instrumen musik dengan vokal ini mengambil contoh lagu yang berjudul “AKU ANGGOTA KELUARGA ALLAH”. Adapun NPL (Nada penjuru Lagu), IPM (Instrumen Penjuru Musik) dapat dilihat pada gambar di menu My photo/PMD “Luni Solar” Music.
<br></br>1.a. Instrumen Vokal (Trebel)
<br/>Instrumen Vokal sebagai salah satu kelompok Instrumen musik dalam PMD “Luni Solar” Music menempati posisi paling terbawah (terakhir). Instrumen Vokal memainkan/membunyikan nada nada vokal penyanyi yang sudah tersusun rapi, baik, benar, dan harmonis memakai kunci akord sesuai kreasi rangkaian nada-nada pada lirik syair lagu yang ada melalui penciptaan Nada Penjuru Lagu (NPL).
Instrumen Vokal pada applikasi musik ada beberapa jenis seperti:
- Voice (berklep trebel)
- Soprano (berklep trebel)
- Mezzo soprano (berklep trebel)
- Alto (berklep trebel)
- Tenor (berklep trebel 8Vb)
- Baritone (berklep bass)
- Bass (berklep bass).
- Dan lain-lain
<br/>Dari hasil akhir pembentukan kelompok instrumen musik ini oleh PMD “Luni Solar” Music pada gambar IPM6 di menu My photo/IPM PMD “Luni Solar Music dapat terlihat bahwa ada 3 (tiga) jenis vokal (semua berklep trebel) yang terbentuk yang dapat digunakan dalam perpaduan permainan instrumen musik dan vokal yaitu:
<br/>- 3 (tiga) jenis vokal untuk lagu yang dibawakan oleh para penyanyi Trio (sopran sebagai suara 1, tenor sebagai sebagai suara 3, dan alto sebagai suara 2). Jenis instrumen vokal yang digunakan pada 3 (tiga) jenis vokal ini adalah:
- Soprano (berklep trebel)
- Alto (berklep trebel)
- Tenor (berklep trebel 8Vb)
<br/> Bila 2 (dua) jenis vokal, maka untuk lagu yang dibawakan oleh para penyanyi Duet (sopran sebagai suara 1, dan tenor sebagai sebagai suara 3. Jenis instrumen vokal yang digunakan pada 2 (dua) jenis vokal ini adalah:
- Soprano (berklep trebel)
- Tenor (berklep trebel 8Vb)
<br/>atau Duet dengan sopran sebagai suara 1, dan alto sebagai suara 2. Jenis instrumen vokal yang digunakan pada 2 (dua) jenis vokal ini adalah:
- Soprano (berklep trebel)
- Alto (berklep trebel)
<br/>- Bila 1 (satu) jenis vokal, maka untuk lagu yang dibawakan oleh penyanyi Solo, cukup satu suara saja dengan jenis instrumen vokal yang digunakan adalah: Voice (berklep trebel)
<br/>Bagaimana kalau ada 4 (empat) jenis vokal, jangan dimainkan pada kelompok instrumen musik ini, ya, karena ada salah satu jenis vokal yang berklep bass. Maka lebih baik ke-4 jenis vokal tersebut bernyanyi bersama dalam 1 (satu) lagu paduan suara atau koor. Jenis permainan instrumen musik pada lagu paduan suara (koor) memiliki karakter dan aturan tersendiri. Sebagai contoh bisa di dengar dan dilihat pada lagu paduan suara (koor) yang berjudul “SEKALIPUN KAKIKU TERSANDUNG” oleh kreasi PMD Sawi-AK, Sempatkan diri Anda untuk membeli lagunya di http:///www.sheetmusicplus.com. Di kotak search ketikkan judul lagu SEKALIPUN KAKIKU TERSANDUNG, lalu enter, selanjutnya lakukan transaksi pembelian. Layanan kami memuaskan Anda mendapatkan ilmunya, juga mendapatkan lagunya PMD Music Creation membuat ruangan Anda asri, nyaman berirama PMD (Pedang Mata Dua).
<br/>Pada lagu berjudul “AKU ANGGOTA KELUARGA ALLAH” dengan permainan instrumen musik dengan vokal, hanya ada 1 (satu) jenis vokal yang menjadikan lagu ini berjenis lagu Solo dengan iringan instrumen musik (Band Music). Pada lagu “AKU ANGGOTA KELUARGA ALLAH” ini menggunakan Voice (Oohs choir) sebagai instrumen vokalnya.
<br>
</br>1.b. Instrumen Akhir / Instrumen Penguat (Trebel)
<br/>Instrumen Akhir / Instrumen Penguat sebagai salah satu kelompok Instrumen musik dalam PMD “Luni Solar” Music menempati posisi paling teratas (pertama). Instrumen Penguat memainkan/membunyikan nada nada sama persis dengan yang dimainkan oleh instrumen vokal melalui penciptaan Nada Penjuru Lagu (NPL), tapi ia berklep trebel 8Va (lakukan copy-paste saja, lalu ganti klepnya menjadi klep trebel 8 Va). Jenis instrumen penguat ini yang dapat digunakan dalam perpaduan permainan instrumen musik dan vokal yaitu harus dari instrumen alat tiup, atau instrumen yang dibunyikan oleh bantuan suara/nafas manusia, alat musiknya seperti PIKOLO. Cari deh alat musik Instrumen Penguat lainnya yang sejenis pada applikasi musik yang ada.
<br></br>2. Instrumen Melodi (Trebel & Bass).
<br/>Instrumen Melodi sebagai salah satu kelompok Instrumen musik dalam PMD “Luni Solar” Music menempati posisi setelah instrumen Ritme. Instrumen Melodi memainkan/membunyikan nada nada vokal yang ada melalui penciptaan Nada Penjuru Lagu (NPL) yang sudah di “split” (dipecah) menjadi nada-nada bass dan trebel, seperti pemakaian instrumen PIANO untuk melodi yang nada-nada bass-nya dari nada-nada vokal dimainkan di piano klep bassnya, sedangkan nada-nada trebel dimainkan di piano klep trebelnya, dan nada-nada lain di klep bass dan trebel piano tersebut memainkan nada-nada yang sesuai dengan progress nadanya. Biasanya di klep bass memiliki nada-nada yang frekwensi/oktafnya sama tinggi dengan frekwensi/oktaf nada klep trebel.
<br/>Pada instrumen melodi inilah , kita berkreasi membentuk rangkaian nada-nada bass maupun nada-nada trebel untuk lirik syair lagu yang kita inginkan lantunan melodinya, seluruhnya melalui prosedur Nada Penjuru Lagu (NPL). Pada lagu “AKU ANGGOTA KELUARGA ALLAH” ini menggunakan piano sebagai instrumen melodinya.
<br/>Bila suatu komposisi nada di suatu lirik adalah nada-nada bass yang dimainkan oleh klep bass piano, maka nada-nada klep trebelnya harus “lagging” (terbelakang) 1/8 nada dari nada bassnya di progres 1, bila di progres 2 maka nada-nada trebel yang lagging ini harus di turunkan 1 laras lagi, bila di progres 3 maka nada-nada trebel yang lagging ini harus di turunkan 2 laras lagi, (lakukan copy-paste, lalu perhatikan progres nadanya yang keberapa).
Bila suatu komposisi nada di suatu lirik adalah nada-nada trebel yang dimainkan oleh klep trebel piano, maka nada-nada klep bassnya harus “leading” (terdepan) 1/8 nada dari nada trebelnya dan harus diturunkan 2 laras di progres 1, bila di progres 2 maka nada-nada bass yang leading dan turun 2 laras ini harus di turunkan lagi 1 laras, bila di progres 3 maka nada-nada bass yang leading dan turun 2 laras ini harus di turunkan lagi 2 laras.
<br/>Biasanya jenis alat instrumen melodi ini menggunakan instrumen Bila suatu komposisi nada di suatu lirik adalah nada-nada trebel yang dimainkan oleh klep trebel piano, maka nada-nada klep bassnya harus “leading” (terdepan) 1/8 nada dari nada trebelnya dan harus diturunkan 2 laras di progres 1, bila di progres 2 maka nada-nada bass yang leading dan turun 2 laras ini harus di turunkan lagi 1 laras, bila di progres 3 maka nada-nada bass yang leading dan turun 2 laras ini harus di turunkan lagi 2 laras.
Biasanya jenis alat instrumen melodi ini menggunakan instrumen keyboard. Jenis alat instrumen lainnya selain piano, ada juga Harpsichord, Organ, Pipe keyboard. Jenis alat instrumen lainnya selain piano, ada juga Harpsichord, Organ, Pipe organ, dan lain-lain.
<br/>
Bersambung ... Instrumen musik berikutnya nantikan di diskusi kita berikutnya, dan sempatkan diri Anda untuk membeli lagu-lagunya PMD Sawi-AK, seperti lagu yang berjudul “AKU ANGGOTA KELUARGA ALLAH” di http:///www.sheetmusicplus.com. Di kotak search ketikkan judul lagu AKU ANGGOTA KELUARGA ALLAH, lalu enter, selanjutnya lakukan transaksi pembelian. Layanan kami memuaskan Anda mendapatkan ilmunya, juga mendapatkan lagunya PMD Music Creation membuat ruangan Anda asri, nyaman berirama PMD (Pedang Mata Dua). PMD Music Creation untuk ruangan Anda, bukan untuk telinga Anda, tapi telinga Anda untuk mendengarkan Tuhan yang berfiirman.
<a href="dokumen/KELOMPOK INSTRUMEN MUSIK (bagian 1).htm">Baca Lebih Lanjut
<br/><br/></p>
</div><!--akhir class single-post-->
<div class="footer">
<p>@Copyright 2020 | PMD Sesawi- AK | <a href="https://PMD Sesawi-AK.com" target="_blank">SR.Pakpahan,SST</a></p>
</div><!--akhir class footer-->
</body>
</html>
Code HTML – Halaman Beranda (Home Page)
<!doctype html>
<html>
<head>
<title>Membuat Website - HTML PMD Sesawi-AK</title>
<link rel="shortcut icon" type="image/png" href="images/favicon.ico"/>
<link href="css/style1.css" type="text/css" rel="stylesheet">
<link rel=“stylesheet” href=“bootstrap/css/bootstrap.min.css” />
<link href="single pos.html
</head>
<body>
<header>
<img src="images/logo pmd.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">
<h3><a href="single pos.html"><img src="dokumen/gbr2.png">Luni Solar Kreator Allah</a></h3>
<p>Pada mulanya Allah menciptakan bumi dan langit, langit dan bumi yang masih kosong dan gelap gulita merupakan tempat yang diyakini memuat kehidupan dimana Roh Allah melayang layang diatas permukaan air dan Allah mulai berkarya menciptakan segala isi alam semesta di bumi dan di langit. Pada tempat dan isinya tempat itu (langit dan bumi), Allah sebagai Pencipta Maha Agung dan Maha Kuasa menciptakan segala sesuatunya dengan rapi tersusun membentuk suatu jalinan rantai jalan kehidupan dari ujung bumi menuju sorga yang didalam penciptaannya itu Allah mulai merealisasikan rencanaNya SEMUA UNTUK SATU, semua untuk Allah di Sorga. <a href="single pos.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>
<a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm" > <img src="dokumen/gbr1.jpg" ><h4>Tutorial Music Studio FL 11</h4></a> <p>Fungsi studio musik adalah wahana para musisi untuk berproduksi atau menghasilkann musik, baik dalam menggambar, mengedit, membangkitkan/pemakaian instrumen, memberi efek pada instrumen atau memixer musik, dan sebagainya sehingga terciptalah lagu yang merdu, nyaring berkualitas tinggi yang layak go publik di terima masyarakat dunia. <a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm"> KLIK </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>Media Sosial, Let's Connect !</h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon 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 subscribe-->
<div class="komentar">
<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>
</form>
</div><!--akhir class komentar-->
<div class="footerKiri">
<h3>anone</h3>
</div><!--akhir class Footer Kiri-->
</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>
</div>
</div><!--akhir class buaya-->
<div class="footer">
<p>@Copyright 2020 | PMD Sesawi- AK | <a href="https://PMD Sesawi-AK.com" target="_blank">SR.Pakpahan,SST</a></p>
</div><!--akhir class footer-->
</body>
</html>
Code HTML – Halaman Single Pos (Pos Tunggal)
<!doctype html>
<html>
<head>
<title>Membuat Website Sederhana - Single Pos</title>
<link href="css/style1.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<img src="images/logo pmd.jpg">
</header>
<menu>
<li><a href="membuatwebsite1.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>
<a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm" > <img src="dokumen/gbr1.jpg" ><h4>Tutorial Music Studio FL 11</h4></a> <p>Fungsi studio musik adalah wahana para musisi untuk berproduksi atau menghasilkann musik, baik dalam menggambar, mengedit, membangkitkan/pemakaian instrumen, memberi efek pada instrumen atau memixer musik, dan sebagainya sehingga terciptalah lagu yang merdu, nyaring berkualitas tinggi yang layak go publik di terima masyarakat dunia. <a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm"> KLIK </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>Media Sosial, Let's Connect !</h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon 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 subscribe-->
<div class="komentar">
<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 class="footerKiri">
<h3>anone</h3>
</div><!--akhir class Footer Kiri-->
</div>
<div class="single-post">
<a href=""><img src="images/dua.jpg"></a>
<a href="dokumen/PEMBAHARUAN KALENDER 1.htm"><h2>Luni Solar Kreator Allah</h2></a>
<p>
“PEMBAHARUAN KALENDER :
PEMBAHARUAN HARI MINGGU HARI KETUJUH YANG TERSEMBUNYI”
Oleh: S.R.Pakpahan,SST
<br></br> 1. PENDAHULUAN
<br></br>Pada mulanya Allah menciptakan bumi dan langit, langit dan bumi yang masih kosong dan gelap gulita merupakan tempat yang diyakini memuat kehidupan dimana Roh Allah melayang layang diatas permukaan air dan Allah mulai berkarya menciptakan segala isi alam semesta di bumi dan di langit. Pada tempat dan isinya tempat itu (langit dan bumi), Allah sebagai Pencipta Maha Agung dan Maha Kuasa menciptakan segala sesuatunya dengan rapi tersusun membentuk suatu jalinan rantai jalan kehidupan dari ujung bumi menuju sorga yang didalam penciptaannya itu Allah mulai merealisasikan rencanaNya SEMUA UNTUK SATU, semua untuk Allah di Sorga.
<br></br>Pada mulanya adalah Firman, Firman itu bersama sama dengan Allah dan Firman itu adalah Allah, di hari pertama dengan FirmanNya Allah menciptakan TERANG, lalu Allah melihat ciptaannya Terang itu baik dan benar, jadilah petang dan pagi itulah hari PERTAMA. Dihari kedua dengan FirmanNya Allah menciptakan CAKRAWALA (LANGIT) sebagai pembatas antara bagian tempat yang di bawah dengan bagian yang di atas, lalu Allah melihat ciptaanNya Cakrawala itu baik dan benar, jadilah petang dan pagi itulah hari KEDUA. Di hari ketiga dengan FirmanNya Allah menciptakan LAUT, DARAT DAN TUMBUH TUMBUHAN, lalu Allah melihat ciptaanNya laut, darat dan tumbuh tumbuhan itu baik dan benar, jadilah petang dan pagi itulah hari KETIGA.
<br></br>Keterangan bahwa penciptaan dari hari pertama sampai hari ketiga itu merupakan penciptaan tempat kehidupan Sorgawi, yang selanjutnya penciptaan di hari keempat dengan FirmanNya Allah menciptakan BENDA BENDA TERANG yang menempati di cakrawala, Benda terang yang besar dinamakan Matahari yang menguasai siang dan matahari tersebut sebagai penentu waktu. Benda terang yang kecil dinamakan Bulan yang menguasai malam dan bulan sebagai penentu hari, Bulan dan matahari sama sama sebagai penentu masa dan zaman. Juga ALLah menciptakan bersamaan bulan yaitu bintang bintang yang menghiasi cakrawala di malam hari. Lalu Allah melihat ciptaanNya Benda Terang itu baik dan benar, jadilah petang dan pagi itulah hari KEEMPAT. Di hari kelima dengan FirmanNya Allah menciptakan IKAN-IKAN DAN SEGALA BINATANG AIR DAN BURUNG BURUNG DAN SEGALA BINATANG BERSAYAP YANG DAPAT TERBANG, lalu Allah melihat ciptaanNya ikan-ikan dan burung burung itu baik dan benar, jadilah petang dan pagi itulah hari KELIMA. Lalu dihari keenam dengan FirmanNya Allah menciptakan HEWAN-HEWAN, SEGALA BINATANG DAN TERNAK, Lalu Allah melihat ciptaanya itu hewan-hewan, segala binatang dan ternak adalah baik dan benar, juga di hari yang sama kemudian dengan FirmanNya Allah menciptakan MANUSIA menurut gambar dan rupa Allah dan menghembuskan nafas hidup ke dalam lobang hidung manusia itu, lalu Allah melihat ciptaaNya hewan-hewan, segala binatang dan ternak itu juga manusia itu baik dan benar, jadilah petang dan pagi itulah hari KEENAM.
<br></br>Keterangan bahwa penciptaan dari hari keempat sampai keenam itu merupakan penciptaan isi dari tempat bumi dan langit yang dihari pertama sampai hari ketiga yang telah diciptakan Allah itu, di hari keempat hingga keenam penciptaan ini mulai adanya berkat Allah bagi kehidupan di alam semesta. Dihari ketujuh lalu Allah berhenti dari bekerja, Allah menguduskan dan memberkati hari KETUJUH itu.
<br></br>Hari ketujuh yang zaman sekarang adalah hari minggu tetapi setelah kebangkitan Yesus Kristus, hari ketujuh hari minggu itu telah menjadi hari pertama yang diyakini sebagai suatu tanda antara manusia dan keturunan selanjutnya dengan Allah. Hari ketujuh merupakan hari peristirahatan hari khusus untuk Tuhan Allah dimana manusia mulai mencari hubungan dengan penciptaNya dan beribadah menyembah Sang pencipta Khalik langit dan bumi: Allah Maha Kuasa.
<br></br>Usaha dan upaya manusia mencari hari kudus, hari penuh kemuliaan, hari penuh berkat dari Tuhan, hari khusus untuk pemujaan Tuhan Allah, manusia mencari hadirat Allah yang Maha Kudus terus dilakukan dari zaman dahulu hingga saat ini. Hari kudus yang bagaimana yang sebenarnya dimana Allah hadir untuk dipuja dan disembah, hari itu berkenan bagi sorga Allah, seperti pada orang orang muslim menyakini bahwa hari kudus itu di hari Jumat mereka beribadah menyembah Tuhan Allah, juga seperti pada orang orang Kristen aliran adven yang menyakini hari kudus itu di hari sabtu, lau mereka beribadah di hari itu untuk memuja dan menyembah Tuhan Allah, tetapi lain halnya pada orang orang Kristen pengikut kristus sejati menyakini bahwa hari kudus itu adalah di hari ketujuh hari minggu yang juga hari Kebangkitan Yesus Kristus. Hari ketujuh itu diyakini para pengikut Kristus sejati adalah hari kudus yang diberkati Tuhan, hari yang penuh kemuliaan, hari kebangkitan dimana mereka sejenak melepaskan segala masalah persoalan hidup kematerialan dan kerohaniannya kembali menjumpai PenciptaNya untuk kembali suci sama segambar dan serupa dengan Allah penciptaNya. Dalam seminggu yang telah terlalui enam hari bekerja yang tak mungkin tak segala dosa dan kesalahan yang telah diperbuat mereka memohon pengampunan dari Allah agar kepudaran rupa manusianya itu kembali lagi mereka menyerupai segambar dan serupa dengan Allah penciptanya sebab manusia adalah wakil Allah di permukaan bumi. Manusia adalah ciptaan Allah yang Maha KaryaNya Ciptaan yang paling agung, manusia itu ciptaanNya yang paling dekat dengan Sorga dibanding dengan ciptaanNYa yang lainnya, pada manusialah diberi amanah oleh Allah.
<a href="dokumen/PEMBAHARUAN KALENDER 1.htm">Baca Lebih Lanjut
<br/><br/></p>
</div><!--akhir class single-post-->
</div>
</div><!--akhir class buaya-->
<div class="footer">
<p>@Copyright 2020 | PMD Sesawi- AK | <a href="https://PMD Sesawi-AK.com" target="_blank">SR.Pakpahan,SST</a></p>
</div><!--akhir class footer-->
</body>
</html>
Code CSS:
* {margin: 0; padding: 0;}
body {
width: 900px;
margin: auto;
}
header {
width: 900px;
height: 240px;
}
header img {
width: 900px;
height: 240px;
}
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;
}
/* 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 Komentar */
.buaya .widget .komentar {
width: 100%;
margin: 0 0 5px;
border-top: 5px solid #333;
padding-top: 20px;
}
.buaya .widget .komentar form {
width: 100%;
padding: 0 5px 0;
}
.buaya .widget .komentar h3 {
text-align: center;
margin: 0px 0 10px;
}
.buaya .widget .komentar input[type="text"] {
width: 95%;
height: 20px;
margin-bottom: 5px;
}
.buaya .widget .komentar input[type="email"] {
width: 95%;
height: 20px;
margin-bottom: 5px;
}
.buaya .widget .komentar textarea {
width: 95%;
max-width: 95%;
height: 200px;
max-height: 250px;
margin-bottom: 5px;
}
.buaya .widget .komentar input[type="submit"] {
padding: 5px;
cursor: pointer;
margin-bottom: 5px;
margin-left: 50px;
}
/* akhir class komentar */
.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 Footer Kiri */
.buaya .widget .footerKiri {
margin: 0 px;
border-top: 5px solid #333;
height: 50px;
background-color: grey;
margin-top: 10px;
}
.buaya .widget .footerKiri h3 {
text-align: center;
margin: 10px 0 10px;
color: grey
}
/* akhir class Footer Kiri */
/* class Footer Kanan */
.footer {
width: 100%;
height: 50px;
background-color: grey;
margin-top: 5px;
position: relative;
margin-left: 245px;
width: 660px;
}
.footer p {
color: #fff;
position: absolute;
bottom: 12.5px;
left: 150px;
}
.footer p a {
text-decoration: none;
color: #fff;
}
.footer p a:hover {
color: #f90;
}
/* akhir class Footer Kanan */
Dengan cara yang sama di atas bisa diterapkan untuk mengisi konten class recomendedKanan, Artikel Disarankan yang berikutnya.
Mudah kan ? Selanjutnya kalian bisa buat beberapa post tunggal sesuai artikel yang diinginkan seperti contoh diatas, karena biasanya suatu 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.
Setelah selesai part 4, silahkan lanjut ke part berikutnya (part 5 Sesi 2).
PART 5
Pada part 5 Sesi 2 ini adalah mengisi konten class recomendedKanan Artikel Disarankan yang berikutnya. Sama halnya dengan part 4, untuk part 5 ini kita hanya menambahkan gambar baru yang sesuai dengan isi artikel yang akan ditampilkan, disini saya tambahkan file gambar yang nama filenya diberi gbr3 yang berekstensi png, Dan pada folder dokumen itu juga saya tambahkan file artikel nama file saya di sini adalah KELOMPOK INSTRUMEN MUSIK (bagian 1) yang telah dikonversikan dari MSWord (docx) ke dokumen html sehingga file tersebut berekstensi htm . Juga disni logo pmd saya gantikan menjadi logo pmd musik, dengan maksud bahwa logo pmd memiliki beberapa sub logo lagi, salah satunya adalah logo pmd musik (kreasi pmd di bidang musik), nama file gambar logonya adalah logo pmd musik yang berektensi jpg.
Pada file single pos 1.html tersebut, Code HTML kita ganti untuk class recomendedKanan sebagai konten artikelnya KELOMPOK INSTRUMEN MUSIK (bagian 1), dan yang digantikan adalah di bagian:
<img src="images/logo pmd.jpg"> yang di dalam header,
Pada part 5 Sesi 2 ini adalah mengisi konten class recomendedKanan Artikel Disarankan yang berikutnya. Sama halnya dengan part 4, untuk part 5 ini kita hanya menambahkan gambar baru yang sesuai dengan isi artikel yang akan ditampilkan, disini saya tambahkan file gambar yang nama filenya diberi gbr3 yang berekstensi png, Dan pada folder dokumen itu juga saya tambahkan file artikel nama file saya di sini adalah KELOMPOK INSTRUMEN MUSIK (bagian 1) yang telah dikonversikan dari MSWord (docx) ke dokumen html sehingga file tersebut berekstensi htm . Juga disni logo pmd saya gantikan menjadi logo pmd musik, dengan maksud bahwa logo pmd memiliki beberapa sub logo lagi, salah satunya adalah logo pmd musik (kreasi pmd di bidang musik), nama file gambar logonya adalah logo pmd musik yang berektensi jpg.
Gambar 3 (gbr3) dan dokumen artikel KELOMPOK INSTRUMEN MUSIK (bagian 1) ini akan kita masukkan ke class recomendedKanan yang di file membuatwebsite.html, ingat code HTML di widget class recomendedKanan yang sebelumnya adalah ini:
<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-->
hapus code HTML tersebut di atas, dan gantikan dengan code HTML berikut ini:
<div class="recomendedKanan">
<h3><a href="single pos 1.html"><img
src="dokumen/gbr3.png">Kelompok Instrumen Musik (bagian
1)</a></h3>
<p>Kelompok Instrumen musik dalam PMD “Luni Solar” Music
oleh PMD Sawi-AK ada sebanyak 7 tapi 8 kelompok instrumen musik yang
posisi letak masing-masing instrumen tersusun rapi menurut Instrumen
Penjuru Musik (IPM). Pembentukan kelompok instrumen musik ini, prosesnya
dapat dilihat pada gambar IPM1 – gambar IPM6 di menu My photo/IPM PMD
“Luni Solar” Music.
Adapun 7 tapi 8 kelompok instrumen musik tersebut adalah sebagai berikut
<a href="single pos 1.html"><strong>Baca Selengkapnya</strong></a></p>
</div><!--akhir class recomendedKanan-->
Dengan adanya pembuatan logo dan sub logo ini yaitu logo pmd bagi
home page dan bagi bidang yang sesuai dengannya, dan sub logo pmd musik
bagi bidang artikel musik, maka halaman home page di dalam head ( <head>...</head>) nya harus ditambahkan lagi code HTML berikut ini <link href="single pos 1.html> mengikuti code HTML yang sebelumnya seperti ini <link href="single pos.html>
sehingga code HTML untuk home page mulai dari atas (<!doctype html>) hingga akhir menu (</menu>) adalah berikut ini:
<!doctype html>
<html>
<head>
<title>Membuat Website - HTML PMD Sesawi-AK</title>
<link rel="shortcut icon" type="image/png" href="images/favicon.ico"/>
<link href="css/style1.css" type="text/css" rel="stylesheet">
<link href="single pos.html>
<link href="single pos 1.html>
</head>
<body>
<header>
<img src="images/logo pmd.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>
Hasil penggantian konten class recomendedKanani sebagai pembuatan artikel baru adalah berikut ini (lihat gambar):
sehingga code HTML untuk home page mulai dari atas (<!doctype html>) hingga akhir menu (</menu>) adalah berikut ini:
<!doctype html>
<html>
<head>
<title>Membuat Website - HTML PMD Sesawi-AK</title>
<link rel="shortcut icon" type="image/png" href="images/favicon.ico"/>
<link href="css/style1.css" type="text/css" rel="stylesheet">
<link href="single pos.html>
<link href="single pos 1.html>
</head>
<body>
<header>
<img src="images/logo pmd.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>
Hasil penggantian konten class recomendedKanani sebagai pembuatan artikel baru adalah berikut ini (lihat gambar):
Gambar di atas juga terlihat konten komentar sudah bagus karena sudah diperbaiki code HTML dan code CSS-nya widget class komentar (lihat codenya di Code HTML – Halaman Home Page atau di Code HTML - Single Pos (Pos Tunggal).
Kemudian untuk membuat halaman single pos untuk artikel Kelompok Instrumen Musik ini, di code editor (sublime text) kita buat suatu file baru html yang diberi nama single pos 1.html, lalu semua isi file single pos.html yang code HTML artikel rekomendedKiri yang sudah dibuat sebelumnya semua codenya kita copykan ke lembar kerja single pos 1.html sebagai untuk code HTML artikel rekomendedKanan.
Kemudian untuk membuat halaman single pos untuk artikel Kelompok Instrumen Musik ini, di code editor (sublime text) kita buat suatu file baru html yang diberi nama single pos 1.html, lalu semua isi file single pos.html yang code HTML artikel rekomendedKiri yang sudah dibuat sebelumnya semua codenya kita copykan ke lembar kerja single pos 1.html sebagai untuk code HTML artikel rekomendedKanan.
<img src="images/logo pmd.jpg"> yang di dalam header,
dan <div class="single-post">
<a href=""><img src="images/dua.jpg"></a><a href="dokumen/PEMBAHARUAN KALENDER 1.htm"><h2>Luni Solar Kreator Allah</h2></a> yang di dalam class single pos
digantikan menjadi berikut ini:
yang di dalam header menjadi <img src="images/logo pmd musik.jpg">
dan yang di dalam class single pos menjadi <div class="single-post">
<a href=""><img src="images/dokumen/gbr3.png"></a>
<a href="dokumen/KELOMPOK INSTRUMEN MUSIK (bagian 1).htm"><h2>Kelompok Instrumen Musik (Bagian 1)</h2></a>
Sehingga hasil code HTML single pos artikel rekomendedKanan adalah sebagai berikut:
Code HTML – Halaman Single Pos (Pos Tunggal)
<!doctype html>
<html>
<head>
<title>Membuat Website Sederhana - Single Post</title>
<link href="css/style1.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<img src="images/logo pmd musik.jpg">
</header>
<menu>
<li><a href="membuatwebsite1.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>
<a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm" > <img src="dokumen/gbr1.jpg" ><h4>Tutorial Music Studio FL 11</h4></a> <p>Fungsi studio musik adalah wahana para musisi untuk berproduksi atau menghasilkann musik, baik dalam menggambar, mengedit, membangkitkan/pemakaian instrumen, memberi efek pada instrumen atau memixer musik, dan sebagainya sehingga terciptalah lagu yang merdu, nyaring berkualitas tinggi yang layak go publik di terima masyarakat dunia. <a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm"> KLIK </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>Media Sosial, Let's Connect !</h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon 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 subscribe-->
<div class="komentar">
<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 class="footerKiri">
<h3>anone</h3>
</div><!--akhir class Footer Kiri-->
</div>
<div class="single-post">
<a href=""><img src="dokumen/gbr3.png"></a>
<a href="dokumen/KELOMPOK INSTRUMEN (bagian 1).htm"><h2>Kelompok Instrumen Musik (Bagian 1)</h2></a>
<p>
KELOMPOK INSTRUMEN MUSIK
(Bagian 1)
<br/>Oleh: SR.Pakpahan, SST
<br></br>
Kelompok Instrumen musik dalam PMD “Luni Solar” Music oleh PMD Sawi-AK ada sebanyak 7 tapi 8 kelompok instrumen musik yang posisi letak masing-masing instrumen tersusun rapi menurut Instrumen Penjuru Musik (IPM). Pembentukan kelompok instrumen musik ini, prosesnya dapat dilihat pada gambar IPM1 hingga gambar IPM6 di menu My photo/IPM PMD “Luni Solar” Music.
<br/>Adapun 7 tapi 8 kelompok instrumen musik tersebut adalah sebagai berikut
<li>1.a. Instrumen Vokal (Trebel)
<li>1.b. Instrumen Akhir / Penguat (Trebel)
<li>2. Instrumen Melodi (Trebel & Bass)
<li>3. Instrumen Ritme (Trebel & Bass)
<li>4. Instrumen Variasi Ketukan (Trebel & Bass)
Posisi Instrumen Variasi Ketukan berada diantara Instrumen Melodi dan Instrumen Ritme
<li>5. Instrumen Ketukan (Trebel & Bass)
<li>6. Instrumen Harmony (Trebel & Bass)
<li>7. Instrumen Variasi Melodi (Trebel & Bass)
<br/>Posisi Instrumen Variasi Melodi berada diantara Instrumen Ketukan dan Instrumen Harmony
<br/>Permainan instrumen musik dengan vokal ini mengambil contoh lagu yang berjudul “AKU ANGGOTA KELUARGA ALLAH”. Adapun NPL (Nada penjuru Lagu), IPM (Instrumen Penjuru Musik) dapat dilihat pada gambar di menu My photo/PMD “Luni Solar” Music.
<br></br>1.a. Instrumen Vokal (Trebel)
<br/>Instrumen Vokal sebagai salah satu kelompok Instrumen musik dalam PMD “Luni Solar” Music menempati posisi paling terbawah (terakhir). Instrumen Vokal memainkan/membunyikan nada nada vokal penyanyi yang sudah tersusun rapi, baik, benar, dan harmonis memakai kunci akord sesuai kreasi rangkaian nada-nada pada lirik syair lagu yang ada melalui penciptaan Nada Penjuru Lagu (NPL).
Instrumen Vokal pada applikasi musik ada beberapa jenis seperti:
- Voice (berklep trebel)
- Soprano (berklep trebel)
- Mezzo soprano (berklep trebel)
- Alto (berklep trebel)
- Tenor (berklep trebel 8Vb)
- Baritone (berklep bass)
- Bass (berklep bass).
- Dan lain-lain
<br/>Dari hasil akhir pembentukan kelompok instrumen musik ini oleh PMD “Luni Solar” Music pada gambar IPM6 di menu My photo/IPM PMD “Luni Solar Music dapat terlihat bahwa ada 3 (tiga) jenis vokal (semua berklep trebel) yang terbentuk yang dapat digunakan dalam perpaduan permainan instrumen musik dan vokal yaitu:
<br/>- 3 (tiga) jenis vokal untuk lagu yang dibawakan oleh para penyanyi Trio (sopran sebagai suara 1, tenor sebagai sebagai suara 3, dan alto sebagai suara 2). Jenis instrumen vokal yang digunakan pada 3 (tiga) jenis vokal ini adalah:
- Soprano (berklep trebel)
- Alto (berklep trebel)
- Tenor (berklep trebel 8Vb)
<br/> Bila 2 (dua) jenis vokal, maka untuk lagu yang dibawakan oleh para penyanyi Duet (sopran sebagai suara 1, dan tenor sebagai sebagai suara 3. Jenis instrumen vokal yang digunakan pada 2 (dua) jenis vokal ini adalah:
- Soprano (berklep trebel)
- Tenor (berklep trebel 8Vb)
<br/>atau Duet dengan sopran sebagai suara 1, dan alto sebagai suara 2. Jenis instrumen vokal yang digunakan pada 2 (dua) jenis vokal ini adalah:
- Soprano (berklep trebel)
- Alto (berklep trebel)
<br/>- Bila 1 (satu) jenis vokal, maka untuk lagu yang dibawakan oleh penyanyi Solo, cukup satu suara saja dengan jenis instrumen vokal yang digunakan adalah: Voice (berklep trebel)
<br/>Bagaimana kalau ada 4 (empat) jenis vokal, jangan dimainkan pada kelompok instrumen musik ini, ya, karena ada salah satu jenis vokal yang berklep bass. Maka lebih baik ke-4 jenis vokal tersebut bernyanyi bersama dalam 1 (satu) lagu paduan suara atau koor. Jenis permainan instrumen musik pada lagu paduan suara (koor) memiliki karakter dan aturan tersendiri. Sebagai contoh bisa di dengar dan dilihat pada lagu paduan suara (koor) yang berjudul “SEKALIPUN KAKIKU TERSANDUNG” oleh kreasi PMD Sawi-AK, Sempatkan diri Anda untuk membeli lagunya di http:///www.sheetmusicplus.com. Di kotak search ketikkan judul lagu SEKALIPUN KAKIKU TERSANDUNG, lalu enter, selanjutnya lakukan transaksi pembelian. Layanan kami memuaskan Anda mendapatkan ilmunya, juga mendapatkan lagunya PMD Music Creation membuat ruangan Anda asri, nyaman berirama PMD (Pedang Mata Dua).
<br/>Pada lagu berjudul “AKU ANGGOTA KELUARGA ALLAH” dengan permainan instrumen musik dengan vokal, hanya ada 1 (satu) jenis vokal yang menjadikan lagu ini berjenis lagu Solo dengan iringan instrumen musik (Band Music). Pada lagu “AKU ANGGOTA KELUARGA ALLAH” ini menggunakan Voice (Oohs choir) sebagai instrumen vokalnya.
<br>
</br>1.b. Instrumen Akhir / Instrumen Penguat (Trebel)
<br/>Instrumen Akhir / Instrumen Penguat sebagai salah satu kelompok Instrumen musik dalam PMD “Luni Solar” Music menempati posisi paling teratas (pertama). Instrumen Penguat memainkan/membunyikan nada nada sama persis dengan yang dimainkan oleh instrumen vokal melalui penciptaan Nada Penjuru Lagu (NPL), tapi ia berklep trebel 8Va (lakukan copy-paste saja, lalu ganti klepnya menjadi klep trebel 8 Va). Jenis instrumen penguat ini yang dapat digunakan dalam perpaduan permainan instrumen musik dan vokal yaitu harus dari instrumen alat tiup, atau instrumen yang dibunyikan oleh bantuan suara/nafas manusia, alat musiknya seperti PIKOLO. Cari deh alat musik Instrumen Penguat lainnya yang sejenis pada applikasi musik yang ada.
<br></br>2. Instrumen Melodi (Trebel & Bass).
<br/>Instrumen Melodi sebagai salah satu kelompok Instrumen musik dalam PMD “Luni Solar” Music menempati posisi setelah instrumen Ritme. Instrumen Melodi memainkan/membunyikan nada nada vokal yang ada melalui penciptaan Nada Penjuru Lagu (NPL) yang sudah di “split” (dipecah) menjadi nada-nada bass dan trebel, seperti pemakaian instrumen PIANO untuk melodi yang nada-nada bass-nya dari nada-nada vokal dimainkan di piano klep bassnya, sedangkan nada-nada trebel dimainkan di piano klep trebelnya, dan nada-nada lain di klep bass dan trebel piano tersebut memainkan nada-nada yang sesuai dengan progress nadanya. Biasanya di klep bass memiliki nada-nada yang frekwensi/oktafnya sama tinggi dengan frekwensi/oktaf nada klep trebel.
<br/>Pada instrumen melodi inilah , kita berkreasi membentuk rangkaian nada-nada bass maupun nada-nada trebel untuk lirik syair lagu yang kita inginkan lantunan melodinya, seluruhnya melalui prosedur Nada Penjuru Lagu (NPL). Pada lagu “AKU ANGGOTA KELUARGA ALLAH” ini menggunakan piano sebagai instrumen melodinya.
<br/>Bila suatu komposisi nada di suatu lirik adalah nada-nada bass yang dimainkan oleh klep bass piano, maka nada-nada klep trebelnya harus “lagging” (terbelakang) 1/8 nada dari nada bassnya di progres 1, bila di progres 2 maka nada-nada trebel yang lagging ini harus di turunkan 1 laras lagi, bila di progres 3 maka nada-nada trebel yang lagging ini harus di turunkan 2 laras lagi, (lakukan copy-paste, lalu perhatikan progres nadanya yang keberapa).
Bila suatu komposisi nada di suatu lirik adalah nada-nada trebel yang dimainkan oleh klep trebel piano, maka nada-nada klep bassnya harus “leading” (terdepan) 1/8 nada dari nada trebelnya dan harus diturunkan 2 laras di progres 1, bila di progres 2 maka nada-nada bass yang leading dan turun 2 laras ini harus di turunkan lagi 1 laras, bila di progres 3 maka nada-nada bass yang leading dan turun 2 laras ini harus di turunkan lagi 2 laras.
<br/>Biasanya jenis alat instrumen melodi ini menggunakan instrumen Bila suatu komposisi nada di suatu lirik adalah nada-nada trebel yang dimainkan oleh klep trebel piano, maka nada-nada klep bassnya harus “leading” (terdepan) 1/8 nada dari nada trebelnya dan harus diturunkan 2 laras di progres 1, bila di progres 2 maka nada-nada bass yang leading dan turun 2 laras ini harus di turunkan lagi 1 laras, bila di progres 3 maka nada-nada bass yang leading dan turun 2 laras ini harus di turunkan lagi 2 laras.
Biasanya jenis alat instrumen melodi ini menggunakan instrumen keyboard. Jenis alat instrumen lainnya selain piano, ada juga Harpsichord, Organ, Pipe keyboard. Jenis alat instrumen lainnya selain piano, ada juga Harpsichord, Organ, Pipe organ, dan lain-lain.
<br/>
Bersambung ... Instrumen musik berikutnya nantikan di diskusi kita berikutnya, dan sempatkan diri Anda untuk membeli lagu-lagunya PMD Sawi-AK, seperti lagu yang berjudul “AKU ANGGOTA KELUARGA ALLAH” di http:///www.sheetmusicplus.com. Di kotak search ketikkan judul lagu AKU ANGGOTA KELUARGA ALLAH, lalu enter, selanjutnya lakukan transaksi pembelian. Layanan kami memuaskan Anda mendapatkan ilmunya, juga mendapatkan lagunya PMD Music Creation membuat ruangan Anda asri, nyaman berirama PMD (Pedang Mata Dua). PMD Music Creation untuk ruangan Anda, bukan untuk telinga Anda, tapi telinga Anda untuk mendengarkan Tuhan yang berfiirman.
<a href="dokumen/KELOMPOK INSTRUMEN MUSIK (bagian 1).htm">Baca Lebih Lanjut
<br/><br/></p>
</div><!--akhir class single-post-->
</div>
</div><!--akhir class buaya--><div class="footer">
<p>@Copyright 2020 | PMD Sesawi- AK | <a href="https://PMD Sesawi-AK.com" target="_blank">SR.Pakpahan,SST</a></p>
</div><!--akhir class footer-->
</body>
</html>
Perhatikan pada kode tag <img src="images/tiga.jpg"> telah digantikan dengan code <img src="dokumen/gbr3.png" > lalu dimasukkan ke tag <a href ...>... </a> dengan tujuan agar gambar bisa di klik dan link membuka dokumen dan tampil di browser. Kemudian pada code HTML itu juga terdapat <a href ... yang fungsinya memanggil dokumen artikel yang berjudul Kelompok Instrumen Musik (bagian 1), yang nama filenya KELOMPOK INSTRUMEN MUSIK (bagian 1).html, yang tersimpan di folder dokumen (perhatikan
cara penulisan nama filenya harus tepat dengan nama file yang
sebenarnya, huruf besar, huruf kecil, dan tanda baca lainnya), dan bila
di klik teks Kelompok Instrumen Musik (bagian 1) ini maka akan link membuka dokumen dan tampil di browser.
Dan di dalam paragraf <p ...</p> juga terdapat <a href="dokumen/KELOMPOK INSTRUMEN MUSIK (bagian 1).htm"> Baca Lebih Lanjut yang fungsinya sama jika teks Baca Lebih Lanjut ini kita klik maka akan link memanggil artikel dan menampilkannya di browser. Hasilnya seperti gambar berikut ini (lihat gambar):
Code HTML Home Page-nya:
<!doctype html>
<html>
<head>
<title>Membuat Website - HTML PMD Sesawi-AK</title>
<link rel="shortcut icon" type="image/png" href="images/favicon.ico"/>
<link href="css/style1.css" type="text/css" rel="stylesheet">
<link href="single pos.html>
<link href="single pos 1.html>
</head>
<body>
<header>
<img src="images/logo pmd.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">
<h3><a href="single pos.html"><img src="dokumen/gbr2.png"> Luni Solar Kreator Allah</a></h3>
<p>Pada mulanya Allah menciptakan bumi dan langit, langit dan bumi yang masih kosong dan gelap gulita merupakan tempat yang diyakini memuat kehidupan dimana Roh Allah melayang layang diatas permukaan air dan Allah mulai berkarya menciptakan segala isi alam semesta di bumi dan di langit. Pada tempat dan isinya tempat itu (langit dan bumi), Allah sebagai Pencipta Maha Agung dan Maha Kuasa menciptakan segala sesuatunya dengan rapi tersusun membentuk suatu jalinan rantai jalan kehidupan dari ujung bumi menuju sorga yang didalam penciptaannya itu Allah mulai merealisasikan rencanaNya SEMUA UNTUK SATU, semua untuk Allah di Sorga. <a href="single pos.html"><strong>Baca Selengkapnya</strong></a></p>
</div><!--akhir class recomendedKiri-->
<div class="recomendedKanan">
<h3><a href="single pos 1.html"><img src="dokumen/gbr3.png">Kelompok Instrumen Musik (Bagian 1)</a></h3>
<p>Kelompok Instrumen musik dalam PMD “Luni Solar” Music oleh PMD Sawi-AK ada sebanyak 7 tapi 8 kelompok instrumen musik yang posisi letak masing-masing instrumen tersusun rapi menurut Instrumen Penjuru Musik (IPM). Pembentukan kelompok instrumen musik ini, prosesnya dapat dilihat pada gambar IPM1 – gambar IPM6 di menu My photo/IPM PMD “Luni Solar” Music.
Adapun 7 tapi 8 kelompok instrumen musik tersebut adalah sebagai berikut
<a href="single pos 1.html"><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>
<a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm" > <img src="dokumen/gbr1.jpg" ><h4>Tutorial Music Studio FL 11</h4></a> <p>Fungsi studio musik adalah wahana para musisi untuk berproduksi atau menghasilkann musik, baik dalam menggambar, mengedit, membangkitkan/pemakaian instrumen, memberi efek pada instrumen atau memixer musik, dan sebagainya sehingga terciptalah lagu yang merdu, nyaring berkualitas tinggi yang layak go publik di terima masyarakat dunia. <a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm"> KLIK </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>Media Sosial, Let's Connect !</h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon 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 subscribe-->
<div class="komentar">
<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 class="footerKiri">
<h3>anone</h3>
</div><!--akhir class Footer Kiri-->
</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>
</div>
</div><!--akhir class buaya-->
<div class="footer">
<p>@Copyright 2020 | PMD Sesawi- AK | <a href="https://PMD Sesawi-AK.com" target="_blank">SR.Pakpahan,SST</a></p>
</div><!--akhir class footer-->
</body>
</html>
Code CSS-nya masih sama dengan yang sebelumnya.
KESIMPULAN:
Semua konten artikel yang hendak akan ditampilkan sebagai single post (pos tunggal) harus dibuatkan masing-masing file HTML single post-nya.
Dan setiap tampilan single post yang terbuka dapat dikembalikan ke tampilan Home Page lagi dengan cara mengklik menu home. Untuk itu pada setiap isi file HTML single post harus ditambahkan link code di bagian menu Home seperti berikut ini:
Dan di dalam paragraf <p ...</p> juga terdapat <a href="dokumen/KELOMPOK INSTRUMEN MUSIK (bagian 1).htm"> Baca Lebih Lanjut yang fungsinya sama jika teks Baca Lebih Lanjut ini kita klik maka akan link memanggil artikel dan menampilkannya di browser. Hasilnya seperti gambar berikut ini (lihat gambar):
Code HTML Home Page-nya:
<!doctype html>
<html>
<head>
<title>Membuat Website - HTML PMD Sesawi-AK</title>
<link rel="shortcut icon" type="image/png" href="images/favicon.ico"/>
<link href="css/style1.css" type="text/css" rel="stylesheet">
<link href="single pos.html>
<link href="single pos 1.html>
</head>
<body>
<header>
<img src="images/logo pmd.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">
<h3><a href="single pos.html"><img src="dokumen/gbr2.png"> Luni Solar Kreator Allah</a></h3>
<p>Pada mulanya Allah menciptakan bumi dan langit, langit dan bumi yang masih kosong dan gelap gulita merupakan tempat yang diyakini memuat kehidupan dimana Roh Allah melayang layang diatas permukaan air dan Allah mulai berkarya menciptakan segala isi alam semesta di bumi dan di langit. Pada tempat dan isinya tempat itu (langit dan bumi), Allah sebagai Pencipta Maha Agung dan Maha Kuasa menciptakan segala sesuatunya dengan rapi tersusun membentuk suatu jalinan rantai jalan kehidupan dari ujung bumi menuju sorga yang didalam penciptaannya itu Allah mulai merealisasikan rencanaNya SEMUA UNTUK SATU, semua untuk Allah di Sorga. <a href="single pos.html"><strong>Baca Selengkapnya</strong></a></p>
</div><!--akhir class recomendedKiri-->
<div class="recomendedKanan">
<h3><a href="single pos 1.html"><img src="dokumen/gbr3.png">Kelompok Instrumen Musik (Bagian 1)</a></h3>
<p>Kelompok Instrumen musik dalam PMD “Luni Solar” Music oleh PMD Sawi-AK ada sebanyak 7 tapi 8 kelompok instrumen musik yang posisi letak masing-masing instrumen tersusun rapi menurut Instrumen Penjuru Musik (IPM). Pembentukan kelompok instrumen musik ini, prosesnya dapat dilihat pada gambar IPM1 – gambar IPM6 di menu My photo/IPM PMD “Luni Solar” Music.
Adapun 7 tapi 8 kelompok instrumen musik tersebut adalah sebagai berikut
<a href="single pos 1.html"><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>
<a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm" > <img src="dokumen/gbr1.jpg" ><h4>Tutorial Music Studio FL 11</h4></a> <p>Fungsi studio musik adalah wahana para musisi untuk berproduksi atau menghasilkann musik, baik dalam menggambar, mengedit, membangkitkan/pemakaian instrumen, memberi efek pada instrumen atau memixer musik, dan sebagainya sehingga terciptalah lagu yang merdu, nyaring berkualitas tinggi yang layak go publik di terima masyarakat dunia. <a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm"> KLIK </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>Media Sosial, Let's Connect !</h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon 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 subscribe-->
<div class="komentar">
<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 class="footerKiri">
<h3>anone</h3>
</div><!--akhir class Footer Kiri-->
</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>
</div>
</div><!--akhir class buaya-->
<div class="footer">
<p>@Copyright 2020 | PMD Sesawi- AK | <a href="https://PMD Sesawi-AK.com" target="_blank">SR.Pakpahan,SST</a></p>
</div><!--akhir class footer-->
</body>
</html>
Code CSS-nya masih sama dengan yang sebelumnya.
KESIMPULAN:
Semua konten artikel yang hendak akan ditampilkan sebagai single post (pos tunggal) harus dibuatkan masing-masing file HTML single post-nya.
Dan setiap tampilan single post yang terbuka dapat dikembalikan ke tampilan Home Page lagi dengan cara mengklik menu home. Untuk itu pada setiap isi file HTML single post harus ditambahkan link code di bagian menu Home seperti berikut ini:
<li><a href="membuatwebsite1.html">Home</a></li>
dengan
maksud membuat link antara file single post yang ada dengan nama file
website tersebut, dan ketika dari tampilan single post kita klik menu
Home, maka akan kembali ke tampilan halaman bwranda (Home Page).
Setelah selesai part 4 dan part 5, silahkan lanjut ke part berikutnya (part 6 Sesi 2).
PART 6
Menambah class RecomendedKiriBawah dan class RecomendedKananBawah dalam Artikel Disarankan sebagai Single post.
Buat 2 file HTML baru lagi, beri namanya single pos2.html dan single pos 3.html. File single pos2.html untuk halaman single pos artikel recomendedKriBawah, dan file single pos3.html untuk halaman single pos artikel recomendedKananBawah, kemudian pada code editor (Sublime Text) buka kedua file baru tersebut, kemudian copy semua code HTML single pos.html lalu pastekan ke lembar kerja single pos2.html, demikian juga copy semua code HTML single pos 1.html lalu pastekan ke lembar kerja single pos3.html,
Pada lembar kerja membuatwebsite1.html tuliskan code HTML berikut ini, letakkan setelah code </div><!--akhir class recomendedKanan--> atau sebelum </div><!--akhir class recomended--> yaitu berikut ini:
<div class="recomendedKiriBawah">
<h3><a href="single-post.html"><img src="dokumen/gbr2.png">Luni Solar Kreator Allah</a></h3>
<p>Pada mulanya Allah menciptakan bumi dan langit, langit dan bumi yang masih kosong dan gelap gulita merupakan tempat yang diyakini memuat kehidupan dimana Roh Allah melayang layang diatas permukaan air dan Allah mulai berkarya menciptakan segala isi alam semesta di bumi dan di langit. Pada tempat dan isinya tempat itu (langit dan bumi), Allah sebagai Pencipta Maha Agung dan Maha Kuasa menciptakan segala sesuatunya dengan rapi tersusun membentuk suatu jalinan rantai jalan kehidupan dari ujung bumi menuju sorga yang didalam penciptaannya itu Allah mulai merealisasikan rencanaNya SEMUA UNTUK SATU, semua untuk Allah di Sorga. <a href="single-post.html"><strong>Baca Selengkapnya</strong></a></p>
</div><!--akhir class recomendedKiriBawah-->
<div class="recomendedKananBawah">
<h3><a href="single pos 1.html"><img src="dokumen/gbr3.png">Kelompok Instrumen Musik (Bagian 1)</a></h3>
<p>Kelompok Instrumen musik dalam PMD “Luni Solar” Music oleh PMD Sawi-AK ada sebanyak 7 tapi 8 kelompok instrumen musik yang posisi letak masing-masing instrumen tersusun rapi menurut Instrumen Penjuru Musik (IPM). Pembentukan kelompok instrumen musik ini, prosesnya dapat dilihat pada gambar IPM1 – gambar IPM6 di menu My photo/IPM PMD “Luni Solar” Music.
Adapun 7 tapi 8 kelompok instrumen musik tersebut adalah sebagai berikut
<a href="single pos 1.html"><strong>Baca Selengkapnya</strong></a></p>
</div><!--akhir class recomendedKananBawah-->
Kemudian di dalam head ( <head> </head>) tambahkan code berikut ini: <link href="single pos 2.html> <link href="single pos 3.html>
Sehingga diperoleh hasil pengcodingan untuk file membuatwebsiite1.html, yaitu berupa
Code HTML Home Page
<!doctype html>
<html>
<head>
<title>Membuat Website - HTML PMD Sesawi-AK</title>
<link rel="shortcut icon" type="image/png" href="images/favicon.ico"/>
<link href="css/style1.css" type="text/css" rel="stylesheet">
<link href="single pos.html>
<link href="single pos 1.html>
<link href="single pos 2.html>
<link href="single pos 3.html>
</head>
<body>
<header>
<img src="images/logo pmd.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">
<h3><a href="single pos.html"><img src="dokumen/gbr2.png"> Luni Solar Kreator Allah</a></h3>
<p>Pada mulanya Allah menciptakan bumi dan langit, langit dan bumi yang masih kosong dan gelap gulita merupakan tempat yang diyakini memuat kehidupan dimana Roh Allah melayang layang diatas permukaan air dan Allah mulai berkarya menciptakan segala isi alam semesta di bumi dan di langit. Pada tempat dan isinya tempat itu (langit dan bumi), Allah sebagai Pencipta Maha Agung dan Maha Kuasa menciptakan segala sesuatunya dengan rapi tersusun membentuk suatu jalinan rantai jalan kehidupan dari ujung bumi menuju sorga yang didalam penciptaannya itu Allah mulai merealisasikan rencanaNya SEMUA UNTUK SATU, semua untuk Allah di Sorga. <a href="single pos.html"><strong>Baca Selengkapnya</strong></a></p>
</div><!--akhir class recomendedKiri-->
<div class="recomendedKanan">
<h3><a href="single pos 1.html"><img src="dokumen/gbr3.png">Kelompok Instrumen Musik (Bagian 1)</a></h3>
<p>Kelompok Instrumen musik dalam PMD “Luni Solar” Music oleh PMD Sawi-AK ada sebanyak 7 tapi 8 kelompok instrumen musik yang posisi letak masing-masing instrumen tersusun rapi menurut Instrumen Penjuru Musik (IPM). Pembentukan kelompok instrumen musik ini, prosesnya dapat dilihat pada gambar IPM1 – gambar IPM6 di menu My photo/IPM PMD “Luni Solar” Music.
Adapun 7 tapi 8 kelompok instrumen musik tersebut adalah sebagai berikut
<a href="single pos 1.html"><strong>Baca Selengkapnya</strong></a></p>
</div><!--akhir class recomendedKanan-->
<div class="recomendedKiriBawah">
<h3><a href="single-post.html"><img src="dokumen/gbr2.png">Luni Solar Kreator Allah</a></h3>
<p>Pada mulanya Allah menciptakan bumi dan langit, langit dan bumi yang masih kosong dan gelap gulita merupakan tempat yang diyakini memuat kehidupan dimana Roh Allah melayang layang diatas permukaan air dan Allah mulai berkarya menciptakan segala isi alam semesta di bumi dan di langit. Pada tempat dan isinya tempat itu (langit dan bumi), Allah sebagai Pencipta Maha Agung dan Maha Kuasa menciptakan segala sesuatunya dengan rapi tersusun membentuk suatu jalinan rantai jalan kehidupan dari ujung bumi menuju sorga yang didalam penciptaannya itu Allah mulai merealisasikan rencanaNya SEMUA UNTUK SATU, semua untuk Allah di Sorga. <a href="single-post.html"><strong>Baca Selengkapnya</strong></a></p>
</div><!--akhir class recomendedKiriBawah-->
<div class="recomendedKananBawah">
<h3><a href="single pos 1.html"><img src="dokumen/gbr3.png">Kelompok Instrumen Musik (Bagian 1)</a></h3>
<p>Kelompok Instrumen musik dalam PMD “Luni Solar” Music oleh PMD Sawi-AK ada sebanyak 7 tapi 8 kelompok instrumen musik yang posisi letak masing-masing instrumen tersusun rapi menurut Instrumen Penjuru Musik (IPM). Pembentukan kelompok instrumen musik ini, prosesnya dapat dilihat pada gambar IPM1 – gambar IPM6 di menu My photo/IPM PMD “Luni Solar” Music.
Adapun 7 tapi 8 kelompok instrumen musik tersebut adalah sebagai berikut
<a href="single pos 1.html"><strong>Baca Selengkapnya</strong></a></p>
</div><!--akhir class recomendedKananBawah-->
</div><!--akhir class recomended-->
<div class="buaya">
<div class="widget">
<div class="artikelTerlaris">
<h3>Artikel Terlaris</h3>
<a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm" > <img src="dokumen/gbr1.jpg" ><h4>Tutorial Music Studio FL 11</h4></a> <p>Fungsi studio musik adalah wahana para musisi untuk berproduksi atau menghasilkann musik, baik dalam menggambar, mengedit, membangkitkan/pemakaian instrumen, memberi efek pada instrumen atau memixer musik, dan sebagainya sehingga terciptalah lagu yang merdu, nyaring berkualitas tinggi yang layak go publik di terima masyarakat dunia. <a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm"> KLIK </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>Media Sosial, Let's Connect !</h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon 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 subscribe-->
<div class="komentar">
<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 class="footerKiri">
<h3>anone</h3>
</div><!--akhir class Footer Kiri-->
</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>
</div>
</div><!--akhir class buaya-->
<div class="footer">
<p>@Copyright 2020 | PMD Sesawi- AK | <a href="https://PMD Sesawi-AK.com" target="_blank">SR.Pakpahan,SST</a></p>
</div><!--akhir class footer-->
</body>
</html>
Kemudian class RecomendedKiriBawah dan class RecomendedKananBawah diberi gaya (style) di lembar kerja file style1.CSS-nya, sekaligus mengedit pengaturan code CSS-nya class RecomendedKiri dan class RecomendedKanan, dan juga code CSS-nya class buaya Artikel Baru, agar tampilan ke-empat Artikel Disarankan tersebut kelihatan rapi (4 gambar dan 4 artikel pada class recomended di halaman beranda (home page). Sehingga diperoleh hasilnya pengkodingan di style1.CSS.
Code CSS:
* {margin: 0; padding: 0;}
body {
width: 900px;
margin: auto;
}
header {
width: 900px;
height: 240px;
}
header img {
width: 900px;
height: 240px;
}
menu {
width: 880px;
height: 30px;
background-color: blue;
padding: 10px;
margin-top: 3px;
}
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: 3px;
height: 610px;
max-height: 620px;
}
.recomended h1 {
text-align: center;
}
.recomended .recomendedKiri {
height: 270px;
max-height: 280px;
width: 433px;
float: left;
margin: 0px 10px 5px 10px;
}
.recomended img {
width: 150px;
height: 100px;
float: left;
margin: 5px 5px 5px 5px;
box-shadow: 2px 2px 2px #333;
}
.recomended p {
text-align: justify;
}
.recomended .recomendedKanan {
height: 270px;
max-height: 280px;
width: 433px;
margin: 0px 0px 5px 5px;
float: left;
}
.recomended a {
text-decoration: none;
color: #140fcd;
}
.recomended a:hover {
color: #000;
}
.recomended h3 {
color: #140fcd;
}
.recomended .recomendedKiriBawah {
border-top: 5px solid #333;
height: 270px;
max-height: 280px;
width: 433px;
float: left;
margin: 5px 10px 5px 10px;
}
.recomended img {
width: 150px;
height: 100px;
float: left;
margin: 5px 5px 5px 5px;
box-shadow: 2px 2px 2px #333;
}
.recomended p {
text-align: justify;
}
.recomended h3 {
margin-top: 5px;
color: #140fcd;
}
.recomended .recomendedKananBawah {
border-top: 5px solid #333;
height: 270px;
max-height: 280px;
width: 433px;
margin: 5px 0px 5px 5px;
float: left;
}
.recomended a {
text-decoration: none;
color: #140fcd;
}
.recomended a:hover {
color: #000;
}
.recomended h3 {
margin-top: 5px;
color: #140fcd;
}
/* akhir class recomended */
/* class buaya */
.buaya {
width: 100%;
overflow: hidden;
background-color: #333;
margin-top: 3px;
}
/* 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;
height: 450px;
}
.buaya .artikelTerbaru h2 {
margin-left: 5px;
}
.buaya .artikelTerbaru p {
margin: 0 5px;
text-align: justify;
}
.buaya .artikelTerbaru a {
text-decoration: none;
color: #000;
}
/* 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 Komentar */
.buaya .widget .komentar {
width: 100%;
margin: 0 0 5px;
border-top: 5px solid #333;
padding-top: 20px;
}
.buaya .widget .komentar form {
width: 100%;
padding: 0 5px 0;
}
.buaya .widget .komentar h3 {
text-align: center;
margin: 10px 0 10px;
}
.buaya .widget .komentar input[type="text"] {
width: 95%;
height: 20px;
margin-bottom: 5px;
}
.buaya .widget .komentar input[type="email"] {
width: 95%;
height: 20px;
margin-bottom: 5px;
}
.buaya .widget .komentar textarea {
width: 95%;
max-width: 95%;
height: 200px;
max-height: 250px;
margin-bottom: 5px;
}
.buaya .widget .komentar input[type="submit"] {
padding: 5px;
cursor: pointer;
margin-bottom: 5px;
margin-left: 50px;
}
/* akhir class komentar */
.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 Footer Kiri */
.buaya .widget .footerKiri {
margin: 0 px;
border-top: 4px solid #333;
height: 50px;
background-color: grey;
margin-top: 8px;
}
.buaya .widget .footerKiri h3 {
text-align: center;
margin: 10px 0 10px;
color: grey
}
/* akhir class Footer Kiri */
/* class Footer Kanan */
.footer {
width: 100%;
height: 50px;
background-color: grey;
margin-top: 3px;
position: relative;
margin-left: 245px;
width: 660px;
}
.footer p {
color: #fff;
position: absolute;
bottom: 12.5px;
left: 150px;
}
.footer p a {
text-decoration: none;
color: #fff;
}
.footer p a:hover {
color: #f90;
}
/* akhir class Footer Kanan */
Setelah berhasil membuat kode diatas, silahkan Save dan lihat hasilnya halaman beranda (home page) di browser. (lihat gambar)
Code HTML – Halaman Beranda (Home Page) untuk single pos 2 adalah sama dengan Code HTML – Halaman Beranda (Home Page) single pos, hanya diperlukan mengganti gambar dan artikel lainnya.
Code HTML – Halaman Beranda (Home Page) untuk single pos 3 adalah sama dengan Code HTML – Halaman Beranda (Home Page) single pos 1, hanya diperlukan mengganti gambar dan artikel lainnya.
Silahkan di-Save dan lihat hasilnya halaman single pos 3 di browser. (lihat gambar)
Menambah class RecomendedKiriBawah dan class RecomendedKananBawah dalam Artikel Disarankan sebagai Single post.
Buat 2 file HTML baru lagi, beri namanya single pos2.html dan single pos 3.html. File single pos2.html untuk halaman single pos artikel recomendedKriBawah, dan file single pos3.html untuk halaman single pos artikel recomendedKananBawah, kemudian pada code editor (Sublime Text) buka kedua file baru tersebut, kemudian copy semua code HTML single pos.html lalu pastekan ke lembar kerja single pos2.html, demikian juga copy semua code HTML single pos 1.html lalu pastekan ke lembar kerja single pos3.html,
Pada lembar kerja membuatwebsite1.html tuliskan code HTML berikut ini, letakkan setelah code </div><!--akhir class recomendedKanan--> atau sebelum </div><!--akhir class recomended--> yaitu berikut ini:
<div class="recomendedKiriBawah">
<h3><a href="single-post.html"><img src="dokumen/gbr2.png">Luni Solar Kreator Allah</a></h3>
<p>Pada mulanya Allah menciptakan bumi dan langit, langit dan bumi yang masih kosong dan gelap gulita merupakan tempat yang diyakini memuat kehidupan dimana Roh Allah melayang layang diatas permukaan air dan Allah mulai berkarya menciptakan segala isi alam semesta di bumi dan di langit. Pada tempat dan isinya tempat itu (langit dan bumi), Allah sebagai Pencipta Maha Agung dan Maha Kuasa menciptakan segala sesuatunya dengan rapi tersusun membentuk suatu jalinan rantai jalan kehidupan dari ujung bumi menuju sorga yang didalam penciptaannya itu Allah mulai merealisasikan rencanaNya SEMUA UNTUK SATU, semua untuk Allah di Sorga. <a href="single-post.html"><strong>Baca Selengkapnya</strong></a></p>
</div><!--akhir class recomendedKiriBawah-->
<div class="recomendedKananBawah">
<h3><a href="single pos 1.html"><img src="dokumen/gbr3.png">Kelompok Instrumen Musik (Bagian 1)</a></h3>
<p>Kelompok Instrumen musik dalam PMD “Luni Solar” Music oleh PMD Sawi-AK ada sebanyak 7 tapi 8 kelompok instrumen musik yang posisi letak masing-masing instrumen tersusun rapi menurut Instrumen Penjuru Musik (IPM). Pembentukan kelompok instrumen musik ini, prosesnya dapat dilihat pada gambar IPM1 – gambar IPM6 di menu My photo/IPM PMD “Luni Solar” Music.
Adapun 7 tapi 8 kelompok instrumen musik tersebut adalah sebagai berikut
<a href="single pos 1.html"><strong>Baca Selengkapnya</strong></a></p>
</div><!--akhir class recomendedKananBawah-->
Kemudian di dalam head ( <head> </head>) tambahkan code berikut ini: <link href="single pos 2.html> <link href="single pos 3.html>
Sehingga diperoleh hasil pengcodingan untuk file membuatwebsiite1.html, yaitu berupa
Code HTML Home Page
<!doctype html>
<html>
<head>
<title>Membuat Website - HTML PMD Sesawi-AK</title>
<link rel="shortcut icon" type="image/png" href="images/favicon.ico"/>
<link href="css/style1.css" type="text/css" rel="stylesheet">
<link href="single pos.html>
<link href="single pos 1.html>
<link href="single pos 2.html>
<link href="single pos 3.html>
</head>
<body>
<header>
<img src="images/logo pmd.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">
<h3><a href="single pos.html"><img src="dokumen/gbr2.png"> Luni Solar Kreator Allah</a></h3>
<p>Pada mulanya Allah menciptakan bumi dan langit, langit dan bumi yang masih kosong dan gelap gulita merupakan tempat yang diyakini memuat kehidupan dimana Roh Allah melayang layang diatas permukaan air dan Allah mulai berkarya menciptakan segala isi alam semesta di bumi dan di langit. Pada tempat dan isinya tempat itu (langit dan bumi), Allah sebagai Pencipta Maha Agung dan Maha Kuasa menciptakan segala sesuatunya dengan rapi tersusun membentuk suatu jalinan rantai jalan kehidupan dari ujung bumi menuju sorga yang didalam penciptaannya itu Allah mulai merealisasikan rencanaNya SEMUA UNTUK SATU, semua untuk Allah di Sorga. <a href="single pos.html"><strong>Baca Selengkapnya</strong></a></p>
</div><!--akhir class recomendedKiri-->
<div class="recomendedKanan">
<h3><a href="single pos 1.html"><img src="dokumen/gbr3.png">Kelompok Instrumen Musik (Bagian 1)</a></h3>
<p>Kelompok Instrumen musik dalam PMD “Luni Solar” Music oleh PMD Sawi-AK ada sebanyak 7 tapi 8 kelompok instrumen musik yang posisi letak masing-masing instrumen tersusun rapi menurut Instrumen Penjuru Musik (IPM). Pembentukan kelompok instrumen musik ini, prosesnya dapat dilihat pada gambar IPM1 – gambar IPM6 di menu My photo/IPM PMD “Luni Solar” Music.
Adapun 7 tapi 8 kelompok instrumen musik tersebut adalah sebagai berikut
<a href="single pos 1.html"><strong>Baca Selengkapnya</strong></a></p>
</div><!--akhir class recomendedKanan-->
<div class="recomendedKiriBawah">
<h3><a href="single-post.html"><img src="dokumen/gbr2.png">Luni Solar Kreator Allah</a></h3>
<p>Pada mulanya Allah menciptakan bumi dan langit, langit dan bumi yang masih kosong dan gelap gulita merupakan tempat yang diyakini memuat kehidupan dimana Roh Allah melayang layang diatas permukaan air dan Allah mulai berkarya menciptakan segala isi alam semesta di bumi dan di langit. Pada tempat dan isinya tempat itu (langit dan bumi), Allah sebagai Pencipta Maha Agung dan Maha Kuasa menciptakan segala sesuatunya dengan rapi tersusun membentuk suatu jalinan rantai jalan kehidupan dari ujung bumi menuju sorga yang didalam penciptaannya itu Allah mulai merealisasikan rencanaNya SEMUA UNTUK SATU, semua untuk Allah di Sorga. <a href="single-post.html"><strong>Baca Selengkapnya</strong></a></p>
</div><!--akhir class recomendedKiriBawah-->
<div class="recomendedKananBawah">
<h3><a href="single pos 1.html"><img src="dokumen/gbr3.png">Kelompok Instrumen Musik (Bagian 1)</a></h3>
<p>Kelompok Instrumen musik dalam PMD “Luni Solar” Music oleh PMD Sawi-AK ada sebanyak 7 tapi 8 kelompok instrumen musik yang posisi letak masing-masing instrumen tersusun rapi menurut Instrumen Penjuru Musik (IPM). Pembentukan kelompok instrumen musik ini, prosesnya dapat dilihat pada gambar IPM1 – gambar IPM6 di menu My photo/IPM PMD “Luni Solar” Music.
Adapun 7 tapi 8 kelompok instrumen musik tersebut adalah sebagai berikut
<a href="single pos 1.html"><strong>Baca Selengkapnya</strong></a></p>
</div><!--akhir class recomendedKananBawah-->
</div><!--akhir class recomended-->
<div class="buaya">
<div class="widget">
<div class="artikelTerlaris">
<h3>Artikel Terlaris</h3>
<a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm" > <img src="dokumen/gbr1.jpg" ><h4>Tutorial Music Studio FL 11</h4></a> <p>Fungsi studio musik adalah wahana para musisi untuk berproduksi atau menghasilkann musik, baik dalam menggambar, mengedit, membangkitkan/pemakaian instrumen, memberi efek pada instrumen atau memixer musik, dan sebagainya sehingga terciptalah lagu yang merdu, nyaring berkualitas tinggi yang layak go publik di terima masyarakat dunia. <a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm"> KLIK </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>Media Sosial, Let's Connect !</h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon 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 subscribe-->
<div class="komentar">
<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 class="footerKiri">
<h3>anone</h3>
</div><!--akhir class Footer Kiri-->
</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>
</div>
</div><!--akhir class buaya-->
<div class="footer">
<p>@Copyright 2020 | PMD Sesawi- AK | <a href="https://PMD Sesawi-AK.com" target="_blank">SR.Pakpahan,SST</a></p>
</div><!--akhir class footer-->
</body>
</html>
Kemudian class RecomendedKiriBawah dan class RecomendedKananBawah diberi gaya (style) di lembar kerja file style1.CSS-nya, sekaligus mengedit pengaturan code CSS-nya class RecomendedKiri dan class RecomendedKanan, dan juga code CSS-nya class buaya Artikel Baru, agar tampilan ke-empat Artikel Disarankan tersebut kelihatan rapi (4 gambar dan 4 artikel pada class recomended di halaman beranda (home page). Sehingga diperoleh hasilnya pengkodingan di style1.CSS.
Code CSS:
* {margin: 0; padding: 0;}
body {
width: 900px;
margin: auto;
}
header {
width: 900px;
height: 240px;
}
header img {
width: 900px;
height: 240px;
}
menu {
width: 880px;
height: 30px;
background-color: blue;
padding: 10px;
margin-top: 3px;
}
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: 3px;
height: 610px;
max-height: 620px;
}
.recomended h1 {
text-align: center;
}
.recomended .recomendedKiri {
height: 270px;
max-height: 280px;
width: 433px;
float: left;
margin: 0px 10px 5px 10px;
}
.recomended img {
width: 150px;
height: 100px;
float: left;
margin: 5px 5px 5px 5px;
box-shadow: 2px 2px 2px #333;
}
.recomended p {
text-align: justify;
}
.recomended .recomendedKanan {
height: 270px;
max-height: 280px;
width: 433px;
margin: 0px 0px 5px 5px;
float: left;
}
.recomended a {
text-decoration: none;
color: #140fcd;
}
.recomended a:hover {
color: #000;
}
.recomended h3 {
color: #140fcd;
}
.recomended .recomendedKiriBawah {
border-top: 5px solid #333;
height: 270px;
max-height: 280px;
width: 433px;
float: left;
margin: 5px 10px 5px 10px;
}
.recomended img {
width: 150px;
height: 100px;
float: left;
margin: 5px 5px 5px 5px;
box-shadow: 2px 2px 2px #333;
}
.recomended p {
text-align: justify;
}
.recomended h3 {
margin-top: 5px;
color: #140fcd;
}
.recomended .recomendedKananBawah {
border-top: 5px solid #333;
height: 270px;
max-height: 280px;
width: 433px;
margin: 5px 0px 5px 5px;
float: left;
}
.recomended a {
text-decoration: none;
color: #140fcd;
}
.recomended a:hover {
color: #000;
}
.recomended h3 {
margin-top: 5px;
color: #140fcd;
}
/* akhir class recomended */
/* class buaya */
.buaya {
width: 100%;
overflow: hidden;
background-color: #333;
margin-top: 3px;
}
/* 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;
height: 450px;
}
.buaya .artikelTerbaru h2 {
margin-left: 5px;
}
.buaya .artikelTerbaru p {
margin: 0 5px;
text-align: justify;
}
.buaya .artikelTerbaru a {
text-decoration: none;
color: #000;
}
/* 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 Komentar */
.buaya .widget .komentar {
width: 100%;
margin: 0 0 5px;
border-top: 5px solid #333;
padding-top: 20px;
}
.buaya .widget .komentar form {
width: 100%;
padding: 0 5px 0;
}
.buaya .widget .komentar h3 {
text-align: center;
margin: 10px 0 10px;
}
.buaya .widget .komentar input[type="text"] {
width: 95%;
height: 20px;
margin-bottom: 5px;
}
.buaya .widget .komentar input[type="email"] {
width: 95%;
height: 20px;
margin-bottom: 5px;
}
.buaya .widget .komentar textarea {
width: 95%;
max-width: 95%;
height: 200px;
max-height: 250px;
margin-bottom: 5px;
}
.buaya .widget .komentar input[type="submit"] {
padding: 5px;
cursor: pointer;
margin-bottom: 5px;
margin-left: 50px;
}
/* akhir class komentar */
.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 Footer Kiri */
.buaya .widget .footerKiri {
margin: 0 px;
border-top: 4px solid #333;
height: 50px;
background-color: grey;
margin-top: 8px;
}
.buaya .widget .footerKiri h3 {
text-align: center;
margin: 10px 0 10px;
color: grey
}
/* akhir class Footer Kiri */
/* class Footer Kanan */
.footer {
width: 100%;
height: 50px;
background-color: grey;
margin-top: 3px;
position: relative;
margin-left: 245px;
width: 660px;
}
.footer p {
color: #fff;
position: absolute;
bottom: 12.5px;
left: 150px;
}
.footer p a {
text-decoration: none;
color: #fff;
}
.footer p a:hover {
color: #f90;
}
/* akhir class Footer Kanan */
Setelah berhasil membuat kode diatas, silahkan Save dan lihat hasilnya halaman beranda (home page) di browser. (lihat gambar)
Code HTML – Halaman Beranda (Home Page) untuk single pos 3 adalah sama dengan Code HTML – Halaman Beranda (Home Page) single pos 1, hanya diperlukan mengganti gambar dan artikel lainnya.
Silahkan di-Save dan lihat hasilnya halaman single pos 3 di browser. (lihat gambar)
PART 6
MENU DAN SUB SUB MENU
Secara default, menu ditampilkan sebagai penuntun arah bagi pengunjung berselancar di website agar tidak tersesat. Tapi saat ini sudah banyak sekali situs web yang membuat menu dengan sub nya bahkan beberapa tingkatan sub sub menu seperti yang akan kita bahas pada Part 6 ini.) a
Kita akan membuat Dropdown Menu (cara membuat sub menu tersembunyi, tapi bisa muncul ketika di klik). Buka file HTML sebelumnya yang bernama membuatwebsite1.html di lembar kerja code editor (Sublime Text), perhatikan pada bagian menu kita sudah membuat code HTML-sebelumnya yaitu:
<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>
<menu>
<nav><ul>
<li><a href="">Home</a>
<ul><li> <a href="ul.html">Tentang Kami</a></li>
</ul>
<li>Artikel
<ul><li>Artikel Terlaris
<ul><li><a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm">TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1)</a></li></ul>
<li> Artikel Terbaru
<ul><li><a href="dokumen/DIBERKATI DAN MEMBERKATI.htm">DIBERKATI DAN MEMBERKATI</a></li></ul>
<li>Artikel Disaran
<ul><li><a href="PEMBAHARUAN KALENDER 1.htm">PEMBAHARUAN KALENDER</a></li></ul>
</li></li></li></li></ul></li>
<li>Tutorial
<ul><li> <a href="ul.html">Artikel Terbaru</a></li>
<li> <a href="ul.html">Artikel Musik</a></li>
</ul>
<li>Sabda
<ul><li> Sabda Minggu
<ul><li> <a href="dokumen/DIBERKATI DAN MEMBERKATI.htm">DIBERKATI DAN MEMBERKATI</a></li></ul>
<li> <a href="ul.html">Roti Hidup</a></li>
</ul>
<li>Design
<ul><li> <a href="ul.html">Artikel Terbaru</a></li>
<li> <a href="ul.html">Artikel Musik</a></li>
</ul>
<li>Support
<ul><li> <a href="ul.html">Artikel Terbaru</a></li>
<li> <a href="ul.html">Artikel Musik</a></li>
</ul>
<li><a href="">Kontak</a></li>
</ul></nav>
</menu>
.
Code HTML tersebut adalah code untuk membuat Menu dan Sub Menu Dropdown, disini saya ada membuat 7 buah Menu yaitu: Home - Artikel - Tutorial - Sabda - Design - Support - Kontak, dan dibawah menu tersebut ada lagi beberapa Sub Menu. Kalian bisa menggantikan nama Menu-nya dan nama Sub-Menunya sesuai dengan keinginan kalian merancang Menu Website kalian sendiri.
Disini saya menggunakan tag nav kemudian saya masukkan unordered list alias ul dan didalam nya saya kasih list alias li , setelah itu didalam li nya saya kasih a href ... (gunanya untuk memasukkan link, karena menu pasti ada link didalamnya. Pada bagian membuat submenu nya, dimulai lagi dari dengan memasukkan ul lagi pada bagian menu (list) yang akan dijadikan dropdown, misalnya pada contoh diatas saya akan membuat menu “Artikel” menjadi dropdown alias punya sub menu didalamnya. Maka sebelum tag penutup li pada “Artikel” kita masukkan menu baru lagi alias ul seperti biasa.
Kemudian buka file CSS sebelumnya yang bernama style1.css di lembar kerja code editor (Sublime Text), perhatikan pada bagian menu kita sudah membuat code CSS-sebelumnya yaitu:
.menu {
width: 880px;
height: 30px;
background-color: blue;
padding: 10px;
margin-top: 3px;
}
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;
}
/* menu */
menu {
width: 880px;
height: 20px;
background-color: blue;
padding: 10px;
margin-top: 3px;
}
menu li {
list-style: none;
float: left;
margin-right: 20px;
margin-top: 0px;
color: #fff;
}
menu li a {
text-decoration: none;
color: #fff;
}
menu li a:hover {
color: orange;
}
/* akhir menu */
/* nav menu */
nav {
position: relative;
top: 0px;
height: 20px;
line-height: 30px;
background-color: blue;
width: 880px;
margin: auto;
}
nav ul {
list-style: none;
}
nav ul li a {
text-decoration: none;
color: #fff;
float: left;
width: 100px;
display: block;
text-align: center;
}
nav ul li a:hover {
background: blue;
display: block;
}
nav ul li:hover ul {
display: block;
}
nav ul ul {
display: none;
position: absolute;
background: #ff0000;
top: 15px;
margin: 11px;
float: left;
}
/* akhir nav menu */
Selanjutnya pada folder dokumen, kita tambahkan file gambar yang nama filenya diberi gbr1 yang berekstensi png, juga tambahkan file artikel nama file saya di sini adalah DIBERKATI DAN MEMBERKATI yang telah dikonversikan dari MSWord (docx) ke dokumen html sehingga file tersebut berekstensi htm.
Maka akan diperoleh hasilnya berikut ini (lihat gambar):
Bila di klik menu Home maka akan ada lagi sub menu Tentang Kami (home bila di klik maka akan menampilkan halaman beranda/home page website kita, dan Tentang kami bisa di link-kan ke suatu file). Bila di klik menu Artikel maka akan ada lagi sub menu Artikel Terbaru, Artikel Terlaris, dan Artikel Disarankan, dan masing-masing sub menu tersebut bisa link menggunakan fungsi <a href ... dan menampilkan halaman dokumen dimana sumber file dokumen tersebut tersimpan. Bila di klik menu Tutorial, Design atau menu Support maka akan ada lagi sub menunya Artikel Terbaru, dan Artikel Musik. Bila di klik menu Sabda maka akan ada lagi sub menu Sabda Mingguan, dan Roti Hidup, dimana bagian sub menu dalam keadaan tersembunyi, tapi bisa muncul bila kita klik menu diatasnya.
Sampai pada Part 6 Sesi 2 ini, maka hasil pengkodingan yang diperoleh adalah:
Secara keseluruhan, inilah hasil pengkodingan HTML-CSS sehingga terbentuk sebuah Website.
Code HTML Halaman Beranda (Home Page):
<!doctype html>
<html>
<head>
<title>Membuat Website - HTML PMD Sesawi-AK</title>
<link rel="shortcut icon" type="image/png" href="images/favicon.ico"/>
<link href="css/style1.css" type="text/css" rel="stylesheet">
<link href="single pos.html>
<link href="single pos 1.html>
<link href="single pos 2.html>
<link href="single pos 3.html>
</head>
<body>
<header>
<img src="images/logo pmd.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">
<h3><a href="single pos.html"><img src="dokumen/gbr2.png"> Luni Solar Kreator Allah</a></h3>
<p>Pada mulanya Allah menciptakan bumi dan langit, langit dan bumi yang masih kosong dan gelap gulita merupakan tempat yang diyakini memuat kehidupan dimana Roh Allah melayang layang diatas permukaan air dan Allah mulai berkarya menciptakan segala isi alam semesta di bumi dan di langit. Pada tempat dan isinya tempat itu (langit dan bumi), Allah sebagai Pencipta Maha Agung dan Maha Kuasa menciptakan segala sesuatunya dengan rapi tersusun membentuk suatu jalinan rantai jalan kehidupan dari ujung bumi menuju sorga yang didalam penciptaannya itu Allah mulai merealisasikan rencanaNya SEMUA UNTUK SATU, semua untuk Allah di Sorga. <a href="single pos.html"><strong>Baca Selengkapnya</strong></a></p>
</div><!--akhir class recomendedKiri-->
<div class="recomendedKanan">
<h3><a href="single pos 1.html"><img src="dokumen/gbr3.png">Kelompok Instrumen Musik (Bagian 1)</a></h3>
<p>Kelompok Instrumen musik dalam PMD “Luni Solar” Music oleh PMD Sawi-AK ada sebanyak 7 tapi 8 kelompok instrumen musik yang posisi letak masing-masing instrumen tersusun rapi menurut Instrumen Penjuru Musik (IPM). Pembentukan kelompok instrumen musik ini, prosesnya dapat dilihat pada gambar IPM1 – gambar IPM6 di menu My photo/IPM PMD “Luni Solar” Music.
Adapun 7 tapi 8 kelompok instrumen musik tersebut adalah sebagai berikut
<a href="single pos 1.html"><strong>Baca Selengkapnya</strong></a></p>
</div><!--akhir class recomendedKanan-->
<div class="recomendedKiriBawah">
<h3><a href="single pos 2.html"><img src="dokumen/gbr2.png">Luni Solar Kreator Allah</a></h3>
<p>Pada mulanya Allah menciptakan bumi dan langit, langit dan bumi yang masih kosong dan gelap gulita merupakan tempat yang diyakini memuat kehidupan dimana Roh Allah melayang layang diatas permukaan air dan Allah mulai berkarya menciptakan segala isi alam semesta di bumi dan di langit. Pada tempat dan isinya tempat itu (langit dan bumi), Allah sebagai Pencipta Maha Agung dan Maha Kuasa menciptakan segala sesuatunya dengan rapi tersusun membentuk suatu jalinan rantai jalan kehidupan dari ujung bumi menuju sorga yang didalam penciptaannya itu Allah mulai merealisasikan rencanaNya SEMUA UNTUK SATU, semua untuk Allah di Sorga. <a href="single-post.html"><strong>Baca Selengkapnya</strong></a></p>
<div class="share">
<h3>Share This Post</h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon pinterest.png"></a>
</div><!--akhir class share--><br/>
</div><!--akhir class recomendedKiriBawah-->
<div class="recomendedKananBawah">
<h3><a href="single pos 1.html"><img src="dokumen/gbr3.png">Kelompok Instrumen Musik (Bagian 1)</a></h3>
<p>Kelompok Instrumen musik dalam PMD “Luni Solar” Music oleh PMD Sawi-AK ada sebanyak 7 tapi 8 kelompok instrumen musik yang posisi letak masing-masing instrumen tersusun rapi menurut Instrumen Penjuru Musik (IPM). Pembentukan kelompok instrumen musik ini, prosesnya dapat dilihat pada gambar IPM1 – gambar IPM6 di menu My photo/IPM PMD “Luni Solar” Music.
Adapun 7 tapi 8 kelompok instrumen musik tersebut adalah sebagai berikut
<a href="single pos 1.html"><strong>Baca Selengkapnya</strong></a></p>
</div><!--akhir class recomendedKananBawah-->
</div><!--akhir class recomended-->
<div class="buaya">
<div class="widget">
<div class="artikelTerlaris">
<h3>Artikel Terlaris</h3>
<a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm" > <img src="dokumen/gbr1.jpg" ><h4>Tutorial Music Studio FL 11</h4></a> <p>Fungsi studio musik adalah wahana para musisi untuk berproduksi atau menghasilkann musik, baik dalam menggambar, mengedit, membangkitkan/pemakaian instrumen, memberi efek pada instrumen atau memixer musik, dan sebagainya sehingga terciptalah lagu yang merdu, nyaring berkualitas tinggi yang layak go publik di terima masyarakat dunia. <a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm"> KLIK </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>Media Sosial, Let's Connect !</h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon 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 subscribe-->
<div class="komentar">
<h3>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 class="footerKiri">
<h3>anone</h3>
</div><!--akhir class Footer Kiri-->
</div><!--akhir class footerKirie-->
<div class="artikelTerbaru">
<a href=""></a>
<a href="dokumen/DIBERKATI DAN MEMBERKATI.htm"><img src="dokumen/gbr4.png"><h2>DIBERKATI DAN MEMBERKATI</h2></a>
<p>Mazmur 37:25-26
<br/>37:25 Dahulu aku muda, sekarang telah menjadi tua, tetapi tidak pernah kulihat orang benar ditinggalkan, atau anak cucunya meminta-minta roti; 37:26 tiap hari ia menaruh belas kasihan dan memberi pinjaman, dan anak cucunya menjadi berkat. </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>
<div class="pagination">
<li class="kiri"><a href="">← Sebelumnya</a></li>
<li class="kanan"><a href="">Selanjutnya →</a></li>
</div><!--akhir class pagination-->
</div><!--akhir class Artikel Terbaru-->
</div>
</div><!--akhir class buaya-->
<div class="footer">
<p>@Copyright 2020 | PMD Sesawi- AK | <a href="https://PMD Sesawi-AK.com" target="_blank">SR.Pakpahan,SST</a></p>
</div><!--akhir class footer-->
</body>
</html>
Code HTML Halaman-halaman Pos Tunggal (Single Posts)
Ada 2 buah single post yaitu singlepos.html dan singlepos1.html:
Code singlepos.html:
<!doctype html>
<html>
<head>
<title>Membuat Website Sederhana - Single Post</title>
<link href="css/style1.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<img src="images/logo pmd.jpg">
</header>
<menu>
<li><a href="membuatwebsitehtml1.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>
<a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm" > <img src="dokumen/gbr1.jpg" ><h4>Tutorial Music Studio FL 11</h4></a> <p>Fungsi studio musik adalah wahana para musisi untuk berproduksi atau menghasilkann musik, baik dalam menggambar, mengedit, membangkitkan/pemakaian instrumen, memberi efek pada instrumen atau memixer musik, dan sebagainya sehingga terciptalah lagu yang merdu, nyaring berkualitas tinggi yang layak go publik di terima masyarakat dunia. <a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm"> KLIK </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>Media Sosial, Let's Connect !</h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon 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 subscribe-->
<div class="komentar">
<h3>Komentar</h3>
<form>
<br/><input type="text" required><br/>
<input type="submit" value="Kirim">
</form>
</div><!--akhir class komentar-->
<div class="footerKiri">
<h3>anone</h3>
</div><!--akhir class Footer Kiri-->
</div>
<div class="single-post">
<a href=""><img src="images/dua.jpg"></a>
<a href="dokumen/PEMBAHARUAN KALENDER 1.htm"><h2>Luni Solar Kreator Allah</h2></a>
<p>
“PEMBAHARUAN KALENDER :
PEMBAHARUAN HARI MINGGU HARI KETUJUH YANG TERSEMBUNYI”
Oleh: S.R.Pakpahan,SST
<br></br> 1. PENDAHULUAN
<br></br>Pada mulanya Allah menciptakan bumi dan langit, langit dan bumi yang masih kosong dan gelap gulita merupakan tempat yang diyakini memuat kehidupan dimana Roh Allah melayang layang diatas permukaan air dan Allah mulai berkarya menciptakan segala isi alam semesta di bumi dan di langit. Pada tempat dan isinya tempat itu (langit dan bumi), Allah sebagai Pencipta Maha Agung dan Maha Kuasa menciptakan segala sesuatunya dengan rapi tersusun membentuk suatu jalinan rantai jalan kehidupan dari ujung bumi menuju sorga yang didalam penciptaannya itu Allah mulai merealisasikan rencanaNya SEMUA UNTUK SATU, semua untuk Allah di Sorga.
<br></br>Pada mulanya adalah Firman, Firman itu bersama sama dengan Allah dan Firman itu adalah Allah, di hari pertama dengan FirmanNya Allah menciptakan TERANG, lalu Allah melihat ciptaannya Terang itu baik dan benar, jadilah petang dan pagi itulah hari PERTAMA. Dihari kedua dengan FirmanNya Allah menciptakan CAKRAWALA (LANGIT) sebagai pembatas antara bagian tempat yang di bawah dengan bagian yang di atas, lalu Allah melihat ciptaanNya Cakrawala itu baik dan benar, jadilah petang dan pagi itulah hari KEDUA. Di hari ketiga dengan FirmanNya Allah menciptakan LAUT, DARAT DAN TUMBUH TUMBUHAN, lalu Allah melihat ciptaanNya laut, darat dan tumbuh tumbuhan itu baik dan benar, jadilah petang dan pagi itulah hari KETIGA.
<br></br>Keterangan bahwa penciptaan dari hari pertama sampai hari ketiga itu merupakan penciptaan tempat kehidupan Sorgawi, yang selanjutnya penciptaan di hari keempat dengan FirmanNya Allah menciptakan BENDA BENDA TERANG yang menempati di cakrawala, Benda terang yang besar dinamakan Matahari yang menguasai siang dan matahari tersebut sebagai penentu waktu. Benda terang yang kecil dinamakan Bulan yang menguasai malam dan bulan sebagai penentu hari, Bulan dan matahari sama sama sebagai penentu masa dan zaman. Juga ALLah menciptakan bersamaan bulan yaitu bintang bintang yang menghiasi cakrawala di malam hari. Lalu Allah melihat ciptaanNya Benda Terang itu baik dan benar, jadilah petang dan pagi itulah hari KEEMPAT. Di hari kelima dengan FirmanNya Allah menciptakan IKAN-IKAN DAN SEGALA BINATANG AIR DAN BURUNG BURUNG DAN SEGALA BINATANG BERSAYAP YANG DAPAT TERBANG, lalu Allah melihat ciptaanNya ikan-ikan dan burung burung itu baik dan benar, jadilah petang dan pagi itulah hari KELIMA. Lalu dihari keenam dengan FirmanNya Allah menciptakan HEWAN-HEWAN, SEGALA BINATANG DAN TERNAK, Lalu Allah melihat ciptaanya itu hewan-hewan, segala binatang dan ternak adalah baik dan benar, juga di hari yang sama kemudian dengan FirmanNya Allah menciptakan MANUSIA menurut gambar dan rupa Allah dan menghembuskan nafas hidup ke dalam lobang hidung manusia itu, lalu Allah melihat ciptaaNya hewan-hewan, segala binatang dan ternak itu juga manusia itu baik dan benar, jadilah petang dan pagi itulah hari KEENAM.
<br></br>Keterangan bahwa penciptaan dari hari keempat sampai keenam itu merupakan penciptaan isi dari tempat bumi dan langit yang dihari pertama sampai hari ketiga yang telah diciptakan Allah itu, di hari keempat hingga keenam penciptaan ini mulai adanya berkat Allah bagi kehidupan di alam semesta. Dihari ketujuh lalu Allah berhenti dari bekerja, Allah menguduskan dan memberkati hari KETUJUH itu.
<br></br>Hari ketujuh yang zaman sekarang adalah hari minggu tetapi setelah kebangkitan Yesus Kristus, hari ketujuh hari minggu itu telah menjadi hari pertama yang diyakini sebagai suatu tanda antara manusia dan keturunan selanjutnya dengan Allah. Hari ketujuh merupakan hari peristirahatan hari khusus untuk Tuhan Allah dimana manusia mulai mencari hubungan dengan penciptaNya dan beribadah menyembah Sang pencipta Khalik langit dan bumi: Allah Maha Kuasa.
<br></br>Usaha dan upaya manusia mencari hari kudus, hari penuh kemuliaan, hari penuh berkat dari Tuhan, hari khusus untuk pemujaan Tuhan Allah, manusia mencari hadirat Allah yang Maha Kudus terus dilakukan dari zaman dahulu hingga saat ini. Hari kudus yang bagaimana yang sebenarnya dimana Allah hadir untuk dipuja dan disembah, hari itu berkenan bagi sorga Allah, seperti pada orang orang muslim menyakini bahwa hari kudus itu di hari Jumat mereka beribadah menyembah Tuhan Allah, juga seperti pada orang orang Kristen aliran adven yang menyakini hari kudus itu di hari sabtu, lau mereka beribadah di hari itu untuk memuja dan menyembah Tuhan Allah, tetapi lain halnya pada orang orang Kristen pengikut kristus sejati menyakini bahwa hari kudus itu adalah di hari ketujuh hari minggu yang juga hari Kebangkitan Yesus Kristus. Hari ketujuh itu diyakini para pengikut Kristus sejati adalah hari kudus yang diberkati Tuhan, hari yang penuh kemuliaan, hari kebangkitan dimana mereka sejenak melepaskan segala masalah persoalan hidup kematerialan dan kerohaniannya kembali menjumpai PenciptaNya untuk kembali suci sama segambar dan serupa dengan Allah penciptaNya. Dalam seminggu yang telah terlalui enam hari bekerja yang tak mungkin tak segala dosa dan kesalahan yang telah diperbuat mereka memohon pengampunan dari Allah agar kepudaran rupa manusianya itu kembali lagi mereka menyerupai segambar dan serupa dengan Allah penciptanya sebab manusia adalah wakil Allah di permukaan bumi. Manusia adalah ciptaan Allah yang Maha KaryaNya Ciptaan yang paling agung, manusia itu ciptaanNya yang paling dekat dengan Sorga dibanding dengan ciptaanNYa yang lainnya, pada manusialah diberi amanah oleh Allah.
<a href="dokumen/PEMBAHARUAN KALENDER 1.htm">Baca Lebih Lanjut
<br/><br/></p>
<div class="share">
<h3>Share This Post</h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon pinterest.png"></a>
</div><!--akhir class share--><br/>
</div><!--akhir class single-post-->
</div>
</div><!--akhir class buaya-->
<div class="footer">
<p>@Copyright 2020 | PMD Sesawi- AK | <a href="https://PMD Sesawi-AK.com" target="_blank">SR.Pakpahan,SST</a></p>
</div><!--akhir class footer-->
</body>
</html>
Code singlepos1.html:
<!doctype html>
<html>
<head>
<title>Membuat Website Sederhana - Single Post</title>
<link href="css/style1.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<img src="images/logo pmd musik.jpg">
</header>
<menu>
<li><a href="membuatwebsitehtml1.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>
<a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm" > <img src="dokumen/gbr1.jpg" ><h4>Tutorial Music Studio FL 11</h4></a> <p>Fungsi studio musik adalah wahana para musisi untuk berproduksi atau menghasilkann musik, baik dalam menggambar, mengedit, membangkitkan/pemakaian instrumen, memberi efek pada instrumen atau memixer musik, dan sebagainya sehingga terciptalah lagu yang merdu, nyaring berkualitas tinggi yang layak go publik di terima masyarakat dunia. <a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm"> KLIK </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>Media Sosial, Let's Connect !</h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon 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 subscribe-->
<div class="komentar">
<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 class="footerKiri">
<h3>anone</h3>
</div><!--akhir class Footer Kiri-->
</div>
<div class="single-post">
<a href=""><img src="dokumen/gbr3.png"></a>
<a href="dokumen/KELOMPOK INSTRUMEN (bagian 1).htm"><h2>Kelompok Instrumen Musik (Bagian 1)</h2></a>
<p>
KELOMPOK INSTRUMEN MUSIK
(Bagian 1)
<br/>Oleh: SR.Pakpahan, SST
<br></br>
Kelompok Instrumen musik dalam PMD “Luni Solar” Music oleh PMD Sawi-AK ada sebanyak 7 tapi 8 kelompok instrumen musik yang posisi letak masing-masing instrumen tersusun rapi menurut Instrumen Penjuru Musik (IPM). Pembentukan kelompok instrumen musik ini, prosesnya dapat dilihat pada gambar IPM1 hingga gambar IPM6 di menu My photo/IPM PMD “Luni Solar” Music.
<br/>Adapun 7 tapi 8 kelompok instrumen musik tersebut adalah sebagai berikut
<li>1.a. Instrumen Vokal (Trebel)
<li>1.b. Instrumen Akhir / Penguat (Trebel)
<li>2. Instrumen Melodi (Trebel & Bass)
<li>3. Instrumen Ritme (Trebel & Bass)
<li>4. Instrumen Variasi Ketukan (Trebel & Bass)
Posisi Instrumen Variasi Ketukan berada diantara Instrumen Melodi dan Instrumen Ritme
<li>5. Instrumen Ketukan (Trebel & Bass)
<li>6. Instrumen Harmony (Trebel & Bass)
<li>7. Instrumen Variasi Melodi (Trebel & Bass)
<br/>Posisi Instrumen Variasi Melodi berada diantara Instrumen Ketukan dan Instrumen Harmony
<br/>Permainan instrumen musik dengan vokal ini mengambil contoh lagu yang berjudul “AKU ANGGOTA KELUARGA ALLAH”. Adapun NPL (Nada penjuru Lagu), IPM (Instrumen Penjuru Musik) dapat dilihat pada gambar di menu My photo/PMD “Luni Solar” Music.
<br></br>1.a. Instrumen Vokal (Trebel)
<br/>Instrumen Vokal sebagai salah satu kelompok Instrumen musik dalam PMD “Luni Solar” Music menempati posisi paling terbawah (terakhir). Instrumen Vokal memainkan/membunyikan nada nada vokal penyanyi yang sudah tersusun rapi, baik, benar, dan harmonis memakai kunci akord sesuai kreasi rangkaian nada-nada pada lirik syair lagu yang ada melalui penciptaan Nada Penjuru Lagu (NPL).
Instrumen Vokal pada applikasi musik ada beberapa jenis seperti:
- Voice (berklep trebel)
- Soprano (berklep trebel)
- Mezzo soprano (berklep trebel)
- Alto (berklep trebel)
- Tenor (berklep trebel 8Vb)
- Baritone (berklep bass)
- Bass (berklep bass).
- Dan lain-lain
<br/>Dari hasil akhir pembentukan kelompok instrumen musik ini oleh PMD “Luni Solar” Music pada gambar IPM6 di menu My photo/IPM PMD “Luni Solar Music dapat terlihat bahwa ada 3 (tiga) jenis vokal (semua berklep trebel) yang terbentuk yang dapat digunakan dalam perpaduan permainan instrumen musik dan vokal yaitu:
<br/>- 3 (tiga) jenis vokal untuk lagu yang dibawakan oleh para penyanyi Trio (sopran sebagai suara 1, tenor sebagai sebagai suara 3, dan alto sebagai suara 2). Jenis instrumen vokal yang digunakan pada 3 (tiga) jenis vokal ini adalah:
- Soprano (berklep trebel)
- Alto (berklep trebel)
- Tenor (berklep trebel 8Vb)
<br/> Bila 2 (dua) jenis vokal, maka untuk lagu yang dibawakan oleh para penyanyi Duet (sopran sebagai suara 1, dan tenor sebagai sebagai suara 3. Jenis instrumen vokal yang digunakan pada 2 (dua) jenis vokal ini adalah:
- Soprano (berklep trebel)
- Tenor (berklep trebel 8Vb)
<br/>atau Duet dengan sopran sebagai suara 1, dan alto sebagai suara 2. Jenis instrumen vokal yang digunakan pada 2 (dua) jenis vokal ini adalah:
- Soprano (berklep trebel)
- Alto (berklep trebel)
<br/>- Bila 1 (satu) jenis vokal, maka untuk lagu yang dibawakan oleh penyanyi Solo, cukup satu suara saja dengan jenis instrumen vokal yang digunakan adalah: Voice (berklep trebel)
<br/>Bagaimana kalau ada 4 (empat) jenis vokal, jangan dimainkan pada kelompok instrumen musik ini, ya, karena ada salah satu jenis vokal yang berklep bass. Maka lebih baik ke-4 jenis vokal tersebut bernyanyi bersama dalam 1 (satu) lagu paduan suara atau koor. Jenis permainan instrumen musik pada lagu paduan suara (koor) memiliki karakter dan aturan tersendiri. Sebagai contoh bisa di dengar dan dilihat pada lagu paduan suara (koor) yang berjudul “SEKALIPUN KAKIKU TERSANDUNG” oleh kreasi PMD Sawi-AK, Sempatkan diri Anda untuk membeli lagunya di http:///www.sheetmusicplus.com. Di kotak search ketikkan judul lagu SEKALIPUN KAKIKU TERSANDUNG, lalu enter, selanjutnya lakukan transaksi pembelian. Layanan kami memuaskan Anda mendapatkan ilmunya, juga mendapatkan lagunya PMD Music Creation membuat ruangan Anda asri, nyaman berirama PMD (Pedang Mata Dua).
<br/>Pada lagu berjudul “AKU ANGGOTA KELUARGA ALLAH” dengan permainan instrumen musik dengan vokal, hanya ada 1 (satu) jenis vokal yang menjadikan lagu ini berjenis lagu Solo dengan iringan instrumen musik (Band Music). Pada lagu “AKU ANGGOTA KELUARGA ALLAH” ini menggunakan Voice (Oohs choir) sebagai instrumen vokalnya.
<br>
</br>1.b. Instrumen Akhir / Instrumen Penguat (Trebel)
<br/>Instrumen Akhir / Instrumen Penguat sebagai salah satu kelompok Instrumen musik dalam PMD “Luni Solar” Music menempati posisi paling teratas (pertama). Instrumen Penguat memainkan/membunyikan nada nada sama persis dengan yang dimainkan oleh instrumen vokal melalui penciptaan Nada Penjuru Lagu (NPL), tapi ia berklep trebel 8Va (lakukan copy-paste saja, lalu ganti klepnya menjadi klep trebel 8 Va). Jenis instrumen penguat ini yang dapat digunakan dalam perpaduan permainan instrumen musik dan vokal yaitu harus dari instrumen alat tiup, atau instrumen yang dibunyikan oleh bantuan suara/nafas manusia, alat musiknya seperti PIKOLO. Cari deh alat musik Instrumen Penguat lainnya yang sejenis pada applikasi musik yang ada.
<br></br>2. Instrumen Melodi (Trebel & Bass).
<br/>Instrumen Melodi sebagai salah satu kelompok Instrumen musik dalam PMD “Luni Solar” Music menempati posisi setelah instrumen Ritme. Instrumen Melodi memainkan/membunyikan nada nada vokal yang ada melalui penciptaan Nada Penjuru Lagu (NPL) yang sudah di “split” (dipecah) menjadi nada-nada bass dan trebel, seperti pemakaian instrumen PIANO untuk melodi yang nada-nada bass-nya dari nada-nada vokal dimainkan di piano klep bassnya, sedangkan nada-nada trebel dimainkan di piano klep trebelnya, dan nada-nada lain di klep bass dan trebel piano tersebut memainkan nada-nada yang sesuai dengan progress nadanya. Biasanya di klep bass memiliki nada-nada yang frekwensi/oktafnya sama tinggi dengan frekwensi/oktaf nada klep trebel.
<br/>Pada instrumen melodi inilah , kita berkreasi membentuk rangkaian nada-nada bass maupun nada-nada trebel untuk lirik syair lagu yang kita inginkan lantunan melodinya, seluruhnya melalui prosedur Nada Penjuru Lagu (NPL). Pada lagu “AKU ANGGOTA KELUARGA ALLAH” ini menggunakan piano sebagai instrumen melodinya.
<br/>Bila suatu komposisi nada di suatu lirik adalah nada-nada bass yang dimainkan oleh klep bass piano, maka nada-nada klep trebelnya harus “lagging” (terbelakang) 1/8 nada dari nada bassnya di progres 1, bila di progres 2 maka nada-nada trebel yang lagging ini harus di turunkan 1 laras lagi, bila di progres 3 maka nada-nada trebel yang lagging ini harus di turunkan 2 laras lagi, (lakukan copy-paste, lalu perhatikan progres nadanya yang keberapa).
<br/>Bila suatu komposisi nada di suatu lirik adalah nada-nada trebel yang dimainkan oleh klep trebel piano, maka nada-nada klep bassnya harus “leading” (terdepan) 1/8 nada dari nada trebelnya dan harus diturunkan 2 laras di progres 1, bila di progres 2 maka nada-nada bass yang leading dan turun 2 laras ini harus di turunkan lagi 1 laras, bila di progres 3 maka nada-nada bass yang leading dan turun 2 laras ini harus di turunkan lagi 2 laras.
<br/> Bila suatu komposisi nada di suatu lirik adalah nada-nada trebel yang dimainkan oleh klep trebel piano, maka nada-nada klep bassnya harus “leading” (terdepan) 1/8 nada dari nada trebelnya dan harus diturunkan 2 laras di progres 1, bila di progres 2 maka nada-nada bass yang leading dan turun 2 laras ini harus di turunkan lagi 1 laras, bila di progres 3 maka nada-nada bass yang leading dan turun 2 laras ini harus di turunkan lagi 2 laras.
<br/>Biasanya jenis alat instrumen melodi ini menggunakan instrumen keyboard. Jenis alat instrumen lainnya selain piano, ada juga Harpsichord, Organ, Pipe keyboard. Jenis alat instrumen lainnya selain piano, ada juga Harpsichord, Organ, Pipe organ, dan lain-lain.
<br/>
Bersambung ... Instrumen musik berikutnya nantikan di diskusi kita berikutnya, dan sempatkan diri Anda untuk membeli lagu-lagunya PMD Sawi-AK, seperti lagu yang berjudul “AKU ANGGOTA KELUARGA ALLAH” di http:///www.sheetmusicplus.com. Di kotak search ketikkan judul lagu AKU ANGGOTA KELUARGA ALLAH, lalu enter, selanjutnya lakukan transaksi pembelian. Layanan kami memuaskan Anda mendapatkan ilmunya, juga mendapatkan lagunya PMD Music Creation membuat ruangan Anda asri, nyaman berirama PMD (Pedang Mata Dua). PMD Music Creation untuk ruangan Anda, bukan untuk telinga Anda, tapi telinga Anda untuk mendengarkan Tuhan yang berfiirman.
<a href="dokumen/KELOMPOK INSTRUMEN MUSIK (bagian 1).htm">Baca Lebih Lanjut
<br/><br/></p>
</div><!--akhir class single-post-->
</div>
</div><!--akhir class buaya-->
<div class="footer">
<p>@Copyright 2020 | PMD Sesawi- AK | <a href="https://PMD Sesawi-AK.com" target="_blank">SR.Pakpahan,SST</a></p>
</div><!--akhir class footer-->
</body>
</html>
Code CSS (style1.css):
* {margin: 0; padding: 0;}
body {
width: 900px;
margin: auto;
}
header {
width: 900px;
height: 240px;
}
header img {
width: 900px;
height: 240px;
}
/* menu */
menu {
width: 880px;
height: 20px;
background-color: blue;
padding: 10px;
margin-top: 3px;
}
menu li {
list-style: none;
float: left;
margin-right: 20px;
margin-top: 0px;
color: #fff;
}
menu li a {
text-decoration: none;
color: #fff;
}
menu li a:hover {
color: orange;
}
/* akhir menu */
/* nav menu */
nav {
position: relative;
top: 0px;
height: 20px;
line-height: 30px;
background-color: blue;
width: 880px;
margin: auto;
}
nav ul {
list-style: none;
}
nav ul li a {
text-decoration: none;
color: #fff;
float: left;
width: 100px;
display: block;
text-align: center;
}
nav ul li a:hover {
background: blue;
display: block;
}
nav ul li:hover ul {
display: block;
}
nav ul ul {
display: none;
position: absolute;
background: #ff0000;
top: 15px;
margin: 11px;
float: left;
}
/* akhir nav menu */
/* class recomended */
.recomended {
width: 100%;
overflow: hidden;
background-color: #a9a9a9;
margin-top: 3px;
height: 610px;
max-height: 620px;
}
.recomended h1 {
text-align: center;
}
.recomended .recomendedKiri {
height: 270px;
max-height: 280px;
width: 433px;
float: left;
margin: 0px 10px 5px 10px;
}
.recomended img {
width: 150px;
height: 100px;
float: left;
margin: 5px 5px 5px 5px;
box-shadow: 2px 2px 2px #333;
}
.recomended p {
text-align: justify;
}
.recomended .recomendedKanan {
height: 270px;
max-height: 280px;
width: 433px;
margin: 0px 0px 5px 5px;
float: left;
}
.recomended a {
text-decoration: none;
color: #140fcd;
}
.recomended a:hover {
color: #000;
}
.recomended h3 {
color: #140fcd;
}
.recomended .recomendedKiriBawah {
border-top: 5px solid #333;
height: 270px;
max-height: 280px;
width: 433px;
float: left;
margin: 5px 10px 5px 10px;
}
.recomended img {
width: 150px;
height: 100px;
float: left;
margin: 5px 5px 5px 5px;
box-shadow: 2px 2px 2px #333;
}
.recomended p {
text-align: justify;
}
.recomended h3 {
margin-top: 5px;
color: #140fcd;
}
.recomended .recomendedKananBawah {
border-top: 5px solid #333;
height: 270px;
max-height: 280px;
width: 433px;
margin: 5px 0px 5px 5px;
float: left;
}
.recomended a {
text-decoration: none;
color: #140fcd;
}
.recomended a:hover {
color: #000;
}
.recomended h3 {
margin-top: 5px;
color: #140fcd;
}
/* akhir class recomended */
/* class buaya */
.buaya {
width: 100%;
overflow: hidden;
background-color: #333;
margin-top: 3px;
}
/* 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;
height: 450px;
}
.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 Komentar */
.buaya .widget .komentar {
width: 100%;
margin: 0 0 5px;
border-top: 5px solid #333;
padding-top: 20px;
}
.buaya .widget .komentar form {
width: 100%;
padding: 0 5px 0;
}
.buaya .widget .komentar h3 {
text-align: center;
margin: 10px 0 10px;
}
.buaya .widget .komentar input[type="text"] {
width: 95%;
height: 20px;
margin-bottom: 5px;
}
.buaya .widget .komentar input[type="email"] {
width: 95%;
height: 20px;
margin-bottom: 5px;
}
.buaya .widget .komentar textarea {
width: 95%;
max-width: 95%;
height: 200px;
max-height: 250px;
margin-bottom: 5px;
}
.buaya .widget .komentar input[type="submit"] {
padding: 5px;
cursor: pointer;
margin-bottom: 5px;
margin-left: 50px;
}
/* akhir class komentar */
.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: blue;
}
/* share */
.buaya .single-post .share {
border-top: 5px solid #333;
margin: 0 5px;
}
.buaya .single-post .share h3 {
margin: 10px 0 10px;
}
.buaya .single-post .share img {
width: 30px;
height: 30px;
}
.buaya .single-post .share img:hover {
opacity: 0.5;
}
/* akhir share */
/* class Footer Kiri */
.buaya .widget .footerKiri {
margin: 0 px;
border-top: 4px solid #333;
height: 50px;
background-color: grey;
margin-top: 8px;
}
.buaya .widget .footerKiri h3 {
text-align: center;
margin: 10px 0 10px;
color: grey
}
/* akhir class Footer Kiri */
/* class Footer Kanan */
.footer {
width: 100%;
height: 50px;
background-color: grey;
margin-top: 3px;
position: relative;
margin-left: 245px;
width: 660px;
}
.footer p {
color: #fff;
position: absolute;
bottom: 12.5px;
left: 150px;
}
.footer p a {
text-decoration: none;
color: #fff;
}
.footer p a:hover {
color: #f90;
}
/* akhir class Footer Kanan */
Sampai pada Part 6 Sesi 2 ini, maka hasil pengkodingan yang diperoleh adalah:
Code HTML Home Page
<!doctype html>
<html>
<head>
<title>Membuat Website - HTML PMD Sesawi-AK</title>
<link rel="shortcut icon" type="image/png" href="images/favicon.ico"/>
<link href="css/style1.css" type="text/css" rel="stylesheet">
<link href="single pos.html>
<link href="single pos 1.html>
<link href="single pos 2.html>
<link href="single pos 3.html>
</head>
<body>
<header>
<img src="images/logo pmd.jpg">
</header>
<menu>
<nav><ul>
<li><a href="">Home</a>
<ul><li> <a href="ul.html">Tentang Kami</a></li>
</ul>
<li>Artikel
<ul><li>Artikel Terlaris
<ul><li><a href="dokumen/TUTORIAL CARA MEMBUAT
LAGU DI STUDIO MUSIK (Tutorial 1).htm">TUTORIAL CARA MEMBUAT LAGU DI
STUDIO MUSIK (Tutorial 1)</a></li></ul>
<li> Artikel Terbaru
<ul><li><a href="dokumen/DIBERKATI DAN
MEMBERKATI.htm">DIBERKATI DAN
MEMBERKATI</a></li></ul>
<li>Artikel Disaran
<ul><li><a href="PEMBAHARUAN KALENDER 1.htm">PEMBAHARUAN KALENDER</a></li></ul>
</li></li></li></li></ul></li>
<li>Tutorial
<ul><li> <a href="ul.html">Artikel Terbaru</a></li>
<li> <a href="ul.html">Artikel Musik</a></li>
</ul>
<li>Sabda
<ul><li> Sabda Minggu
<ul><li> <a href="dokumen/DIBERKATI DAN
MEMBERKATI.htm">DIBERKATI DAN
MEMBERKATI</a></li></ul>
<li> <a href="ul.html">Roti Hidup</a></li>
</ul>
<li>Design
<ul><li> <a href="ul.html">Artikel Terbaru</a></li>
<li> <a href="ul.html">Artikel Musik</a></li>
</ul>
<li>Support
<ul><li> <a href="ul.html">Artikel Terbaru</a></li>
<li> <a href="ul.html">Artikel Musik</a></li>
</ul>
<li><a href="">Kontak</a></li>
</ul></nav>
</menu>
<div class="recomended">
<h1>Artikel Disarankan</h1>
<div class="recomendedKiri">
<h3><a href="single pos.html"><img
src="dokumen/gbr2.png"> Luni Solar Kreator Allah</a></h3>
<p>Pada mulanya Allah menciptakan bumi dan langit, langit
dan bumi yang masih kosong dan gelap gulita merupakan tempat yang
diyakini memuat kehidupan dimana Roh Allah melayang layang diatas
permukaan air dan Allah mulai berkarya menciptakan segala isi alam
semesta di bumi dan di langit. Pada tempat dan isinya tempat itu (langit
dan bumi), Allah sebagai Pencipta Maha Agung dan Maha Kuasa menciptakan
segala sesuatunya dengan rapi tersusun membentuk suatu jalinan rantai
jalan kehidupan dari ujung bumi menuju sorga yang didalam penciptaannya
itu Allah mulai merealisasikan rencanaNya SEMUA UNTUK SATU, semua untuk
Allah di Sorga. <a href="single pos.html"><strong>Baca
Selengkapnya</strong></a></p>
</div><!--akhir class recomendedKiri-->
<div class="recomendedKanan">
<h3><a href="single pos 1.html"><img
src="dokumen/gbr3.png">Kelompok Instrumen Musik (Bagian
1)</a></h3>
<p>Kelompok Instrumen musik dalam PMD “Luni Solar” Music
oleh PMD Sawi-AK ada sebanyak 7 tapi 8 kelompok instrumen musik yang
posisi letak masing-masing instrumen tersusun rapi menurut Instrumen
Penjuru Musik (IPM). Pembentukan kelompok instrumen musik ini, prosesnya
dapat dilihat pada gambar IPM1 – gambar IPM6 di menu My photo/IPM PMD
“Luni Solar” Music.
Adapun 7 tapi 8 kelompok instrumen musik tersebut adalah sebagai berikut
<a href="single pos 1.html"><strong>Baca Selengkapnya</strong></a></p>
</div><!--akhir class recomendedKanan-->
<div class="recomendedKiriBawah">
<h3><a href="single-post.html"><img
src="dokumen/gbr2.png">Luni Solar Kreator Allah</a></h3>
<p>Pada mulanya Allah menciptakan bumi dan langit, langit
dan bumi yang masih kosong dan gelap gulita merupakan tempat yang
diyakini memuat kehidupan dimana Roh Allah melayang layang diatas
permukaan air dan Allah mulai berkarya menciptakan segala isi alam
semesta di bumi dan di langit. Pada tempat dan isinya tempat itu (langit
dan bumi), Allah sebagai Pencipta Maha Agung dan Maha Kuasa menciptakan
segala sesuatunya dengan rapi tersusun membentuk suatu jalinan rantai
jalan kehidupan dari ujung bumi menuju sorga yang didalam penciptaannya
itu Allah mulai merealisasikan rencanaNya SEMUA UNTUK SATU, semua untuk
Allah di Sorga. <a href="single-post.html"><strong>Baca
Selengkapnya</strong></a></p>
</div><!--akhir class recomendedKiriBawah-->
<div class="recomendedKananBawah">
<h3><a href="single pos 1.html"><img
src="dokumen/gbr3.png">Kelompok Instrumen Musik (Bagian
1)</a></h3>
<p>Kelompok Instrumen musik dalam PMD “Luni Solar” Music
oleh PMD Sawi-AK ada sebanyak 7 tapi 8 kelompok instrumen musik yang
posisi letak masing-masing instrumen tersusun rapi menurut Instrumen
Penjuru Musik (IPM). Pembentukan kelompok instrumen musik ini, prosesnya
dapat dilihat pada gambar IPM1 – gambar IPM6 di menu My photo/IPM PMD
“Luni Solar” Music.
Adapun 7 tapi 8 kelompok instrumen musik tersebut adalah sebagai berikut
<a href="single pos 1.html"><strong>Baca Selengkapnya</strong></a></p>
</div><!--akhir class recomendedKananBawah-->
</div><!--akhir class recomended-->
<div class="buaya">
<div class="widget">
<div class="artikelTerlaris">
<h3>Artikel Terlaris</h3>
<a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK
(Tutorial 1).htm" > <img src="dokumen/gbr1.jpg"
><h4>Tutorial Music Studio FL 11</h4></a>
<p>Fungsi studio musik adalah wahana para musisi untuk berproduksi
atau menghasilkann musik, baik dalam menggambar, mengedit,
membangkitkan/pemakaian instrumen, memberi efek pada instrumen atau
memixer musik, dan sebagainya sehingga terciptalah lagu yang merdu,
nyaring berkualitas tinggi yang layak go publik di terima masyarakat
dunia. <a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK
(Tutorial 1).htm"> KLIK </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>Media Sosial, Let's Connect !</h3>
<a
href="https://plus.google.com/+sr.pakpahan,sst"><img
src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan"
target="_blank"><img src="images/icon fb.jpg" title="Like Us on
Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon 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 subscribe-->
<div class="komentar">
<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 class="footerKiri">
<h3>anone</h3>
</div><!--akhir class Footer Kiri-->
</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>
</div>
</div><!--akhir class buaya-->
<div class="footer">
<p>@Copyright 2020 | PMD Sesawi- AK | <a href="https://PMD
Sesawi-AK.com" target="_blank">SR.Pakpahan,SST</a></p>
</div><!--akhir class footer-->
</body>
</html>
Code HTML- Halaman Single Post masih sama dengan yang sebelumnya.
Code CSS:
* {margin: 0; padding: 0;}
body {
width: 900px;
margin: auto;
}
header {
width: 900px;
height: 240px;
}
header img {
width: 900px;
height: 240px;
}
/* menu */
menu {
width: 880px;
height: 20px;
background-color: blue;
padding: 10px;
margin-top: 3px;
}
menu li {
list-style: none;
float: left;
margin-right: 20px;
margin-top: 0px;
color: #fff;
}
menu li a {
text-decoration: none;
color: #fff;
}
menu li a:hover {
color: orange;
}
/* akhir menu */
/* nav menu */
nav {
position: relative;
top: 0px;
height: 20px;
line-height: 30px;
background-color: blue;
width: 880px;
margin: auto;
}
nav ul {
list-style: none;
}
nav ul li a {
text-decoration: none;
color: #fff;
float: left;
width: 100px;
display: block;
text-align: center;
}
nav ul li a:hover {
background: blue;
display: block;
}
nav ul li:hover ul {
display: block;
}
nav ul ul {
display: none;
position: absolute;
background: #ff0000;
top: 15px;
margin: 11px;
float: left;
}
/* akhir nav menu */
/* class recomended */
.recomended {
width: 100%;
overflow: hidden;
background-color: #a9a9a9;
margin-top: 3px;
height: 610px;
max-height: 620px;
}
.recomended h1 {
text-align: center;
}
.recomended .recomendedKiri {
height: 270px;
max-height: 280px;
width: 433px;
float: left;
margin: 0px 10px 5px 10px;
}
.recomended img {
width: 150px;
height: 100px;
float: left;
margin: 5px 5px 5px 5px;
box-shadow: 2px 2px 2px #333;
}
.recomended p {
text-align: justify;
}
.recomended .recomendedKanan {
height: 270px;
max-height: 280px;
width: 433px;
margin: 0px 0px 5px 5px;
float: left;
}
.recomended a {
text-decoration: none;
color: #140fcd;
}
.recomended a:hover {
color: #000;
}
.recomended h3 {
color: #140fcd;
}
.recomended .recomendedKiriBawah {
border-top: 5px solid #333;
height: 270px;
max-height: 280px;
width: 433px;
float: left;
margin: 5px 10px 5px 10px;
}
.recomended img {
width: 150px;
height: 100px;
float: left;
margin: 5px 5px 5px 5px;
box-shadow: 2px 2px 2px #333;
}
.recomended p {
text-align: justify;
}
.recomended h3 {
margin-top: 5px;
color: #140fcd;
}
.recomended .recomendedKananBawah {
border-top: 5px solid #333;
height: 270px;
max-height: 280px;
width: 433px;
margin: 5px 0px 5px 5px;
float: left;
}
.recomended a {
text-decoration: none;
color: #140fcd;
}
.recomended a:hover {
color: #000;
}
.recomended h3 {
margin-top: 5px;
color: #140fcd;
}
/* akhir class recomended */
/* class buaya */
.buaya {
width: 100%;
overflow: hidden;
background-color: #333;
margin-top: 3px;
}
/* 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;
height: 450px;
}
.buaya .artikelTerbaru h2 {
margin-left: 5px;
}
.buaya .artikelTerbaru p {
margin: 0 5px;
text-align: justify;
}
.buaya .artikelTerbaru a {
text-decoration: none;
color: #000;
}
/* 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 Komentar */
.buaya .widget .komentar {
width: 100%;
margin: 0 0 5px;
border-top: 5px solid #333;
padding-top: 20px;
}
.buaya .widget .komentar form {
width: 100%;
padding: 0 5px 0;
}
.buaya .widget .komentar h3 {
text-align: center;
margin: 10px 0 10px;
}
.buaya .widget .komentar input[type="text"] {
width: 95%;
height: 20px;
margin-bottom: 5px;
}
.buaya .widget .komentar input[type="email"] {
width: 95%;
height: 20px;
margin-bottom: 5px;
}
.buaya .widget .komentar textarea {
width: 95%;
max-width: 95%;
height: 200px;
max-height: 250px;
margin-bottom: 5px;
}
.buaya .widget .komentar input[type="submit"] {
padding: 5px;
cursor: pointer;
margin-bottom: 5px;
margin-left: 50px;
}
/* akhir class komentar */
.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 Footer Kiri */
.buaya .widget .footerKiri {
margin: 0 px;
border-top: 4px solid #333;
height: 50px;
background-color: grey;
margin-top: 8px;
}
.buaya .widget .footerKiri h3 {
text-align: center;
margin: 10px 0 10px;
color: grey
}
/* akhir class Footer Kiri */
/* class Footer Kanan */
.footer {
width: 100%;
height: 50px;
background-color: grey;
margin-top: 3px;
position: relative;
margin-left: 245px;
width: 660px;
}
.footer p {
color: #fff;
position: absolute;
bottom: 12.5px;
left: 150px;
}
.footer p a {
text-decoration: none;
color: #fff;
}
.footer p a:hover {
color: #f90;
}
/* akhir class Footer Kanan */
PART 7
PAGINASI (PAGINATION)
Sekarang kita lanjutkan ke part terakhir yaitu part 7 sesi 2. Tutorial kali ini akan melengkapi tutorial-tutorial sebelumnya, hanya tambahan saja. Kita akan menambahkan paginasi / pagination pada bagian bawah didaftar artikel terbaru (home page), hanya berupa tulisan
<---Sebelumnya dan Selanjutnya---> (di paginatin Sebelumnya dan Selanjutnya ditambahkan tanda panah kiri dan panah kanan.
Buka file html home page-nya yaitu membuatwebsite1.html, kemudian tambahkan kode HTML berikut dibagian bawah setelah post terakhir / post terbawah Artikel Terbaru dihalaman home:
<div class="pagination">
<li class="kiri"><a href="">← Sebelumnya</a></li>
<li class="kanan"><a href="">Selanjutnya →</a></li>
</div>
Tambahkan kode tersebut dibawah post terakhir (setelah paragraf terakhir) tapi masih didalam class artikelTerbaru. Teks ← disitu artinya icon panah ke kiri dan → adalah ikon panah ke kanan.
Tampilan class paginatin kita beri gaya (style)nya di CSS agar rapih ketika dibuka di browser, tambahkan code CSS ini di sebelum /* akhir class artikelTerbaru */
pada file style1.css -nya, yaitu:
.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;
}
Teks .pagination ditulis mengikuti (setelah) .buaya , karena .pagination berada didalam .buaya, supaya lebih spesifik saya tuliskan juga .buaya nya tapi kalo gak mau gak apa-apa. Cuma jaga-jaga aja, siapa tahu ada class pagination lain didalam HTML tersebut, jadi bisa dibedakan masing-masing gayanya.
Save dan lihat hasilnya di browser (lihat gambar)!
Untuk menerapkan class pagination ini, maka Artikel harus dibuat banyak-banyak sebagai class Artikel terbaru.
Mari kita akhiri tutorial Sesi 2 ini dengan membuat Share Post
SHARE POST
Pada part ini kita akan membuat tombol link share dibagian bawah artikel / single pos yang sudah ada.
Membuat Tombol Share Post
Untuk mempercepat, bisa disalin saja bagian media sosial di widget yang sudah dibuat sebelumnya.
<div class="mediaSosial">
<h3>Media Sosial, Let's Connect !</h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon pinterest.png"></a>
</div><!--akhir class mediaSosial-->
Ini adalah bagian media sosial di widget yang digunakan untuk mengarahkan ke masing-masing media sosial, sekarang tinggal ganti fungsinya untuk share post. Ganti class mediaSosial misalnya menjadi class share, sehingga code HTML share post adalah seperti berikut ini:
<div class="share">
<h3>Share This </h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon pinterest.png"></a>
</div><!--akhir class share-->
Salin code HTML tersebut dan tempelkan dibagian bawah pos / artikel yang mau akan dibagikan. Silahkan tempelkan code tersebut tepat sebelum akhir class single-post, misalnya sebelum akhir class recomendedKiri (</div><!--akhir class recomendedKiri -->), supaya tombol share media sosial ini masih berada didalam pos.
Setelah ditempel / paste didalam post, silahkan ganti nama class nya sesuai keinginan misalnya class mediasosial diganti misalnya menjadi class share supaya enak mengkustomnya. Maka code didalam single-post akan menjadi seperti ini:
<div class="single-post">
<a href=""><img src="dokumen/gbr2.png"></a>
<a href="dokumen/PEMBAHARUAN KALENDER 1.htm"><h2>Luni Solar Kreator Allah</h2></a>
<p>
“PEMBAHARUAN KALENDER :
PEMBAHARUAN HARI MINGGU HARI KETUJUH YANG TERSEMBUNYI”
Oleh: S.R.Pakpahan,SST
<br></br> 1. PENDAHULUAN
<br></br>Pada mulanya Allah menciptakan bumi dan langit, langit dan bumi yang masih kosong dan gelap gulita merupakan tempat yang diyakini memuat kehidupan dimana Roh Allah melayang layang diatas permukaan air dan Allah mulai berkarya menciptakan segala isi alam semesta di bumi dan di langit. Pada tempat dan isinya tempat itu (langit dan bumi), Allah sebagai Pencipta Maha Agung dan Maha Kuasa menciptakan segala sesuatunya dengan rapi tersusun membentuk suatu jalinan rantai jalan kehidupan dari ujung bumi menuju sorga yang didalam penciptaannya itu Allah mulai merealisasikan rencanaNya SEMUA UNTUK SATU, semua untuk Allah di Sorga.
<br></br>Pada mulanya adalah Firman, Firman itu bersama sama dengan Allah dan Firman itu adalah Allah, di hari pertama dengan FirmanNya Allah menciptakan TERANG, lalu Allah melihat ciptaannya Terang itu baik dan benar, jadilah petang dan pagi itulah hari PERTAMA. Dihari kedua dengan FirmanNya Allah menciptakan CAKRAWALA (LANGIT) sebagai pembatas antara bagian tempat yang di bawah dengan bagian yang di atas, lalu Allah melihat ciptaanNya Cakrawala itu baik dan benar, jadilah petang dan pagi itulah hari KEDUA. Di hari ketiga dengan FirmanNya Allah menciptakan LAUT, DARAT DAN TUMBUH TUMBUHAN, lalu Allah melihat ciptaanNya laut, darat dan tumbuh tumbuhan itu baik dan benar, jadilah petang dan pagi itulah hari KETIGA.
<br></br>Keterangan bahwa penciptaan dari hari pertama sampai hari ketiga itu merupakan penciptaan tempat kehidupan Sorgawi, yang selanjutnya penciptaan di hari keempat dengan FirmanNya Allah menciptakan BENDA BENDA TERANG yang menempati di cakrawala, Benda terang yang besar dinamakan Matahari yang menguasai siang dan matahari tersebut sebagai penentu waktu. Benda terang yang kecil dinamakan Bulan yang menguasai malam dan bulan sebagai penentu hari, Bulan dan matahari sama sama sebagai penentu masa dan zaman. Juga ALLah menciptakan bersamaan bulan yaitu bintang bintang yang menghiasi cakrawala di malam hari. Lalu Allah melihat ciptaanNya Benda Terang itu baik dan benar, jadilah petang dan pagi itulah hari KEEMPAT. Di hari kelima dengan FirmanNya Allah menciptakan IKAN-IKAN DAN SEGALA BINATANG AIR DAN BURUNG BURUNG DAN SEGALA BINATANG BERSAYAP YANG DAPAT TERBANG, lalu Allah melihat ciptaanNya ikan-ikan dan burung burung itu baik dan benar, jadilah petang dan pagi itulah hari KELIMA. Lalu dihari keenam dengan FirmanNya Allah menciptakan HEWAN-HEWAN, SEGALA BINATANG DAN TERNAK, Lalu Allah melihat ciptaanya itu hewan-hewan, segala binatang dan ternak adalah baik dan benar, juga di hari yang sama kemudian dengan FirmanNya Allah menciptakan MANUSIA menurut gambar dan rupa Allah dan menghembuskan nafas hidup ke dalam lobang hidung manusia itu, lalu Allah melihat ciptaaNya hewan-hewan, segala binatang dan ternak itu juga manusia itu baik dan benar, jadilah petang dan pagi itulah hari KEENAM.
<br></br>Keterangan bahwa penciptaan dari hari keempat sampai keenam itu merupakan penciptaan isi dari tempat bumi dan langit yang dihari pertama sampai hari ketiga yang telah diciptakan Allah itu, di hari keempat hingga keenam penciptaan ini mulai adanya berkat Allah bagi kehidupan di alam semesta. Dihari ketujuh lalu Allah berhenti dari bekerja, Allah menguduskan dan memberkati hari KETUJUH itu.
<br></br>Hari ketujuh yang zaman sekarang adalah hari minggu tetapi setelah kebangkitan Yesus Kristus, hari ketujuh hari minggu itu telah menjadi hari pertama yang diyakini sebagai suatu tanda antara manusia dan keturunan selanjutnya dengan Allah. Hari ketujuh merupakan hari peristirahatan hari khusus untuk Tuhan Allah dimana manusia mulai mencari hubungan dengan penciptaNya dan beribadah menyembah Sang pencipta Khalik langit dan bumi: Allah Maha Kuasa.
<br></br>Usaha dan upaya manusia mencari hari kudus, hari penuh kemuliaan, hari penuh berkat dari Tuhan, hari khusus untuk pemujaan Tuhan Allah, manusia mencari hadirat Allah yang Maha Kudus terus dilakukan dari zaman dahulu hingga saat ini. Hari kudus yang bagaimana yang sebenarnya dimana Allah hadir untuk dipuja dan disembah, hari itu berkenan bagi sorga Allah, seperti pada orang orang muslim menyakini bahwa hari kudus itu di hari Jumat mereka beribadah menyembah Tuhan Allah, juga seperti pada orang orang Kristen aliran adven yang menyakini hari kudus itu di hari sabtu, lau mereka beribadah di hari itu untuk memuja dan menyembah Tuhan Allah, tetapi lain halnya pada orang orang Kristen pengikut kristus sejati menyakini bahwa hari kudus itu adalah di hari ketujuh hari minggu yang juga hari Kebangkitan Yesus Kristus. Hari ketujuh itu diyakini para pengikut Kristus sejati adalah hari kudus yang diberkati Tuhan, hari yang penuh kemuliaan, hari kebangkitan dimana mereka sejenak melepaskan segala masalah persoalan hidup kematerialan dan kerohaniannya kembali menjumpai PenciptaNya untuk kembali suci sama segambar dan serupa dengan Allah penciptaNya. Dalam seminggu yang telah terlalui enam hari bekerja yang tak mungkin tak segala dosa dan kesalahan yang telah diperbuat mereka memohon pengampunan dari Allah agar kepudaran rupa manusianya itu kembali lagi mereka menyerupai segambar dan serupa dengan Allah penciptanya sebab manusia adalah wakil Allah di permukaan bumi. Manusia adalah ciptaan Allah yang Maha KaryaNya Ciptaan yang paling agung, manusia itu ciptaanNya yang paling dekat dengan Sorga dibanding dengan ciptaanNYa yang lainnya, pada manusialah diberi amanah oleh Allah.
<a href="dokumen/PEMBAHARUAN KALENDER 1.htm">Baca Lebih Lanjut
</p><br/><br/>
<div class="share">
<h3>Share This Post</h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon pinterest.png"></a>
</div><!--akhir class share--><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 share maka perlu dibuatkan nilai CSS untuk gaya class share 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 .share {
border-top: 5px solid #333;
margin: 0 5px;
}
.buaya .single-post .share h3 {
margin: 10px 0 10px;
}
.buaya .single-post .share img {
width: 30px;
height: 30px;
}
.buaya .single-post .share 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 (lihat gambar), silahkan sesuaikan gayanya sesuai keinginan.
Selamat,
website HTML sudah selesai. Sekarang kalian sudah paham bagaimana
struktur website dan dapat menelusurinya lebih lanjut / membuat situs
sesuai yang diinginkan dengan dasar HTML CSS ini.
Terimakasih sudah mengikuti tutorial membuat website HTML CSS Sederhana ini dari Sesi 1 (8 part) hingga Sesi 2 (7 part).
Mudah kan ? Kalau masih bingung silahkan pelajari tutorial-tutorial lain tentang Cara Membuat Website HTML-CSS.
Dan nantikan tutoorial selanjutnya di Sesi 3: Tutorial membuat website responsif sederhana menggunakan Bootstrap
Setelah menyelesaikan tutorial ini dari awal, dapat download file secara keseluruhan disini (bisa untuk pengguna yang ingin code original dari tutorial ini karena beberapa pengguna mungkin mengalami masalah ketika mengikuti tutorial tanpa melihat code original ini). Password: www.riobermano.com
Apa yang harus saya lakukan selanjutnya ?
Pada tutorial ini hanya mencontohkan satu halaman saja, selanjutnya kalian dapat membuat beberapa halaman yang diperlukan seperti halaman kontak / halaman lainnya. Lihat semua tutorial HTML & CSS di situs ini untuk melengkapi pengetahuan tentang HTML & CSS dan bisa diterapkan juga ke situs yang baru saja dibuat seperti situs di tutorial ini.
Mau membuat website responsive menggunakan Bootstrap ? membuat website responsive menggunakan framework Bootstrap tidaklah sulit jika kita sudah mengerti dan menguasai cara membuat website HTML & CSS sesi 1 (8 part) dan sesi 2 (7 part) ini.
Selamat mencoba !
PART 7
PAGINASI (PAGINATION)
Sekarang kita lanjutkan ke part terakhir yaitu part 7 sesi 2. Tutorial kali ini akan melengkapi tutorial-tutorial sebelumnya, hanya tambahan saja. Kita akan menambahkan paginasi / pagination pada bagian bawah didaftar artikel terbaru (home page), hanya berupa tulisan
<---Sebelumnya dan Selanjutnya---> (di paginatin Sebelumnya dan Selanjutnya ditambahkan tanda panah kiri dan panah kanan.
Buka file html home page-nya yaitu membuatwebsite1.html, kemudian tambahkan kode HTML berikut dibagian bawah setelah post terakhir / post terbawah Artikel Terbaru dihalaman home:
<div class="pagination">
<li class="kiri"><a href="">← Sebelumnya</a></li>
<li class="kanan"><a href="">Selanjutnya →</a></li>
</div>
Tambahkan kode tersebut dibawah post terakhir (setelah paragraf terakhir) tapi masih didalam class artikelTerbaru. Teks ← disitu artinya icon panah ke kiri dan → adalah ikon panah ke kanan.
Tampilan class paginatin kita beri gaya (style)nya di CSS agar rapih ketika dibuka di browser, tambahkan code CSS ini di sebelum /* akhir class artikelTerbaru */
pada file style1.css -nya, yaitu:
.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;
}
Teks .pagination ditulis mengikuti (setelah) .buaya , karena .pagination berada didalam .buaya, supaya lebih spesifik saya tuliskan juga .buaya nya tapi kalo gak mau gak apa-apa. Cuma jaga-jaga aja, siapa tahu ada class pagination lain didalam HTML tersebut, jadi bisa dibedakan masing-masing gayanya.
Save dan lihat hasilnya di browser (lihat gambar)!
Untuk menerapkan class pagination ini, maka Artikel harus dibuat banyak-banyak sebagai class Artikel terbaru.
Mari kita akhiri tutorial Sesi 2 ini dengan membuat Share Post
SHARE POST
Pada part ini kita akan membuat tombol link share dibagian bawah artikel / single pos yang sudah ada.
Membuat Tombol Share Post
Untuk mempercepat, bisa disalin saja bagian media sosial di widget yang sudah dibuat sebelumnya.
<div class="mediaSosial">
<h3>Media Sosial, Let's Connect !</h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon pinterest.png"></a>
</div><!--akhir class mediaSosial-->
Ini adalah bagian media sosial di widget yang digunakan untuk mengarahkan ke masing-masing media sosial, sekarang tinggal ganti fungsinya untuk share post. Ganti class mediaSosial misalnya menjadi class share, sehingga code HTML share post adalah seperti berikut ini:
<div class="share">
<h3>Share This </h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon pinterest.png"></a>
</div><!--akhir class share-->
Salin code HTML tersebut dan tempelkan dibagian bawah pos / artikel yang mau akan dibagikan. Silahkan tempelkan code tersebut tepat sebelum akhir class single-post, misalnya sebelum akhir class recomendedKiri (</div><!--akhir class recomendedKiri -->), supaya tombol share media sosial ini masih berada didalam pos.
Setelah ditempel / paste didalam post, silahkan ganti nama class nya sesuai keinginan misalnya class mediasosial diganti misalnya menjadi class share supaya enak mengkustomnya. Maka code didalam single-post akan menjadi seperti ini:
<div class="single-post">
<a href=""><img src="dokumen/gbr2.png"></a>
<a href="dokumen/PEMBAHARUAN KALENDER 1.htm"><h2>Luni Solar Kreator Allah</h2></a>
<p>
“PEMBAHARUAN KALENDER :
PEMBAHARUAN HARI MINGGU HARI KETUJUH YANG TERSEMBUNYI”
Oleh: S.R.Pakpahan,SST
<br></br> 1. PENDAHULUAN
<br></br>Pada mulanya Allah menciptakan bumi dan langit, langit dan bumi yang masih kosong dan gelap gulita merupakan tempat yang diyakini memuat kehidupan dimana Roh Allah melayang layang diatas permukaan air dan Allah mulai berkarya menciptakan segala isi alam semesta di bumi dan di langit. Pada tempat dan isinya tempat itu (langit dan bumi), Allah sebagai Pencipta Maha Agung dan Maha Kuasa menciptakan segala sesuatunya dengan rapi tersusun membentuk suatu jalinan rantai jalan kehidupan dari ujung bumi menuju sorga yang didalam penciptaannya itu Allah mulai merealisasikan rencanaNya SEMUA UNTUK SATU, semua untuk Allah di Sorga.
<br></br>Pada mulanya adalah Firman, Firman itu bersama sama dengan Allah dan Firman itu adalah Allah, di hari pertama dengan FirmanNya Allah menciptakan TERANG, lalu Allah melihat ciptaannya Terang itu baik dan benar, jadilah petang dan pagi itulah hari PERTAMA. Dihari kedua dengan FirmanNya Allah menciptakan CAKRAWALA (LANGIT) sebagai pembatas antara bagian tempat yang di bawah dengan bagian yang di atas, lalu Allah melihat ciptaanNya Cakrawala itu baik dan benar, jadilah petang dan pagi itulah hari KEDUA. Di hari ketiga dengan FirmanNya Allah menciptakan LAUT, DARAT DAN TUMBUH TUMBUHAN, lalu Allah melihat ciptaanNya laut, darat dan tumbuh tumbuhan itu baik dan benar, jadilah petang dan pagi itulah hari KETIGA.
<br></br>Keterangan bahwa penciptaan dari hari pertama sampai hari ketiga itu merupakan penciptaan tempat kehidupan Sorgawi, yang selanjutnya penciptaan di hari keempat dengan FirmanNya Allah menciptakan BENDA BENDA TERANG yang menempati di cakrawala, Benda terang yang besar dinamakan Matahari yang menguasai siang dan matahari tersebut sebagai penentu waktu. Benda terang yang kecil dinamakan Bulan yang menguasai malam dan bulan sebagai penentu hari, Bulan dan matahari sama sama sebagai penentu masa dan zaman. Juga ALLah menciptakan bersamaan bulan yaitu bintang bintang yang menghiasi cakrawala di malam hari. Lalu Allah melihat ciptaanNya Benda Terang itu baik dan benar, jadilah petang dan pagi itulah hari KEEMPAT. Di hari kelima dengan FirmanNya Allah menciptakan IKAN-IKAN DAN SEGALA BINATANG AIR DAN BURUNG BURUNG DAN SEGALA BINATANG BERSAYAP YANG DAPAT TERBANG, lalu Allah melihat ciptaanNya ikan-ikan dan burung burung itu baik dan benar, jadilah petang dan pagi itulah hari KELIMA. Lalu dihari keenam dengan FirmanNya Allah menciptakan HEWAN-HEWAN, SEGALA BINATANG DAN TERNAK, Lalu Allah melihat ciptaanya itu hewan-hewan, segala binatang dan ternak adalah baik dan benar, juga di hari yang sama kemudian dengan FirmanNya Allah menciptakan MANUSIA menurut gambar dan rupa Allah dan menghembuskan nafas hidup ke dalam lobang hidung manusia itu, lalu Allah melihat ciptaaNya hewan-hewan, segala binatang dan ternak itu juga manusia itu baik dan benar, jadilah petang dan pagi itulah hari KEENAM.
<br></br>Keterangan bahwa penciptaan dari hari keempat sampai keenam itu merupakan penciptaan isi dari tempat bumi dan langit yang dihari pertama sampai hari ketiga yang telah diciptakan Allah itu, di hari keempat hingga keenam penciptaan ini mulai adanya berkat Allah bagi kehidupan di alam semesta. Dihari ketujuh lalu Allah berhenti dari bekerja, Allah menguduskan dan memberkati hari KETUJUH itu.
<br></br>Hari ketujuh yang zaman sekarang adalah hari minggu tetapi setelah kebangkitan Yesus Kristus, hari ketujuh hari minggu itu telah menjadi hari pertama yang diyakini sebagai suatu tanda antara manusia dan keturunan selanjutnya dengan Allah. Hari ketujuh merupakan hari peristirahatan hari khusus untuk Tuhan Allah dimana manusia mulai mencari hubungan dengan penciptaNya dan beribadah menyembah Sang pencipta Khalik langit dan bumi: Allah Maha Kuasa.
<br></br>Usaha dan upaya manusia mencari hari kudus, hari penuh kemuliaan, hari penuh berkat dari Tuhan, hari khusus untuk pemujaan Tuhan Allah, manusia mencari hadirat Allah yang Maha Kudus terus dilakukan dari zaman dahulu hingga saat ini. Hari kudus yang bagaimana yang sebenarnya dimana Allah hadir untuk dipuja dan disembah, hari itu berkenan bagi sorga Allah, seperti pada orang orang muslim menyakini bahwa hari kudus itu di hari Jumat mereka beribadah menyembah Tuhan Allah, juga seperti pada orang orang Kristen aliran adven yang menyakini hari kudus itu di hari sabtu, lau mereka beribadah di hari itu untuk memuja dan menyembah Tuhan Allah, tetapi lain halnya pada orang orang Kristen pengikut kristus sejati menyakini bahwa hari kudus itu adalah di hari ketujuh hari minggu yang juga hari Kebangkitan Yesus Kristus. Hari ketujuh itu diyakini para pengikut Kristus sejati adalah hari kudus yang diberkati Tuhan, hari yang penuh kemuliaan, hari kebangkitan dimana mereka sejenak melepaskan segala masalah persoalan hidup kematerialan dan kerohaniannya kembali menjumpai PenciptaNya untuk kembali suci sama segambar dan serupa dengan Allah penciptaNya. Dalam seminggu yang telah terlalui enam hari bekerja yang tak mungkin tak segala dosa dan kesalahan yang telah diperbuat mereka memohon pengampunan dari Allah agar kepudaran rupa manusianya itu kembali lagi mereka menyerupai segambar dan serupa dengan Allah penciptanya sebab manusia adalah wakil Allah di permukaan bumi. Manusia adalah ciptaan Allah yang Maha KaryaNya Ciptaan yang paling agung, manusia itu ciptaanNya yang paling dekat dengan Sorga dibanding dengan ciptaanNYa yang lainnya, pada manusialah diberi amanah oleh Allah.
<a href="dokumen/PEMBAHARUAN KALENDER 1.htm">Baca Lebih Lanjut
</p><br/><br/>
<div class="share">
<h3>Share This Post</h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon pinterest.png"></a>
</div><!--akhir class share--><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 share maka perlu dibuatkan nilai CSS untuk gaya class share 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 .share {
border-top: 5px solid #333;
margin: 0 5px;
}
.buaya .single-post .share h3 {
margin: 10px 0 10px;
}
.buaya .single-post .share img {
width: 30px;
height: 30px;
}
.buaya .single-post .share 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 (lihat gambar), silahkan sesuaikan gayanya sesuai keinginan.
Terimakasih sudah mengikuti tutorial membuat website HTML CSS Sederhana ini dari Sesi 1 (8 part) hingga Sesi 2 (7 part).
Mudah kan ? Kalau masih bingung silahkan pelajari tutorial-tutorial lain tentang Cara Membuat Website HTML-CSS.
Dan nantikan tutoorial selanjutnya di Sesi 3: Tutorial membuat website responsif sederhana menggunakan Bootstrap
Setelah menyelesaikan tutorial ini dari awal, dapat download file secara keseluruhan disini (bisa untuk pengguna yang ingin code original dari tutorial ini karena beberapa pengguna mungkin mengalami masalah ketika mengikuti tutorial tanpa melihat code original ini). Password: www.riobermano.com
Apa yang harus saya lakukan selanjutnya ?
Pada tutorial ini hanya mencontohkan satu halaman saja, selanjutnya kalian dapat membuat beberapa halaman yang diperlukan seperti halaman kontak / halaman lainnya. Lihat semua tutorial HTML & CSS di situs ini untuk melengkapi pengetahuan tentang HTML & CSS dan bisa diterapkan juga ke situs yang baru saja dibuat seperti situs di tutorial ini.
Mau membuat website responsive menggunakan Bootstrap ? membuat website responsive menggunakan framework Bootstrap tidaklah sulit jika kita sudah mengerti dan menguasai cara membuat website HTML & CSS sesi 1 (8 part) dan sesi 2 (7 part) ini.
Selamat mencoba !
Secara keseluruhan, inilah hasil pengkodingan HTML-CSS sehingga terbentuk sebuah Website.
Code HTML Halaman Beranda (Home Page):
<!doctype html>
<html>
<head>
<title>Membuat Website - HTML PMD Sesawi-AK</title>
<link rel="shortcut icon" type="image/png" href="images/favicon.ico"/>
<link href="css/style1.css" type="text/css" rel="stylesheet">
<link href="single pos.html>
<link href="single pos 1.html>
<link href="single pos 2.html>
<link href="single pos 3.html>
</head>
<body>
<header>
<img src="images/logo pmd.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">
<h3><a href="single pos.html"><img src="dokumen/gbr2.png"> Luni Solar Kreator Allah</a></h3>
<p>Pada mulanya Allah menciptakan bumi dan langit, langit dan bumi yang masih kosong dan gelap gulita merupakan tempat yang diyakini memuat kehidupan dimana Roh Allah melayang layang diatas permukaan air dan Allah mulai berkarya menciptakan segala isi alam semesta di bumi dan di langit. Pada tempat dan isinya tempat itu (langit dan bumi), Allah sebagai Pencipta Maha Agung dan Maha Kuasa menciptakan segala sesuatunya dengan rapi tersusun membentuk suatu jalinan rantai jalan kehidupan dari ujung bumi menuju sorga yang didalam penciptaannya itu Allah mulai merealisasikan rencanaNya SEMUA UNTUK SATU, semua untuk Allah di Sorga. <a href="single pos.html"><strong>Baca Selengkapnya</strong></a></p>
</div><!--akhir class recomendedKiri-->
<div class="recomendedKanan">
<h3><a href="single pos 1.html"><img src="dokumen/gbr3.png">Kelompok Instrumen Musik (Bagian 1)</a></h3>
<p>Kelompok Instrumen musik dalam PMD “Luni Solar” Music oleh PMD Sawi-AK ada sebanyak 7 tapi 8 kelompok instrumen musik yang posisi letak masing-masing instrumen tersusun rapi menurut Instrumen Penjuru Musik (IPM). Pembentukan kelompok instrumen musik ini, prosesnya dapat dilihat pada gambar IPM1 – gambar IPM6 di menu My photo/IPM PMD “Luni Solar” Music.
Adapun 7 tapi 8 kelompok instrumen musik tersebut adalah sebagai berikut
<a href="single pos 1.html"><strong>Baca Selengkapnya</strong></a></p>
</div><!--akhir class recomendedKanan-->
<div class="recomendedKiriBawah">
<h3><a href="single pos 2.html"><img src="dokumen/gbr2.png">Luni Solar Kreator Allah</a></h3>
<p>Pada mulanya Allah menciptakan bumi dan langit, langit dan bumi yang masih kosong dan gelap gulita merupakan tempat yang diyakini memuat kehidupan dimana Roh Allah melayang layang diatas permukaan air dan Allah mulai berkarya menciptakan segala isi alam semesta di bumi dan di langit. Pada tempat dan isinya tempat itu (langit dan bumi), Allah sebagai Pencipta Maha Agung dan Maha Kuasa menciptakan segala sesuatunya dengan rapi tersusun membentuk suatu jalinan rantai jalan kehidupan dari ujung bumi menuju sorga yang didalam penciptaannya itu Allah mulai merealisasikan rencanaNya SEMUA UNTUK SATU, semua untuk Allah di Sorga. <a href="single-post.html"><strong>Baca Selengkapnya</strong></a></p>
<div class="share">
<h3>Share This Post</h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon pinterest.png"></a>
</div><!--akhir class share--><br/>
</div><!--akhir class recomendedKiriBawah-->
<div class="recomendedKananBawah">
<h3><a href="single pos 1.html"><img src="dokumen/gbr3.png">Kelompok Instrumen Musik (Bagian 1)</a></h3>
<p>Kelompok Instrumen musik dalam PMD “Luni Solar” Music oleh PMD Sawi-AK ada sebanyak 7 tapi 8 kelompok instrumen musik yang posisi letak masing-masing instrumen tersusun rapi menurut Instrumen Penjuru Musik (IPM). Pembentukan kelompok instrumen musik ini, prosesnya dapat dilihat pada gambar IPM1 – gambar IPM6 di menu My photo/IPM PMD “Luni Solar” Music.
Adapun 7 tapi 8 kelompok instrumen musik tersebut adalah sebagai berikut
<a href="single pos 1.html"><strong>Baca Selengkapnya</strong></a></p>
</div><!--akhir class recomendedKananBawah-->
</div><!--akhir class recomended-->
<div class="buaya">
<div class="widget">
<div class="artikelTerlaris">
<h3>Artikel Terlaris</h3>
<a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm" > <img src="dokumen/gbr1.jpg" ><h4>Tutorial Music Studio FL 11</h4></a> <p>Fungsi studio musik adalah wahana para musisi untuk berproduksi atau menghasilkann musik, baik dalam menggambar, mengedit, membangkitkan/pemakaian instrumen, memberi efek pada instrumen atau memixer musik, dan sebagainya sehingga terciptalah lagu yang merdu, nyaring berkualitas tinggi yang layak go publik di terima masyarakat dunia. <a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm"> KLIK </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>Media Sosial, Let's Connect !</h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon 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 subscribe-->
<div class="komentar">
<h3>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 class="footerKiri">
<h3>anone</h3>
</div><!--akhir class Footer Kiri-->
</div><!--akhir class footerKirie-->
<div class="artikelTerbaru">
<a href=""></a>
<a href="dokumen/DIBERKATI DAN MEMBERKATI.htm"><img src="dokumen/gbr4.png"><h2>DIBERKATI DAN MEMBERKATI</h2></a>
<p>Mazmur 37:25-26
<br/>37:25 Dahulu aku muda, sekarang telah menjadi tua, tetapi tidak pernah kulihat orang benar ditinggalkan, atau anak cucunya meminta-minta roti; 37:26 tiap hari ia menaruh belas kasihan dan memberi pinjaman, dan anak cucunya menjadi berkat. </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>
<div class="pagination">
<li class="kiri"><a href="">← Sebelumnya</a></li>
<li class="kanan"><a href="">Selanjutnya →</a></li>
</div><!--akhir class pagination-->
</div><!--akhir class Artikel Terbaru-->
</div>
</div><!--akhir class buaya-->
<div class="footer">
<p>@Copyright 2020 | PMD Sesawi- AK | <a href="https://PMD Sesawi-AK.com" target="_blank">SR.Pakpahan,SST</a></p>
</div><!--akhir class footer-->
</body>
</html>
Code HTML Halaman-halaman Pos Tunggal (Single Posts)
Ada 2 buah single post yaitu singlepos.html dan singlepos1.html:
Code singlepos.html:
<!doctype html>
<html>
<head>
<title>Membuat Website Sederhana - Single Post</title>
<link href="css/style1.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<img src="images/logo pmd.jpg">
</header>
<menu>
<li><a href="membuatwebsitehtml1.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>
<a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm" > <img src="dokumen/gbr1.jpg" ><h4>Tutorial Music Studio FL 11</h4></a> <p>Fungsi studio musik adalah wahana para musisi untuk berproduksi atau menghasilkann musik, baik dalam menggambar, mengedit, membangkitkan/pemakaian instrumen, memberi efek pada instrumen atau memixer musik, dan sebagainya sehingga terciptalah lagu yang merdu, nyaring berkualitas tinggi yang layak go publik di terima masyarakat dunia. <a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm"> KLIK </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>Media Sosial, Let's Connect !</h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon 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 subscribe-->
<div class="komentar">
<h3>Komentar</h3>
<form>
<br/><input type="text" required><br/>
<input type="submit" value="Kirim">
</form>
</div><!--akhir class komentar-->
<div class="footerKiri">
<h3>anone</h3>
</div><!--akhir class Footer Kiri-->
</div>
<div class="single-post">
<a href=""><img src="images/dua.jpg"></a>
<a href="dokumen/PEMBAHARUAN KALENDER 1.htm"><h2>Luni Solar Kreator Allah</h2></a>
<p>
“PEMBAHARUAN KALENDER :
PEMBAHARUAN HARI MINGGU HARI KETUJUH YANG TERSEMBUNYI”
Oleh: S.R.Pakpahan,SST
<br></br> 1. PENDAHULUAN
<br></br>Pada mulanya Allah menciptakan bumi dan langit, langit dan bumi yang masih kosong dan gelap gulita merupakan tempat yang diyakini memuat kehidupan dimana Roh Allah melayang layang diatas permukaan air dan Allah mulai berkarya menciptakan segala isi alam semesta di bumi dan di langit. Pada tempat dan isinya tempat itu (langit dan bumi), Allah sebagai Pencipta Maha Agung dan Maha Kuasa menciptakan segala sesuatunya dengan rapi tersusun membentuk suatu jalinan rantai jalan kehidupan dari ujung bumi menuju sorga yang didalam penciptaannya itu Allah mulai merealisasikan rencanaNya SEMUA UNTUK SATU, semua untuk Allah di Sorga.
<br></br>Pada mulanya adalah Firman, Firman itu bersama sama dengan Allah dan Firman itu adalah Allah, di hari pertama dengan FirmanNya Allah menciptakan TERANG, lalu Allah melihat ciptaannya Terang itu baik dan benar, jadilah petang dan pagi itulah hari PERTAMA. Dihari kedua dengan FirmanNya Allah menciptakan CAKRAWALA (LANGIT) sebagai pembatas antara bagian tempat yang di bawah dengan bagian yang di atas, lalu Allah melihat ciptaanNya Cakrawala itu baik dan benar, jadilah petang dan pagi itulah hari KEDUA. Di hari ketiga dengan FirmanNya Allah menciptakan LAUT, DARAT DAN TUMBUH TUMBUHAN, lalu Allah melihat ciptaanNya laut, darat dan tumbuh tumbuhan itu baik dan benar, jadilah petang dan pagi itulah hari KETIGA.
<br></br>Keterangan bahwa penciptaan dari hari pertama sampai hari ketiga itu merupakan penciptaan tempat kehidupan Sorgawi, yang selanjutnya penciptaan di hari keempat dengan FirmanNya Allah menciptakan BENDA BENDA TERANG yang menempati di cakrawala, Benda terang yang besar dinamakan Matahari yang menguasai siang dan matahari tersebut sebagai penentu waktu. Benda terang yang kecil dinamakan Bulan yang menguasai malam dan bulan sebagai penentu hari, Bulan dan matahari sama sama sebagai penentu masa dan zaman. Juga ALLah menciptakan bersamaan bulan yaitu bintang bintang yang menghiasi cakrawala di malam hari. Lalu Allah melihat ciptaanNya Benda Terang itu baik dan benar, jadilah petang dan pagi itulah hari KEEMPAT. Di hari kelima dengan FirmanNya Allah menciptakan IKAN-IKAN DAN SEGALA BINATANG AIR DAN BURUNG BURUNG DAN SEGALA BINATANG BERSAYAP YANG DAPAT TERBANG, lalu Allah melihat ciptaanNya ikan-ikan dan burung burung itu baik dan benar, jadilah petang dan pagi itulah hari KELIMA. Lalu dihari keenam dengan FirmanNya Allah menciptakan HEWAN-HEWAN, SEGALA BINATANG DAN TERNAK, Lalu Allah melihat ciptaanya itu hewan-hewan, segala binatang dan ternak adalah baik dan benar, juga di hari yang sama kemudian dengan FirmanNya Allah menciptakan MANUSIA menurut gambar dan rupa Allah dan menghembuskan nafas hidup ke dalam lobang hidung manusia itu, lalu Allah melihat ciptaaNya hewan-hewan, segala binatang dan ternak itu juga manusia itu baik dan benar, jadilah petang dan pagi itulah hari KEENAM.
<br></br>Keterangan bahwa penciptaan dari hari keempat sampai keenam itu merupakan penciptaan isi dari tempat bumi dan langit yang dihari pertama sampai hari ketiga yang telah diciptakan Allah itu, di hari keempat hingga keenam penciptaan ini mulai adanya berkat Allah bagi kehidupan di alam semesta. Dihari ketujuh lalu Allah berhenti dari bekerja, Allah menguduskan dan memberkati hari KETUJUH itu.
<br></br>Hari ketujuh yang zaman sekarang adalah hari minggu tetapi setelah kebangkitan Yesus Kristus, hari ketujuh hari minggu itu telah menjadi hari pertama yang diyakini sebagai suatu tanda antara manusia dan keturunan selanjutnya dengan Allah. Hari ketujuh merupakan hari peristirahatan hari khusus untuk Tuhan Allah dimana manusia mulai mencari hubungan dengan penciptaNya dan beribadah menyembah Sang pencipta Khalik langit dan bumi: Allah Maha Kuasa.
<br></br>Usaha dan upaya manusia mencari hari kudus, hari penuh kemuliaan, hari penuh berkat dari Tuhan, hari khusus untuk pemujaan Tuhan Allah, manusia mencari hadirat Allah yang Maha Kudus terus dilakukan dari zaman dahulu hingga saat ini. Hari kudus yang bagaimana yang sebenarnya dimana Allah hadir untuk dipuja dan disembah, hari itu berkenan bagi sorga Allah, seperti pada orang orang muslim menyakini bahwa hari kudus itu di hari Jumat mereka beribadah menyembah Tuhan Allah, juga seperti pada orang orang Kristen aliran adven yang menyakini hari kudus itu di hari sabtu, lau mereka beribadah di hari itu untuk memuja dan menyembah Tuhan Allah, tetapi lain halnya pada orang orang Kristen pengikut kristus sejati menyakini bahwa hari kudus itu adalah di hari ketujuh hari minggu yang juga hari Kebangkitan Yesus Kristus. Hari ketujuh itu diyakini para pengikut Kristus sejati adalah hari kudus yang diberkati Tuhan, hari yang penuh kemuliaan, hari kebangkitan dimana mereka sejenak melepaskan segala masalah persoalan hidup kematerialan dan kerohaniannya kembali menjumpai PenciptaNya untuk kembali suci sama segambar dan serupa dengan Allah penciptaNya. Dalam seminggu yang telah terlalui enam hari bekerja yang tak mungkin tak segala dosa dan kesalahan yang telah diperbuat mereka memohon pengampunan dari Allah agar kepudaran rupa manusianya itu kembali lagi mereka menyerupai segambar dan serupa dengan Allah penciptanya sebab manusia adalah wakil Allah di permukaan bumi. Manusia adalah ciptaan Allah yang Maha KaryaNya Ciptaan yang paling agung, manusia itu ciptaanNya yang paling dekat dengan Sorga dibanding dengan ciptaanNYa yang lainnya, pada manusialah diberi amanah oleh Allah.
<a href="dokumen/PEMBAHARUAN KALENDER 1.htm">Baca Lebih Lanjut
<br/><br/></p>
<div class="share">
<h3>Share This Post</h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon pinterest.png"></a>
</div><!--akhir class share--><br/>
</div><!--akhir class single-post-->
</div>
</div><!--akhir class buaya-->
<div class="footer">
<p>@Copyright 2020 | PMD Sesawi- AK | <a href="https://PMD Sesawi-AK.com" target="_blank">SR.Pakpahan,SST</a></p>
</div><!--akhir class footer-->
</body>
</html>
Code singlepos1.html:
<!doctype html>
<html>
<head>
<title>Membuat Website Sederhana - Single Post</title>
<link href="css/style1.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<img src="images/logo pmd musik.jpg">
</header>
<menu>
<li><a href="membuatwebsitehtml1.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>
<a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm" > <img src="dokumen/gbr1.jpg" ><h4>Tutorial Music Studio FL 11</h4></a> <p>Fungsi studio musik adalah wahana para musisi untuk berproduksi atau menghasilkann musik, baik dalam menggambar, mengedit, membangkitkan/pemakaian instrumen, memberi efek pada instrumen atau memixer musik, dan sebagainya sehingga terciptalah lagu yang merdu, nyaring berkualitas tinggi yang layak go publik di terima masyarakat dunia. <a href="dokumen/TUTORIAL CARA MEMBUAT LAGU DI STUDIO MUSIK (Tutorial 1).htm"> KLIK </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>Media Sosial, Let's Connect !</h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon 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 subscribe-->
<div class="komentar">
<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 class="footerKiri">
<h3>anone</h3>
</div><!--akhir class Footer Kiri-->
</div>
<div class="single-post">
<a href=""><img src="dokumen/gbr3.png"></a>
<a href="dokumen/KELOMPOK INSTRUMEN (bagian 1).htm"><h2>Kelompok Instrumen Musik (Bagian 1)</h2></a>
<p>
KELOMPOK INSTRUMEN MUSIK
(Bagian 1)
<br/>Oleh: SR.Pakpahan, SST
<br></br>
Kelompok Instrumen musik dalam PMD “Luni Solar” Music oleh PMD Sawi-AK ada sebanyak 7 tapi 8 kelompok instrumen musik yang posisi letak masing-masing instrumen tersusun rapi menurut Instrumen Penjuru Musik (IPM). Pembentukan kelompok instrumen musik ini, prosesnya dapat dilihat pada gambar IPM1 hingga gambar IPM6 di menu My photo/IPM PMD “Luni Solar” Music.
<br/>Adapun 7 tapi 8 kelompok instrumen musik tersebut adalah sebagai berikut
<li>1.a. Instrumen Vokal (Trebel)
<li>1.b. Instrumen Akhir / Penguat (Trebel)
<li>2. Instrumen Melodi (Trebel & Bass)
<li>3. Instrumen Ritme (Trebel & Bass)
<li>4. Instrumen Variasi Ketukan (Trebel & Bass)
Posisi Instrumen Variasi Ketukan berada diantara Instrumen Melodi dan Instrumen Ritme
<li>5. Instrumen Ketukan (Trebel & Bass)
<li>6. Instrumen Harmony (Trebel & Bass)
<li>7. Instrumen Variasi Melodi (Trebel & Bass)
<br/>Posisi Instrumen Variasi Melodi berada diantara Instrumen Ketukan dan Instrumen Harmony
<br/>Permainan instrumen musik dengan vokal ini mengambil contoh lagu yang berjudul “AKU ANGGOTA KELUARGA ALLAH”. Adapun NPL (Nada penjuru Lagu), IPM (Instrumen Penjuru Musik) dapat dilihat pada gambar di menu My photo/PMD “Luni Solar” Music.
<br></br>1.a. Instrumen Vokal (Trebel)
<br/>Instrumen Vokal sebagai salah satu kelompok Instrumen musik dalam PMD “Luni Solar” Music menempati posisi paling terbawah (terakhir). Instrumen Vokal memainkan/membunyikan nada nada vokal penyanyi yang sudah tersusun rapi, baik, benar, dan harmonis memakai kunci akord sesuai kreasi rangkaian nada-nada pada lirik syair lagu yang ada melalui penciptaan Nada Penjuru Lagu (NPL).
Instrumen Vokal pada applikasi musik ada beberapa jenis seperti:
- Voice (berklep trebel)
- Soprano (berklep trebel)
- Mezzo soprano (berklep trebel)
- Alto (berklep trebel)
- Tenor (berklep trebel 8Vb)
- Baritone (berklep bass)
- Bass (berklep bass).
- Dan lain-lain
<br/>Dari hasil akhir pembentukan kelompok instrumen musik ini oleh PMD “Luni Solar” Music pada gambar IPM6 di menu My photo/IPM PMD “Luni Solar Music dapat terlihat bahwa ada 3 (tiga) jenis vokal (semua berklep trebel) yang terbentuk yang dapat digunakan dalam perpaduan permainan instrumen musik dan vokal yaitu:
<br/>- 3 (tiga) jenis vokal untuk lagu yang dibawakan oleh para penyanyi Trio (sopran sebagai suara 1, tenor sebagai sebagai suara 3, dan alto sebagai suara 2). Jenis instrumen vokal yang digunakan pada 3 (tiga) jenis vokal ini adalah:
- Soprano (berklep trebel)
- Alto (berklep trebel)
- Tenor (berklep trebel 8Vb)
<br/> Bila 2 (dua) jenis vokal, maka untuk lagu yang dibawakan oleh para penyanyi Duet (sopran sebagai suara 1, dan tenor sebagai sebagai suara 3. Jenis instrumen vokal yang digunakan pada 2 (dua) jenis vokal ini adalah:
- Soprano (berklep trebel)
- Tenor (berklep trebel 8Vb)
<br/>atau Duet dengan sopran sebagai suara 1, dan alto sebagai suara 2. Jenis instrumen vokal yang digunakan pada 2 (dua) jenis vokal ini adalah:
- Soprano (berklep trebel)
- Alto (berklep trebel)
<br/>- Bila 1 (satu) jenis vokal, maka untuk lagu yang dibawakan oleh penyanyi Solo, cukup satu suara saja dengan jenis instrumen vokal yang digunakan adalah: Voice (berklep trebel)
<br/>Bagaimana kalau ada 4 (empat) jenis vokal, jangan dimainkan pada kelompok instrumen musik ini, ya, karena ada salah satu jenis vokal yang berklep bass. Maka lebih baik ke-4 jenis vokal tersebut bernyanyi bersama dalam 1 (satu) lagu paduan suara atau koor. Jenis permainan instrumen musik pada lagu paduan suara (koor) memiliki karakter dan aturan tersendiri. Sebagai contoh bisa di dengar dan dilihat pada lagu paduan suara (koor) yang berjudul “SEKALIPUN KAKIKU TERSANDUNG” oleh kreasi PMD Sawi-AK, Sempatkan diri Anda untuk membeli lagunya di http:///www.sheetmusicplus.com. Di kotak search ketikkan judul lagu SEKALIPUN KAKIKU TERSANDUNG, lalu enter, selanjutnya lakukan transaksi pembelian. Layanan kami memuaskan Anda mendapatkan ilmunya, juga mendapatkan lagunya PMD Music Creation membuat ruangan Anda asri, nyaman berirama PMD (Pedang Mata Dua).
<br/>Pada lagu berjudul “AKU ANGGOTA KELUARGA ALLAH” dengan permainan instrumen musik dengan vokal, hanya ada 1 (satu) jenis vokal yang menjadikan lagu ini berjenis lagu Solo dengan iringan instrumen musik (Band Music). Pada lagu “AKU ANGGOTA KELUARGA ALLAH” ini menggunakan Voice (Oohs choir) sebagai instrumen vokalnya.
<br>
</br>1.b. Instrumen Akhir / Instrumen Penguat (Trebel)
<br/>Instrumen Akhir / Instrumen Penguat sebagai salah satu kelompok Instrumen musik dalam PMD “Luni Solar” Music menempati posisi paling teratas (pertama). Instrumen Penguat memainkan/membunyikan nada nada sama persis dengan yang dimainkan oleh instrumen vokal melalui penciptaan Nada Penjuru Lagu (NPL), tapi ia berklep trebel 8Va (lakukan copy-paste saja, lalu ganti klepnya menjadi klep trebel 8 Va). Jenis instrumen penguat ini yang dapat digunakan dalam perpaduan permainan instrumen musik dan vokal yaitu harus dari instrumen alat tiup, atau instrumen yang dibunyikan oleh bantuan suara/nafas manusia, alat musiknya seperti PIKOLO. Cari deh alat musik Instrumen Penguat lainnya yang sejenis pada applikasi musik yang ada.
<br></br>2. Instrumen Melodi (Trebel & Bass).
<br/>Instrumen Melodi sebagai salah satu kelompok Instrumen musik dalam PMD “Luni Solar” Music menempati posisi setelah instrumen Ritme. Instrumen Melodi memainkan/membunyikan nada nada vokal yang ada melalui penciptaan Nada Penjuru Lagu (NPL) yang sudah di “split” (dipecah) menjadi nada-nada bass dan trebel, seperti pemakaian instrumen PIANO untuk melodi yang nada-nada bass-nya dari nada-nada vokal dimainkan di piano klep bassnya, sedangkan nada-nada trebel dimainkan di piano klep trebelnya, dan nada-nada lain di klep bass dan trebel piano tersebut memainkan nada-nada yang sesuai dengan progress nadanya. Biasanya di klep bass memiliki nada-nada yang frekwensi/oktafnya sama tinggi dengan frekwensi/oktaf nada klep trebel.
<br/>Pada instrumen melodi inilah , kita berkreasi membentuk rangkaian nada-nada bass maupun nada-nada trebel untuk lirik syair lagu yang kita inginkan lantunan melodinya, seluruhnya melalui prosedur Nada Penjuru Lagu (NPL). Pada lagu “AKU ANGGOTA KELUARGA ALLAH” ini menggunakan piano sebagai instrumen melodinya.
<br/>Bila suatu komposisi nada di suatu lirik adalah nada-nada bass yang dimainkan oleh klep bass piano, maka nada-nada klep trebelnya harus “lagging” (terbelakang) 1/8 nada dari nada bassnya di progres 1, bila di progres 2 maka nada-nada trebel yang lagging ini harus di turunkan 1 laras lagi, bila di progres 3 maka nada-nada trebel yang lagging ini harus di turunkan 2 laras lagi, (lakukan copy-paste, lalu perhatikan progres nadanya yang keberapa).
<br/>Bila suatu komposisi nada di suatu lirik adalah nada-nada trebel yang dimainkan oleh klep trebel piano, maka nada-nada klep bassnya harus “leading” (terdepan) 1/8 nada dari nada trebelnya dan harus diturunkan 2 laras di progres 1, bila di progres 2 maka nada-nada bass yang leading dan turun 2 laras ini harus di turunkan lagi 1 laras, bila di progres 3 maka nada-nada bass yang leading dan turun 2 laras ini harus di turunkan lagi 2 laras.
<br/> Bila suatu komposisi nada di suatu lirik adalah nada-nada trebel yang dimainkan oleh klep trebel piano, maka nada-nada klep bassnya harus “leading” (terdepan) 1/8 nada dari nada trebelnya dan harus diturunkan 2 laras di progres 1, bila di progres 2 maka nada-nada bass yang leading dan turun 2 laras ini harus di turunkan lagi 1 laras, bila di progres 3 maka nada-nada bass yang leading dan turun 2 laras ini harus di turunkan lagi 2 laras.
<br/>Biasanya jenis alat instrumen melodi ini menggunakan instrumen keyboard. Jenis alat instrumen lainnya selain piano, ada juga Harpsichord, Organ, Pipe keyboard. Jenis alat instrumen lainnya selain piano, ada juga Harpsichord, Organ, Pipe organ, dan lain-lain.
<br/>
Bersambung ... Instrumen musik berikutnya nantikan di diskusi kita berikutnya, dan sempatkan diri Anda untuk membeli lagu-lagunya PMD Sawi-AK, seperti lagu yang berjudul “AKU ANGGOTA KELUARGA ALLAH” di http:///www.sheetmusicplus.com. Di kotak search ketikkan judul lagu AKU ANGGOTA KELUARGA ALLAH, lalu enter, selanjutnya lakukan transaksi pembelian. Layanan kami memuaskan Anda mendapatkan ilmunya, juga mendapatkan lagunya PMD Music Creation membuat ruangan Anda asri, nyaman berirama PMD (Pedang Mata Dua). PMD Music Creation untuk ruangan Anda, bukan untuk telinga Anda, tapi telinga Anda untuk mendengarkan Tuhan yang berfiirman.
<a href="dokumen/KELOMPOK INSTRUMEN MUSIK (bagian 1).htm">Baca Lebih Lanjut
<br/><br/></p>
</div><!--akhir class single-post-->
</div>
</div><!--akhir class buaya-->
<div class="footer">
<p>@Copyright 2020 | PMD Sesawi- AK | <a href="https://PMD Sesawi-AK.com" target="_blank">SR.Pakpahan,SST</a></p>
</div><!--akhir class footer-->
</body>
</html>
Code CSS (style1.css):
* {margin: 0; padding: 0;}
body {
width: 900px;
margin: auto;
}
header {
width: 900px;
height: 240px;
}
header img {
width: 900px;
height: 240px;
}
/* menu */
menu {
width: 880px;
height: 20px;
background-color: blue;
padding: 10px;
margin-top: 3px;
}
menu li {
list-style: none;
float: left;
margin-right: 20px;
margin-top: 0px;
color: #fff;
}
menu li a {
text-decoration: none;
color: #fff;
}
menu li a:hover {
color: orange;
}
/* akhir menu */
/* nav menu */
nav {
position: relative;
top: 0px;
height: 20px;
line-height: 30px;
background-color: blue;
width: 880px;
margin: auto;
}
nav ul {
list-style: none;
}
nav ul li a {
text-decoration: none;
color: #fff;
float: left;
width: 100px;
display: block;
text-align: center;
}
nav ul li a:hover {
background: blue;
display: block;
}
nav ul li:hover ul {
display: block;
}
nav ul ul {
display: none;
position: absolute;
background: #ff0000;
top: 15px;
margin: 11px;
float: left;
}
/* akhir nav menu */
/* class recomended */
.recomended {
width: 100%;
overflow: hidden;
background-color: #a9a9a9;
margin-top: 3px;
height: 610px;
max-height: 620px;
}
.recomended h1 {
text-align: center;
}
.recomended .recomendedKiri {
height: 270px;
max-height: 280px;
width: 433px;
float: left;
margin: 0px 10px 5px 10px;
}
.recomended img {
width: 150px;
height: 100px;
float: left;
margin: 5px 5px 5px 5px;
box-shadow: 2px 2px 2px #333;
}
.recomended p {
text-align: justify;
}
.recomended .recomendedKanan {
height: 270px;
max-height: 280px;
width: 433px;
margin: 0px 0px 5px 5px;
float: left;
}
.recomended a {
text-decoration: none;
color: #140fcd;
}
.recomended a:hover {
color: #000;
}
.recomended h3 {
color: #140fcd;
}
.recomended .recomendedKiriBawah {
border-top: 5px solid #333;
height: 270px;
max-height: 280px;
width: 433px;
float: left;
margin: 5px 10px 5px 10px;
}
.recomended img {
width: 150px;
height: 100px;
float: left;
margin: 5px 5px 5px 5px;
box-shadow: 2px 2px 2px #333;
}
.recomended p {
text-align: justify;
}
.recomended h3 {
margin-top: 5px;
color: #140fcd;
}
.recomended .recomendedKananBawah {
border-top: 5px solid #333;
height: 270px;
max-height: 280px;
width: 433px;
margin: 5px 0px 5px 5px;
float: left;
}
.recomended a {
text-decoration: none;
color: #140fcd;
}
.recomended a:hover {
color: #000;
}
.recomended h3 {
margin-top: 5px;
color: #140fcd;
}
/* akhir class recomended */
/* class buaya */
.buaya {
width: 100%;
overflow: hidden;
background-color: #333;
margin-top: 3px;
}
/* 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;
height: 450px;
}
.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 Komentar */
.buaya .widget .komentar {
width: 100%;
margin: 0 0 5px;
border-top: 5px solid #333;
padding-top: 20px;
}
.buaya .widget .komentar form {
width: 100%;
padding: 0 5px 0;
}
.buaya .widget .komentar h3 {
text-align: center;
margin: 10px 0 10px;
}
.buaya .widget .komentar input[type="text"] {
width: 95%;
height: 20px;
margin-bottom: 5px;
}
.buaya .widget .komentar input[type="email"] {
width: 95%;
height: 20px;
margin-bottom: 5px;
}
.buaya .widget .komentar textarea {
width: 95%;
max-width: 95%;
height: 200px;
max-height: 250px;
margin-bottom: 5px;
}
.buaya .widget .komentar input[type="submit"] {
padding: 5px;
cursor: pointer;
margin-bottom: 5px;
margin-left: 50px;
}
/* akhir class komentar */
.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: blue;
}
/* share */
.buaya .single-post .share {
border-top: 5px solid #333;
margin: 0 5px;
}
.buaya .single-post .share h3 {
margin: 10px 0 10px;
}
.buaya .single-post .share img {
width: 30px;
height: 30px;
}
.buaya .single-post .share img:hover {
opacity: 0.5;
}
/* akhir share */
/* class Footer Kiri */
.buaya .widget .footerKiri {
margin: 0 px;
border-top: 4px solid #333;
height: 50px;
background-color: grey;
margin-top: 8px;
}
.buaya .widget .footerKiri h3 {
text-align: center;
margin: 10px 0 10px;
color: grey
}
/* akhir class Footer Kiri */
/* class Footer Kanan */
.footer {
width: 100%;
height: 50px;
background-color: grey;
margin-top: 3px;
position: relative;
margin-left: 245px;
width: 660px;
}
.footer p {
color: #fff;
position: absolute;
bottom: 12.5px;
left: 150px;
}
.footer p a {
text-decoration: none;
color: #fff;
}
.footer p a:hover {
color: #f90;
}
/* akhir class Footer Kanan */
BONUS HADIAH NATAL
UNTUK KALIAN SEMUA
Membuat Audio daftar
lagu MP3 di website HTML-CSS
Kali ini saya akan menyisipkan media Audio di website yang
kita rancang dengan menggunakan HTML-CSS, dan ini saya beri sebagai hadiah
Natal 25-12-2019 kepads Kalian semua.
Mari kita buka file kita di code editor (Sublime Text), yaitu
file membuatwebsite1.html, single pos.html, single pos1.html, dan file
style1.css.
Kemudian buatlah sebuah file HTML yang baru, beri namanya
membuatwebsite2.html. Kemudian dari file sebelumnya membuatwebsite1.html ,
copas semua code HTML-nya (tekan Ctrl + A
lalu tekan Ctrl + C) pastekan ke lembar kerja file membuatwebsite2.html . Setelah
itu lalu tuliskan atau copas code HTML class musik berikut ini, letakkan di sesudah <div class="widget"> atau di sebelum <div class="artikelTerlaris"> pada halaman beranda/home page di file membuatwebsite2.html,
yaitu berikut ini:
<div class="musik">
<h3>PMD MUSIC CREATION</h3>
<audio controls><source src="Daftar lagu/LAGU NATAL NON STOP 4 JAM.mp3" type="audio/mp3"> </audio>
<p><a href="single pos 2.html"><strong>Daftar Lagu: </strong></a></p><br/>
</div><!--akhir class musik-->
<div class="iframe">
<iframe width="100%" height="265" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/729319318&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
</div><!-- akhir class iframe-->
<h3>PMD MUSIC CREATION</h3>
<audio controls><source src="Daftar lagu/LAGU NATAL NON STOP 4 JAM.mp3" type="audio/mp3"> </audio>
<p><a href="single pos 2.html"><strong>Daftar Lagu: </strong></a></p><br/>
</div><!--akhir class musik-->
<div class="iframe">
<iframe width="100%" height="265" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/729319318&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
</div><!-- akhir class iframe-->
Setelah itu hapus code link href-nya seperti berikut <link href="css/style1.css" type="text/css" rel="stylesheet"> gantikan dengan kode yang baru seperti menjadi yang berikut ini: <link href="css/style2.css" type="text/css" rel="stylesheet">
Lalu pada CSS, kita beri gaya/style pada class musik tersebut, copas semua code CSS dibawah ini, dan pastekan di sesudah /* akhir class widget */ atau di sebelum /* class Artikel Terlaris */ yang di lembar kerja file style2.css , yaitu berikut ini:
/* class musik */
.buaya .widget .musik {
background-color: green;
width: 243px;
height: 99px;
margin-left: 1px;
}
.buaya .widget .musik h3 {
text-align: center;
color: #fff;
}
.buaya .widget .musik audio {
width: 240px;
height: 29px;
float: left;
margin-top: 5px;
margin-left: 3.5px;
}
.buaya .widget .musik p {
padding-top: 9px;
}
.buaya .widget .musik a {
margin: 28px;
text-decoration: none;
color: blue;
}
/* akhir class musik */
/* class iframe */
.buaya .widget .iframe {
background-color: green;
width: 243px;
height: 265px;
margin-top: 3px;
margin-left: 1px;
}
/* akhir class iframe */
Lalu pada CSS, kita beri gaya/style pada class musik tersebut, copas semua code CSS dibawah ini, dan pastekan di sesudah /* akhir class widget */ atau di sebelum /* class Artikel Terlaris */ yang di lembar kerja file style2.css , yaitu berikut ini:
/* class musik */
.buaya .widget .musik {
background-color: green;
width: 243px;
height: 99px;
margin-left: 1px;
}
.buaya .widget .musik h3 {
text-align: center;
color: #fff;
}
.buaya .widget .musik audio {
width: 240px;
height: 29px;
float: left;
margin-top: 5px;
margin-left: 3.5px;
}
.buaya .widget .musik p {
padding-top: 9px;
}
.buaya .widget .musik a {
margin: 28px;
text-decoration: none;
color: blue;
}
/* akhir class musik */
/* class iframe */
.buaya .widget .iframe {
background-color: green;
width: 243px;
height: 265px;
margin-top: 3px;
margin-left: 1px;
}
/* akhir class iframe */
Kemudian buat halanan single pos yang baru di dalam sebuah file yang baru dan beri nama file tersebut yaitu single pos 2.html. Lalu copas semua code HTML dibawah ini, dan pastekan ke lembar kerja file single pos 2.html tersebut, yaitu ini:
<!doctype html>
<html>
<head>
<title>DAFTAR LAGU PMD Sesawi-AK</title>
<link rel="shortcut icon" type="image/png" href="images/favicon.ico"/>
<link href="css/stylepos2.css" type="text/css" rel="stylesheet">
<link href="">
</head>
<body>
<header>
<img src="images/logo pmd musik.jpg">
<menu>
<li><a href="membuatwebsite2.html">Home</a></li>
<li><a href="">Lagu PMD Sesawi-AK</a></li>
<li><a href="">Lagu Indonesia</a></li>
<li><a href="">Lagu Barat</a></li>
<li><a href="">Etnis Musik</a></li>
<li><a href="">Dokumen</a></li>
</menu>
</header>
<br></br>
<!--class Daftar Lagu-->
<div class="recomended">
<div class="daftarLagu">
<h2>DAFTAR LAGU PMD Sesawi-AK (MP3):</h2>
<li><h4>1. Jesus Take The Wheel </h4><audio controls><source src="Daftar lagu/Jesus_Take_The_Wheel2 (iring).mp3" type="audio/mp3"> </audio>
<li><h4>2. ORIFLAMER </h4><audio controls><source src="Daftar lagu/ORIFLAMER.mp3" type="audio/mp3"> </audio>
<li><h4>3. AKU ANGGOTAKELUARGAALLAH</h4><audio controls><source src="Daftar lagu/
AKU_ANGGOTA_KELUARGA_ALLAH 2.mp3" type="audio/mp3"> </audio>
<li><h4>4. Aku Anggota Keluarga Allah (vokal)</h4><audio controls><source src="Daftar lagu/
Aku anggota Keluarga Allah (vokal).mp3" type="audio/mp3"> </audio>
<li><h4>
5. BERKENDARA YAMAHA LEXI</h4><audio controls><source src="Daftar lagu/
BERKENDARA_YAMAHA_LEXI 3.5.1.mp3" type="audio/mp3"> </audio>
<!--akhir class Daftar Lagu-->
<br></br><br/>
<h2>SOUNDCLOUD:</h2>
<iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/729319318&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
<iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/512217066&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
</body>
</html>
<html>
<head>
<title>DAFTAR LAGU PMD Sesawi-AK</title>
<link rel="shortcut icon" type="image/png" href="images/favicon.ico"/>
<link href="css/stylepos2.css" type="text/css" rel="stylesheet">
<link href="">
</head>
<body>
<header>
<img src="images/logo pmd musik.jpg">
<menu>
<li><a href="membuatwebsite2.html">Home</a></li>
<li><a href="">Lagu PMD Sesawi-AK</a></li>
<li><a href="">Lagu Indonesia</a></li>
<li><a href="">Lagu Barat</a></li>
<li><a href="">Etnis Musik</a></li>
<li><a href="">Dokumen</a></li>
</menu>
</header>
<br></br>
<!--class Daftar Lagu-->
<div class="recomended">
<div class="daftarLagu">
<h2>DAFTAR LAGU PMD Sesawi-AK (MP3):</h2>
<li><h4>1. Jesus Take The Wheel </h4><audio controls><source src="Daftar lagu/Jesus_Take_The_Wheel2 (iring).mp3" type="audio/mp3"> </audio>
<li><h4>2. ORIFLAMER </h4><audio controls><source src="Daftar lagu/ORIFLAMER.mp3" type="audio/mp3"> </audio>
<li><h4>3. AKU ANGGOTAKELUARGAALLAH</h4><audio controls><source src="Daftar lagu/
AKU_ANGGOTA_KELUARGA_ALLAH 2.mp3" type="audio/mp3"> </audio>
<li><h4>4. Aku Anggota Keluarga Allah (vokal)</h4><audio controls><source src="Daftar lagu/
Aku anggota Keluarga Allah (vokal).mp3" type="audio/mp3"> </audio>
<li><h4>
5. BERKENDARA YAMAHA LEXI</h4><audio controls><source src="Daftar lagu/
BERKENDARA_YAMAHA_LEXI 3.5.1.mp3" type="audio/mp3"> </audio>
<!--akhir class Daftar Lagu-->
<br></br><br/>
<h2>SOUNDCLOUD:</h2>
<iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/729319318&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
<iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/512217066&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
</body>
</html>
Lalu pada CSS, kita beri gaya/style pada class musik di single pos 2 tersebut, buatlah sebuah file baru lagi dan beri namanya stylepos2.css, dan simpan file ini di folder css. Lalu copas semua code CSS dibawah ini, dan pastekan ke lembar kerja file stylepos2.css tersebut, yaitu 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: 25px;
background-color: green;
padding: 10px;
margin-top: 1px;
}
menu li {
list-style: none;
float: left;
margin-right: 20px;
margin-top: 3px;
color: #fff;
}
menu li a {
text-decoration: none;
color: #fff;
}
menu li a:hover {
color: orange;
}
/* class Daftar Lagu */
.recomended .daftarLagu {
background-color: blue;
width: 900px;
margin-top: 17px;
}
.recomended .daftarLagu h2 {
text-align: left;
height:28px;
color: green;
}
.recomended .daftarLagu h4 {
text-align: left;
margin-top: 3px;
}
.recomended .daftarLagu audio {
width: 434px;
height: 28px;
margin: 10px;
float: center;
}
/* akhir class Daftar Lagu */
body {
width: 900px;
margin: auto;
}
header {
width: 900px;
height: 250px;
}
header img {
width: 900px;
height: 250px;
}
menu {
width: 880px;
height: 25px;
background-color: green;
padding: 10px;
margin-top: 1px;
}
menu li {
list-style: none;
float: left;
margin-right: 20px;
margin-top: 3px;
color: #fff;
}
menu li a {
text-decoration: none;
color: #fff;
}
menu li a:hover {
color: orange;
}
/* class Daftar Lagu */
.recomended .daftarLagu {
background-color: blue;
width: 900px;
margin-top: 17px;
}
.recomended .daftarLagu h2 {
text-align: left;
height:28px;
color: green;
}
.recomended .daftarLagu h4 {
text-align: left;
margin-top: 3px;
}
.recomended .daftarLagu audio {
width: 434px;
height: 28px;
margin: 10px;
float: center;
}
/* akhir class Daftar Lagu */
Selesai deh, lihat hasilnya di browser (lihat gambar):
Dan bila di klik teks Daftar lagu, maka akan muncul gambar halaman single post yang seperti ini:
kalian
bisa menambahkan lagu lagu natal kesukaan kalian di sini (lakukan
penambahan lagu di lembar kerja file single pos 2.html. dan syaratnya
harus saat terhubung/konek ke internet. File mp3 yang di copas harus
dimasukkan ke folder yang sama, sejajar dengan folder/file-file
sebelumnya yaitu harus di dalam folder Tutorial Today.
SELAMAT MENCOBA, SEMOGA BERHASIL, DAN SELAMAT HARI NATAL 25-12-2019 DAN TAHUN BARU 1-1-2020, SEMOGA TUHAN MEMBERKATI KITA SEMUA.
Komentar
Posting Komentar
This Message