How to Make the First Image Above the Post Title - hyderabadrichest

How to Make the First Image Above the Post Title

How to Make the First Image Above the Post Title

Installing the first image above the post title seems to have become the trend of today's blog templates. The first image in the article will be above the post title.

I myself like to place the post image above the article title, it's neat and has a separate cover image from the article material image.

Unfortunately, not many popular blog templates today use first-image by default.

To create an image above the article title, we have to edit or add a few lines of html, css and javascript into the template via Edit HTML.

Make First Image Above Post Title

How to create a first image in a blog article, you can apply it in various types of templates, such as the VioMagz template, LinkMagz, and other templates.

Following are the steps to create an image above the article title on the blogspot / blogger blog.

Creating a First Image on VioMagz

In this post, I will share how to add an animated wave effect to a blog label. This wave animation will appear when we open the label or post category on the blog, to be precise above the list of posts in that category.

1. Go to the blog dahsboard
2. Select the Themes menu and click Edit HTML
3. Find a code like this <h1 class='post-title entry-title'>:,  CTRL + F to make searching easier. Usually there are several codes, if on VioMagz choose the second code.
4. Place the following code just above the code.
 <b:if cond='data:blog.pageType == "item"'>  
<div class='coverImage'>
<b:if cond='data:post.firstImageUrl'>
<img class='firstimage' expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>
<b:else/>
<img class='firstimage' expr:alt='data:post.title' src='https://2.bp.blogspot.com/-eH7Gd4OsoIg/XqFM8dLvH-I/AAAAAAAAOcs/LZgrAIAE_4Y9ltAcmooyMaN2j790YL3ogCLcBGAsYHQ/s1600/no-image.jpg'/>
</b:if>
</div>
</b:if>

5. Next, look for the code ]]></b:skin>, then add the following CSS just above the code.
 <b:if cond='data:blog.pageType == "item"'>  
<div class='coverImage'>
.separator:nth-of-type(1){display:none;visibility:hidden}
img.firstimage{position:relative;min-width:-webkit-fill-available;height:auto;margin-bottom:20px}

6. Save Theme

At this point, the first image should be above the article title. Please check if it has changed.

Note:
In the LingMagz template, the method above will place the first image just above the breadcrumb.

That's how to make the first image above the post title that you can install on the VioMagz and LinkMagz templates.

You can also try this tutorial on other templates. Good luck.
Show Comments
Hide Comments

0 Response to "How to Make the First Image Above the Post Title"

Post a comment

Top Ad Articles

Top Ad Articles

Top Ad Articles 2

Advertise Articles