Demo | Download
Showing posts with label Blogger Templates. Show all posts
Showing posts with label Blogger Templates. Show all posts
"Revolution Church Template" for Blogger
DEMO | DOWNLOAD
Features of this Template:
- This Template is 3 column fixed with Sidebars at right.
- This Template is optimized for advertising.It has got more than 4 perfect areas for advertising.
- It has got inbuilt site-search Engine.
- This Template has got date widget at Top left that shows the current date.
- This Template has got two CSS Menus.
- This Template is a magazine style template and has got the professional look.
Sunday, March 22, 2009
Privacy Policy
As Google have just changed the Terms and Conditions of their Adsense program, one of the requirements now is that all Adsense publishers should have a "Privacy Policy" on their websites. Below is the exact wording that has been added to the Terms and Conditions for Adsense publishers ....
Privacy Policy for noob.niteshkothari.com
If you require any more information or have any questions about our privacy policy, please feel free to contact us by email at ikogsakanding@gmail.com.
At noob.niteshkothari.com, the privacy of our visitors is of extreme importance to us. This privacy policy document outlines the types of personal information is received and collected by noob.niteshkothari.com and how it is used.
Log Files
Like many other Web sites, noob.niteshkothari.com makes use of log files. The information inside the log files includes internet protocol ( IP ) addresses, type of browser, Internet Service Provider ( ISP ), date/time stamp, referring/exit pages, and number of clicks to analyze trends, administer the site, track user’s movement around the site, and gather demographic information. IP addresses, and other such information are not linked to any information that is personally identifiable.
Cookies and Web Beacons
noob.niteshkothari.com does use cookies to store information about visitors preferences, record user-specific information on which pages the user access or visit, customize Web page content based on visitors browser type or other information that the visitor sends via their browser.
Some of our advertising partners may use cookies and web beacons on our site. Our advertising partners include Google Adsense, Commission Junction, Adbrite, Clickbank, Chitika,ClickBank .
These third-party ad servers or ad networks use technology to the advertisements and links that appear on noob.niteshkothari.com send directly to your browsers. They automatically receive your IP address when this occurs. Other technologies ( such as cookies, JavaScript, or Web Beacons ) may also be used by the third-party ad networks to measure the effectiveness of their advertisements and / or to personalize the advertising content that you see.
noob.niteshkothari.com has no access to or control over these cookies that are used by third-party advertisers.
You should consult the respective privacy policies of these third-party ad servers for more detailed information on their practices as well as for instructions about how to opt-out of certain practices. noob.niteshkothari.com's privacy policy does not apply to, and we cannot control the activities of, such other advertisers or web sites.
If you wish to disable cookies, you may do so through your individual browser options. More detailed information about cookie management with specific web browsers can be found at the browsers' respective websites.
Privacy Policy for noob.niteshkothari.com
If you require any more information or have any questions about our privacy policy, please feel free to contact us by email at ikogsakanding@gmail.com.
At noob.niteshkothari.com, the privacy of our visitors is of extreme importance to us. This privacy policy document outlines the types of personal information is received and collected by noob.niteshkothari.com and how it is used.
Log Files
Like many other Web sites, noob.niteshkothari.com makes use of log files. The information inside the log files includes internet protocol ( IP ) addresses, type of browser, Internet Service Provider ( ISP ), date/time stamp, referring/exit pages, and number of clicks to analyze trends, administer the site, track user’s movement around the site, and gather demographic information. IP addresses, and other such information are not linked to any information that is personally identifiable.
Cookies and Web Beacons
noob.niteshkothari.com does use cookies to store information about visitors preferences, record user-specific information on which pages the user access or visit, customize Web page content based on visitors browser type or other information that the visitor sends via their browser.
Some of our advertising partners may use cookies and web beacons on our site. Our advertising partners include Google Adsense, Commission Junction, Adbrite, Clickbank, Chitika,ClickBank .
These third-party ad servers or ad networks use technology to the advertisements and links that appear on noob.niteshkothari.com send directly to your browsers. They automatically receive your IP address when this occurs. Other technologies ( such as cookies, JavaScript, or Web Beacons ) may also be used by the third-party ad networks to measure the effectiveness of their advertisements and / or to personalize the advertising content that you see.
noob.niteshkothari.com has no access to or control over these cookies that are used by third-party advertisers.
You should consult the respective privacy policies of these third-party ad servers for more detailed information on their practices as well as for instructions about how to opt-out of certain practices. noob.niteshkothari.com's privacy policy does not apply to, and we cannot control the activities of, such other advertisers or web sites.
If you wish to disable cookies, you may do so through your individual browser options. More detailed information about cookie management with specific web browsers can be found at the browsers' respective websites.
Thursday, March 19, 2009
Zinmag Remedy 2.0-Falconhive
Zinmag Remedy 2.0 is the enhanced version of the Zinmag Remedy Blogger template, which is now SEO fixed and 99% widgetized. Experience the free yet massively improved Remedy and make it your real professional template!
Feature Highlight
SEO Fixed
As SEO is very important for the serious Blogger, we have rechecked the template and worked out our best to fix every possible SEO issue. We have improved the 'h tag' of the Remedy template, and probably rearrange the code to make its structure completely similar to standard template, Minima's structure.
99% Widgetized
Over the month, we published Blogger template that needs you to setup it in 'Edit HTML' section that often cause unpredictable error and is uneasy for beginner. For Remedy 2.0, we have widgetized all the part from the top navigation bar to the bottom tabber section. You can now wipe out all your worries and just customize Remedy in Page Element section!
Improved CSS and Template Structure
We have modified the template's CSS code to fix some issues like misaligned image in the ads space on the main page. We have also made some modifications on JavaScript/ HTML gadget to make your customization faster and easier.
New Layout view
zinmagremedy2
You can observe the demo and download the Zinmag Remedy 2.0 Blogger template.
Set up the RSS Bar
You can customize the RSS bar to your own preferred RSS link. To achieve this, access into 'Layout' and under the 'Page Element' section, click on the 'Edit' of the 'Top Navigation Bar' and configure the Link Gadget setup. You can copy and paste the link below into the Link Gadget and edit it to become your post RSS and comment RSS.
Post RSS: YOUR-BLOG-ADDRESS/feeds/posts/default
Comment RSS: YOUR-BLOG-ADDRESS/feeds/comments/default
Set up the Top Navigation Bar
You can customize your header navigation link to your own preferred link. To achieve this, access into 'Layout' and under the 'Page Element' section, click on the 'Edit' of the 'Top Navigation Bar' and configure the Link Gadget setup.
Set up the Second Navigation Bar
You can customize your header navigation link to your own preferred link. To achieve this, access into 'Layout' and under the 'Page Element' section, click on the 'Edit' of the 'Second Navigation Bar' and configure the Link Gadget setup.
Set up the 'Carousal Panel' on the top of the main page
You can see this template got a sliding carousal of featured post image on the top of the page, which can be configured through 'Carousel Panel' section. Simply access into 'Layout' and under the 'Page Element' tab, click on the 'Edit' of the 'Carousel Panel 1', copy and paste the code below and edit it with corresponding item. You can also use the same step above to configure the Carousel panel 2, 3 and so on.
<a href='YOUR-POST-LINK' title='YOUR-POST-TITLE'><img src='POST-IMAGE-LINK.jpg' width='200' height='120' alt='#'/></a>
Set up the 'Featured Content' on the top of the main page
There's also got a wide space under the sliding carousal, which you can access into the space through the 'Page Element' section. Simply copy the code below, then access into 'Layout' and under the 'Page Element', click on the 'Edit' of the 'Featured Content', paste and edit the code with the corresponding item.
<h2><a href='YOUR-POST-LINK' title='YOUR-POST-TITLE'>YOUR-POST-TITLE</a></h2>
<p>You can put some part of post content here.</p>
Set up the Main Page's Ads Space
Zinmag Remedy template got an ads space under the top featured content section, and you can setup the ads space with Google Adsense Ad Unit 468x15 Ads. To achieve this, simply access into 'Layout' and under the 'Page Element' tab, click on the 'Edit' of the 'Ads 1', copy and paste your Adsense or ads code then 'Save' to show the ads.
How to hide article's content on the main page
As this template got 'Read More' function, you probably want to hide some text from being displayed on the main page. In fact, you just need some extremely easy step to achieve this. Simply copy the highlighted code below, then access into 'Settings' and under the 'Formatting' tab, paste the code into the 'Post Template'.
<span class="fulllpost"></span>
On the next time you write an article, you just need to add this line of code to hide the text. For example,
Suggested by msplash9 in Template Suggestion #1, Zinmag Remedy is a true professional magazine template with many unique features. <span class="fullpost">Discover this feature-rich dark remedy today to make it your ultimate template!</span>
Then the main page would show only the 'Suggested by msplash9 in Template Suggestion #1, Zinmag Remedy is a true professional magazine template with many unique features', while the other text is hid and only can be seen through 'Read More' click.
Set up the 'Video of the day'
There's a video section on the bottom of the mini post section, and you can put favorite Youtube video inside the section by just few simple steps.
To setup your favorite Youtube video, just copy the video's embed code link, then access into 'Layout' and under the 'Page Element' tab, click on the 'Edit' of the 'Featured Video', paste the code then 'Save' to show the video!
Your Youtube video's embed code link is located below the profile of the video uploader, and you can adjust the <embed>'s width and height inside the code to fix the section size. The recommended width and height for the video is 295 and 239.
Set up the Tabber
Brownline_tabber
You can probably notice that there's got gadget with number '1', '2' and '3' in the layout. By clicking the '1', you can actually set up the first part of the tabber with any gadget, same as clicking '2' and '3', which directs you to the setting of second and third part of the tabber.
Set up the 'Featured Content 1' on the top of the sidebar
There's actually got another featured content section installed on the top of the sidebar.To setup the featured content on the sidebar, simply copy the code below, then access into 'Layout' and under the 'Page Element' tab, click on the 'Edit' of the 'Featured Content 1', paste and edit the code with the corresponding item. You can also use the same step above to configure the featured content 2, 3 and so on.
<img src='YOUR-IMAGE-LINK' width='100' height='60' alt=''/>
<div class='fcats'><a href='YOUR-CATEGORY-LINK' title='YOUR-CATEGORY-TITLE rel='category'>YOUR-CATEGORY-TITLE-HERE</a> </div>
<h2><a href='YOUR-POST-LINK' title='YOUR-POST-TITLE-HERE'>YOUR-POST-TITLE</a></h2>
<div class='auth'> Posted by Author </div>
<div class='fmeta'> POST-DATE |
<a href='YOUR-POST-LINK' title='Comment on YOUR-POST-TITLE'>ADD COMMENTS</a></div>
Set up the 125x125 Ads
You can change the 125x125 ads image to your own ads image. To achieve this, simply copy the code below and access into 'Layout' and under 'Page Element' tab, click on the 'Edit' of the '125x125 Ads', paste and edit the code with corresponding item.
<a href='YOUR-TARGETED-LINK' rel='bookmark' title='#'><img src='YOUR-IMAGE-LINK' alt='#'/></a>
Set up the Email Subscribe button
You can personalize the email subscribe button to your own personal RSS. To get this done, you have to sign up the Google Feedburner account first to get the Email Subscription link. Your email subscription link should looks like the code below:
http://feedburner.google.com/fb/a/mailverify?uri=ZinmagRemedyV20&loc=en_US
Simply copy the subscription link, access into 'Layout' and under the 'Edit HTML' tab, press [CTRL F3] to find the code below and edit it with corresponding item.
<form action='EMAIL-SUBSCRIPTION-LINK-HERE' method='post' target='popupwindow'>
%u2026
<input name='url' type='hidden' value='EMAIL-SUBSCRIPTION-LINK-HERE'/>
We care about Author
Zinmag Remedy 2.0 comes under a Creative Common License. This means it is free to use on your blog as long as the credit link in the footer is kept intact. Jinsona Design has really put so much effort on designing this template, so if possible you can pay a visit to the site and leave a thankful comment!
Take our RSS to grab the latest Blogger template
You are deserved to be the fastest being to get our latest Blogger template. Just simply click on this cute green 'RSS' word or subscribe it by email then you are ready to grab our Blogger template!
A huge breakthrough, and hope for more improvement!
Zinmag Remedy 2.0 is undeniably a breakthrough for my coding skill. I want to express my thanks to many professional template maker like Arthur who shares to me precious experience about the SEO, and Agus Mu who shares many suggestion to improve this template.
While I am still improving myself to make better Blogger template, I hope to hear more report and suggestion from you to improve this template, please always remember that only with you Blogger can be better, thanks!
Coffee Desk-Falconhive
Designed and produced by TemplateLite.com, Coffee Desk has proved itself as one of my favorite template with nice office cup as the header image and notebook as the post section.
The template features an artistic template design, a notebook style post section and a 2 column sidebar as well, discover this template to find out more creativity!
Template name: Coffee Desk
Template Author: Template Lite
Template Converter: Falcon Hive
Compatible BSP: Blogger
Best Viewed Browser: Internet Explorer 8, Firefox RC3, Opera 9.6, Google Chrome 0.3.154.9
Column: 3
Feature : Artistic template design, navigation menu, notebook style post section, 2 sidebar, 1 RSS subscribe button on the footer
You can observe the demo and download the Coffee Desk Blogger template.
Set up the Navigation Menu
You can customize your header navigation link to your own preferred link. To achieve this, access into 'Layout' and under the 'Page Element' section, click on the 'Edit' of the 'Menu' and configure the Link Gadget setup.
Set up the Date
You need to setup the Timestamp setting to make the date displayed properly on the page. To get this completed, access into 'Settings' and under the 'Formatting' tab, change the 'Timestamp Format' to this format: 'Wednesday, 4 March, 2008', 'Save Settings' and you can see the date displayed perfectly on the page!
Set up the Footer RSS Subscribe
You can personalize the RSS subscribe button to your own personal RSS. To get this done, you can access into 'Layout' and under the 'Edit HTML' mode, press [CTRL F3] to find the code below and edit it with corresponding item.
<a href='RSS-LINK-HERE' title='RSS Feed'>
We care about Author
Coffee Desk comes under a Creative Common License. This means it is free to use on your blog as long as the credit link in the footer is kept intact. TemplateLite has really put so much effort on designing this template, so if possible you can pay a visit to the site and leave a thankful comment!
Take our RSS to grab the latest Blogger template
You are deserved to be the fastest being to get our latest Blogger template. Just simply click on this cute green 'RSS' word or subscribe it by email then you are ready to grab our Blogger template!
Artistic and wow, impressive!
I am impressed by this template since the first sight on it. Although its style is similar with the Desk Mess, the noteboook style post section and perhaps 'search box in the ball pen' make it totally different with the other template! And the most important is, this beautiful template loads faster than I thought!
Elegant Grunge-Falconhive
Just as its name, Elegant Grunge shows you the grungy elegant background that inspires me and Hive reader so much, and probably became the winner of the #3 suggestion post.
The template features a top navigation menu and unique footer RSS subscribe button. Check out this template and make your blog rocks today!
Template name: Elegant Grunge
Template Author: Michael Tyson
Template Converter: Falcon Hive
Compatible BSP: Blogger
Best Viewed Browser: Internet Explorer 8, Firefox RC3, Opera 9.6, Google Chrome 0.3.154.9
Column: 2
Feature : Grungy elegant design, navigation menu, 1 RSS subscribe button on the footer
You can observe the demo and download the Elegant Grunge Blogger template.
Set up the Navigation Menu
You can customize your header navigation link to your own preferred link. To achieve this, access into 'Layout' and under the 'Page Element' section, click on the 'Edit' of the 'Menu' and configure the Link Gadget setup.
Set up the Date
You need to setup the Timestamp setting to make the date displays properly on the page. To get this completed, access into 'Settings' and under the 'Formatting' tab, change the 'Timestamp Format' to this format: 'Wednesday, 4 March, 2008', 'Save Settings' and you can see the date displayed perfectly on the page!
Set up the Footer RSS Subscribe
You can personalize the RSS subscribe button to your own personal RSS. To get this done, you can access into 'Layout' and under the 'Edit HTML' mode, press [CTRL F3] to find the code below and edit it with corresponding item.
<a href='RSS-LINK-HERE' title='RSS Feed'>
We care about Author
Elegant Grunge comes under a Creative Common License. This means it is free to use on your blog as long as the credit link in the footer is kept intact. TemplateLite has really put so much effort on designing this template, so if possible you can pay a visit to the site and leave a thankful comment!
Take our RSS to grab the latest Blogger template
You are deserved to be the fastest being to get our latest Blogger template. Just simply click on this cute green 'RSS' word or subscribe it by email then you are ready to grab our Blogger template!
An expected conversion, I love it too!
It%u2019s interesting that while I%u2019m writing the template suggestion post, I actually expected that the reader would vote for Elegant Grunge, which is also my favorite. I personally thought this template is very nice at its background design, hope to have more grungy template like this in the future!
Water Color- Falconhive
Just as its beautiful name, Water Color is a beautiful and outstanding template with its rare water color-based background design, and a Flickr gallery on the footer! Learn more about the template and make your blog filled with Water Color today!
Template name: Water Color
Template Author: Template Lite
Template Converter: Falcon Hive
Compatible BSP: Blogger
Best Viewed Browser: Internet Explorer 8, Firefox RC3, Opera 9.6, Google Chrome 0.3.154.9
Column: 2
Feature : Water color-based background design, navigation menu, unique RSS subscribe button on the header, notepad style post and sidebar section, Flickr Gallery on the footer
You can observe the demo and download the Water Color Blogger template
Set up the Navigation Menu
You can customize your header navigation link to your own preferred link. To achieve this, access into 'Layout' and under the 'Page Element' section, click on the 'Edit' of the 'Menu' and configure the Link Gadget setup.
Set up the Header RSS Subscribe
You can personalize the RSS subscribe button to your own personal RSS. To get this done, you can access into 'Layout' and under the 'Edit HTML' mode, press [CTRL F3] to find the code below and edit it with corresponding item.
<a href='RSS-LINK-HERE' title='RSS Feed'>
Set up the Date
You need to setup the Timestamp setting to make the date displayed properly on the page. To get this completed, access into 'Settings' and under the 'Formatting' tab, change the 'Timestamp Format' to this format: 'Wednesday, 4 March, 2008', 'Save Settings' and you can see the date displayed perfectly on the page!
Set up the Flickr Gallery on the Footer
You can probably setup your own Flickr Gallery on the footer section. To achieve this gallery, simply access into your blog dashboard and click the 'View Blog' to go to your blog's main page. On the main page, scroll down the page to see a huge tool button, click on the button and paste the code below into the HTML/ JavaScript gadget:
<script src="http://www.flickr.com/badge_code_v2.gne?count=5&display=random&size=s&layout=y&source=user&user=YOUR-FLICKR-ID" type="text/javascript"/></script>
You can get your Flickr's ID in idGettr.com and replace the 'YOUR-FLICK-ID' with your own unique ID. 'Save' to achieve the Flickr Gallery!
We care about Author
Water Color comes under a Creative Common License. This means it is free to use on your blog as long as the credit link in the footer is kept intact. TemplateLite has really put so much effort on designing this template, so if possible you can pay a visit to the site and leave a thankful comment!
Take our RSS to grab the latest Blogger template
You are deserved to be the fastest being to get our latest Blogger template. Just simply click on this cute green 'RSS' word or subscribe it by email then you are ready to grab our Blogger template!
Probably the most impressive one of all Templatelite's template
I felt in love with this template on the first sight, and probably recognized it as so far the most impressive template that I have converted from TemplateLite. The design is creative and outstanding, and it still includes the most user-friendly feature of TemplateLite, fast loading speed.
As I heard from author that he would publish more template across this year, I am prepared to bring them into Blogger world for you to use, so get ready to grab our free and unique Blogger template!
ImpreZZ - Falconhive
Template name: ImpreZZ
Template Author: Gopal Raju
Template Converter: Falcon Hive
Compatible BSP: Blogger
Best Viewed Browser: Internet Explorer 8, Firefox RC3, Opera 9.6, Google Chrome 0.3.154.9
Column: 3
Feature : Impressive timestamp and layout design, navigation menu, RSS subscribe button on the header, Twitter update section on the right sidebar
You can observe the demo and download the ImpreZZ Blogger template
Set up the Header Logo
You can personalize your blog header to your own designed logo! Simply open the Logo.psd file in the file, ImpreZZ-v100, open and edit it with Adobe Photoshop, then upload your logo to the image server like Photobucket.com. You can then display the logo on your blog by access into the blog's layout and under the 'Edit HTML', find the code below and replace it with your own image link:
http://i268.photobucket.com/albums/jj5/alvaris/imprezz/logo.gif
Setup the Blog Title
You need to setup your blog's main page link for your blog title. To achieve this, access into 'layout' and under the 'Edit HTML' tab, press [CTRL F3] to find and replace the code below with the corresponding item.
<h1 class='logo'><a href='BLOG-LINK-HERE'></a></h1>
Set up the Navigation Menu
You can customize your header navigation link to your own preferred link. To achieve this, access into 'Layout' and under the 'Page Element' section, click on the 'Edit' of the 'Menu' and configure the Link Gadget setup.
Set up the Header RSS Subscribe
You can personalize the RSS subscribe button to your own personal RSS. To get this done, you can access into 'Layout' and under the 'Edit HTML' mode, press [CTRL F3] to find the code below and edit it with corresponding item:
<a href='RSS-LINK-HERE' class='topnav_rss'>RSS</a>
Set up the Date
You need to setup the Timestamp setting to make the date displayed properly on the page. To get this completed, access into 'Settings' and under the 'Formatting' tab, change the 'Timestamp Format' to this format: 'Wednesday, 4 March, 2008', 'Save Settings' and you can see the date displayed perfectly on the page!
Set up the Twitter Update on the sidebar
You can probably setup your Twitter Update on the sidebar. To achieve this, simply access into your blog's layout and under the 'Edit HTML' tab, press [CTRL F3] to find and replace the code below with corresponding item:
<script type='text/javascript' src='http://twitter.com/statuses/user_timeline/TWITTER-ID-HERE.json?callback=twitterCallback2&count=1'></script>
<a class='followme' href='http://twitter.com/TWITTER-ID-HERE>Follow us on twitter</a>
We care about Author, and please respect our production for you
ImpreZZ comes under a GPL License. This means it is free to use on your blog, and you are encouraged to keep the footer link intact, as a respect to the designer and converter. With all the sincerity, we need your respect to continue our free Blogger template production, thank you.
Gopal Raju has really put so much effort on designing this template, so if possible you can pay a visit to the site and leave a thankful comment!
Take our RSS to grab the latest Blogger template
You are deserved to be the fastest being to get our latest Blogger template. Just simply click on this cute green 'RSS' word or subscribe it by email then you are ready to grab our Blogger template!
Impressive yet outstanding, and indeed a challenge to me
At the first time I saw this theme, my thinking was 'wow it's beautiful, it would be fantastic if I can bring it to my Blogger fellows!'
The challenge is that this theme is still very fresh and I can't find the Wordpress demo, so I decided to convert it myself without any reference. Fortunately the conversion is very successful (without considering the beauty of layout), and I hope all of you enjoy this template, cheers!
Wednesday, March 18, 2009
Three Columns Thisaway Template (I)
We have polled readers to find out what Blogger templates they are
using so that we can roll out articles pertaining to their templates,
such as our 3 column template guides to add another sidebar and convert
their existing Blogger templates from two columns to three columns. We
have posted the conversion tutorials for the popular templates –
Minima, Rounders, Denim, Dots, Scribe and Sand Dollar. In this article,
we shall give you a step by step guide to insert a third column into
the Thisaway family of templates.
Each Thisaway template has a
different set of background images. We have redone and created new
images, and so as not to confuse readers, we shall deal with the change
and modification for each type of Thisaway template. If you are using
Thisaway or Thisaway Blue, follow the guides here.
If
you are not sure what your template is, under Template -> Edit HTML,
look for the “Blogger Template Style” Name. If it says “Thisaway”, you
can follow this guide to customize your template.
Before you
begin to do anything, remember to backup your template. Go to Template
-> Edit HTML. Click the “Download Full Template” link to save a copy
of your template.
Thisaway Template
The final three-column Thisaway template should look like this:-
Three Columns Thisaway Template (I)
After you have backed up the current template, scroll to these lines in the template code:-
/* global
-------------- */
body {
margin: 0;
text-align: center;
min-width: 760px;
background: #ce8b43 url(http://www.blogblog.com/thisaway/bg_body.gif) repeat-x left top;
color: $textColor;
font-size: small;
}
blockquote {
margin: 0;
padding: 0 10px 0 10px;
border-left: 6px solid #f7e8d8;
border-right: 6px solid #f7e8d8;
color: $postTitleColor;
}
code {
color: $postTitleColor;
}
hr {
display: none;
}
/* layout
-------------- */
#outer-wrapper {
margin: 0 auto;
width: 760px;
text-align: left;
font: $bodyFont;
}
#header-wrapper {
padding-bottom: 15px;
background: url(http://www.blogblog.com/thisaway/bg_header_bottom.gif) no-repeat left bottom;
}
#header {
background: #634320 url(http://www.blogblog.com/thisaway/bg_header.gif) repeat-x left bottom;
}
#content-wrapper {
position: relative;
width: 760px;
background: #f7f0e9 url(http://www.blogblog.com/thisaway/bg_main_wrapper.gif) repeat-y left top;
}
#main-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: left;
margin: 0 0 0 3px;
padding: 0;
width: 483px;
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 */
}
#main {
padding: 22px 8px 0 8px;
background: url(http://www.blogblog.com/thisaway/bg_content.gif) repeat-x left top;
}
.post {
margin: 0 8px 14px 21px;
padding: 0;
border-bottom: 3px solid #f7e8d8;
}
#comments {
margin: 0 16px 14px 29px;
padding: 10px;
border: 1px solid #f0e0ce;
background-color: #f5ede4;
}
#sidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: right;
margin: 0 3px 0 0;
width: 269px;
color: $textColor;
line-height: 1.4em;
font-size: 90%;
background: url(http://www.blogblog.com/thisaway/bg_sidebar.gif) repeat-x left top;
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 */
}
#sidebar {
padding: 7px 11px 0 14px;
background: url(http://www.blogblog.com/thisaway/bg_sidebar_arrow.gif) repeat-y 179px 0;
}
#sidebar .widget {
margin-bottom: 20px;
}
#footer-wrapper {
padding-top: 15px;
background: url(http://www.blogblog.com/thisaway/bg_footer_top.gif) no-repeat left top;
clear: both;
}
#footer {
background: #493015 url(http://www.blogblog.com/thisaway/bg_footer.gif) repeat-x left top;
text-align: center;
min-height: 2em;
}
Change, amend or insert the portions (shown in red):-
/* global
-------------- */
body {
margin: 0;
text-align: center;
min-width: 987px;
background: #ce8b43 url(http://www.blogblog.com/thisaway/bg_body.gif) repeat-x left top;
color: $textColor;
font-size: small;
}
blockquote {
margin: 0;
padding: 0 10px 0 10px;
border-left: 6px solid #f7e8d8;
border-right: 6px solid #f7e8d8;
color: $postTitleColor;
}
code {
color: $postTitleColor;
}
hr {
display: none;
}
/* layout
-------------- */
#outer-wrapper {
margin: 0 auto;
width: 987px;
text-align: left;
font: $bodyFont;
}
#header-wrapper {
padding-bottom: 15px;
background: url(http://i191.photobucket.com/albums/z76/tipsfornewbloggers/ty/bg_header_bottom_2.gif) no-repeat left bottom;
}
#header {
background: #634320 url(http://i191.photobucket.com/albums/z76/tipsfornewbloggers/ty/bg_header_2.gif) repeat-x left bottom;
}
#content-wrapper {
position: relative;
width: 987px;
background: #f7f0e9 url(http://i191.photobucket.com/albums/z76/tipsfornewbloggers/ty/bg_main_wrapper_2.gif) repeat-y left top;
}
#main-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: left;
margin: 0 0 0 3px;
padding: 0;
width: 483px;
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 */
}
#main {
padding: 22px 8px 0 8px;
background: url(http://www.blogblog.com/thisaway/bg_content.gif) repeat-x left top;
}
.post {
margin: 0 8px 14px 21px;
padding: 0;
border-bottom: 3px solid #f7e8d8;
}
#comments {
margin: 0 16px 14px 29px;
padding: 10px;
border: 1px solid #f0e0ce;
background-color: #f5ede4;
}
#sidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: right;
margin: 0 3px 0 0;
width: 247px;
color: $textColor;
line-height: 1.4em;
font-size: 90%;
background: url(http://www.blogblog.com/thisaway/bg_sidebar.gif) repeat-x left top;
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 */
}
#sidebar {
padding: 7px 11px 0 14px;
background: url(http://www.blogblog.com/thisaway/bg_sidebar_arrow.gif) repeat-y 159px 0;
}
#sidebar .widget {
margin-bottom: 20px;
}
#newsidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: left;
margin: 0 0 0 3px;
width: 247px;
color: $textColor;
line-height: 1.4em;
font-size: 90%;
background: url(http://www.blogblog.com/thisaway/bg_sidebar.gif) repeat-x left top;
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 */
}
#newsidebar {
padding: 7px 11px 0 14px;
background: url(http://www.blogblog.com/thisaway/bg_sidebar_arrow.gif) repeat-y 159px 0;
}
#newsidebar .widget {
margin-bottom: 20px;
}
#footer-wrapper {
padding-top: 15px;
background: url(http://i191.photobucket.com/albums/z76/tipsfornewbloggers/ty/bg_footer_top_2.gif) no-repeat left top;
clear: both;
}
#footer {
background: #493015 url(http://i191.photobucket.com/albums/z76/tipsfornewbloggers/ty/bg_footer_2.gif) repeat-x left top;
text-align: center;
min-height: 2em;
}
We have done up new background images to accommodate the new widths. The widths of the sidebars are slightly reduced.
Scroll down to these lines:-
/** Page structure tweaks for layout editor wireframe */
body#layout #main,
body#layout #sidebar {
padding: 0;
}
Change them to this:-
/** Page structure tweaks for layout editor wireframe */
body#layout #main,
body#layout #sidebar,
body#layout #newsidebar {
padding: 0;
}
Further down the template, look for this and add the lines (shown in red):-
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
This
places your Profile in the left sidebar. This can be removed later.
Now, “Preview” the template to view the changes and if see the new
sidebar nicely aligned, click “Save Template”. Remove the Profile if
you don't want it there by going back to Template -> Page Elements
and removing the Profile widget. Refresh your Blog to see your new Three Column Thisaway layout!
Thisaway Blue Template
The final three-column Thisaway Blue Template should look like this:-
Three Columns Thisaway Template (I)
After you have backed up the current template, scroll to these lines in the template code:-
/* global
-------------- */
body {
margin: 0;
text-align: center;
min-width: 760px;
background: #4386ce url(http://www.blogblog.com/thisaway_blue/bg_body.gif) repeat-x left top;
color: $textColor;
font-size: small;
}
blockquote {
margin: 0;
padding: 0 10px 0 10px;
border-left: 6px solid #d8e7f78;
border-right: 6px solid #d8e7f7;
color: $postTitleColor;
}
code {
color: $postTitleColor;
}
hr {
display: none;
}
/* layout
-------------- */
#outer-wrapper {
margin: 0 auto;
width: 760px;
text-align: left;
font: $bodyFont;
}
#header-wrapper {
padding-bottom: 15px;
background: url(http://www.blogblog.com/thisaway_blue/bg_header_bottom.gif) no-repeat left bottom;
}
#header {
background: #204063 url(http://www.blogblog.com/thisaway_blue/bg_header.gif) repeat-x left bottom;
}
#content-wrapper {
position: relative;
width: 760px;
background: #f7f0e9 url(http://www.blogblog.com/thisaway_blue/bg_main_wrapper.gif) repeat-y left top;
}
#main-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: left;
margin: 0 0 0 3px;
padding: 0;
width: 483px;
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 */
}
#main {
padding: 22px 8px 0 8px;
background: url(http://www.blogblog.com/thisaway_blue/bg_content.gif) repeat-x left top;
}
.post {
margin: 0 8px 14px 21px;
padding: 0;
border-bottom: 3px solid #d8e7f7;
}
#comments {
margin: 0 16px 14px 29px;
padding: 10px;
border: 1px solid #cedef0;
background-color: #e4ecf5;
}
#sidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: right;
margin: 0 3px 0 0;
width: 269px;
color: $textColor;
line-height: 1.4em;
font-size: 90%;
background: url(http://www.blogblog.com/thisaway_blue/bg_sidebar.gif) repeat-x left top;
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 */
}
#sidebar {
padding: 7px 11px 0 14px;
background: url(http://www.blogblog.com/thisaway_blue/bg_sidebar_arrow.gif) repeat-y 179px 0;
}
#sidebar .widget {
margin-bottom: 20px;
}
#footer-wrapper {
padding-top: 15px;
background: url(http://www.blogblog.com/thisaway_blue/bg_footer_top.gif) no-repeat left top;
clear: both;
}
#footer {
background: #152e49 url(http://www.blogblog.com/thisaway_blue/bg_footer.gif) repeat-x left top;
text-align: center;
min-height: 2em;
}
Change, amend or insert the portions (shown in red):-
/* global
-------------- */
body {
margin: 0;
text-align: center;
min-width: 987px;
background: #4386ce url(http://www.blogblog.com/thisaway_blue/bg_body.gif) repeat-x left top;
color: $textColor;
font-size: small;
}
blockquote {
margin: 0;
padding: 0 10px 0 10px;
border-left: 6px solid #d8e7f78;
border-right: 6px solid #d8e7f7;
color: $postTitleColor;
}
code {
color: $postTitleColor;
}
hr {
display: none;
}
/* layout
-------------- */
#outer-wrapper {
margin: 0 auto;
width: 987px;
text-align: left;
font: $bodyFont;
}
#header-wrapper {
padding-bottom: 15px;
background: url(http://i191.photobucket.com/albums/z76/tipsfornewbloggers/tyb/bg_header_bottom_2.gif) no-repeat left bottom;
}
#header {
background: #204063 url(http://www.blogblog.com/thisaway_blue/bg_header.gif) repeat-x left bottom;
}
#content-wrapper {
position: relative;
width: 987px;
background: #f7f0e9 url(http://i191.photobucket.com/albums/z76/tipsfornewbloggers/tyb/bg_main_wrapper_2.gif) repeat-y left top;
}
#main-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: left;
margin: 0 0 0 3px;
padding: 0;
width: 483px;
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 */
}
#main {
padding: 22px 8px 0 8px;
background: url(http://www.blogblog.com/thisaway_blue/bg_content.gif) repeat-x left top;
}
.post {
margin: 0 8px 14px 21px;
padding: 0;
border-bottom: 3px solid #d8e7f7;
}
#comments {
margin: 0 16px 14px 29px;
padding: 10px;
border: 1px solid #cedef0;
background-color: #e4ecf5;
}
#sidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: right;
margin: 0 3px 0 0;
width: 247px;
color: $textColor;
line-height: 1.4em;
font-size: 90%;
background: url(http://www.blogblog.com/thisaway_blue/bg_sidebar.gif) repeat-x left top;
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 */
}
#sidebar {
padding: 7px 11px 0 14px;
background: url(http://www.blogblog.com/thisaway_blue/bg_sidebar_arrow.gif) repeat-y 159px 0;
}
#sidebar .widget {
margin-bottom: 20px;
}
#newsidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: left;
margin: 0 0 0 3px;
width: 247px;
color: $textColor;
line-height: 1.4em;
font-size: 90%;
background: url(http://www.blogblog.com/thisaway_blue/bg_sidebar.gif) repeat-x left top;
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 */
}
#newsidebar {
padding: 7px 11px 0 14px;
background: url(http://www.blogblog.com/thisaway_blue/bg_sidebar_arrow.gif) repeat-y 159px 0;
}
#newsidebar .widget {
margin-bottom: 20px;
}
#footer-wrapper {
padding-top: 15px;
background: url(http://i191.photobucket.com/albums/z76/tipsfornewbloggers/tyb/bg_footer_top_2.gif) no-repeat left top;
clear: both;
}
#footer {
background: #152e49 url(http://www.blogblog.com/thisaway_blue/bg_footer.gif) repeat-x left top;
text-align: center;
min-height: 2em;
}
We have done up new background images to accommodate the new widths. The widths of the sidebars are slightly reduced.
Scroll down to these lines:-
/** Page structure tweaks for layout editor wireframe */
body#layout #main,
body#layout #sidebar {
padding: 0;
}
Change them to this:-
/** Page structure tweaks for layout editor wireframe */
body#layout #main,
body#layout #sidebar,
body#layout #newsidebar {
padding: 0;
}
Further down the template, look for this and add the lines (shown in red):-
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
This
places your Profile in the left sidebar. This can be removed later.
Now, “Preview” the template to view the changes and if see the new
sidebar nicely aligned, click “Save Template”. Remove the Profile if
you don't want it there by going back to Template -> Page Elements
and removing the Profile widget. Refresh your Blog to see your new Three Column Thisaway Blue layout!
Align Header Title and Description
The
Header title and description in the Thisaway and Thisaway Blue
templates are aligned to the left. To adjust them to the center or a
fixed position in the Header, read the guidelines at Header Image and Title Alignment (II).
This article continues at Three Columns Thisaway Template (II). If you want to insert a second sidebar into the Thisaway Green or Thisaway Rose templates, follow our tutorials there.
0 comments
using so that we can roll out articles pertaining to their templates,
such as our 3 column template guides to add another sidebar and convert
their existing Blogger templates from two columns to three columns. We
have posted the conversion tutorials for the popular templates –
Minima, Rounders, Denim, Dots, Scribe and Sand Dollar. In this article,
we shall give you a step by step guide to insert a third column into
the Thisaway family of templates.
Each Thisaway template has a
different set of background images. We have redone and created new
images, and so as not to confuse readers, we shall deal with the change
and modification for each type of Thisaway template. If you are using
Thisaway or Thisaway Blue, follow the guides here.
If
you are not sure what your template is, under Template -> Edit HTML,
look for the “Blogger Template Style” Name. If it says “Thisaway”, you
can follow this guide to customize your template.
Before you
begin to do anything, remember to backup your template. Go to Template
-> Edit HTML. Click the “Download Full Template” link to save a copy
of your template.
Thisaway Template
The final three-column Thisaway template should look like this:-
Three Columns Thisaway Template (I)
After you have backed up the current template, scroll to these lines in the template code:-
/* global
-------------- */
body {
margin: 0;
text-align: center;
min-width: 760px;
background: #ce8b43 url(http://www.blogblog.com/thisaway/bg_body.gif) repeat-x left top;
color: $textColor;
font-size: small;
}
blockquote {
margin: 0;
padding: 0 10px 0 10px;
border-left: 6px solid #f7e8d8;
border-right: 6px solid #f7e8d8;
color: $postTitleColor;
}
code {
color: $postTitleColor;
}
hr {
display: none;
}
/* layout
-------------- */
#outer-wrapper {
margin: 0 auto;
width: 760px;
text-align: left;
font: $bodyFont;
}
#header-wrapper {
padding-bottom: 15px;
background: url(http://www.blogblog.com/thisaway/bg_header_bottom.gif) no-repeat left bottom;
}
#header {
background: #634320 url(http://www.blogblog.com/thisaway/bg_header.gif) repeat-x left bottom;
}
#content-wrapper {
position: relative;
width: 760px;
background: #f7f0e9 url(http://www.blogblog.com/thisaway/bg_main_wrapper.gif) repeat-y left top;
}
#main-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: left;
margin: 0 0 0 3px;
padding: 0;
width: 483px;
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 */
}
#main {
padding: 22px 8px 0 8px;
background: url(http://www.blogblog.com/thisaway/bg_content.gif) repeat-x left top;
}
.post {
margin: 0 8px 14px 21px;
padding: 0;
border-bottom: 3px solid #f7e8d8;
}
#comments {
margin: 0 16px 14px 29px;
padding: 10px;
border: 1px solid #f0e0ce;
background-color: #f5ede4;
}
#sidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: right;
margin: 0 3px 0 0;
width: 269px;
color: $textColor;
line-height: 1.4em;
font-size: 90%;
background: url(http://www.blogblog.com/thisaway/bg_sidebar.gif) repeat-x left top;
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 */
}
#sidebar {
padding: 7px 11px 0 14px;
background: url(http://www.blogblog.com/thisaway/bg_sidebar_arrow.gif) repeat-y 179px 0;
}
#sidebar .widget {
margin-bottom: 20px;
}
#footer-wrapper {
padding-top: 15px;
background: url(http://www.blogblog.com/thisaway/bg_footer_top.gif) no-repeat left top;
clear: both;
}
#footer {
background: #493015 url(http://www.blogblog.com/thisaway/bg_footer.gif) repeat-x left top;
text-align: center;
min-height: 2em;
}
Change, amend or insert the portions (shown in red):-
/* global
-------------- */
body {
margin: 0;
text-align: center;
min-width: 987px;
background: #ce8b43 url(http://www.blogblog.com/thisaway/bg_body.gif) repeat-x left top;
color: $textColor;
font-size: small;
}
blockquote {
margin: 0;
padding: 0 10px 0 10px;
border-left: 6px solid #f7e8d8;
border-right: 6px solid #f7e8d8;
color: $postTitleColor;
}
code {
color: $postTitleColor;
}
hr {
display: none;
}
/* layout
-------------- */
#outer-wrapper {
margin: 0 auto;
width: 987px;
text-align: left;
font: $bodyFont;
}
#header-wrapper {
padding-bottom: 15px;
background: url(http://i191.photobucket.com/albums/z76/tipsfornewbloggers/ty/bg_header_bottom_2.gif) no-repeat left bottom;
}
#header {
background: #634320 url(http://i191.photobucket.com/albums/z76/tipsfornewbloggers/ty/bg_header_2.gif) repeat-x left bottom;
}
#content-wrapper {
position: relative;
width: 987px;
background: #f7f0e9 url(http://i191.photobucket.com/albums/z76/tipsfornewbloggers/ty/bg_main_wrapper_2.gif) repeat-y left top;
}
#main-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: left;
margin: 0 0 0 3px;
padding: 0;
width: 483px;
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 */
}
#main {
padding: 22px 8px 0 8px;
background: url(http://www.blogblog.com/thisaway/bg_content.gif) repeat-x left top;
}
.post {
margin: 0 8px 14px 21px;
padding: 0;
border-bottom: 3px solid #f7e8d8;
}
#comments {
margin: 0 16px 14px 29px;
padding: 10px;
border: 1px solid #f0e0ce;
background-color: #f5ede4;
}
#sidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: right;
margin: 0 3px 0 0;
width: 247px;
color: $textColor;
line-height: 1.4em;
font-size: 90%;
background: url(http://www.blogblog.com/thisaway/bg_sidebar.gif) repeat-x left top;
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 */
}
#sidebar {
padding: 7px 11px 0 14px;
background: url(http://www.blogblog.com/thisaway/bg_sidebar_arrow.gif) repeat-y 159px 0;
}
#sidebar .widget {
margin-bottom: 20px;
}
#newsidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: left;
margin: 0 0 0 3px;
width: 247px;
color: $textColor;
line-height: 1.4em;
font-size: 90%;
background: url(http://www.blogblog.com/thisaway/bg_sidebar.gif) repeat-x left top;
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 */
}
#newsidebar {
padding: 7px 11px 0 14px;
background: url(http://www.blogblog.com/thisaway/bg_sidebar_arrow.gif) repeat-y 159px 0;
}
#newsidebar .widget {
margin-bottom: 20px;
}
#footer-wrapper {
padding-top: 15px;
background: url(http://i191.photobucket.com/albums/z76/tipsfornewbloggers/ty/bg_footer_top_2.gif) no-repeat left top;
clear: both;
}
#footer {
background: #493015 url(http://i191.photobucket.com/albums/z76/tipsfornewbloggers/ty/bg_footer_2.gif) repeat-x left top;
text-align: center;
min-height: 2em;
}
We have done up new background images to accommodate the new widths. The widths of the sidebars are slightly reduced.
Scroll down to these lines:-
/** Page structure tweaks for layout editor wireframe */
body#layout #main,
body#layout #sidebar {
padding: 0;
}
Change them to this:-
/** Page structure tweaks for layout editor wireframe */
body#layout #main,
body#layout #sidebar,
body#layout #newsidebar {
padding: 0;
}
Further down the template, look for this and add the lines (shown in red):-
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
This
places your Profile in the left sidebar. This can be removed later.
Now, “Preview” the template to view the changes and if see the new
sidebar nicely aligned, click “Save Template”. Remove the Profile if
you don't want it there by going back to Template -> Page Elements
and removing the Profile widget. Refresh your Blog to see your new Three Column Thisaway layout!
Thisaway Blue Template
The final three-column Thisaway Blue Template should look like this:-
Three Columns Thisaway Template (I)
After you have backed up the current template, scroll to these lines in the template code:-
/* global
-------------- */
body {
margin: 0;
text-align: center;
min-width: 760px;
background: #4386ce url(http://www.blogblog.com/thisaway_blue/bg_body.gif) repeat-x left top;
color: $textColor;
font-size: small;
}
blockquote {
margin: 0;
padding: 0 10px 0 10px;
border-left: 6px solid #d8e7f78;
border-right: 6px solid #d8e7f7;
color: $postTitleColor;
}
code {
color: $postTitleColor;
}
hr {
display: none;
}
/* layout
-------------- */
#outer-wrapper {
margin: 0 auto;
width: 760px;
text-align: left;
font: $bodyFont;
}
#header-wrapper {
padding-bottom: 15px;
background: url(http://www.blogblog.com/thisaway_blue/bg_header_bottom.gif) no-repeat left bottom;
}
#header {
background: #204063 url(http://www.blogblog.com/thisaway_blue/bg_header.gif) repeat-x left bottom;
}
#content-wrapper {
position: relative;
width: 760px;
background: #f7f0e9 url(http://www.blogblog.com/thisaway_blue/bg_main_wrapper.gif) repeat-y left top;
}
#main-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: left;
margin: 0 0 0 3px;
padding: 0;
width: 483px;
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 */
}
#main {
padding: 22px 8px 0 8px;
background: url(http://www.blogblog.com/thisaway_blue/bg_content.gif) repeat-x left top;
}
.post {
margin: 0 8px 14px 21px;
padding: 0;
border-bottom: 3px solid #d8e7f7;
}
#comments {
margin: 0 16px 14px 29px;
padding: 10px;
border: 1px solid #cedef0;
background-color: #e4ecf5;
}
#sidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: right;
margin: 0 3px 0 0;
width: 269px;
color: $textColor;
line-height: 1.4em;
font-size: 90%;
background: url(http://www.blogblog.com/thisaway_blue/bg_sidebar.gif) repeat-x left top;
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 */
}
#sidebar {
padding: 7px 11px 0 14px;
background: url(http://www.blogblog.com/thisaway_blue/bg_sidebar_arrow.gif) repeat-y 179px 0;
}
#sidebar .widget {
margin-bottom: 20px;
}
#footer-wrapper {
padding-top: 15px;
background: url(http://www.blogblog.com/thisaway_blue/bg_footer_top.gif) no-repeat left top;
clear: both;
}
#footer {
background: #152e49 url(http://www.blogblog.com/thisaway_blue/bg_footer.gif) repeat-x left top;
text-align: center;
min-height: 2em;
}
Change, amend or insert the portions (shown in red):-
/* global
-------------- */
body {
margin: 0;
text-align: center;
min-width: 987px;
background: #4386ce url(http://www.blogblog.com/thisaway_blue/bg_body.gif) repeat-x left top;
color: $textColor;
font-size: small;
}
blockquote {
margin: 0;
padding: 0 10px 0 10px;
border-left: 6px solid #d8e7f78;
border-right: 6px solid #d8e7f7;
color: $postTitleColor;
}
code {
color: $postTitleColor;
}
hr {
display: none;
}
/* layout
-------------- */
#outer-wrapper {
margin: 0 auto;
width: 987px;
text-align: left;
font: $bodyFont;
}
#header-wrapper {
padding-bottom: 15px;
background: url(http://i191.photobucket.com/albums/z76/tipsfornewbloggers/tyb/bg_header_bottom_2.gif) no-repeat left bottom;
}
#header {
background: #204063 url(http://www.blogblog.com/thisaway_blue/bg_header.gif) repeat-x left bottom;
}
#content-wrapper {
position: relative;
width: 987px;
background: #f7f0e9 url(http://i191.photobucket.com/albums/z76/tipsfornewbloggers/tyb/bg_main_wrapper_2.gif) repeat-y left top;
}
#main-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: left;
margin: 0 0 0 3px;
padding: 0;
width: 483px;
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 */
}
#main {
padding: 22px 8px 0 8px;
background: url(http://www.blogblog.com/thisaway_blue/bg_content.gif) repeat-x left top;
}
.post {
margin: 0 8px 14px 21px;
padding: 0;
border-bottom: 3px solid #d8e7f7;
}
#comments {
margin: 0 16px 14px 29px;
padding: 10px;
border: 1px solid #cedef0;
background-color: #e4ecf5;
}
#sidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: right;
margin: 0 3px 0 0;
width: 247px;
color: $textColor;
line-height: 1.4em;
font-size: 90%;
background: url(http://www.blogblog.com/thisaway_blue/bg_sidebar.gif) repeat-x left top;
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 */
}
#sidebar {
padding: 7px 11px 0 14px;
background: url(http://www.blogblog.com/thisaway_blue/bg_sidebar_arrow.gif) repeat-y 159px 0;
}
#sidebar .widget {
margin-bottom: 20px;
}
#newsidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: left;
margin: 0 0 0 3px;
width: 247px;
color: $textColor;
line-height: 1.4em;
font-size: 90%;
background: url(http://www.blogblog.com/thisaway_blue/bg_sidebar.gif) repeat-x left top;
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 */
}
#newsidebar {
padding: 7px 11px 0 14px;
background: url(http://www.blogblog.com/thisaway_blue/bg_sidebar_arrow.gif) repeat-y 159px 0;
}
#newsidebar .widget {
margin-bottom: 20px;
}
#footer-wrapper {
padding-top: 15px;
background: url(http://i191.photobucket.com/albums/z76/tipsfornewbloggers/tyb/bg_footer_top_2.gif) no-repeat left top;
clear: both;
}
#footer {
background: #152e49 url(http://www.blogblog.com/thisaway_blue/bg_footer.gif) repeat-x left top;
text-align: center;
min-height: 2em;
}
We have done up new background images to accommodate the new widths. The widths of the sidebars are slightly reduced.
Scroll down to these lines:-
/** Page structure tweaks for layout editor wireframe */
body#layout #main,
body#layout #sidebar {
padding: 0;
}
Change them to this:-
/** Page structure tweaks for layout editor wireframe */
body#layout #main,
body#layout #sidebar,
body#layout #newsidebar {
padding: 0;
}
Further down the template, look for this and add the lines (shown in red):-
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
This
places your Profile in the left sidebar. This can be removed later.
Now, “Preview” the template to view the changes and if see the new
sidebar nicely aligned, click “Save Template”. Remove the Profile if
you don't want it there by going back to Template -> Page Elements
and removing the Profile widget. Refresh your Blog to see your new Three Column Thisaway Blue layout!
Align Header Title and Description
The
Header title and description in the Thisaway and Thisaway Blue
templates are aligned to the left. To adjust them to the center or a
fixed position in the Header, read the guidelines at Header Image and Title Alignment (II).
This article continues at Three Columns Thisaway Template (II). If you want to insert a second sidebar into the Thisaway Green or Thisaway Rose templates, follow our tutorials there.
0 comments
Three Columns Minima Template
The typical new Blogger Minima Template has only one sidebar. We can add a third column to the left, to have two sidebars. This maximizes the space, and allows greater flexibility in adding page elements to the sidebar.
Note that this guide is for those who want to
convert their Minima template into a three column template by adding
another sidebar. In our Rounders Template
article, we have explained why the Rounders, Scribe, No. 897 or other
templates are different and how the background images should be changed
in order to cater to the new layout. We shall try to create new test
blogs under different templates and post the tutorials once we have
converted them into three column templates.
Before you
begin to do anything, remember to backup your template. Go to Template
-> Edit HTML. Click the “Download Full Template” link to save a copy
of your template
Scroll to the part where you see this:-
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
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 */
}
#sidebar-wrapper {
width: 220px;
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 */
}
The template defines 3 wrappers, namely:-
#outer-wrapper – referring to the entire blog
#main-wrapper – referring to the main Blog Posts
#sidebar-wrapper – referring to the right sidebar.
To add another sidebar, copy the part highlighted in red and paste it immediately after that, but rename the “#sidebar-wrapper” to “#newsidebar-wrapper”.
Next,
adjust the width settings of all the wrappers. For this example, I used
what is commonly used by many people i.e., 750px for outer-wrapper,
400px for main-wrapper, and 150px for sidebar-wrapper. You can of
course change these values, so long as the total widths of both
sidebar-wrappers and the main-wrapper do not exceed the width of the
outer-wrapper.
Also, fix the left margin of the main wrapper but
allow the newsidebar to float to the left, leaving the original sidebar
on the right.
Your template should now read something like this:-
#outer-wrapper {
width: 750px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 400px;
margin-left: 25px;
float: left;
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 */
}
#sidebar-wrapper {
width: 150px;
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 */
}
#newsidebar-wrapper {
width: 150px;
float: left;
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 */
}
Update:
We shall also change the layout editor to cater to the new width. Scroll to where you see this and add the lines
** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin-left: 0px;
margin-right: 0px;
}
body#layout #outer-wrapper,
body#layout #header-wrapper,
body#layout #footer {
width: 750px;
padding: 0px;
}
body#layout #main-wrapper {
width: 400px;
margin-left: 20px;
}
body#layout #sidebar-wrapper,
body#layout #newsidebar-wrapper {
width: 150px;
}
Blog Posts in the Center
This
sets the style sheet for the template. We will now need to add a
section in the body of the template. Scroll to somewhere near the
bottom of the script where you see this.
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</div>
Add the portion above the div id='main wrapper'. The segment should look something like this:-
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</div>
he
code will give you a newsidebar on the left, main post in the middle,
and leave the current sidebar on the right, just like what you see in
this Blog.
Blog Posts on the Left
If, for example, you want the main post on the left, and both sidebars on the right, you will put the portion below the div id='main wrapper'. It will look like this:-
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</div>
Change Width of Header and Footer
One
more thing. If you have a wider layout, you may also want to lengthen
the width of your Header and Footer. Go to the part of your template
that says this:-
#header-wrapper {
width:660px;
and
#footer {
width:660px;
You can change the number in red.
In this example, I may want to widen it to the same width as that of
the outer-wrapper. I will therefore change the above codes to this:-
#header-wrapper {
width:750px;
and
#footer {
width:750px;
You
may click “Preview” to see the new layout, and if you are happy with
what you see, click “Save Template”. If you don't want the profile on
the left, you can remove that page element after that. You have now
three columns in your layout!
Note:
If
you are using the old Blogger templates, or any other template, the
style names may be different. For example, #header-wrapper may be
called #head-wrap. If you are unsure, you may source the net for a
guide specifically for your type of template. Otherwise, you may want
to understand the way we change this template and adapt it to yours. As
long as you backup your current template, and Preview the changes made,
it should be alright for you to try some changes.
Note that this guide is for those who want to
convert their Minima template into a three column template by adding
another sidebar. In our Rounders Template
article, we have explained why the Rounders, Scribe, No. 897 or other
templates are different and how the background images should be changed
in order to cater to the new layout. We shall try to create new test
blogs under different templates and post the tutorials once we have
converted them into three column templates.
Before you
begin to do anything, remember to backup your template. Go to Template
-> Edit HTML. Click the “Download Full Template” link to save a copy
of your template
Scroll to the part where you see this:-
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
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 */
}
#sidebar-wrapper {
width: 220px;
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 */
}
The template defines 3 wrappers, namely:-
#outer-wrapper – referring to the entire blog
#main-wrapper – referring to the main Blog Posts
#sidebar-wrapper – referring to the right sidebar.
To add another sidebar, copy the part highlighted in red and paste it immediately after that, but rename the “#sidebar-wrapper” to “#newsidebar-wrapper”.
Next,
adjust the width settings of all the wrappers. For this example, I used
what is commonly used by many people i.e., 750px for outer-wrapper,
400px for main-wrapper, and 150px for sidebar-wrapper. You can of
course change these values, so long as the total widths of both
sidebar-wrappers and the main-wrapper do not exceed the width of the
outer-wrapper.
Also, fix the left margin of the main wrapper but
allow the newsidebar to float to the left, leaving the original sidebar
on the right.
Your template should now read something like this:-
#outer-wrapper {
width: 750px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 400px;
margin-left: 25px;
float: left;
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 */
}
#sidebar-wrapper {
width: 150px;
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 */
}
#newsidebar-wrapper {
width: 150px;
float: left;
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 */
}
Update:
We shall also change the layout editor to cater to the new width. Scroll to where you see this and add the lines
** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin-left: 0px;
margin-right: 0px;
}
body#layout #outer-wrapper,
body#layout #header-wrapper,
body#layout #footer {
width: 750px;
padding: 0px;
}
body#layout #main-wrapper {
width: 400px;
margin-left: 20px;
}
body#layout #sidebar-wrapper,
body#layout #newsidebar-wrapper {
width: 150px;
}
Blog Posts in the Center
This
sets the style sheet for the template. We will now need to add a
section in the body of the template. Scroll to somewhere near the
bottom of the script where you see this.
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</div>
Add the portion above the div id='main wrapper'. The segment should look something like this:-
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</div>
he
code will give you a newsidebar on the left, main post in the middle,
and leave the current sidebar on the right, just like what you see in
this Blog.
Blog Posts on the Left
If, for example, you want the main post on the left, and both sidebars on the right, you will put the portion below the div id='main wrapper'. It will look like this:-
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</div>
Change Width of Header and Footer
One
more thing. If you have a wider layout, you may also want to lengthen
the width of your Header and Footer. Go to the part of your template
that says this:-
#header-wrapper {
width:660px;
and
#footer {
width:660px;
You can change the number in red.
In this example, I may want to widen it to the same width as that of
the outer-wrapper. I will therefore change the above codes to this:-
#header-wrapper {
width:750px;
and
#footer {
width:750px;
You
may click “Preview” to see the new layout, and if you are happy with
what you see, click “Save Template”. If you don't want the profile on
the left, you can remove that page element after that. You have now
three columns in your layout!
Note:
If
you are using the old Blogger templates, or any other template, the
style names may be different. For example, #header-wrapper may be
called #head-wrap. If you are unsure, you may source the net for a
guide specifically for your type of template. Otherwise, you may want
to understand the way we change this template and adapt it to yours. As
long as you backup your current template, and Preview the changes made,
it should be alright for you to try some changes.
Subscribe to:
Posts (Atom)