Tutorial: Blog structures

Showing posts with label Blog structures. Show all posts

How to make a blog into a real website

<div dir="ltr" style="text-align: left;" trbidi="on">
<b>This article explains how you can use Blogger to make a site that looks just like any other website and why you might, sometimes, want to do this.</b> <br />
<b><br /></b> <br />
<div style="clear: both;">
</div>
<a href="https://draft.blogger.com/null" name="more"></a><br />
<h2>
Blogs vs Websites</h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPVC3hLzWDj-PlrThOd5eu4qHlVyfljyDetwz2_LUQFUD9UhWEyIC7QPUCUJqZ_A012oG2l86syIGkt4rs79mvlKxX4w6wwWTladnvfKinuhOaQm6bNXxhMDkiHwG1swKb0PeuvNoteK8g/s439/using-blogger-to-make-a-real-website.png.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="158" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPVC3hLzWDj-PlrThOd5eu4qHlVyfljyDetwz2_LUQFUD9UhWEyIC7QPUCUJqZ_A012oG2l86syIGkt4rs79mvlKxX4w6wwWTladnvfKinuhOaQm6bNXxhMDkiHwG1swKb0PeuvNoteK8g/s200/using-blogger-to-make-a-real-website.png.png" width="200" /></a></div>
Some people are very happy to use Blogger to make a blog, that is, website that looks like a diary or journal that they write in regularly.<br />
<br />
But others aren't.   So a common question is "how to I make my blog into a real website, just like "someone" has done over at "this website"?<br />
<br />
This isn't easy to answer:  Not everyone means the same thing when they say "real website".  "Someone" might have just changed the background image, installed a third-party theme, changed a few settings - or re-written the entire <a href="http://blogger-hints-and-tips.blogspot.com/2017/03/themes-vs-templates-in-blogger-whats-the-difference.html">Blogger theme file</a>!  They may have just made the blog look more professional than the basic themes do - or maybe they've removing all "blog" features so that the site is like a regular brochure website.<br />
<br />
The bottom-line is that, even with no changes a blog is a "real website", because it's got:<br />
<ul>
<li><b>An url</b>  (www.your-blog-name.blogspot.com)</li>
<li><b>A space on the internet</b> that's dedicated just to it.   (For Blogger users, that space is inside Google's servers - we don't have to pay for our own hosting).</li>
<li><b>Web-pages</b>, made in HTML, which visitors can look at using a web-browser (eg Internet Explorer, Firefox, Chrome, Safari, etc)</li>
</ul>
<br />
And there are some sites which are<b> not at all ashamed to look like blogs</b>, for example:<br />
<ul>
<li><a href="http://www.ikeahackers.net/" target="_blank">www.IkeaHackers.net/</a> - a site for sharing clever ways of repurposing kitset furniture</li>
<li><a href="http://www.darkroastedblend.com/" target="_blank">www.DarkRoastedBlend.com</a> - a site about coffee - notice their <a href="http://www.darkroastedblend.com/2005/03/welcome.html" target="_blank">About page</a> is really just a post from 2005!</li>
<li><a href="http://howaboutorange.blogspot.com/" target="_blank">www.HowAboutOrange.blogspot.com</a> - a very stylish crafts website</li>
<li><a href="http://www.rustling.org/">www.RUStling.org</a> - a site listing all the songs in a large folk-song book</li>
<li><a href="http://www.tablequizhelper.com/" target="_blank">www.TableQuizHelper.com</a> - a site providing templates etc pub quiz-organizers</li>
<li><a href="http://www.trendmatcher.nl/">http://www.trendmatcher.nl/</a> - a Dutch-language site about technology trends</li>
<li><a href="http://blog.chrisrowbury.com/" target="_blank">http://blog.chrisrowbury.com</a> - a site with advice for choir leaders, which makes very elegant use of the Simple template (so much so that I initially assumed it was made with Wordpress).</li>
</ul>
<br />
<a href="http://www.bloggerbuster.com/2012/09/blogspot-top-100-ranking-sites.html" target="_blank">This article</a> from Blogger Buster lists a 100 others - and I'm sure that there are plenty of popular non-English language sites that look like blogs, too.<br />
<br />
But there are many other sites that have had <b>some or all of their Blogger features hidden</b>, for example<br />
<ul>
<li><a href="http://www.galwaytransport.info/" target="_blank">www.GalwayTransport.info</a> - a local public transport information site</li>
<li><a href="http://www.concentricsrestaurants.com/" target="_blank">www.ConcentricsRestaurants.com/</a> - a promotional site for a company that builds restaurants</li>
<li><a href="http://www.renewpilates.com/" target="_blank">www.RenewPilates.com</a> - the site for a Pilates studio</li>
</ul>
<br />
You need to do more work to make the second type of site - and even then, if a knowledgeable visitor looks at the source-code for a page, they can still tell that you're using Blogger.   So, usually, I'd recommend that you <b>focus on what you want to achieve with the site</b>, rather than "getting rid of blogger".<br />
<br />
That said, here is a lit of things that you may want to to do to "turn your blog into a website".   They are in, roughly, the order that I recommend doing them to have the maximum effect.<br />
<br />
<br />
<h2>
Initial steps to reduce the "bloggy" feeling</h2>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib6ggnoxQhkq8GbSplSGhQ9RPK7SHuQ4rZTDjsbIszPakCJeBTWPW_yEYkJWqSSSqv_OX05mIwya5TQt9-0GpBWFN35gpIMmMEeMsChh1OgHs_FaF90WpB9GFCHQQ5ktkL10ZYGYJWo12M/s516/convert-url-from-blogger-to-real-website.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="154" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib6ggnoxQhkq8GbSplSGhQ9RPK7SHuQ4rZTDjsbIszPakCJeBTWPW_yEYkJWqSSSqv_OX05mIwya5TQt9-0GpBWFN35gpIMmMEeMsChh1OgHs_FaF90WpB9GFCHQQ5ktkL10ZYGYJWo12M/s200/convert-url-from-blogger-to-real-website.png" width="200" /></a></div>
<b>1)   Get a custom domain</b><br />
<br />
This is a website address like  www.mySite.com  or  www.yourBlog.org - or whatever available name that you choose. <br />
<br />
Using a custom domain means that your address will not have "blogspot.com" in it.<br />
<br />
You can do this either:<br />
<ul>
<li>Using Blogger's  <b>Settings > Basic > Blog Address > Add a Custom Domain</b> function, or </li>
<li><a href="http://blogger-hints-and-tips.blogspot.com/2011/04/using-domain-purchased-from-another.html">By using an URL that you buy directly from a domain registrar</a> - you might need to do this if the address you want isn't available through the Blogger function (eg <a href="http://blogger-hints-and-tips.blogspot.com/2012/11/add-2nd-cname-for-domaindiscount24.html">I recently needed a co.nz address for a site</a>) or if you do not have a credit card.</li>
</ul>
<br />
This step is <b>essential if you don't want the site to be perceived as blog</b>, because the address is what people see when they first find the site in search-engine results.<br />
<br />
If you are going to get a custom-domain, then I strongly recommend <b>doing it at the very beginning</b> of setting up your blog, so all the later steps are based on the custom-domain name rather than re-directions.  This is is A Good Thing for SEO - and even if <a href="http://www.blogger.com/">SEO doesn't matter for your blog</a> initially it may become important later on.<br />
<br />
<br />
2)    <a href="http://blogger-hints-and-tips.blogspot.com/2012/03/removing-navbar-from-your-blog.html">Turn off the navBar</a>, and <a href="http://blogger-hints-and-tips.blogspot.com/2012/07/close-the-gap-left-when-Bloggers-navBar-is-removed.html">remove the space where it used to be</a><br />
<br />
<br />
3)   <a href="http://blogger-hints-and-tips.blogspot.com/2011/10/making-every-post-appear-on-separate.html">Show only 1 post on the main page</a>. <br />
<br />
<br />
4)   <b>Hide the "blog-specific" values from posts, </b>on the <b>Layout > Blog post (edit)</b> tab<b>.  </b><br />
<br />
At a minimum the things to turn off are:<br />
<ul>
<li>Post-date</li>
<li>Posted-by</li>
<li>Post-time</li>
<li>Comments</li>
<li>Links to this post</li>
<li>Labels</li>
<li>Reactions</li>
<li>Email post links</li>
<li>Post sharing</li>
</ul>
<br />
5)    <a href="http://blogger-hints-and-tips.blogspot.com/2010/01/setting-what-goes-on-home-page.html">Make a home page</a> - ideally using the custom-redirect option<br />
<br />
<br />
6)    <a href="http://blogger-hints-and-tips.blogspot.com/2010/04/removing-attribution-gadget-from.html">Remove the attribution gadget</a> (the bit where it says "Powered by Blogger")<br />
<br />
<br />
7)    <a href="http://blogger-hints-and-tips.blogspot.com/2010/05/hiding-subscribe-to-post-atom-at-bottom.html">Remove the "subscribe to posts (atom)" link</a><br />
<br />
<br />
8)    <a href="http://blogger-hints-and-tips.blogspot.com/2010/04/removing-attribution-gadget-from.html">Add an RSS-subscription gadget using Feedburner</a>.<br />
Some people say this is optional - but I believe that <b>all "proper" websites offer an RSS feed</b> and <b>show that they do so</b> by using a feedburner-style RSS chiclet.   If you just add Blogger's Subscribe gadget instead, it gives the Atom - ie blog-style feed.<br />
<br />
<br />
<h2>
Banishing the Blogger look for good</h2>
These next steps really go together:  if you do one, you need to do the others too.  They are needed if you totally want to remove the blog-ish-ness:<br />
<br />
<br />
9)     Remove all <b>gadgets that show a list of posts</b>.   These include the Archive, Labels.  This is simply the reverse of the <a href="http://blogger-hints-and-tips.blogspot.com/2012/03/adding-gadget-to-your-blog-using.html">add-a-gadget procedure</a> - edit the existing gadget, and click Remove.<br />
<br />
<br />
10)   <a href="http://blogger-hints-and-tips.blogspot.com/2012/10/remove-reformat-newer-older-or-home-links.html">Remove the   "older posts / home / newer posts" links</a>.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_cR5BkGVSK-L7MicsognwTDdMKTrmtRKe-jtbN4qeJ_dzuL4TaDo7aQCqS89uaM82vKKOn1Wzs1cvZL50KjzOgib1zbw9jiqRkU5qFh99EGxQf3OjUtPWt6ReECo-1BN1-HHBODQGO9_O/s200/blogger-insert-posts-into-pages.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_cR5BkGVSK-L7MicsognwTDdMKTrmtRKe-jtbN4qeJ_dzuL4TaDo7aQCqS89uaM82vKKOn1Wzs1cvZL50KjzOgib1zbw9jiqRkU5qFh99EGxQf3OjUtPWt6ReECo-1BN1-HHBODQGO9_O/s200/blogger-insert-posts-into-pages.png" /></a></div>
11)   Set up your own <b>navigation system</b>:   every <a href="http://blogger-hints-and-tips.blogspot.com/2010/02/difference-between-pages-and-posts.html">post or page</a> needs to be able to be accessed from either a button or a link that is in either a gadget or another post/page.<br />
<br />
It's temping to think about navigation from the home page.   But first-time <b>visitors who come to your site from search-results will not arrive at the home page</b>.   They might not even think to look at the home page.  Ideally your navigation system should offer several routes to get to every piece of information, and should include both logical links between posts <b>and</b> <a href="http://blogger-hints-and-tips.blogspot.com/2010/10/putting-custom-search-engine-in-your.html">a search-based option</a>.<br />
<br />
Tools that you might use to help with this:<br />
<ul>
<li><b>Summary posts</b>, with links to detail pages about the topic.   (Eg my public-transport site has a "city buses details" page, which links to individual route maps)</li>
<li><b>A menu bar</b> with links to the most-important summary posts.<br />NB  If you use the <a href="http://blogger-hints-and-tips.blogspot.com/2012/01/page-gadget-menu-bar-for-your-blog-with.html">Pages gadget</a> for this, it is automatically included if you <a href="http://blogger-hints-and-tips.blogspot.com/2012/05/mobile-templates-for-blogger-and-why.html">give the site a mobile theme</a> which is an important step if you want the site to be <a href="http://blogger-hints-and-tips.blogspot.com/2012/09/responsive-web-design-for-Blogger.html">responsive</a>.</li>
<li><b>Linked-List gadgets</b> to show summary posts, or lists of related detail posts, in the sidebar or footer.</li>
</ul>
<br />
An alternative to your own navigation system is to <a href="http://blogger-hints-and-tips.blogspot.com/2010/12/how-to-put-put-posts-into-your-pages-in.html">use categories to put your posts into pages</a>.  This doesn't fully reduce the bloggy feeling, since someone who looks at a page sees a list of posts (with just post-summaries if you've used jump-links).   However changing the the status message (the grey box that says "showing all posts with label <i>whatever</i>") can make this acceptable in some sites (ie ones where the line between blog and website is blurred).<br />
<br />
<br />
<h2>
What you (currently) cannot do</h2>
<b>You cannot <a href="http://blogger-hints-and-tips.blogspot.com/2012/07/take-numbers-out-of-blog-post-web-address-urls.html">remove the post-date values from the URL of blog posts</a>.</b><br />
If your entire site could be done with 20 or fewer screens, you could use Pages for everything - but IMHO this isn't necessary, visitors don't seem to be overly spooked by URLs with numbers in them.<br />
<br />
<b>You cannot use a <a href="http://blogger-hints-and-tips.blogspot.com/2011/04/dynamic-views-in-blogger-what-are-they.html">dynamic theme</a> </b><br />
If you want your site to look like a website, not a blog: you need to use a <a href="http://blogger-hints-and-tips.blogspot.com/2010/03/types-of-blogger-template.html">Designer, or possibly a Layout</a>, theme.<br />
<br />
<br />
<h2>
Other things that you might do</h2>
You might want your blog tostand out in the seach results in order to get more visitors - see <a href="http://blogger-hints-and-tips.blogspot.com/2013/03/basic-seo-for-google-blogger-users.html">Getting Started with SEO</a>.<br />
<br />
You might want to <a href="http://blogger-hints-and-tips.blogspot.com/2010/04/linking-your-blog-to-social-networks.html">link it to the social networks</a> - remember that there are wide range of possible links, and you need a strategy about how the site relates to each social medium that you use.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<h2>
Have I missed anything?</h2>
I wrote this article  while I was setting up a site on which I want to minimise the "blog" look-and-feel, and I've tried to capture all the steps that I did.   <br />
<br />
But maybe I've missed some things?   Maybe there are features that work differently on other themes.<br />
<br />
What else would you do?</div>

How to make a blog into a real website

This article explains how you can use Blogger to make a site that looks just like any other website and why you might, sometimes, want to d...