Cara Membuat Author Box Keren Dengan CSS3

Sebelumnya saya sudah pernah menulis mengenai cara membuat kotak admin pada blogger, namun kali ini saya akan membagikan cara untuk membuat author box. Author Box berguna untuk menampilkan sedikit cuplikan tentang author blog, dan sedikit descripsi mengenai posting yang telah dibaca. author box ini dibuat dengan kode css3 yang cukup unik, dilengkapi dengan, foto author, label author, 7 buah social ikon, author bio, posting yang telah di baca, dan sebagai pelengkap, efek transisi pada gambar, yang dibuat seunik mungkin dan lebih baru dari yang lain.

Cara Menambahkan Author Box Keren Dengan CSS3

Silahkan Masuk Ke Akun Blogger Anda.
Setelah itu, Klik Menu Template, --> simpan terlebih dahulu template yang anda gunakan, --> Klik Tombol Edit HTML.
Kemudian, Cari Kode ]]></b:skin> dengan menekan CTRL+F.
Tambahkan kode CSS berikut ini di atas kode ]]></b:skin> :

/* Author Box YBB
----------------------------------------------- */

.YBBpostauthorbox {
  position:relative;
  margin:5px auto;
  padding:15px;
  width:600px;
  min-height:170px;
  font:14px Trebuchet MS,sans-serif;
  text-align:justify;
  text-shadow:1px 0 0 #000000;
  background:#AFB0B0;
  background:-moz-linear-gradient(top,#AFB0B0 0%,#8B8B8B 15%,#656565 36%,#8B8B8B 86%,#8B8B8B 99%,#AFB0B0 100%);
  background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#AFB0B0),color-stop(15%,#8B8B8B),color-stop(36%,#656565),color-stop(86%,#8B8B8B),color-stop(99%,#8B8B8B),color-stop(100%,#AFB0B0));
  background:-webkit-linear-gradient(top,#AFB0B0 0%,#8B8B8B 15%,#656565 36%,#8B8B8B 86%,#8B8B8B 99%,#AFB0B0 100%);
  background:-o-linear-gradient(top,#AFB0B0 0%,#8B8B8B 15%,#656565 36%,#8B8B8B 86%,#8B8B8B 99%,#AFB0B0 100%);
  background:-ms-linear-gradient(top,#AFB0B0 0%,#8B8B8B 15%,#656565 36%,#8B8B8B 86%,#8B8B8B 99%,#AFB0B0 100%);
  background:linear-gradient(top bottom,#AFB0B0 0%,#8B8B8B 15%,#656565 36%,#8B8B8B 86%,#8B8B8B 99%,#AFB0B0 100%);
  filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#AFB0B0',endColorstr='#AFB0B0',GradientType=0 );
  border:4px solid #333;
  padding:10px 15px 10px 15px;
  -webkit-box-shadow:inset -5px -9px 100px -18px #333;
  -moz-box-shadow:inset -5px -9px 100px -18px #333;
  -o-box-shadow:inset -5px -9px 100px -18px #333;
  -ms-box-shadow:inset -5px -9px 100px -18px #333;
  box-shadow:inset -5px -9px 100px -18px #333;
  -webkit-border-radius:7px;
  -moz-border-radius:7px;
  -o-border-radius:7px;
  -ms-border-radius:7px;
  border-radius:7px;
  background-color:#000000;
  color:#EBEBEB;
  font-size:14px;
  -ms-border-radius:1.0em;
}

.YBBpostauthoravatar {
  background:#fff;
  border:1px solid #D3D3D3;
  float:left;
  height:128px;
  width:128px;
  padding:5px;
  position:relative;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  -webkit-box-shadow:0 0 4px 0 #d9d9d9;
  -moz-box-shadow:0 0 4px 0 #d9d9d9;
  box-shadow:0 0 4px 0 #d9d9d9;
}

.YBBpostauthoravatar img {
  height:128px;
  width:128px;
  border-radius:5px;
  opacity:0.5;
  -moz-transition:all 0.5s ease-out;
  -o-transition:all 0.5s ease-out;
  -webkit-transition:all 0.5s ease-out;
  -ms-transition:all 0.5s ease-out;
  transition:all 0.5s ease-out;
}

.YBBpostauthoravatar:hover img {
  opacity:1;
}

.YBBpostauthorlabel {
  background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz4_zNUdeqo7onMDimA67lY2l3-aqx1Y2YOkmumocVIJVw6Kmx_JUoAHOmnNKSgoqj9KxZ7ocu0xtuqScQjv0VdNcZX-HFBHKViMGMX0KM71Sf_f4ulTaLy4VY1KtNVG9DyDKhaofNVt7K/s1600/admin.png") no-repeat center transparent;
  display:block;
  height:30px;
  position:absolute;
  bottom:-35px;
  width:128px;
}

.YBBpostauthorcontent {
  margin-left:160px;
}

.YBBpostauthorhead {
  border-bottom:1px solid #c4c4c4;
  margin-bottom:5px;
  padding:0 0 10px 0;
  position:relative;
}

.YBBpostauthorbox h5 {
  font-family:Trebuchet MS;
  color:#EBEBEB;
  font-size:25px;
  font-weight:normal;
  line-height:30px;
  margin:0;
  border:none;
  text-transform:none;
  text-decoration:none;
  -webkit-transition:all 0.2s ease-in-out;
  -moz-transition:all 0.2s ease-in-out;
  -ms-transition:all 0.2s ease-in-out;
  -o-transition:all 0.2s ease-in-out;
  transition:all 0.2s ease-in-out;
}

.YBBpostauthorbox h5 a {
  color:#EBEBEB !important;
  text-decoration:none;
  -webkit-transition:all 0.2s ease-in-out;
  -moz-transition:all 0.2s ease-in-out;
  -ms-transition:all 0.2s ease-in-out;
  -o-transition:all 0.2s ease-in-out;
  transition:all 0.2s ease-in-out;
}

.YBBpostauthorbox h5 a:hover {
  color:#A1A1A1 !important;
  -webkit-transition:all 0.2s ease-in-out;
  -moz-transition:all 0.2s ease-in-out;
  -ms-transition:all 0.2s ease-in-out;
  -o-transition:all 0.2s ease-in-out;
  transition:all 0.2s ease-in-out;
}

.YBBpostauthorbox p.postAuthorbio {
  line-height:18px;
  font:14px Trebuchet MS,sans-serif;
  text-align:justify;
  color:#111;
}

.YBBpostauthorbox p a {
  color:#E65002;
}

.YBBpostauthorbox-footer {
  padding:10px 0;
  font:bold 12px Trebuchet MS;
}

#social,
#social li {
  list-style:none;
  float:left;
  margin:0;
  padding:0;
}

#social {
  margin-left:5px;
}

#social li {
  position:relative;
  padding:0 3px;
}

#social li:active {
  top:1px;
}

#social a {
  line-height:25px;
  display:block;
  font-size:0;
  text-indent:-9999px;
  width:25px;
  height:25px;
  background-color:#3F3F3F;
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisdoKChEyZcFTLeusLa_5gFAFdsE8NjrncoywC-a1fkI9qRy8JU8VHeE9vZEGQG1rZ2fn3NVHC-IeN8nZlS-WPGEVBDYTIatO8HCAX_xNtsO355m0lwvpy2B6g02s4KYH1VzwS-_TWJgmN/s1600/social_icons.png);
  background-position:0 0;
  background-repeat:no-repeat;
  -moz-border-radius:9999px;
  -webkit-border-radius:9999px;
  border-radius:9999px;
}

#social a.fbisocial {
  background-position:-25px 0;
}

#social a.fbisocial:hover {
  background-color:#0166E6;
  -webkit-transition:all .3s ease-in;
  -moz-transition:all .3s ease-in;
  -o-transition:all .3s ease-in;
  transition:all .3s ease-in;
}

#social a.twisocial {
  background-position:0 0;
}

#social a.twisocial:hover {
  background-color:#2ABAFD;
  -webkit-transition:all .3s ease-in;
  -moz-transition:all .3s ease-in;
  -o-transition:all .3s ease-in;
  transition:all .3s ease-in;
}

#social a.goplussocial {
  background-position:-50px 0;
}

#social a.goplussocial:hover {
  background-color:#DF230A;
  -webkit-transition:all .3s ease-in;
  -moz-transition:all .3s ease-in;
  -o-transition:all .3s ease-in;
  transition:all .3s ease-in;
}

#social a.pinisocial {
  background-position:-129px 0;
}

#social a.pinisocial:hover {
  background-color:#F00202;
  -webkit-transition:all .3s ease-in;
  -moz-transition:all .3s ease-in;
  -o-transition:all .3s ease-in;
  transition:all .3s ease-in;
}

#social a.linisocial {
  background-position:-100px 0;
}

#social a.linisocial:hover {
  background-color:#036CCE;
  -webkit-transition:all .3s ease-in;
  -moz-transition:all .3s ease-in;
  -o-transition:all .3s ease-in;
  transition:all .3s ease-in;
}

#social a.rssisocial {
  background-position:-75px 0;
}

#social a.rssisocial:hover {
  background-color:#E05B03;
  -webkit-transition:all .3s ease-in;
  -moz-transition:all .3s ease-in;
  -o-transition:all .3s ease-in;
  transition:all .3s ease-in;
}

Setelah itu, Cari Kode <div class='post-footer'> dengan menekan CTRL+F.
Tambahkan kode HTML berikut ini di atas kode <div class='post-footer> :

<div class='YBBpostauthorbox'>
<div class='YBBpostauthoravatar'>
<img alt='Nama Anda' src='URL Foto Anda'></div>
</div>
<div class='YBBpostauthorcontent'>
<div class='YBBpostauthorhead'>
<h5>
                            Ditulis Oleh: 
                            <a expr:href='data:post.authorProfileUrl' rel='author' target='_blank'><data:post.author/></a>
</h5>
</div>
<div class='postAuthorbio'>
                          Irsyad Aslam Adalah Pemilik Dari Blog Your-BelajarBLOG. kesukaan saya adalah blogging, dan mengubah-ubah kode-kode, membuat widget, dan lain sebagainya. Terimakasih Telah Membaca Artikel Diatas Yang Berjudul 
                          <b>
<a expr:href='data:post.url'><data:post.title/></a>   

</b>
</div>
<div class='YBBpostauthorbox-footer'>
                            <div style="float:left;">Join Me On:</div> 
                            <ul id='social'>
<li><a class='fbisocial' href='URL Akun Facebook Anda'>Facebook</a></li>
<li><a class='twisocial' href='URL Akun Twitter Anda'>Twitter</a></li>
<li><a class='goplussocial' href='URL Akun Google Plus Anda'>Google+</a></li>
<li><a class='pinisocial' href='URL Akun Pinterest Anda'>Pinterest</a></li>
<li><a class='linisocial' href='URL Akun Linkedin Anda'>Linkedin</a></li>
<li><a class='rssisocial' href='URL Akun Feeds Burner (RSS) Anda'>RSS</a></li>
</ul>
</div>
</div>