Blogspot 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 menegenai pemilik blog. Yang juga terdapat beberapa link sosial media dan contact milik pemilik 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 begitu begitu saja, kuran keren dan kurang menarik. Untuk itu, kali ini albabbarrosa akan meberikan sedikit tutorial cara membuat widget profil atau author box di blogspot.

Widget Profil / Author Style 1

Cara membuatnya tidak begitu sulit, langkahnya adalah :

1. Pada Dashbord Blog kamu, Masuk ke menu Tata Letak
2. Klik tambahkan widget pada sidebar ataupun footer
3. Pilih HTML/Java Script
4. Kemudian Pastekan kode berikut pada kolom konten html javascript

<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: 18px;
}

button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
}

a {
  text-decoration: none;
  font-size: 22px;
  color: black;
}

button:hover, a:hover {
  opacity: 0.7;
}
</style>


<h2 style="text-align:center">Tentang Penulis</h2>

<div class="card">
  <img src="/w3images/team2.jpg" alt="John" style="width:100%">
  <h1>albabbarrosa</h1>
  <p class="title">CEO & Founder, Example</p>
  <p>Institus Tukang Bangunan</p>
  <div style="margin: 24px 0;">
    <a href="#"><i class="fa fa-dribbble"></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> 
  </div>
  <p><button>Contact</button></p>
</div>

5. Ganti yang perlu diganti sesuai dengan keinginan Kamu
6. Simpan dan terapkan

Rentetan kode html header biasanya di awali dengan <div class=’header-menu’>, atau kode lain yang hampir mirip. Dan ditutup dengan tag </div>.

 /* Sidebar Menu */
 .mline1, .mline2, .mline3 {
  position: absolute;
  right: 0px;
  display: block;
  height: 3px;
  width: 22px;
  background: #111;
  content:'';
  border-radius: 5px;
  transition: all 0.2s;
 }
 .mline1 {
  top: 0;
  width : 13px;
 }
 .mline2 {
        height:15px;
  top: 7px;
 }
 .mline3 {
  top: 14px;
 }
#css-menu{position:fixed;top:0px;width:200PX;left:0;z-index:9999;
background:#fff;height:100%;transition:all .4s ease-in-out;box-shadow:0 2px 5px 0 rgba(0,0,0,.12),0 2px 10px 0 rgba(0,0,0,.09)}
a.blanter-back{position:inherit!important;width:20px;height:20px;padding:13px;z-index:99}
#cssmenu,#cssmenu ul{margin:0;padding:0;border:0;list-style:none;font-weight:400;text-decoration:none;line-height:1;
font-family:'Roboto',sans-serif;font-size:14px;position:relative;text-align:left}
#cssmenu a{line-height:1.3;padding:12px 15px}#cssmenu ul li{cursor:pointer;background:#fff}
#cssmenu ul li a{font-size:13.5px;display:block;color:#777;background:#fff;padding:12px 15px;margin:3px 10px 3px 0;
font-weight:500;border-top-right-radius:20px;border-bottom-right-radius:20px}
#cssmenu ul li a:hover{text-decoration:none;background:#eee}
#cssmenu ul li.active,#cssmenu ul li.active a{background:#eee}#cssmenu ul li.home a:hover{background:#fff}
#sidebar-css h2:hover{color:#039be5}#cssmenu ul li.home{background:#fff;overflow:hidden;color:#444;font-size:18px;font-weight:700;padding:0;
display:block;border-bottom:1px solid #eee}
#cssmenu ul li.has-sub > a:after{content:'f105';font-family:FontAwesome;float:right}
#cssmenu ul li.has-sub.active > a:after{content:'f107';font-family:FontAwesome;float:right}
#cssmenu ul ul{padding:0;display:none;background:#eee}
#cssmenu ul ul li a{color:#777;margin:0;border-radius:0;font-weight:400;padding:10px 10px 10px 48px;background:#eee}
#cssmenu ul ul li a:hover{background:#ddd}#css-menu.slide{left:-340px}#content-wrapper.slide{padding-left:0}
#css-menu.disable{left:0!important}#css-menu h3,#css-menu p{padding:0;margin:0}
#css-menu .profilemenu{padding:20px 15px 10px;height:105px;
background:#eee url(https://2.bp.blogspot.com/-mSuNfO8orf4/WVT7CZ7s18I/AAAAAAAAGj0/sBqJmU0AQnovb-wtAO_ImWRN3dY45A50ACLcBGAs/s1600/MasignAlphaSteelcoders.png)repeat;color:#444;
line-height:1.9;z-index:10;background-size:100%}
#css-menu h3{font-size:13px;font-weight:700;color:#222}#css-menu p{font-size:12px}
#css-menu img{width:50px;height:50px;border-radius:100%}#info2{float:right;border-radius:100%;padding:5px!important;
height:24px;margin-top:-3px;color:#666}
transition:all .7s ease-in-out;z-index:9;overflow:hidden;left:-200px;opacity:0}
#navmenu2 li i{float:left;margin-right:10px;font-size:18px}
#navmenu2{transition:all .4s ease-in-out}#nav-menu1.shows{visibility:visible;height:auto;left:0;opacity:1}
#navmenu2.shows{visibility:hidden;margin-left:-20px;opacity:0}
/* End Sidebar Menu */

<div id='css-menu' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<div id='cssmenu'>
<div class='profilemenu'>
<img expr:alt='data:blog.title' expr:title='data:blog.title' src='gambar'/>
<h3><data:blog.title/></h3>
<a class='ripple' href='javascript:;' id='info2'></a>
<p>JUSTRYWOY.</p>
</div>
<ul id='navmenu2'>
<li><a  href='/' itemprop='url' title='Home'><span itemprop='name'>Home</span></a></li>
<li class='has-sub'><a href='#' title='Apps'><span itemprop='name'>Apps</span></a>
<ul>
<li><a  href='#' title='Themes'><span itemprop='name'>Themes</span></a></li>
<li><a  href='#' title='Layout'><span itemprop='name'>Layout</span></a></li>
<li><a  href='#' title='Settings'><span itemprop='name'>Settings</span></a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class='clear'/>

Paste kode di bawah ini, di bagian kode header menu kamu, atau kamu bisa letakkan dimana saja, namun saya sarankan di bagian header kamu.

<div class='button'>
<span class='mline1' onclick='sidebarbutton()'/>
<span class='mline2' onclick='sidebarbutton()'/>
<span class='mline3' onclick='sidebarbutton()'/>
</div>

Punya saya, saya taruh di atas kode search, yang berada di rentetan kode hedaer menu. agar tombol menu bisa berada di bagian header menu blog.

<script type='text/javascript'>
function sidebarbutton() {  var x = document.getElementById("css-menu");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>