Here's a very easy way to replace the "Location" text in the location geotag of your Dynamic Views post.
Blogger ignores what you specify in the Layout section and reverts to a plain "Location:" label. But a few lines if CSS can fix that and make it look better. In this example I'll change it to a push-pin location point style. Scroll down for the code.
I still like using Blogger's Dynamic Views templates for certain projects. For example, the "Snapshot" theme makes a good Instagram substitute for my crappy nature shots (family and friends only; sorry readers).
I like that Dynamic Views will display the post's location tag, but I didn't like how ugly and plain it was. Just a big fat "LOCATION" which you can't edit. It looks like this:
I wanted something similar to how G+ handles location tags, with a simple and minimal pushpin beside the address and link.
Although in most Blogger templates you can easily modify the label that accompanies the geotag, this doesn't work for Dynamic Templates. However adding some simple custom CSS is an easy workaround.
Go to (Template → Customize → Advanced → Add CSS) and paste this code:
The last line is optional. I think it looks better moved to the side.
That 3rd line adds whatever symbol or text you prefer. I added the pushpin, but you can change it to anything, like "I was at ". Be aware if you choose something too long, the spacing will be off and it will take a lot of CSS fiddling to fix it. So just choose something short.
Now your location tags will look like this:
It's a tiny detail, sure,, but was bugging me.
This is only for Dynamic Templates. All other normal themes won't need this because they will respect whatever you specified in the (Layout → Posts) settings.
Blogger ignores what you specify in the Layout section and reverts to a plain "Location:" label. But a few lines if CSS can fix that and make it look better. In this example I'll change it to a push-pin location point style. Scroll down for the code.
 |
| Editing the Location geotag in Blogger Dynamic Templates |
Background: Ugly label
I still like using Blogger's Dynamic Views templates for certain projects. For example, the "Snapshot" theme makes a good Instagram substitute for my crappy nature shots (family and friends only; sorry readers).
I like that Dynamic Views will display the post's location tag, but I didn't like how ugly and plain it was. Just a big fat "LOCATION" which you can't edit. It looks like this:
 |
| Normal Dynamic Templates location tag |
I wanted something similar to how G+ handles location tags, with a simple and minimal pushpin beside the address and link.
Although in most Blogger templates you can easily modify the label that accompanies the geotag, this doesn't work for Dynamic Templates. However adding some simple custom CSS is an easy workaround.
Add this CSS code to your blog
Go to (Template → Customize → Advanced → Add CSS) and paste this code:
.geolocation-info {visibility: hidden;}
.geolocation-info a.url.fn {visibility: visible;}
.geolocation-info a.url.fn:before {content: "📍 ";}
.article .article-footer {text-align: right;}
The last line is optional. I think it looks better moved to the side.
That 3rd line adds whatever symbol or text you prefer. I added the pushpin, but you can change it to anything, like "I was at ". Be aware if you choose something too long, the spacing will be off and it will take a lot of CSS fiddling to fix it. So just choose something short.
Now your location tags will look like this:
 |
| Modified Dynamic Templates location tag on desktop |
 |
| Modified Dynamic Templates location tag on mobile |
It's a tiny detail, sure,, but was bugging me.
Comments