Membuat Halaman About ala IDGretongers di Blog

Membuat Halaman About ala IDGretongers di Blog - Halo sobat gretong :D, di jum'at yang cerah ini ane akan membagikan cara Membuat Halaman About ala IDGretongers di Blog, kamu bisa lihat demonya disini. Oke langsung saja ane akan share tutorialnya, tapi sebelumnya perlu diingat, halaman ini mungkin tidak akan benar-benar mirip 100%, kamu bisa memodifikasinya sesuka hati, hehehehe.

1. Buka Dashbor Blogger.
2. Pilih opsi Laman > Buat Laman Baru.
3. Tempelkan semua kode dibawah ini di Tab HTML.

<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100vh;
}

body {
  font: 14px/1 'Open Sans', sans-serif;
  color: #fff;
  background: #1f253d;
}

h1 {
  padding: 50px 0;
  font-weight: 400;
  text-align: center;
}

p {
  margin: 0 0 20px;
  line-height: 1.5;
}

main {
  min-width: 320px;
  max-width: 800px;
  padding: 50px;
  margin: 0 auto;
}

section {
  display: none;
  padding: 30px;
  background-color: #323a58;
  color : #fff !important;
  box-shadow :#191d2d 1px 1px, #191d2d 2px 2px, #191d2d 3px 3px, #191d2d 4px 4px, #191d2d 5px 5px, #191d2d 6px 6px, #191d2d 7px 7px, #191d2d 8px 8px, #191d2d 9px 9px, #191d2d 10px 10px, #191d2d 11px 11px, #191d2d 12px 12px, #191d2d 13px 13px, #191d2d 14px 14px, #191d2d 15px 15px, #191d2d 16px 16px, #191d2d 17px 17px, #191d2d 18px 18px, #191d2d 19px 19px, #191d2d 20px 20px, #191d2d 21px 21px, #191d2d 22px 22px, #191d2d 23px 23px
}

input {
  display: none;
}

label {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 15px 25px;
  font-weight: 600;
  text-align: center;
  color: #fff !important;
}

label:before {
  font-family: fontawesome;
  font-weight: normal;
  margin-right: 10px;
}

label[for*='1']:before { content: 'f05a'; }
label[for*='2']:before { content: 'f007'; }
label[for*='3']:before { content: 'f16b'; }
label[for*='4']:before { content: 'f1a9'; }

label:hover {
  color: #888;
  cursor: pointer;
}

input:checked + label {
  color: #fff !important;
  background-color:#323a58 !important;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
  display: block;
}

@media screen and (max-width: 650px) {
  label {
    font-size: 0;
  }
  label:before {
    margin: 0;
    font-size: 18px;
  }
}


@media screen and (max-width: 400px) {
  label {
    padding: 15px;
  }
}
</style>
<main>
  
  <input checked="" id="tab1" name="tabs" type="radio" />
  <label for="tab1">Tentang</label>
    
  <input id="tab2" name="tabs" type="radio" />
  <label for="tab2">Informasi Admin</label>
    
  <section id="content1">
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCD7c9Y8AM2DSmu8aPQCuWzGmEEe8UvhJ6_EZc-xYDXNsuMVZaC95s6hg9ggP2rzSI8F2-jMZS2eS7vrcHR8eOanoUzOQ1QyfskjHlQEUCk9cWQKw50rjU2B2JE3WHTZSkEpTq-36BErwU/s1600/logoabout.png" />
    
      <p>Sebuah blog yang membahas hal-hal gratisan, seperti Info Gratis, Tutorial Gratis dan Template Gratis</p>    
   <p>Dibuat oleh Vido Rizki, selaku Admin Gretongers Indonesia</p>

  </section>
    
  <section id="content2">
    
      <p>Nama Admin : Vido Rizki</p>
      <p>Website Admin : www.vidorizki.id</p>
      <p>Whatsapp : 0896 3573 7814</p>
      <p>Telegram : t.me/vidorizki</p>
    <br />

  </section>   
</main>

4. Save halaman dan publikasikan.

Silahkan memodifikasinya agar cocok dipasang di template yang kamu pakai.

Oke mungkin itu saja untuk tutorial blog kali ini hehehe, capek juga kalo buat yang panjang panjang :v, Sekian artikel tentang Membuat Halaman About ala IDGretongers di Blog, semoga bermanfaat jangan lupa untuk Like Fanspage, Share dan Komen.