Blogger: Having A Featured Image Possible? - html

I'm working on a custom responsive template for Blogger. Since Blogger doesn't have a "featured image" feature like Wordpress, is there a way that I can make the first image embedded in the post appear above the post-body and post-title? is there some kind of if/conditional statement that I can use?
Or, would it be best for me to HTML the post-title inside the post itself below the first embedded image? However, if I followed that method, how do I make the image within the post link to the post itself without editing it?
Thanks...

If you want to grab the first image, you can use make use of the template tag - <data:post.firstImageUrl/>
Below Example might help you out.
<b:if cond='data:post.firstImageUrl'>
<img expr:src ="data:post.firstImageUrl" expr:alt="data:post.title"/>
</b:if>
This will work only within the Blogger's Post Loop
Another way of using Featured images will be to use an image link in the enclosures and to edit your template to render enclosure links as featured thumbnails. My Blog post might help you with this (http://www.bloggerplugins.org/2011/09/post-thumbnails-for-blogger.html) . It hasn't been updated for over 2 years, but it might give you some guidance.

Related

What is wrong with the below mentioned code for introducing image in html?

I am using the following tag and code to introduce my image in the first HTML page exercise:
<img scr="Amar.jpg" alt="Amar's Linkedin profile">
But I am only able to see the alternate description and my image is not loading.
I tried to create own HTML page wherein in the introduction page I am trying to insert my own profile photo. But I am getting the above error.
Please make sure to use proper extension and correct location of image!
And yes, Use "src=..." , seems you wrote it wrong

Problems with create internal links( Anchor links) on a blog post in Blogger?

6:23 AM (1 hour ago)
Hi, can anybody help to understand how to create Internal links (Anchor Links) in a post? I can't able to find any helpful answer. Feeling very frustrated.
I did exactly what a person said me on the Blogger product forum -
For anchor link:
You can create hyperlink in the HTML mode. Just insert the following code where you want to place an anchor. (you can change archorlinkname to whatever you like)
<a name="anchorlinkname"></a>
For the link within the same post that you want to jump to that anchor, please use this code. (you can also change the word in yellow)
Click here to go to anchorlinkname
But something weird is happening once I am updating my post or going from HTML mode to Compose mode.
Error -
<a href="https://www.blogger.com/blogger.g?blogID=48019486#overview">
I don't know why these https://blogger.com/blogger.g?blogID=48 and https://blogger.com/null gets added automatically. It redirecting me back to the admin post section or to blogger sign in section if I am not Signed In.
My Blog - www.lifewithdata.com
Found the answer here: https://productforums.google.com/forum/#!topic/blogger/5MU_HH5T7rA
you must add the address of the page or post.
only works in the non-dynamic templates.
Peace be upon those who follow guidance, I was able to make internal links within post on blogspot platform by using anchors like below:
sectionName
<a name="sectionName">sectionName</a>
I was using a theme based on Dynamic Views and worked for me, and changed it to other theme and the links still work.

Use the first amp-img on the page for facebook share

I have a blogger website that I have recently migrated to amp-html.
I am having problems with the usage of amp-img tag. Firstly blogger does not recognize the First amp-img as the first image of the post and fails to make the default thumbnail out of it.
Also when sharing a page on facebook using amp-share, the selected image is invariably the fallback image, that I have tagged with og:image property.
The image resolution is more than the minimum mandated by facebook.
I have seen this arrangement working fine on other websites. Can someone please have a quick look here: Pratyush.info
A few days after posting this question I discovered that adding a noscript makes the image identifiable by blogger and can be used with data tags. So till google adds some inbuilt support for amp tags, may be this could be what someone is looking for.
<noscript><img alt="www.pratyush.info" height="382" src="https://lh3.googleusercontent.com/--vp_bO1ozGI/WPegTDKQJDI/AAAAAAAADnQ/FXdCyVKJkTwEj09XneY7csB2Vwd_zVQrQCLcB/milk-protein-intolerance-baby-cow-2160x1200.jpg" title="www.pratyush.info" width="680"></noscript>
DEMO
I think your problem is that your meta tag is incorrect, in the link you post is
<meta content='https://1.bp.blogspot.com/-agH78RbEntg/WMFULOdxPMI/AAAAAAAADUI/0zId8itGNnA8GawUbVZqeewxq1DzGumyACLcB/s1600/pratyush.info-default-news.jp' property='og:image'/>
Although the url is an image, the extension is not valid, try to change the name of the image to a valid image extension, like png or jpg
The data layout tag data:post.firstImageUrl include in the <head> tag will always return empty because the the post namespace is only defined within the the statement <b:loop values='data:posts' var='post'> which is present inside the Blog widget
Instead, you will have to use the data layout tag data:blog.postImageUrl in the og:image tag to get a high-resolution image. The code will be like -
<meta expr:content='data:blog.postImageUrl' property='og:image'/>

How do I make the title a clickable link on tumblr post?

I've been trying to figure this out for days, but basically, I'm trying to create it so that when I create a post on Tumblr, the title is clickable. At the moment, the only link is the tiny timestamp on the photo, and it's not obvious that some of my blog posts even exist.
I think this is the code I need to edit, but I can't work out exactly what I need to add:
<div class="inner">{block:Title}
<h4>{Title}</h4>{/block:Title}
I've tried adding: {Title} as suggested online, but that doesn't work at all. Can anyone help?
My website: http://wildwood-shore.tumblr.com

Linking to iframe pages

Is possible to link on sub page that is in iFrame?
So basically:
On www.domain.com/page I have just normal HTML page. And on that page I have iFrame where I get the content from www.anotherdomain.com.
Now on anotherdomain.com I have several subpages likes this:
www.anotherdomain.com/spage1
www.anotherdomain.com/spage2
etc.
Now the question is that is it possible to somehow link to one of these frames so that when user uses this link, it would go on one of these subpages. For example like this:
www.domain.com/page#spage2
so that then the www.domain.com/page would show on iframe the content from the page www.anotherdomain.com/spage1
If I have understood correctly, this is not possible but I just need some confirmation on this :)
Sorry for bad explanation. Ask more info if you didn't understand what Im trying to explain.
If I understand what you are asking for correctly:
When a visitor goes to domain.com/page#spage2 you want them to see a url of: www.domain.com/page with the content of anotherdomain.com/spage2
If this is correct, I don't think you can do this with just HTML. You would need either regex in a .htaccess file or with PHP taking advantage of the $_SERVER["PHP_SELF"] call.