Showing posts with label "Add CSS". Show all posts
Showing posts with label "Add CSS". Show all posts

Saturday, April 2, 2016

Disable AdSense Gadgets, On Static Pages

One problem with AdSense, that some blog owners have reported, is that AdSense ads are not permitted on pages with very little AdSense relevant content.

Unfortunately for some blog owners, the responsibility for preventing this is left to the blog owner.

Blogs with static pages, and AdSense gadgets in the sidebar, are a problem here. Static pages with little blog relevant content - such as label indexes, expanded owner profiles, special gadgets like Followers displays - cause problems with the AdSense ad classifier - and can cause blogs to lose ads.

As an AdSense publisher, the blog owner is expected to ensure that ads are not displayed on unsuitable blog pages.

Fortunately, it's not difficult to block AdSense ads from static pages. Just add a CSS rule with a "static page" conditional, to block display of each AdSense gadget.

<b:if cond='data:blog.pageType == "static_page"'>

If you want to block gadget "AdSense1" from displaying on all static pages, that's a simple CSS rule, added using "Add CSS".

Note that I wrote this to selectively block AdSense gadgets from displaying - but you can use it with any gadget, that you need to block. AdSense is simply one gadget that needs to be selectively displayed.


<b:if cond='data:blog.pageType == "static_page"'>
<style>
#AdSense1 {display: none !important;}
</style>
</b:if>


As always, be aware that the blank line above and below the code, as displayed here, is not intended to be decorative. Any time you add CSS rules, the blank line is required, to separate each CSS rule - and make each rule operational.

If the blog publishes actual blog content on some static pages, conditionals will be a bit more complicated. This is one more reason why static pages are not typically used for blog content.



Owners of #Blogger blogs with AdSense ads, that use static pages without AdSense relevant content, need to block ads from displaying on such pages. Failure to display ads selectively can cause problems with ads on the blog.

Fortunately, a simple CSS rule can be used, to block ads from static pages.

https://productforums.google.com/d/topic/blogger/7ANVOrQuvIo/discussion

https://productforums.google.com/d/topic/blogger/-p6mdLF2B08/discussion



Friday, December 5, 2014

Removing Author Information From The Blog

Not everybody likes to be known, everywhere.

Some folks prefer to publish a blog, without their name appearing. Anonymity is a goal, for many blog owners.

Blogs using both Dynamic and non Dynamic (Layout, Designer) templates can be made anonymous - but different tasks are involved. Fortunately, both tasks are simple.

We've been advising how to achieve anonymity, with blogs published to non Dynamic templates, for many years.

Both the Author Name, and Author Profile below the posts, are removed, using the proper selections in "Configure Blog Posts". In the "Post Page Options", the second option (has a modifiable caption, which by default is "Posted by") can be de selected, to remove the name. The twelfth option, "Show Author Profile Below Post", can likewise be de selected.

With a blog published to a Dynamic template, the solution for this need is not obvious - but it's not complicated, either. Use the "Add CSS" wizard, in the Template Designer "Advanced" menu, and add one CSS rule.

.publish-info {display:none !important;}
I advise people to include blank lines before and after the rules being added. If there are other rules, previously added using "Add CSS", with blank lines, you won't necessarily need a second blank line - but you do need one blank line, between each different rule.

There are other tasks needed, to publish a blog anonymously - but removing the name from the blog is one of the most visible changes that you can make.

>> Top

Wednesday, October 29, 2014

Blogger Magic - Hiding The Blog Pager And Blog Feed Subscription Lines

One of the neatest magic tricks is to make something disappear, with just a flick of the wrist (whether or not holding a "magic" wand).

We see occasional requests to make template components disappear. Many times, we end up recommending editing the blog template. Sometimes, unwanted components are part of the post template - and we have to explain why editing the post template is not a good idea.

Some template components, when properly identified, can be made to disappear with the proper CSS rule. CSS rules can be added, using the Template Designer - and do not require editing the template.

Even better news, CSS rules added using "Add CSS" are persistent. Even changing the blog template - or resetting the post template - does not erase CSS rules, added using the Template Designer.

Two post template components, regularly requested for removal, are the "Blog Pager" caption lines
Newer Posts   Home   Older Posts
and the "Post Feeds" caption
Subscribe to: Posts (Atom)

To hide these components, a simple one line CSS rule is necessary, added using the "Add CSS" option in the Template Designer.

For the "Blog Pager" line:
#blog-pager {display:none}
For the "Posts Feeds" line:
#post-feeds {display:none}
As with any addition using "Add CSS" always precede and follow any added rule, with a blank line.

This trick, as with many magic tricks, is easier to do, than to explain. Was I to add this to my blog, I would have been done, long ago.

>> Top

Wednesday, April 21, 2010

The Template Designer Uses Cascaded Code

CSS stands for Cascading Style Sheets - and the new Designer Templates use CSS to full advantage.

The new Layout templates, with the GUI "Fonts and Colors" and "Page Elements" wizards eliminated the need to edit template HTML to change fonts or colors of many template objects, or to add or move objects around the screen. The Template Designer goes even further, in GUI wizardry.

We can select template backgrounds, layouts, and an expanded array of fonts and colors, all without editing template HTML.

Besides the expanded GUI wizardry, the CSS concept is used to full advantage, where we can enter additional CSS rules. You need only enter the CSS rule into the Advanced - "Add CSS" wizard, to add or override any CSS rule in the template header.

In Blogger Help: Editing CSS in the Template Designer, we see a simple example to get us started.
Head over to the CSS field located in the Advanced | Add CSS tab in the Template Designer. Once there, simply drop in the following lines of code:
.Header {
text-align: center;
}

Just paste that into the "Add CSS" window, and watch the Header text jump into center, in the preview window below, right before your eyes. Don't blink.
If you like what you see, just click the orange Apply to Blog button and your header image will be saved. If you ever decide to remove or change the header image at a later point, it's as easy as deleting or swapping out the image code from the field.

In other words, there's no need to use the "Edit HTML" wizard to add, or to change, any CSS rules. Just add what you need, in the "Add CSS" window. It's that simple - a live preview, and one button to apply the changes previewed.

A second example is provided, and this one should be of great interest to many blog owners.
The second CSS change we'll cover is how to add your own background image to your blog.

When using "Add CSS", always follow each individual section of code by hitting "Enter", and adding a blank line. Every different CSS code addition should be separated from the one above it by a blank line, to make each section of code work properly.

If the Template Designer GUI controls take care of 90 of 100 of the needs to tweak template HTML, the "Add CSS" wizard should take care of 9 of the remaining 10.

Navigate» Become author for this Blog