Kali ini saya akan memberikan tutorial bagaimana Cara Mudah Membuat Halaman About Me Pada Blogger. Pentingnya membuat Halaman About Me pada blog menjadi keseriusan menjadi seorang blogger, karna hampir seluruh situs besar yang ada di internet pasti memiliki Halaman About Me. Jadi sebelum melangkah ketutorial alangkah baiknya mengetahui apa fungsi dan tujuan pembuatan Halaman About Me.
Halaman About Me adalah salah satu halaman khusus di blog yang berfungsi untuk menampilkan informasi penting siapa pembuat dan juga tujuannya dalam membangun situs tersebut. Halaman About Me juga biasanya disisipkan informasi kontak didalamnya.
Setelah anda memahami fungsi dan tujuan pembuatan Halaman About Me, saatnya kita melangkah kebagian tutorial. Dan sekedar informasi koding Halaman About Me sebenarnya saya dapat dari situs blogger terkenal dirga.id, oleh sebab itu disini saya hanya menshare kembali. Jadi bagi bagi anda yang tertarik memasang Halaman About Me pada blog anda, berikut adalah tutorialnya.
Cara Mudah Membuat Halaman About Me Pada Blogger
1. Login Blogger > Masuk ke Dashboard Blogger
2. Pilih Menu Halaman baru > Beri Judul " About Me " atau " Tentang "
3. Lalu ubah mode editor dari Compose menjadi HTML > Lalu Masukkan kode berikut ini :
<br />
<div class="C-Pelajar-author-box">
<div class="C-Pelajar-author-box-image">
<img alt="Author Image" class="avatar avatar-60 photo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmzr4Dz4rNHKkJp8dSYapAIoDzlK02KtMbCjhv_KRAhMAB1t5qPpfB6sSst1uA3HuWN1uPV_8g25Y65LCjy8opsBBEVFTGbPGqX_wgehZgzd8k92d5qJ1DixSmgP6GodKwmhPwPdeRvKmH/s1600/Goindoti.png" /></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 GoindoTi</h2>
<h3 class="profile-position">
Freedom People</h3>
</div>
<div class="C-Pelajar-author-box-text-details">
<ul class="profile-list">
<li class="clearfix">
<strong class="list-title">Name</strong>
<span class="cont">Go Indonesian Technology And Information</span>
</li>
<li class="clearfix">
<strong class="list-title">Nickname</strong>
<span class="cont">GoindoTi</span>
</li>
<li class="clearfix">
<strong class="list-title">Birthday</strong>
<span class="cont">15 November, 1993</span>
</li>
<li class="clearfix">
<strong class="list-title">Address</strong>
<span class="cont">Depok</span>
</li>
<li class="clearfix">
<strong class="list-title">Contact</strong>
<span class="cont"><a href="https://goindoti.blogspot.com/form-kontak.html">Form Kontak</a></span>
</li>
</ul>
</div>
<div style="clear: both;">
</div>
</div>
</div>
<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:#3d4451;padding-bottom:25px;margin-bottom:25px;border-bottom:1px solid #dedede}
.C-Pelajar-author-box-text .hello-txt{background-color:#1976D2;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:#1976D2;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}}
</style>
<b><span style="font-size: large;"><br /></span></b>
<b><span style="font-size: large;"><br /></span></b>4. Ganti pada URL berikut dengan URL foto/Gambar anda :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmzr4Dz4rNHKkJp8dSYapAIoDzlK02KtMbCjhv_KRAhMAB1t5qPpfB6sSst1uA3HuWN1uPV_8g25Y65LCjy8opsBBEVFTGbPGqX_wgehZgzd8k92d5qJ1DixSmgP6GodKwmhPwPdeRvKmH/s1600/Goindoti.png5. Ganti juga tulisan lain yang sudah saya BOLD di atas dengan kata-kata anda sendiri
6. Bila sudah silahkan klik Publikasikan
Demikian tutorial mengenai Cara Mudah Membuat Halaman About Me Pada Blogger. Bila anda merasa kesulitan menerapkan tutorial di atas pada blog kalian, jangan sungkan untuk bertanya pada kolom komentar dibawah. Semoga informasi yang diberikan bermanfaat dan sampai jumpa pada tutorial berikutnya.
Sumber Referensi : dirga.id