Coretan Si Mimin, BOGOR - About Me atau dalam bahasa indonesia nya adalah tentang saya. Widget ini sangat penting untuk keperluan website ataupun blog, dan bisa diartikan sebagai tanda pengenal layaknya seperti perusahaan profesional.
Seperti judul artikel pada hari ini, mimin akan membagikan satu buah tutorial cara membuat dan memasang widget about me versi custom di blogger.
Apabila sobat berkenan dan ingin memasangnya untuk keperluan blog sobat, yuk mari kita langsung saja ke tahap cara pembuatan dan sekaligus pemasangannya.
Cara Membuat dan Memasang Widget Blogger About Me Versi Custom
Untuk langkah yang pertama, disini kita akan terlebih dulu menyiapkan semua bahan-bahannya seperti: HTML, dan CSS.
Membuat Widget Blogger About Me
1. Buat HTML
Tahapan yang pertama, di sini mimin akan bagikan kode HTML nya. Lihat dan perhatikan kode berikut ini:
/* Custom About Me ala https://coretansimimin.blogspot.com */
<figure class="snip0064">
<figcaption>
<p>I wait for life to shower me with meaning and happiness.</p>
<h2>Jody <span>Hale</span></h2><span class="position">Typographer</span>
</figcaption>
<div class='images'>
<img width='640' height='480' src='url gambar' alt='about sample10'/></div>
<a title='About Us' href='#'></a>
</figure>
Catatan:
Img src="url gambar" = Silahkan sobat ganti dengan url gambar atau foto sobat, atau terserah.
a href="#" = Ganti dengan link porfile sobat, mau itu facebook, ig, twitter, dan lain sebagainya.
Sedangkan untuk caption, title, label, ganti sesuai kebutuhan.
Setelah itu, copy kode HTML di atas, simpan terlebih dulu di notepad sobat. Jika sudah, kita lanjut ke langkah berikutnya.
2. Buat CSS
Tahap atau langkah kedua yaitu, membuat CSS nya. Sobat bisa perhatikan penampakan CSS di bawah ini:
/* Custom About Me ala https://coretansimimin.blogspot.com */
.snip0064 {
font-family: 'Raleway', Arial, sans-serif;
position: relative;
overflow: hidden;
margin: auto auto 35px;
min-width: 220px;
max-width: 100%;
max-height: 260px;
width: 100%;
height: 260px;
color: #fff;
border-radius: 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
box-shadow: var(--button-shadow);
}
.snip0064:hover {
color: #fff;
}
.snip0064 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.snip0064 .images {
position: relative;
display: block;
width: 60%;
height: 100%;
overflow: hidden;
left: -14%;
bottom: 0;
z-index: 1;
box-shadow: 0px 0 20px rgba(0, 0, 0, 0.5);
-webkit-transform: skewX(-15deg);
transform: skewX(-15deg);
}
.snip0064 .images img {
aspect-ratio: 16 / 9;
position: relative;
right: -20%;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
image-size: cover;
object-fit: cover;
image-position: center;
-webkit-transform: skewX(15deg);
transform: skewX(15deg);
}
.snip0064 figcaption {
background: #695cfe;
height: 100%;
margin: 0;
position: absolute;
width: 100%;
border-radius: 10px;
z-index: 1;
}
.snip0064 figcaption h2,
.snip0064 figcaption p {
margin: 0;
text-align: right;
width: 100%;
}
.snip0064 figcaption h2 {
bottom: 36px;
position: absolute;
padding: 10px 20px;
background: #fff;
color: #202732;
font-size: 1.3em;
font-weight: 300;
text-transform: uppercase;
border: 1px solid rgba(0, 0, 0, 0.2);
}
.snip0064 figcaption h2 span {
font-weight: 800;
}
.snip0064 figcaption p {
padding: 20px;
width: 53%;
right: 0;
bottom: 68px;
position: absolute;
font-size: 1em;
font-weight: 500;
font-style: italic;
}
.snip0064 figcaption .position {
position: absolute;
bottom: 0;
right: 0;
line-height: 40px;
padding-right: 20px;
font-style: normal;
font-size: 0.8em;
}
.snip0064 a {
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
z-index: 1;
}
.snip0064.blue figcaption {
background: #20638f;
}
.snip0064.red figcaption {
background: #962d22;
}
.snip0064.yellow figcaption {
background: #bf6516;
}
.snip0064:hover figcaption,
.snip0064.hover figcaption {
background: #202732;
}
.snip0064:hover.blue figcaption,
.snip0064.hover.blue figcaption {
background: #2472a4;
}
.snip0064:hover.red figcaption,
.snip0064.hover.red figcaption {
background: #ab3326;
}
.snip0064:hover.yellow figcaption,
.snip0064.hover.yellow figcaption {
background: #d67118;
}
.snip0064:hover .images,
.snip0064.hover .images {
box-shadow: 0px 0 0px rgba(0, 0, 0, 0.5);
}
@media (max-width: 480px) {
.snip0064 {
height: 190px;
max-height: 190px;
}
.snip0064 .images {
height: 190px;
max-height: 190px;
}
}
Lakukan seperti langkah pertama, copy kode CSS di atas dan simpan di notepad.
Sudah? Lanjut ke tahap pemasangan.
Memasang Widget About Me di Blogger
Cara pemasangannya sangat mudah, sobat hanya perlu login ke akun blogger masing-masing. Jika sudah login, silahkan sobat klik ikon setrip tiga (Ikon Hamburger) di bagian sisi kiri, lalu klik menu --> Tata Letak.
Atau sobat bisa lihat seperti gambar di bawah:
Langkah selanjutnya yaitu, pada bagian sidebar silahkan sobat klik Tambahkan Gadget --> Pilih HTML/JavaScript. Seperti contoh gambar berikut:
Pastekan kode HTML nya di kolom tersebut. Setelah itu klik simpan.
"Sedangkan, untuk CSS nya sobat perlu menaruhnya di dalam template masing-masing. Caranya dengan melakukan edit HTML."
Klik menu hamburger di bagian kiri sama seperti tadi, pilih menu tema --> klik ikon chevron down --> pilih edit HTML. Taruh kode CSS tersebut di bagian dalam <style>
Contoh:
<style type="text/css">
....Taruh CSS nya disini....
</style>
Jika sudah, langsung saja klik simpan tema.
Apabila semua kode-kode di atas telah masuk pada tempatnya dengan benar seperti cara yang mimin berikan, langkah terakhir adalah sobat tinggal melihat seperti apa dan bagaimana hasilnya.
Nah ... Gimana nih menurut sobat? Sangat mudah bukan?
Pembuatan dan pemasangan yang sangat simple tidak membutuhkan waktu lama, widget sudah bisa di aktifkan. Dan, semua kode di atas berfungsi sebagaimana mestinya.
Demikianlah tutorial ini mimin buat dengan sebenar-benarnya tentang, cara membuat dan memasang widget about me versi custom di blogger.
Artikel ini pertama kali tayang di Coretan Si Mimin pada Sabtu, 10/06/2023.