The standalone "Follow" button I cobbled together ten years ago broke following some mysterious changes from Google.
|
Here's how to fix it.
About 10 years ago, I described how to create a stand-alone "Follow" button that is more compact than the original widget.
Well something changed at Google and my button no longer works.
But I've rewritten it, and now it does again.
Do you follow?
It isn't subscribe-by-email.
The Followers widget displays both a Follow button and the avatars of those who follow your blog (publicly) in this way.
It's kind of nice, but takes up a lot of screen real estate.
If, in the past 10 years, you used my little tutorial to add the button-only version to your blog, I am sorry to say it's no longer working.
But if you return to the tutorial you will find a revised version that works just fine.
Hi, you can easily make a simple Follow link look like a button using a little bit of CSS. Along with having an image at the left too, using the :before pseudo element. I tried to put a simple example in the comment too but looks like it doesn't allow some HTML or CSS to be entered in here. It gives more easier control over look and feel of button through CSS. Also just using a link with that URL with a target="_blank" (which opens in in a new tab) would work too without needing javascript in it.
ReplyDeleteP.S. about another topic, you have some useful posts about sorting posts by labels, but is there any way in blogger to sort posts by author?
This would be helpful with blogs that have multiple authors. Like for example using someblog.blogspot.com?author="author name" or something, instead of ...?label="label name" .
One can make lists with different labels but so far I haven't seen a way of sorting posts by author. It is possible inside the blogger dashboard itself, as given in this support article https://support.google.com/blogger/answer/9675453?hl=en
But it doesn't work for a blog in case of sorting by author.
The title:"search term" works for blogs too. That is, you can actually search only the titles of the posts like this :
someblog.blogspot.com?q=title:"search term" or just enter title:"search term" in the blog's search box. Not very useful as one may not always have relevant text in the title alone, but one can still search only the title text instead of the usual entire post-body text search. Similar thing doesn't seem to work on the blog for author, unfortunately, but it works inside the dashboard of a blog.
We don't want to use author name as a label (which seems to be the only way as some suggest elsewhere) as it feels kinda odd because labels are all based on topics or subject of the post father than the person posting it.
P.S. A search box would be really useful in your blog. Currently I cant find one on this blog.
Interestingly, the OR and NOT search operators work for search terms too, just like they do for labels. For example, searching for cow|dog brings up posts with either cow or dog mentioned in it. And cow -dog brings up posts with cow but without dog mentioned in it.
Also, emoji search works too on blogger blogs. That is, if your post has an emoji, and you search for that same emoji in search bar, then it returns that post as a result.
Thank you, Pradeep! That is a lot of supplemental thinking.
DeleteThe javascript component in my revised post is to emulate as closely as possible the new link in Google's original Followers gadget. That includes a pop-up, which must be scripted.
The difference is a lot more obvious on desktop.
The new Follow window, by the way, is less functional than the old one. For example, it does not include the option of following privately.
You are right that there is no native way to filter by author. I agree that there should be!
DeleteFor the boolean searches, I emphasized label searches because that gives the blog owner greater control over what is shown.
But at least one of my examples (in the "Not" post) includes a regular keyword (text) component.
I'm thinking now that it may have been the html elements in my example that did not let that example of mine to get posted. So here is the CSS part only. I believe you can add a class="follow_link " and a target="_blank" to your link and see if it works well for you.
ReplyDelete/* begin CSS styles */
a.follow_link {
display: inline-block;
font-size: 16px; /* you can change text's font size as needed */
font-family: arial,sans-serif; /* Even set a different style if you wish */
font-weight: bold;
border: 1px solid rgba(125, 125, 125, 0.64);
padding: .25em .8em;
border-radius: .5em;
color: #000; /* the text's color can be changed too */
background: linear-gradient(to bottom, rgba(125, 125, 125, 0.01) 0%,rgba(125, 125, 125, 0.16) 100%);
box-shadow: .1em .1em .3em -.05em rgba(125, 125, 125, 0.54);
}
/* the following is the pseudo element for the image before text, if required */
a.follow_link:before {
content: "";
width: 22px;
height: 22px;
display: inline-block;
vertical-align: middle;
margin-right: .35em; /*while I prefer em, you may use px , if you prefer */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnkP5QXZ_gLB6cRmvNRks4qjoKfvSf9fYhFb_HilmB_aKkIEkpAzKuEuBzBTY0PzwdOL4sGLta0cDb2cbY92YF2GOiQBOWaPT7X-OFIlgowy1Nus10esmrdxWdqgeYrj7m01SJrruLB_OH/w77-h22/google-followers-button.png) top left no-repeat; /* this is link of your same follow image, but only logo part will be seen. I'd suggest to crop it to a square so that it becomes even smaller in size. Or use another image itself, as you wish. For example you can instead use a 22 by 22 px Blogger logo or a newer Google logo here. Just change the URL but keep in mind its size in pixels to match button size. */
background-color: orange; /* optional - this will be seen when image isn't loaded */
border-radius: .2em; /* just small rounding at borders */
}
/* and the below is for aligning the text in the span with the image */
a.follow_link span {
display: inline-block;
vertical-align: middle;
}
/* end of CSS styles */
/* you may remove comments from CSS. These are just for brief explanation */
I hope this is helpful. If there are any typos in code let me know. It is hard typing into the small comment area.
All you have to do is to create a regular text link around a text that says Follow or any other word like Follow this blog, and create a link for that word or a phrase. Then look at its HTML and add the following HTML attributes to the anchor link element's a tag:
1. Open in new tab/window, add this attribute : target="_blank"
2. To implement above CSS styles ass this attribute : class="follow_link"
I'm unable to post an example link (which is an anchor tag with above attributes included in it), as the Blogger comment apparently does not allow me to post that here.
You can just use a link like this (this is your blog id) to create the text link:
https://www.blogger.com/followers/follow/874282079821965484
And remind users to use their blog id there instead. If HTML and CSS in above example are properly used, you should get a text link which will look like a nice button.
With this you'll have the advantage of changing text size of button size, colours, pseudo-image, etc. simply by tweaking the CSS parameters.
Also I believe a text link may be more screen-reader friendly than an image link.
If you're quite comfortable with CSS you can also add CSS hover, focus, and active styles.
For example:
a.follow_link:hover, a.follow_link:focus {
filter:brightness(1.2);
}
a.follow_link:active {
filter:brightness(0.8);
}
to make it feel even more like a button.
ALSO, This will also work for your link example too which uses javacript link in the a tag, in which case, all you need to do is add the class parameter only to your a element and simply replace the image element by text.
Hope this works for you and helps!
And you're right, the javascript creates a pop up window with fixed dimensions. As most visitors these days (in my country) are via mobile devices, a target _blank that opens in new window is works fine for both.
Hello Adam.
ReplyDeleteI know you've probably answered this question, but is there a way for blogger to allow someone to subscribe by email to a blog in a manner similar to how you get notifications if people make comments in this particular blog post. If I click "notify me", I immediately get an email from blogger. Why can't blogger send an email to someone when I post something. I assume privacy reasons?
I apologise if you've alrerady addressed this,
thanks
Liam.
Hi Liam, this blog post seems to have become a kind of town meeting for general questions. Not a problem! just unexpected.
DeleteBlogger used to have a built-in subscribe-by-mail feature but today you have to set this up with a third-party provider. There are many of these and they are all different in terms of features and pricing and other things. (Most have a free tier.)
I have written about this and at one point shared some thoughts about picking a provider.
Other posts about this cancellation are in here someplace too.