Launch a Minisite | Estore in Blogger. ~ The Blog Doctor.
Loading...

Launch a Minisite | Estore in Blogger.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

A Minisite is a small/minimum site with one or only a few pages. It maybe a part of a bigger site or a standalone site by itself. It has a narrow subject focus and is used to target a product or a population segment commonly known as a niche.


A blog on the other hand is a site whose content is constantly updated. Here I have modified the blogger template so as to provide a static HTML frontpage which can also be used as an "Introduction" page for your blog. See the picture below :


Click on picture to enlarge it. I have used it to make a Minisite (Money From Blogs) to introduce this blog. You can also make a similar Minisite in Blogger to sell Ebooks, Audio/Video Feeds or any other niche product.

This method can also be used to make an Introductory page for your blog.
The advantage of making it in Blogger is freehosting and bandwidth and for slightly more you can get your own Domain name also with Blogger Custom Domains............

1. CREATE YOUR BLOG


The first step is to create a new blog. In Step 2 when creating your blog use keyword research techniques to use the appropriate name/url for your blog so that the search engines associate it with your product name. If the name is available try using the same name as your product. When choosing a template pick the Minima template. Make a Test/dummy post in the blog in the final step.




2. MODIFYING HEADER


First go to Template----->Edit Html and backup your template so that you can restart by loading this backup at any time if anything goes wrong. Then scroll down to below the <body> tag. You can delete the header as I have done or you can choose to keep the header and show it only on the post/inside pages. To delete the header simply delete this code and save template :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Simply Technorati (Header)' type='Header'/>
</b:section>
</div>

If you want the header to appear only on the inside pages put it inside conditional tags as described later on this page.




3. MODIFYING BLOG POSTS


The blog posts will appear only on the inside or post pages. Use conditional tags for this. Check the box at the top of the template box to Expand Widgets Template. Then scroll down to the Blog Posts code and add the lines in RED and save template :

<b:includable id='main' var='top'>
<b:if cond='data:blog.pageType == "item"'>
<!-- posts -->
<div class='blog-posts'>
<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:loop>
<data:adEnd/>
</div></b:if>

Now the blog posts will be seen on the post pages only.




4. ADDING THE FRONT PAGE


The front page will be shown by a HTML widget in the blog posts column. A widget is the name given to the code of a Page element. To create more widgets in the blog posts column goto Template------>Edit Html and scroll down to the blog posts widget code :

<div id='main-wrapper'>
<b:section class='main' id='main' maxwidgets='3' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

Add "maxwidgets='3'" as shown above and also change the 'no' in red to 'yes' and save the template. Click on page elements subtab of Template tab above and in Layout view click on Add Page Element link above the Blog posts page element. Choose theHtml/Javascript option and in the popup window paste the Html code of your introduction page. You will have to prepare it beforehand in your favorite Html editor. Save Changes and Voila! you have the Introduction Page to your blog.



To show this widget only on the home page of your blog again use conditional tags. Go to template------->Edit Html and put a check in expand widgets template box at the top and scroll down to your widget code and add the lines in red and save template :

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/></b:if>
</b:includable>
</b:widget>

Now this page will be shown only on the home page of your blog. You can put your one page code in this to make up your Minisite as in Money From Blogs.




5. SIDEBAR WIDGETS IN POST PAGES


Similarly put all your sidebar widgets in conditional tags to show them only on the post pages. Follow the same technique used for blog posts. Add this line :

<b:if cond='data:blog.pageType == "item"'>

after the main includable line in each widget and then add a <.b:if> tag before the closing line of the includable. Now your sidebar widgets will only be seen on the post pages.





6. CSS NAVIGATION TABS


You have to put CSS Navigation tabs at the top as there is no other system to allow access to the post pages. For this get the code and graphics from exploding boy. Upload the graphics to a freehost and put the code in CSS part of your template :

/*- Menu Tabs E--------------------------- */

#tabsE {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;

}
#tabsE ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsE li {
display:inline;
margin:0;
padding:0;
}
#tabsE a {
float:left;
background:url("http://betabloggerfordummies.googlepages.com/tableftE.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsE a span {
float:left;
display:block;
background:url("http://betabloggerfordummies.googlepages.com/tabrightE.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsE a span {float:none;}
/* End IE5-Mac hack */
#tabsE a:hover span {
color:#FFF;
}
#tabsE a:hover {
background-position:0% -42px;
}
#tabsE a:hover span {
background-position:100% -42px;
}

Paste the above code just above the bskin tag below :

]]></b:skin>

Also Paste this code in the outer-wrapper :

<div id='tabsE'>
<ul>
<li><a href='HOME LINK' title='Home'><span>Home</span></a></li>
<li><a href='PAGE1 LINK' title='aStore'><span>aStore</span></a></li>
<li><a href='TEST POST LINK' title='Test Post'><span>Test Post</span></a></li>
<li><a href='CONTACT PAGE LINK' title='Contact'><span>Contact</span></a></li>
<li><a href='#' title='Link 6'><span>Link 6</span></a></li>
<li><a href='#' title='Link 7'><span>Link 7</span></a></li>
</ul>
</div>

Save Template after putting your own links in the above code.





7. FEED LINKS & NAVBAR


There is a Subscribe to Posts Atom link at the bottom of each post. To remove it see the third blockquote from the top in What is Subscribe to Posts Atom. The Blogger Navbar issues are discussed here. To remove the Older Posts/Newer Posts/ Home link see how to Customize the post footer.






8. SETTINGS


Settings of your Minisite/aStore blog should be set as follows :


Settings----->Basic

Add Title and Description for the search engines.

Add Blog to Listings----->Yes

Show Quick Editing on yourblog?------>No

Show emailpost links ?------->No



Settings----->Publishing


Send Pings----->Yes



Settings------>Formatting

Show Title Field----->Yes

Show Link Field------>No


Settings---->Comments


Comments-----?Show/Hide


Settings------>Archiving


Enable Post Pages------>Yes

Archive Frequency----->Any


Settings------>Site Feed

Set all feeds to Full


Settings------->Permissions

Blog Readers----->Who can view this blog------>Anybody




Template----->Page Elements----->Click edit link in Blog Posts widget.


Uncheck Date, Posted By, at Time, Comments, Labels, Show Quickediting, Show Email Post Links

Save Changes





9. aSTORE IN BLOG


You can put an Amazon aStore in any of the post pages. Just get the code from Amazon.com and paste it in Edit Html tab of your post editor. See my Beta Blogger For Dummies aStore See Picture below



You can put a different aStore on each page of your blog (complete with shopping carts) from different sites like Amazon CafePress etc.. and convert your Minisite into a complete Minimall. You can even put up your Advertisements up on the 'walls' of your Minimall and earn from them!!





10. YOUR OWN DOMAIN NAME


The last step is getting your own Domain name and shifting to Blogger Custom Domains. This will remove the "blogspot.com" from your URL and get your own "MyMinisite.com" name. Now people will never recognize that they are on a blog. The advantages are free hosting, free bandwidth, free space, all security and other problems handled by Blogger as well as much quicker indexing and crawling by the search engines due to the blog nature of your site.


32 comments:

DZI BEADS said...

good info i will try this later looks intresting.
Thanks for adding my Icons Thanks very much

Kokikabuto said...

Hello there, I tried to Add "maxwidgets='3'" and change the 'no' to yes but this appears when I save the template: Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Element type "b:section" must be followed by either attribute specifications, ">" or "/>". Please help.

vin said...

Kokikabuto,


See that there is an </b:section> tag in your code inside the main-wrapper code. Also see :

http://betabloggerfordummies.blogspot.com/2007/01/error-messages-in-new-blogger-templates.html

Nikki said...

How do I get a template similar to this one? I would make changes to color and number of tabs, but this is exactly what I am looking for.

vin said...

Nikki,

Most of the changes are in the settings so they are different from the template. In my next post I will show how to make a Standalone Minisite in Blogger. You can see the site (sneak preview) here :

http://minisite4u.blogspot.com/

Etienne said...

hi vin, do you actually have a XML ready minisite...?

vin said...

Etienne,

Will be posting soon on that. The site is http://minisite4u.blogspot.com/

Terry said...

These template tweaks are great. I do have a question though. Since the blog entries are excluded from the landing page, the archives and the label search results don't show either. Do you know of a way to still exclude the blog posts but not the archives and labels. I hope I said that in a way which makes sense. Great tutorial though, and I look forward to your minisite tutorial as well.

vin said...

Terry,

This is about a Minisite which by definition holds very few pages/posts. Hence it is not expected to have any archives or labels since the site content is very less. Still you can see the working archives by clicking on their links at the bottom of this page :

http://moneyfromblogs.blogspot.com/2007/06/test-post.html

Guneet Sahai said...

Vin,

Just wanted to thank you for the amazing piece of information that you are sharing here.

I was trying to convert my blog (which I just started) to look like a mini-site rather than a blog. Found this post & others very useful for the same.

Once again thanks a lot.

-- guneet

Terry said...

Hi Vin,

I really do appreciate your work and this post. But if someone is going to use this to create a static introduction page for their blog (as you say in the opening) they're going to need the label and archive pages to still work. Do you know if there is a way to change the exclusion of blog entries to allow at least the titles on an archive page? They don't work on your demo site either.

Terry

vin said...

Terry,

The title widget can be displayed on the post pages using conditional tabs for it just like I have used for the sidebar.

eric leach said...

nice, i like the idea of a mini site not only just an Estore but what about a community site or popular product page. I could see this being a good advirtising oppurtunity for many online companies.

nice post.

// eric 2007

http://betabloggerfordummies.blogspot.com/

Gaurav said...

Good ..
Hey You can view my Blog its also Good

Etienne Teo said...

Could you make templated minisite for us to easy use it, a full xml template for us to download would be cool.thanks vin!

Vin said...

Etienne,

Since the Minisite is actually a Html page in a Html widget on the top of the posts column the template will not contain the code.

The new Blogger layouts template do not allow widget data to be joined to template. It is separate and you have to put it in yourself after uploading the template. See also :

http://betabloggerfordummies.blogspot.com/2007/03/backup-widgets-template-data.html

BTW lovely commentbar icons.

Anonymous said...

Hi Vin,
I embedded my store using inline frame, but my right scroll bar is longer than needed for the astore.

How can I shorten it so the vertical scroll bar is proportional to the page length of the astore page.

I noticed you commented parts of your source code of moneyfromblogs "important" - very helpful!

I also noticed that your have a horizontal scroll bar at the bottom of the page is this neccessary?

Your page width is 1040px,I'm using 900px. Thanks in advance
Mike

vin said...

Anonymous,

What is your site url? Click my email address in middle column for detailed help.

Rodney S.B.A said...

Vin, i have explain the way to do this litte hacks in my french blog about blogger (you can see the back link in french just at the end of this post.

But, readers ask me a way to allow labels and archive pages to be view.

Can you help us ?

vin said...

Rodney,

You can see the Archives at the bottom of this page :

BBD Astore

You can also make a Labels CSS Navigation bar like the one in the header of this blog. The method is shown here :

Post a Book in Blogger

Edren said...

Hi Vin, Your Money From Blogs' Menu is just what i've wanted so far. But your guide seems to be so difficult for a newbie like me. Is there a simpler way? I'm sorry for all the trouble as i'm really new in this. Thanks so much in advance

Vin said...

Edren,

Have a look at Free CSS Navigation Menus for Bloggers.

Tony said...

Vin,
Thanks for all ur help via my email. I decided to post this comment here instead of email cos it may help someone else just as some comments here have also helped me immensely.
I went to 'edit html', expanded the widget and added a 'links' tab to my tabbed menu at http://nigerianstudy.blogspot; instead of saving, i got this error report:
We're sorry, but we were unable to complete your request.

When reporting this error to Blogger Support or on the Blogger Help Group, please:

* Describe what you were doing when you got this error.
* Provide the following error code and additional information.

bX-4ks1iu
Additional information
blogID: 194404917639219425
host: www.blogger.com
uri: /html

This information will help us to track down your specific problem and fix it! We apologize for the inconvenience.
Find help

See if anyone else is having the same problem: Search the Blogger Help Group for bX-4ks1iu
If you don't get any results for that search, you can start a new topic. Please make sure to mention bX-4ks1iu in your message.


I have tries severally but the error report keeps on coming. Please what do i do? I need the links tab.

Thanks again

Vin said...

Tony,

Try connecting at less busy times or use a broadband connection.

Also when connecting close all other open applications on PC. Close all other open browser windows or tabs.

Shaun Mayfield said...

I am trying to figure out how to do something very similar to the minisite but there is just enough differences to confuse me.

A link to a site that I am trying to mimic is http://www.terracecrawfordbio.com/.
Here are a couple things I am wanting. Home page to be by blog, then the second page to be a post 'About Me' that has the timestamp turned off, etc. I love the minisite you made and am looking for that idea but to have the buttons lower at the bottom of my header instead of removing it. Any help would be awesome, thanks.

My site is www.shaunmayfield.com, or if that is not working, shaunmayfield.blogspot.com.

Thanks

Vin said...

Shaun Mayfield,

The link you gave is actually loading a blogger post in a frame (see Page Source).

Clicking the 'Home' link goes to the blogspot blog. It has a Classic Template.

Also see the section on creating CSS Navigation tabs in this post.

Bobo said...

Greetings. First of all thanks for this good tips. I have try it on my blog http://minisitetesting.blogspot.com . I wonder how to make the output of the minisite??? I've post like posting a blog but there is nothing appear on my site. How to post the content and header for that minisite??? Can you help me please.

Vin said...

Bobo,

The Blog is hidden on the item pages. You can link to it in the CSS navigation bar.

OnnoySomoy said...

""Shaun Mayfield,

The link you gave is actually loading a blogger post in a frame (see Page Source).

Clicking the 'Home' link goes to the blogspot blog. It has a Classic Template.""

But how he show a iframe in homepage?

Radikal Affiliate said...

I've been looking for minisite template for blogspot on the net till I found useful info at your post. Its a great tutorial, Thanks for help

mini site formula said...

Very well written up. I am so amazed to see such a wonderful stuff in your post.

wedding dress buy online said...

hi, thank you for share about make a store with blogspot. its helpful for me.
have a great day.

CLICK TO LEAVE A COMMENT..... :-)



Skip to top of post.

Search Blog Before Commenting

Loading...

Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,

Vin.

The Blog Doctor The Blog Doctor2 Blog Doctor Home

SUGGESTED READING

Tips On Blogger and Latest News.



Skip to top of post.