Sunday, May 21, 2006

Blogger template tutorial: Adding content via the template

blogger template 1
blogger template 2
blogger template 3

Content can be added to the blog in 4 ways - via the settings (sign into Dashboard, select blog, click SETTINGS > BASIC, then fill in the box for the TITLE and DESCRIPTION), editing the profile, posting, and via adding stuff to the template. In this post we will deal with the fourth one. What kind of stuff can be added via the template? Text, hyperlinks, images, HTML and javascripts for advertisements, hits counter, guest book, etc. The screenshots above show text added, but adding other stuff should be no problem. In which part of the template you place the stuff will depend on which part of the web page you want the stuff to be in. As a guide, I have added text in various sections of the template, and the positions they appeared are displayed in the screenshots above. The text are in red (and green) and are pretty much self explanatory. If you want a clearer view of the web page, go to Adding content via the template.

The most common place to add stuff via the template is the sidebar. For this you will have to add the stuff between
<!-- Begin #sidebar -->
<div id="sidebar"><div id="sidebar2">

and
</div></div>
<!-- End #sidebar -->
.
To give you additional navigational aid, there is a button on every blogspot page. Stuff added before or after the following codes
will appear before or after the button respectively.

Further examples:
Where to paste the AdSense codes
For ads after each post, where to paste the codes?

Related posts:
Blogger template tutorial - Components
Blogger template tutorial: 3 column template
Blogger Beta: 3 column template

Books from Amazon

HTML 4 For Dummies

HTML for the World Wide Web with XHTML and CSS: Visual QuickStart Guide, Fifth Edition

NEWER POST    OLDER POST

40 comments:

  1. Hi, fantastic site! I wonder if you can help me with a query.

    I am using Minima as a template. As my blog is not about me, but about a particular book, I'd like to get rid of "About Me" and replace it with an "About This Site" section. I'd like to have a picture of the book above the words "About This Site", and clicking on the link will take you to a short overview of the book and the reason for the site's existence. Can you suggest the best way to skin this particular cat?

    many thanks
    Daniel Barnes

    ReplyDelete
  2. what is your email addy?

    ReplyDelete
  3. Hi

    I was wondering if you could please help me. I've made changes to my sidebar and they show on the preview, but then when I republish my blog (after saving) they've disappeared! But when I look at the code again, the changes are still in the template?

    Thank you
    Emi

    ReplyDelete
  4. 1. Make sure you have republished.
    2. clear computer cache and cookies
    3. change browser

    ReplyDelete
  5. Thanks for all the info. You have a great blog very useful and helpful.

    ReplyDelete
  6. Thanks for the information. I think I got the information what I was looking for. It has really helps me a lot to better understand blog template.

    ReplyDelete
  7. Hi, can someone point me to a simple explanation of how I might replace the header with an image here:

    schreyerhonorscollege.blogspot.com

    Many thanks,
    Sara

    ReplyDelete
  8. Thanks so much. I follow your directions, then the changes I make in my template show up in my blog, and the best part is that the links I added actually work! I feel so smart! Have a good one!
    Marie

    ReplyDelete
  9. Hi, hopefully you can help me. I am currently using the Ms. Moto Blogger template. I would like to change my header to something more graphic (need to know how and where to paste the new header within the code), widen the white middle section, and change the background color or add a designed background (like maybe some brown dots or brown pinstripes on top of the pink? I think the pink with the brown will look like candy, which is the name of my blog, Hip Candy). I like the template, and the pink color, I just want to tweak it to the point that I love it.

    ReplyDelete
  10. Hi Channel,

    I have been working with the Minima template all along and am not too familiar with the Ms Moto Blogger template. However, this post may still be of some help: How do I post a photo on my blog title

    ReplyDelete
  11. how do I hide my profile content and just have the link on my home page?
    Help
    Thanks
    Oh, I didn't see you have comment moderation turned on..hmmm..how will I know if I get an answer to this.?

    ReplyDelete
  12. Comment moderation has been set for this blog to cut out spam. I have answer your first query, but somehow don't see it in the comments. If I still don't see it after checking, I will post it again. Please check back.

    ReplyDelete
  13. I'm absolutely stumped.
    I can figure out what to write to change and add content to my template, but "where" in the world do I find the code to make the changes? ie: "to change the info before the profile section" -- where (what file or tab or section)do I do this??

    Your help tips might help me sleep this week. Steph

    ReplyDelete
  14. Anonymous10/14/2006

    just caught up with this. I am using blogger beta.
    i cannot find begin sidebar anywhere in my template, with or without expanding the widget templates.

    can you tell me wher it is. i am using the minima template

    http://henshawsevilcabal.blogspot.com

    ReplyDelete
  15. For Tony,

    I am having problem deciphering the beta template too.

    Peter
    Testing Blogger Beta

    ReplyDelete
  16. I'm using the Minima template for a blog called studyusanews.blogspot.com
    I'd like to reduce the size of the font in the sidebar on the right where I have some RSS feeds ticking in, but I can't figure out where to set the font type/size for the sidebar. Can anyone help (I'm just groping, don't know CSS) Many thanks!

    ReplyDelete
  17. Hi Peter,

    Happy Thanksgiving (a little late but nontheless, still relevant) and wishing that you get back more than you are giving.

    Would like to know if I could cancel my blog because I found that someone has put their codes in it for adsense since I did not.

    Also, if I went and created another blog will I get banned by google you think if I put my own code in it.

    Understand that I can only have one account so will have to stick to it even though whoever has my password can get back in.

    Thanks for your response.
    regards,
    vivien

    ReplyDelete
  18. Hi Mark,

    If someone has been hacking into your blog and putting AdSense ads there, and you are very sure it is not you, you can get the publisher ID from the adsense script. If you don't know how to, just give me the URL of the blog involved. If you think that this is really a problem, you can report this to AdSense.

    Also, you don't need to do something so drastic as deleteing the blog. Just reload a fresh template and the ads will be gone. Then strengthen your password. See post Blog Hijack: How to protect yourself.
    Alternatively, you can also look for the scripts for the ads in the template and remove them.

    Regarding multiple accounts, you can only have 1 adsense account but you can have as many Blogger account as you wish.

    ReplyDelete
  19. Anonymous12/05/2006

    I've only been using blogger for a few months, and since i moved to the Beta, I've lost the ability to post offline. To be honest (not that I'm trying to be dishonest), but I like offline tools better than the web-based posting thingy. Are there any offline publishers available for the Beta? I've searched and searched through google and blogger and i can't even find the original list of offline publishing tools.

    ReplyDelete
  20. Sorry, I have been using online tools practically all the time. Perhaps some visitors who are familiar with offline tools will like to chip in.

    ReplyDelete
  21. Anonymous1/08/2007

    Really nice tutorial...
    I want to have 2 side bar like 3-column Wordpress template like www.liewcf.com.
    I`ve design the template, my problem is...how do i define 2 side bar-the code i mean.

    ReplyDelete
  22. It is easier to use a ready made template. Have a look at this post New Blooger (formerly beta) template with sidebar on the left

    Peter a.k.a. Enviroman
    Enviroman Says

    ReplyDelete
  23. HI! please help.after pasting code between body and body and saving , i cant see the PREVIEW key nor can i see PUBLISH WEB.

    ReplyDelete
  24. Hi Afreen,

    You are not providing enough information in your question. Are you using the old classic template or the New Blogger template. To distinquish, see Old classic template or New Blogger template?. Also, what are you trying to add.

    Now, if you are in the Template Editor window of New Blogger, what you shoudl see is [preview] and [save template]. If you are not seeing these buttons, one thing you can try is to use a different browser. I and others have solved many varied problems with that strategy. See
    What to do when you cannot publish, upload photo, login, something missing, etc.
    Why you should be using more than one browser.

    Peter (Blog*Star 2006 and 2007)
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  25. Hi Peter

    I keep getting this error report the last few days when I want to put something in my sidebar on my gift blog (still Classic template)-
    tonight I just wanted to add images of awards without any links to other blogs - I uploaded the images and pasted the codes in the template, preview is fine but when I want to save, I get this message.

    "We are unable to save your template
    We are aware of this issue (caused by outdated AdSense code) and are currently working on a fix. In the meantime, as a workaround, you can add the following line of code into each ad code snippet, directly after the google_ad_client label:..........." with blogger ID and error code.

    - and I am so "stupid" after all these months of blogging that I really do not know where the ad-code-snippet or the google_ad_client label is.

    Can you please explain this one to me. Do I need to report it to Google Support as well?

    Would appreciate your help on this one too.

    At the moment I do not have time to move to the new blogger and start all the customizations in the sidebar from scratch.

    Thanks

    Elsie

    ReplyDelete
  26. Hi Elsie,

    I find the problem you described strange. You appear to say that you are trying to add an unclickable link which means you probably is trying to add a <img> tag.

    However the error message you got was referring to AdSense which has nothing to do with <img> tag.

    I can suggest 2 things. If you know how to use codes to display special characters like <img>, you can post what you are trying to add here. Otherwise email them to me to have a look.

    The other alternative (they would be the specialist) is to try to contact Blogger support at How to contact Blogger Support and/or Problems in signing in, seeing the blog in the Dashboard, etc.. Some lucky people who got referred there got helped, one within the same day I referred the site to her.

    Peter (Blog*Star 2006 and 2007)
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  27. Great blog! Ive gottem many useful hints from it. Can you direct me to the correct page of yours. I have ms moto as my template. Can I change the color from pink? Thanks!

    ReplyDelete
  28. Hi Peter

    I have just added a site map to my blog page but its comming back with a message URL RESTRICTED BY ROBOTS.On my html for my blog there is nothing about robots.What can i do to get google to index my blog.
    http://alpine-connection.blogspot.com

    Hope you can help

    ReplyDelete
  29. Hi Alipine-connection,

    What template are you using? Anyway, if you have searched your template and did not find any robot meta tag, I don't know what to do.

    But I don't know if you have been reading the updates I have been having about this Google sitemap for Blogger. I hope to get enough time to do some proper research, write a new post and update this post further. In any case, I have doubts about using feed for Google sitemap, especially if you set your feed to short.

    A better idea may be to make a post containing links to all your post, update this post whenever you make a new post, put a link to this post when you make a new post in the sidebar. This I think will cause the search engine to follow all the links to all the posts and get all posts indexed.

    However, if you insist on having the Google sitemap, I suppose the next best thing is to backup your current template PLUS Page Elements (Backup and change New Blogger template), use a different template and try again. If you are not happy with the standard Blogger templates provided by Blogger, there are now plenty of choices"

    New Blogger template modified by Stavanger
    Dots New Blogger template with Header
    New Blogger templates modified by Ramani
    New Blogger templates by Isnaini
    New Blogger templates by Thur
    Ramani's New Blogger Neo template
    New Blogger template by Final Sense

    One more coming up but not ready yet.

    Peter (Blog*Star)
    Earning Online

    ReplyDelete
  30. Really great ideas. I like every example. Just might have to try these...
    more template

    ReplyDelete
  31. nice tips, i use it now..... thanks....

    Full Software

    ReplyDelete
  32. This was really a great post. I am having a web development company blog i'll change my header path and everything. Thanks for your awesome post.

    ReplyDelete
  33. Glad to see you back - I've looked at quite a few Blogger support sites and always come back to you. Your hacks usually work the first time and you are a great teacher. If you answered questions in the comments for cool gadgetsso I could learn by reading your answers to others and be able to solve my problems without needing help then this would be the perfect Blogger blog! But I love it and will take it anyway I can!

    I thought you had stopped this blog. I'm wondering if this problem is affecting your hack for creating drop down menus for labels? I suddenly lost my drop down menu, and the code section love quotes in that post here has gone from an Adobe error message to being parked on by GoDaddy.

    ReplyDelete
  34. i m using a classic blogger template and maintain my blog from mobile,i have issued a publisher id from adsence but i dont know how to put it in my classic template,no ads are there on my blog and also i cannt sign in to google adsence plz give advice on buntoo.khan@gmail.com

    ReplyDelete
  35. When my blogs uses the classic template, ads were added by editing the template, but you must have an approved adsense account first. Assuming you have an adsense account and to get one, first you must have a website of blog which adsense must approve and subsequently you can then sign into www.google.com/adsense to get their Javascript to add to the template in appropriate places for it to be displayed in Internet

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics