Membuat Author Box Ala Ratz.tech

Membuat Author Box Ala Ratz.tech - Hai sobat blogger kali ini saya akan membagian bagaimana cara membuat Author Box dibawah postingan seperti blog saya ini.

Untuk membuat Author Box ini kalian hanya perlu menggunakan CSS dan HTML saja jadi ini tidak akan mempengaruhi skor dan pagespeed blog sobat. Ini berfungsi untuk menampilkan info tentang penulis atau pemilik blog tersebut.

Sebenarnya ini adalah Author Box seperti Bung Franki yang di desain ulang agar sesuai dengan milik Ratz.tech (Alliv Rem).

Jika sobat ingin menggunakan Author Box ini di blog sobat , caranya cukup mudah tinggal ikuti langkah berikut ini,

Result

Cara Membuat Author Box Ala Ratz.tech

Buka Template > Edit Template 

Setelah itu letakan kode ini tepat diatas kode </head>

<style type='text/css'>
/* Author Box by Ratz.tech */
.ratz-info{display:block;padding:0;margin:0 auto;color:#999;line-height:1.3em;font-size:12.3px!important;margin:0auto}
.ratz-info{background:#EAEBED;margin:30px auto 10px;display:block;position:relative;padding:35px 25px 25px;overflow:hidden}
.ratz-info::before{content:"";display:block;width:100%;height:88px;background:#FE634A;position:absolute;top:0;left:0;right:0;z-index:0}
.author{font-size:20px;font-family:"Archivo Narrow";font-weight:700!important;padding:0!important;display:block;margin:17px 0 32px!important;text-transform:uppercase}
.author-photo{display:inline-block;float:left;position:relative;z-index:1}
.author-photo img{width:90px;height:90px;border-radius:99em;z-index:1;border:7px solid #EAEBED}
.about-author{z-index:1;position:relative;display:inline-block;float:right;width:calc(100% - 125px)}
.author-desc{font-size:15px;font-weight:400;line-height:1.6em;color:#777}
ul.sosmed-saya{display:block;overflow:hidden;margin:20px auto 10px;padding:0}
ul.sosmed-saya li a,ul.sosmed-saya li.site{display:inline-block;margin-right:7px;margin-bottom:5px;font-size:15px;padding:0;width:45px;height:30px;line-height:30px;color:#fff;text-align:center;border-radius:2px}
ul.sosmed-saya li {display: inline-block;}
.author a, .author a:hover {color: #fff;}
ul.sosmed-saya li.site{font-family:Consolas,Monaco;width:auto;background-color:#fff;border:1px solid #bdc3c7;padding:0 15px;font-style:italic;font-size:14px;color:#999}
@media screen and (max-width:600px){
.rbz-info {padding: 30px 15px 20px;}
.author {margin: 20px 0 35px !important;}
}
@media screen and (max-width:480px){
.ratz-info{margin:30px auto 10px;text-align:center}
.author-photo{display:block;float:none}
.about-author{display:block;float:none;width:100%;text-align:center}
.author{text-align:center;display:block;margin:15px 0 25px!important}
.author-desc{text-align:center}
ul.sosmed-saya{display:block;text-align:center}
ul.sosmed-saya li{display:inline-block;text-align:center}
.author a,.author a:hover{color:#888}
}
/* latin */
@font-face {
  font-family: "Archivo Narrow";
  font-style: normal;
  font-weight: 400;
  src: local("Archivo Narrow Regular"), local("ArchivoNarrow-Regular"), url(https://fonts.gstatic.com/s/archivonarrow/v5/DsLzC9scoPnrGiwYYMQXpkU-p1xzoRgkupcXIqgYFBc.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
</style>

Kemudian jika sobat ingin meletakan dibawah Share Buttom seperti blog ini sobat cari <div class="share-wrpaper" id="share-wrapper">

atau yang lain, karena setiap blog berbeda - beda

<div class='ratz-info'>
<span itemprop='author' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<span class='author-photo'>
<img alt='Alliv Rem' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilm18EPLcGNgBnG90zrKKWn2d3_wQXpUdtFS8zZZJSDdpYcLlOvqgST-IfofJBGaTojaubCKUbTyHUywHMKzCmSpxfBO9SNm4fngvBJPhe-kfqJ6-w5zvNrEfoGO_8I5YaPytM3XddIQKH/w145/Author.jpg' title='Alliv Rem'/>
</span>
<span class='about-author vcard'>
<span class='author'>
<span class='fn'><a class='g-profile' href='' itemprop='url' rel='author' title='author profile'><span itemprop='name'>Alliv Rem</span></a></span>
</span>
<span class='author-desc'>
Hi.. my name Muhammad Alliv Rem. I live in Pati (Jawa Tengah, Indonesia). Check my contact in...
</span>
<ul class='sosmed-saya'>
<li class='site'>https://www.ratz.tech</li>
</ul>
</span>
</span>
</div>

Pengaturan

• Ganti Url gambar dengan Url image atau avatar sobat
• Ganti Nama Author
• Ganti Dekripsi pada Box
• Ganti Url Link dengan Url blog sobat

Sekian artikel tentang Cara Membuat Author Box Ala Ratz.tech semoga bermanfaat. Apabila ada pertanyaan mengenai artikel ini, silahkan komentar pada kolom komen dibawah ini.

Direkomendasikan