How to Display "Author Profile" in every Blogger Blog Post

If you are an author of any blogger blog and write articles on various topics, you may would like to show your name and profile photo with some introduction in each blog post.
By default Blogger BlogSpot Blog displays the only name of post author with link to the blogger blog author profile (if not linked to Google+) at the end of each blog posts. But, many bloggers want to display their name at the top of every article and a short author bio with image and name below each blog post.
However, if you have customised your blogger template or using third party downloaded free blogger templates then it may be possible that the author profile is not working for your blog. So, please read this article very carefully and enjoy the right to show your name with intro in each article/posts.

How to show Author Profile Name on the top in each blog post

Step-1:

Sign-in to your blogger account and click on your blog name or go to the dashboard.

Step-2:

Click on Layout tab menu from left sidebar and then click the Edit link of Blog Posts widget.

Step-3:

Now, check the Posted by option box under Post Page Options and save the widget.
You may change the words “Posted by” with the words you want to display like “Written by” or “Author” etc.

How to shift the Author name from bottom to top of blog post

First of all visit your blog dashboard and navigate to the layout option and then click on Edit link of Blog Posts widget which is the biggest one among other blogger gadgets.
Now, scroll down to see arrange items and then click and drag the author (posted by) box just above the Post Body.
However, if the above process not working for your blog or you want to show a customised author name with image then use the following tricks.

How to show Customised Author Profile Name on the top in each blog post

Go to the Edit HTML template of your blog and search for ]]></b:skin> and paste the following CSS codes just above/before it.
    

  1. /* Custom Author Name by www.superwebtricks.com
    2. 

  2. ----------------------------------------------- */
    3. 

  3. .swt-author {
    4. 

  4. background-color: aliceblue;
    5. 

  5. font-weight: bold;
    6. 

  6. border-top: 1px solid #321;
    7. 

  7. border-left: 2px solid #000;
    8. 

  8. border-right: 2px solid #000;
    9. 

  9. border-bottom: 1px solid #123;
    10. 

  10. overflow: auto;
    11. 

  11. }
    12. 

  12. .swt-author name {
    13. 

  13. display: inline-block;
    14. 

  14. font-size: 15px;
    15. 

  15. float: left;
    16. 

  16. text-align: center;
    17. 

  17. margin: 5px;
    18. 

  18. white-space: nowrap;
    19. 

  19. }
    20. 

  20. .swt-author name a {
    21. 

  21. font-style: italic;
    22. 

  22. color: #fff;
    23. 

  23. background-color: #000;
    24. 

  24. padding: 12px;
    25. 

  25. padding-top: 1px;
    26. 

  26. padding-bottom: 2px;
    27. 

  27. /* Tutorial at: http://www.superwebtricks.com/?p=321 */}
    28.
Now, search for
    

  1. <div class='post-header-line-1'/>
    2.
You will see the same line in two places of your blogger templates. Don’t worry the first one is for mobile templates and the last one is for desktop templates. Therefore just below/after both the lines paste the following HTML codes so that all visitors will be able to see the author name.
    

  1. &lt;!—Custom Author Name by www.superwebtricks.com --&gt;
    2. 

  2. <div class='swt-author'><name> Author
    3. 

  3. <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'><span itemprop='name'><data:post.author/>
    4. 

  4. </span></a>
    5. 

  5. </name></div>
    6.
Save your template and enjoy!

How to display Author Profile below every blog post

Step-1:

Login to the blogger account and go to the dashboard of the blog.

Step-2:

Click on Layout tab menu from left sidebar and then click the Edit link of Blog Posts widget.

Step-3:

Now, check the Show Author Profile below post option box under Post Page Options and save the widget.
Show-Author-Profile
However, if the above process not working for your blog or you want to show a customised author profile with image then use the following tricks.


How to display Customised Author Profile below every blog post

Go to the Edit HTML template of your blog and search for ]]></b:skin> and paste the following CSS codes just above/before it.

Style-1:

    

  1. /* Custom Author Profile by www.superwebtricks.com
    2. 

  2. ----------------------------------------------- */
    3. 

  3. .swt-author {
    4. 

  4. background-color: aliceblue ;
    5. 

  5. font-weight: bold;
    6. 

  6. border-top: 1px solid #321;
    7. 

  7. border-left: 2px solid #000;
    8. 

  8. border-right: 2px solid #000;
    9. 

  9. border-bottom: 1px solid #123;
    10. 

  10. overflow: auto;
    11. 

  11. }
    12. 

  12. .swt-author profile {
    13. 

  13. font-family:"Times New Roman", Times, serif;
    14. 

  14. font-weight: normal;
    15. 

  15. padding:5px 0;
    16. 

  16. margin:0;
    17. 

  17. text-transform:auto;
    18. 

  18. line-height:24px;
    19. 

  19. word-wrap:break-word;
    20. 

  20. }
    21. 

  21. .swt-author profile info {
    22. 

  22. font-size: 12px;
    23. 

  23. text-align: justify;
    24. 

  24. font-family: 'Droid Serif', serif;
    25. 

  25. }
    26. 

  26. .swt-author profile img {
    27. 

  27. float: left;
    28. 

  28. margin: 5px;
    29. 

  29. width:125px;
    30. 

  30. border: 2px solid #666;
    31. 

  31. border-radius:25px;
    32. 

  32. opacity:0.4;
    33. 

  33. filter:alpha(opacity=40);
    34. 

  34. transition:width 1s, height 1s, transform 1s;
    35. 

  35. -webkit-transition:width 1s, height 1s, -webkit-transform 1s;
    36. 

  36. }
    37. 

  37. .swt-author profile img:hover {
    38. 

  38. border-radius:5px;
    39. 

  39. opacity:1.0;
    40. 

  40. filter:alpha(opacity=100);
    41. 

  41. transform:rotate(360deg);
    42. 

  42. -webkit-transform:rotate(360deg);
    43. 

  43. /* Tutorial at: http://www.superwebtricks.com/?p=321 */}
    44.

Style-2:

    

  1. /* Custom Author Profile by www.superwebtricks.com
    2. 

  2. ----------------------------------------------- */
    3. 

  3. .swt-author {
    4. 

  4. margin: 1em 0;padding: .5em .25em;
    5. 

  5. background-color: #f1f4f8;
    6. 

  6. border: 5px solid #192a3e;
    7. 

  7. border-style: groove;
    8. 

  8. overflow: auto;
    9. 

  9. -webkit-transition:all .4s ease-in-out;
    10. 

  10. -moz-transition:all .4s ease-in-out;
    11. 

  11. -ms-transition:all .4s ease-in-out;
    12. 

  12. -o-transition:all .4s ease-in-out;
    13. 

  13. transition:all .4s ease-in-out;
    14. 

  14. }
    15. 

  15. .swt-author:hover {
    16. 

  16. color:#ffffff;background-color: #192a3e;
    17. 

  17. border: 5px solid #1ABC9C;
    18. 

  18. border-style: outset;
    19. 

  19. -webkit-transition:all .4s ease-in-out;
    20. 

  20. -moz-transition:all .4s ease-in-out;
    21. 

  21. -ms-transition:all .4s ease-in-out;
    22. 

  22. -o-transition:all .4s ease-in-out;
    23. 

  23. transition:all .4s ease-in-out;
    24. 

  24. }
    25. 

  25. .swt-author:hover img {
    26. 

  26. border: 2px solid #1ABC9C;
    27. 

  27. border-radius:100px;
    28. 

  28. opacity:0.8;
    29. 

  29. filter:alpha(opacity=80);
    30. 

  30. -webkit-transition:all .4s ease-in-out;
    31. 

  31. -moz-transition:all .4s ease-in-out;
    32. 

  32. -ms-transition:all .4s ease-in-out;
    33. 

  33. -o-transition:all .4s ease-in-out;
    34. 

  34. transition:all .4s ease-in-out;
    35. 

  35. }
    36. 

  36. .swt-author profile {
    37. 

  37. font-family:"Times New Roman", Times, serif;
    38. 

  38. font-weight: normal;
    39. 

  39. padding:5px 0;
    40. 

  40. margin:0;
    41. 

  41. text-transform:auto;
    42. 

  42. line-height:24px;
    43. 

  43. word-wrap:break-word;
    44. 

  44. }
    45. 

  45. .swt-author profile info {
    46. 

  46. font-size: 12px;
    47. 

  47. text-align: justify;
    48. 

  48. font-family: 'Droid Serif', serif;
    49. 

  49. }
    50. 

  50. .swt-author profile img {
    51. 

  51. float: left;
    52. 

  52. margin: 5px;
    53. 

  53. width:100px;
    54. 

  54. border: 2px solid #192a3e;
    55. 

  55. border-radius:50px 0;
    56. 

  56. opacity:1.0;
    57. 

  57. filter:alpha(opacity=100);
    58. 

  58. -webkit-transition:all .5s ease-in-out;
    59. 

  59. -moz-transition:all .5s ease-in-out;
    60. 

  60. -ms-transition:all .5s ease-in-out;
    61. 

  61. -o-transition:all .5s ease-in-out;
    62. 

  62. transition:all .5s ease-in-out;
    63. 

  63. /* Tutorial at: http://www.superwebtricks.com/?p=321 */}
    64.
NOTE: Delete the lines 3-11 if you have already added it while adding the customised author name.
Now, search for
    

  1. <div class='post-footer-line post-footer-line-1'>
    2.
And just after/ below it paste the following HTML codes.
You will get same line in two places in the blogger template. The first one is for mobile template and second or last one is for desktop templates. Thus, if you want to show the author profile only for desktop visitors then paste the codes after the second one.
    

  1. <b:if cond='data:blog.pageType == "item"'>
    2. 

  2. &lt;!—Custom Author Profile by www.superwebtricks.com --&gt;
    3. 

  3. <div class='swt-author'>
    4. 

  4. <b><u>About Author:</u></b>
    5. 

  5. <profile>
    6. 

  6. <img alt='author' src='https://lh6.googleusercontent.com/-LofL3EnbELo/AAAAAAAAAAI/AAAAAAAADvU/ED8fSbGJZT4/s120-c/photo.jpg'/>
    7. 

  7. <info> Write here the author short Bio or introduction. The author profile may be maximum 250-300 characters with spaces or 40-55 words long. <i><a href='#'>Read More</a></i>...</info>
    8. 

  8. &lt;/br&gt;&lt;hr&gt;
    9. 

  9. Join him on
    10. 

  10. <a href='replace it with Google Plus profile url'>Google+</a> |
    11. 

  11. <a href=' replace it with Facebook profile url'>Facebook</a> |
    12. 

  12. <a href=' replace it with Twitter profile url'>Twitter</a>
    13. 

  13. </profile></div>
    14. 

  14. </b:if>
    15.
Now, replace the image url in 6th line with your own image. Replace the # in 7th line with your about page link (if created or other profile link as you wish) and replace the respective Google Plus, Facebook and Twitter profile urls in 10-12 lines.
Save your template and enjoy!

0 comments:

Post a Comment