Element - Include/exclude appearance on X page

Sometimes, it may happen, that you have a gadget, like a 'Featured Post' or 'Latest Update', that just wouldn't make sence appearing on any other page but the Home Page.

Or you might have an animation header, that you would like to appear different on the home page.

You might want some gadgets only appearing on the Archive page, or on the About page.

Just follow this simple tutorial:

Add the widget (widget, gadget and page element are the same exact thing, in Blogger), to where you want.

Then, open the widget to it's edit form window, and maximize the window.

At the navigation bar, appears a link, look at its last few words.

there it will say your gadget's ID (ex.: 'HTML7') , make sure to remember it.

Close that window.

Go to Template>Edit Html. Click proceed. Do Not Tick 'expand widget templates'.

Search for your widget's ID (ctrl+F). It should look like this:

<b:widget id='HTML7' locked='false' title='' type='HTML'/>
</b:section>

 Good, now tick 'expand widget templates', now your widget should have became a huge piece of code, that looks like this:

<b:widget id='HTML7' locked='false' title='' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>

depending on the widget type, that is how long it's code will be.

The blue lines are the ones you will need to include, these will place you code inside an "Include/exclude only if on X page..." situation.
You will always include the first blue line after the 'includable id...' and the second blue line before 'includable..' for instance:

To display the Widget only on Home Page

<b:widget id='HTML7' locked='false' title='Widget Title Name' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Only the first line will change. Here are the options of Inclusion/Exclusion:

To display the Widget only in Home Page

<b:if cond='data:blog.url == data:blog.homepageUrl'>

To display Widget only in all Post's Pages

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

To display Widget only on Static Pages

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

To display Widget only in Archive Pages

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

To exclude the widget from any of the above:
Put the same two lines, in the same places etc. The only change you will be making is a minor one, in the first line.

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

instead of

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

Enjoy!

If you encountered any problems or would like to give some feedback, don't hesitate to comment!

Read more »

Remove Search/Label Results Bar

I enter the text into the search box.. A couple of posts pop up, above them stands proudly, a line, stating:"Showing newest posts for query ..... show all posts".
I don't know why, but it bothered me, it makes it look like one of those spam sites that lead you to searched instead of articles.
To remove it, just follow the easy steps:

Open your HTML, make sure to check the'Expand Widget Templates' box.

Find the following code:

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

and replace it with:

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

! This will also hide the bar the shows up when searching by Labels !

Simple and easy Search box for your blog! Click Here

Read more »

Blogger LightBox Killer (No longer needed)

Many of you have probably realized by now, that Blogger has launched a LightBox effect.

To some, this may seem cool, or useful, or maybe that it shows on how 'high class blogger is'. But for the most of us Bloggers, this is outrages.

We need the links on the images. We don't all run photo blogs, we don't want any 'fancy' shmancy LightBox. It can, and has, wrecked up layouts!

And if Blogger is already 'gonna give us this feature - make it optional!
Well, what can we do, unfortunately they're not going to listen to us.
But, however, there is a solution - the Blogger LightBox Killer.

It's a very simple, short piece of code, that you need to place in your blog.
Simple, open your blog's HTML (you have not to click 'Expand..'). Scroll to the end of the template. The last line should be <html>, right above that, place the following code:

<script type='text/javascript'>document.getElementById('main').innerHTML = document.getElementById('main').innerHTML.replace("'lightboxEnabled': true,","'lightboxEnabled': false,");</script>

Be assure that the next photo you click on your blog, will take you to it's link.

Attention!You know longer need to use this script, all you need to do is:Settings>Posts and comments>Posts.Scroll down 'till you see:"Showcase images with Lightbox", use the drop down to select 'No'.

Read more »

Simple Search Box

Did you ever stumble upon a blog that you once viewed, and you just remembered that you once found this really cool gadget there, so you start searching through the labels. But there are too many posts!
This blog is missing a very important gadget...a simple search box.
It is required that every blog, should have a search box, whilst the absents of this gadget can cause viewers to leave and not come back.

You  don't need anything fancy, you can just use something simple, as the following:
You can try it, too

For this search box:
Place the following code, after the <head/> tag:

/* Search */#searchform {padding: px 0 0;padding-right: px;text-align: center;}#searchform #s {padding: 3px;padding-right: px;margin: 0 0 px 0;background: #fff;border: 1px solid #A2A295;color: #6A6A6A;font-size: 11.5px;font-family: Calibri;}#searchIcon {height: 24px;width: 60px;padding-right: 15px;background: #941200;border: 0px solid #941200;padding: 0px 0px;vertical-align: top;color: #fff;font-weight: bold;}

After you have done that, just paste the following code, as an 'HTML/Javascript' gadget, wherever you would like it to appear:

<form id="searchThis" action="/search" style="display:inline;" method="get"><input id="searchBox" name="q" type="text" "width:250px"/> <input id="searchButton" value="Search" type="submit"/></form>

Check out our article about removing Results Bar! Click Here

Read more »

A Simple Ticker

Any blogger that wants to update his viewers with his blog's latest updates, will want to put up a ticker.
On the ticker you would probably want to put some text, links or photos too.
It is very simple, with no JQueries or other annoying coding. All you will be doing is adding an HTML/Javascript gadget.

Here is an example:
Try hovering your mouse over it!

----Top of  Ticker----------------

LINE OR IMAGE 1
LINE OR IMAGE 2

LINE OR IMAGE 3 

LINE OR IMAGE 4  LINE OR IMAGE 5 ETC.1 1 

----Bottom of Ticker------------

Add an HTML/Javascript gadget, and copy and past the following code into it:

<div class="textwidget"><marquee direction="up" width="105" onmouseover="this.stop()" scrollamount="2" onmouseout="this.start()" height="200" align="left">Line or Image 1<br/>Line or Image 2<br/>Line or Image 3<br/><br/>Etc.</marquee></div>

marquee direction="up" - can be changed to left, right or down.
width="105" - can be changed to any width you want the ticker to be.
scrollamount="2" - this is the speed of the ticker, the lower the number, the slower the ticker.
height="200"- can be changed to any height you want the ticker to be.
align="left" - this is the text align, which obviously may be changed to right and center.
Line or Image 1/2/3 etc. - this is what is displayed in the ticker, you can make as many lines as you want.

To make a space between two lines, just put in: <br/>


Besides text, you can also put an Image.:

<img src="http://path_to_your_image.jpg/" alt="Title of image" height="Height of image" width="Width of image" />

img src="http://......jpg/" - this is the link of the image.
alt="Title of image" - here you can put a title for the image, or you can just leave it empty.
height and width of image may be adjusted as well.

Add a background image to the ticker.
Some may also want to add an image behind the ticker. This is a very simple procedure.
Just wrap the ticker's HTML in the following code:

<table height="100" width="150" background="http://....jpg/"><tr><td>Ticker's HTML coding</td></tr></table>

Enjoy!

Read more »