Cara Membuat Author Box Ala Bungfrangki

Author box
Pasti kalian tau bukan blog nya bungfrangki.com seorang desainer template ini sangat sudah populer di kalangan para Blogger pada pembahasan kali ini saya akan memberikan tutorial lagi buat kalian yaitu Cara Membuat Author Box Ala Bungfrangki pasti para blogger ingin membuat seperti author tersebut.

Author ini juga di lengkapi dengan deskripsi dan sosial media seperti facebook, twitter dan instagram nah jika kalian penasaran yuk simak berikut ini tutorial nya.
Cara Membuat Author Box Ala Bungfrangki 

1. Kalian buka akun Blogger kalian
2. Pilih Template > Edit HTML
3. Cari kode ]]></b:skin> atau bisa cari kode </style>
/* Post author info */
.post_info{background:#ece3d2;margin:30px auto 10px;display:block;position:relative;padding:35px 25px 25px;overflow:hidden}
.post_info:before{content:'';display:block;width:100%;height:88px;background:#5fa281;position:absolute;top:0;left:0;right:0;z-index:0}
.author-photo{display:inline-block;float:left;position:relative;z-index:1}
.about-author{z-index:1;position:relative;display:inline-block;float:right;width: calc(100% - 125px);}
.author-photo img{width:90px;height:90px;border-radius:99em;z-index:1;border:7px solid #f3ebdc}
.author{font-size:20px;font-weight:700!important;padding:0!important;display:block;margin:17px 0 32px!important;text-transform:uppercase}
.author a,.author a:hover{color:#fff}
.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{display:inline-block}
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:#545454;text-align:center;border-radius:2px}
ul.sosmed-saya li a:hover{opacity:1}
ul.sosmed-saya li a.efbi{background-color:#4a7fbb}
ul.sosmed-saya li a.tewe{background-color:#00aced}
ul.sosmed-saya li a.iige{background-color:#c4906e}
ul.sosmed-saya li.site{font-family:Consolas,Monaco;width:auto;background-color:#fff;border:1px solid #dbd2c0;padding:0 15px;font-style:italic;font-size:14px;color:#999}
4. Setelah itu kalian cari kode </article> taruh kode berikut ini dia bawah kode tersebut
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span itemprop='author' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<span class='author-photo'>
<img alt='Mister Design' src='https://lh3.googleusercontent.com/-J6XerpE97Qk/AAAAAAAAAAI/AAAAAAAAAX8/KwPT40tab9Q/s60-p-no/photo.jpg' title='Mister Design'/>
</span>
<span class='about-author vcard'>
<span class='author'>
<span class='fn'><a class='g-profile' href='https://plus.google.com/105611265751427996934' itemprop='url' rel='author' title='author profile'><span itemprop='name'>Mister Design</span></a></span>
</span>
<span class='author-desc'>
Hanya bermodalkan Notepad, Paint, dan alat - alat bawaan windows ku mulai membuat postingan satu - persatu.
</span>
<ul class='sosmed-saya'>
<li><a class='fb' href='https://www.facebook.com/mrsdzgn/' itemprop='sameAs' rel='nofollow' title='Facebook Pribadi'><i aria-hidden='true' class='fa fa-facebook'/></a></li>
<li><a class='tw' href='https://www.twitter.com/afriza_mohammad' itemprop='sameAs' rel='nofollow' title='Twitter Pribadi'><i aria-hidden='true' class='fa fa-twitter'/></a></li>
<li><a class='ig' href='#' itemprop='sameAs' rel='nofollow' title='Instagram Pribadi'><i aria-hidden='true' class='fa fa-instagram'/></a></li>
<li class='site'>http://mrdzgn.blogspot.com</li>
</ul>
</span>
</span>
  </b:if>
Jika sudah masukan CSS tambahan berikut ini untuk menyempurnakan Author tersebut. 
 @media screen and (max-width:480px){.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}
Nah sobat Blogger semoga bisa bermanfaat buat kalian dan gunanya dengan bijak.

Reaksi:
Share this with short URL:

You Might Also Like:

Use parse tool to easy get the text style on disqus comments:
Show Parser Hide Parser