بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
SHAPE pada Header atau kepala blog adalah bentuk sudut lancip berbentuk segitiga pada header yang menghadap kebawah pada sebuah blog. Terus bagaimana membuatnya ya? ya tentu saja dengan bahasa pemrograman yang sering kita jumpai sehari-hari yaitu CSS3. Dengan perkembangan bahasa pemrograman sekarang ini, tidak ada yang tidak mungkin pada hal apapun yang terkait dengan blog. Bahkan kita bisa memodifikasi sedemikian rupa dengan kecanggihannya.
Mungkin pada beberapa blog yang kalian lihat adalah berupa bidang datar dan tidak membentuk rupa yang sedemikian. Memang tidak ada yang salah dengan penampilan seperti itu. Karena default blog dirancang dengan kondisi yang biasa dan tidak terkesan istimewa. Kreativitas dari kitalah yang membuat blog menjadi unik dan berbeda dari yang lain karena ketrampilan mengutak-atik template yang terdiri dari beberapa macam bahasa pemrograman untuk membangun sebuah website / blog yang profesional. Sudah barang tentu untuk membuat keunikan tersendiri dari blog, tidak ada salahnya kalian mencoba trik yang satu ini.
Tapi tidak terbatas hanya dengan penampilan sudut bawah keader blog menjadi segitiga lancip lho ya. Malah ada pembuat template yang mendesain blog dengan header berupa animasi. Ada yang memberikan efek shadow atau bayangan. Ada juga yang memberikan efek gelembung beserta pergantian warna seperti pada blog saya ini. Bisa saja itu ya teman-teman, tinggal kalian nanti mau pilih yang mana dan berusahalah untuk belajar mengutak-atik template. Karena dari template inilah, sebuah blog dapat dimodifikasi sesuai keinginan yang tentu saja bisa menjadi unik dan berbeda seperti yang sudah saya katakan tadi di awal.
Baca Juga :
Memodifikasi Tampilan Header dengan Ekor Segitiga Lancip
1. Masuk ke Dashboard Blogger2. Pilih Tema
3. Klik Sesuaikan : Edit HTML ini langsung masuk ke template
4. Cari kode ]]></b:skin> dan tempelkan kode dibawah ini diatas kode ]]></b:skin> tadi.
*,
*:before,
*:after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
section{
position: relative;
height: 85vh;
width: 100%;
background: linear-gradient(180deg, rgba(78,80,16,1) 0%, rgba(185,208,32,1) 50%);
display: flex;
align-items: center;
justify-content: center;
clip-path: polygon(
0 0,
100% 0,
100% 84%,
64% 84%,
50% 100%,
36% 84%,
0 84%
);
}
section h1{
font-family: "Poppins",sans-serif;
text-align: center;
color: #000;
font-weight: 500;
font-size: 45px;
letter-spacing: 18px;
}
span{
font-size: 20px;
letter-spacing: 2px;
}5. Kemudian taruhlah kode dibawah ini di blog kalian.
<html lang="en">
<head>
<title>Pointed Arrow Header Shape</title>
<!--Google Font-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">
<!--Stylesheet-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<h1>
HEADER SHAPE<br>
<span> Dengan Kombinasi Anak Panah</span>
</h1>
</section>
</body>
</html>Sekarang untuk memastikan bisa tidak editing itu ditampilkan di blog, silakan kalian lihat dulu demonya.
Nah sudah terlihat khan Header yang baru. Agak unik juga khan kelihatannya. Tidak seperti pada umumnya bila bentuk header menyerupai bidang datar saja. Semoga kalian bisa mempraktekkannya. "Tidak ada kata terlambat, yang ada hanya kita belum memulai sebuah rencana. Jadi jangan tunda apapun pekerjaan kita selagi kita diberikan waktu, karena sekali waktu berjalan, dia tidak akan dapat kembali mundur barang sedetikpun." So keep fight brothers. Salam hangat semuanya. Salam Blogger.
