Modifikasi ID Card Responsive Untuk Halaman About Us Blogger

agung wisudhatama June 10, 2023 2 Komentar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Modifikasi ID Card Responsive untuk Tim Perancang Blogger

ID CARD adalah tanda pengenal dan identitas seseorang. Penggunaannya bisa dilakukan pada Name Tag yang diberi gantungan tali atau penjepit pada saku baju seragam. Kegunaan ID Card bagi sebuah perusahaan menjadi sangat penting karena dapat mengidentifikasi seluruh karyawan yang ada di perusahaan tersebut. Mahfum juga bagi para Blogger, sebuah ID Card menentukan identitas siapakah dibalik pemilik Blog tersebut.

Untuk itu saya akan memodifikasi sebuah ID Card yang bisa ditampilkan pada halaman About Us Blogspot. Seperti pada About Us di website ini. Tapi tampilannya berbeda sama sekali dengan yang ada disini. Karena nanti bentuk dari ID Card ini berbentuk seperti Name Tag yang ada sekarang ini. Saya ambil warna ungu ketika dihover ya. Kalau ingin warna lain juga bisa dan kalian tinggal cari warna yang ada di artikel ini ya Kode Warna HTML. Disitu banyak sekali warna dan kalian tinggal copy paste kode yang tertera pada warnanya. Simple bukan?

Baca Juga :

About me sendiri atau banyak juga yang menyebutnya sebagai tentang penulis dalam blog adalah biografi sederhana dari sang pemilik blog tersebut. Isinya beragam, mulai tentang seputar blog dan penulisnya. Bahkan ada juga yang hanya menjelaskan serta menjabarkan profil singkat dari penulisnya mulai dari hobby, pekerjaan, status dan sebagainya. Hal ini bertujuan agar sifat tulisan nanti tidak anonim, terlebih lagi akan sangat penting jika kita adalah seorang blogger.

Memang tidak perlu dikenal banyak orang, tetapi paling tidak brand nama blog sendiri sudah kalian jabarkan secara ringkas dalam halaman About Me. Dengan demikian, jika ada penerbit yang merasa cocok dengan tulisan kalian maka tidak akan menutup kemungkinan sang penerbit akan menghubungi melalui kontak di halaman about me pada Halaman Blog.

Okelah sekarang kita akan membuat About Me.

Caranya :

1. Masuk ke Dashboard Blogger
2. Pilih Tema
3. Klik Sesuaikan : Edit HTML ini langsung masuk ke template
4. Cari kode ]]></b:skin> dan tempelkan kode dibawah ini diatas kode ]]></b:skin> tadi.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  background-color: #f5f5f5;
}
.row {
  display: flex;
  flex-wrap: wrap;
  padding: 2em 1em;
  text-align: center;
}
.column {
  width: 100%;
  padding: 0.5em 0;
}
h1 {
  width: 100%;
  text-align: center;
  font-size: 3.5em;
  color: #1f003b;
}
.card {
  box-shadow: 0 0 2.4em rgba(25, 0, 58, 0.1);
  padding: 3.5em 1em;
  border-radius: 0.6em;
  color: #1f003b;
  cursor: pointer;
  transition: 0.3s;
  background-color: #ffffff;
}
.card .img-container {
  width: 8em;
  height: 8em;
  background-color: #a993ff;
  padding: 0.5em;
  border-radius: 50%;
  margin: 0 auto 2em auto;
}
.card img {
  width: 100%;
  border-radius: 50%;
}
.card h3 {
  font-weight: 500;
}
.card p {
  font-weight: 300;
  text-transform: uppercase;
  margin: 0.5em 0 2em 0;
  letter-spacing: 2px;
}
.icons {
  width: 50%;
  min-width: 180px;
  margin: auto;
  display: flex;
  justify-content: space-between;
}
.card a {
  text-decoration: none;
  color: inherit;
  font-size: 1.4em;
}
.card:hover {
  background: linear-gradient(#6045ea, #8567f7);
  color: #ffffff;
}
.card:hover .img-container {
  transform: scale(1.25);
}
@media screen and (min-width: 768px) {
  section {
    padding: 1em 7em;
  }
}
@media screen and (min-width: 992px) {
  section {
    padding: 1em;
  }
  .card {
    padding: 5em 1em;
  }
  .column {
    flex: 0 0 33.33%;
    max-width: 33.33%;
    padding: 0 1em;
  }
}

Selanjutnya
5. Tempelkan kode dibawah ini di Tata Letak blogger. Dan kemudian save aja ya.

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ID Card Responsive</title>
    <!-- Font Awesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
    />
    <!-- Google Font -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <section>
      <div class="row">
        <h1>Tim Kami</h1>
      </div>
      <div class="row">
        <!-- Column 1-->
        <div class="column">
          <div class="card">
            <div class="img-container">
              <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCf6cprDLrbWLGC6jkcDlrCptK2sRiKJ-fmVqdvxKwRKbwj0i6jeC-M89F57YjWGW5vNsM0GkMnG2fpPbqA4WzjYPZkNsS0OGXLKtD8t0l-Vt7hbnNKz3GZF_KFHIuh-pNMHe57N5PdUOufgc4Kh97YzK0bO2v-fyb-rnpsbty1odbS2HxygJuse9M/s200/LOGO%20GNEWS.png" />
            </div>
            <h3>Agung Wiz</h3>
            <p>Pendiri</p>
            <div class="icons">
              <a href="#">
                <i class="fab fa-twitter"></i>
              </a>
              <a href="#">
                <i class="fab fa-linkedin"></i>
              </a>
              <a href="#">
                <i class="fab fa-github"></i>
              </a>
              <a href="#">
                <i class="fas fa-envelope"></i>
              </a>
            </div>
          </div>
        </div>
        <!-- Column 2-->
        <div class="column">
          <div class="card">
            <div class="img-container">
              <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCf6cprDLrbWLGC6jkcDlrCptK2sRiKJ-fmVqdvxKwRKbwj0i6jeC-M89F57YjWGW5vNsM0GkMnG2fpPbqA4WzjYPZkNsS0OGXLKtD8t0l-Vt7hbnNKz3GZF_KFHIuh-pNMHe57N5PdUOufgc4Kh97YzK0bO2v-fyb-rnpsbty1odbS2HxygJuse9M/s200/LOGO%20GNEWS.png" />
            </div>
            <h3>Ria SH</h3>
            <p>Pengembang</p>
            <div class="icons">
              <a href="#">
                <i class="fab fa-twitter"></i>
              </a>
              <a href="#">
                <i class="fab fa-linkedin"></i>
              </a>
              <a href="#">
                <i class="fab fa-github"></i>
              </a>
              <a href="#">
                <i class="fas fa-envelope"></i>
              </a>
            </div>
          </div>
        </div>
        <!-- Column 3-->
        <div class="column">
          <div class="card">
            <div class="img-container">
              <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCf6cprDLrbWLGC6jkcDlrCptK2sRiKJ-fmVqdvxKwRKbwj0i6jeC-M89F57YjWGW5vNsM0GkMnG2fpPbqA4WzjYPZkNsS0OGXLKtD8t0l-Vt7hbnNKz3GZF_KFHIuh-pNMHe57N5PdUOufgc4Kh97YzK0bO2v-fyb-rnpsbty1odbS2HxygJuse9M/s200/LOGO%20GNEWS.png" />
            </div>
            <h3>Alifa Shanum</h3>
            <p>Desainer</p>
            <div class="icons">
              <a href="#">
                <i class="fab fa-twitter"></i>
              </a>
              <a href="#">
                <i class="fab fa-linkedin"></i>
              </a>
              <a href="#">
                <i class="fab fa-github"></i>
              </a>
              <a href="#">
                <i class="fas fa-envelope"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  </body>
</html>

Oke untuk demo akan saya sertakan dibawah ini ya. Silakan dilihat dulu, bila cocok silakan lanjut praktek, tapi jangan lupa Back Up template kalian dulu.

ID CARD

Oke teman-teman. Gampang sekali bukan. Sebenarnya tidak ada yang sulit kalau kalian mau memahami bagian per bagian dari blog beserta HTMLnya. Nah setelah itu cobalah untuk mempelajari CSS. Insyaallah tidak sulit kok menerapkan tutorial yang ada di website ini. Karena dengan ketekunan dan kedisiplinan, maka semua hal yang sulit akan menjadi mudah. Tapi harus dibarengi dengan minat dan bakat juga lho ya. Kalau tidak punya minat dan ketertarikan dengan dunia perbloggeran, saya rasa hal itu tidak akan terwujud. So, jadikan pribadimu pribadi yang haus akan ilmu pengetahuan. "Jika kamu hanya bertahan di zona nyaman, maka kamu tak akan pernah tahu banyak hal. Jadi jangan pernah takut untuk mencoba hal-hal baru!" Silakan edit blognya lagi. Salam Blogger.

Bagikan ke teman-teman kamu

Label Postingan : CSS , Tips Blog

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Modifikasi ID Card Responsive Untuk Halaman About Us Blogger . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.

2 comments

Leading Our FeshionJune 12, 2023 at 2:59 PM
Keren juga ya... mau dicoba di blog saya. Terimakasi..
agung wisudhatamaJune 16, 2023 at 6:30 PM
Sama-sama mas Leading Our Feshion .. amiiin .. tutorial yang bermanfaat ya mas .. semoga berhasil utak-atik blognya .. semoga makin keren deh ..

Pesan berupa SPAM, Sara, Iklan, Pornografi, Broken link dan Link Aktif akan kami hapus. Berkomentarlah dengan sopan dan mengikuti panduan mengemukakan pendapat yang baik.
EmoticonEmoticon