How To Display Stylish Author Profile With Picture In Blogger

Displayimg the about author profile at the end of every post helps to showcase more information about the author.

So today am going to show you how to enable this feature on mobile view and also on destop view.


Check This Out: 5 Important Things A Blogger Should Keep In Mind - Must Read!!!


Below Is a screen short of this blog about author segment on desktop view
How To Get Started
Login to your blogger dashboard
==>Backup Your Template and Download
==>Goto "Template" > "EDIT HTML"
Search for 'post-footer' and paste the below code:

Copy The Code Below:
<b:if cond='data:blog.pageType == "item"'><br /> <style>@import url(http://fonts.googleapis.com/css?family=Droid+Serif); .chiditech-author{ margin: auto; padding: 10px 10px;; height:130px; width:92%; background:#fff; border:2px solid #b44444; -moz-box-shadow:0px 0px 15px #999; -webkit-box-shadow:0px 0px 15px #999; box-shadow:0px 0px 15px #999;} .chiditech-author p {font-size:12px; font-family: 'Droid Serif', serif; font-weight:100; padding-top:-4px;} .chiditech-author h3{font-size:16px; font-family: 'Droid Serif', serif; font-weight:600;} .chiditech-avatar img{ float:left; width:50px;height:50px; margin: 0px 3px 0px 0px; padding: 6px;border:1px solid #ABB7B7; -moz-box-shadow:0px 0px 5px #999; -webkit-box-shadow:0px 0px 5px #999; box-shadow:0px 0px 5px #999;} .chiditech-parti { height:130px; float:right; width:92%; } .chiditech-sosi { width:92%;} .chiditech-sosi img { float:left; margin-left:5px; height:24px; width:24px;} .chiditech-sosi img:hover { opacity:.7; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; -ms-transition: all .3s ease; transition: all .3s ease;float:left; margin-left:5px; height:24px; width:24px;} </style><!--Nduka O Author Widget starts--><br /> <div align='left' class='chiditech-author'><div class='chiditech-avatar'><img alt='Nduka Ofoegbu' src='https://lh3.googleusercontent.com/-WN7PNwOnb4Q/AAAAAAAAAAI/AAAAAAAAACg/tp738uBi-bw/s104-p-k-no/photo.jpg'/><h3 align='left'>About Author :</h3> <td align='left' valign='top'>My name is :.......:...:::::::, C.E.O Of This Blog.Am a Nigerian Blogger Who Love ........... Thanks for visiting.</td><br /><div class='chiditech-sosi'><a href='http://www.facebook.com/chiditech' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_5HT8CKsE-3JuzkNb0uyGP9LgF39j03duAffI8obR0tsI7MuLQaEl9oQs22SRgcfFfA-qNQlGp981I-KsE6JBWba5h6nd0RNP5fy4RtV444SzxD-YIywdjz6ypS_2CLKyDuF4SDxGlJc/s1600/1.png'/></a><br /><a href='http://www.twitter.com/chiditech' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFj9od3kJmR-LXpgPv3aCep7dDKGUcLmSv1vf-I665EZkweLFfhY9Or9qdYrHpFfMoVkRdYTtuysytqfEgZJwBTNs23sVdU9A0yA5xp9UrwZrZdNiSxGMYbCzF8-Lmm5bZuKEKi389ZG0/s1600/2.png'/></a><br /><a href='http://plus.google.com/+ClassicChidy' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKQwTkIoepywvQKHu-IIxHGgCiUbP-hWCujL8l5ffOGhjCd5I0rbcBoBSwX7raWqNI9qY8E_-GXhiawsjhQEy3-84a5Z7Fv9qmMhblK7PV6DH8zjdhJtApuRMMRnPauc-U4-a54ChqHtg/s1600/3.png'/></a><br /><a href='http://www.youtube.com/c/ClassicChidy' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixGvgUirZskQrRZgntq_1EXlVlSEVX0vgiMS6R225VxajVZD9SgAWhcHfp6C16l4LYW3sUF2hS-4Rfvxe-ttTzi2CMrYq5R7QO3BpVAfUNu5xJYfV9DquOM-WrfvH8SJDq3R_FXACFESQ/s1600/8.png'/></a><br /></div></div></div><!--ChidiTech.Com Author Widget By Nduka Lordchidy Ofoegbu Ends--></b:if><br />
Then Save.


Check This OutHow To Share Blog Posts Automatically To Facebook Pages and Groups



Note: There are two 'post-footer' the first is that of the mobile view and the other for your deskop view.

==>Now search for the second 'post-footer' and paste the below code:

Copy The Code Below
<b:if cond='data:blog.pageType == "item"'><br /> <style>@import url(http://fonts.googleapis.com/css?family=Droid+Serif); .chiditech-author{ margin: auto; padding: 10px 10px;; height:130px; width:500px; background:#fff; border:1px solid #b44444; -moz-box-shadow:0px 0px 15px #999; -webkit-box-shadow:0px 0px 15px #999; box-shadow:0px 0px 15px #999;} .chiditech-author p {font-size:12px; font-family: 'Droid Serif', serif; font-weight:100; padding-top:-4px;} .chiditech-author h3{font-size:16px; font-family: 'Droid Serif', serif; font-weight:600;} .chiditech-avatar img{ float:left; width:100px;height:100px; margin: 0px 3px 0px 0px; padding: 6px;border:1px solid #ABB7B7; -moz-box-shadow:0px 0px 5px #999; -webkit-box-shadow:0px 0px 5px #999; box-shadow:0px 0px 5px #999;} .chiditech-parti { height:130px; float:right; width:380px; } .chiditech-sosi { width:300px;} .chiditech-sosi img { float:left; margin-left:5px; height:24px; width:24px;} .chiditech-sosi img:hover { opacity:.7; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; -ms-transition: all .3s ease; transition: all .3s ease;float:left; margin-left:5px; height:24px; width:24px;} </style><!--ChidiTech.Com Author Widget By Nduka Lordchidy Ofoegbu starts--><br /> <div class='ks-author'><div class='chiditech-avatar'><img alt='lordchidy' src='https://lh3.googleusercontent.com/-WN7PNwOnb4Q/AAAAAAAAAAI/AAAAAAAAACg/tp738uBi-bw/s104-p-k-no/photo.jpg'/></div><div class='chiditech-parti'> <h3 align='left'>About Author :</h3> <p align='left'>My name is :.......:.::::::::., C.E.O Of This Blog.Am a Nigerian Blogger Who Love............. Thanks for visiting.</p><div class='ks-sosi'><a href='http://www.facebook.com/chiditech' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_5HT8CKsE-3JuzkNb0uyGP9LgF39j03duAffI8obR0tsI7MuLQaEl9oQs22SRgcfFfA-qNQlGp981I-KsE6JBWba5h6nd0RNP5fy4RtV444SzxD-YIywdjz6ypS_2CLKyDuF4SDxGlJc/s1600/1.png'/></a><br /><a href='http://www.twitter.com/chiditech' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFj9od3kJmR-LXpgPv3aCep7dDKGUcLmSv1vf-I665EZkweLFfhY9Or9qdYrHpFfMoVkRdYTtuysytqfEgZJwBTNs23sVdU9A0yA5xp9UrwZrZdNiSxGMYbCzF8-Lmm5bZuKEKi389ZG0/s1600/2.png'/></a><br /><a href='http://plus.google.com/+ClassicChidy' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKQwTkIoepywvQKHu-IIxHGgCiUbP-hWCujL8l5ffOGhjCd5I0rbcBoBSwX7raWqNI9qY8E_-GXhiawsjhQEy3-84a5Z7Fv9qmMhblK7PV6DH8zjdhJtApuRMMRnPauc-U4-a54ChqHtg/s1600/3.png'/></a><br /><a href='http://www.linkedin.com/classicchidy' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_h-9pD_My6kqtVcKYW4LqfEIChs8OZqq1RgGSSsVNpSwZ6oqWqy3-XX55WuoFPiQY6WIVp58JDc_OFVpm3Tlqy7jFEoClr_atVcDsB1T0bT6AOAlC6Aj3ppSoBr3bcmBEk-CYkJDeQdQ/s1600/4.png'/></a><a href='http://www.pinterest.com/user/tracy-naija' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrUCzrjWgSWUxyH_YBkTgGnKvKu4RzcVZvSxEdJQqrzIGhwm2ss0BFnXjAscBrkYE8gWd4RaWUT-D947VJHTLOxKQbwwlSoM-aG65biqFvv1n9oHRQ6Cey-R1Ceow-CP4TGxohgNZ4p14/s1600/5.png'/></a><br /><a href='http://www.dribbble.com/Loading' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHlZNdUT0_dElZWh8KFDk95R2T9F2Ezgfs6f7J3tnpzQ3ugmF8nT3eqr9QNDpnnvRnzLBRNW4xOK0i9wjwNX6wroHexA33ZGD7i9K6Rt1g1pYTRhcOIKy3cpsQwApGjNtXvsXf-0D3s9E/s1600/6.png'/></a><br /><a href='http://www.instragram.com/tracynaija' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnl70zxsRwjcaR9ZRpsu1074FyGDVDR4I0WDDep5Hxo5m-RlJZqb2KCXd-M5o1niU8Mwe7_sTd0sLwz_-eeGdgk4D-VHK_pTLdnmeCkd8u-l2QnxNPEj0fLAuyLSeqyHkSWd4y-8JxLXU/s1600/7.png'/></a><br /><a href='http://www.youtube.com/c/ClassicChidy' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixGvgUirZskQrRZgntq_1EXlVlSEVX0vgiMS6R225VxajVZD9SgAWhcHfp6C16l4LYW3sUF2hS-4Rfvxe-ttTzi2CMrYq5R7QO3BpVAfUNu5xJYfV9DquOM-WrfvH8SJDq3R_FXACFESQ/s1600/8.png'/></a><br /></div></div></div><!--ChidiTech.Com Author Widget By Nduka Lordchidy Ofoegbu Ends--></b:if><br />
Then save your template. Thats all
Replace the author image url with yours, and also replace the twitter, facebook, linkeden, digg, google+ and youtube link with yours.
Now check your blog and you will see the author box been displayed below each post on your blog on desktop and mobile version.

I can help you get it done if you purchased my template at an affordable rate. You can get my template by following this linkBuy ChidiTech Blogger Template