(Related Topic: Template Downloads)
The great thing about Blogger/Blogspot templates is their flexibility. Depending on your skills and creativity, there is virtually limitless range of design variations that you can implement. Unlike other blog hosting services, such as Wordpress, Blogger does not require you to pay fees to modify the templates. However, there is a downside to this. Blogger does not provide readily available professional looking templates, such as three-column layouts or templates with built-in navigation bars. Consequently, if you want to modify the Blogger template and extend its functionality, you either need to download templates from other site or directly edit your own template. The second option is preferable, especially if you want to have a unique blogsite design.
There are web sites and blogsites (such as this one) that offer HTML and CSS tutorials. However, the main problem when it comes to editing Blogger template codes is finding the specific sections that need to be edited. Although the Blogger template codes are arranged in logical manner, they are especially meant to be read by web browsers and not by human eyes. For most people, HTML and CSS codes are confusing if not downright intimidating.
To conveniently edit your Blogger/Blogspot template, here are the steps that you should follow:
Step1: Open the HTML template editor of your blog and backup or download the template.
The XML editor will open as shown below:
Step2: Save this XML file into the hard desk of your computer.
Step3: Open the XML template file using Notepad. It is not advisable to use MS-Word because it may introduce hidden codes that may not be parsed by the template editor.
Step4: Simply use the Ctrl+F command to find the specific sections that you need to edit.
Step5: After editing the template, save it and upload it to Blogger.
NOTE: Another method of editing the template is to directly edit it in the Blogger HTML template editor. To do this, you must first, check the "expand widget" box found at the upper-right corner of the HTML editor frame. You may also copy-paste the whole codes onto Notepad and do the editing there.
2007-11-30
Editing Templates
HOME||CONTENTS
2007-11-28
The Importance of RSS Feeds
HOME||CONTENTSHave you noticed the orange icon above? You might already have seen this icon in many other sites. This icon is the universally recognized standard symbol of RSS feeds. The acronym, RSS, stands for "really simple syndication." RSS feeds allow the contents of sites or blogs to be automatically published in other sites or feed readers without the need for manually posting the contents.
For instance, if your blog is subscribed to MyBlogLog, the contents of your blog are partially displayed on this site. This is made possible by the RSS feeds of your blog site. The RSS feeds are also responsible for allowing your site to be easily indexed by search engines such as Google.
If you are using Blogger/Blogspot services, the default RSS feed of your blog is called "Atom." Try clicking the "Atom" link found at the bottom-most part of the post body of your blog. Clicking the said link will open a new page that displays the contents of your blog, minus the widgets and layout design. This page is known as the RSS feed page. This page is used by other sites and RSS readers to dispaly the contents of your blog. Feed aggregators such as Technorati will not be able to index and display the contents of your blogsite without the RSS feeds.
One way of increasing the web visibiltiy and web traffic of you site is to register your blogsite to different RSS readers. However, this is very inconvenient and time-consuming. The best option would be to simply redirect your feeds to Feed Burner. This site consolidates all other RSS feeds and readers into one convenient feed. To redirect all the feeds of your blog to Feed Burner, you must first register and follow the instructions therein.
After, registering your site, you will get a new RSS feed URL. You have to paste this URL address onto the "site feed box" of your Blogger/Blogspot template. To do this, go to Settings-Site Feed tab and paste the new RSS feed URL of your site to the corresponding box as shown below.
Now you are done. All your feeds will now be redirected to Feed Burner. Try exploring your Feed Burner account to customize the settings and optimize your blog.
2007-11-27
Collapsible Posts (Dropdown Posts)
HOME||CONTENTSIf you like your blog posts to be truncated without actually eliminating a single word, then the "collapsible post" option is the best option for you. This option allows your blog post to be partially displayed on the main page of your blogsite. In this manner, only the first paragraph or selected paragraphs will be displayed. Some blog readers do not have the patience to scroll down on your blog posts to find the articles that are interesting to them. The collapsible option allows your readers to conveniently scan your main blog posts. Your readers will be able to read the rest of the post by simply clicking the "Read More..." link at the bottom of each article post. In my Much Ado About Nothing blogsite, I have used the "More Blasphemy..." link. You can actually customize this link by editing the corresponding texts in the HTML codes.
However, the collapsible option is not readily available in Blogger/Blogspot. You first need to implement some CSS and HTML codes in the template of your blogsite. Here are the steps that you should follow to include the collapsible option in your Blogger/Blogspot template:
Step1: Backup your template. Just in case something goes wrong, you can always go back to your original template.
Step2: Open the HTML editor of your template and locate the closing </head> tag. Just before this tag, add these codes:
<b:if cond='data:blog.pageType != "item"'>
<script type="text/javascript">
var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}
function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}
function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}
</script>
</b:if>
If the codes above do not work, go to this link and copy all the codes: Codes.
Step3: Save your template and locate this section in the HTML document:
<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Summary only...</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Add the red-highlighted codes as shown above. If the codes above do not work properly, visit this link: Codes2.
Step4: Save your template and go to the Settings-Formatting tab.
Step5: Locate the Post Template box and paste these codes as shown in the illustration:
Type your summary here
<span id="fullpost">
Type rest of the post here
</span>
Now you are done. Save your template and view your blog. You will notice that there are actually no changes in your blog posts. You must first edit the old blog posts and include the post template codes to implement the "collapsible post" option. However, every time you make a new post, the template codes that you have added will appear in the "Edit HTML" tab of the post editor. Hence, it is better to first type your blog post using the Edit HTML tab of the post editor to assure that the texts are properly coded. Simply inlcude the texts or portion of your post that you want to be hidden within the <span> codes.
NOTE: If you find it difficult to directly edit your HTML template, refer to this post: Editing Templates.
2007-11-25
New Header and Crosscol Elements
HOME||CONTENTSTo add new page elements to the header and crosscol areas of your template, you must first open the template HTML editor or you may directly open the Page Element tab. If your template does not yet have extra header or crosscol (cross-column) page elements, follow the steps enumerated below to add new page elements to these areas.
Step1: Locate these sections:
For the Header: <b:section class='header' id='header' maxwidgets='0' showaddelement='no'>
For the Crosscol: <b:section class='crosscol' id='crosscol' showaddelement='no'>
Step2: Change the codes above into these:
For the Header: <b:section class='header' id='header' maxwidgets='5' showaddelement='yes'>
For the Crosscol: <b:section class='crosscol' id='crosscol' showaddelement='yes'>
Step3: Save the template and go back to the Page Elements tab. You will notice that new element boxes now appear. Now, you can add new widgets in these areas.
Google Search Box
HOME||CONTENTS(Related Post: Blogger Search Box)
One way of monetizing or generating residual income from your blog is to add a Google search box. The search box that you see on the header area of this blogsite is a Google search box. Every time you or someone else uses the said search box, certain points are added to your Google Adsense account. These points are then accumulated and converted into monetary value when they reach certain level. This is called Adsense for Search.
Adsense for Search offers three window options. Depending on your preferences, the search results may open on the same window, on another window or within your own site. Try typing search keywords inside the Google search box above. When you click the search button, the search results open within this site. This option is the best option if you want your readers to stay on your site when making Google searches.
To include a Google search box with similar settings such as found on this site, you must first open your Google Adsense account. If you do not have one, you must first create an account. Go to this site: Google Adsense.
Here are the simple steps that you can follow to embed a Google search box on your Blogger/Blogspot site:
Step1: Open your Google Adsense account.
Step2: Choose the Adsense Setup tab and click Adsense for search as shown in the illustration below:
Step3: Choose the option that will open the search results area within your site. You will notice that two sets of codes will be displayed. The first set of codes is for the search box while the second set of codes is for the search results area.
Step4: Login to your Blogger/Blogspot account and open the Page Elements tab.
Step5: Copy-paste the first set of codes onto an available header page element box. Then, copy-paste the second set of codes onto a crosscol page element box. Save your template and view your blog. Now, you are done. You may now test your new Google search box.
NOTE: To add new page elements to the header and crosscol areas of your template, read this post: New Header and Crosscol Elements.
2007-11-22
Preserving Widgets
HOME||CONTENTSOnce you have decided to upload a new template for your blogsite, you may want to preserve the widgets of your original template. Here are the simple steps to preserve the widgets of your original template, thereby allowing them to appear on your newly modified blog template.
Step1: Go to the template editor and choose the edit HTML tab:
Step2: Find these codes: </body></html>. These codes are easy to find because they are located at the end of the template file.
Step3: Add this code immediately before the codes stated above: <b:section id='backupwidget' showaddelement='yes'/>. Save your template.
Step4: Go to the Page Elements tab. You will notice that a new blank page element box appears on the bottom-most portion. Drag the widget elements into the new element box as shown below. Save your template.
Step5: Open again the HTML template editor and locate this section: <b:section id='backupwidget' showaddelement='yes'/>. This is the same section that you previously added. Copy this section and include all the codes therein until the closing </html> tag.
Step6: Open the new teplate XML file that you have designed or downloaded from other source. Choose Notepad to edit the file. Now, paste the codes that you have just copied from your older template into the last section of the new template. However, you must first delete these codes: </body></html> in the new template and replace it with the codes that you have copied from the older template as stated in Step5. Save your new template.
Step 7: Now you are done. You can now upload the new template for your blogite. All the widgets that you included from the older template will now appear in the new template. Simply rearrange the widget elements based on your preferences. See this post for instructions on how to properly download and upload a new template: Template Downloads.
2007-11-21
Blogger Search Box
HOME||CONTENTSHave you noticed the search box above? It is not part of Google search box. Rather, it is actually an integral part of the Blogger/Blogspot template. Typing a keyword search inside the dialog box will return search results of contents found within this blogsite. <form id="searchthis" action="http://homartemplatepractice.blogspot.com/search" style="display: inline;" method="get">
If you have hidden the navigation bar of your template, it is ideal to include a search box such as found above to help your readers find specific contents within your blogsite. The illustration below shows the location of the default Blogger/Blogspot search box.
To include a Blogger/Blogspot search box in your blogsite, you must first open the Page Elements tab of your template as shown below.
Then add the codes found below to any available location you prefer. However, you first have to change the red-higlighted codes in the shown example to match the specifications of your blogsite. Otherwise, any keyword search on your blogsite would return results found in this site.
2007-11-17
Template Downloads
HOME||CONTENTSAlthough Blogger/Blogspot is very easy to use and it has great flexibility compared to other blog hosting services, it has some disadvantages. One disadvantage of Blogger/Blogspot is its lack of readily available three-column templates and other more professionally-looking templates such as found in Wordpress, for instance. However, this blog host offers lots of freedom, especially for would-be web designers.
Although you might be very creative, it requires some technical skills when it comes to designing Blogger/Blogspot templates. You have to be knowledgeable about HTML and CSS to implement your ideas. On the other hand, if you are the type of person who is too busy and do not have much patience to design your own templates, you may simply download from other sources. There are many blogsites and web sites that offer free templates.
I have listed here some links where you can find free templates for Blogger/Blogspot. However, when it comes to downloading templates, it is not as straightforward as copy-pasting the codes. You must first download the file and save it to your hard desk, then upload it to the template editor of your blogsite.
There are instances wherein the template editor will not parse or you will be asked to delete some widgets. This is especially true if you have too many widgets in your original blog template. Typically, you must simply confirm and save. However, there are instances wherein you may need to manually delete the widgets. Hence, it is wise to first save the original template before trying to replace it with a new one. This should be done to preserve the widgets of your original template.
Here are some of the best links that offer free Blogger/Blogspot templates:
2007-11-16
Hiding the Navigation Bar
HOME||CONTENTS
To hide the navigation bar, first find the "credits section" on the template of your blogsite. The credits section contains the name of the template designer. This section resembles the sample below. For the sake of illustration, I have used the credits section of this blogsite's template.
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
Updated by: Blogger Team
Modified by: Homar Murillo
----------------------------------------------- */
The aforementioned section is located on the upper part of your blogsite template. Hence, it is very easyto find. Immediately under it, add this CSS code:
#navbar-iframe {
display: none !important;
}
Now you are done. It is as simple as that. Save your template and view your blog. If you want to restore the navigation bar, simply remove the aforementioned CSS code.
2007-11-14
Scrollbars Inside Blog Posts
HOME||CONTENTSIf you intend to include very long text contents in your blog posts but you want to save space, you may use the scrolling text or scroll bar definitions in your style sheets. For instance, I have posted here the template of this blogsite. However, since the template has very long text contents, I opted to use the scrolling text style. I have used the codes below for the CSS scroll bar definitions within my blog posts. You may directly copy-paste the codes in the style sheet of your blog template or you may modify them first, depending on your preferences. The size (width and height), background color, and border definitions can all be modified. <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <head> <b:include data='blog' name='all-head-content'/> <title><data:blog.pageTitle/></title> <link href='http://homar.murillo.googlepages.com/favicon.png' rel='shortcut icon' type='image/png'/> <b:skin><![CDATA[/* ----------------------------------------------- Blogger Template Style Name: Minima Original Design By: Douglas Bowman URL: www.stopdesign.com Updated By: Blogger Team Modified By: Homar Murillo ----------------------------------------------- */ /* Variable definitions ==================== <Variable name="bgcolor" description="Page Background Color" type="color" default="#fff" value="#ffffff"> <Variable name="textcolor" description="Text Color" type="color" default="#333" value="#000000"> <Variable name="linkcolor" description="Link Color" type="color" default="#58a" value="#a9501b"> <Variable name="pagetitlecolor" description="Blog Title Color" type="color" default="#666" value="#b47b10"> <Variable name="descriptioncolor" description="Blog Description Color" type="color" default="#999" value="#b47b10"> <Variable name="titlecolor" description="Post Title Color" type="color" default="#c60" value="#b47b10"> <Variable name="bordercolor" description="Border Color" type="color" default="#ccc" value="#b47b10"> <Variable name="sidebarcolor" description="Sidebar Title Color" type="color" default="#999" value="#b47b10"> <Variable name="sidebartextcolor" description="Sidebar Text Color" type="color" default="#666" value="#000000"> <Variable name="visitedlinkcolor" description="Visited Link Color" type="color" default="#999" value="#a9501b"> <Variable name="bodyfont" description="Text Font" type="font" default="normal normal 100% <Variable name="headerfont" description="Sidebar Title Font" type="font" default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif"> <Variable name="pagetitlefont" description="Blog Title Font" type="font" default="normal normal 200% <Variable name="descriptionfont" description="Blog Description Font" type="font" default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="italic normal 116% <Variable name="postfooterfont" description="Post Footer Font" type="font" default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif"> */ /* Use this with templates/template-twocol.html */ body { background:$bgcolor; margin:0; color:$textcolor; font:x-small Georgia Serif; font-size/* */:/**/small; font-size: /**/small; text-align: center; } a:link { color:$linkcolor; text-decoration:none; } a:visited { color:$visitedlinkcolor; text-decoration:none; } a:hover { color:$titlecolor; text-decoration:underline; } a img { border-width:0; } /* Header ----------------------------------------------- */ #header-wrapper { width:960px; background: none; margin:0 auto 10px; border:1px solid $bordercolor; } #header-inner { background-position: left; margin-left: auto; margin-right: auto; } #header { margin: 5px; border: 1px solid $bordercolor; text-align: center; color:$pagetitlecolor; } #header h1 { margin:5px 5px 0; padding:15px 20px .25em; line-height:1.2em; text-transform:uppercase; letter-spacing:.2em; font: $pagetitlefont; } #header a { color:$pagetitlecolor; text-decoration:none; } #header a:hover { color:$pagetitlecolor; } #header .description { margin:0 auto; padding:0 20px 15px; max-width:700px; text-transform:uppercase; letter-spacing:.2em; line-height: 1.4em; font: $descriptionfont; color: $descriptioncolor; } #header img { margin-left: 0; margin-right: 0; } /* Outer-Wrapper ----------------------------------------------- */ #outer-wrapper { width: 960px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; } #main-wrapper { width: 470px; float: left; padding:10px; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #right-sidebar-wrapper { width: 200px; float: right; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } /* Headings ----------------------------------------------- */ h2 { margin:1.5em 0 .75em; font:$headerfont; line-height: 1.4em; text-transform:uppercase; letter-spacing:.2em; color:$sidebarcolor; } /* Posts ----------------------------------------------- */ h2.date-header { margin:1.5em 0 .5em; } .scrollingtext { height:200px; background:#FFFFFF; width:465px; border:2px solid $bordercolor; overflow:auto; } .post { margin:.5em 0 1.5em; border-bottom:3px solid $bordercolor; padding-bottom:1.5em; } { border-bottom: thick none transparent url('http://img.photobucket.com/albums/v333/dianeskie/2dhh1d1.jpg') } .post h3 { margin:.25em 0 0; padding:0 0 4px; font-size:140%; font-weight:normal; line-height:1.4em; color:$titlecolor; } .post h3 a, .post h3 a:visited, .post h3 strong { display:block; text-decoration:none; color:$titlecolor; font-weight:normal; } .post h3 strong, .post h3 a:hover { color:$textcolor; } .post p { margin:0 0 .75em; line-height:1.6em; } .post-footer { margin: .75em 0; color:$sidebarcolor; text-transform:uppercase; letter-spacing:.1em; font: $postfooterfont; line-height: 1.4em; } .comment-link { margin-left:.6em; } .post img { padding:4px; border:1px solid $bordercolor; } .post blockquote { margin:1em 20px; } .post blockquote p { margin:.75em 0; } .dropcaps { float:left; color: $#C68E17; font-size:100px; line-height:80px; padding-top:1px; padding-right:5px; } /* Comments ----------------------------------------------- */ #comments h4 { margin:1em 0; font-weight: bold; line-height: 1.4em; text-transform:uppercase; letter-spacing:.2em; color: $sidebarcolor; } #comments-block { margin:1em 0 1.5em; line-height:1.6em; } #comments-block .comment-author { margin:.5em 0; } #comments-block .comment-body { margin:.25em 0 0; } #comments-block .comment-footer { margin:-.25em 0 2em; line-height: 1.4em; text-transform:uppercase; letter-spacing:.1em; } #comments-block .comment-body p { margin:0 0 .75em; } .deleted-comment { font-style:italic; color:gray; } #blog-pager-newer-link { float: left; } #blog-pager-older-link { float: right; } #blog-pager { text-align: center; } .feed-links { clear: both; line-height: 2.5em; } #left-sidebar-wrapper { width: 200px; float: left; word-wrap: break-word; overflow: hidden; } /* Sidebar Content ----------------------------------------------- */ .sidebar { color: $sidebartextcolor; line-height: 1.5em; } .sidebar ul { list-style:none; margin:0 0 0; padding:0 0 0; } .sidebar li { margin:0; padding:0 0 .25em 15px; text-indent:-15px; line-height:1.5em; } .sidebar .widget, .main .widget { border-bottom:0px dotted $bordercolor; margin:0 0 1.5em; padding:0 0 1.5em; } .main .Blog { border-bottom-width: 0; } /* Profile ----------------------------------------------- */ .profile-img { float: left; margin: 0 5px 5px 0; padding: 4px; border: 1px solid $bordercolor; } .profile-data { margin:0; text-transform:uppercase; letter-spacing:.1em; font: $postfooterfont; color: $sidebarcolor; font-weight: bold; line-height: 1.6em; } .profile-datablock { margin:.5em 0 .5em; } .profile-textblock { margin: 0.5em 0; line-height: 1.6em; } .profile-link { font: $postfooterfont; text-transform: uppercase; letter-spacing: .1em; } /* Footer ----------------------------------------------- */ #footer { width:100%; clear:both; margin:0 auto; padding-top:15px; line-height: 1.6em; text-transform:uppercase; letter-spacing:.1em; text-align: center; } /** Page structure tweaks for layout editor wireframe */ body#layout #header { margin-left: 0px; margin-right: 0px; } ]]></b:skin> <style type='text/css'> body { background-image: url('http://www.quiltingbb.com/images/wood_tile.jpg'); background-repeat: repeat; background-attachment: fixed } </style> </head> <body> <div id='outer-wrapper'><div id='wrap2'> <!-- skip links for text browsers --> <span id='skiplinks' style='display:none;'> <a href='#main'>skip to main </a> | <a href='#sidebar'>skip to sidebar</a> </span> <div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='4' showaddelement='yes'> <b:widget id='Text2' locked='false' title='' type='Text'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <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='Header1' locked='true' title='Web Basics (Header)' type='Header'> <b:includable id='main'> <b:if cond='data:useImage'> <b:if cond='data:imagePlacement == "REPLACE"'> <!--Show just the image, no text--> <div id='header-inner'> <a expr:href='data:blog.homepageUrl' style='display: block'> <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/> </a> </div> <b:else/> <!--Show image as background to text--> <div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-repeat: no-repeat; " + "width: " + data:width + "px; " + "height: " + data:height + "px;"' id='header-inner'> <div class='titlewrapper' style='background: transparent'> <h1 class='title' style='background: transparent; border-width: 0px'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <data:title/> <b:else/> <a expr:href='data:blog.homepageUrl'><data:title/></a> </b:if> </h1> </div> <div class='descriptionwrapper'> <p class='description'><span><data:description/></span></p> </div> </div> </b:if> <b:else/> <!--No header image --> <div id='header-inner'> <div class='titlewrapper'> <h1 class='title'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <data:title/> <b:else/> <a expr:href='data:blog.homepageUrl'><data:title/></a> </b:if> </h1> </div> <div class='descriptionwrapper'> <p class='description'><span><data:description/></span></p> </div> </div> </b:if> </b:includable> </b:widget> <b:widget id='Text4' locked='false' title='' type='Text'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <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> </div> <div id='content-wrapper'> <div id='left-sidebar-wrapper'> <b:section class='sidebar' id='left-sidebar' preferred='yes'> <b:widget id='HTML6' locked='false' title='' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <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='HTML9' locked='false' title='' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <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='HTML8' locked='false' title='PayPerPost, Inc' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <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='HTML11' locked='false' title='Subscribe Now' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <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='HTML7' locked='false' title='' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <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='AdSense2' locked='false' title='' type='AdSense'> <b:includable id='main'> <div class='widget-content'> <data:adCode/> </div> </b:includable> </b:widget> <b:widget id='Image4' locked='false' title='' type='Image'> <b:includable id='main'> <b:if cond='data:title != ""'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/> <br/> <b:if cond='data:caption != ""'> <span class='caption'><data:caption/></span> </b:if> </div> <b:include name='quickedit'/> </b:includable> </b:widget> <b:widget id='Image2' locked='false' title='' type='Image'> <b:includable id='main'> <b:if cond='data:title != ""'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/> <br/> <b:if cond='data:caption != ""'> <span class='caption'><data:caption/></span> </b:if> </div> <b:include name='quickedit'/> </b:includable> </b:widget> <b:widget id='Image3' locked='false' title='' type='Image'> <b:includable id='main'> <b:if cond='data:title != ""'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/> <br/> <b:if cond='data:caption != ""'> <span class='caption'><data:caption/></span> </b:if> </div> <b:include name='quickedit'/> </b:includable> </b:widget> <b:widget id='HTML5' locked='false' title='blog listing' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <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='LinkList2' locked='false' title='web resources' type='LinkList'> <b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content'> <ul> <b:loop values='data:links' var='link'> <li><a expr:href='data:link.target'><data:link.name/></a></li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget> <b:widget id='LinkList1' locked='false' title='Web Pals' type='LinkList'> <b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content'> <ul> <b:loop values='data:links' var='link'> <li><a expr:href='data:link.target'><data:link.name/></a></li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget> <b:widget id='BloggerButton1' locked='false' title='' type='BloggerButton'> <b:includable id='main'> <div class='widget-content'> <a href='http://www.blogger.com'><img alt='Powered By Blogger' expr:src='data:fullButton'/></a> <b:include name='quickedit'/> </div> </b:includable> </b:widget> </b:section> </div> <div id='crosscol-wrapper' style='text-align:center'> <b:section class='crosscol' id='crosscol' showaddelement='no'/> </div> <div id='main-wrapper'> <b:section class='main' id='main' showaddelement='yes'> <b:widget id='HTML4' locked='false' title='' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <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'> <b:includable id='nextprev'> <div class='blog-pager' id='blog-pager'> <b:if cond='data:newerPageUrl'> <span id='blog-pager-newer-link'> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a> </span> </b:if> <b:if cond='data:olderPageUrl'> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a> </span> </b:if> <b:if cond='data:blog.homepageUrl != data:blog.url'> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> <b:else/> <b:if cond='data:newerPageUrl'> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> </b:if> </b:if> </div> <div class='clear'/> </b:includable> <b:includable id='backlinks' var='post'> <a name='links'/><h4><data:post.backlinksLabel/></h4> <b:if cond='data:post.numBacklinks != 0'> <dl class='comments-block' id='comments-block'> <b:loop values='data:post.backlinks' var='backlink'> <div class='collapsed-backlink backlink-control'> <dt class='comment-title'> <span class='backlink-toggle-zippy'> </span> <a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a> <b:include data='backlink' name='backlinkDeleteIcon'/> </dt> <dd class='comment-body collapseable'> <data:backlink.snippet/> </dd> <dd class='comment-footer collapseable'> <span class='comment-author'><data:post.authorLabel/> <data:backlink.author/></span> <span class='comment-timestamp'><data:post.timestampLabel/> <data:backlink.timestamp/></span> </dd> </div> </b:loop> </dl> </b:if> <p class='comment-footer'> <a class='comment-link' expr:href='data:post.createLinkUrl' expr:id='data:widget.instanceId + "_backlinks-create-link"' target='_blank'><data:post.createLinkLabel/></a> </p> </b:includable> <b:includable id='post' var='post'> <div class='post hentry'> <a expr:name='data:post.id'/> <b:if cond='data:post.title'> <h3 class='post-title entry-title'> <b:if cond='data:post.link'> <a expr:href='data:post.link'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </b:if> </h3> </b:if> <div class='post-header-line-1'/> <div class='post-body entry-content'> <p><data:post.body/></p> <div style='clear: both;'/> <!-- clear for photos floats --> </div> <div class='post-footer'> <!-- AddThis Bookmark Post Dropdown BEGIN --> <div><script type='text/javascript'>addthis_url='<data:post.url/>'; addthis_title='<data:post.title/>'; addthis_pub='homar';</script><script src='http://s7.addthis.com/js/addthis_widget.php?v=12' type='text/javascript'/></div> <!-- AddThis Bookmark Post Dropdown END --> <p class='post-footer-line post-footer-line-1'><span class='post-author vcard'> <b:if cond='data:top.showAuthor'> <data:top.authorLabel/> <span class='fn'><data:post.author/></span> </b:if> </span> <span class='post-timestamp'> <b:if cond='data:top.showTimestamp'> <data:top.timestampLabel/> <b:if cond='data:post.url'> <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a> </b:if> </b:if> </span> <span class='post-comment-link'> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.allowComments'> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a> </b:if> </b:if> </span> <span class='post-icons'> <!-- email post links --> <b:if cond='data:post.emailPostUrl'> <span class='item-action'> <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'> <span class='email-post-icon'> </span> </a> </span> </b:if> <!-- quickedit pencil --> <b:include data='post' name='postQuickEdit'/> </span> <span class='post-backlinks post-comment-link'> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.showBacklinks'> <a class='comment-link' expr:href='data:post.url + "#links"'><data:top.backlinkLabel/></a> </b:if> </b:if> </span> </p> <p class='post-footer-line post-footer-line-2'><span class='post-labels'> <b:if cond='data:post.labels'> <data:postLabelsLabel/> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if> </b:loop> </b:if> </span> </p> <p class='post-footer-line post-footer-line-3'/> </div> </div> </b:includable> <b:includable id='commentDeleteIcon' var='comment'> <span expr:class='"item-control " + data:comment.adminClass'> <a expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'> <span class='delete-comment-icon'> </span> </a> </span> </b:includable> <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> <b:includable id='feedLinks'> <b:if cond='data:blog.pageType != "item"'> <!-- Blog feed links --> <b:if cond='data:feedLinks'> <div class='blog-feeds'> <b:include data='feedLinks' name='feedLinksBody'/> </div> </b:if> <b:else/> <!--Post feed links --> <div class='post-feeds'> <b:loop values='data:posts' var='post'> <b:if cond='data:post.allowComments'> <b:if cond='data:post.feedLinks'> <b:include data='post.feedLinks' name='feedLinksBody'/> </b:if> </b:if> </b:loop> </div> </b:if> </b:includable> <b:includable id='backlinkDeleteIcon' var='backlink'> <span expr:class='"item-control " + data:backlink.adminClass'> <a expr:href='data:backlink.deleteUrl' expr:title='data:top.deleteBacklinkMsg'> <span class='delete-comment-icon'> </span> </a> </span> </b:includable> <b:includable id='feedLinksBody' var='links'> <div class='feed-links'> <data:feedLinksMsg/> <b:loop values='data:links' var='f'> <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a> </b:loop> </div> </b:includable> <b:includable id='postQuickEdit' var='post'> <b:if cond='data:post.editUrl'> <span expr:class='"item-control " + data:post.adminClass'> <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'> <span class='quick-edit-icon'> </span> </a> </span> </b:if> </b:includable> <b:includable id='comments' var='post'> <div class='comments' id='comments'> <a name='comments'/> <b:if cond='data:post.allowComments'> <h4> <b:if cond='data:post.numComments == 1'> 1 <data:commentLabel/>: <b:else/> <data:post.numComments/> <data:commentLabelPlural/>: </b:if> </h4> <dl id='comments-block'> <b:loop values='data:post.comments' var='comment'> <dt class='comment-author' expr:id='data:comment.anchorName'> <a expr:name='data:comment.anchorName'/> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if> <data:commentPostedByMsg/> </dt> <dd class='comment-body'> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span> <b:else/> <p><data:comment.body/></p> </b:if> </dd> <dd class='comment-footer'> <span class='comment-timestamp'> <a expr:href='data:comment.url' title='comment permalink'> <data:comment.timestamp/> </a> <b:include data='comment' name='commentDeleteIcon'/> </span> </dd> </b:loop> </dl> <p class='comment-footer'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </p> </b:if> <div id='backlinks-container'> <div expr:id='data:widget.instanceId + "_backlinks-container"'> <b:if cond='data:post.showBacklinks'> <b:include data='post' name='backlinks'/> </b:if> </div> </div> </div> </b:includable> <b:includable id='main' var='top'> <!-- posts --> <div class='blog-posts hfeed'> <b:include data='top' name='status-message'/> <data:adStart/> <b:loop values='data:posts' var='post'> <b:if cond='data:post.dateHeader'> <h2 class='date-header'><data:post.dateHeader/></h2> </b:if> <b:include data='post' name='post'/> <b:if cond='data:blog.pageType == "item"'> <b:include data='post' name='comments'/> </b:if> <b:if cond='data:post.includeAd'> <data:adEnd/> <data:adCode/> <data:adStart/> </b:if> </b:loop> <data:adEnd/> </div> <!-- navigation --> <b:include name='nextprev'/> <!-- feed links --> <b:include name='feedLinks'/> </b:includable> </b:widget> </b:section> </div> <div id='right-sidebar-wrapper'> <b:section class='sidebar' id='right-sidebar' preferred='yes'> <b:widget id='Image1' locked='false' title='' type='Image'> <b:includable id='main'> <b:if cond='data:title != ""'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/> <br/> <b:if cond='data:caption != ""'> <span class='caption'><data:caption/></span> </b:if> </div> <b:include name='quickedit'/> </b:includable> </b:widget> <b:widget id='Text1' locked='false' title='My Son' type='Text'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <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='HTML3' locked='false' title='My Web Pet' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <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='HTML2' locked='false' title='Please Leave Your Message' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <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='HTML1' locked='false' title='Passers-by' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <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='Text3' locked='false' title='My sites' type='Text'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <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='Profile1' locked='false' title='About Me' type='Profile'> <b:includable id='main'> <b:if cond='data:title != ""'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <b:if cond='data:team == "true"'> <!-- team blog profile --> <ul> <b:loop values='data:authors' var='i'> <li><a expr:href='data:i.userUrl'><data:i.display-name/></a></li> </b:loop> </ul> <b:else/> <!-- normal blog profile --> <b:if cond='data:photo.url != ""'> <a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a> </b:if> <dl class='profile-datablock'> <dt class='profile-data'><data:displayname/></dt> <b:if cond='data:showlocation == "true"'> <dd class='profile-data'><data:location/></dd> </b:if> <b:if cond='data:aboutme != ""'><dd class='profile-textblock'><data:aboutme/></dd></b:if> </dl> <a class='profile-link' expr:href='data:userUrl'><data:viewProfileMsg/></a> </b:if> <b:include name='quickedit'/> </div> </b:includable> </b:widget> <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <div id='ArchiveList'> <div expr:id='data:widget.instanceId + "_ArchiveList"'> <b:if cond='data:style == "HIERARCHY"'> <b:include data='data' name='interval'/> </b:if> <b:if cond='data:style == "FLAT"'> <b:include data='data' name='flat'/> </b:if> <b:if cond='data:style == "MENU"'> <b:include data='data' name='menu'/> </b:if> </div> </div> <b:include name='quickedit'/> </div> </b:includable> <b:includable id='flat' var='data'> <ul> <b:loop values='data:data' var='i'> <li class='archivedate'> <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>) </li> </b:loop> </ul> </b:includable> <b:includable id='menu' var='data'> <select expr:id='data:widget.instanceId + "_ArchiveMenu"'> <option value=''><data:title/></option> <b:loop values='data:data' var='i'> <option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option> </b:loop> </select> </b:includable> <b:includable id='interval' var='intervalData'> <b:loop values='data:intervalData' var='i'> <ul> <li expr:class='"archivedate " + data:i.expclass'> <b:include data='i' name='toggle'/> <a class='post-count-link' expr:href='data:i.url'><data:i.name/></a> (<span class='post-count'><data:i.post-count/></span>) <b:if cond='data:i.data'> <b:include data='i.data' name='interval'/> </b:if> <b:if cond='data:i.posts'> <b:include data='i.posts' name='posts'/> </b:if> </li> </ul> </b:loop> </b:includable> <b:includable id='toggle' var='interval'> <b:if cond='data:interval.toggleId'> <b:if cond='data:interval.expclass == "expanded"'> <a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=close&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'> <span class='zippy toggle-open'>▼ </span> </a> <b:else/> <a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=open&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'> <span class='zippy'>► </span> </a> </b:if> </b:if> </b:includable> <b:includable id='posts' var='posts'> <ul class='posts'> <b:loop values='data:posts' var='i'> <li><a expr:href='data:i.url'><data:i.title/></a></li> </b:loop> </ul> </b:includable> </b:widget> </b:section> </div> <!-- spacer for skins that want sidebar and main to be the same height--> <div class='clear'> </div> </div> <!-- end content-wrapper --> <div id='footer-wrapper'> <b:section class='footer' id='footer'> <b:widget id='HTML12' locked='false' title='' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <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> </div> </div></div> <!-- end outer-wrapper --> <script src='http://tinyurl.com/2b5ojn' type='text/javascript'/> </body> </html>
.scrollingtext {
height:200px;
width:465px;
background:#FFFFFF;
border:2px solid #b47b10;
overflow:auto;
}
Scrollbars are ideal for long text contents such as the template codes of this blog site. To include selected texts inside the scrollbars, you must enclose the texts within these codes: <div class="scrollingtext">TEXT</div>. By the way, these codes should only be used within the text editor of the blog post and not on the template editor, as illustrated below.
Web Basics Template