Coding Tips

Damn, it's happened again!

You've made a beautiful article, but Blogspot loves to stuff around with your code. Some bits are getting hidden, other bits are added in, how can you stop it stuffing you around?

Wouldn't be wonderful if there was a mysteriously Arcane Book of Answers, possibly from some Mysterious Illuminati type organization?

You could type in awesomely awesome coding that would do what it's supposed to, and just by adding a snippet of code it would pop out and be lovely! The spotlights would shine on you, the trumpets would resound down the streets, men would growl than slink away in shamed humbleness and scantily clad women would swoon at your feet...

Well, here is your Manual of Awesome!

1. Putting code into page

1. Putting code into page

Make code

To make ok to paste code on blogger page, get code, paste into http://codeformatter.blogspot.co.nz/

Paste back into page on HTML view rather than compose view, it comes out as nice box.

2. Make blank page

In HTML mode, paste this at top of page:
------------------

  <b:if cond='data:blog.isMobile'>   
   <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>   
  <b:else/>   
   <meta content='width=1100' name='viewport'/>   
  </b:if>   
  <b:include data='blog' name='all-head-content'/>  
  <title><data:blog.pageTitle/></title>  
  <b:skin>  
   <![CDATA[/* body { font: $(body.font); color: $(body.text.color); background: $(body.background); padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread); $(body.background.override) margin: 0; padding: 0; } ]]>  
  </b:skin>  
  <!--not showing blog title or home or feeds -->  
  <style>  
   .post-title.entry-title{  
   display: none;  
   }  
   .post-body.entry-content{  
   padding-top: 0px;  
   }  
   div.blog-pager{  
   display: none;  
   margin: 0px;  
   }  
   div.blog-feeds{  
   display: none;  
   }  
   div.comments.comments{  
   display: none;  
   }  
   div.post-footer{  
   display: none;  
   }  
   div#main.main.section{  
   padding: 0px;  
   }  
  .main{  
   width:100%;  
  }  
  </style>  

------------------


-------------------

For adding odd symbols to js code... http://www.javascripter.net/faq/mathsymbols.htm

-------------------

Refce:

mobile friendly websites

http://www.creativebloq.com/responsive-web-design/build-basic-responsive-site-css-1132756

http://webdesignerwall.com/tutorials/responsive-design-in-3-steps

http://johnstonianera.com/demos/simpleResponsiveLayouts-redux/left-fluid.html

Scope creep

-update sidebar so shows sidebar relevant to stage at - use cookies?

-images in polaroid format

-images as book

SMooth scroll

http://www.dwuser.com/education/content/quick-guide-adding-smooth-scrolling-to-your-webpages/