Add Author’s Profile Pic As Well As Cite Inward Multi Writer Weblog – Helplogger

In this tutorial , nosotros volition run across how to add together the author’s profile motion painting as well as cite on a Blogger weblog but below the post title. Not exclusively that this tin laissez passer your weblog that personal impact but attaching an paradigm to your weblog posts inwards Blogger tin assistance visitors position , as well as possibly convey a grade of trust alongside you. Also , this could last a swell improver to blogs alongside multiple authors , since the information for each publisher volition last shown below the titles of their respective posts as well as this means , they volition larn the proper credit for their work.

Related: How to Add or Invite Multiple Authors inwards Blogger

Adding the Author’s Profile Picture / Avatar as well as Name inwards Blogger

Step 1. From the Blogger Dashboard , larn to “Template” as well as click the “Edit HTML” button.

Step 2. Click anywhere within the code surface area as well as press the CTRL + F keys to opened upwards the search box. Paste the next code within the search box , as well as thus hitting Enter to observe it:

Just below this trouble is the residuum of code , which should await something similar this:

             
               
                 
                   
                     
                     
                       
                     
                   
                 
                   
                     
                   
                 
                 

Note: If you lot are using a custom template , it could await something similar this:

Step 3. Now that you lot establish the code , delete it. Please banking concern notation that it should root as well as halt alongside the tags marked inwards yellow. This code is repeated ii times inwards the template’s code as well as you lot volition involve to take both occurrences.

Step 4. Next , search for this trouble (you’ll observe it twice but halt on the minute one):

Step 5. Just below the trouble , glue the next code:

       
         
           
             
               
                 
               
             
           
             
           
       
     

Replace the AuthorName text alongside the EXACT cite that appears on the Blogger profile , i.e. the 1 that appears inwards the posts or comments. If it is added inwards a dissimilar means , Blogger volition non recognize the username , nor the paradigm as well as the code volition non work.

To display the author’s pic , add together the URL of the author’s Blogger profile as well as the paradigm URL past times replacing the text inwards blue. It is recommended to purpose an paradigm alongside a maximum superlative of 40px as well as 40px wide. Once done , the photograph of the writer volition seem side past times side to the “posted by” text but below the post title.

Now for those who hold a weblog alongside to a greater extent than than 1 writer , you lot volition involve to add together the next code but higher upwards

If you lot convey to a greater extent than than ii authors , repeat this block of code for each writer that you lot desire to add.

Now , let’s larn 1 footstep farther as well as add together the CSS styles.

Step 6. Search using CTRL + F for this tag:

]]>

Just higher upwards the ]]> tag , glue the next CSS code:

.post-header {
width: 100%;
padding: 2px 5px;
margin: 5px;
clear: both;
float: left;
}
.author img{
float: left;
margin: 0px 5px 10px 0px;
max-width:100%;
height:45px;
border-radius: 10px;
}
.post-author{
color:#777;
font-size: 13px;
font-style: italic;
}
.post-author a {
color:#777; }

Note: to modify the size of avatar , modify the 45px> value.

Step 7. Click on the “Save template” push as well as that’s it. You should run across instantly the profile motion painting as well as cite of the Blogger writer below the championship of each post.