Google+ offer a comments option for websites. They also offer a comments counter like so:
When implementing this, it simply outputs "xx comments". This outputs as an iframe with styling stripped out. I want to keep the styling of the rest of my site, and also want to remove the word "comments" only to show the comment number. Is there an easy way to do this?
There is no way to style the content of an iframe, but you can crop the visible text inside using CSS: iframe { width: 14px; }
Related
HELP ME please.
When I create a new section within the portfolio part of my Squarespace website, it is greyed out. See link below. I can still add content to the section. As you can see there is a 'BACK' button and variations of background with either an image or plain colour. But why is there a white/grey overlay on the section?
If I move the section up then the image gallery comes down into the second position, and has the grey overlay. So it seems it's the second section position which has the problem. If I create another section below the second one it's completely fine as well.
I hope this is an easy one to fix.
thanks! 🙂
https://www.regardsfromyourfuture.com/future-paintings/project-one-44zcm-57lgb-6glfy-p2f7c-nbdk9-76lc2-zh5z9
That is happening due to the following rule that is within your Custom CSS / CSS Editor:
.page-section:nth-child(2) {
background: #000 !important;
filter: opacity(30%);
}
That rule was likely written specifically for a different page, but was not written such that it only applies to said page. You'll want to examine your other pages to see if any page is benefiting from that rule, whereby the second section of the page has a lower opacity. If I were to guess, I'd say it's a section on a page that only has a background image with no content.
If there is no other page that benefits from the rule, you can simply delete it from your CSS.
On the other hand, if there is a page (or set of pages) that benefits from the rule, you would want to edit the rule so that it is specific to a single page (or set of pages) by adding the collection ID classes to the beginning of the rule.
Is there a way to format part of a Tumblr title? For example, I'd like to be able to italicize one word in a title. Anyway to do that?
Tumblr reads titles using the {Title} tag, so how it is rendered is determined all at once not word for word. This means that the style of your titles universally depends on the CSS used around them in the hard coding. If you use the traditional manner of titling your posts which is placing the title in the "Title" area, then no this is not possible. An alternative method is to not put a title in that area and instead just post all information into the body.
You would then use the "html" view to code the header as you wish to see it. Default tumblr layouts use h1 /h1 around their headers so this is generally what you would want to use. The reason you are going into html view is because there is no option currently on default tumblr to increase the font size outside of html view.
The very first coding in the html view should be similar to this:
<h1>Title with one word in <i>italics</i></h1>
Once done, turn off html view, press enter to get off of the title line and continue your post.
I'm writing some code that will go into the description box of a Tumblr page, in order to set a small tagline on the left of the header, and a search box of the right side of the same line. I've been trying to use a table with two cells and the width of the page to achieve this. However, it seems that the description box doesn't accept the <table> tag (it appears to work in the preview but not in the actual page).
Is there any other way to achieve inline content, with one justified left and the other right?
It is possible to include HTML elements in your Tumblr description.
There are two ways to achieve this:
Escape any HTML you are adding to the description box. This tool can help.
Modify the themes HTML and take advantage of Variable Transformations. In this scenario the {Description} tag would be replaced with {PlaintextDescription}
Either method should allow you to add HTML elements.
Also, I would take the advice of the comment made above. There is no need to use a table for the layout your trying to achieve.
I've implemented a "Skip to Content" link on my site and hidden it off screen (except when :focused). However, I've noticed on some pages where I haven't explicitly defined a meta description, Google picks up "Skip to Content" for its preview snippet in search results.
Is there a way to format or mark text that shouldn't be used in a search snippet? My case is a skip to content link, but I can imagine other similar needs. However, in this case, it must remain accessible (so no display:none, etc.).
I supposed what I'm looking for is some version of rel="nofollow" but for the next and not just the link.
tl;dr: "Skip to content" link appears in search snippets. That's not desired.
I don't think there is such a way for the general Google search.
Google allows customers of their Google Search Appliance and Google Mini products to state which content should be ignored for the search by using googleoff and googleon in HTML comments; see Excluding Unwanted Text from the Index. But this doesn't work for the public Google search, of course.
I think the bestway to try to prevent that problem would be to use a meta description: http://support.google.com/webmasters/bin/answer.py?hl=en&answer=79812
<meta name="description" content="A description of the page" />
it must remain accessible (so no display:none, etc.)
Well, if you're OK with using JavaScript, you can still use style="display:none" in your div or span tag and add the following to your JS file:
$(document).ready(function() {
document.getElementById('skip').style.display = "block";
//Or shorter with jQuery
$('#skip').show(); //Alternatively: fadeIn()
});
I have been researching this for a few hours and I feel that I can't decide on what is right or wrong. This was asked before on Stackoverflow, but a couple of years ago so I thought I could ask again. I want to include H1 tags on my pages but hide them, because I have graphic in my banner, but I was taught to use an H1 tag for accessibility reasons.
I discovered that this can be considered SEO spamming and can get a site blacklisted, I do not want this. It was also discovered that using H1 tags can greatly increase the sites SEO when using relative headers.
So I want to use them and hide them, for two reasons, but avoid Google blacklisting my site, is there a standard accepted method to doing this, or will I need to choose between risking blacklisting and helping those with visual disabilities a better user experience?
Thanks in advance for any advice.
The simplest method is just to include the image with an alt attribute in the h1:
<h1><img src="banner.png" alt="my banner text" /></h1>
And you can be assured that you won't be penalized for that. I have not seen any definitive information that doing image replacement will result in a higher ranking than using alt properly. Like most SEO lore, there is very little data. That said, as long as you are not trying to game the search engines and present something different to the user and the search engine, it's unlikely you'll be penalized for using image replacement.
If you do do image replacement, be sure to position the text off-screen by using absolute positioning or negative margins rather than display: none or visibility: hidden so that screen reader users can access the content.
You're not improving accessibility if you hide headings.
If you do so with display: none; or visibility:hidden;, it's as if you never added them in the first place: they won't be read by screen readers and obviously won't be displayed if CSS are enabled.
If you do so with negative text-indent or left absolute positioning, only blind people will read them but not partially-sighted people that don't use any screen reader, and they're way more than blind people (perhaps 10 times).