Modifying The Blogger Template – Tag Structure

There will come a time when you find yourself staring at your template code on the Layout – Edit HTML page. Perhaps what you see there confuses you, or maybe you know what your doing but have hit a snag. Either way, you cannot save your template when you have errors. So what can you do? Learn a little HTML for starters.

Please note, it’s probably best to read this in a nice quiet area where you can focus on the content. You may not know it, but this is borderline programming here. I don’t want to scare anyone away, but you really need to pay attention to posts like these if you are to get the full benefit of the content. You can’t skim text and learn programming at the same time. I’ve tried, it doesn’t work. hahaha

If you thought you could operate your blog without knowing any HTML, well, you’re right, you can. If you want to enhance and modify your template yourself though, you will be best served learning some of the basics of HTML and the nuances of Blogger.

For instance, when you first view the Layout – Edit HTML page, you’ll probably see something similar to this:







* Blogger Template Style
* Name: TicTac (Blueberry)
* Author: Dan Cederholm
* URL: www.simplebits.com
* Date: 1 March 2004
* Updated by: Blogger Team
*/

What is all this jibber-jabber you might ask? What you see there are the first few lines of my template for the Views on Life blog. For the most part, you can ignore the first few lines in the above snippet. I want you to take a look at the or self-closing).

  • It must be well formed.
  • What does that mean? Well, a bit of HTML markup (as it’s called) always has a starting tag and a closing tag. What you find in between these two tags is the meat of the statement. Let’s break down the

    First thing we need to understand is that all HTML tags require a beginning and and ending. This allows browsers to interpret and know where something starts, and where it ends, and most importantly, what it is. The

    That’s all there is to it! You end with the exact same tag, except that you add a forward slash to it. This is your beginning and ending tags for the title HTML statement. This is also how MOST of the HTML tags you’ll use are going to be put together. With a beginning and ending formatted exactly like this.

    I say most tags are like this, but there are exceptions. For instance, the tag, which displays an image on your page, is self-closing. Self-closing? What in the world am I talking about? Again, here’s an example.

    Notice that I don’t have a ending tag on that statement. Instead, I can end the tag by adding a slash before the starting tag ends. The reason we don’t have an ending tag for the tag is because the , when properly formed (syntactically correct), will contain all it needs to know to do its job, which is to display an image.

    Conversely, the

    For Blogger templates, you’ll notice that we have a tag in between our beginning and ending

    This is perfectly valid as well, and the text found in between the beginning and ending tags will display in the title bar of all browsers that visit my blog.</p> <p>If you take another look at the HTML snippet I supplied at the beginning of this post, you might notice that there is a <head> statement without an ending </head> tag. Well, there is an ending </head> tag, but it is located after all the Cascading Style Sheet (CSS) information and the text would be too much to display.</p> <p>I bring this up because, like the <title> tag, the <head> tag also has stuff in between its opening and closing tags. The <title> tag is one of those elements that must be found between the <head> tags and no where else. Placing the <title> tag outside of the <head> tags will cause an error, and perhaps some angry visitors too.</p> <p><strong>I will be continuing this discussion in the comments area below</strong> for those of you that may have a question or two for me. There is no way to teach about the templates without knowing a little bit of HTML to begin with. So while I’m still building the remaining lessons on Blogger, I’ll also be throwing out related material to help build up your knowledge even more.</p> <h3>Related Articles</h3> <p><a href="http://www.w3schools.com/html/html_examples.asp" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','www.w3schools.com']);" target="_blank" rel="nofollow">HTML Examples on W3Schools.com</a><br /><a href="http://personalweb.about.com/cs/beginninghtml/a/basic_html.htm" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','personalweb.about.com']);" target="_blank" rel="nofollow">Learn Basic HTML – For Beginners Web Sites</a></p> <div class="shr-bookmarks shr-bookmarks-expand shr-bookmarks-center shr-bookmarks-bg-love"> <ul class="socials"> <li class="shr-delicious"> <a href="http://delicious.com/post?url=http://www.waynejohn.com/modifying-the-blogger-template-tag-structure/&title=Modifying+The+Blogger+Template+-+Tag+Structure" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','delicious.com']);" rel="nofollow" class="external" title="Share this on del.icio.us"> </a> </li> <li class="shr-digg"> <a href="http://digg.com/submit?phase=2&url=http://www.waynejohn.com/modifying-the-blogger-template-tag-structure/&title=Modifying+The+Blogger+Template+-+Tag+Structure" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','digg.com']);" rel="nofollow" class="external" title="Digg this!"> </a> </li> <li class="shr-facebook"> <a href="http://www.facebook.com/share.php?v=4&src=bm&u=http://www.waynejohn.com/modifying-the-blogger-template-tag-structure/&t=Modifying+The+Blogger+Template+-+Tag+Structure" rel="nofollow" class="external" title="Share this on Facebook" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','www.facebook.com']);window.open(this.href,"sharer','toolbar=0,status=0,width=626,height=436'); return false;"> </a> </li> <li class="shr-friendfeed"> <a href="http://www.friendfeed.com/share?title=Modifying+The+Blogger+Template+-+Tag+Structure&link=http://www.waynejohn.com/modifying-the-blogger-template-tag-structure/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','www.friendfeed.com']);" rel="nofollow" class="external" title="Share this on FriendFeed"> </a> </li> <li class="shr-mixx"> <a href="http://www.mixx.com/submit?page_url=http://www.waynejohn.com/modifying-the-blogger-template-tag-structure/&title=Modifying+The+Blogger+Template+-+Tag+Structure" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','www.mixx.com']);" rel="nofollow" class="external" title="Share this on Mixx"> </a> </li> <li class="shr-myspace"> <a href="http://www.myspace.com/Modules/PostTo/Pages/?u=http://www.waynejohn.com/modifying-the-blogger-template-tag-structure/&t=Modifying+The+Blogger+Template+-+Tag+Structure" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','www.myspace.com']);" rel="nofollow" class="external" title="Post this to MySpace"> </a> </li> <li class="shr-reddit"> <a href="http://reddit.com/submit?url=http://www.waynejohn.com/modifying-the-blogger-template-tag-structure/&title=Modifying+The+Blogger+Template+-+Tag+Structure" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','reddit.com']);" rel="nofollow" class="external" title="Share this on Reddit"> </a> </li> <li class="shr-stumbleupon"> <a href="http://www.stumbleupon.com/submit?url=http://www.waynejohn.com/modifying-the-blogger-template-tag-structure/&title=Modifying+The+Blogger+Template+-+Tag+Structure" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','www.stumbleupon.com']);" rel="nofollow" class="external" title="Stumble upon something good? Share it on StumbleUpon"> </a> </li> <li class="shr-twitter"> <a href="http://twitter.com/home?status=Modifying+The+Blogger+Template+-+Tag+Structure+-+http://bit.ly/d3itvU&source=shareaholic" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','twitter.com']);" rel="nofollow" class="external" title="Tweet This!"> </a> </li> <li class="shr-yahoobuzz"> <a href="http://buzz.yahoo.com/submit/?submitUrl=http://www.waynejohn.com/modifying-the-blogger-template-tag-structure/&submitHeadline=Modifying+The+Blogger+Template+-+Tag+Structure&submitSummary=There%20will%20come%20a%20time%20when%20you%20find%20yourself%20staring%20at%20your%20template%20code%20on%20the%20Layout%20-%20Edit%20HTML%20page.%20%20Perhaps%20what%20you%20see%20there%20confuses%20you%2C%20or%20maybe%20you%20know%20what%20your%20doing%20but%20have%20hit%20a%20snag.%20%20Either%20way%2C%20you%20cannot%20save%20your%20template%20when%20you%20have%20errors.%20%20So%20what%20can%20you%20do%3F%20%20Learn%20a%20&submitCategory=science&submitAssetType=text" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','buzz.yahoo.com']);" rel="nofollow" class="external" title="Buzz up!"> </a> </li> </ul> <div style="clear:both;"></div> </div> <hr/><h4>You might also enjoy these related posts</h4><ol><li><a href='http://www.waynejohn.com/the-differences-between-html-and-blogger-template-code/' rel='bookmark' title='Permanent Link: The Differences Between HTML and Blogger Template Code'>The Differences Between HTML and Blogger Template Code</a> <small>Do you understand the difference between HTML and Blogger template code? When you take a look at a Blogger template, are you able to read it? I mean, do you...</small></li> <li><a href='http://www.waynejohn.com/blogspot-blog-the-smallest-blogger-template/' rel='bookmark' title='Permanent Link: BlogSpot Blog – The Smallest Blogger Template'>BlogSpot Blog – The Smallest Blogger Template</a> <small>I always enjoy seeing what is possible on other systems and web sites. I’m not a hacker by any means, nor would I EVER call myself that (unless I had...</small></li> <li><a href='http://www.waynejohn.com/modifying-your-blogger-header-the-blogger-way/' rel='bookmark' title='Permanent Link: Modifying Your Blogger Header The Blogger Way'>Modifying Your Blogger Header The Blogger Way</a> <small>A common thing you’ll find when you start blogging is that you’ll want to make changes to your template. If you use the Blogger blog system, it can be easy...</small></li> <li><a href='http://www.waynejohn.com/blogger-com-help-lesson-20-pick-new-template-layout/' rel='bookmark' title='Permanent Link: Blogger.com Help – Lesson 20 – Pick New Template Layout'>Blogger.com Help – Lesson 20 – Pick New Template Layout</a> <small>Using the Blogger interface to pick a new template layout couldn’t be any more simple.  This page is by far the easiest to understand, and perhaps one you might never...</small></li> <li><a href='http://www.waynejohn.com/blogspot-blog-the-skin-tag-explained/' rel='bookmark' title='Permanent Link: BlogSpot Blog – The Skin Tag Explained'>BlogSpot Blog – The Skin Tag Explained</a> <small>One feature you’ll find in a BlogSpot blog is the ability to use variables for defining the fonts and colors used on your blog. Using variables within the skin tag...</small></li> </ol> </div><!-- .entry-content --> <div id="entry-author-info"> <div id="author-avatar"> <img alt='' src='http://0.gravatar.com/avatar/80d770c76309fcb7290f3c4ed97a3081?s=60&d=&r=R' class='avatar avatar-60 photo' height='60' width='60' /> </div><!-- #author-avatar --> <div id="author-description"> <h2>About Wayne</h2> Wayne John is a web developer in Southern California that shares his 25+ years of programming and web development experience freely and happily to anyone willing to learn. He also loathes speaking in the third person. <em>If you enjoyed this post, make sure you <a href="http://feeds2.feedburner.com/waynejohn">subscribe to my RSS feed</a> or get <a href="http://feedburner.google.com/fb/a/mailverify?uri=waynejohn&loc=en_US">updates in your email</a>.</em> <div id="author-link"> <a href="http://www.waynejohn.com/author/wayne/"> View all posts by Wayne <span class="meta-nav">→</span> </a> </div><!-- #author-link --> </div><!-- #author-description --> </div><!-- #entry-author-info --> <div class="entry-utility"> This entry was posted in <a href="http://www.waynejohn.com/category/blogging-help-tips/" title="View all posts in Blogging Help & Tips" rel="category tag">Blogging Help & Tips</a> and tagged <a href="http://www.waynejohn.com/tag/html/" rel="tag">html</a>, <a href="http://www.waynejohn.com/tag/tags/" rel="tag">tags</a>, <a href="http://www.waynejohn.com/tag/web-development/" rel="tag">web development</a>. Bookmark the <a href="http://www.waynejohn.com/modifying-the-blogger-template-tag-structure/" title="Permalink to Modifying The Blogger Template – Tag Structure" rel="bookmark">permalink</a>. </div><!-- .entry-utility --> </div><!-- #post-## --> <div id="nav-below" class="navigation"> <div class="nav-previous"><a href="http://www.waynejohn.com/the-world-is-crazy-heres-proof/" rel="prev"><span class="meta-nav">←</span> The World is Crazy, Here’s Proof</a></div> <div class="nav-next"><a href="http://www.waynejohn.com/to-the-spammer-dropping-links-in-comments/" rel="next">To the spammer dropping links in comments <span class="meta-nav">→</span></a></div> </div><!-- #nav-below --> <div id="comments"> <h3 id="comments-title">7 Responses to <em>Modifying The Blogger Template – Tag Structure</em></h3> <ol class="commentlist"> <li class="comment even thread-even depth-1" id="li-comment-1700"> <div id="comment-1700"> <div class="comment-author vcard"> <img alt='' src='http://0.gravatar.com/avatar/s=40' class='avatar avatar-40 photo avatar-default' height='40' width='40' /> <cite class="fn"><a href="http://wheelsandwood.com/" onclick="javascript:_gaq.push(['_trackEvent','outbound-commentauthor','http://wheelsandwood.com/']);" rel='external ' class='url'>Wheels and Wood</a></cite> <span class="says">says:</span> </div><!-- .comment-author .vcard --> <div class="comment-meta commentmetadata"><a href="http://www.waynejohn.com/modifying-the-blogger-template-tag-structure/comment-page-1/#comment-1700"> December 23, 2008 at 5:38 am</a> </div><!-- .comment-meta .commentmetadata --> <div class="comment-body"><p>I’ve never been to fond of blogger, and have always told everyone I know to host a blog themselves, but this guide will definitely help a lot of people struggling to customize their blogger themes/templates/blogs.</p> <p>Cheers</p> <div class="pd-rating" id="pd_rating_holder_1228954_comm_1700"></div> <script type="text/javascript" charset="utf-8"> PDRTJS_settings_1228954_comm_1700 = { "id" : "1228954", "unique_id" : "wp-comment-1700", "title" : "I%27ve+never+been+to+fond+of+blogger%2C+and+have+always+told+everyone+I+know+to+host+a+blog+themselves%2C+but+this+guide+will+definitely+help+a+lot+of+people+struggling+to+customize+their+blogger+theme...", "item_id" : "_comm_1700", "permalink" : "http%3A%2F%2Fwww.waynejohn.com%2Fmodifying-the-blogger-template-tag-structure%2F%23comment-1700" } </script> </div> <div class="reply"> <a rel='nofollow' class='comment-reply-link' href='/modifying-the-blogger-template-tag-structure/?replytocom=1700#respond' onclick='return addComment.moveForm("comment-1700", "1700", "respond", "249")'>Reply</a> </div><!-- .reply --> </div><!-- #comment-## --> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-1699"> <div id="comment-1699"> <div class="comment-author vcard"> <img alt='' src='http://0.gravatar.com/avatar/s=40' class='avatar avatar-40 photo avatar-default' height='40' width='40' /> <cite class="fn"><a href="http://www.waynejohn.com/" rel='external ' class='url'>Wayne</a></cite> <span class="says">says:</span> </div><!-- .comment-author .vcard --> <div class="comment-meta commentmetadata"><a href="http://www.waynejohn.com/modifying-the-blogger-template-tag-structure/comment-page-1/#comment-1699"> October 8, 2008 at 10:19 pm</a> </div><!-- .comment-meta .commentmetadata --> <div class="comment-body"><p>Hi Jim, thanks for taking time to let me know! I’ll be writing a lot more on templates in the coming months. I think I’ve found a method of working through an entire template and making some sense of it for many people. Maybe. haha</p> <div class="pd-rating" id="pd_rating_holder_1228954_comm_1699"></div> <script type="text/javascript" charset="utf-8"> PDRTJS_settings_1228954_comm_1699 = { "id" : "1228954", "unique_id" : "wp-comment-1699", "title" : "Hi+Jim%2C+thanks+for+taking+time+to+let+me+know%21++I%27ll+be+writing+a+lot+more+on+templates+in+the+coming+months.++I+think+I%27ve+found+a+method+of+working+through+an+entire+template+and+making+some+se...", "item_id" : "_comm_1699", "permalink" : "http%3A%2F%2Fwww.waynejohn.com%2Fmodifying-the-blogger-template-tag-structure%2F%23comment-1699" } </script> </div> <div class="reply"> <a rel='nofollow' class='comment-reply-link' href='/modifying-the-blogger-template-tag-structure/?replytocom=1699#respond' onclick='return addComment.moveForm("comment-1699", "1699", "respond", "249")'>Reply</a> </div><!-- .reply --> </div><!-- #comment-## --> </li> <li class="comment even thread-even depth-1" id="li-comment-1698"> <div id="comment-1698"> <div class="comment-author vcard"> <img alt='' src='http://0.gravatar.com/avatar/s=40' class='avatar avatar-40 photo avatar-default' height='40' width='40' /> <cite class="fn"><a href="http://h31n0us.blogspot.com/" onclick="javascript:_gaq.push(['_trackEvent','outbound-commentauthor','http://h31n0us.blogspot.com/']);" rel='external ' class='url'>Jim</a></cite> <span class="says">says:</span> </div><!-- .comment-author .vcard --> <div class="comment-meta commentmetadata"><a href="http://www.waynejohn.com/modifying-the-blogger-template-tag-structure/comment-page-1/#comment-1698"> October 8, 2008 at 6:21 pm</a> </div><!-- .comment-meta .commentmetadata --> <div class="comment-body"><p>Thanks for this. Blogger has some odd tags that I’ve been wondering about. Not too hard though. I just found a three-column layout and pasted the html into the layout. I’d like to get a little more in-depth later though and this will be helpful.</p> <div class="pd-rating" id="pd_rating_holder_1228954_comm_1698"></div> <script type="text/javascript" charset="utf-8"> PDRTJS_settings_1228954_comm_1698 = { "id" : "1228954", "unique_id" : "wp-comment-1698", "title" : "Thanks+for+this.+Blogger+has+some+odd+tags+that+I%27ve+been+wondering+about.+Not+too+hard+though.+I+just+found+a+three-column+layout+and+pasted+the+html+into+the+layout.+I%27d+like+to+get+a+little+mo...", "item_id" : "_comm_1698", "permalink" : "http%3A%2F%2Fwww.waynejohn.com%2Fmodifying-the-blogger-template-tag-structure%2F%23comment-1698" } </script> </div> <div class="reply"> <a rel='nofollow' class='comment-reply-link' href='/modifying-the-blogger-template-tag-structure/?replytocom=1698#respond' onclick='return addComment.moveForm("comment-1698", "1698", "respond", "249")'>Reply</a> </div><!-- .reply --> </div><!-- #comment-## --> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-1697"> <div id="comment-1697"> <div class="comment-author vcard"> <img alt='' src='http://0.gravatar.com/avatar/s=40' class='avatar avatar-40 photo avatar-default' height='40' width='40' /> <cite class="fn"><a href="http://www.waynejohn.com/" rel='external ' class='url'>Wayne</a></cite> <span class="says">says:</span> </div><!-- .comment-author .vcard --> <div class="comment-meta commentmetadata"><a href="http://www.waynejohn.com/modifying-the-blogger-template-tag-structure/comment-page-1/#comment-1697"> October 8, 2008 at 2:40 pm</a> </div><!-- .comment-meta .commentmetadata --> <div class="comment-body"><p>Tiffany (I sooo want to call you Tiff or Tiffy),<br /> Adding a third column, while trivial in concept, may not be so trivial due to how your template is defined. What you essentially want to do is add another <div>content here</div> <p> (notice the opening and closing tags?).</p> <p>But you cannot just add another div and expect it to work. There is some CSS involved, and you need to make sure the other components accept the new div and still format properly.</p> <p>What I would recommend that you and others who want to really dig into their templates is to create another blog on blogger, and then copy your ‘live’ template into the new blog. Make all the changes you want on your new blog and see how things look. You can hack your way to excellence this way and learn what in the world is going on in the template at the same time.</p> <p>If you do go this route, be sure to set aside some time for hair-pulling and sleepless nights (for those obsessive-compulsives among us), I’m one.</p> <p>When you do this, all your content and sidebar widgets will not be there, so might want to put a few things in there as placeholders, just to give it that ‘almost a copy of my blog’ kind of look. After all, all you really want to do is add another div.</p> <p>Where is that website that allows you to do what you said?</p> <div class="pd-rating" id="pd_rating_holder_1228954_comm_1697"></div> <script type="text/javascript" charset="utf-8"> PDRTJS_settings_1228954_comm_1697 = { "id" : "1228954", "unique_id" : "wp-comment-1697", "title" : "Tiffany+%28I+sooo+want+to+call+you+Tiff+or+Tiffy%29%2C+%0D%0AAdding+a+third+column%2C+while+trivial+in+concept%2C+may+not+be+so+trivial+due+to+how+your+template+is+defined.++What+you+essentially+want+to+do+is+...", "item_id" : "_comm_1697", "permalink" : "http%3A%2F%2Fwww.waynejohn.com%2Fmodifying-the-blogger-template-tag-structure%2F%23comment-1697" } </script> </div> <div class="reply"> <a rel='nofollow' class='comment-reply-link' href='/modifying-the-blogger-template-tag-structure/?replytocom=1697#respond' onclick='return addComment.moveForm("comment-1697", "1697", "respond", "249")'>Reply</a> </div><!-- .reply --> </div><!-- #comment-## --> </li> <li class="comment even thread-even depth-1" id="li-comment-1696"> <div id="comment-1696"> <div class="comment-author vcard"> <img alt='' src='http://0.gravatar.com/avatar/s=40' class='avatar avatar-40 photo avatar-default' height='40' width='40' /> <cite class="fn"><a href="http://stuck-in-the-sticks.blogspot.com/" onclick="javascript:_gaq.push(['_trackEvent','outbound-commentauthor','http://stuck-in-the-sticks.blogspot.com/']);" rel='external ' class='url'>Tiffany</a></cite> <span class="says">says:</span> </div><!-- .comment-author .vcard --> <div class="comment-meta commentmetadata"><a href="http://www.waynejohn.com/modifying-the-blogger-template-tag-structure/comment-page-1/#comment-1696"> October 8, 2008 at 12:45 pm</a> </div><!-- .comment-meta .commentmetadata --> <div class="comment-body"><p>Um Wayne. Is there a simple way (like pasting) a code into the html to create a third column? Or do you still have to freaking take shit out of your code, change it, add new stuff? I get so mad when I find an awesome template but it’s not “well written”. And keeping your widgets is a bitch. I don’t know how you do all this stuff. I found a website where all you do is paste the html as a widget in your sidebar to change your template. No losing widgets or anything. Sweet!</p> <div class="pd-rating" id="pd_rating_holder_1228954_comm_1696"></div> <script type="text/javascript" charset="utf-8"> PDRTJS_settings_1228954_comm_1696 = { "id" : "1228954", "unique_id" : "wp-comment-1696", "title" : "Um+Wayne.+Is+there+a+simple+way+%28like+pasting%29+a+code+into+the+html+to+create+a+third+column%3F+Or+do+you+still+have+to+freaking+take+shit+out+of+your+code%2C+change+it%2C+add+new+stuff%3F+I+get+so+mad+w...", "item_id" : "_comm_1696", "permalink" : "http%3A%2F%2Fwww.waynejohn.com%2Fmodifying-the-blogger-template-tag-structure%2F%23comment-1696" } </script> </div> <div class="reply"> <a rel='nofollow' class='comment-reply-link' href='/modifying-the-blogger-template-tag-structure/?replytocom=1696#respond' onclick='return addComment.moveForm("comment-1696", "1696", "respond", "249")'>Reply</a> </div><!-- .reply --> </div><!-- #comment-## --> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-1695"> <div id="comment-1695"> <div class="comment-author vcard"> <img alt='' src='http://0.gravatar.com/avatar/s=40' class='avatar avatar-40 photo avatar-default' height='40' width='40' /> <cite class="fn"><a href="http://www.waynejohn.com/" rel='external ' class='url'>Wayne</a></cite> <span class="says">says:</span> </div><!-- .comment-author .vcard --> <div class="comment-meta commentmetadata"><a href="http://www.waynejohn.com/modifying-the-blogger-template-tag-structure/comment-page-1/#comment-1695"> October 8, 2008 at 12:34 pm</a> </div><!-- .comment-meta .commentmetadata --> <div class="comment-body"><p>Hey there BakerWatson! I think you’ll find the answer to those questions in some of the upcoming articles in the Lesson series. In fact, the remaining articles in the series will be great for what you want to know and much more perhaps.</p> <p>Thanks for letting me know where you are at with your blog. I’ll be sure to include the info you want.</p> <p>As for modifying where things appear, yes, you would have to modify the HTML directly. The colors and fonts can be changed via the administration panels, but if you want something in a different location, it’s about modifying the HTML.</p> <div class="pd-rating" id="pd_rating_holder_1228954_comm_1695"></div> <script type="text/javascript" charset="utf-8"> PDRTJS_settings_1228954_comm_1695 = { "id" : "1228954", "unique_id" : "wp-comment-1695", "title" : "Hey+there+BakerWatson%21++I+think+you%27ll+find+the+answer+to+those+questions+in+some+of+the+upcoming+articles+in+the+Lesson+series.++In+fact%2C+the+remaining+articles+in+the+series+will+be+great+for+w...", "item_id" : "_comm_1695", "permalink" : "http%3A%2F%2Fwww.waynejohn.com%2Fmodifying-the-blogger-template-tag-structure%2F%23comment-1695" } </script> </div> <div class="reply"> <a rel='nofollow' class='comment-reply-link' href='/modifying-the-blogger-template-tag-structure/?replytocom=1695#respond' onclick='return addComment.moveForm("comment-1695", "1695", "respond", "249")'>Reply</a> </div><!-- .reply --> </div><!-- #comment-## --> </li> <li class="comment even thread-even depth-1" id="li-comment-1694"> <div id="comment-1694"> <div class="comment-author vcard"> <img alt='' src='http://0.gravatar.com/avatar/s=40' class='avatar avatar-40 photo avatar-default' height='40' width='40' /> <cite class="fn"><a href="http://fishandfrog-turtleandblog.blogspot.com/" onclick="javascript:_gaq.push(['_trackEvent','outbound-commentauthor','http://fishandfrog-turtleandblog.blogspot.com/']);" rel='external ' class='url'>BakerWatson</a></cite> <span class="says">says:</span> </div><!-- .comment-author .vcard --> <div class="comment-meta commentmetadata"><a href="http://www.waynejohn.com/modifying-the-blogger-template-tag-structure/comment-page-1/#comment-1694"> October 8, 2008 at 11:46 am</a> </div><!-- .comment-meta .commentmetadata --> <div class="comment-body"><p>Wayne,</p> <p>This is good. I’ve been meaning to get around to this, especially on the ‘title’ info as you just happened to use as an illustration. I can follow just a smattering of HTML, but nothing complex. Usually I find myself going to look at something similar to what I want and then I try to replicate it with the specifics of what I need. Of course this is mostly very basic type stuff only.</p> <p>As you know I use a standard template from Blogger. In general I don’t want to make many changes on the whole as I’m pretty satisfied with it. I would like to learn, however, how to change the appearance of the text in the title and description in the header. I suspect I will continue to use a photo as the main component, but at times I might want to change the photo. I would like to be able to change the font and placement of the title and description at times to have it ‘fit’ the particular photo I might want to use. I can see how to change the color, but (correct me if I am wrong) I presume to change the font type and size or the exact placement I will have to edit the HTML.</p> <p>I’m in no real hurry to make such changes, but I can see I would like to have the ability down the road.</p> <p>Baker</p> <div class="pd-rating" id="pd_rating_holder_1228954_comm_1694"></div> <script type="text/javascript" charset="utf-8"> PDRTJS_settings_1228954_comm_1694 = { "id" : "1228954", "unique_id" : "wp-comment-1694", "title" : "Wayne%2C%0D%0A%0D%0AThis+is+good.++I%27ve+been+meaning+to+get+around+to+this%2C+especially+on+the+%27title%27+info+as+you+just+happened+to+use+as+an+illustration.++I+can+follow+just+a+smattering+of+HTML%2C+but+nothi...", "item_id" : "_comm_1694", "permalink" : "http%3A%2F%2Fwww.waynejohn.com%2Fmodifying-the-blogger-template-tag-structure%2F%23comment-1694" } </script> </div> <div class="reply"> <a rel='nofollow' class='comment-reply-link' href='/modifying-the-blogger-template-tag-structure/?replytocom=1694#respond' onclick='return addComment.moveForm("comment-1694", "1694", "respond", "249")'>Reply</a> </div><!-- .reply --> </div><!-- #comment-## --> </li> </ol> <div id="respond"> <h3 id="reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/modifying-the-blogger-template-tag-structure/#respond" style="display:none;">Cancel reply</a></small></h3> <form action="http://www.waynejohn.com/wp-comments-post.php" method="post" id="commentform"> <p class="comment-notes">Your email address will not be published. Required fields are marked <span class="required">*</span></p> <p class="comment-form-author"><label for="author">Name</label> <span class="required">*</span><input id="author" name="author" type="text" value="" size="30" aria-required='true' /></p> <p class="comment-form-email"><label for="email">Email</label> <span class="required">*</span><input id="email" name="email" type="text" value="" size="30" aria-required='true' /></p> <p class="comment-form-url"><label for="url">Website</label><input id="url" name="url" type="text" value="" size="30" /></p> <p class="comment-form-comment"><label for="comment">Comment</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p> <p class="form-allowed-tags">You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes: <code><a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> </code></p> <p class="form-submit"> <input name="submit" type="submit" id="submit" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='249' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p> <input type="hidden" name="cl_type" /><input type="hidden" name="choice_id" /><input type="hidden" name="request_id" /><input type="hidden" name="cl_post_title" id="cl_post_title"/><input type="hidden" name="cl_post_url" id="cl_post_url"/><input type="hidden" name="cl_memberid" id="cl_memberid"/><div id="commentluv"><input type="checkbox" id="doluv" name="doluv" checked="checked" style="width:25px;"></input><span id="mylastpost" style="clear: both"><a href="http://comluv.com" target="_blank"><img src="http://www.waynejohn.com/wp-content/plugins/commentluv/images/CL91_White.gif" border="0" alt="CommentLuv Enabled" title="CommentLuv Enabled"/></a></span><img class="clarrow" id="showmore" src="http://www.waynejohn.com/wp-content/plugins/commentluv/images/down-arrow.gif" alt="show more" style="display:none;"/></div><div id="lastposts" style="display: none;"></div><p>Enter YourName @ YourKeywords in the Name field to take advantage of Keyword love. Please note, I normally won't approve comments that use products or niche keywords for a name. Get your comment approved, don't be a spammer.</p> <p style="clear: both;" class="subscribe-to-comments"> <input type="checkbox" name="subscribe" id="subscribe" value="subscribe" style="width: auto;" /> <label for="subscribe">Notify me of followup comments via e-mail</label> </p> <div class="twitlink"><br><small>You can add a link to follow you on twitter if you put your username in this box.<br>Only needs to be added once (unless you change your username). No http or @<input id="atf_twitter_id" type="text" name="atf_twitter_id" class=""/></small> Twitter <br></div><style>.twitlink {border: 1px solid #d1d1d1; background-color: lightBlue; padding: 5px; margin: 5px;}</style> </form> </div><!-- #respond --> <script type="text/javascript" charset="utf-8"> jQuery(document).ready(function() { jQuery('#commentform').submit(function() { _gaq.push( ['_setAccount','UA-1458791-2'], ['_trackEvent','comment'] ); }); }); </script> </div><!-- #comments --> </div><!-- #content --> </div><!-- #container --> <div id="primary" class="widget-area" role="complementary"> <ul class="xoxo"> <li id="meta" class="widget-container"> <li id="search-3" class="widget-container widget_search"><h3 class="widget-title">Search</h3><form role="search" method="get" id="searchform" action="http://www.waynejohn.com/" > <div><label class="screen-reader-text" for="s">Search for:</label> <input type="text" value="" name="s" id="s" /> <input type="submit" id="searchsubmit" value="Search" /> </div> </form></li><li id="text-4" class="widget-container widget_text"><h3 class="widget-title">Start your website!</h3> <div class="textwidget"><p><img src="http://www.waynejohn.com/wp-content/uploads/2010/08/website_icon.jpeg" title="Start your website today!" style="float:right;margin-left:5px;" />Getting started with a website is easy. Simply follow these steps to get started:</p> <p>  1.) <a href="http://www.waynejohn.com/domain-names" title="purchase a domain name">Get a domain name</a><br />   2.) <a href="http://www.waynejohn.com/hosting" title="purchase hosting">Purchase hosting</a><br />   3.) Begin development!</p> <p>If you need any assistance, or would like to inquire about hiring me to assist with your efforts, you can <a href="http://www.waynejohn.com/contact/" >contact me</a>! If you are self-motivated to learn web development, here's a <a href="http://www.waynejohn.com/build-website" >step-by-step tutorial</a>.</p> </div> </li><li id="linkcat-880" class="widget-container widget_links"><h3 class="widget-title">Sponsors</h3> <ul class='xoxo blogroll'> <li><a href="http://www.freelance-career.com" title="Freelancing opportunites for developers, writers and more" target="_blank" onclick="javascript:_gaq.push(['_trackEvent','outbound-blogroll','http://www.freelance-career.com']);">Freelance Career</a></li> <li><a href="http://www.linklistings.net" title="Link directory, add your link today!" target="_blank" onclick="javascript:_gaq.push(['_trackEvent','outbound-blogroll','http://www.linklistings.net']);">Link Listings</a></li> <li><a href="http://www.fitnessbodyonline.com/" title="P90X Home Fitness" target="_blank" onclick="javascript:_gaq.push(['_trackEvent','outbound-blogroll','http://www.fitnessbodyonline.com/']);">P90X Home Fitness</a></li> </ul> </li> <li id="top-commentators" class="widget-container widget_topcomm"><h3 class="widget-title">Top Commentators for the Month</h3> <ol> <li><a href='http://www.charlestonsouthcarolinausa.net' target='_blank'><img class="tcwGravatar" src="http://www.gravatar.com/avatar.php?gravatar_id=566ddc5d4c92eb5b20cd08658403fba9&size=16&default=" alt ="BJ@Charleston South Carolina" title="BJ@Charleston South Carolina" border="0"/> BJ@Charleston Sou... (1)</a></li> <li><a href='http://www.CouponsForToys.com' target='_blank'><img class="tcwGravatar" src="http://www.gravatar.com/avatar.php?gravatar_id=c2f6e7d348c3ceace608957e0e3cef96&size=16&default=" alt ="cam @ toy coupons" title="cam @ toy coupons" border="0"/> cam @ toy coupons (1)</a></li> <li><a href='http://www.wheeledholdall.org' target='_blank'><img class="tcwGravatar" src="http://www.gravatar.com/avatar.php?gravatar_id=825e9e4307b614bc60bf17a69ae1817e&size=16&default=" alt ="Dave@Wheeled Holdall" title="Dave@Wheeled Holdall" border="0"/> Dave@Wheeled Holdall (1)</a></li> </ol></li><!-- end of widget --><li id="text-3" class="widget-container widget_text"><h3 class="widget-title">Google Friend Connect</h3> <div class="textwidget"><!-- Include the Google Friend Connect javascript library. --> <script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script> <!-- Define the div tag where the gadget will be inserted. --> <div id="div-6090088366313439615" style="width:295px;"></div> <!-- Render the gadget into a div. --> <script type="text/javascript"> var skin = {}; skin['BORDER_COLOR'] = 'transparent'; skin['ENDCAP_BG_COLOR'] = 'transparent'; skin['ENDCAP_TEXT_COLOR'] = '#333333'; skin['ENDCAP_LINK_COLOR'] = '#0000cc'; skin['ALTERNATE_BG_COLOR'] = 'transparent'; skin['CONTENT_BG_COLOR'] = 'transparent'; skin['CONTENT_LINK_COLOR'] = '#0000cc'; skin['CONTENT_TEXT_COLOR'] = '#333333'; skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc'; skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666'; skin['CONTENT_HEADLINE_COLOR'] = '#333333'; skin['NUMBER_ROWS'] = '5'; google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */); google.friendconnect.container.renderMembersGadget( { id: 'div-6090088366313439615', site: '09423232706781706405' }, skin); </script> </div> </li> </ul> </div><!-- #primary .widget-area --> <div id="secondary" class="widget-area" role="complementary"> <ul class="xoxo"> <li id="recent-posts-3" class="widget-container widget_recent_entries"> <h3 class="widget-title">Recently Posted</h3> <ul> <li><a href="http://www.waynejohn.com/megan-mahoney-horse-training-and-riding-instruction/" title="Megan Mahoney Horse Training and Riding Instruction">Megan Mahoney Horse Training and Riding Instruction</a></li> <li><a href="http://www.waynejohn.com/what-do-you-say-we-make-apple-juice-and-fax-it-to-each-other/" title="What do you say we make apple juice and fax it to each other?">What do you say we make apple juice and fax it to each other?</a></li> <li><a href="http://www.waynejohn.com/make-money-by-referring-new-hosting-customers-to-dreamhost/" title="Make money by referring new hosting customers to DreamHost">Make money by referring new hosting customers to DreamHost</a></li> <li><a href="http://www.waynejohn.com/the-problem-with-aggregating-your-blog-posts-to-social-networks/" title="The problem with aggregating your blog posts to social networks">The problem with aggregating your blog posts to social networks</a></li> <li><a href="http://www.waynejohn.com/spammers-are-dolts-how-to-build-links-like-an-idiot/" title="Spammers are dolts. -OR- How to build links like an idiot.">Spammers are dolts. -OR- How to build links like an idiot.</a></li> </ul> </li><li id="most_commented_widget-4" class="widget-container widget_most_commented_widget"><h3 class="widget-title">Most Commented Posts</h3><ul><li><a href="http://www.waynejohn.com/the-entrecard-10000-ec-credit-giveaway-contest/" title="The Entrecard 10,000 EC Credit Giveaway Contest">The Entrecard 10,000 EC Credit Giveaway Contest</a> (91)</li><li><a href="http://www.waynejohn.com/creating-and-using-a-gravatar-image-on-blogs-and-other-sites/" title="Creating and Using A Gravatar Image on Blogs and Other Sites">Creating and Using A Gravatar Image on Blogs and Other Sites</a> (80)</li><li><a href="http://www.waynejohn.com/quit-smoking-22-things-i-hate-about-smoking/" title="Quit Smoking – 22 Things I Hate About Smoking">Quit Smoking – 22 Things I Hate About Smoking</a> (57)</li><li><a href="http://www.waynejohn.com/add-yourself-to-my-blog-roll/" title="Add Yourself to My Blog Roll">Add Yourself to My Blog Roll</a> (57)</li><li><a href="http://www.waynejohn.com/10-cool-create-an-avatar-web-sites/" title="10 Cool Create an Avatar Web Sites">10 Cool Create an Avatar Web Sites</a> (42)</li><li><a href="http://www.waynejohn.com/5-tips-for-commenting-on-blogs/" title="5 Tips for Commenting On Blogs">5 Tips for Commenting On Blogs</a> (42)</li><li><a href="http://www.waynejohn.com/ask-me-anything-and-ill-respond/" title="Ask me anything, and I’ll respond">Ask me anything, and I’ll respond</a> (42)</li><li><a href="http://www.waynejohn.com/one-simple-method-to-keep-visitors-on-your-site/" title="One Simple Method to Keep Visitors on Your Site">One Simple Method to Keep Visitors on Your Site</a> (38)</li><li><a href="http://www.waynejohn.com/i-just-cant-keep-my-hands-to-myself/" title="I just can’t keep my hands to myself">I just can’t keep my hands to myself</a> (38)</li><li><a href="http://www.waynejohn.com/the-tattoo-on-my-toes/" title="The Tattoo on my Toes">The Tattoo on my Toes</a> (33)</li></ul></li><li id="advancedrandomposts-4" class="widget-container widget_advancedrandomposts"><h3 class="widget-title">Random Posts</h3><ul class="advanced-random-posts"><li><a href="http://www.waynejohn.com/our-10th-anniversary/" title="Our 10th Anniversary!" >Our 10th Anniversary!</a></li> <li><a href="http://www.waynejohn.com/blogspot-blog-using-free-css-templates-to-define-the-look/" title="BlogSpot Blog – Using Free CSS Templates To Define The Look" >BlogSpot Blog – Using Free CSS Templates To Define The Look</a></li> <li><a href="http://www.waynejohn.com/displaying-video-favorites-from-youtube/" title="Displaying video favorites from YouTube" >Displaying video favorites from YouTube</a></li> <li><a href="http://www.waynejohn.com/7-things-you-didnt-know-about-me-meme/" title="7 Things You Didn't Know About Me Meme" >7 Things You Didn't Know About Me Meme</a></li> <li><a href="http://www.waynejohn.com/scripting-a-sql-2000-database-from-sql-2005/" title="Scripting a SQL 2000 Database from SQL 2005" >Scripting a SQL 2000 Database from SQL 2005</a></li> <li><a href="http://www.waynejohn.com/5-tips-for-commenting-on-blogs/" title="5 Tips for Commenting On Blogs" >5 Tips for Commenting On Blogs</a></li> <li><a href="http://www.waynejohn.com/what-a-miserable-wreck/" title="What a Miserable Wreck" >What a Miserable Wreck</a></li> <li><a href="http://www.waynejohn.com/the-migration-to-wordpress-is-complete/" title="The Migration to WordPress is Complete" >The Migration to WordPress is Complete</a></li> <li><a href="http://www.waynejohn.com/modifying-your-blogger-header-the-blogger-way/" title="Modifying Your Blogger Header The Blogger Way" >Modifying Your Blogger Header The Blogger Way</a></li> <li><a href="http://www.waynejohn.com/bikers-stage-fuel-price-protest/" title="Bikers stage fuel price protest" >Bikers stage fuel price protest</a></li> </ul></li><li id="text-5" class="widget-container widget_text"> <div class="textwidget"><center><a href="http://www.waynejohn.com/hosting" ><img src="http://www.waynejohn.com/wp-content/uploads/2010/08/120x600-d.gif" title="DreamHost website hosting" /></a></center></div> </li><li> <h3 class="widget-title">Might be interesting?</h3> <script type="text/javascript"><!-- google_ad_client = "pub-8394638085206018"; /* WJSide Links 200x90, created 8/18/10 */ google_ad_slot = "1310890829"; google_ad_width = 200; google_ad_height = 90; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </li> </ul> </div><!-- #secondary .widget-area --> </div><!-- #main --> <div id="footer" role="contentinfo"> <div id="colophon"> <div id="site-info"> <a href="http://www.waynejohn.com/" title="Wayne John" rel="home"> Wayne John </a> </div><!-- #site-info --> <div id="site-generator"> <a href="http://wordpress.org/" title="Semantic Personal Publishing Platform" rel="generator"> Proudly powered by WordPress. </a> </div><!-- #site-generator --> </div><!-- #colophon --> </div><!-- #footer --> </div><!-- #wrapper --> <script type='text/javascript' src='http://www.waynejohn.com/wp-includes/js/jquery/jquery.form.js?ver=2.02m'></script> <script type='text/javascript' src='http://www.waynejohn.com/wp-content/plugins/contact-form-7/scripts.js?ver=2.3.1'></script> <script type='text/javascript' src='http://www.waynejohn.com/wp-content/plugins/sexybookmarks/js/sexy-bookmarks-public.js?ver=3.2.4.2'></script> <script class="javascript" src="http://www.waynejohn.com/wp-content/plugins/google-syntax-highlighter/Scripts/shCore.js"></script> <script class="javascript" src="http://www.waynejohn.com/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushCSharp.js"></script> <script class="javascript" src="http://www.waynejohn.com/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushPhp.js"></script> <script class="javascript" src="http://www.waynejohn.com/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushJScript.js"></script> <script class="javascript" src="http://www.waynejohn.com/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushJava.js"></script> <script class="javascript" src="http://www.waynejohn.com/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushVb.js"></script> <script class="javascript" src="http://www.waynejohn.com/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushSql.js"></script> <script class="javascript" src="http://www.waynejohn.com/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushXml.js"></script> <script class="javascript" src="http://www.waynejohn.com/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushDelphi.js"></script> <script class="javascript" src="http://www.waynejohn.com/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushPython.js"></script> <script class="javascript" src="http://www.waynejohn.com/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushRuby.js"></script> <script class="javascript" src="http://www.waynejohn.com/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushCss.js"></script> <script class="javascript" src="http://www.waynejohn.com/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushCpp.js"></script> <script class="javascript"> dp.SyntaxHighlighter.ClipboardSwf = 'http://www.waynejohn.com/wp-content/plugins/google-syntax-highlighter/Scripts/clipboard.swf'; dp.SyntaxHighlighter.HighlightAll('code'); </script> <script type='text/javascript' src='http://i.polldaddy.com/ratings/rating.js?ver=3.0.1'></script> </body> </html>