Cara Menciptakan Halaman About/Tentang Keren Di Blogger Menyerupai

Cara Membuat Halaman About Me ala

Kali ini kita akan membahas perihal cara menciptakan halaman about yang keren di blogger,sebenarnya saya tidak terlalu niat untuk menulis artikel ini hehe.. namun alasannya saya sedang resah mau membahas apa dan kebetulan beberapa waktu yang kemudian ada teman-teman blogger yang menanyakan bagaimana cara menciptakan halaman about keren ibarat yang saya gunakan di ,maka kali ini akan saya bahas tutorialnya.

Baca Juga : 5 Cara Membuat Halaman Sitemap Otomatis yang SEO Friendly dan Keren di Blogger

Sebenarnya ini bukan asli/murni saya yang menciptakan kodenya,karena dulu saya di bantu oleh Code Pelajar ketika sedang meredesign template,dan alasannya saya suka dengan tampilannya maka saya terapkan juga di blog ini.

Tutorial Membuat Halaman About Keren di Blogger

Buka Blogger.com
Sign in dengan akun kalian
Masuk ke Dashboard Blogger anda
Pilih Menu Halaman gres
Beri Judul " About Me " atau " Tentang "
Lalu ubah mode editor dari Compose menjadi HTML
Lalu Masukkan instruksi berikut ini :

<br />
<div class="C-Pelajar-author-box">
<div class="C-Pelajar-author-box-image">
<img alt=" Cara Membuat Halaman About Me ala dirga Cara Membuat Halaman About/Tentang Keren di Blogger Seperti " class="avatar avatar-60 photo" src="https://4.bp.blogspot.com/-RoIJ1y55TUA/XCOMnY0zdcI/AAAAAAAAAqE/fOAOPjMBlkwr21hiRiiNIWSZy9PQcvSpQCLcBGAs/s1600/dhirgha-ega-wardana-dirgadotid.JPG" /></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 Dirga</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">Dhirgha Wardana</span>
</li>
<li class="clearfix">
<strong class="list-title">Nickname</strong>
<span class="cont">Dirga,Ega</span>
</li>
<li class="clearfix">
<strong class="list-title">Birthday</strong>
<span class="cont">19 June, 2000</span>
</li>
<li class="clearfix">
<strong class="list-title">Address</strong>
<span class="cont">Purbalingga</span>
</li>
<li class="clearfix">
<strong class="list-title">Contact</strong>
<span class="cont"><a href="https://wikidzgn.blogspot.comform-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>

Ganti pada URL berikut dengan URL foto/Gambar anda :

Baca Juga

https://4.bp.blogspot.com/-RoIJ1y55TUA/XCOMnY0zdcI/AAAAAAAAAqE/fOAOPjMBlkwr21hiRiiNIWSZy9PQcvSpQCLcBGAs/s1600/dhirgha-ega-wardana-dirgadotid.JPG

Ganti juga goresan pena lain yang sudah saya BOLD di atas dengan kata-kata anda sendiri
Bila sudah silahkan klik Publikasikan

Anda juga dapat menambahkan kata-kata komplemen ibarat ini :

Caranya dengan Buka Menu Halaman
Pilih Menu About yang sudah anda buat
Klik Edit
Lalu Ubah Menu Editor dari HTML menjadi Compose
Lalu Tulis di bab paling bawah kata-kata yang anda mau
Bila sudah klik Publikasikan

Penutup

Itulah cara menciptakan halaman about me keren di blogger ala agar kalian menyukainya dan agar bermanfaat,bila ada artikel atau tutorial yang ingin anda tanyakan atau mau request dapat menghubungi saya melalui halaman kontak di sini => Form Kontak

Sekian tutorial kali ini perihal Cara Membuat Halaman About/Tentang Keren di Blogger Seperti ,selamat mencoba.

Sumber https://www.dirga.id/