Cara Membuat About Us di Blog

Cara Membuat About Us di Blog

Cara Membuat About Us di Blog
Cara Membuat About Us di Blog

Cara Membuat About Us (Me) di Blogger / Blogspot, artikel kali ini tentang cara membuat halaman statis untuk about us atau about me, pada template blogger yang kalian pakai, banyak dari kalian yang bingung ingin membuat about us seperti apa yakan, entah itu ingin mendeskripsikan blog atau website kalian, entah itu ingin menampilkan foto kalian dan masih banyak lainnya, mari disimak cara membuatnya dibawah ini.

Apa itu About Us?

About us, about me dan tidak jarang juga dengan sebutan , "Tentang Kami" atau "Tentang Saya" adalah sebuah halaman yang dimana bertujuan untuk memberikan sebuah informasi pada suatu website maupun blog siapa diri kalian sebenarnya (admin / pengelola website atau blog ) kepada visitor atau pengunjung. Tapi pada intinya About Us sama halnya dengan "Profil Tentang diri kalian", mungkin kalian juga tidak asing lagi bukan dengan kata tersebut dimana terdapat di sosial media seperti facebook, twitter, instagram, dsb.

Fungsi About Us

Sebelum ketahap pembuatan, maka admin akan menjelaskan sedikit dimana keuntungan ketika kalian membuat sebuah halaman About Us atau Tentang Kami berdasarkan apa yang admin ketahui diantaranya :
  • Visitor maupun pengunjung akan mengetahui tujuan atau maksud blog yang kalian buat, dimana kalian sudah ketahui membuat suatu halaman "Tentang Kami" tidak hanya mengisi sebuah teks Biodata saja, akan tetapi juga akan membahas, visi maupu misi blog yang kalian bangun ( terkecuali kalian males kaya admin akowkow cuma data diri ).
  • Menambahkan sebuah kepercayaan kepada pengunjung dimana informasi tentang artikel Kalian sesuai dengan postingan kalian. dan mungkin sama halnya dengan deskripsi, akan tetapi About Us lebih luas membahas tentang diri kalian masing - masing.
  • Terakhir mungkin kalian akan terkenal dalam dunia maya. "Silahkan hina kami di dunia nyata, tapi ingat kami berkuasa di dunia maya" anjaay Anonymous hahahah.

Cara Membuat About Us di Halaman Statis Blog

  1. Login ke Blogger.com
  2. Pilih menu Halaman >> Buat Halaman Baru.
  3. Pilih Mode HTML, Bukan Compose
  4. Silahkan Salin Kode HTML dibawah ini.
  5. 
    <div dir="ltr" style="text-align: left;" trbidi="on">
    <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="URL_GAMBAR_KAMU" width="210" /></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 NAMA KAMU</h2>
    </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">NAMA</span></li>
    <li class="clearfix">
    <b class="list-title">Birthday</b><span class="cont">11 Oct, 2000</span></li>
    <li class="clearfix">
    <b class="list-title">Address</b>
    <span class="cont">Jakarta, Indonesia</span>
    </li>
    <li class="clearfix">
    <b class="list-title">Contact</b>
    <span class="cont"><a href="URL_HALAMAN_CONTACT_US">Form Kontak</a></span>
    </li>
    </ul>
    </div>
    <div style="clear: both;">
    </div>
    </div>
    </div>
    <span style="color: #49ace1;">ruangcoder.com</span> <span style="font-size: medium;">adalah Blog Pribadi yang membahas Tentang pemrograman dasar, cyber news internasional maupu nasional&nbsp; dan minat saya terhadap tulis-menulis maka Blog ini menjadi media untuk Saya dalam belajar dan mengembangkan kegemaran Saya.</span>
    <br />
    <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}}
    <!-- finish kode -->
    </style></div>
    </div>
    
    
    Perhatian!
    Silahkan di sesuaikan dengan kreatifitas kalian sendiri, sudah jelas di kode nya
    jadi silahkan kalian baca kodenya sudah detail apa aja yang harus kalian ganti.
  6. Save Halaman.

Penutup

Nah mungkin artikel tentang Cara Membuat About Us di Blog sampai sini saja terlebih dahulu jika ada error atau bug pada kode diatas jangan ragu - ragu untuk kalian menanyakan di kolom komentar dibawah ini ya.

Terimakasih sudah berkunjung.

Anda mungkin menyukai postingan ini