When Mumba Kafula and I discussed updating Dynamic Heights, the brief was to provide her with a cost-effective CMS and hosting plan that would keep all of the features she liked intact while giving her the means to make changes herself as and when required. I'd noticed that Blogger can be used as a CMS, so went to work.
Typically, a CMS (content management system) has features that include static pages and a means to produce dynamic pages to serve content for users to interact with, e.g. call-to-action buttons, contact forms, or buying online. WordPress is the most popular one and most blogging programs can be used for this purpose. Until recently, Blogger's limitations left it out of consideration as a CMS because it was just too "bloggy" and I didn't know how to set a static page as the landing page. I also wanted to add a slideshow and make it look nicer than the old one.
Making the move
I set up the Blogger blog on Mumba's Google Apps account and copied and pasted the content onto it. One of Blogger's limitations is it doesn't like clever CSS in the template and won't stand for gradients like the one in the original. You can host the CSS in Google Developers and link to it but Mumba prefers the sunshine-y background I've got for the new installation and provided me with a lovely pic of herself to put in the sidebar. The old silhouette pic went and I found a decent stock images website to use, though I've given my husband Richard a cameo on the Services page. The old site was hosted on 000webhost with a blog on Google Sites. The switch to Blogger put the whole thing in one place. Now all I had to do was make it look like a website, not a blog.
The Home page
On Blogger static pages, the default is to put the page name at the top and bottom. It doesn't look right and I had a heck of a job finding the right bit of code to put in place
<b:if cond='data:blog.pageType == "item"'>
<style>
h3.entry-title{
display: none !important;
}
</style>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<style>
h3.post-title{
display: none !important;
}
</style>
</b:if>
Then I did the menu. I wanted the Blogger website to look as much like the installation as possible. The Template/Customise/Advanced/Add CSS area permits you to add your own code, as long as it's CSS.
#navbar { height: 0px; visibility: hidden; display: none;}
.tabs-inner .section:first-child {
border-top: 1px solid #edddc6;
}
.tabs-inner .section:first-child ul {
margin-top: -1px;
border-top: 1px solid #edddc6;
border-left: 0 solid #edddc6;
border-right: 0 solid #edddc6;
}
.tabs-inner .widget ul {
background: #e7d6bd url(http://2.bp.blogspot.com/-r9Y1gqzu2qw/ULFk6MiE_BI/AAAAAAAAEVY/MIxcFFnAnO0/s1600/menubg.png) repeat-x;
_background-image: none;
border-bottom: 1px solid #edddc6;
margin-top: 0;
margin-left: -30px;
margin-right: -30px;
}
.tabs-inner .widget li a {
display: inline-block;
padding: .6em 1em;
font: bold 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: #d7b789;
border-left: 1px solid #84500f;
border-right: 1px solid #84500f;
}
.tabs-inner .widget li:first-child a {
border-left: none;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover .widget li a:active {
color: #84500f;
background-color: #d7b789;
text-decoration: none;
}
Change those values to whatever you want them to be. Note that I added an image for the navbar. I hosted it on Blogger by uploading the image to a blog post, then right-clicking and choosing "View Image." I right-clicked in the image, selected "Copy image location," then went back and deleted it from the post. Then I added the image URL to the code.
Blogger is a bit funny about colours and won't let you add your own code except in the advanced CSS. I got around that by uploading a small image 20px X 20px with the colour I wanted on it for the background. I wanted to change the page background. Here's the code:
.content-inner {
background-color: #ffeed5;
}
Getting rid of comments is best done manually. It's in the settings drop-down menu on the right-hand side of the page or post when you're in edit mode. You can also change the date of the post. Then there's the bloggy bits on the bottom of the page, the share buttons, etc. Here's the code:
.feed-links {display: none;}
.post-share-buttons {display: none;}
Finally, I didn't want all of my images to have that light-box effect so here's the code to change that:
.post-body img {
padding: 0px;
background: transparent;
border: 1px solid transparent;
-moz-box-shadow: 0px 0px 0px ;
-webkit-box-shadow: 0px 0px 0px ;
box-shadow: 0px 0px 0px ;
}
There is, of course, the matter of the slideshow. Nivo does some lovely sliders and they're responsive now. I'm pleased to say they do one for Blogger and there's a gadget maker service that creates the components for you. I didn't want to insert the slider in as a gadget, I wanted to be able to insert it into one individual post.
Way2Blogging has the solution. Use the script generator to generate the code, then copy and paste it into the Template/Edit HTML area just above </head> tag. Then get the code, which ought to look something like this:
<div id="w2bSlideContainer">
<div id="w2bNivoSlider">
<img alt="Achievement" src="http://2.bp.blogspot.com/-eQz8dFjOfQk/ULbE1zMKBaI/AAAAAAAAEZw/iEg4KynEj_8/s1600/slide2.png" title="Are you ready to achieve?" />
<img alt="confidence" border="0" src="http://2.bp.blogspot.com/-R-ihUVu7i4o/ULbExmWCJoI/AAAAAAAAEZU/LmJL3Uptz40/s1600/slide1.png" title="We can help to build your confidence" />
<img alt="Optimistic" src="http://1.bp.blogspot.com/-ccWvGzejI08/ULbE2tce9YI/AAAAAAAAEZ4/9VpvOEvHn2g/s1600/slide3.png" title="Be optimistic about your future" /></div></div>
and go to the post or page of your choice, then choose the HTML option in the edit mode, then paste the code in wherever you want it to go. One thing you'll notice is that the images don't fit the page properly. You need to get the original-sized images in there for it to work as intended; the script shrinks them, for some reason. If for whatever reason you get stuck with a revolving timer image, it's because the .js file has been deleted or moved. Drive HQ hosts scripts and there's always someone somewhere who does. You can use the file URL without causing any problems for anyone. If that fails, do a search for jquery.nivo.slider.pack.js till you find a storage service that lets you link to it. Or you can pay for a Google Apps account and store scripts there.
I chose the two sidebar layout; be aware that if you choose that, it's stuck like that for every page. That's why it was so important to get the slider to only go on one page.
The Domain
Moving the domain to the new installation was a huge pain, mostly driven by the fact that the instructions aren't as clear as they could be. If you're moving your domain from one website to another, here's what to do:
My BlogSpot URL is: dynamicheightstraining.blogspot.com
My domain URL is: www.dynamicheights.org.uk
DNS changes:
@ A 216.239.32.21
@ A 216.239.34.21
@ A 216.239.36.21
@ A 216.239.38.21
www CNAME ghs.google.com.
vlejgcawotqx CNAME gv-qzron2doln5ykisamrwr3qnrhqzcudage7vce7dtlxmb26evstja.domainverify.googlehosted.com.
If you do anything else you'll get a 404 error because it's not properly connected. Thanks to Nitecruzr at Google Product Forums › Blogger ›for his assistance.
Mobile
Because of the need to scale the slider for mobile, I've had to make a mobile version of the home page and set it as a post published a hundred years in the future so it always shows up on the first page. I also had to make a separate menu for it that only shows up on mobile devices and style it so it wouldn't suck. You can use what you like; I used a link list and styled it as a vertical menu using a variation of the menu code above. I've got a browser resizer I use to check how websites look on different-sized devices. Add /?m=1 to a URL to check how websites look on mobiles.
Conclusion:
Ever since I learned that it's possible to build a website on Blogger and make it look professional I wanted to have a go at it. As free hosting option, it's a great idea and you can do most of the things you would do on a standard dynamic website there. Since you're riding piggyback on a Google service, it does wonders for SEO. Needless to say, it can integrate seamlessly with other Google products, e.g. Google Drive and Google Plus.
However, the limitations continue in that you don't have the level of control you would have over, let's say, a WordPress website and many of the functions and features I take for granted on WP have to be included as hacks, not options built into the template design area. Making it look like a "normal" website requires a coding sleight of hand that isn't necessary on WP. I'm happy to recommend it as an option to clients but I suppose I'm naturally biased towards WordPress. I'm open to persuasion, though.
No comments:
Post a Comment