How to Add Syntax Highlighter to Blogger or Blogspot Blog


I run a web programming blog with tutorials. Where programming code has got the most importance. Hence i needed my code in any tutorial to be highlighted with colors. I searched throughout. I landed into the SyntaxHighlighter plugin for WordPress. Which easily integrates into WordPress.

But my requirement was to embed SyntaxHighlighter into Bloggeras i run my blog on Blogger.com. The following steps may help.

Step 1: Backup your blogger template

 

In your left side navigation menu click on Template. Then at the very top-right corner you can find a button to “Backup/Restore” your blogger template design.

 

Step 2:  Edit Blogger Template in New Blogger Interface

 

 

Navigate to Blogger dashboard > Layout > Edit HTML  and Expand Widget Templates. Search for <head> and replace it with the below code

<head>

<link href='https://sites.google.com/site/itswadesh/codehighlighter/shCore.css' rel='stylesheet' type='text/css'/>

<link href='http://sites.google.com/site/itswadesh/codehighlighter/shThemeDefault.css' rel='stylesheet' type='text/css'/>

<script src='http://sites.google.com/site/itswadesh/codehighlighter/shCore.js' type='text/javascript'/>

<script src='http://sites.google.com/site/itswadesh/codehighlighter/shBrushCss.js' type='text/javascript'/>

<script src='http://sites.google.com/site/itswadesh/codehighlighter/shBrushJScript.js' type='text/javascript'/>

<script src='http://sites.google.com/site/itswadesh/codehighlighter/shBrushXml.js' type='text/javascript'/>

<script type='text/javascript'>

SyntaxHighlighter.all()

</script>

Step 3: Write Your Programming Code inside <pre> Tag

 

Whenever you publish a post with Programming Code, include the code within the <pre> section

<pre class=”brush: js”>
Your script here
</pre>

Example:

<pre class="brush: js">
$(document).bind('click', function(e) {

            var $clicked = $(e.target);
            if (! $clicked.parents().hasClass("staticMenu")){
                $(".staticMenu dd ul").hide();
                $(".staticMenu dt a").removeClass("selected");
            }        });

</pre>

8 steps to Add Feedburner Email Subscription Box To Your Blogger Blog


As a Blogger our aim is to build subscriber base which will eventually build our brand and customer base.  The subscription helps our blog users by sending a copy of our post the moment it is published.

Most of the blog users like this Email Subscription Feature of blogs. So lets know how the Email Subscription Box is added into a blog.

1.  Create a feed burner account at http://feedburner.google.com

2. Enter your blog/feed address and click next

3. Now choose the available feed to proceed

4. Next job will be to provide a title for the feed.

5. Now your feed is active.

6. We are all ready. Next step is to integrate the feed into your blog i.e. wordpress, blogger, … For that click next check all the check boxes available and again click next.

7.  Now click on publicize tab and click on Email Subscriptions Menu

8. Click Activate button and your feed will be active for publishing. Automatically the HTML code will be generated and shown. You can post it into your blog by using a HTML/JavaScript Widget(For Blogger) and Text Widget (For WordPress).

A.  For blogger there is a inbuilt option just bellow the HTML code generated by feedburner. Just choose blogger and click GO. 
B. It will take you to your blogger admin page. Follow the instructions at blogger to integrate it to blogger.

XAMPP Access to the requested directory is only available from the local network.


I searched a lot about this issue and found the simplest solution:

Mark the like “Deny from all” as a comment at the <LocationMatch attribute present at the end of the file (C:\XAMPP\apache\conf\extra\httpd-xampp.conf)

Subsequently i added into my verified list of solutions at https://itswadesh.wordpress.com