[Dummies Guide to Google Blogger Beta] Launch a Minisite | Estore in Blogger.
16 views
Skip to first unread message
vin
Jun 23, 2007, 9:07:31 AM6/23/07
to bloggerbet...@googlegroups.com
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. 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............
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.
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.
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.
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.
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.
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.
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.
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
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!!
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.
--
Posted By vin to Dummies Guide to Google Blogger Beta at 6/23/2007 04:31:00 PM
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. 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.
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.
--
Posted By vin to Dummies Guide to Google Blogger Beta at 6/23/2007 04:31:00 PM
Reply all
Reply to author
Forward
0 new messages