Wilkie Martin - Surviving Publication


Author of the unhuman series of addictive comedy cozy mysteries set in the Cotswolds. This documents my encounters with publishing and includes things I hope will be useful later. It also covers some local writing competitions and reviews some writing events.

Tuesday, 18 May 2010

Making a blog on #blogger look like the website

Is it really a month since my last post? And 6 weeks since the Festival of Writing in York? Well it is, and it is also time for my next post.
The rewrite of Inspector Hobbes is now on Chapter 9. But this posting is actually a more technical one. In my posting Setup a blog on #blogger so it looks like a website blog I showed how I made the address of my blog on blogger look like it belongs to my website. This was because I'd read about separate blog and websites being one of the The top 5 author website mistakes on http://www.authortechtips.com/. A mistake was not to have a common look to them. So we have made some changes to the blog so it looks more like the website. These changes are in progress, and fall foul of one of the other top mistakes - having a non-professional website that relies on someone making changes for you when you have time. We are still perservering with doing the website and blog ourselves, and hope to give both a revamp. If you have a blogger blog that is using the scribe template, then the following can be used to make it more individual.

This is what we changed on my blog template, which was originally the scribe template.

Good luck. If you change the standard template take lots of backups of it so you can go back to what you had before.

Template Changes

This assumes you have a blog on blogger, and that you have a blog with the 'scribe' template. Other templates may have different code, so the following probably won't work for them.
This also assumes that you want a blog that doesn't have the standard backgrounds, and one that isn't down the middle of the page with a clear space around it. The standard backgrounds are replaced with white.
  • Logon to blogger
  • Go to 'layout'
  • Go to 'fonts', and choose a font that matches your website.
  • In the layout, select 'edit' for the navigation bar, and select the transparent light option.
  • In the layout, select each text and 'edit/html' gadget
  • In the html for each add the following to set the text (if you want font georgia that is)
    at the start add
    <span style="quot, serif;">
    at the end add
    <\span>
  • Preview the template
  • Go to 'edit html'
  • Tick 'show widget code'
  • At the top of the page, download the current template (in case this doesn't work!)
  • Then near the top of the code, just before the /* variable definitions
    insert the following code (if you don't want the blogger tool bar to appear at the top of the page)
    /*remove toolbar start*/#navbar-iframe {display: none} /*remove toolbar end */
  • preview the template and if you are happy save it, and continue editing to change the blog display as below
  • In the html code, search for

    /* Defaults----------------------------------------------- */
    body { margin:0;
    padding:0;
    font-size: small;
    text-align:center;
    color:$textColor;
    line-height:1.3em;
    background:#483521 url("http://www2.blogblog.com/scribe/bg.gif") repeat;
    }

    and add /* and */ around the 'background' line so that it isn't used

    /* background:#483521 url("http://www2.blogblog.com/scribe/bg.gif") repeat; */

    This stops the background that appears around the edge of the blog.
  • Preview the template and if ok save it.
  • Search for

    /* Layout----------------------------------------------- */
    #outer-wrapper {
    background-color:#473624;
    border-$startSide:1px solid #332A24;
    border-$endSide:1px solid #332A24
    width:700px;
    width:0 margin:0px auto;
    padding:8px; text-align:center;
    font: $bodyFont;
    }

    Put /* and */ around the background-color and width

    /* background-color:#473624;*/
    /* width:700px;*/

    This removes the background color around the blog inside the blog box.
  • Preview the template and if ok save it.
  • Immediately after this code find

    #main-top {
    width:700px;
    height:49px;
    background:#FFF3DB url("http://www2.blogblog.com/scribe/bg_paper_top.jpg") no-repeat top $startSide;
    margin:0px;
    padding:0px;
    display:block;
    }

    And comment this with /* and */

    /*#main-top {*/
    /* width:700px;*/
    /* height:49px;*/
    /* background:#FFF3DB url("http://www2.blogblog.com/scribe/bg_paper_top.jpg") no-repeat top $startSide; */
    /* margin:0px;*/
    /* padding:0px;*/
    /*display:block;*/
    /*}*/

    This removes the empty area above the blog.
  • Preview the template and if ok save it.
  • Immediately after this, search for

    #main-bot {
    width:700px;
    height:81px;
    background:#FFF3DB url("http://www.blogblog.com/scribe/bg_paper_bot.jpg") no-repeat top $startSide;
    margin:0;
    padding:0;
    display:block;
    }

    And add /* and */ around the background

    #main-bot {
    width:700x;
    height:81px;
    /*background:#FFF3DB url("http://www.blogblog.com/scribe/bg_paper_bot.jpg") no-repeat top $startSide; */
    margin:0;
    padding:0;
    display:block;
    }

    This removes the background from behind the blog.
  • Immediately after this, search for

    #wrap2 {
    width:700px;
    background:#FFF3DB url("http://www1.blogblog.com/scribe/bg_paper_mid.jpg") repeat-y;
    margin-top: -14px;
    margin-$endSide: 0px;
    margin-bottom: 0px;
    margin-$startSide: 0px;
    text-align:$startSide;
    display:block;
    }

    Add /* and */ around the background and margin-top and width.
    And, set the width to 90%

    #wrap2 {
    /* width:700px;*/width:90%;
    /* background:#FFF3DB url("http://www1.blogblog.com/scribe/bg_paper_mid.jpg") repeat-y; */
    /* margin-top: -14px;*/
    margin-$endSide: 0px;
    margin-bottom: 0px;
    margin-$startSide: 0px;
    text-align:$startSide;
    display:block;
    }
  • Preview the template and of ok save it.
  • Immediately below this, search for

    #wrap3 {
    padding:0 50px;
    }

    Comment /* */ around the padding

    #wrap3 {
    /* padding:0 50px;*/
    }

    This removes the blank space before the blog starts.
  • Preview the template and if ok save it.
  • A little further down, search for

    #main {
    width:430px;
    float:$endSide;
    padding:8px 0;
    margin:0;
    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 {
    width:150px;
    float:$startSide;
    padding:8px 0;
    margin:0; 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 */
    }

    Change the two widths to 80% and 20%

    #main {
    /* width:430px;*/
    width:80%;
    float:$endSide;
    padding:8px 0;
    margin:0;
    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 {
    /* width:150px;*/
    width:20%; float:$startSide;
    padding:8px 0;
    margin:0;
    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 */
    }

    This proportions 20% of the screen for the left hand gadget area, and 80% for the blog text area.
  • On 'layout'
  • select 'add a gadget' of type #html' and paste this code into it
    <a href="http://blogger.com/" title="BLOGGER"><img src="http://buttons.blogger.com/blogger-powerby-blue.gif" /></a>
    As the blogger tool bar has been removed above, this inserts an acknowledgment that the blog is powered by blogger.
    Or use one of the other buttons from http://www.google.com/support/blogger/bin/answer.py?hl=en&answer=41435

  • All my website pages have a common block at the end that gives 'Send' and 'Receive' contact options below. By opening the webpages html we've copied the code for this. Then in blogger, in 'layout', we've 'add a gadget', of type 'html' and pasted the code from the webpage in to it.
  • By default, when one of the other pages is open, the template I use (scribe) puts a 'Home' link at the end of the post. As this has been renamed to 'blog' this should be changed so that 'Home' means the website.
    After the <body>section look for

    <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
    <b:else/>
    <b:if cond='data:newerPageUrl'>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
    </b:if>
    </b:if>
    change <data:homeMsg/> to Blog
There may be better ways to do this, but this is how we've change it (so far). It gives us a blog that has the same banner and font as the website, and overall it has a similar look.

Good luck. Let us know how you get on.

My Related Postings


Setup a blog on #blogger so it looks like a website blog
Linking twitter to facebook and adding twitter to blog
How to add additional pages in #blogger
How to #twitter your blog updates and add twitter to #website
Include options on #blog to add the posting to #social #bookmarking sites