Membuat Author Box Keren Di Bawah Postingan

Author Box Keren dan Responsive

Author Box Responsive – hai para  Blogger , Ada diantara blog-blog yang sudah saya kunjungi dan saya melihat profilnya masing-masing melalui Autor Box, Author Box terkeren adalah karya jagoandzgn . Oleh karena itu kali ini saya akan membuat tutorial  Membuat Author Box Keren Di Bawah Postingan . Ini Dulunya Milik Jagoandzgn , tapi dia-nya, sekarang dia sekarang migrasi ke WordPress .

Author Box ini layaknya sebuah identitas pada blog, sehingga para visitor mengetahui Siapa pemilik dan penulis artikel dalam blog tersebut. Dan cocoknya Author ini di pasang di template karya Mas Sugeng yakni VioMagz, walaupun di template mana pun juga cocok dan sah-sah aja sih.

Penampakan Author Box-nya kayak gambar di bawah ini

Author box ini dulunya ada pada blog Jagoandzgn sebelum akhirnya migrasi ke WordPress

Bagaimana? Keren gak tuh?

Keren gak? Keren Lah Masak nggak… hehehe

Saya akui Author box ini keren dan ini memang bagus serta cukup mudah dan simpel. Artikel ini sebagai bentuk apresiasi saya buat Jagoandzgn. Jarang-jarang lo ada Blogger yang  bisa membuat Author Box keren dan responsive semacam itu.

Oke langsung saja kita ke topik pembahasan cara membuat Author box keren milik jagoandzgn

Pertama, Buka Blog kalian

Kedua , Menuju ke  TEMA  ke  EDIT HTML

Ketiga, Silahkan Cari kode ]]></b:skin>, Untuk lebih cepatnya, gunakan CTRL+F

Keempat, Setelah ketemu, Pastekan kode dibawah ini tepat di atas ]]></b:skin>

/* Kotak Author */
.suhux-Author{text-align:center;margin-top:20px;}
.suhux-Author .top{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:flex-start;justify-content:center;}
.suhux-Author .bottom{text-align:center;margin-top:-35px;padding:45px 15px 15px;background: #1589E3;background-image: linear-gradient(110deg,rgba(255,255,255,0.1) 16%,rgba(255,255,255,0.1) 17%,rgba(255,255,255,0.05) 17%,rgba(255,255,255,0.05) 23%,transparent 8.5%,transparent 78%,rgba(255,255,255,0.05) 78%,rgba(255,255,255,0.05) 84%,rgba(255,255,255,0.1) 84%,rgba(255,255,255,0.1));border-radius: 5px;}
.suhux-Author img{width:50px;height:50px;border:5px solid #fff;border-radius:100px;}
.suhux-Author .author-name{font-size:20px;font-weight:700;margin-bottom:7px;}
.suhux-Author .author-name a{color:#ffffff;font-weight:bold}
.suhux-Author .author-desc {color: #eaeaea;overflow: hidden;line-height: 1.6em;}
.suhux-Author .author-desc a {margin: 3px; padding: 5px 8px;color: #ffffff;border-radius: 3px;font-family: 'Google Sans',sans-serif;font-size: 13px;border: 1px solid;}
.suhux-Author .author-desc a:hover {color:#000000;}
.suhux-Author .author-desc li {display : inline-block;padding-top: 5px;}

Kelima, Selanjutnya cari kode yang mirip seperti ini

<b:if cond=’data:post.authorAboutMe’>…</b:if>

Keenam, Ganti kode tersebut dengan kode di bawah ini

<div class='suhux-Author'>
<div class='top'>
<img itemprop='image' src='//3.bp.blogspot.com/-ruhvekNl3XM/XfnnWyL1sRI/AAAAAAAAAXY/p-ZzlOI-_qgr4b92dayxVDgkAg6QqB8QACLcBGAsYHQ/s1600/DEFAULT_USER_PROFILE_LOGO.png' width='90px'/>
</div>
<div class='bottom'>
<div class='author-name'>
<a href='https://www.blogger.com/follow.g?blogID=6479446256188251383' rel='author' title='Yusril Maker'>
<span itemprop='name'>Lapak Info</span>
</a>
</div>
<div class='author-desc'>Seseorang yang lebih suka menulis dan membagikan apa yang di tuliskan agar dunia tahu.
<br/>
<li><a href='https://www.facebook.com/108385560784010' title='Facebook'>Facebook</a></li>
<li><a href='https://wa.me/+6287710266952' title='WhatsApp'>WhatsApp</a></li>
<li><a href='https://www.instagram.com/lapakgratisdotcom/' title='Instagram'>Instagram</a></li>
</div>
</div>
</div>

Ketuju, Setelah selesai Semuanya,klik Simpan Tema.

  • Ganti url gambar ini https://3.bp.blogspot.com/-ruhvekNl3XM/XfnnWyL1sRI/AAAAAAAAAXY/p-ZzlOI-_qgr4b92dayxVDgkAg6QqB8QACLcBGAsYHQ/s1600/DEFAULT_USER_PROFILE_LOGO.png dengan url gambar milik kalian
  • Untuk Bio, ganti dengan Bio kalian
  •  Ganti Facebook, Whatsapp dan Instagram dengan milik kalian

Mungkin sekian dulu artikel dari Cara Membuat Author Box dan responsive ini, semoga bermanfaat dan Terima kasih. Silahkan apabila ada yang perlu dipertanyakan, tanyakan di kolom komentar

You May Also Like

Tinggalkan Balasan