Seguir

Compartir

Informar sobre mal uso

Siguiente blog

moper47@gmail.com

Escritorio

Salir

Select Language
Pow ered by

Translate

Home

Getting Started

Topic index

Search Blogger Helpers

Go

MONDAY, APRIL 25, 2011

Displaying a gadget only on the home page

Labels: Gadgets, Home page

Like

Send

Share

Get Dilbert for your Blog

FOLLOW:

GET UPDATES BY EMAIL:

Go
Enter your email address: FeedBurner will send a confirmation message. Click the verify link in it to start your subscription.

This article is about how to set up a gadget / widget in Blogger so that it is only visible on the first place that a reader sees when they visit your blog (often called the "home page") It is one of a series of articles about controlling what goes on the homepage of your blogspot blog.

Blogger Hints and Tips on

Facebook Like 5 people like Blogger Hints and Tips.

How to make a gadget that only shows on the first page:

(Note: in Blogger, the words "gadget", "widget", and even "page-element" all mean the same thing. I generally use "gadget", because the Page Elements tab currently says "Add a Gadget". But they're absolutely the same.)

1 Add the gadget

F acebook social plugin

FACEBOOK STREAM ...

What's this?

Do this in the usual way, using Design > Page Elements > Add a gagdet.

2 Drag-and-drop the gadget to the place where you want it.

POPULAR POSTS:
Removing the Attribution gadget from blogs that have

A popular place for a gadget that is going to look like a "home page" would be in the Body section, just

Designer Templates Hiding your blog's attribution gadget, using a CSS rule Giving your Blog a Home Page Linking Blogs and Websites Putting a Facebook "share this" badge on your blog Removing the attribtion gadget by unlocking and then removing it. Displaying a gadget only on the home page How to put put Posts into your Pages in Blogger Changing the templatename and designer-name Transferring Blog Ownership

above the Blog Posts gadget, where "Test Gadget" is in this example:

3 Edit the Gadget again

Don't make any changes to it - just maximise the window, so you can see the WidgetID, which is at the very end of the address bar at the top. Make a note of the value. (In this example, it's Text1).

TOTAL PAGEVIEWS

169365

(90% Off) Canada

Enter Your Email to Get 90% Off Deals in Canada w w w .TeamBuy.ca

4 Find the code for your gadget:

Edit your template (Design > Edit HTML) Download a copy of the template, and put it somewhere safe. Use your browser's text search tool (Edit / Find in Firefox) to look for the widget name that you noted in step 3. Notice what comes after it. In this example, it's the line for Blog1:

Chitika | Select

NEW FROM BLOGGER:

Blog This! - Thursday, June 16, 2011 Announcing Blogger M obile Templates - Wednesday, June 08, 2011 Add the +1 Button to Your Blog - Wednesday, June 01, 2011 Add a virtual tip jar to your blog - Thursday, M ay 19, 2011 Blogger is back - Friday, M ay 13, 2011

<b:section class='main' id='main' showaddelement='no'> <b:widget id='Text1' locked='false' title='Test gadget' type='Text'/> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

Click on the Expand Widget Templates checkbox (so it's turned on) After the expanded template has downloaded, find the widget name again. This time it will look a bit longer (the exact details depend on what type of widget/gadget it is.)

<b:section class='main' id='main' showaddelement='no'> <b:widget id='Text1' locked='false' title='Test gadget' type='Text'> <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:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

Blogging with the New Google Blogger... Michael Miller Buy New

Privacy Information

WHAT BLOGGER IS WORKING ON:

Customize Your Favicon - Wednesday, June 08, 2011

5 Add conditional formatting:

You need to put conditional formatting code around the code for the gadget - makings sure that it doesn't go around the code for anything else! (which is why you noted what comes afterwards in step 4) The code to use is: <b:if cond='data:blog.url == data:blog.homepageUrl'> THE CODE FOR YOUR GADGET GOES IN HERE

Rustling.org - Resources for singing together

</b:if>

BLOGGER HAT'S RECENT POSTS:

The example above looks like this, when the code has been added:
Saving a post if the Publish button doesn't work Options for showing a PowerPoint file in your blog Adding an RSS feed icon to your blog, using Feedburner Editing your Blog's template: advantanges and disadvantages Adding a Facebook personal account badge to your blog

<b:section class='main' id='main' showaddelement='no'> <b:widget id='Text1' locked='false' title='Test gadget' type='Text'> <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> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

6 Check that it's worked

The Lotus Flower: for meditation and creative thinking

Preview your blog before you save the changes: check that the the widget is visible. Save the template changes, and look at your blog. Check that

HANDY TOOLS:
How your computer connects to the internet Resolution Tester Convert HTM L to code you can put in your template Post editor keyboard shortcuts M aster list of tags for each widget in Blogger Wordpress to Blogger converter

The widget is on the first page The widget is not seen when you look at an older page (eg one from your archive) The other elements of your blog (other widgets, blog post titles, dates and contents) are all as you expect them - on the first screen, and on other screens too. If anything is wrong with how your blog is working, go back to the template editor (Design > Edit HTML), and upload from the copy of your template that you made at the beginning of step 1. This will let you blog work properly, while you figure out what went wrong.

Related Articles:
Ads by Google Blogger Gadget Copa Oro Blog Widget

Controlling what goes on the homepage

Google Blogger For Dummies Susan Gunelius Best Price $5.98 or Buy New $16.32

Privacy Information

HTM L Dog:

HTM L, CSS, and JavaScript from the Ground Up - from Google Code University SitePoint's CSS, HTM L and Javascript reference pages M ozilla Developer Network doc centre

RECOMMENDED BLOGGER HELP SITES:

Blogger Help's YouTube Channel Blogger support for people who cannot read articles ;-) Blogger Help Forum (BHF): Blogger's own help-site, "staffed" by knowledgeable helpers, 24x7 The Real Blogger Status: Run by Nitecruz, one of BHF's most expert helpers. Especially good for custom domain issues. Blogger Sentral: From another solid contributor to BHF. Too Clever by Half: This started to explain a very clever way to reverse the display order for posts, and has developed into giving very clear explanations of some basic concepts about how Blogger works. Spice up your Blog Very strong on graphic design issues. Tweak my Blogger Another BHF contributor, very strong on HTM L and CSS formatting questions, and other internal coding changes Jacq's Blogger Tips I've only just found this site, still working out what its strengths are. But it looks promising.

WAS THIS ARTICLE HELPFUL? TELL YOUR FRIENDS: 0

Like 9 Send

Share

24 comments:
DieuAn said... Thanks a bunch!!!!!! I found other tutorials about this, but it went all wrong because non of them mentioned that the "Expand Widget Templates" checkbox needed to be checked. Your tutorial is very clear and easy to follow. Thanks again! :D M arch 31, 2010 9:33 PM

M aryC.fromNZ said... Glad I was able to help: I try to write articles like this at the same time I'm actually doing the change on another blog, so I don't leave out any key steps like this. M arch 31, 2010 10:42 PM

Cowwarr Art Space said... Fantastic!! Clear and easy to follow, just what I needed to make the blog work for me. M ay 22, 2010 9:22 AM

ILM A said... mine doesn't show anything at the top when i go to edit the widget again M ay 25, 2010 2:47 AM

M ary said... I'm sorry that didn't work for you. If you still need help it's best if you post a question the Blogger Help Forum (http://help.blogger.com) - make sure you include your blog's URL, and a description of what you were doing at the time. M ay 25, 2010 11:01 AM

Blythe said... can i use this same process to put a gadget only on one page(not the homepage)? im specifically trying to add the photo album gadget and put it only on a separate page. Thanks, Blythe June 9, 2010 5:55 PM

M ary said... Blythe, you certain can use the same approach. You just need to figure out how to refer to the Post/Page that you're interested in (in the same way that this approach refers to the Home page). June 11, 2010 8:26 AM

Harvey44 said...

Hi. I have the same question as Blythe. How to make a widget show only on a static page? It's a minor change I'm sure, but I can't quite figure it out. August 13, 2010 6:59 PM

(90% Off) Canada

Enter Your Email to Get 90% Off Deals in Canada w w w .TeamBuy.ca

Talibiddeen Jr. said... This sooooooooooooooo worked! Thank you, thank you, thank you! It was super easy, the only part that I had trouble with at first (embarrassed to say) was:

..

Cool Gadgets
Portable keyboards, 3D glasses & more at low prices. http://w w w .pazzzelectronics.com

I just copied it and pasted whole!(lol) Having the example text of what it should look like was what got me back on track. M aybe it could be a little clearer as in this line of code first and then this one, though the trailing dots were there, but I didn't pick up on that in the beginning....any way, just a suggestion and thanks again! August 18, 2010 11:07 AM

M ary said... Thank you, Talibiddeen Jr, I've now edited the article a bit so hopefully other people won't be confused the same way.

5 Foods you must not eat:

Cut dow n a bit of stomach fat every day by never eating these 5 foods. Thedietsolutionprogram.com

August 27, 2010 10:51 PM

Omniglot Studio said... Also, I tried using this code to isolate the archives and labels in the sidebar of my blog so they wouldnt show up on standalone pages, and although it worked for the first blog page it caused them to not be visible on the older post pages. how can I have them visible throughout the blog without making them visible elsewhere? August 29, 2010 12:14 AM

Chitika | Select

Privacy Policy About Blogger-hints-and-Tips

Giocrr said... thank you October 2, 2010 3:15 AM

Frank Klesitz said... It worked great! Except for one small issue. I'm using the new Awesome Blogger template, and I only want the text gadget to show above my blog posts on the home page (which you solved). I put the code as you stated into the HTM L, however there is still a small, very thin 'box' where the gadget used to be on other pages. Yes, the full gadget only shows on the home page, but now there is that thin white box remaining on every page. Any advice? See what I'm talking about on my blog - www.getvyral.com October 18, 2010 5:01 AM

cr0cus said... u guys r amazing! tnx 4 this post! October 27, 2010 12:07 PM

M ichelle said... Oh my gosh, you're amazing! All your instructions worked for me! THANK YOU SOOOOOOO M UCH! ! ! November 5, 2010 5:52 PM

M ary said... Glad it worked for you! I've got plans to extend this article a bit too. All the best.

M ary November 5, 2010 6:58 PM

M att said... What does it wind up looking like please? January 29, 2011 11:48 PM

M ary said... M att, that totally depends on your blog, and what you put into the gadget. Basically it can look like anything that you can code into a blog-post shaped rectangle. January 30, 2011 1:29 PM

Dan Cornel said... I have the same problem as Frank Klesitz coment.. is there a way i can do something with. February 8, 2011 12:06 PM

M ary said... I'm afraid I never did find a solution to Franks' problem. Try asking in the Blogger Help Forum (there's a link in the sidebar), as I'm sure someone has solved it. February 8, 2011 6:41 PM

natalyah said... Thanks so much! Directions were so easy to follow and examples helped me make sure I got it right. M arch 14, 2011 9:25 PM

Swami.SP said... Worked great... thanks a bunch M arch 19, 2011 4:57 PM

Pashminu M ansukhani (CEO) said... Yes, it worked perfectly the very fist time. But, how do I have ONLY the text Widget and not the latest post below it? April 23, 2011 5:30 PM

Syahin Norhammidi said... much easier, thanks with the image M ay 26, 2011 9:44 AM

Post a Comment

Comment as: Jos Lus Montes Prez (Google) Post Comment

Newer Post

Sign out Subscribe by email

Home Older Post

Preview

ABOUT BLOGGER-HINTS-AND-TIPS

In 2009, I started Blogger-HAT to keep "how to" notes about problems I'd solved using Blogger to build a public-transport information site for my city, and as a place to try out techniques before I let them loose on the main site.

About seven micro-seconds went into choosing the blog's name and URL - this was a site for me, not anyone else! The "hat" idea only came later - it's got to be the most underdesigned logo in the blog-sphere. The design has been through a range of styles, colours and layouts, and will continue to change as I learn new techniques. Today, my focus is mainly on sharing information about integrating Blogger with other tools.

SUBSCRIBE
Subscribe
Or enter your email address: FeedBurner will send a confirmation message. Click the verify link in it to start your subscription.

Vista Weather Gadget Weekend, 10-Day & Current Weather Instant Weather w/ WeatherBlink! www.WeatherBlink.c Create Your Own Website We stand out as the best editor - try it yourself. www.circlepad.com Create your website Simple, fast and professional Your website in 10 minutes www.WebSelf.net

Powered by Blogger.

FOLLOWERS
Follow
w ith Google Friend Connect

Followers (168) More

Already a member? Sign in