Cara Membuat Widget Author Profile di Blogger


Ilmuinternet.com - Widget dalam sebuah blog biasanya berisi sebuah alat, atau informasi yang ingin ditampilkan kepada pengunjung blog. Widget sendiri umumnya terletak di bagian sidebar. Namun tak jarang juga widget berada di header ataupun di footer.

Platform Blogger sudah menyediakan berbagai macam widget untuk di tampilkan di blog kita. Ada widget popular post, widget html script, widget jam, widget kategori dll. Dan salah satu widget yang harus ada di blog kamu adalah widget profil carad atau author box.

Widget profil card atau auhtor box biasanya berisikan informasi sekilas tentang pemilik blog. Terdapat beberapa link sosial media dan contact milik penulis blog. Dengan begitu pengunjung bisa dengan mudah jika ingin menghubungi pemilik blog secara pribadi.

Kamu tak perlu kesulitan dalam membuat widget profil / author. Blogspot sudah menyiapkan widget profil, kamu bisa mengaksesnya di Setting > Tata Letak > Tambah Widget > Cari dan pasanglah widget profil.

Hanya saja tampilan yang diberikan sangat sederhana atau biasa saja, kurang keren dan kurang menarik. Untuk itu, kali ini Ilmu Internet akan meberikan sedikit tutorial cara membuat widget profil atau author box di blogspot.


Langkah-langkah Membuat Widget Profile di Blogger:

  1. Pada Dashbord Blog kamu, buka menu Tata Letak
  2. Klik Tambahkan Gadget/Widget pada sidebar ataupun footer
  3. Pilih HTML/Java Script
  4. Kemudian Pastekan kode berikut ke dalamnya
  5. /* SYNTAX HIGHLIGHTER */
    <style>
    .card {
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      max-width: 300px;
      margin: auto;
      text-align: center;
      font-family: arial;
    }
    
    .title {
      color: grey;
      font-size: 14px;
    }
    
    button {
      border: none;
      outline: 0;
      display: inline-block;
      padding: 8px;
      color: white;
      background-color: #008C5F;
      text-align: center;
      cursor: pointer;
      width: 100%;
      font-size: 14px;
    }
    
    a {
      text-decoration: none;
      font-size: 18px;
      color: black;
    }
    
    button:hover, a:hover {
      opacity: 0.7;
    }
    </style>
    
    
    <h2 style="text-align:center">Tentang Penulis</h2>
    
    <div class="card">
      <img src="https://1.bp.blogspot.com/-xkTZ4OIaESA/YVKYK3aS6lI/AAAAAAAACJ0/FQMOnSW-EFUGbzVxhqp4lAjBuIAaPB4FQCLcBGAsYHQ/s320/Uzumaki%2BNaruto.PNG" alt="John" style="width:100%">
      <h1>Uzumaki Naruto</h1>
      <p class="title">CEO, Founder & Example</p>
      <p>Desa Konoha Kagure</p>
      <div style="margin: 24px 0;">
        <a href="#"><i class="fa fa-dribbble"></i></a> 
        <a href="#"><i class="fa fa-pinterest"></i></a> 
        <a href="#"><i class="fa fa-twitter"></i></a>  
        <a href="#"><i class="fa fa-linkedin"></i></a>  
        <a href="#"><i class="fa fa-facebook"></i></a> 
        <a href="#"><i class="fa fa-google-plus"></i></a> 
        <a href="#"><i class="fa fa-youtube"></i></a> 
      </div>
      <p><button>Contact Us</button></p>
    </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("//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");loadCSS("https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700");
    //]]>
    </script>
    

  6. Ganti yang perlu diganti sesuai dengan keinginan Kamu
  7. Simpan dan lihat hasilnya


Akhir Kata

Dengan adanya widget profil / author box di blogger ini, kamu dapat memberi informasi tentang penulis kepada pengunjung blog yang sedang membaca artikel kamu. Selain untuk menampilkan informasi pemilik, blog kamu terlihat lebih profesional dan keren.

Widget profil tersebut dapat kamu edit sendiri sesuai keinginan, oh iya saya juga menyediakan tools Html Editor untuk menunjang pengeditan kode html widget profil diatas secara online. Demikian postingan tentang tutorial blogger semoga bermanfaat.



Artikel Menarik Lainnya

Komentar

Posting Komentar