Showing posts with label Template Tweaks. Show all posts
Showing posts with label Template Tweaks. Show all posts

Friday, December 20, 2019

Make A Custom Pages Index For Your Blog

Even earlier Blogger added static pages every bit a spider web log feature, spider web log owners bring been shout out for how to brand hidden or kind pages for their blogs.

When static pages, together with the Pages index gadget, were added, people started shout out for nearly indexing label searches together with external links inwards the Pages gadget.

There are several solutions to the demand to bring a Pages gadget that indexes archive / label searches, together with external URLs. Each solution has its advantages, together with disadvantages.

If you lot desire a Pages gadget for your blog, that indexes to a greater extent than than but static pages, you lot bring ii basic choices. Each pick gives you lot dissimilar possibilities.

  1. Replace the Pages gadget amongst a linklist. You tin index whatever URLs that involvement you, inwards a linklist.
  2. Use the Pages editor, inwards the dashboard Layout page, which lets you lot add together URLs of your choice, straight to the Pages gadget.

I've been advising people for several years, how to brand a horizontal index bar for the blog.

With most Blogger templates, the Tabs department contains CSS that displays whatever linklist positioned there, horizontally. This gives you lot the pick of using "Add a gadget", together with creating a linklist every bit an XML based "Linklist" - or 1 created every bit an HTML based "HTML / JavaScript" gadget - together with both choices bring advantages.

Use an XML based linklist.

If you lot hold back at the card bar on this blog, you'll come across how the active card push "lights up" when selected. The "Selected" characteristic is a CSS tweak - together with requires that you lot role a linklist that's XML based.

I created the card bar here, using "Add a gadget", together with tweaked the template code. The default Pages gadget is XML based - together with does non require the latter tweak.

Use the Blogger supplied Pages gadget.

As an alternate to using a linklist gadget, you lot could role the Pages gadget.

If you lot role the Pages Editor, together with you lot position the Pages gadget inwards the proper position, your blog, when displayed using a dynamic template, volition populate the dark card bar amongst your Pages list. When that happens, the dynamic persuasion card volition live on displayed every bit a drop-down list, at the far left of the card bar.

Saturday, December 7, 2019

Blogger Magic - A Static Domicile Page

Every week, someone asks for such a uncomplicated spider web log feature.
How create I bring a unmarried spider web log postal service e'er displayed, for the dwelling page?
There are many things that Blogger has notwithstanding to provide, too this is one. Influenza A virus subtype H5N1 blog, past times definition, contains a dynamic dwelling page, alongside the most electrical flow posts displayed.

Today (sorry, also late!), if y'all thought this blog, this postal service volition hold upward displayed, at the real tiptop of the dwelling page. Tomorrow, this postal service volition hold upward displayed, exactly non at the tiptop of the dwelling page. In a pair weeks, this postal service volition non hold upward displayed on the dwelling page, at all. That is how blogs work. If y'all desire to display anything else, y'all don't bring a blog.

That's the purist position, anyway. Influenza A virus subtype H5N1 spider web log is exactly a spider web site alongside the latest posts displayed on dwelling page (the master copy page), too hidden older posts (the archives).


(Update 2012/06/06): The recent "Search preferences" characteristic allows us to setup a truthful static dwelling page, alongside none of the complications below.
The non bad affair nigh this magic line a fast 1 on is that it's non hard to instruct into work. I categorise this line a fast 1 on every bit a snake, later on the former taunt from my mother
If it had been a snake, it would bring bitten you.

It's too then simple, really.
  1. Make the spider web log not display whatsoever posts, for dwelling page.
  2. Add a text gadget.
  3. Tweak the text gadget to solely display, when dwelling page URL is displayed.
  4. Use the Pages gadget, too index the residual of the blog. Add links using diverse label searches, pages, too posts, every bit y'all like.

Make The Home Page Not Display Any Posts
If y'all brand the master copy page non display whatsoever posts, y'all instruct an empty dwelling page. Settings - "Posts too comments" contains the "Show" setting. Set "Show" to "0 posts", too the spider web log has an empty dwelling page.

Add Influenza A virus subtype H5N1 Text Gadget
Add an HTML / Text gadget, positioned exactly inwards a higher house or below the "Blog Posts" gadget. Setup the novel gadget exactly similar the spider web log post, that y'all would desire permanently displayed. If y'all desire to purpose the postal service editor to compose the gadget, create that.

Tweak The Template
This is the 1 business office of this project, that requires whatsoever technique. Use the Template Editor, too edit the gadget template, for the gadget that y'all exactly added, too then the gadget solely displays when the dwelling page URL is beingness displayed.

Use The Pages Gadget, To Index The Rest Of The Blog
Once y'all bring a static dwelling page gadget, exactly add together links to the residual of the blog. You tin sack bring links inwards the novel gadget - too y'all tin sack bring an index inwards the spider web log header, or inwards the sidebar. Use your imagination here, it's your blog.

That's it. Really.

>> Top

Sunday, November 24, 2019

Owners Of Blogs, Alongside Images Inwards The Header, Study Changes Inwards Header Appearance

During the yesteryear few days, we're seeing a few reports inwards Blogger Help Forum: Something Is Broken, from owners of blogs that job an icon inwards the header, instead of or inwards add-on to, evidently text, claiming changes inwards the appearance of the header. The exact job study varies - that the icon has been resized, has shifted inwards position, has move yesteryear away pixelated, or has exactly disappeared.

We convey a rollup discussion, where nosotros are requesting details from each someone observing this job inwards their blog.
  1. What is the URL of the blog?
  2. What exact symptom are you lot observing, that's a problem?
  3. Does the spider web log job a Blogger or 3rd political party template?
  4. Does the spider web log job a Designer or Layout template?
  5. Has the spider web log been configured for a Dynamic template?
  6. How did you lot setup the image, that is inwards job on your blog? Did you lot job the Layout "Configure Header" wizard, did you lot upload the icon using the post service editor "Insert image" wizard, or other?
  7. If you lot used the "Configure Header" wizard, which Image / Placement options did you lot select?
    • From your computer.
    • From the web.
    • Behind championship too description
    • Instead of championship too description
    • Have description placed afterward the image
    • Shrink to fit
  8. Can you lot honor the icon on your computer? If so, what is the refer of the file, every bit uploaded? Is it a .bmp, .jpg, .png, what?
  9. When you lot setup / uploaded the image, what browser (name too version) was used?
  10. What browser (name, too version) are you lot using, right now, where the job is visible?

If you lot tin render details, delight create then every bit best every bit you lot are able, either hither or inwards the rollup discussion.

In cases where the URL of the icon inwards job tin endure edited, you lot may endure able to function or then your problem, yesteryear editing the precise URL. It appears that images hosted yesteryear Picasa, which are currently stored inwards a diverseness of sizes (which you lot may run into when you lot job "Insert image", for instance), are at in i lawsuit selected inwards a unlike way, when you lot create non explicitly choose the right size for your purpose.

Look at the icon at the elevation of the screen. If you lot were to hold off at it's URL, you lot would see:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9BwVdtm4TV84AnJgV3JOqaLKcjyZbqZeKDPxm8Ar_icEne6K-uEiPnXdZ3Ea_zP1JGW-ylAfkE5JQWcyWDt2ZWoJ2FtLNQwaD_zBm0WmQTqkY9Zygrom2DXex9mtn48FsM9cchysrl0pd/s1600-r/RBS+Header+4a.gif

If that icon had been uploaded using the electrical flow "Insert image" magician (in post service editor), or the "Configure Header" magician (in "Page Elements"), it mightiness convey the URL

http://1.bp.blogspot.com/_pzC_7PLtN-0/R_buGAu4D3I/AAAAAAAABCI/wxcsyLm3DoE/RBS%2BHeader%2B4a.gif

If the latter URL was correct, at that topographic point would endure iv aliases available:
  • Small: http://1.bp.blogspot.com/_pzC_7PLtN-0/R_buGAu4D3I/AAAAAAAABCI/wxcsyLm3DoE/S160/RBS%2BHeader%2B4a.gif
  • Medium: http://1.bp.blogspot.com/_pzC_7PLtN-0/R_buGAu4D3I/AAAAAAAABCI/wxcsyLm3DoE/S320/RBS%2BHeader%2B4a.gif
  • Large: http://1.bp.blogspot.com/_pzC_7PLtN-0/R_buGAu4D3I/AAAAAAAABCI/wxcsyLm3DoE/S640/RBS%2BHeader%2B4a.gif
  • Full Size: http://1.bp.blogspot.com/_pzC_7PLtN-0/R_buGAu4D3I/AAAAAAAABCI/wxcsyLm3DoE/S1600/RBS%2BHeader%2B4a.gif

If I had this job amongst my header image, I would edit the URL, inwards the template, too I would replace:
http://1.bp.blogspot.com/_pzC_7PLtN-0/R_buGAu4D3I/AAAAAAAABCI/wxcsyLm3DoE/RBS%2BHeader%2B4a.gif

with

http://1.bp.blogspot.com/_pzC_7PLtN-0/R_buGAu4D3I/AAAAAAAABCI/wxcsyLm3DoE/S1600/RBS%2BHeader%2B4a.gif

If your spider web log has this problem, you lot may endure able to similarly edit your spider web log - using "Configure Header" or "Edit HTML" - too function or then your problem. If you lot job "Edit HTML", I suggest, every bit usual, that you lot backup the template - before too after making this tweak.

>> Top

Wednesday, November 20, 2019

Creating A Floating Background, Nether The Posts

This spider web log started out using a Layout template, advert "Minima". When I applied a Designer template, I selected the Designer equivalent of "Minima", advert "Simple".

Long ago, I picked a template background - which looked slightly improve than wearisome - for this blog. The spider web log looked fairly decent amongst the content text floating over the background, when viewed using a high resolution, amount coloring cloth ("32 bit" palette) display.

Unfortunately, non everybody who views this spider web log uses a high resolution, 32 flake coloring cloth palette. During the by twosome years, I bring observed diverse comments published here, from people who did non divulge it tardily reading the text, floating over the naked spider web log background.

Applying a floating content background, which you lot may run into looking similar a whitish haze floating simply beneath this text, was non hard - though it took or in addition to then experimentation.

The "Picture Window" template includes a floating background, standard. The Designer template, advert "Picture Window", comes touchstone amongst this floating content background - though theirs is opaque, behind the posts (and somewhat wearisome looking).

Using "Picture Window" every bit a guide, I flora the necessary code.

Looking at an existing spider web log which used the "Picture Window" template, I flora the relevant CSS rule. As always, or in addition to then of the code below contains gratuitous draw of piece of job breaks, which you lot volition desire to remove.
.main-outer { background: transparent url(http://www.blogblog.com/1kt/transparent/white80.png) repeat scroll meridian left; } 

I wanted a picayune flake of command over the score of transparency. Influenza A virus subtype H5N1 flake of searching the W3Schools website, in addition to I flora the correct tutorial.
The CSS3 holding for transparency is opacity.

And an event inwards the tutorial,
img { opacity:0.4; filter:alpha(opacity=40); /* For IE8 in addition to before */ } 

Combining the 2 rules, in addition to I before long had
.main-outer { background: transparent url(http://www.blogblog.com/1kt/transparent/white80.png) repeat scroll meridian left;  opacity:0.40; filter:alpha(opacity=40); /* For IE8 in addition to before * } 

Adding the code is non difficult.

Adding the code to the template was tardily plenty - using the "Add CSS" card option inwards Blogger Template Designer.

After a flake of experimentation amongst this spider web log background, I decided that 75% opacity looks best, for this blog. I may modify my mind, from fourth dimension to time, however.
.main-outer { background: transparent url(http://www.blogblog.com/1kt/transparent/white80.png) repeat scroll meridian left;  opacity:0.75; filter:alpha(opacity=75); /* For IE8 in addition to before * } 

And, for 2/19/2016, I flora a simpler equivalent.
.main-outer { background: rgba(255, 255, 255, 0.60); } 

Depending upon your spider web log background, in addition to your text colours, you lot may similar to a greater extent than or less opacity. Other than the opacity decision, you'll divulge this tweak to last fairly straightforward.

You tin laissez passer on notice add together the background nether unlike template sections.

Instead of adding a background nether "main-outer", you lot could selectively add together a background nether whatever of the iii sections of "main".

  • column-center-outer (only the posts).
  • column-left-outer (only the left sidebar).
  • column-right-outer (only the correct sidebar).

These are the container names used inwards touchstone Blogger templates. If you lot are using a custom template, you lot may divulge other containers to specify.

Your spider web log is your alternative - in addition to this technique offers diverse choices.

Monday, November 18, 2019

Template Designer Upgrades Necessitate Supporting Updates To The Private Spider Web Log Templates

This week, we're seeing a pocket-size inundation of occupation reports inwards Blogger Help Forum: Something Is Broken nearly problems alongside the Template Designer.
Every fourth dimension I modify something, I accept to refresh the page inwards gild for it to demo up. It won't "Save" when I endeavour to salvage the layout changes. It simply says "Saving..." at the altitude of the page as well as fades away, but doesn't genuinely salvage whatever changes.

Many problems involve changes made to the template, using the Designer, which aren't beingness saved - or are broken when saved. Most of the people reporting these problems accept made changes to the template, previously - or then are then experienced at making changes, they can't believe that their latest changes could always accept problems.

Interestingly, this history of changes is non a coincidence - as well as it's probable that or then of the changes helps to crusade these problems.

Take a hold off at the template code inwards your blog, or then time. You'll discovery a lot of code which doesn't hold off similar CSS, HTML, or XML. Some of it is code which supports the diverse spider web log features that are adjusted or configured using the Template Designer.

Many template features involve 2 sets of code.
  1. The Template Designer wizard, business office of the Blogger dashboard, is mutual code used past times all spider web log owners.
  2. The blog template, post service template, as well as / or widget template, is business office of the private blogs. Some template code does zip but back upwards the Template Designer - as well as permit y'all configure your spider web log layout,
Every fourth dimension Blogger Engineering adds or updates template features, they accept to brand changes to both sets of code.

Blogger Engineering does non edit each private blog, afterwards they upgrade the Template Designer. They brand changes to the principal template code - as well as their changes replicate into the private spider web log templates. These changes replicate much to a greater extent than consistently, when the private templates accept non been changed.

The to a greater extent than custom a template is, alongside changes applied by the spider web log owner, or maybe in a 3rd political party template, the less probable it is to properly update, to back upwards each succeeding Template Designer update.

Any fourth dimension Blogger Engineering updates the Template Designer, to add together a novel feature, or maybe to support a novel browser version, their updates may involve changes which are non properly applied to all blogs - as well as the Template Designer stops working, inwards or then blogs.

When the Template Designer stops working, the park recommendation is to refresh the post service or widget template - or maybe to upgrade the spider web log template - as well as things get-go rolling again. And the spider web log possessor goes dorsum to tweaking the template, until something breaks again.

>> Top