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 :
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/
