Cara Memasang Widget Author Box Ala Bung Frangki - Reboza Sambirejo

Widget Author Box Ala Bung Frangki - setelah kemarin sempat membagikan tutorial auto download dengan countdown kini saya akan kembali membagikan tutorial membuat widget yang cukup penting yaitu author box. Widget ini berfungsi untuk menampilkan info tentang penulis/pemilik box. Author box yang akan dibuat dalam artikel ini yaitu author box ala bungfrangki yang juga digunakan oleh blog ini (rebozasambirejo). Keunggulan dari widget ini salah satunya responsive pastinya, slot image, aithor desc, dsb. Untuk melihat seperti apa author box yang akan dibuat bisa lihat demonya melalui link berikut. Atau bisa langsung ke tutorial.

Result

Cara Membuat Widget Author Box Ala Bung Frangki

Pertama silahkan masuk ke blogger >>  tema >> edit HTML

Kemudian pastekan kode css berikut sebelum ]]></b:skin>

/* author box by Reboza Sambirejo */
.rbz-info{display:block;padding:0;margin:0 auto;color:#999;line-height:1.3em;font-size:12.3px!important;margin:0auto}
.rbz-info{background:#EAEBED;margin:30px auto 10px;display:block;position:relative;padding:35px 25px 25px;overflow:hidden}
.rbz-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){.rbz-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}

Lalu pasang kode HTML berikut setelah kode   <div class='post-footer'> atau yang mirip dengan kode tersebut

<div class='rbz-info'>
<span itemprop='author' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<span class='author-photo'>
<img alt='Reboza Sambirejo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Co0CoZI0s77DNVFgiigbKczRXVJHPm-avlsRJdcDNB8hyphenhyphenHan7qYlq7ejEpAi4V-R90ZiWgFBzYAslM3RVsUzHObmk2jwnrqgh4Bp3uwoUuqFjG4UQMwYUAjJc64M2IGt0eADYTjv6RHv/s1600/flat+r+logo+copy.png' title='Reboza Sambirejo'/>
</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'>Reboza Sambirejo</span></a></span>
</span>
<span class='author-desc'>
Hi.. my name Muhammad Rosyad D. I live in Sambirejo (Sleman, Yogyakarta, Indonesia). Ini adalah demo Author Box.
</span>
<ul class='sosmed-saya'>
<li class='site'>https://rosyadblog.blogspot.com</li>
</ul>
</span>
</span>
</div>

Ganti https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Co0CoZI0s77DNVFgiigbKczRXVJHPm-avlsRJdcDNB8hyphenhyphenHan7qYlq7ejEpAi4V-R90ZiWgFBzYAslM3RVsUzHObmk2jwnrqgh4Bp3uwoUuqFjG4UQMwYUAjJc64M2IGt0eADYTjv6RHv/s1600/flat+r+logo+copy.png dengan url gambar Anda. Dan untuk nama dan deskripsi silahkan disesuaikan sendiri

Terakhir simpan template dan lihat hasilnya.
Cukup sekain tutorial kali ini jika terdapat maslah atau ada yang ingin ditanyakan bisa melalui komentar dibawah.