Sunday, 13 March 2016

How to Add Author Bio in Blogger with Pictures

Hello guys welcome to the Techtspot Blogger tutorial today I will show you how to insert add Author Bio widget in Blogger with pictures.
How to Add Author Bio in Blogger with Pictures

Today we discuss about Author Bio widget, here Blogger don't have any Author Bio gadget by default, so we are make it and insert it on blog, as we know Author Bio gadget have author information and there social accounts links, now we add it on Blog footer.

These are Following Steps:-


Step 1: Go to Blogger Layout and click Add a Gadget link in footer area.
Add Author Bio In Blogger 1
Step 2: Select the HTML/JavaScript Gadget.
Add Author Bio In Blogger 2
Step 3: Give the Title and Paste Code in Content area then click Save button.
Add Author Bio In Blogger 3
<div class="about-author">
<h3>About Author</h3>
<img align="left" src="https://lh5.googleusercontent.com/-a5vcUW_A9BM/AAAAAAAAAAI/AAAAAAAAAhc/t-ubxyVOWEs/s80-c/photo.jpg"/><p> Hi, I have written and developed this site so that students may learn computer science related technologies easily. I'm committed to provide easy and in-depth tutorials on various technologies. No one is perfect in this world and nothing is eternally best. But we can try to be better. I hope it will help you a lot.</p><p>Let's Get Connected:- <a href="http://twitter.com/" rel="nofollow" target="_blank"><font color="#00aced">Twitter</font></a> | <a href="http://www.facebook.com/" rel="nofollow" target="_blank"><font color="#3b5998">Facebook</font></a> | <a href="http://plus.google.com/" rel="nofollow"><font color="#dd4b39">Google Plus</font></a> | <a href="http://Linkedin.com/" rel="nofollow"><font color="#00aced">Linkedin</font></a> | <a href="http://Pinterest.com/" rel="nofollow"><font color="#dd4b39">Pinterest</font></a></p></div>
#Replace Author Image Red URL With These Author Image's URL
#Replace Social Blue URL With Your Social URL 
https://2.bp.blogspot.com/-0OTyYKwZsTI/WaeavZG6aYI/AAAAAAAAJOE/eYfw-K5wGp08u8na4iUwSQ8DZ3VH0x1yACLcBGAs/s1600/1.%2Btechtspot%2Badmin.png
https://4.bp.blogspot.com/-FJ6D8I1sLng/WaeavaaFkXI/AAAAAAAAJOA/noZ73cA4i9QVjVn9uGhkpQ3HY44yWYnFgCLcBGAs/s1600/2.%2Btechtspot%2Badmin.png
https://1.bp.blogspot.com/--9dTO_xSV6c/WaeavKKnuDI/AAAAAAAAJN8/ZrKtzrVwhOIK-SHfLw-ljSZ00ycbX2NQgCLcBGAs/s1600/4.%2Btechtspot%2Badmin.png
https://2.bp.blogspot.com/-Fu0CVIJdrnY/Waeavw8avVI/AAAAAAAAJOI/vBXVqmToxLwtm-EcoYv5J1286DutkZW7gCLcBGAs/s1600/5.%2Btechtspot%2Badmin.jpg
https://2.bp.blogspot.com/-3mFBZg5RyB4/WaeawRz_IkI/AAAAAAAAJOM/_zOC1cgnww4oS0aOChiMKF2TbymprixQwCLcBGAs/s1600/6.%2Btechtspot%2Badmin.jpg

Step 4: Go to the Blogger Blog.
Add Author Bio In Blogger 4
If You want to add your Image on Author Bio Widget then Go to Facebook profile and Right Click Your IMAGE then click Copy IMAGE Address.
Add Author Bio in Blogger 5

How to Add Author Bio in Blogger



Read More:- How to Add Alexa Widget in Blogger
Read More:- How to Add Instagram Widget to Blogger

I hope you enjoy this Post. If any problem comment it.

22 comments:

  1. uh i finally got good solution with author profile was struggling with getting good.

    Thanks

    ReplyDelete
  2. How can we change the font and color for introduction text

    ReplyDelete
    Replies
    1. thanks for comment and

      we can change the font and color using < font color="#00aced" > here your introduction text < /font >

      ok

      Delete
    2. < font color="#00aced" > here your introduction text < /font >

      Delete
  3. Awesome Author Bio code sir it work....

    ReplyDelete
  4. How can we place it in post footer?

    ReplyDelete
    Replies
    1. hello sir

      Inserting the author box in post footer
      1. Go to theme
      2. Click on Edit HTML
      3. Find the line >> "post-footer-line-3"
      4. Paste your code ABOVE the line containing this code.
      5. Save theme
      6. Open you blog :)

      Delete
    2. 4. Paste your code ABOVE the line containing this < /b:includable > code.

      Delete
  5. Bhai agar post ke niche add karna hoo to kaise kare

    ReplyDelete
    Replies
    1. hello

      Inserting the author box in post footer
      1. Go to theme
      2. Click on Edit HTML
      3. Find the line >> "< data:post.body/ >" then enter 2 times
      4. Paste your code ABOVE the line containing this code.
      5. Save theme
      6. Open you blog :)

      Delete
  6. I have two questions, please:

    1 - How can I show the button of read more to make some of the visitors of my blog go to about us page for more information?

    2 - How can I show the images of social media icons instead of their names to make them more attractive?

    ReplyDelete
    Replies
    1. Hello there
      Read More Button >> click here
      read more button for blogger ||
      Social Media Icons >> Click here add social media button for blogger
      Thanks

      Delete
    2. I mean how to add the previous gadgets into the author bio box that is inserted under blog posts.

      Delete