Google's Custom Search Engine styles have been changed so the ad-blocks at the top/right of the search results have a different background colour. Ref: http://googlecustomsearch.blogspot.ie/2012/06/ads-background-colors-in-custom-search.html
It looks like we cannot control this colour - it's been chosen to "contrast in a visually appealing way with the default [or user-selected] background color".
In at least one of my blogs, though, the contrast between the ad-background colour and the outer background color selected in blogger isn't quite so "appealing". :-(
I'm still considering whether to change my outer background, or to experiment with different CSE custom styles to see if one is a better fit. Luckily most of my in-post features have been set up with CSS rules, so I can change them easily by adding a new CSS rule to my template.
Custom Search Engine ad block background color changes
/
Monday, June 18, 2012 /
Posted in
CSE,
from Blogger-HAT Lite,
Quick-tips
Google Advertisers Network - now has UK advertisers
/
/
Posted in
Advertising,
from Blogger-HAT Lite,
Google Affiliate Network,
Quick-tips
Google Affiliate Network (one of the alternatives to AdSense LINK, which lets you deal with specific, relevant, advertisers) has signed up 30+ UK based advertisers. Ref: http://googleaffiliatenetwork-blog.blogspot.ie/2012/06/announcing-new-uk-advertisers.html
(When you're looking for them, don't forget to set Relationship status to "available", instead of the default "approved".)
Fingers crossed some of these will also be suitable for my Ireland-focussed blog!
(When you're looking for them, don't forget to set Relationship status to "available", instead of the default "approved".)
Fingers crossed some of these will also be suitable for my Ireland-focussed blog!
Knowing about better pictures Google Maps & Earth
/
Thursday, June 14, 2012 /
Posted in
from Blogger-HAT Lite,
Maps,
Quick-tips
If you blog about geographic locations, or add Google custom maps to your blog, then it can be very helpful to know when the satellite photos for a certain area are updated. Among other things, this is a reminder to check your map for any details that have changed.
Google's new Follow Your World service tells you just that.
In short, you sign up with your google account, and register to get email alerts when new images for a specific point are availabe in Google Maps or Earth.
Unfortunately you need to select on specific point, not an area, so there's a risk that you might miss updated if you're just a few metres out. But it's beta at the moment, so this may change in future
I haven't seen an official announcement, but it's mentioned in this post on the latLong blog
Google's new Follow Your World service tells you just that.
In short, you sign up with your google account, and register to get email alerts when new images for a specific point are availabe in Google Maps or Earth.
Unfortunately you need to select on specific point, not an area, so there's a risk that you might miss updated if you're just a few metres out. But it's beta at the moment, so this may change in future
I haven't seen an official announcement, but it's mentioned in this post on the latLong blog
More info in Google Trends Hot Searches lists
/
/
Posted in
from Blogger-HAT Lite,
Quick-tips,
Trends
Bloggers who want to write about what's ultra-current in the USA might like the changes to Hot Searches list in Google Trends:
Even if you don't want to blog about these topics, you might like to check them before you post, in case you can associate your somewhat-related post to something that lots of people are looking for right now (which is what Google means by "hot"). Search traffic gained this way may or may not be useful for building long term readership, but can be a nice short-term boost.
- The list of searches is more visual,
- Related rising search terms are grouped
- You can see more information about those searches
Even if you don't want to blog about these topics, you might like to check them before you post, in case you can associate your somewhat-related post to something that lots of people are looking for right now (which is what Google means by "hot"). Search traffic gained this way may or may not be useful for building long term readership, but can be a nice short-term boost.
How to put a working Twitter message into your blog
This article shows how you can embed a fully-featured message from Twitter, right inside your blog, which lets visitors re-tweet, favour it - and follow you in Twitter.
If you're reading Twitter, and see a tweet that you want to blog about, it's easy to copy-and-paste the content into a blog post or a gadget. This brings the text and the links (and photos etc) that are part of it - like this:
To do this, you just need to get the HTML-embed code for the tweet from Twitter, and install it into your blog.
Go to the perma-link page for the message, by clicking on Details in the extended view.
On the webpage that opens, click Embed this Tweet, which you can find at the bottom of the page. (Notice that the URL for the tweet is showing in the address bar at the top of the screen.
Copy the code from the HTML tab of the box that opens. At the moment, I recommend choosing an alignment, because without it, the code hasn't been working - hopefully this will change soon). It will look something like this:
If you have other Twitter widgets etc anywhere else on your blog, then you need to leave out the last line, ie
Put this code into your blog in the same way as any other external HTML.
If you've put it into a post, then you need to publish the post immediately from the HTML view:
If this happens (or if you edit the post again after publishing it) you need to go back to Edit HTML mode, and add them in again.
Just to be clear where these tags go, I've highlighted them in this code example:
If you use a test-blog to get your posts right before you publish them in your blog, then you should also double-check the <p> </p> tags in Edit HTML mode as the last thing you do before publishing the post in your for-real blog.
However if the message has been deleted from Twitter, your readers will see this instead:
Effectively, if the message not in Twitter any more, the content is still shown, but the extra features aren't available.
Installing 3rd party HTML into Blogger
Other Twitter gadgets
What is RSS / Subscribe to Posts
Giving your blog an email subscription option
Getting your posts right before you show them to your readers
Showing Twitter messages: copied text vs full-featured tweets
California drowning out the window side. instagr.am/p/LLXlAexc3mBut the embedable-tweets feature makes it almost as easy to show the actual tweet inside a post (or in a gadget in your header, footer or sidebar). And if you use this feature, your readers will be able to use the Twitter features that go with a tweet:
- View photos / videos, in the same way that they can in Twitter
- Reply, retweet or favor the Tweet
- Follow the tweet's author with a single click
- Click on the author’s @username to see their Twitter profile page,
- See the date in the lower left corner of the Tweet
- See replies, retweets and favorites on the tweet's Details page.
To do this, you just need to get the HTML-embed code for the tweet from Twitter, and install it into your blog.
How to get the code to display the embeddable Tweet:
Open the expanded view of of the tweet, by clicking on either the word "expand" immediately under it, or the time-indicator on the right hand side if you can't see "expand".
Go to the perma-link page for the message, by clicking on Details in the extended view.
On the webpage that opens, click Embed this Tweet, which you can find at the bottom of the page. (Notice that the URL for the tweet is showing in the address bar at the top of the screen.
Copy the code from the HTML tab of the box that opens. At the moment, I recommend choosing an alignment, because without it, the code hasn't been working - hopefully this will change soon). It will look something like this:
<blockquote class="twitter-tweet tw-align-center"><p>These buttons dont fly-in, hover, shine, zoom, slide, pop out of egg-shells, sing songs or wash dishes.<a href="http://t.co/MAKJPf5X" title="http://bit.ly/JPNn04">bit.ly/JPNn04</a> via@BloggerHAT</p>— Blogger HintsAndTips (@BloggerHAT) <a href="https://twitter.com/BloggerHAT/status/202068733534011392" data-datetime="2012-05-14T16:11:54+00:00">May 14, 2012</a></blockquote>
<script src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
If you have other Twitter widgets etc anywhere else on your blog, then you need to leave out the last line, ie
<script src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
How to put the embeddable Tweet into your blog:
Write the rest of your blog post. (Maybe put in some marker text to show where it's going to go).Put this code into your blog in the same way as any other external HTML.
Hint: When putting HTML into a post, I usually write the post first, then put something like "XXXXX" where I want the tweet to go. Then I switch to the HTML view, use Ctrl/F to search for XXXXX (or whatever I used), so I know where to put the code.
If you've put it into a post, then you need to publish the post immediately from the HTML view:
- Do not go back to Compose mode.
- Do not Preview the post before you publish it
What you accidentally Preview or use Compose-mode - or edit the post again?
If you go back to the WYSIYIG / Compose mode, or if you use Blogger's preview function, then the <p> and </p> tags around the tweet-contents are removed - this is a feature of how Blogger's post-editor works.If this happens (or if you edit the post again after publishing it) you need to go back to Edit HTML mode, and add them in again.
Just to be clear where these tags go, I've highlighted them in this code example:
<blockquote class="twitter-tweet tw-align-center"><p>These buttons dont fly-in, hover, shine, zoom, slide, pop out of egg-shells, sing songs or wash dishes.<a href="http://t.co/MAKJPf5X" title="http://bit.ly/JPNn04">bit.ly/JPNn04</a> via@BloggerHAT</p>— Blogger HintsAndTips (@BloggerHAT) <a href="https://twitter.com/BloggerHAT/status/202068733534011392" data-datetime="2012-05-14T16:11:54+00:00">May 14, 2012</a></blockquote>
If you use a test-blog to get your posts right before you publish them in your blog, then you should also double-check the <p> </p> tags in Edit HTML mode as the last thing you do before publishing the post in your for-real blog.
What your readers will see
Web-browser visitors:
While the message that you have embedded is still in Twitter, then visitors to your blog on a web-browser see it (the tweet) displayed along with the date it was posted, the author's Twitter ID, and links for replying, re-tweeting and favouring the message - like this:These buttons dont fly-in, hover, shine, zoom, slide, pop out of egg-shells, sing songs or wash dishes.bit.ly/JPNn04 via@BloggerHAT
— Blogger HintsAndTips (@BloggerHAT) May 14, 2012
However if the message has been deleted from Twitter, your readers will see this instead:
What happens when an embedded tweet is deleted?I guess this is the best way to find out:-)
— Blogger HintsAndTips (@BloggerHAT) May 30, 2012
Effectively, if the message not in Twitter any more, the content is still shown, but the extra features aren't available.
RSS-feed readers:
Visitors who read your blog through an RSS-subscription will see .... coming soon, when I've seen what this post looks like in my reader!Email subscribers:
Readers who see your blog via email subscription .... coming soon, when I've seen what this post looks like in my emailRelated Articles:
Installing 3rd party HTML into Blogger
Other Twitter gadgets
What is RSS / Subscribe to Posts
Giving your blog an email subscription option
Getting your posts right before you show them to your readers
Wordle tag clouds - a logo maker for hard-to-illustrate blogs?
/
Friday, June 8, 2012 /
Posted in
from Blogger-HAT Lite,
Logo,
Quick-tips,
Wordle
One of my blogs is about some very abstract concepts, which are ever-so-slight difficult to illustrate in a way that's meaningful to the very wide range of readers.
Today I discovered Wordle - a tool that creates free-to-use graphic arrangements from lists of words - for example the words used in a website. http://www.wordle.net/create
Here's one for Blogger-HAT, to give you an idea - but there are lots of options and customizations, so lots of looks that can be achieved.
After you've made a wordle, the easiest way (IMHO) to get it into your blog is to do a screenshot, then use Paintbrush (or some other very simple picture-editor) to save it as a PNG file). The it can be loaded to your blog like any other picture.
Today I discovered Wordle - a tool that creates free-to-use graphic arrangements from lists of words - for example the words used in a website. http://www.wordle.net/create
Here's one for Blogger-HAT, to give you an idea - but there are lots of options and customizations, so lots of looks that can be achieved.
After you've made a wordle, the easiest way (IMHO) to get it into your blog is to do a screenshot, then use Paintbrush (or some other very simple picture-editor) to save it as a PNG file). The it can be loaded to your blog like any other picture.
How to put a gadget into a post in Blogger
/
Monday, June 4, 2012 /
Posted in
Article,
Blog layout,
Gadgets,
Post Editor
This article describes how to put a gadget into a blog post / page - or at least how to make it look like you have done so.
Previously, I've explaiend how to add a gadget to your blog. In that post, I said that the only place where you could put a gadget was one of the areas defined by your template - basically the header, footer or sidebar.
For gadgets where you get the HTML or Javascript code from somewhere else, it's easy to add the code to a post - see adding code from external sources to your blog for more information. But for gadgets from the Add a Gadget list, there is no way to do this.
But it's fairly easy to make it look like you have put a gadget into a post or page, provided you're willing to accept the risks of editing your template.
The way to do this is by putting the gadget below the blog-posts area, putting any further post-content into another HTML-gadget under this, and then setting both of these up to only show on the specific post or page that you want the gadget to be "in".
While this is tedious, I don't expect the restriction of putting gadgets inside posts to be changed anytime soon. (Go on Blogger ... prove me wrong!)
1) Make the post or page
Give it a title, and if there is any content that you want to put above the gadget, then add it now.
2) Publish the post / page.
If you use a Post, remember that it will go out in your RSS feed - and it could look strange for your subscribers to see a half-written post - make sure that what you'd doing is worth any confusion that this may cause.
And if you use a Page, you may need to adjust the Pages gadget to not show it, depending on what how visitors will access the page.
Despite these side-effects you need to publish the post/page now, before the gadget is added, because you need its address later on. So take note of the URL of your published post.
3) Add the gadget to your blog in the usual way.
Position it immediately underneath the Blog Posts gadget. Find out the gadget-ID, and keep a note of it.
4) If there is any content that you want displayed after the gadget, then
5) Set up which page/post your gadget is shown on:
Edit your template (don't tick the expand widgets checkbox).
For both of the gadget-IDs that you noted (the one that's going "inside" the post, and the one that contains the rest of the "post"), change the template so that they are only displayed on the Page or Post that you created in the first step.
The way to do this is very similar to only showing a gadget on your home page, except that instead of
One issue I've found is that the gadget is left-aligned, and there is no way to make the "post" text flow around it if it doesn't take the entire post-width.
It may be possible to centre the gadget within the post, by putting this code around in in the template:
That said, I haven't tried this yet, and there may be some extra things to think about here. Let me know if it doesn't work, and I'll try to find a way to solve any problems.
Adding a gadget to your blog
Finding the id for a gadget
Using the post-editor or generate HTML
The Pages gadget: a menu bar for Bloggers
Showing a gadget on your home-page and no other pages
Advantages and disadvantages of editing your template
Putting AdSense ads into posts
Gadgets and Blog-posts
For gadgets where you get the HTML or Javascript code from somewhere else, it's easy to add the code to a post - see adding code from external sources to your blog for more information. But for gadgets from the Add a Gadget list, there is no way to do this.
But it's fairly easy to make it look like you have put a gadget into a post or page, provided you're willing to accept the risks of editing your template.
The way to do this is by putting the gadget below the blog-posts area, putting any further post-content into another HTML-gadget under this, and then setting both of these up to only show on the specific post or page that you want the gadget to be "in".
While this is tedious, I don't expect the restriction of putting gadgets inside posts to be changed anytime soon. (Go on Blogger ... prove me wrong!)
Follow these steps to put a gadget into a post or page:
1) Make the post or page
Give it a title, and if there is any content that you want to put above the gadget, then add it now.
2) Publish the post / page.
If you use a Post, remember that it will go out in your RSS feed - and it could look strange for your subscribers to see a half-written post - make sure that what you'd doing is worth any confusion that this may cause.
And if you use a Page, you may need to adjust the Pages gadget to not show it, depending on what how visitors will access the page.
Despite these side-effects you need to publish the post/page now, before the gadget is added, because you need its address later on. So take note of the URL of your published post.
3) Add the gadget to your blog in the usual way.
Position it immediately underneath the Blog Posts gadget. Find out the gadget-ID, and keep a note of it.
4) If there is any content that you want displayed after the gadget, then
- Use the post-editor (or any other tool) to generate the HTML code for this content
- Add an HTML/Javascript gadget: Put the code you made into the Content field, and position the gadget immediately underneath the gadget you added in step 3.
- Note the ID of this gadget, too.
5) Set up which page/post your gadget is shown on:
Edit your template (don't tick the expand widgets checkbox).
For both of the gadget-IDs that you noted (the one that's going "inside" the post, and the one that contains the rest of the "post"), change the template so that they are only displayed on the Page or Post that you created in the first step.
The way to do this is very similar to only showing a gadget on your home page, except that instead of
<b:if cond='data:blog.url == data:blog.homepageUrl'>the condition to use is
<b:if cond='data:blog.url == "URL-OF-THE-POST-YOU-MADE"'>>
How well does it work?
I'm still testing to see how well this approach works, and what gadgets it's most suitable for. Some, eg the Labels and Followers gadget, are likely to expand to fill the space available. So will Search - though if it doesn't then it might be as easy to just use a custom-search-engine, which will give you the code. AdSense gadgets will take the space required for the type of gadget you choose, but again it's probably simpler to just get the code from AdSense and put it into your post directly.One issue I've found is that the gadget is left-aligned, and there is no way to make the "post" text flow around it if it doesn't take the entire post-width.
It may be possible to centre the gadget within the post, by putting this code around in in the template:
<div style='text-align: center;'>
<b:widget id='XXXn' locked='false' title='YOUR-GADGET-TITLE' type='Text'/>
</div>
That said, I haven't tried this yet, and there may be some extra things to think about here. Let me know if it doesn't work, and I'll try to find a way to solve any problems.
Related Articles:
Adding a gadget to your blog
Finding the id for a gadget
Using the post-editor or generate HTML
The Pages gadget: a menu bar for Bloggers
Showing a gadget on your home-page and no other pages
Advantages and disadvantages of editing your template
Putting AdSense ads into posts
Content Experiements in Analytics
/
/
Posted in
Analytics,
from Blogger-HAT Lite,
Quick-tips
Content Experiments is a new feature in Google Analytics.
It claims to
I'm not sure how possible it will be for Blogger users to use it - suspect that it may need some serious template editing at lease.
It claims to
helps you optimize for goals you have already defined in your Google Analytics account, and can help you decide which page designs, layouts and content are most effective.
I'm not sure how possible it will be for Blogger users to use it - suspect that it may need some serious template editing at lease.
Translations - and better translations
/
/
Posted in
from Blogger-HAT Lite,
Quick-tips,
Translate
The translations widget now offers you - and your readers - a way to make better translations. More details here. Key thing to remember: if your readers offer suggestions, you have to approve them. So if you're the sort of blog who encourages this, make sure you keep on top of the approvals.
I've also found that by getting the gadget code from Translate, I'm offered the chance to track translations using Analytics. I'm not sure if this is an improvement over the standard widget or not, ie whether it perhaps picks up my code itself. Suspect not though, 'cos part of installing the gadget-code from Google involved adding their meta-tag to my template.
I've also found that by getting the gadget code from Translate, I'm offered the chance to track translations using Analytics. I'm not sure if this is an improvement over the standard widget or not, ie whether it perhaps picks up my code itself. Suspect not though, 'cos part of installing the gadget-code from Google involved adding their meta-tag to my template.
