Cara Membuat Halaman About Me Paling Keren dan Ringan untuk Blogger

Halaman About Me merupakan salah satu bagian yang ada didalam suatu blog dengan fungsi untuk menjelaskan tentang latar belakang dari blog itu sendiri. Atau jika blog itu adalah blog pribadi yang dikelola ole perorangan, maka halaman tersebut akan berisi tentang latar belakang dari pemilik atau penulis blog tersebut.

Halaman ini bisa diisi apapun yang berkaitan dengan blog atau penulis, bisa juga disertai dengan gambar, nomor telepon, akun sosmed dan masih banyak lainnya. Bahkan ada beberapa blog yang saya baca dengan jelas menerangkan tentang hobinya di halaman about me ini.

Bisa dibilang halaman about me adalah penting, selain digunakan sebagai salah satu syarat agar diterima Google Adsense, halaman ini juga bisa digunakan oleh pembaca untuk mengetahui siapa pemilik dari blog yang sedang mereka baca.

Untuk penempatannya sendiri, halaman ini bisa diletakan pada menu navigasi yang ada di header blog, atau bisa juga diletakan pada bagian footer blog. Terserah owner atau pemilik blog, karena halaman ini sangat fleksibel untuk ditempatkan dimana saja.

Cara Membuat Halaman About me yang Keren dan Ringan

Langkah pertama masuk ke blogger.com dan masuk ke menu Dasbor Blogger.

Langkah kedua adalah pilih menu Halaman dan buat Halaman Baru.

Lengkah ketiga salin kode dibawah ini, dan tempatkan pada halaman baru yang sudah dibuat tadi. Tapi ingat ubah dulu ke mode HTML

<!-- start kode by bocahsihir.info -->

<br />

<div class="C-Pelajar-author-box">

<div class="C-Pelajar-author-box-image">

<img alt="Author Image" class="avatar avatar-60 photo" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6q7-4SKxU3MilKeyfJjVaAWNOZzUz7Bsl3vCVfnr9HfJu16PLalgP92vHcLRUhghcsKTMABmA0tSfDrl5Jlyb50JgckPb_jfiGSd57qOoun6ZVGt-MkwVomrbMHGUHSYRtlRqfnpBpsc/s320/IMG_20190420_230604.jpg" width="239" /></div>

<div class="C-Pelajar-author-box-text">

<div class="C-Pelajar-author-box-text-head">

<span class="hello-txt">Hello</span>

<br />

<h2 class="profile-title">

I'm Zef</h2>

<div class="profile-position">

<b>Potter Head</b></div>

</div>

<div class="C-Pelajar-author-box-text-details">

<ul class="profile-list">

<li class="clearfix">

<b class="list-title">Name</b>

<span class="cont">Zefrie Al Faruqi</span>

</li>

<li class="clearfix">

<b class="list-title">Nickname</b>

<span class="cont">Ijef</span>

</li>

<li class="clearfix">

<b class="list-title">Birthday</b>

<span class="cont">8 June, 1995</span>

</li>

<li class="clearfix">

<b class="list-title">Address</b>

<span class="cont">Purbalingga, Indonesia</span>

</li>

<li class="clearfix">

<b class="list-title">Contact</b>

<span class="cont"><a href="https://www.bocahsihir.info/p/blog-page_1.html">Form Kontak</a></span>

</li>

</ul>

</div>

<div style="clear: both;">

</div>

</div>

</div>

<div style="text-align: justify;">

<script>

//<![CDATA[

function loadCSS(e,t,n){"use strict";var i = window.document.createElement("link");var o = t || window.document.getElementsByTagName("script")[0];i.rel = "stylesheet";i.href = e;i.media = "only x";o.parentNode.insertBefore(i,o);setTimeout(function (){i.media = n || "all"}

)}

loadCSS("https://cdn.rawgit.com/slideseo-blog/slideseo.js/master/Part.css");//]]>

</script>

<script src="https://cdn.rawgit.com/slideseo-blog/slideseo.js/master/Part.js" type="text/javascript"></script>  

<style>

/*=Remove Item=*/

#sidebar-wrapper{display:none}

h1.post-title.entry-title{display:none}

/*=ADD Item=*/

#post-wrapper{background:transparent;float:left;width:100%;max-width:1020px;margin:0 0 10px}

.C-Pelajar-author-box{padding:57px 50px 15px 50px;box-sizing:border-box;overflow:hidden}

.C-Pelajar-author-box-image{width:40%;float:left;margin-right:5%;margin-bottom:10px}

C-Pelajar-author-box-image img{height:385px;object-fit:cover}

img{max-width:100%;vertical-align:middle;border:0}

.C-Pelajar-author-box-text{padding:0;overflow:hidden;text-align:left}

.C-Pelajar-author-box-text-head{color:#49ace1;padding-bottom:25px;margin-bottom:25px;border-bottom:1px solid #dedede}

.C-Pelajar-author-box-text .hello-txt{background-color:#49ace1;color:#fff;font-size:14px;font-weight:700;line-height:1.1;display:inline-block;padding:7px 12px;text-transform:uppercase;position:relative;margin-bottom:28px}

.C-Pelajar-author-box-text .hello-txt:before{border-left-color:#49ace1;content:'';width:0;height:0;top:100%;left:5px;display:block;position:absolute;border-style:solid;border-width:0 0 8px 8px}

.C-Pelajar-author-box-text .profile-title{font-size:36px;line-height:1.1;font-weight:700;margin-bottom:5px;color:#3d4451}

.C-Pelajar-author-box-text .profile-title span{font-weight:300}

.C-Pelajar-author-box-text .profile-position{font-size:18px;font-weight:400;line-height:1.1;margin-bottom:0}

.C-Pelajar-author-box-text-details ul{margin:0;padding:0;list-style:none}

.C-Pelajar-author-box-text-details .profile-list li{margin-bottom:13px;list-style:none;padding:0}

.C-Pelajar-author-box-text-details .profile-list li .list-title{display:block;width:120px;float:left;color:#333333;font-size:12px;font-weight:700;line-height:20px;text-transform:uppercase}

.C-Pelajar-author-box-text-details .profile-list li .cont{display:block;margin-left:125px;font-size:15px;font-weight:400;line-height:20px;color:#9da0a7}

.C-Pelajar-author-box-text-details .profile-list li .list-button{color:#fff;font-size:12px;font-weight:700;line-height:1;text-transform:none;padding:5px 8px;display:inline-block;position:relative;top:-2px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;background:#1976D2}

.C-Pelajar-author-box-text-details .profile-list li .fa{margin-right:10px;vertical-align:baseline}

.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

.fenix-sub-head .social-head{padding:15px 0;background:#1976D2;box-sizing:border-box}

.top-bar-social{padding:0}

.section:last-child .widget:last-child{margin-bottom:0}

.section:first-child .widget:first-child{margin-top:0}

.top-bar-social .LinkList ul{text-align:center;margin:0 0 0 0}

.top-bar-social .widget ul{padding:0}

.top-bar-social li{display:inline-block;float:none;padding:0;margin-right:5px}

.top-bar-social #social a{display:block;width:40px;height:40px;line-height:40px;font-size:18px;color:#1976D2;background:#fff;border:1px solid #e4e4e4;transition:all 0.3s linear;-moz-transition:all 0.3s linear;-webkit-transition:all 0.3s linear;-o-transition:all 0.3s linear}

/*=Responsive*/

@media (max-width:640px){.C-Pelajar-author-box{padding:10px}.C-Pelajar-author-box-text-head{margin-bottom:14px;padding-bottom:14px}}

@media (max-width:480px){.C-Pelajar-author-box-image{width:100%;float:left;margin-right:0}.C-Pelajar-author-box-image img{width:100%}.C-Pelajar-author-box-text{width:100%;float:left;margin-top:14px}}

.ArticleTeaser-date{padding:10px;box-sizing:border-box;border:3px solid #2c3e50;border-radius:10px;color:#2c3e50}

.ArticleTeaser a{color:#2c3e50;font-size:18px;font-weight:600}

.BlogList:after{background:#2c3e50}

.ArticleTeaser:last-child:after,.BlogList:before{background:#2c3e50}

.ArticleTeaser-bubble{border:2px solid #2c3e50}

h2.exp-title{text-align:center;font-weight:bold;color:#2c3e50}

.Buka{padding:0}

.ArticleTeaser:hover .ArticleTeaser-bubble:before{background:#2c3e50}

.ArticleTeaser-bubble:after{display:none;}

@media (max-width:768px){.ArticleTeaser-date{border:none}.ArticleTeaser{border:2px solid #2c3e50;border-radius:10px}}



Tuliskan kata-kata tambahan dsini, misal hobi, nama-nama mantan, dan lain-lain.



<!-- finish kode -->

Catatan:
Ubah kode yang saya cetak tebal dibawah ini dengan url gambar yang akan dijadikan foto profil

<img alt="Author Image" class="avatar avatar-60 photo" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6q7-4SKxU3MilKeyfJjVaAWNOZzUz7Bsl3vCVfnr9HfJu16PLalgP92vHcLRUhghcsKTMABmA0tSfDrl5Jlyb50JgckPb_jfiGSd57qOoun6ZVGt-MkwVomrbMHGUHSYRtlRqfnpBpsc/s320/IMG_20190420_230604.jpg"

Ubah kode dibawah ini juga ya (dicetak tebal).. dengan identitas yang ingin sobat tampilkan pada halaman About Me

<h2 class="profile-title">
I'm Zef</h2>
<div class="profile-position">
<b>Potter Head</b></div>
</div>
<div class="C-Pelajar-author-box-text-details">
<ul class="profile-list">
<li class="clearfix">
<b class="list-title">Name</b>
<span class="cont">Zefrie Al Faruqi</span>
</li>
<li class="clearfix">
<b class="list-title">Nickname</b>
<span class="cont">Ijef</span>
</li>
<li class="clearfix">
<b class="list-title">Birthday</b>
<span class="cont">8 June, 1995</span>
</li>
<li class="clearfix">
<b class="list-title">Address</b>
<span class="cont">Purbalingga, Indonesia</span>
</li>
<li class="clearfix">
<b class="list-title">Contact</b>
<span class="cont"><a href="https://www.bocahsihir.info/p/blog-page_1.html">Form Kontak</a></span>

Jika sudah, maka halaman about me seperti blog saya sudah bisa dipublikasikan.
Nah jadi tunggu apalagi, selamat mencoba

Berbagi :