NOXASCH

Now that we have our basic custom template, in this post, i'm going to cover how to customized the header using my own CSS. To do this I'm adding a "Page Header" from the layout pane and fill in a blog title and description. And let's have a look how it add up inside the template. Demo: HERE Now I have a pile of code in the between our header tag as below. Let's have a closer looks part by part and see what we can do with it. <header> <b:section class='header' id='header' showaddelement='yes'> <b:widget id='Header1' locked='false' title='A Header (Header)' type='Header' visible='true'> <b:includable id='main'> <b:if cond='data:useImage'> <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'> <!-- Show image as background to text. You can't really calculate the width reliably in JS becau...

In this post, i'm going to show the basic of a custom blogger template which will work for me and you. And how it will work. In another post i will discuss a more detail on how to use it with an example. Get the full code of this basic custom blogger template and let's explore it. Also caution that in this basic custom template, i already disabled all the default blogger styling file to reduce page load and to use a custom styling. When i first upload the template, i will get the layout as above. Note that post is also count as a widget in a blogger template. In this template i already divided header, post,sidebar and footer widget into its own section. By examining this template i can manipulate it how i like it and that is what i'm going to do. <b:if cond='data:blog.pageType == &quot;index&quot;'> <title><data:blog.pageTitle/></title> <b:else/> <b:if cond='data:blog.pageType != &quot;error_page&quot;...

In previous attempt, i was trying to make my code blocks to looks like a real code blocks in post manually. I do this in a few post and got sick of setting custom span class  for each part and a custom css styling which is very tedious and not practical at all. I thought of writing my own script. But what if someone else already write that ? Then i meet with prettyprint by google, a handy javaScript that automatically detect what kind of language for your code and make it pretty with syntax highlighting. Pretty print is very easy to use and it got about five styling to choose from. Include prettify.js To use prettyprint, i first have to include the javascript file into my theme file. Simply copy and paste the following code before the closing </body> tag. <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script> Choose the styling There are five different styling available to choose upon. though some...