Jumat, 09 Maret 2018
Di artikel aku sebelumnya, pernah aku buat tutorial menciptakan halaman Sahabat yang unik dengan Jquery. Di tutorial kali ini, aku tidak memakai Jquery alasannya ialah cukup memakai CSS dan HTML saja.
Apabila teman-teman mau lihat dulu tutorial aku sebelumnya, dapat eksklusif 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, dapat eksklusif klik tombol DEMO di bawah ini yaa.
Cara Membuat Halaman Sahabat ala Kang Wira
Karena disini aku hanya memakai HTML dan CSS saja, jadi teman-teman tidak perlu edit pada template yang kau gunakan ketika ini yah.
Naah Setelah itu salin semua instruksi yang sudah aku sisipkan pada syntax dibawah ini dan letakkan eksklusif pada halaman yang gres saja kau buat tadi.
Eh.. tunggu dulu..
Disini aku menyiapkan 2 Kode HTML yang dapat kau gunakan sesuai dengan lebar template kamu.
Maksudnya bila template yang kau gunakan mendukung Full Width Page alias Halaman tanpa Sidebar menyerupai pada halaman Sahabat Kang Wira, teman-teman dapat coba Syntax yang pertama. Gunanya semoga 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 memakai Kode pada Syntax yang kedua.
Paham kan maksud saya?
Kalau masih belum paham, dapat eksklusif tanyakan pada kolom komentar yah. Berikut ini eksklusif saja aku 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="Sebelum aku menjelaskan Cara menciptakan Halaman Sahabat Ala KangWira ini Trik Membuat Halaman Sahabat ala Kang Wira" class="proff"><p1><a title="Trik Membuat Halaman Sahabat ala Kang Wira" href="https://rumahsolved.blogspot.comp/kontak.html" rel="nofollow" target="_blank">BLOG KAMU</a></p1><hr/><p2>Deskripsi Blog kau akan tampil disini</p2> </div> <!--tambahkan instruksi disini--> TAMBAHKAN KODE DISINI <!--tambahkan instruksi disini--> <!--kolom1 end--> </div> <div class="kolsah"> <!--kolom2 start--> <div class="sahabat"> <img src="https://image.prntscr.com/image/IGa3Afv3Q0uI6Jpbc76d-A.jpg" alt="Sebelum aku menjelaskan Cara menciptakan Halaman Sahabat Ala KangWira ini Trik Membuat Halaman Sahabat ala Kang Wira" class="proff"><p1><a title="Trik Membuat Halaman Sahabat ala Kang Wira" href="https://rumahsolved.blogspot.comp/kontak.html" rel="nofollow" target="_blank">BLOG KAMU</a></p1><hr/><p2>Deskripsi Blog kau akan tampil disini</p2> </div> <!--tambahkan instruksi disini--> TAMBAHKAN KODE DISINI <!--tambahkan instruksi 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 instruksi diatas, aku buat khusus untuk 2 kolom. Kaprikornus untuk menambahkan widget nya, teman-teman dapat memakai instruksi dibawah ini dan letakkan pada goresan pena tambahkan instruksi disini.
<div class="sahabat"> <img src="https://image.prntscr.com/image/IGa3Afv3Q0uI6Jpbc76d-A.jpg" alt="Sebelum aku menjelaskan Cara menciptakan Halaman Sahabat Ala KangWira ini Trik Membuat Halaman Sahabat ala Kang Wira" class="proff"><p1><a title="Trik Membuat Halaman Sahabat ala Kang Wira" href="https://rumahsolved.blogspot.comp/kontak.html" rel="nofollow" target="_blank">BLOG KAMU</a></p1><hr/><p2>Deskripsi Blog kau akan tampil disini</p2> </div>Jika sudah, eksklusif saja simpan halaman danklik tombol pratinjau untuk melihat hasil sementara. Apabila sudah cocok, eksklusif publikasikan halaman Sahabat yang gres kau buat tadi. Maka jadinya dapat kau lihat pada gambar dibawah ini.
Sudah Paham ya ?
Naah berikut ini ialah Kode Khusus untuk Halaman yang masih menampilkan Sidebar pada halaman statis blognya. Kaprikornus teman-teman yang belum paham edit HTML, dapat eksklusif menerapkan instruksi dibawah ini nih kedalam halaman Sahabat yang kau buat.
<div class="kolbod"> <div class="sahabat"> <img src="https://image.prntscr.com/image/IGa3Afv3Q0uI6Jpbc76d-A.jpg" alt="Sebelum aku menjelaskan Cara menciptakan Halaman Sahabat Ala KangWira ini Trik Membuat Halaman Sahabat ala Kang Wira" class="proff"><p1><a title="Trik Membuat Halaman Sahabat ala Kang Wira" href="https://rumahsolved.blogspot.comp/kontak.html" rel="nofollow" target="_blank">BLOG KAMU</a></p1><hr/><p2>Deskripsi Blog kau akan tampil disini</p2> </div> <!--tambahkan instruksi disini--> TAMBAHKAN KODE DISINI <!--tambahkan instruksi disini--> <!--tambahkan instruksi disini--> TAMBAHKAN KODE DISINI <!--tambahkan instruksi 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 kemudian pratinjau dulu, lihat jadinya harusnya akan menjadi menyerupai dibawah ini.
Untuk menambahkan widgetnya sih gotong royong sama saja menyerupai pada syntax kode tambahan diatas yah.
Saya anggap teman-teman dapat dengan gampang mempraktekkan tutorial kali ini. Jangan sungkan untuk meninggalkan komentar kau apabila kau merasa gundah 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 kau gak ketinggalan tutoraial menarik lainnya seputar Modifikasi Template Blog.
Share This :
comment 0 Comment
more_vert