This how-to is still "under construction" I just published it, because i think lots of people are suffering the same problem

[update]New Version available![/update]

Watch out my static 'About me' - page

'cause of a mysterious motivation boost i sat down yesterday night in front of my laptop, and tried to find is a way for "real-looking" static pages on blogspot.

and to make a long story short there is a way, to get professional looking static pages!

... i will still invest some work into this topic, but for now i will show you how it works with my 'quick-and-dirty' method (the breaking idea comes from hoctro's adding a frontpage tutorial).

here we go ...


1) let's start
add a page element (HTML/JavaScript) somewhere in the layout and drag it to show up before the 'blog post' section




2) change the layout
go to Layout - Edit HTML and enable the checkbox for Expand Widget Templates (do yourself a favour and SAVE your template before you change it)



3) search for the head-tag
and add the following lines of code directly after this tag



  1. <script>  
  2.    function doIT () {  
  3.         document.getElementById('Blog1';).style.visibility='visible';  
  4. }  
  5. </script>  

4) after the closing head-tag
you should find the body-tag - there you add onload='doIT()'




  1. [body onload='doIT();']  

5) now the magic happens!
search for your widget you added in step 1 (title) and add line 4 and 12




  1. [b:widget id='HTML5' locked='false' title='About me' type='HTML']  
  2. [b:includable id='main']  
  3. [!-- static content starts--]  
  4. [b:if cond='data:blog.url == "http://[YOURBLOG].blogspot.com/search/label/xxx"']  
  5. [!-- only display title if it's non-empty --]  
  6. [b:if cond='data:title != ""']  
  7.   [h2 class='title'][data:title/][/h2]  
  8. [/b:if]  
  9. [div class='widget-content']  
  10.   [data:content/]  
  11. [/div]  
  12. [/b:if][!-- static content --]  

6) we are nearly finished ...
search for widget blog1 and add lines 3 to 5




  1. [b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog']  
  2. [b:includable id='nextprev']  
  3. [b:if cond='data:blog.url != data:blog.homepageUrl']  
  4. [script]document.getElementById('Blog1').style.visibility='hidden';[/script]  
  5. [/b:if]  

7) last one ...
edit your HTML/Javascript Widget you added in step 1
open the html view and add these lines




  1. <script>  
  2.    function doIT () {  
  3.       document.getElementById('Blog').style.visibility='hidden';  
  4.    }  
  5. </script>  

after that step, you can finally add your content!

So That's IT ... i know - it's not the easiest way, but i'm thinking of rewriting it to make it a bit easier. Maybe i even create a own widget to make it more comfortable to use


Reblog this post [with Zemanta]

Related Posts by Categories



Widget by Hoctro | Jack Book