Blog design brings by many wants from different blogging niche and now people prefer seeing the image before viewing the content and thus this brings us down to the reason our blogger websites images should float before blog posts. Today we will take a look at the ways to make images appear before your blogger blog post content through j query codes that should be integrated into the blogger website theme code. For that, let’s see how to integrate the code. How To Set the First Image Appear Before Blog Post In Blogger.
Blogger Floating Image JQuery Code Integration.
Below are the steps you will go through in adding the jQuery code to your blogger template code. Follow them and save your template and refresh your blogger website blog page.
Step 1. Log in to Blogger and choose your specific website to add the Star Rating code.
Step 2. Reach out to the left commands by navigating to them to the Template command
Step 3. Click on the template command and then locate the Edit HTML next to Customize.
Step 4. Click anywhere in your code and then click on Ctrl+F in windows or CMD+F in mac.
Step 5. Search for </body>
Step 6. Replace the above line with the following code
<b:if cond=’data:blog.pageType == "item"’>
<script type=’text/javascript’>//<![CDATA[
$(document).ready(function(){
// the order goes container -> body -> surround -> image
var body = $(‘.post-body’).first();
var container = $(body).parent();
var image = $(body).find(‘img’).first();
var surround = $(image).parent();
$(surround).prependTo(container);
});
//]]></script>
</b:if>
</body>
That`s all with making the first blogger website post image appear before blog post content. You may be interested in the related topics below about blogger websites theme or contact me for more.