Widget Profile Alternatif Untuk Blogger Maupun Wordpress

  • Diterbitkan pada
  • June 29, 2020
  • Diposkan oleh
  • Eka Awaludin
Lokasi: Cicalung, Maja, Kabupaten Majalengka, Jawa Barat, Indonesia
Kali ini saya akan berbagi widget Profile buat di tempel di sidebar blog. Widget ini berbasis HTML & CSS dan tidak membuat blog berat. Beberapa waktu yang lalu ketika sedang ngulik widget profil bawaan Blogger, saya kepikiran untuk membuat tutorialnya.

Tapi setelah di pikir-pikir mending bikin yang versi HTML nya aja biar bisa di terapkan dengan mudah di platform mana aja. Sejauh ini saya udah nyoba masang widget ini di Blogger dan Wordpress, dan widget nya bisa tampil dengan baik.

Demo Widget Profile

Manteman yang mengunjungi postingan ini pasti niatnya pengen tau dulu widget nya, terus liat-liat cocok apa engga. Oke saya mau kasih liat dulu widget nya biar manteman ga penasaran.
Screenshot tampilan widget Profile HTML
Untuk melihat widget Profile secara langsung, manteman bisa mengunjungi halaman demo nya di Codepen. Setelah di pasang nanti, widget Profile ini ukuran lebar nya responsive atau fleksibel mengikuti lebar sidebar.

Kode HTML & CSS Widget Profile

Berikut adalah kode nya.
<style type="text/css">
/*<![CDATA[*/
#profilecard-frame{display:flex;width:100%;height:546px}#profilecard-frame #profilecard{float:left;width:100%;height:100%;position:relative}#profilecard-frame #profilecard #profilecard-img{height:100%;overflow:hidden}#profilecard-frame #profilecard #profilecard-img img{object-fit:cover;height:100%;width:100%;margin:0;padding:0}#profilecard-frame #profilecard #profilecard-gradien{background-image:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.85));height:100%;width:100%;position:absolute;bottom:0}#profilecard-frame #profilecard #profilecard-gradien #lc-title-desc-frame{position:absolute;bottom:0;width:calc(100% - 40px);padding:20px}.profilecard-email a:link,.profilecard-wa a:link{color:#fff;text-decoration:none;box-shadow:none;}.profilecard-email a:hover,.profilecard-email a:hover:visited,.profilecard-wa a:hover,.profilecard-wa a:hover:visited{color:#fff;text-decoration:underline}.profilecard-wa .profilecard-email a:visited{color:#fff;text-decoration:none}#profilecard-frame #profilecard #profilecard-gradien #lc-title-desc-frame .profilecard-title-intro{margin:0}#profilecard-frame #profilecard #profilecard-gradien #lc-title-desc-frame .profilecard-title-intro h2{color:#fff;font-family:Poppins,sans-serif;text-align:left;text-transform:none;font-size:xx-large;font-weight:700;padding:0 0 20px 0;border:0;margin:0}#profilecard-frame #profilecard #profilecard-gradien #lc-title-desc-frame .profilecard-desc-intro{color:#fff;padding:0 0 20px 0;line-height:1.3;font-family:Roboto,sans-serif;font-size:medium}#profilecard-frame #profilecard #profilecard-gradien #lc-title-desc-frame .profilecard-email{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,15C12.81,15 13.5,14.7 14.11,14.11C14.7,13.5 15,12.81 15,12C15,11.19 14.7,10.5 14.11,9.89C13.5,9.3 12.81,9 12,9C11.19,9 10.5,9.3 9.89,9.89C9.3,10.5 9,11.19 9,12C9,12.81 9.3,13.5 9.89,14.11C10.5,14.7 11.19,15 12,15M12,2C14.75,2 17.1,3 19.05,4.95C21,6.9 22,9.25 22,12V13.45C22,14.45 21.65,15.3 21,16C20.3,16.67 19.5,17 18.5,17C17.3,17 16.31,16.5 15.56,15.5C14.56,16.5 13.38,17 12,17C10.63,17 9.45,16.5 8.46,15.54C7.5,14.55 7,13.38 7,12C7,10.63 7.5,9.45 8.46,8.46C9.45,7.5 10.63,7 12,7C13.38,7 14.55,7.5 15.54,8.46C16.5,9.45 17,10.63 17,12V13.45C17,13.86 17.16,14.22 17.46,14.53C17.76,14.84 18.11,15 18.5,15C18.92,15 19.27,14.84 19.57,14.53C19.87,14.22 20,13.86 20,13.45V12C20,9.81 19.23,7.93 17.65,6.35C16.07,4.77 14.19,4 12,4C9.81,4 7.93,4.77 6.35,6.35C4.77,7.93 4,9.81 4,12C4,14.19 4.77,16.07 6.35,17.65C7.93,19.23 9.81,20 12,20H17V22H12C9.25,22 6.9,21 4.95,19.05C3,17.1 2,14.75 2,12C2,9.25 3,6.9 4.95,4.95C6.9,3 9.25,2 12,2Z' fill='%23fff'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:0 2px;background-size:18px;padding:0 0 0 25px;line-height:1.3;font-family:Roboto,sans-serif;font-size:medium}#profilecard-frame #profilecard #profilecard-gradien #lc-title-desc-frame .profilecard-wa{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91C2.13 13.66 2.59 15.36 3.45 16.86L2.05 22L7.3 20.62C8.75 21.41 10.38 21.83 12.04 21.83C17.5 21.83 21.95 17.38 21.95 11.92C21.95 9.27 20.92 6.78 19.05 4.91C17.18 3.03 14.69 2 12.04 2M12.05 3.67C14.25 3.67 16.31 4.53 17.87 6.09C19.42 7.65 20.28 9.72 20.28 11.92C20.28 16.46 16.58 20.15 12.04 20.15C10.56 20.15 9.11 19.76 7.85 19L7.55 18.83L4.43 19.65L5.26 16.61L5.06 16.29C4.24 15 3.8 13.47 3.8 11.91C3.81 7.37 7.5 3.67 12.05 3.67M8.53 7.33C8.37 7.33 8.1 7.39 7.87 7.64C7.65 7.89 7 8.5 7 9.71C7 10.93 7.89 12.1 8 12.27C8.14 12.44 9.76 14.94 12.25 16C12.84 16.27 13.3 16.42 13.66 16.53C14.25 16.72 14.79 16.69 15.22 16.63C15.7 16.56 16.68 16.03 16.89 15.45C17.1 14.87 17.1 14.38 17.04 14.27C16.97 14.17 16.81 14.11 16.56 14C16.31 13.86 15.09 13.26 14.87 13.18C14.64 13.1 14.5 13.06 14.31 13.3C14.15 13.55 13.67 14.11 13.53 14.27C13.38 14.44 13.24 14.46 13 14.34C12.74 14.21 11.94 13.95 11 13.11C10.26 12.45 9.77 11.64 9.62 11.39C9.5 11.15 9.61 11 9.73 10.89C9.84 10.78 10 10.6 10.1 10.45C10.23 10.31 10.27 10.2 10.35 10.04C10.43 9.87 10.39 9.73 10.33 9.61C10.27 9.5 9.77 8.26 9.56 7.77C9.36 7.29 9.16 7.35 9 7.34C8.86 7.34 8.7 7.33 8.53 7.33Z' fill='%23fff'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:0 11px;background-size:18px;padding:10px 0 0 25px;line-height:1.3;font-family:Roboto,sans-serif;font-size:medium}#profilecard-frame #profilecard #profilecard-gradien #lc-title-desc-frame .profilecard-loc{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,12.5A1.5,1.5 0 0,1 10.5,11A1.5,1.5 0 0,1 12,9.5A1.5,1.5 0 0,1 13.5,11A1.5,1.5 0 0,1 12,12.5M12,7.2C9.9,7.2 8.2,8.9 8.2,11C8.2,14 12,17.5 12,17.5C12,17.5 15.8,14 15.8,11C15.8,8.9 14.1,7.2 12,7.2Z' fill='%23fff'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:0 11px;background-size:18px;padding:10px 0 0 25px;color:#fff;line-height:1.3;font-family:Roboto,sans-serif;font-size:medium}
/*]]>*/
</style>    
<div id="profilecard-frame">
  <div id="profilecard">
    <div id="profilecard-img">
      <img alt="Profile" height="546" src="https://rawcdn.githack.com/ekaawaludin/ekka/7470af3c264e12fd59667b66abb4c74d8d8fcd48/img/taylor-AwdOu2z4Eqc-unsplash.jpg" width="546"/>
    </div>
    <div id="profilecard-gradien">
      <div id="lc-title-desc-frame">
        <div class="profilecard-title-intro">
          <h2>Get in touch.</h2>
        </div>
        <div class="profilecard-desc-intro">My name is taylor from Unsplash.</div>
        <div class="profilecard-email">
          <a href="mailto:email@email.com">email@email.com</a>
        </div>
        <div class="profilecard-wa">
          <a href="https://api.whatsapp.com/send?phone=123456789101&amp;text=Hello,%20there.">+123456789101</a>
        </div>
        <div class="profilecard-loc">Cape Girardeau, United States</div>
      </div>
    </div>
  </div>
</div>
Di kode tersebut secara default berisi info random, silahkan di rubah sesuai dengan biodata manteman. Saya tandai info yang harus di ubah dengan warna oranye. Untuk ukuran background foto profil nya bebas, tapi saya sarankan berukuran tinggi 546px dan untuk lebarnya sesuaikan dengan lebar sidebar. Tapi jika manteman ga tau lebar sidebar nya, buat fotonya jadi 546x546 pixel aja. Oia pastikan di foto, posisi manteman berada di tengah, karena widget ini akan otomatis crop foto di tengah-tengah.

Cara Pasang Widget Profile

Blogger

Pertama instal dulu Google Font. Sebenarnya Google Font ini opsional, tapi saya sarankan untuk menginstalnya agar hasilnya maksimal. Di Dashboard pilih Tema, kemudian masuk ke edit HTML, temukan kode <head> kemudian tambahkan kode berikut ini di bawah kode tersebut.
<link href='https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&amp;family=Roboto:wght@400;700&amp;display=swap' rel='stylesheet'/>
Setelah selesai, keluar dan menuju dashboard lagi. Di dashboard pilih Tata Letak atau Layout, kemudian di bagian sidebar Tambahkan Gadget. Pilih gadget HTML/JavaScript lalu masukan semua kode widget Profile nya. Jangan lupa edit infonya jadi biodata manteman ya, lalu simpan.

Wordpress Self-Hosted

Di dashboard wordpress, hover ke menu Appearance kemudian pilih Widgets. Di halaman Widgets pilih Custom HTML dan pilih sidebar. Masukan semua kode widget Profile nya. Jangan lupa edit infonya jadi biodata manteman ya, lalu simpan.

Saya tidak tau bagaimana cara menginstal Google Font di wordpress. Ketika saya menginstal kode ini di widget wordpress, widget nya tampil dengan baik tanpa instal Google Font. Hmm, mungkin di wordpress sudah terinstal Google Font secara bawaan ya. Saya ga tau pasti karena saya newbie dalam dunia wordpress. 😅

Conclusion

Sejauh ini saya hanya mencoba widget ini di Blogger dan Wordpress. Di kedua platform tersebut widget ini tampil dengan sempurna. Apabila ada kendala atau ada yang ingin di tanyakan mengenai widget Profile ini, jangan sungkan untuk bertanya di kolom komentar ya.
Click to Expand