My Tech Notes: blogger

Showing posts with label blogger. Show all posts

Enable code syntax highlighting in blogger site using highlightjs

Template -> Edit HTML

Insert the following inside <head> tag:

    
    <!-- BEGIN: Syntax Highlighting with highlight.js -->
    <link crossorigin='anonymous' href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/agate.min.css' integrity='sha512-wI7oXtzNHj/bqfLA3P6x3XYbcwzsnIKaPLfjjX8ZAXhc65+kSI6sh8gLOOByOKImokAjHUQR0xAJQ/xZTzwuOA==' referrerpolicy='no-referrer' rel='stylesheet'/>
    <script crossorigin='anonymous' integrity='sha512-bgHRAiTjGrzHzLyKOnpFvaEpGzJet3z4tZnXGjpsCcqOnAH6VGUx9frc5bcIhKTVLEiCO6vEhNAgx5jtLUYrfA==' referrerpolicy='no-referrer' src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js'/>
    <script>hljs.highlightAll();</script>
    <!-- END: Syntax Highlighting with highlight.js -->
    <!-- BEGIN: CSS for code in pre and code -->
    <style type='text/css'>
        pre {
            font-family: monospace;
            font-size: 1 em;
            background: #333;
            color: #33cc33;
            tab-size: 4;
            padding: 5px;
            border: 1px dotted grey;
            border-radius: 5px;
            line-height: 2.0;
            overflow-x: auto;
            white-space: pre-wrap;
        }

        code {
            white-space: pre-wrap;
            overflow-x: scroll;    
            font-family: monospace;
            font-size: 1em;
        }
    </style>
    <!-- END: CSS for code in pre and code -->

Click save icon to save the template

Use it in your blog post:

<pre><code class="language-html">...</code></pre>

javascript: make your table sortable in your blogger post

Include the code below in your post(HTML):

<style type="text/css">
/* Sortable tables */
table.sortable thead {
    background-color:#eee;
    color:#666666;
    font-weight: bold;
    cursor: default;
}
</style>
<script src="http://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>

Mark your table as a sortable one by giving it a class of "sortable":

<table class="sortable">

blogger: label search url

To search for the posts with label: "YourLabel":

    http://YourBlog.blogspot.com/search/label/YourLabel

For the labels contains blank space, e.g "Your Label", use %20 replace the space:
```
    http://YourBlog.blogspot.com/search/label/Your%20Label
```

To search for posts with multiple labels, e.g. Label1 and Label2:

    http://YourBlog.blogspot.com/search?q=label:Label1+label:Label2

Tips

You can use the label search urls as Top Tabs to categorize your posts.

SyntaxHighlighter on Blogger: how to enable border

Add the following style to your blog template, right after the SyntaxHighlighter css link:

<style type='text/css'>
    body .syntaxhighlighter {
        border: 1px dashed #808080;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -ms-border-radius: 3px;
        -o-border-radius: 3px;
        border-radius: 3px;
        max-height: 600px;
        overflow: auto;
        padding: 1px 1px 2px 2px;
    }
</style>

Blogger: switch between old and new interface

To switch back to the old interface:
1. Click the gear button at the top right corner:
2. Select "Old blogger interface":
To switch to the new/updated interface:
1. In the old interface, click "Try the updated Blogger interface" at the top:

SyntaxHighLighter: auto line break with pre wrap

Add the following css into your html page(blog template):

<style type="text/css">
body .syntaxhighlighter .line {
    white-space: pre-wrap !important;
}
</style>

NOTE:

On SyntaxHighLither 3.0.83, enable the above css will make the line numbers go wrong. So better set gutter: false to disable the line numbers if you have long lines in the code block.

Use google code prettify in blogger

Copy the following code, and paste them right before </head> in the template html:

<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
<script type="text/javascript" language="javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/lang-css.js"></script>

Replace <body> with <body onload="prettyPrint()">

Now you can format your code use prettify, for example:

<code class="prettyprint lang-js">
<!-- your code here-->
</code>

<pre class="prettyprint lang-js">
<!-- your code here-->
</pre>

Add digg button into blogger post

Login to blogger dashboard
Select "Template" then click "Edit HTML"
Click "Proceed"
Tick "Expand Widget Templates"

Search for "<data:post.body/>", replace it with the following code:

<p>
<!-- DIGG -->
<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url = '<data:post.url/>';
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<data:post.body/>
</p>

add ADSENSE to blogger post by modifying the template

Login to your adsense account, create the AD unit and copy the code
Convert the code into safe HTML code (paste the code below and click convert): <script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
Login to blogger, select the blog you want to edit, select "Template", then click the "Edit HTML" button:
Click "Proceed":
Tick "Expand Widget Templates":
Ctrl + F (or Command + F on Mac OS X) to search for
```
<data:post.body/>
```

Right above that line, paste below code:

<b:if cond="data:blog.pageType == &quot;item&quot;">
<div style='float: left; padding: 0px 8px 8px 0px;'>

 CONVERTED ADSENSE CODE FROM STEP 2

</div>
</b:if>
<data:post.body/>

Save the template.

Use post name as html page title to improve blogger blog SEO

Edit the blog template in HTML

Replace

<title><data:blog.pageTitle/></title>

with

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

Bookmark: 21 Tactics to Increase Blog Traffic

21 Tactics to Increase Blog Traffic (Updated 2012)

Online Code Formatter for blogger

Note: the code formatter below can translate code fragment into HTML safe string. Can be used to post source code into blogger.
Usage: post your source code into the source code area then click the "Format" button.

Blogger: Missing Quick Edit Icon in the country specific URL

Blogger recently redirects users to country specific urls: e.g. notepad2.blogspot.com will be redirected to notepad2.blogspot.com.au if the user is browsing from Australia.

But there is a side effect that the quick edit icon is missing in the country specific url.

I spent quite a lot time trying to fix it by editing the template and modifying the browser settings. None of them works. Finally, I realized it was caused by the URL redirection.

Thankfully, you can bypass the URL redirection by appending /ncr to the blog address, e.g.

notepad2.blogspot.com/ncr

will let you access the notepad2.blogspot.com address and the quick editing icon will appear.

Blogger: Rename a label

If you are using the new/updated Blogger interface, you need to switch back to the old interface.
Activate "Posting" tab, the "Edit posts" subtab
In the "Labels Actions...", select "New label...", the type the new label that you want to rename to, click "OK" to create the (new) label.
In the "Labels" sidebar, click the (old) label you want to rename. It will then show all the posts with that (old) label.
Select all the posts with the (old) label, in "Label Actions..." select that (old) label under "Remove Label" section:
In "Label actions...", select the (new) label under "Apply Label" section
After rename the label, you can switch back to the new/updated Blogger interface.

Remove the line number from SyntaxHighlighter

I am using SyntaxHighlighter to display source code and scripts. In some cases, I want to hide/remove the line numbers.

To do that, the gutter attribute need to be set to false:

<pre class="brush: java; gutter: false;"></pre>

example 1: show line numbers: <pre class="brush: bash">cat /etc/issue</pre>
```
cat /etc/issue
```
example 2: hide line numbers: <pre class="brush: bash; gutter: false;">cat /etc/issue</pre>
```
cat /etc/issue
```

1. Login to http://analytics.google.com.
2. Click "Add Website Profile" link at bottom-left of the page.
3. Input your blog URL: for example, http://yourblog.blogspot.com
4. Click "Finish" button.
5. Ctrl+C (or CMD+C for Mac OS X) to copy the tracking code block generated.

II. Install the tracking code to your blog

1. Login to http://www.blogger.com/.
2. Under the blog you want to install Analytics tracking to, click on Layout.
3. Click on Edit HTML. An editing screen for your blog template's HTML displays.
4. Paste the tracking code to just before tag. You can put your cursor right before that tag.
5. Paste the Google Analytics Code Block by Ctrl + V or CMD +V.
6. Click Save Changes.

Now you have installed the tracking code.

III. Check the status of Google Analytics

1. Go back to http://analytics.google.com.
2. If the status of the newly added profile of your blog site is "Receiving Data", it means that Google Analytics has been enabled. You have done.
3. If the status is "Tracking not installed", click "Check Status". And refresh the page.

My Tech Notes

Search This Blog

Enable code syntax highlighting in blogger site using highlightjs

See also

javascript: make your table sortable in your blogger post

See also

blogger: label search url

Tips

SyntaxHighlighter on Blogger: how to enable border

See also

Blogger: switch between old and new interface

SEE ALSO:

SyntaxHighLighter: auto line break with pre wrap

NOTE:

SEE ALSO:

Use google code prettify in blogger

SEE ALSO:

Add digg button into blogger post

SEE ALSO:

add ADSENSE to blogger post by modifying the template

SEE ALSO:

Use post name as html page title to improve blogger blog SEO

SEE ALSO:

Bookmark: 21 Tactics to Increase Blog Traffic

Online Code Formatter for blogger

Source code(Paste your source code below then click Format button):

Formatted Code:

Preview:

Blogger: Missing Quick Edit Icon in the country specific URL

SEE ALSO:

Blogger: Rename a label

SEE ALSO:

Remove the line number from SyntaxHighlighter

Code syntax highlighting in blogger

SEE ALSO:

Code Formatting for Blogger/blogspot.com

HOWTO: blogger sitemap

Enable Google Analytics for your blogger blog