Blogger: CSS styles for code view

Did you like the code formatting in my last post? Adding a small CSS code to your Blogger template makes your code samples stand out and makes them much easier to read.

.codeview { 
font-family:"courier"; 
color: blue; 
font-size: 70%; 

margin : 15px 35px 15px 15px;
padding : 10px; 
background : #f9f9f9; 

border-top : 1px solid #eeeeee; 
border-right : 2px solid #cccccc; 
border-bottom : 2px solid #cccccc; 
border-left : 1px solid #eeeeee; 
}

There are 3 groups of style within this CSS snippet - font changes, box characteristics and border. The background makes the code stand out no matter what the format of your blogger so you can change your template at will. The colour and font face make it feel a bit more like "real" code and the border just adds a little flair. 

To install this style open the Edit HTML tab in the Design settings of your blog:

Cut and paste the code just above the close of the Skin tag in your Blogger template:

]]></b:skin>

When you wish to insert a highlighted code section you use the following template in the Edit HTML tab of your post editing:

<div class = "codeview"> 

%%YOUR CODE SAMPLE%% 

</div>

Remember when you are preparing your post content that you need to convert your code to HTML representations of the ASCII characters (for example < should be converted to &lt; ) otherwise the browser will attempt to execute rather than display the code. 


This can be easily completed with a set of simple text replacements, if you're not confident with the scripting you can use conversion scripts such as these handy examples from Palfrader.

DFP Small Business and Blogger - Javascript in Posts

Being fairly new to Blogger there are still some tips and tricks that are new to me, and maybe to you too.

When I first placed my DFP tags into the previous post they didn't work. Curious I thought! I know that Google is very big on stopping cross site scripting injection and figured maybe this was the reason why the code wouldn't work.

A further inspection of the code however showed a much easier issue to resolve as a user of Blogger.

DFP Small business tagging instructions tell you that you need to put the script loading code into the Header of your webpage, however in the case of CMS systems and blogging platforms like Blogger you can infact paste this code into the beginning of your post.

Here is the code as it should appear:

<script type='text/javascript' src='http://partner.googleadservices.com/gampad/google_service.js'>
</script>
<script type='text/javascript'>
GS_googleAddAdSenseService("ca-pub-8884734375688780");
GS_googleEnableAllServices();
</script>
<script type='text/javascript'>
GA_googleAddSlot("ca-pub-8884734375688780", "Training_Bunyip");
GA_googleAddSlot("ca-pub-8884734375688780", "Training_Cat");
GA_googleAddSlot("ca-pub-8884734375688780", "Training_Dog");
</script>
<script type='text/javascript'>
GA_googleFetchAds();
</script>

Here is the code as it did appear in my Blog:

<script type='text/javascript' src='http://partner.googleadservices.com/gampad/google_service.js'><br /></script><br /><script type='text/javascript'><br />GS_googleAddAdSenseService("ca-pub-8884734375688780");<br />GS_googleEnableAllServices();<br /></script><br /><script type='text/javascript'><br />GA_googleAddSlot("ca-pub-8884734375688780", "Training_Bunyip");<br />GA_googleAddSlot("ca-pub-8884734375688780", "Training_Cat");<br />GA_googleAddSlot("ca-pub-8884734375688780", "Training_Dog");<br /></script><br /><script type='text/javascript'><br />GA_googleFetchAds();<br /></script><br />

The issue is all the additional line breaks, that is when I had tried to cut and paste the scripting code into the post Blogger had inserted this code into my code automatically:

<br />

This causes the browser to parse the Javascript as HTML rather than Jscript and so the ad placements fail to work because the Javascript pre-loaders are not running.
The good news is that this is really easy to fix!
Go to the dashboard of your Blog and go to the "Settings" tab and then the "Formatting" tab:

Make sure that your "Convert Line Breaks" setting is changed to No like so:
Voila! Your in post Javascript now works as intended and you can put DoubleClick for Publishers ad tags into your Blogger posts!