• RSS
  • Delicious
  • Digg
  • Facebook
  • Twitter
  • Linkedin
  • Increase Website And Blog Traffic:latest article for Increasing Blog and website Traffic free gide.....
  • Create and Upload Site Map to Google:Google is fist largest Search Engine by upploading SITE MAP Google Easily Search Links from Ur site in Searching.......
  • Fix WEB SITE Errors:Google and other search engines always take those site in there fist page in searching which ha too less web Errors...
  • Top 20 Search Engine:Submit Ur site to top 20 Search Engines to Increasing Ur Site Traffic and making money top search engines like as Google, Yahoo, Ask, AOl, MSN...
  • Top Social Sites:Top 100 Social sites which real help U make a Affliate Marketer and in Pormoting ur Producdts...

New Posts

Add Author's Profile Picture and Name in Multi Author Blog

Posted by Mohsin On 2/22/2014 10:41:00 AM 1 comment

In this tutorial we will see how to add a photo next to the name of the author just below the post title. This feature can be used on Blogger blogs that have not only one author but also on blogs with multiple authors, so the info for each of the publisher will be shown below the titles of their respective posts and this way, they will get the proper credit for their work.

multi-author blog, blogger tricks

I strongly recommend to make a backup of your template before making any changes.

Adding the Author's Profile Picture / Avatar and Name in Blogger


Step 1. From the Blogger Dashboard, go to Template and click on the Edit HTML button.


Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box.
Paste the following code inside the search box and hit Enter to find it:
<span class='post-author vcard'>
Just below this line, you should see the rest of code which should look something like this:
              <span class='post-author vcard'>
                <b:if cond='data:top.showAuthor'>
                  <b:if cond='data:post.authorProfileUrl'>
                    <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                      <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
                      <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                        <span itemprop='name'><data:post.author/></span>
                      </a>
                    </span>
                  <b:else/>
                    <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                      <span itemprop='name'><data:post.author/></span>
                    </span>
                  </b:if>
                </b:if> 
</span>
Note: If you are using a modified template, it could look something like this:
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/>
</span>
</b:if>
</span>
Step 3. Now that you found the code, delete it. Pay attention that it should start and end with the tags marked in yellow. This code is repeated two times, so you need to replace it two times.

Step 4. Next, search for this line (you'll find it twice and you should stop at the second one):
<div class='post-header-line-1'/>
Step 5. Just below it, paste the following code:
<span class='post-author vcard'>
<b:if cond='data:post.author == &quot;AuthorName&quot;'>
<span class='author'><a href='Author-Profile-URL'><img src='Author-Image-URL'/></a></span>
</b:if>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <b:if cond='data:post.authorProfileUrl'>
              <span class='fn'>
                <a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
                  <data:post.author/>
                </a>
              </span>
            <b:else/>
              <span class='fn'><data:post.author/></span>
            </b:if>
        </b:if>
      </span>
Replace the AuthorName text with the EXACT name that appears on the Blogger profile, i.e., the one that appears in the posts or comments. If it is added in a different way, Blogger will not recognize the username, nor the image and the code will not work. To display the author's pic, add the URL of the author's Blogger profile and the image URL by replacing the text in blue. I recommend you to use an image with a maximum height of 40px and 40px wide.
Once done, the photo of the author should appear next to the "posted by" text just below the post title.

If you have a blog with more than one author, add a code like the one below, just above <b:if cond='data:top.showAuthor'>
<b:if cond='data:post.author == &quot;AuthorName2&quot;'>
<span class='author'><a href='Author2-Profile-URL'><img src='Author2-Image-URL'/></a></span>
</b:if>
If you have more than two authors, repeat this block of code for each author that you want to add.

Step 6. Now let's go ahead and add the CSS styles - search for the ]]></b:skin> tag and just above it, paste the following code:
.author img{
float: left;
border: 1px solid #FFFFFF;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
margin: 0px 5px 10px 0px;
width:35px;
height:35px
}
.post-author{
color:#777;
font-size: 13px;
}
.post-author a {
color:#777; 
margin-top: 10px;
}
... to change the size of avatar, increase/decrease the 35px values.

Step 7. Click on the Save template button and now you should see the profile picture and name of the Blogger author below the title of each post.

1 comments:

All methods are endorsed through guidelines of search engines so that there is no question of illegality in the functioning.
Food and drink can be spilled on your carpets and stains such as mud and oil can be picked
up during daily usage. This will not only increase the life of your
carpeting but at the same time protect you and your loved ones from prospective health problems.


My page; carpet washer Saratoga Ca

Post a Comment

All types of Comments are welcome