Step 1. ​Open The HTML/CSS Editor

Click on "THEME" at the top, then click on "Edit HTML/CSS" on the left.

---

Step 2. Upload Your Avatar

To upload your avatar, go under "ASSETS>Images>Upload File(s)...". An avatar size of 300x300 is recommended.

Note: If you don't have an "Images" folder, you can simply create one by clicking on "ASSETS".

---

Step 3. Open the Blog post HTML file

To open the blog post HTML file, on the left, under "PARTIALS", click on "blog>post.tpl".

---

Step 4. Add HTML code

Within the file on the right, you're going to replace the orange code below...

<div class="blog-header">
    <h2 class="blog-title">
        {{{title_html}}}
    </h2>
    <p class="blog-date">
        {{{date_html}}}
    </p>
    <p class="blog-comments">
        {{{comment_count_html}}}
    </p>
</div>

...with the new orange code below:

<div class="blog-header">
    <div class="blog-information">
        <div class="blog-avatar"><a href=""><img src=""></a></div>
    </div>
    <div class="blog-information-2">
        <h2 class="blog-title">
            {{{title_html}}}
        </h2>
        <p class="blog-date">
            {{{date_html}}}
        </p>
    </div>
    <p class="blog-comments">
        {{{comment_count_html}}}
    </p>
</div>

---

Step 5. Add avatar uRL and hyperlink

Add the URL of your site and the file name of your image in place of the orange texts, and then add the URL you want your avatar to link to in place of the bold text below.

<div class="blog-header">
    <div class="blog-information">
        <div class="blog-avatar"><a href="ANY-URL"><img src="YOUR-WEEBLY-SITE'S-URL/files/theme/images/IMAGE-FILE-NAME"></a></div>
    </div>
    <div class="blog-information-2">
        <h2 class="blog-title">
            {{{title_html}}}
        </h2>
        <p class="blog-date">
            {{{date_html}}}
        </p>
    </div>
    <p class="blog-comments">
        {{{comment_count_html}}}
    </p>
</div>

---

Step 6. Add cSS code

On the left under "ASSETS", click on "main_style.css" and scroll down to your blog's coding. Now add the code below to the CSS file.

​.blog-information {
  display:table-cell;
  vertical-align:middle;
  width:72px;
}
.blog-information-2 {
  display:table-cell;
  vertical-align:middle;
}
.blog-avatar {
  width:60px;
}
.blog-avatar a img {
  height: 60px!important;
  width: 60px!important;
  border-radius: 50%;
  border:4px solid #ddd;
}
.blog-avatar a:hover img {
  border:4px solid #ddd;
}

Click save.

---

You're done! Publish your site to see your blog posts' new avatar!

---

comments powered by Disqus