Website HTML CSS Sederhana Part 5 / 11
Membuat Ikon Media Sosial di Sidebar Widget
Setelah mempelajar Part 1, Part 2, Part 3 dan Part 4, sekarang kita lanjutkan ke Part 5. Pada Part 5 ini kita akan membuat daftar media sosial di widget / sidebar yang sudah dibuat pada part 3. Biasanya pada blog / situs web selalu mempromosikan media sosialnya seperti Facebook Twitter atau Google+.
Pada media sosial ini akan kita buat berupa icon / gambar media sosial yang diisi link / url yang mengarah ke profil media sosial. Selain itu, media sosial ini akan dibuat responsive / menyesuaikan ukurannya dengan ukuran widget yang ada.
Silahkan siapkan icon media sosialnya terlebih dahulu, disini saya contohkan berupa gambar transparan yang sudah saya buat sebelumnya menggunakan Adobe Photoshop. Gambar ini memiliki ukuran 70px x 70px, silahkan tentukan ukuran yang menurut kalian bagus untuk ditempelkan pada sidebar.
Kalo belum ada gambarnya atau males bikinnya, silahkan download disini gambar media sosial yang saya gunakan (37.98KB). Pada part 3 kan sudah bikin widget class mediaSosial ya ? Nah sekarang tinggal tambahkan kode ini didalam class mediaSosial:
Baca Juga:
<h3>Let's Connect !</h3>
<a href="https://plus.google.com/+riobermano"><img src="images/googleplus.png" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/bermanorio" target="_blank"><img src="images/facebook.png" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/bermanorio"><img src="images/twitter.png"></a>
<a href="http://www.instagram.com/riobermano"><img src="images/instagram.png"></a>
<a href=""><img src="images/linkedin.png"></a>
<a href="https://www.youtube.com/c/riobermano"><img src="images/youtube.png"></a>
<a href="https://www.pinterest.com/riobermano"><img src="images/pinterest.png"></a>
Tag h3 diatas adalah judul untuk widget Media Sosial ini, silahkan ubah judulnya kalo perlu. Pada tag img disini dibungkus dengan tag a href agar gambar tersebut berisi link dan dapat di klik oleh pengunjung.
source gambar / src=”” itu adalah nama gambar yang digunakan, silahkan panggil gambar sesuai nama dan ekstensi gambarnya. title=”” adalah judul untuk gambar tersebut, silahkan hapus jika dirasa tidak perlu.
Pada link a href silahkan masukkan link media sosial yang kalian miliki sesuai dengan gambarnya ya jangan sampe ketuker 😀 ntar gak nyambung jadinya.
Sekarang, terapkan kode berikut di file style.css nya:
/* 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 */
Silahkan atur gaya ketika disentuh mouse / hover, ukuran gambar, jarak antara gambar, border atas sebagai pemisah antara widget class mediaSosial dan widget diatasnya sesuai selera kalian sendiri.
Karena ikon media sosial seperti ini biasanya berukuran kecil ketika disimpan disidebar, jadi jangan terlalu besar supaya enak dilihat. Silahkan Save dan lihat hasilnya di browser. (lihat gambar)
Sampai sini sudah bisa dikatakan website / blog walaupun baru halaman depan saja.
Masih bingung ? Lihat : Video Tutorial Cara Membuat Web Sendiri Dengan HTML Part 5. Kalo sudah yakin paham, yuk lanjut ke part 6.
Dari part 1 sampai part 5 ini, kode HTML CSS akan jadi seperti ini:
HTML
<!doctype html>
<html>
<head>
<title>Membuat Website - HTML Rio Bermano</title>
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<img src="images/satu.jpg">
</header>
<menu>
<li><a href="">Home</a></li>
<li><a href="">Download</a></li>
<li><a href="">Tutorial</a></li>
<li><a href="">Software</a></li>
<li><a href="">Design</a></li>
<li><a href="">Support</a></li>
<li><a href="contoh-halaman.html">Kontak</a></li>
</menu>
<div class="recomended">
<h1>Artikel Disarankan</h1>
<div class="recomendedKiri">
<img src="images/dua.jpg">
<h3><a href="single-post.html">Tutorial Bagi Pemula</a></h3>
<p>ey College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and the cites of the word. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes. <a href="single-post.html"><strong>Baca Selengkapnya</strong></a></p>
</div><!--akhir class recomendedKiri-->
<div class="recomendedKanan">
<img src="images/tiga.jpg">
<h3><a href="">Hi, There</a></h3>
<p>ey College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and the cites of the word. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes. <a href=""><strong>Baca Selengkapnya</strong></a></p>
</div><!--akhir class recomendedKanan-->
</div><!--akhir class recomended-->
<div class="buaya">
<div class="widget">
<div class="artikelTerlaris">
<h3>Artikel Terlaris</h3>
<img src="images/empat.jpg">
<a href=""><h4>Terlaris Satu</h4></a>
<p>ey College in Virginia, looked up one of the more obscure Latin words</p><br/>
<img src="images/empat.jpg">
<a href=""><h4>Terlaris Dua</h4></a>
<p>ey College in Virginia, looked up one of the more obscure Latin words</p><br/>
<img src="images/empat.jpg">
<a href=""><h4>Terlaris Tiga</h4></a>
<p>ey College in Virginia, looked up one of the more obscure Latin words</p>
</div><!--akhir class artikelTerlaris-->
<div class="mediaSosial">
<h3>Let's Connect !</h3>
<a href=""><img src="images/googleplus.png" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/bermanorio" target="_blank"><img src="images/facebook.png" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/bermanorio"><img src="images/twitter.png"></a>
<a href="http://www.instagram.com/riobermano"><img src="images/instagram.png"></a>
<a href=""><img src="images/linkedin.png"></a>
<a href=""><img src="images/youtube.png"></a>
<a href=""><img src="images/pinterest.png"></a>
</div>
<div class="subscribe"></div>
</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-->
</body>
</html>
CSS
* {margin: 0; padding: 0;}
body {
width: 900px;
margin: auto;
}
header {
width: 900px;
height: 250px;
}
header img {
width: 900px;
height: 250px;
}
menu {
width: 880px;
height: 30px;
background-color: blue;
padding: 10px;
margin-top: 5px;
}
menu li {
list-style: none;
float: left;
margin-right: 20px;
margin-top: 5px;
color: #fff;
}
menu li a {
text-decoration: none;
color: #fff;
}
menu li a:hover {
color: orange;
}
/* class recomended */
.recomended {
width: 100%;
overflow: hidden;
background-color: #a9a9a9;
margin-top: 5px;
}
.recomended h1 {
text-align: center;
}
.recomended .recomendedKiri {
width: 435px;
float: left;
margin: 10px 5px 5px 10px;
}
.recomended img {
width: 150px;
height: 100px;
float: left;
margin: 0 5px 5px 0;
box-shadow: 2px 2px 2px #333;
}
.recomended p {
text-align: justify;
}
.recomended .recomendedKanan {
width: 435px;
margin: 10px 10px 5px 5px;
float: left;
}
.recomended a {
text-decoration: none;
color: #140fcd;
}
.recomended a:hover {
color: #000;
}
.recomended h3 {
color: #140fcd;
}
/* akhir class recomended */
/* class buaya */
.buaya {
width: 100%;
overflow: hidden;
background-color: #333;
margin-top: 5px;
}
/* class widget */
.buaya .widget {
width: 245px;
float: left;
background-color: #f90;
}
.buaya .widget .artikelTerlaris {
margin: 0 5px;
}
.buaya .widget .artikelTerlaris img {
width: 100px;
height: 50px;
float: left;
margin-right: 2.5px;
}
.buaya .widget .artikelTerlaris h3 {
text-align: center;
margin: 10px 0 10px;
}
.buaya .widget .artikelTerlaris a {
text-decoration: none;
color: #000;
}
/* akhir class widget */
/* class artikelTerbaru */
.buaya .artikelTerbaru {
width: 650px;
background-color: #f90;
float: left;
margin-left: 5px;
}
.buaya .artikelTerbaru img {
width: 550px;
margin: 5px 50px 0;
}
.buaya .artikelTerbaru h2 {
margin-left: 5px;
}
.buaya .artikelTerbaru p {
margin: 0 5px;
text-align: justify;
}
.buaya .artikelTerbaru a {
text-decoration: none;
color: #000;
}
/* 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 */
Kesimpulan
Ikon / gambar media sosial yang digunakan pada tutorial ini tidak terlihat begitu menarik, silahkan buat sendiri atau download ikon / gambar yang menarik supaya situs kalian terlihat lebih menarik dan usahakan warna nya kustom disesuaikan dengan warna situs.
Sampai part 5 ini saya anggap sudah pada paham, tapi jangan tinggalkan tutorial-tutorial berikutnya juga sampai selesai karena ada beberapa pengetahuan baru yang mungkin akan bermanfaat.
Selamat mencoba !