Di artikel saya sebelumnya, pernah saya buat tutorial membuat halaman Sahabat yang unik dengan Jquery. Di tutorial kali ini, saya tidak menggunakan Jquery karena cukup menggunakan CSS dan HTML saja.
Apabila teman-teman mau lihat dulu tutorial saya sebelumnya, bisa langsung mengunjungi link dibawah ini yah
Baca juga: Membuat Halaman Blogroll Statis yang Unik
Buat teman-teman yang sudah pernah baca tutorialnya diatas silahkan abaikan dan mari kita lanjutkan tutorial Membuat Halaman Sahabat ala Kang Wira.
Ohya, buat teman-teman yang mau lihat terlebih dulu penampakannya, bisa langsung klik tombol DEMO di bawah ini yaa.
Cara Membuat Halaman Sahabat ala Kang Wira
Karena disini saya hanya menggunakan HTML dan CSS saja, jadi teman-teman tidak perlu edit pada template yang kamu gunakan saat ini yah.
Naah Setelah itu salin semua kode yang sudah saya sisipkan pada syntax dibawah ini dan letakkan langsung pada halaman yang baru saja kamu buat tadi.
Eh.. tunggu dulu..
Disini saya menyiapkan 2 Kode HTML yang bisa kamu gunakan sesuai dengan lebar template kamu.
Maksudnya kalau template yang kamu gunakan mendukung Full Width Page alias Halaman tanpa Sidebar seperti pada halaman Sahabat Kang Wira, teman-teman bisa coba Syntax yang pertama. Gunanya supaya Widgetnya terbagi menjadi 2 kolom.
Sedangkan untuk teman-teman yang template nya belum mendukung Full Width Page alias Halamannya masih menampilkan Sidebar, silahkan teman-teman menggunakan Kode pada Syntax yang kedua.
Paham kan maksud saya?
Kalau masih belum paham, bisa langsung tanyakan pada kolom komentar yah. Berikut ini langsung saja saya sisipkan Kode khusus Full Width Page
<div class="kolbod">
<div class="kolsah">
<!--kolom1 start-->
<div class="sahabat">
<img src="https://image.prntscr.com/image/IGa3Afv3Q0uI6Jpbc76d-A.jpg" alt="BLANK" class="proff"><p1><a title="SAHABAT KANG WIRA" href="https://www.kangwira.com/p/kontak.html" rel="nofollow" target="_blank">BLOG KAMU</a></p1><hr/><p2>Deskripsi Blog kamu akan tampil disini</p2>
</div>
<!--tambahkan kode disini-->
TAMBAHKAN KODE DISINI
<!--tambahkan kode disini-->
<!--kolom1 end-->
</div>
<div class="kolsah">
<!--kolom2 start-->
<div class="sahabat">
<img src="https://image.prntscr.com/image/IGa3Afv3Q0uI6Jpbc76d-A.jpg" alt="BLANK" class="proff"><p1><a title="SAHABAT KANG WIRA" href="https://www.kangwira.com/p/kontak.html" rel="nofollow" target="_blank">BLOG KAMU</a></p1><hr/><p2>Deskripsi Blog kamu akan tampil disini</p2>
</div>
<!--tambahkan kode disini-->
TAMBAHKAN KODE DISINI
<!--tambahkan kode disini-->
<!--kolom2 end-->
</div>
</div>
<!--CSS LINK PARTNER-->
<style type="text/css">
.kolbod {float:left; width:100%;}
.kolsah{float:left;width:50%;padding:10px;margin-bottom:20px;}
@media (max-width:728px){.kolsah{width:100%;padding:0;margin-bottom:20px;}}
.sahabat{max-height:120px;min-height:120px;background:#fff;padding:4px 20px 4px 4px;margin-left:35px;margin-bottom:10px;border-radius:50px 0 30px 50px;box-shadow:0 0 8px #888}
.sahabat img{margin-left:-35px;margin-top:6px;border: 5px solid #e74c3c;}
.sahabat hr{border-color: #e74c3c;display: block;margin-top: 0.5em;margin-bottom: 0.5em;margin-left: 79px;margin-right: auto;border-style: solid;border-width: 1px;}
.sahabat p1{display: block;white-space: nowrap;font-size: 130%;font-weight: 800;text-transform: uppercase;overflow: hidden;text-overflow: ellipsis;margin-left: 90px;margin-top: 10px;line-height: 25px;}
.sahabat p1 a{text-decoration:none}
.sahabat p1 a:link{color:#e74c3c}
.sahabat p1 a:visited{color:#e74c3c}
.sahabat p1 a:hover{color:#a81b0d}
.sahabat p2{display:block;max-height:53px;overflow:hidden;font-size:85%;margin-left:90px;word-spacing:3px;letter-spacing:1px;line-height:1.4}
.proff{float:left;position:static;width:100px;height:100px;border: 5px solid #e74c3c;border-radius:30px;box-shadow:0 0 10px #777;}
.sahabat img:hover{-webkit-animation:shake 0.4s;animation:shake 0.4s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}
@-webkit-keyframes shake{0%{-webkit-transform:translate(1px,1px) rotate(0deg);transform:translate(1px,1px) rotate(0deg)}10%{-webkit-transform:translate(-1px,-2px) rotate(-1deg);transform:translate(-1px,-2px) rotate(-1deg)}20%{-webkit-transform:translate(-3px,0px) rotate(1deg);transform:translate(-3px,0px) rotate(1deg)}30%{-webkit-transform:translate(3px,2px) rotate(0deg);transform:translate(3px,2px) rotate(0deg)}40%{-webkit-transform:translate(1px,-1px) rotate(1deg);transform:translate(1px,-1px) rotate(1deg)}50%{-webkit-transform:translate(-1px,2px) rotate(-1deg);transform:translate(-1px,2px) rotate(-1deg)}60%{-webkit-transform:translate(-3px,1px) rotate(0deg);transform:translate(-3px,1px) rotate(0deg)}70%{-webkit-transform:translate(3px,1px) rotate(-1deg);transform:translate(3px,1px) rotate(-1deg)}80%{-webkit-transform:translate(-1px,-1px) rotate(1deg);transform:translate(-1px,-1px) rotate(1deg)}90%{-webkit-transform:translate(1px,2px) rotate(0deg);transform:translate(1px,2px) rotate(0deg)}100%{-webkit-transform:translate(1px,-2px) rotate(-1deg);transform:translate(1px,-2px) rotate(-1deg)}}
@keyframes shake{0%{-webkit-transform:translate(1px,1px) rotate(0deg);transform:translate(1px,1px) rotate(0deg)}10%{-webkit-transform:translate(-1px,-2px) rotate(-1deg);transform:translate(-1px,-2px) rotate(-1deg)}20%{-webkit-transform:translate(-3px,0px) rotate(1deg);transform:translate(-3px,0px) rotate(1deg)}30%{-webkit-transform:translate(3px,2px) rotate(0deg);transform:translate(3px,2px) rotate(0deg)}40%{-webkit-transform:translate(1px,-1px) rotate(1deg);transform:translate(1px,-1px) rotate(1deg)}50%{-webkit-transform:translate(-1px,2px) rotate(-1deg);transform:translate(-1px,2px) rotate(-1deg)}60%{-webkit-transform:translate(-3px,1px) rotate(0deg);transform:translate(-3px,1px) rotate(0deg)}70%{-webkit-transform:translate(3px,1px) rotate(-1deg);transform:translate(3px,1px) rotate(-1deg)}80%{-webkit-transform:translate(-1px,-1px) rotate(1deg);transform:translate(-1px,-1px) rotate(1deg)}90%{-webkit-transform:translate(1px,2px) rotate(0deg);transform:translate(1px,2px) rotate(0deg)}100%{-webkit-transform:translate(1px,-2px) rotate(-1deg);transform:translate(1px,-2px) rotate(-1deg)}}
</style>Pada kode diatas, saya buat khusus untuk 2 kolom. Jadi untuk menambahkan widget nya, teman-teman bisa menggunakan kode dibawah ini dan letakkan pada tulisan tambahkan kode disini.
<div class="sahabat">
<img src="https://image.prntscr.com/image/IGa3Afv3Q0uI6Jpbc76d-A.jpg" alt="BLANK" class="proff"><p1><a title="SAHABAT KANG WIRA" href="https://www.kangwira.com/p/kontak.html" rel="nofollow" target="_blank">BLOG KAMU</a></p1><hr/><p2>Deskripsi Blog kamu akan tampil disini</p2>
</div>Jika sudah, langsung saja simpan halaman danklik tombol pratinjau untuk melihat hasil sementara. Apabila sudah cocok, langsung publikasikan halaman Sahabat yang baru kamu buat tadi. Maka hasilnya bisa kamu lihat pada gambar dibawah ini.
Sudah Paham ya ?
Naah berikut ini adalah Kode Khusus untuk Halaman yang masih menampilkan Sidebar pada halaman statis blognya. Jadi teman-teman yang belum paham edit HTML, bisa langsung menerapkan kode dibawah ini nih kedalam halaman Sahabat yang kamu buat.
<div class="kolbod">
<div class="sahabat">
<img src="https://image.prntscr.com/image/IGa3Afv3Q0uI6Jpbc76d-A.jpg" alt="BLANK" class="proff"><p1><a title="SAHABAT KANG WIRA" href="https://www.kangwira.com/p/kontak.html" rel="nofollow" target="_blank">BLOG KAMU</a></p1><hr/><p2>Deskripsi Blog kamu akan tampil disini</p2>
</div>
<!--tambahkan kode disini-->
TAMBAHKAN KODE DISINI
<!--tambahkan kode disini-->
<!--tambahkan kode disini-->
TAMBAHKAN KODE DISINI
<!--tambahkan kode disini-->
</div>
<!--CSS LINK PARTNER-->
<style type="text/css">
.kolbod {float:left; width:100%;}
.sahabat{max-height:120px;min-height:120px;background:#fff;padding:4px 20px 4px 4px;margin-left:35px;margin-bottom:10px;border-radius:50px 0 30px 50px;box-shadow:0 0 8px #888}
.sahabat img{margin-left:-35px;margin-top:6px;border: 5px solid #e74c3c;}
.sahabat hr{border-color: #e74c3c;display: block;margin-top: 0.5em;margin-bottom: 0.5em;margin-left: 79px;margin-right: auto;border-style: solid;border-width: 1px;}
.sahabat p1{display: block;white-space: nowrap;font-size: 130%;font-weight: 800;text-transform: uppercase;overflow: hidden;text-overflow: ellipsis;margin-left: 90px;margin-top: 10px;line-height: 25px;}
.sahabat p1 a{text-decoration:none}
.sahabat p1 a:link{color:#e74c3c}
.sahabat p1 a:visited{color:#e74c3c}
.sahabat p1 a:hover{color:#a81b0d}
.sahabat p2{display:block;max-height:53px;overflow:hidden;font-size:85%;margin-left:90px;word-spacing:3px;letter-spacing:1px;line-height:1.4}
.proff{float:left;position:static;width:100px;height:100px;border: 5px solid #e74c3c;border-radius:30px;box-shadow:0 0 10px #777;}
.sahabat img:hover{-webkit-animation:shake 0.4s;animation:shake 0.4s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}
@-webkit-keyframes shake{0%{-webkit-transform:translate(1px,1px) rotate(0deg);transform:translate(1px,1px) rotate(0deg)}10%{-webkit-transform:translate(-1px,-2px) rotate(-1deg);transform:translate(-1px,-2px) rotate(-1deg)}20%{-webkit-transform:translate(-3px,0px) rotate(1deg);transform:translate(-3px,0px) rotate(1deg)}30%{-webkit-transform:translate(3px,2px) rotate(0deg);transform:translate(3px,2px) rotate(0deg)}40%{-webkit-transform:translate(1px,-1px) rotate(1deg);transform:translate(1px,-1px) rotate(1deg)}50%{-webkit-transform:translate(-1px,2px) rotate(-1deg);transform:translate(-1px,2px) rotate(-1deg)}60%{-webkit-transform:translate(-3px,1px) rotate(0deg);transform:translate(-3px,1px) rotate(0deg)}70%{-webkit-transform:translate(3px,1px) rotate(-1deg);transform:translate(3px,1px) rotate(-1deg)}80%{-webkit-transform:translate(-1px,-1px) rotate(1deg);transform:translate(-1px,-1px) rotate(1deg)}90%{-webkit-transform:translate(1px,2px) rotate(0deg);transform:translate(1px,2px) rotate(0deg)}100%{-webkit-transform:translate(1px,-2px) rotate(-1deg);transform:translate(1px,-2px) rotate(-1deg)}}
@keyframes shake{0%{-webkit-transform:translate(1px,1px) rotate(0deg);transform:translate(1px,1px) rotate(0deg)}10%{-webkit-transform:translate(-1px,-2px) rotate(-1deg);transform:translate(-1px,-2px) rotate(-1deg)}20%{-webkit-transform:translate(-3px,0px) rotate(1deg);transform:translate(-3px,0px) rotate(1deg)}30%{-webkit-transform:translate(3px,2px) rotate(0deg);transform:translate(3px,2px) rotate(0deg)}40%{-webkit-transform:translate(1px,-1px) rotate(1deg);transform:translate(1px,-1px) rotate(1deg)}50%{-webkit-transform:translate(-1px,2px) rotate(-1deg);transform:translate(-1px,2px) rotate(-1deg)}60%{-webkit-transform:translate(-3px,1px) rotate(0deg);transform:translate(-3px,1px) rotate(0deg)}70%{-webkit-transform:translate(3px,1px) rotate(-1deg);transform:translate(3px,1px) rotate(-1deg)}80%{-webkit-transform:translate(-1px,-1px) rotate(1deg);transform:translate(-1px,-1px) rotate(1deg)}90%{-webkit-transform:translate(1px,2px) rotate(0deg);transform:translate(1px,2px) rotate(0deg)}100%{-webkit-transform:translate(1px,-2px) rotate(-1deg);transform:translate(1px,-2px) rotate(-1deg)}}
</style>Simpan Postingan lalu pratinjau dulu, lihat hasilnya harusnya akan menjadi seperti dibawah ini.
Untuk menambahkan widgetnya sih sebenarnya sama saja seperti pada syntax kode tambahan diatas yah.
Saya anggap teman-teman bisa dengan mudah mempraktekkan tutorial kali ini. Jangan sungkan untuk meninggalkan komentar kamu apabila kamu merasa bingung dalam mempraktekkan tutorial Membuat Halaman Sahabat ala Kang Wira ini.
Silahkan berlangganan Artikel Kang Wira secara gratis dengan mengisi kolom Berlangganan Gratis dibawah ini ya. Supaya kamu gak ketinggalan tutoraial menarik lainnya seputar Modifikasi Template Blog.
