Don't miss these Blodger posts!

Thursday, 6 December 2012

Top tools for best screen design


Once you have your first cut of your site which you have tried to build in accordance with the previous sets of rules, or if you have redesigned your site to optimise it, then try these tools to check your site.

The Google browser size tool at http://browsersize.googlelabs.com/ is useful for seeing what the percentage of people can see what on your site without having to scroll - but being phased out for Google analytics new tool.

Click on images below to enhance view.




Google browser size site showing what can be seen at each resolution
Soon to be redundant Google browser size.

















Google analytics displays a different version for sites as below

Google Analytics screen usage displaying Duckinghampalace.com
Google analytics version


Note how the single advertisement in this site was placed in area where only the top bit was "above the fold". The Google tool also gives percentages of  where clicks are occuring most and in this example also states that there are 11% of clicks taking place below the fold. It shows how the majority of people stick to the landing area

Incidentally Google also gives mobile users a web site where they can type in a web address and it will try and convert any site to a mobile readable web site. http://www.google.com/gwt/n

You can also see what your site look like on a mobile device on for example by using a site such as HowtoGoMo



HowtoGoMo site displaying Duckinghampalace.com on mobile device
HowtoGoMo displaying a site via a mobile



Another key issue is how to deal with Accessibility and for example laptop users who don't use a mouse. Awareness is needed to ensure for example that ALT tags are filled in images for example

Use tools such as http://wave.webaim.org and type your site into this. Using major frameworks such as Blogger and Wordpress should deal with many of issues as they have considered much of this in design of frameworks.

Whenever you design or redesign test your site and use these tools to ensure high grade landing area.

Previous posts were:





Friday, 30 November 2012

Key to optimum landing area



The focus of this post is on the landing area (see previous post) and what will be visible to the largest majority of people on first hitting your site. 

  • Use dynamic templates and web design using relative pixel width and heights - If you can't it's not an issue but fix your resolution at 1024*768 or less.
  • More importantly design your landing area to be 960 pixels wide by 700 high maximum.
  • Place all key information and leads in this area and in order of importance from left to right.
  • Be wary of Googles Ad limits, Ad stuffing policy above the fold, and place accordingly. Max 3 Ads in Googles recommended places but ensure that content is king
  • Assume 16:9 aspect ratio. 
  • Test this in the tools that are displayed on the next post
  • Use Blogger and its mobile facility to avoid worrying about smart phone growth creep and need to design device reactive sites.

Previous Post:


Tuesday, 13 November 2012

Best screen layout and size for Blogs



You have attracted people to your site so you don't want to turn them off do you ?

How you design your site layout, its flow, and the size and type of screen view are complex issues and will be one of the main factors in attracting people to visit your your site, and more to the point staying on it (and if advertising, how much revenue you make). The most important aspect by far of course to the visitor is relevant content. It is the information they have come to see and read, not how you display it. But if it is unreadable  and you have no idea on where to go next on your site, if key information is hidden in obscure places, then the reader will go elsewhere.

What we are trying to achieve in this post is to determine what is the optimal size and layout that you should be designing your site to, to ensure that the most important features of your site are seen when the viewer first hits your site. 

When the viewer first hits your site they hit what is often referred to as the landing page. This doesn't necessarily have to be the main site page and is often a separate page used primarily to entice people and is search engine optimised.

As a landing page could actually include everything on a large web page that isn't immediately visible, then in the context of this post we need to be more specific and target what I will refer to has landing area
This is what you see when you first hit a site. It does not include any sections of your landing page that you need for example to scroll down or scroll right. Of course your monitor, resolution, or page design may mean that everything is visible straight away but usually there are at least some areas where typically you will have to scroll down.

The landing area is the part of your site which will entice the viewer and make them fully engage. Content or ads below or to the right of this landing area will not be immediately visible to the viewer and if the most important selling feature of your site such as "Get free cash" isn't there, then people may just jump onto the next site.  An "Add to cart" placed to the far right may similarly be missed completely because of screen design issues. 

Another common term for this is "above the fold" and Google for example states "What is actually “above the fold” on a web page is a significant factor  to conversion rates. If visitors have to scroll to see an “add to cart” button, or some other critical element, they may never get around to it. "

Above the fold comes from newspapers who similarly focused on the upper half of the front page of a newspaper as the headline grabber to attract buyers and readers. But given the dynamic nature of the web , the ability to scroll up or down. left or right , then this term maybe past its sell by date.

Key fact: 80% of users remain "above the fold" and rarely go below it

As above this is large area so this subject will be broken into a series of articles and sections as below.
Optimal screen resolution and size

You view web sites normally via a web browser on a screen of varying size set at differing resolutions.

PC/MAC users will generally view web sites via Internet Explorer, Chrome , Firefox or Safari on multiple sized computer monitors of which the average is now between 19" and 21" (this is the physical size of the screen on a diagonal from top to bottom corner). Laptop/Note book users will do the same but with smaller monitor size . Tablet and Mobile users use many other browsers types but on much smaller screens from 2" to 10".

Obviously with larger display devices then there will be an opportunity to make more apps and browsers windows viewable at the same time in the main screen window. With smart phone and tablets you acknowledge this price you have to pay in terms of screen content because you can carry your device almost anywhere.

From an overall design and screen size perspective the type of browser is largely irrelevant.  What is more important is the amount of space used on the screen by the browser clutter and what is left that is available to your website.  This eats away at your valuable landing area space and there is little you can do about this except acknowledge that all readers will have this clutter, and that you need to take it into account.

If you take into account the browser header, the menu, tab, address/navigation and the bookmarks or favourites bar, then you may be taking away upto 10% of your visible screen resolution height. If the viewer has bookmarks or history sidebar open on the left this will similarly encroach into the visible space on average about 10-15% of screen. Most people do not optimise height.

Smart phones and tablets fortunately tend to rely on the hardware of for some key navigation features rather than use up the critical screen space which they have so little of but still the clutter takes up space.There is a distinction that smart phones and tablets will also use "Apps" rather than web sites, and these Apps will be optimised for the device. It is also possible to design web sites which will determine the device, and organise layout to match. Blogger authors will obviously have noted the Mobile feature which rearranges the blog to be viewed in a device optimised manner. In Blogger it primarily displays just the header and posts. 

The last key feature to consider and perhaps the most important is the effect screen resolution can have an affect and what are the best ones to use

The display resolution of a  display device is the number of distinct pixels in each dimension that is displayed. 

For example 800 * 600 resolution means 800 pixels wide and 600 pixels high. 

Pixels are what the visual image on screen is made up of and what your blog will be displayed to. If you design your web site to be 800 * 600 and display it on a screen with resolution of 800 * 600 then it fill fill this screen. If you use the same design on a larger resolution of 1200 * 800 then there will be blank elements surrounding your site. 

If you use the Blogger Next blog feature on the top Blogger bar, then you may find it interesting to see how many sites do have space down both left and right sides. Then reason for this is that the majority of people have large screen resolutions but many of the default Blogger templates are smaller.

If you designed your site to be 1078 * 960 and the viewer was looking at the site via a screen with a resolution of 800*600 then they would not see the full opening content in this screen and would have to use the side and up down scroll bars to see the rest of  the main landing content.

The average resolution has increased in size over the years from 800 * 600 prior to 2003, and until very recently 1024 * 768, but it is now 1366 * 768 for majority mainstream monitors. It is safe to say that over 95 % of PC/MAC monitor users have resolutions set at 1024 * 768 and above.

But in saying this the use in the number of mobile devices is increasing rapidly. Current estimates in late 2012 suggest that the mobile market is providing 20% of web use access. It is expected to continue to growSome people have never used PC monitors.

To make it more confusing your monitor can generally be set at different resolutions to suit your preferences (and eyesight). Although most tablets are hard set the resolutions can be high (HP Touchpad defaults to 1024 * 768,  iPAD 3 can be 2048 * 1536). 

And also for both browsers and smaller devices there are other controls which increase resolution in windows. Smart phones allow you to increase resolution by "expanding your fingers" on the screen. Browsers can use commands to such as control + to makes changes to resolution internal to browser.

And then even more there are aspect ratios (the proportional relationship between its width and its height) such as 16 wide to 9 high to consider, and then that with tablets and smart phones the orientation of the screen can automatically change from portrait to landscape by moving the device in a certain way.  Its is interesting to also note the change over the years  from  square screens 4:3 aspect ratio to widescreen displays, which generally have the 16:9 aspect ratio. 

And finally if you are clever enough and/or use the right technology and templates you can have sites which dynamically expand and contract depending on change in size of browser window. Note that Blogger has several dynamic templates which you can use. Basic HTML allows use of relative size rather than fixed widths and heights .

So all very confusing but do not despair! The next two posts recommend the best resolution to use and then also some tools which help you optimise your site.






Friday, 12 October 2012

Switch off Blogger comments


It's great to see other people commenting on your Blog, it shows interest, it adds to your knowledge, it adds to others knowledge and interest in your blog, and you may get a kick out of helping others. But on the other side you get to waste time answering questions from people who may never understand, psycho trolls, etc. On start ups when you will not get a great deal of readership, it may negatively influence the view of your blog if there are series of 0 comments throughout.. But on the other hand you may get a negative impression by not having them.

So to turn them all off, the quick way is to:
  • Design window
  • Settings link
  • Posts and comments link
  • Comment location - choose Hide on dropdown

 Turning them back on is the same but gives you other options , Embedded (the default option which places comments under your blog post), full window, and pop up window (which are self explanatory)


You can also turn on and off comments in individual posts;
(but if you hide comments as above you can't do this)

  • Design window
  • Posts link
  • Click on the Edit link any individual post .
  • On the right hand side you will see Post Settings
  • Click on Options and you will see 3 radio buttons

Reader comments 
 

 Choose one 



 Easy.
 



Friday, 28 September 2012

Explorer like folders


How can you break up your blog content into folders or chapters like a windows explorer folder structure or even like chapters of a book. I.e like the chapter structure that you see on the right hand column on this page?

This involves using the Blogger HTML/Javascript widget, using a clever bit of Javascript linking to icons that you want to use, and then hard coded references to the posts and pages in your blogs that you want to show this way 

The script for this site comes originally from Dynamic drive.com at DynamicDrive.com. 
This is how to use it in Blogger. 

Firstly you need to add three icons to your blog, the open and closed folder and the right chevron. You could add any other type of icon like a opening book or arrows or anything.

One way of doing this is to creat a new page and in the Compose window use the Insert Image dialogue to add the 3 icons. Save page, Publish it and then hide it via the unchecking the checkbox next to the page in the Configure Page List.

Go to the page and hover over the icon, then right click and copy link location to notepad or other. you will see a web addresses like 

http://1.bp.blogspot.com/-WonevftHNlI/UH3PFFXwluI/AAAAAAAAAA4/SzPrf7Rxvfs/s1600/closed.gif

http://3.bp.blogspot.com/-CpA7onS3nw8/UH3PF5CVW6I/AAAAAAAAAA8/2bqhLTfSOuU/s1600/list.gif


http://3.bp.blogspot.com/-6hndbyDy3Z4/UH3PGjo07AI/AAAAAAAAABE/bhXzzwKCEB8/s1600/open.gif


Do this for all three types - for closed, open and right chevron icons.


Then in the design layout, add a HTML / Javascript gadget to an appropriate place on the page and enter (copy and paste) the code below into the
Configure HTML/JavaScript textarea

/***********************************************
* Simple Tree Menu- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/


<style>
.treeview ul{
margin: 0px;
padding: 0;
}

//// this is the section where we need to have web addresses of the icons
// The right chevron

.treeview li{
background: white url(
http://3.bp.blogspot.com/-CpA7onS3nw8/UH3PF5CVW6I/AAAAAAAAAA8/2bqhLTfSOuU/s1600/list.gif) no-repeat 0px 3px;
list-style-type: none;
padding-left: 32px;
margin-bottom: 3px;
}



// the closed folder //
.treeview li.submenu{
background: white url(
http://1.bp.blogspot.com/-WonevftHNlI/UH3PFFXwluI/AAAAAAAAAA4/SzPrf7Rxvfs/s1600/closed.gif) no-repeat  0px 3px;
cursor: hand !important;
cursor: pointer !important;
}


.treeview li.submenu ul{
display: none;
}

.treeview .submenu ul li{
cursor: default;
}
</style>


<script type="text/javascript" >
var persisteduls=new Object()
var ddtreemenu=new Object()

ddtreemenu.closefolder="
http://1.bp.blogspot.com/-WonevftHNlI/UH3PFFXwluI/AAAAAAAAAA4/SzPrf7Rxvfs/s1600/closed.gif" //set image path to "closed" folder image
ddtreemenu.openfolder="http://3.bp.blogspot.com/-6hndbyDy3Z4/UH3PGjo07AI/AAAAAAAAABE/bhXzzwKCEB8/s1600/open.gif
" //set image path to "open" folder image

////do not edit these//////

ddtreemenu.createTree=function(treeid, enablepersist, persistdays){
var ultags=document.getElementById(treeid).getElementsByTagName("ul")
if (typeof persisteduls[treeid]=="undefined")
persisteduls[treeid]=(enablepersist==true && ddtreemenu.getCookie(treeid)!="")? ddtreemenu.getCookie(treeid).split(",") : ""
for (var i=0; i<ultags.length; i++)
ddtreemenu.buildSubTree(treeid, ultags[i], i)
if (enablepersist==true){ //if enable persist feature
var durationdays=(typeof persistdays=="undefined")? 1 : parseInt(persistdays)
ddtreemenu.dotask(window, function(){ddtreemenu.rememberstate(treeid, durationdays)}, "unload") //save opened UL indexes on body unload
}
}

ddtreemenu.buildSubTree=function(treeid, ulelement, index){
ulelement.parentNode.className="submenu"
if (typeof persisteduls[treeid]=="object"){ //if cookie exists (persisteduls[treeid] is an array versus "" string)
if (ddtreemenu.searcharray(persisteduls[treeid], index)){
ulelement.setAttribute("rel", "open")
ulelement.style.display="block"
ulelement.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")"
}
else
ulelement.setAttribute("rel", "closed")
} //end cookie persist code
else if (ulelement.getAttribute("rel")==null || ulelement.getAttribute("rel")==false) //if no cookie and UL has NO rel attribute explicted added by user
ulelement.setAttribute("rel", "closed")
else if (ulelement.getAttribute("rel")=="open") //else if no cookie and this UL has an explicit rel value of "open"
ddtreemenu.expandSubTree(treeid, ulelement) //expand this UL plus all parent ULs (so the most inner UL is revealed!)
ulelement.parentNode.onclick=function(e){
var submenu=this.getElementsByTagName("ul")[0]
if (submenu.getAttribute("rel")=="closed"){
submenu.style.display="block"
submenu.setAttribute("rel", "open")
ulelement.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")"
}
else if (submenu.getAttribute("rel")=="open"){
submenu.style.display="none"
submenu.setAttribute("rel", "closed")
ulelement.parentNode.style.backgroundImage="url("+ddtreemenu.closefolder+")"
}
ddtreemenu.preventpropagate(e)
}
ulelement.onclick=function(e){
ddtreemenu.preventpropagate(e)
}
}

ddtreemenu.expandSubTree=function(treeid, ulelement){ //expand a UL element and any of its parent ULs
var rootnode=document.getElementById(treeid)
var currentnode=ulelement
currentnode.style.display="block"
currentnode.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")"
while (currentnode!=rootnode){
if (currentnode.tagName=="UL"){ //if parent node is a UL, expand it too
currentnode.style.display="block"
currentnode.setAttribute("rel", "open") //indicate it's open
currentnode.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")"
}
currentnode=currentnode.parentNode
}
}

ddtreemenu.flatten=function(treeid, action){ //expand or contract all UL elements
var ultags=document.getElementById(treeid).getElementsByTagName("ul")
for (var i=0; i<ultags.length; i++){
ultags[i].style.display=(action=="expand")? "block" : "none"
var relvalue=(action=="expand")? "open" : "closed"
ultags[i].setAttribute("rel", relvalue)
ultags[i].parentNode.style.backgroundImage=(action=="expand")? "url("+ddtreemenu.openfolder+")" : "url("+ddtreemenu.closefolder+")"
}
}

ddtreemenu.rememberstate=function(treeid, durationdays){ //store index of opened ULs relative to other ULs in Tree into cookie
var ultags=document.getElementById(treeid).getElementsByTagName("ul")
var openuls=new Array()
for (var i=0; i<ultags.length; i++){
if (ultags[i].getAttribute("rel")=="open")
openuls[openuls.length]=i //save the index of the opened UL (relative to the entire list of ULs) as an array element
}
if (openuls.length==0) //if there are no opened ULs to save/persist
openuls[0]="none open" //set array value to string to simply indicate all ULs should persist with state being closed
ddtreemenu.setCookie(treeid, openuls.join(","), durationdays) //populate cookie with value treeid=1,2,3 etc (where 1,2... are the indexes of the opened ULs)
}

//// functions ////


ddtreemenu.getCookie=function(Name){ //get cookie value
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return ""
}

ddtreemenu.setCookie=function(name, value, days){ //set cookei value
var expireDate = new Date()
//set "expstring" to either future or past date, to set or delete cookie, respectively
var expstring=expireDate.setDate(expireDate.getDate()+parseInt(days))
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";
}

ddtreemenu.searcharray=function(thearray, value){ //searches an array for the entered value. If found, delete value from array
var isfound=false
for (var i=0; i<thearray.length; i++){
if (thearray[i]==value){
isfound=true
thearray.shift() //delete this element from array for efficiency sake
break
}
}
return isfound
}

ddtreemenu.preventpropagate=function(e){ //prevent action from bubbling upwards
if (typeof e!="undefined")
e.stopPropagation()
else
event.cancelBubble=true
}

ddtreemenu.dotask=function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
}

</script>

<a href="javascript:ddtreemenu.flatten('treemenu1', 'expand')">Expand  +</a> | <a href="javascript:ddtreemenu.flatten('treemenu1', 'contact')">- Contract</a>
<p></p>
<ul id="treemenu1" class="treeview">

// this is where you use the  li html attribute to create a list. WHen you //have a new item or post to add to this structure, then add them here//

<li>Basic Blogger
    <ul>
    <li><a href="http://blodger.blogspot.co.uk/2011/12/blogger-starter.html">Blogger Starter</a></li>

    <li><a href="http://www.blodger.com/2012/05/6-ways-to-post-in-chronological-order.html">Chronological order</a></li>
    <li><a href="http://www.blodger.com/2012/08/embed-or-display-another-site-or-forum.html">Embed a site</a></li>

    <li><a href="http://blodger.blogspot.co.uk/2012/03/updating-two-blogger-blogs-at-same-time.html">Updating two blogs at the same time</a></li>
  <li><a href="http://blodger.blogspot.co.uk/2012/03/showing-html-code-in-blogger.html">Showing HTML code on a page</a></li>
  <li><a href="http://blodger.blogspot.co.uk/2012/03/move-blog-from-one-account-to-another.html">Moving Blog to another account</a></li>
   <li><a href="http://blodger.blogspot.co.uk/2012/05/you-tube.html">You Tube Embed</a></li>
 
    </ul>
</li>
<li>Advanced Blogger
    <ul>
    <li><a href="
http://www.blodger.com/2012/07/google-analytics.html">Google Analytics</a></li>
    <li><a href="http://blodger.blogspot.co.uk/2012/03/most-basic-blogger-template.html">Most Basic template</a></li>
    <li><a href="http://blodger.blogspot.co.uk/2012/04/summary-posts.html">Summary Posts</a></li>
    </ul>
</li>

<li>Web Coding and HTML
    <ul>
   
    <li>HTML
        <ul>
        <li><a href="http://blodger.blogspot.co.uk/2012/03/colour-changing-tables.html">Coloured Tables</a></li>
        <li><a href="http://blodger.blogspot.co.uk/2012/04/copyright-symbol.html">Copyright Symbol</a></li>
        </ul>
    </li>
</ul>
</li>
</ul>

<script type="text/javascript">

//ddtreemenu.createTree(treeid, enablepersist, opt_persist_in_days (default is 1))

ddtreemenu.createTree("treemenu1", true)
ddtreemenu.createTree("treemenu2", false)

</script>



You don't need to understand most of the clever javascript above. You just need to know to insert the addresses for the icons, (there are 1 open, 2 closed , and one list to add)

You then need to add folder titles and links to the posts underneath them. You can see these where the <LI> <UL> tags are . Remember each tag has to be closed so for each <LI> there needs to be a </LI> and note that you can have <LI>s or <UL>s between another<LI>.

See WW3 schools for a description

Every time you publish a post and want  to add it to the folder structure then simple add another list item, of folder and lists


And thats all there is to it ;-)


Thursday, 9 August 2012

Embed or display another site or forum within Blogger


Updated

What if you wanted to display or embed another site or forum within your blog? 
For example your blog may want to direct your reader to see what another site looks like but without taking them away from you blog. Links via blog rolls or linked list generally open up in either a new page, tab, or window. The fact that people are put onto on another site means they may not come back. What if there is another web site tool which is based on another site which you can link to and therefore embed in your site. 

 You may want to include a member forum within your blogs (although the way blogs are structured and the whole point of them doesn't necessarily lean towards having forums within them and expect to use the forums owned credentials for security and membership). Another potential solution is to use Nabble which claims to provide an embeddable forum within many frameworks such as Blogger

The easy solution to embed any http site within your blog is to use Iframes. (see later but there is a significant issue for Blogger blogs when you want to use the secure https protocol rather than the standard web http protocol which Blogger uses.)
  
Do this -  Page. New Page, Blank Page 
In HTML mode window rather than Compose, copy in below, then Save

 <iframe frameborder="1" 

height="500" 
src="http://litemind.com
width="100%"
>This browser does not support IFRAMEs</iframe>

Where it says http://litemind.com enter the enter the site you require , http://www.bbc.co.uk/sport/  etc.

To illustrate an example click on Blodger embedded pages

This is a separate Blodger blog which simply has a single post with the iframe code above inserted via the HTML tab. It would have been included on a page on the actual Blodger site but sadly the new template is causing minor complications :-( 


It also has another example page with a Duck web site in :-) plus a number of other example to Nabble, Amazon and Google maps. (see the post Embed Google maps for further on the later). Also note the blank iFrame that was intended to include Amazon.com.. 


As an aside makingdifferent.com have a nice little tool for generating other types of iFrame samples which you can  just cut and paste into your blog

<iframe src="http://litemind.com/" style="border:1px #000000 solid;" name="Lite mind" scrolling="yes" frameborder="1" marginheight="px" marginwidth="0px" height="500px" width="500px"></iframe>

For further up to date information on IFRAMES see 

W3Schools IFRAME TAG

w3Schools IFRAME HTML
 
All major browsers allow IFRAMES


 For security reasons in the latest version of most modern browsers, http iframes no longer load in https pages by default. Blogger blogs are delivered using http and Google do not provide a https version. So this means that HTTPS sites will not appear in Blogger using a modern browser unless the browser user enables their browser to accept mixed content which is unlkiley to happen.The HTTPS issue is described in part in the following Google product forums here, and other similar issues here and here. The first article suggests a number of alternatives which don't unfortunately provide a good way forward for Blogger users yet.


Oddly enough Blogger.com (when you log in) is HTTPS but your actual blog is HTTP. Gmail is HTTPS and most  major sites are as well. Apparently performance reasons are at the root of this. And oddly enough embedding https Google maps and youtube videos work fine.

Await further developments ..





Thursday, 19 July 2012

Google Analytics


What use are statistics ?

With these you can see who is looking at your site, what country they are from, which pages or posts they are looking at and a whole host of other information. Apart from seeing how well or not you are doing, they can help you improve your site and its content.
Although the basic Blogger admin page gives you some pretty good and interesting statistics, if you want to step up to another level of analysis you need to look at the free Google Analytics.

Open up a new browser tab or window and go to http://google.com/analytics/
If you are currently logged into your own Blogger blog, enter your email address and type sign in and you will be led through a series of set up pages . If you are not already logged in or do not have a  google account then there will be different set up routine.
The initial set up page will ask for the site you want to analyse and  the name you want  to assign to this site (note you can add more sites and names later). There are a few other questions like what industry and acceptance of terms and conditions.
Once you are through this you will be presented with a page where we will need to get a tracking code : This code will enable Analytics to track and analysise your site . Without it  there can be no analysis. It's actually a few lines of code which you need to insert into your blog.

1. What are you tracking?

Example: www.blodger.com

Examples: www.blodger.com

apps.blodger.com

store.blodger.com

Examples: www.blodger.uk

www.blodger.cn

www.blodger.fr

At this stage, dependent on what your site address , you would normally pick option one . This could be www.blodger.blogspot.com  or ww.blodger.com if you have paid for a domain set up. Advanced guide later ...
Whatever option you choose will dynamically change the tracking code.
As it then states you need to copy and paste this code. So block copy all the code. Control A selects it all, control - C copies it. or use the mouse and move over it, and then right click and copy. Perhaps copy it to a notepad file temporarily. But don't worry it will still be on this analytics page.
Then within your blogger admin page , go to template, then click on edit HTML, and proceed

find the </body> tag  near the bottom of the template HMTL - try  control- F and type in /body. This opens up the browser find facility and will search through template for all instances of /body
Then just above this paste in your previous copied set of code and then press Save template
Go back to analytics and wait. What you are waiting for is a message in place of the
Tracking Status Tracking Not Installed
Last checked: 18-Jul-2012 16:16:41 PDT
The Google Analytics tracking code has not been detected on your website's home page. For Analytics to function, you or your web administrator must add the code to each page of your website.

to
Tracking Status  Receiving Data
You may need to wait and / or press F5 a few times 
See link http://support.google.com/googleanalytics/bin/answer.py?hl=en&answer=55601  for difference  between accounts and profiles . If you are small time blogger with a few blogs, then one account and multiple profiles.


Wednesday, 16 May 2012

6 ways to post in Chronological order


Blogs are normally based on posts being seen latest first.This is the default action for Blogger  (and  why Blogger doesn't provide a widget or tool to do the opposite). The default method follows the true nature of blogging that your regular readers want to go into your blog today and see what you have written today. If you have 500 posts the last thing they want to do is delve into your archive to find your most recent post. 

Yet there are good reasons for have for example a selection or all of your posts in chronological order where your oldest post is displayed first and the latest at the end. 

You may for example want a tab or page which displays a series of posts which are in form of a course and you want people to see them in course (date) order. You may be giving a life story or history where it may be convenient or better for reader to see posts in chronological order. 

So here are some ways of doing this. Whether these will work for you depends on what you are trying to do, and also some are a lot more complex involving Editing templates and introducing Javascript. You can also mix and match

Use the Blogger Archive widget and check the oldest post first option. This has a number of advantages in that Blogger does most of the work for you, and provides a small number of styles and frequencies. You can show a list of your posts hierarchically or a flat style, and show posts daily, weekly or monthly. But a flat list can't show post titles, and the archive will show all posts. 

Change dates on your posts (and hide the date) .This is easily done in Post editor, Post settings, Set date and Time for each of your posts to put them in the order you want them to be in. Blogger will automatically then sort your posts in reverse order. You could artificially enter a date in the actual post content. Seems a real ache to me but will work for single subject blogs.

Create a page with links to posts and these posts are entered in the chronological order you want them to be. At its simplest in the Page Editor you just insert a link using the link icon in the (chronological) order you want them to be in. So for each link you need the actual web address of the post you want plus you need to recall the date of the post. These can all be modified at any point.This is probably best done with two tabs open, one on the design page and one on the live view of blog (or use the two browsers method as here) or copying details to a separate notepad page. For the first link paste copied web address of post into Web address text field, then the title and or date of post in the Text to display text field and Ok it. Post links can then be inserted on the page in this way in the order you want them to be in.It would probably be good if these links where formatted in a prettier way so you could use the list options given in page editor or perhaps tables as per this link. Only trouble is that you have to manually create all the links but on the other hand you have total control. Remember you can have a static page on home page to hold these links. 

Used a link list widget. In layout editor add the link list widget where you want it. In the Widget again enter the web address of your post and the post title in the site address text field. Ensure "Do not sort" chosen. When you have entered all your links then you can use the up and down arrows to put them in the order you want. if you want to put dates in, then put these in the site address field. As above you have top manually create all links to posts.

Another more advanced option is to use javascript to do this for you and these can work for across blog globally or locally on pages. One type of script is embedded in your template , another type can be used on a page. There are variants which use other more complex changes. The problem here is that Google updates it's architecture regularly and in doing so have caused problems for the script writers. However elegant they are they cannot predict the future architecture of Blogger. they sometimes have limits , e.g 500 posts due again to Google limits.

These are:
Merriman method seen at Reverse post order blogspot
MS-Potilas version with a previous version at this link
Adams 4 ways in ASC pages then Adams with pipes and then Adam compares here 

The final option is use a 3rd party widget such a chronoblog (link here for advise on how to use.). It does not currently appear in the Blogger widget list 

Good luck :-)


Tuesday, 1 May 2012

You Tube




This post tells you how to embed a Youtube video in your blog. Latest Blogger makes things a lot simpler by offering a special upload video tool. In the Post compose window you can  click on the insert video icon which then prompts you upload your video. This can be direct from your computer, youtube and many other sources

If you want to code and embed within a gadget,  try the following:

Choose your Youtube video . 

Look in the address bar of the browser page where you play your  video
Copy the entire line
This maybe like  http://www.youtube.com/watch?v=LU8DDYz68kM
Go to your Blog

Add Gadget
Find and add the Basic  HTML/JavaScript  gadget 

Within this type following:

<iframe
width="560" height="315" src="http://www.youtube.com/watch?v=LU8DDYz68kM"
frameborder="0"
allowfullscreen>
</iframe>

Save

When published you should then see this video on your page


You should now see the classic you tube clip, the Battle of Kruger.

Note you can also use the same method to embed within posts or pages.


Tuesday, 17 April 2012

Copyright symbol


To get ©
Hold down Alt key then on numeric keyboard type in 0 1 6 9. The copyright © should appear in any document that you are creating - i.e in compose designer


Monday, 9 April 2012

Summary Posts


Rather than give several full content posts on your main page you may want to give just a summary of multiple posts, and then allow users to click on a Read me link to get to the main detail. The benefit of this is that you can show parts of multiple posts of your main page which give user a better flavour of your site, entice them to read on to other pages/posts, and also improve your style by hooking readers in the first few lines several times.

There are number of ways of doing this. 

The latest Blogger method is to use the jump break method. See Google Support

Further examples of summary posts include Blogger Busters explanation of Ramani's solution Blogger buster on Ramani

Ramani goes further to explain summary posts which expand within main page or read more to take user to post page. But also only techniques for only providing read more when posts are long ... 
Ramani on selective expandable posts




Friday, 16 March 2012

The most basic Blogger template


Confused by XML b:widget:ID skins wrappers etc, then you are not the only one. (and avoid all by just using pre-designed templates from Blogger or other sources and tweaking them via layout designer)
Following a discussion on Google groups
http://groups.google.com/group/bloggerdev/browse_thread/thread/21fa1f65c12d120d?pli=1
the code below was expressed as a view of most basic blogger template after contributions by Holmes, David Kutcher, and Alain Christian.
There is a difference in what is accepted as the most basic by new template designer and old one, and the old one (as of Mar 2012) now appears to prompt for a variety of  widget declarations or you may lose them. (how fatal and what recovery options have now been tested by author as yet ..)
So after backing up your template in your test blog, copy in the following and create the most basic blog ... the view isn't that flattering but obviously can be worked on if you fancy working from the bottom up. 

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
        <b:include data='blog' name='all-head-content'/>
        <title>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
                <data:blog.pageName/> : <data:blog.title/>
        <b:else/>
                <data:blog.pageTitle/>
        </b:if>
        <b:if cond='data:blog.url == data:blog.homepageUrl'> : HOME TITLE ADD-ON</b:if>
</title>
        <meta content='' name='description'/>
        <meta content='' name='keywords'/>
        <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'/>
<b:skin><![CDATA[
* { margin:0; padding:0; border:0; }
#navbar-iframe {
        height:                 0px;
        visibility:             hidden;
        display:                none;
}

body {
        font-size:                      84.5%;
        font-family:            Arial,sans-serif;
        color:                          #000000;
        background-color:       #cccccc;
}

div#wrapper {
        margin: 0 auto 0 auto;
        width:  800px;
}

]]></b:skin>
</head>
<body>
<div id='wrapper'>
<b:section class='main' id='main'>
<b:widget id='Header1' locked='true' title='terry most basic (Header)' type='Header'/>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Attribution1' locked='false' title='' type='Attribution'/>
<b:widget id='Profile1' locked='false' title='Blog Profile' type='Profile'/>
</b:section>
</div>

</body>
</html>

Hope I haven't mistyped anything, er 

Explanation of these to follow (or update to this post - won't be long)
There will be sections added on a template how to section



Tuesday, 6 March 2012

Move Blog from one account to another / multiple admins


So you might want  to move your blog to a new more appropriate email account, or generally reorganise and split things up, add joint authors for someblogs but not others, or put all your blogs under one master blog (email) account) which can oversee all and run also by separate more public accounts ?

Then try this for joint administration of a blog: 

  1. Login to your design dashboard for xyz.blog (for this scenario you are the Master.. )
  2. depending on what Blogger version you either need to go to Settings on left hand side menu then part way down middle of screen will be Permissions title. 
  3. Under Blog Authors box click the Add Author link. Enter the email address you wish to add / invite and click on Invite
  4. The second account  (henceforth known as Newboy) has to go into his/her gmail and accept this link from the Blogger email invitation.
  5. Newboy will then be entered into the blog but as author who can add and maintain posts only
  6. Master then needs to log in again, and in the same Settings Permissions screen needs to change newboy from author to admin 
  7. xyz.blog now has two admins who can independently administrate the account  
  8. WARNING: not sure what would happen if both accounts tried to delete each other at the same time !


Changing ownership:

  1. As above steps 1-7
  2. Newboy enters blog and goes to Settings Permissions and deletes Master.
  3. Master logs into his blogger account and notices that xyz.blog is no longer visible to him/her. Hopefully won't be a surprise :-)

Multiple ownership

In this scenario Master oversees several sites. He could have joint admins for people he trusts, or he could just have several other accounts which are visible from individual blogs and which act as fronts to the blog. He could allows other people to author (create and maintain posts)
Master could be the controller of the adsense account for example

  1. Use steps 1-7 as above to create other accounts



Saturday, 3 March 2012

Showing HTML code in Blogger


If you want to display mouse over colour changing table code shown in previous post ie the table like this 

1  Rob T riley
 Great free photo links
2  Duckingham Palace
 Beautiful Ducks


Then in Blogger - Page - Compose just cut and paste HTML code onto screen. It automatically strips some of HTML tags to allow it to be displayed as code ..


<table bgcolor="#CCCCFF" border="0" height="31" onmouseout="this.bgColor='#CCCCFF';" onmouseover="this.bgColor='#FDD017';" style="width: 515px;">
 <tbody>
<tr>
  <td height="25" rowspan="2" width="34">1</td>
  <td height="13" width="465">&nbsp;<span style="color: blue; font-family: Verdana; font-size: 10pt;"><a href="http://robtriley.com/" target="_blank">Free photography link</a></span></td>
 </tr>
<tr>
  <td height="12" width="465"><span style="font-family: Verdana; font-size: 10pt;">&nbsp;</span><span style="font-family: Verdana; font-size: 10pt;">In Depth view from experts</span></td>
 </tr>
</tbody></table>


The issue is that HTML tags will be interpreted as HTML unless thay are


HTML Tag in English Substitute
& ampersand &amp
" double quote &quot
' single quote &#039;
< less than &lt;
> greater than &gt;


For example this

<td height="25" rowspan="2" width="34">1</td>


becomes

  &lt;td height=&quot;25&quot; rowspan=&quot;2&quot; width=&quot;34&quot;&gt;1&lt;/td&gt;

If it's up use Gordon Hudsons http://www.hudson.nu/convert-html-to-blog.html

If you are using for example c# , perl, or other code in your blog and want to display this then a better way is to use Google Prettify.



 

Blodger Copyright © 2010 LKart Theme is Designed by Lasantha


Downloaded from Free Templates

Modified to LK Magazine v2 Pimp No6 and Copyright © 2013 by Blodger