Skip to main content
Ivhaa Design

follow us

Cara Membuat Author Box Ala Bungfrangki

Cara Membuat Multi Author Box Ala Bungfrangki

Baca juga:

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.

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar