Cara Membuat Author Box Seperti Jagoandzgn

Author Box Jagoandzgn

Membuat Author Box Seperti Jagoandzgn - hai para Blogger, 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 Cara Membuat Author Box Milik Jagoandzgn

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
Cara Membuat Author Box Seperti Jagoandzgn
Tampilan Author Box milik Jagoandzgn.com


Kenapa saya  saya memberikan tutorial cara membuat Author box milik Jagoandzgn?

Karena karya dia memang bagus, keren, mudah dan cukup simpel. Dan tulisan ini adalah bentuk apresiasi bagi dia. Karena jarang lo para Blogger yang  bisa membuat Author Box keren semacam itu. Saya aja gak bisa hehehehe

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 Ala Jagoandzgn, semoga bermanfaat dan Terima kasih. Silahkan apabila ada yang perlu dipertanyakan, tanyakan di kolom komentar
data:post.title
Seseorang yang lebih suka menulis dan membagikan apa yang di tuliskan agar dunia tahu.
  • Facebook
  • WhatsApp
  • Instagram
  • Berlangganan update artikel terbaru via email:

    0 Response to "Cara Membuat Author Box Seperti Jagoandzgn"

    Post a comment