How to disable Blogger's lightbox effect?

Just last month, Blogger announced a lightbox (slideshow) effect for images without consulting bloggers, eventually causing an uproar. The uproar prompted Blogger to remove this feature almost immediately.

Now, this lightbox feature is back and enabled by default. However, it is now possible to disable it from Settings.

Blogger Settings

I have disabled it. Have you?

Blogger's Slideshow Feature

Blogger added a feature that makes it easier to view multiple photos. Photos when clicked will open out as a light-box like overlay and are able to be viewed in a slideshow. Click on any of the following photos to test it out yourself.

Supposedly long image but unable to view full size :(

Smaller image and stretched bigger in light box :)

This feature is enabled by default and can't be disabled from the settings page. In my opinion, it did make viewing of multiple photos easier but then it may be counter productive for very long images in terms of height e.g. infographic, since such images will be limited to screen height. The only method to get away with it to see full sized image is to open the image in a new window yourself.

I wish there is an option to disable it so Blogger can choose to open up full sized image in a new window instead.

Blogger’s fresh new look - Makeover

Blogger has now got a makeover, graduating from Blogger In Draft after a few months of trial runs.

From Google's official blog, the new Blogger was rewritten for a whole brand new experience, matching closer to the Google’s current aesthetic. On top of that, it comes with an integrated dashboard for monitoring site traffic.

We’re working hard to fundamentally revamp and improve the Blogger experience from the ground up, and we hope you enjoy the first in a series of major updates that are on their way in the coming months.

Starting today, Bloggers will be able to choose to turn on and opt in to the new UI, from a pop-up announcement on your dashboard with instructions on how to get started. For more information on what's changed, check out this Blogger Help Center page.

» Blogger’s fresh new look | Official Google Blog

Google Scribe in Blogger

With the shutdown of Google Lab project, there is little doubt that some innovative and useful products will either be shot down or hopefully graduate to become permanent product, services or features of existing Google products.

One such lab project is Google Scribe.

Google Scribe is graduating from Google Labs, and can be found in Blogger in Draft. Learn more in this blog post. You'll also find a number of techniques and lessons from your feedback and use of Google Scribe showing up in other Google products, like Google Docs. Thank You!!

At the moment, Google Scribe is integrated into Blogger in Draft as a Blogger feature. To turn on Google Scribe, simply click on the pencil icon.

After Google Scribe is turned on, suggestions will appear in gray as you type. To accept, simply hit the spacebar or by typing a punctuation mark, such as a comma, period or question mark.

Google Sribe in action

If you prefer to see a list of suggestions instead, select "Show Multiple Suggestions" from the drop-down menu next to the pencil icon.

Google Scribe in action in (multiple suggestions)

Here are some keyboard shortcuts you may find handy. If you use a Mac, you can use the shortcuts below by replacing Ctrl with Command key (or 'Apple' key)

• Ctrl-J to enable and disable Scribe
• Ctrl-Shift-J to select and deselect multiple suggestions
• ESC to temporarily remove a suggestion
• TAB to restore a suggestion

» Introducing Google Scribe in Blogger | Blogger in Draft

Blogger in Draft - Change Favicon of Blog

It is now possible to change Favicon of a Blogspot's blog, only if the blog has opted for Blogger in Draft.

To change,

1. Go to Design from the Blogger in Draft Dashboard.
   
   
2. Click on the Edit link beside Favicon.
   
   
   
   
   
3. Upload an icon file (*.ico).

Blogger new HTML5 views in a whole new perspective

Blogger added five dynamic templates that transform blogs into interactive apps. To try these views on your own blog, simply add "/view" to the end of the blog URL—for example, http://hongjun.blogspot.com/view.

These new views use the latest in web technology, including AJAX, HTML5 and CSS3, to deliver a host of benefits to you and your readers:

• Infinite scrolling: read more posts without having to reload or click to a second page
• New layouts: different views suited to different types of blogs
• Speed: download images as you view them, not all at once in advance
• Interactivity: there are now more ways to experience and engage with blog content

Click on any of these links to take the new dynamic views for a spin on the five new templates: Flipcard, Mosaic, Sidebar, Snapshot and Timeslide.

Fresh new perspectives for your blog [via]

What's new with Blogger

What's new with Blogger [via]

Official Blogger Android app

Finally! Blogger is playing catch up with times by releasing a mobile app for Android. With the app, blogging on-the-go is a possibility.

However, Blogger's Android app is really basic and does not offer too many features. Editing of existing post is not possible. The editor offered only lets you enter text and include one or more photos. You can add some labels and geotag your posts, taking advantage of your phone's GPS. There is an option to save a post as a draft, but you won't be able to publish it from a computer because it's only saved locally.

If you are already on the new Android marketplace (market.android.com), just click on https://market.android.com/details?id=com.google.android.apps.blogger and then choose install would invoke an automatic installation on your Android phone. In other words, QR Code is not required anymore (but I shall provide it as below anyway).

QR Code - Blogger mobile app for Android

Android Market link: Blogger's app.

Introducing Blogger Android App [via]

How to add Facebook Like button on Blogger Blogspot?

How do I add Facebook Like button on Blogger Blogspot?

Facebook Like button

Changing Blogspot Template to add Facebook Like

1. Login to your Blogspot account
   
   
2. Go to Design or Layout mode
   
   
3. Proceed to click on Edit HTML link
   
   
4. In Edit Template mode, check the Expand Widget Templates checkbox to show all hidden codes
   
   
   
   
5. Search and look for <data:post.body/>
   
   
6. Insert the following code snippet right after <data:post.body/>
   

   <b:if cond='data:blog.pageType == "item"'>
     <iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>
   </b:if>

7. Click on Save Template button to commit changes
   
   

Blogger now has mobile templates

Given more are now surfing using smartphones, it is logical to add a mobile interface for Blogger and to create mobile versions for Blogger's templates. Mobile Templates is available as opt-in functionality on Blogger in Draft. Mobile templates will re-format your blogs for smartphones to enhance your readers’ viewing experience.

In order to activate mobile templates, navigate to Blogger in Draft, then go to Dashboard > Settings > Email & Mobile tab, enable the mobile template option and then save settings.

To test out how a blog will look like on mobile, just add ?m=1 to the URL of any Blogger blog, and you'll get a simplified version that works well on an iPhone, Android phone and probably other phones that use a browser based on WebKit. Here's an example: http://hongjun.blogspot.com/?m=1.

A blog with the mobile template enabled will automatically be showing the mobile version on a mobile device.

New mobile templates for reading on the go [via]

Blogger integrates with Amazon Associates

Are you using Blogger? Do you link to Amazon in your blog posts? Now, Blogger has made integration with Amazon Associates easier, and can even earn you some money!

Blogger integrates with Amazon Associates [via]

How to Add a Google Gadget to Your Blog?

Blogger Help has posted a video on YouTube to demonstrate adding of Google Gadgets onto your Blogger blog.

Integration Between Google Reader and Blogger Who's Following You Feature Buggy

The integration between Google Reader and Blogger Who's Following You feature is very very buggy. "Followed" blogs displayed on Dashboard do not tally with what I see after I click on "Manage" button. It seems to be more relevant if you previously added non-blogspot blogs.

I have reported to Google and see if they can do anything.

Blogger Who's Following You Feature Follows Everyone

Just a couple of days ago, I realized Blogger does not allow you to "follow" blogs other than those from Blogspot. Now, I have successfully managed to add blogs from WordPress, Live Journal and Friendster. As long as they are RSS feed enabled, it shouldn't be a problem.

Blogger Adds Who's Following You Feature

Google's Blogger has recently rolled out a new feature to show who are followers of your blog. After doing some experiment on this new feature, it seems like only blogs from Blogger and those with Blogs Feed enabled can be "followed".

Show off your Followers
http://buzz.blogger.com/2008/08/show-off-your-followers.html

How to Insert Code Snippet on Blogger

I have received a couple of emails for advice on "How to Insert Code Snippet On Blogger". I thought it would be good if I can share this "How-To" with you.

If you were to do a Google search with the right keyword, you should be able to find some gems, however, there is a need to tweak and make sure they work on Blogger.

For Blogger, there are 3 popular methods - Google SyntaxHighlighter, Google Prettify, code snippet plugin for Windows Live Writer. I have tried all 3 but I chose SyntaxHighlighter in the end. The main reason for my choice is its ability to copy code snippet easily without ending up copying line numbers when line number feature is on. Prettify is good but it does not have line number feature. Plugin for Windows Live Writer is not preferred because line number is copied together with the code snippet. This is not user friendly at all. Furthermore, Windows Live Writer is required to be installed.

[ Google SyntaxHighlighter ]

Homepage: http://code.google.com/p/syntaxhighlighter/
Usage: http://code.google.com/p/syntaxhighlighter/wiki/Usage

You will need to first download SyntaxHighlighter files. At this point in time, the version to download is 1.5.1. The package comes compressed in a RAR file. To extract the RAR file, you will need WinRAR. You should require only the js files and css file in Scripts and Styles folder respectively.

The next thing you need to have is a web hosting server to host the required js and css files. For me, I uses Google Page Creator. Upload all 13 js files and the only 1 cs file onto your web hosting server. You may choose to place them all in the same directory. You should get the absolute URL for all the files e.g. http://lohhonch.googlepages.com/SyntaxHighlighter.css will be for my css file. You will need these URL paths later.

You may now insert the necessary codes onto your Blogger template to get SyntaxHighlighter to work. From your Blogger Dashboard, choose to manage Layout. We shall keep our hands dirty by editing the HTML source of your template. With Edit HTML selected, make sure Expand Widget Templates is checked so no HTML is hidden and are all shown.

Just before </body>, add the below code snippet.

<!-- START OF SyntaxHighlighter -->
<link href='http://lohhonch.googlepages.com/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script src='http://lohhonch.googlepages.com/shCore.js' type='text/javascript'/>
<script src='http://lohhonch.googlepages.com/shBrushCpp.js' type='text/javascript'/>
<script src='http://lohhonch.googlepages.com/shBrushCSharp.js' type='text/javascript'/>
<script src='http://lohhonch.googlepages.com/shBrushCss.js' type='text/javascript'/>
<script src='http://lohhonch.googlepages.com/shBrushDelphi.js' type='text/javascript'/>
<script src='http://lohhonch.googlepages.com/shBrushJava.js' type='text/javascript'/>
<script src='http://lohhonch.googlepages.com/shBrushJScript.js' type='text/javascript'/>
<script src='http://lohhonch.googlepages.com/shBrushPhp.js' type='text/javascript'/>
<script src='http://lohhonch.googlepages.com/shBrushPython.js' type='text/javascript'/>
<script src='http://lohhonch.googlepages.com/shBrushRuby.js' type='text/javascript'/>
<script src='http://lohhonch.googlepages.com/shBrushSql.js' type='text/javascript'/>
<script src='http://lohhonch.googlepages.com/shBrushVb.js' type='text/javascript'/>
<script src='http://lohhonch.googlepages.com/shBrushXml.js' type='text/javascript'/>
 
<script class='javascript'>
//<![CDATA[
function FindTagsByName(container, name, Tag)
{
    var elements = document.getElementsByTagName(Tag);
    for (var i = 0; i < elements.length; i++)
    {
        if (elements[i].getAttribute("name") == name)
        {
            container.push(elements[i]);
        }
    }
}
 
var elements = [];
FindTagsByName(elements, "code", "pre");
FindTagsByName(elements, "code", "textarea");
 
for(var i=0; i < elements.length; i++) {
    if(elements[i].nodeName.toUpperCase() == "TEXTAREA") {
        var childNode = elements[i].childNodes[0];
        var newNode = document.createTextNode(childNode.nodeValue.replace(/<br\s*\/?>/gi,'\n'));
        elements[i].replaceChild(newNode, childNode);
    }
    else if(elements[i].nodeName.toUpperCase() == "PRE") {
        brs = elements[i].getElementsByTagName("br");
        for(var j = 0, brLength = brs.length; j < brLength; j++) {
            var newNode = document.createTextNode("\n");
            elements[i].replaceChild(newNode, brs[0]);
        }
    }
}
 
//clipboard does not work well, no line breaks
//dp.SyntaxHighlighter.ClipboardSwf = "http://lohhonch.googlepages.com/clipboard.swf";
dp.SyntaxHighlighter.HighlightAll("code");
//]]>
</script>
<!-- END OF SyntaxHighlighter -->

Please note that you are to replace all occurrences of http://lohhonch.googlepages.com/ above with your own website. Once all are done, you will need to save to make sure changes are committed.

To insert a code snippet, read http://code.google.com/p/syntaxhighlighter/wiki/Usage. You are DONE!

[ Google Prettify ]

Homepage: http://code.google.com/p/google-code-prettify/
Usage: http://google-code-prettify.googlecode.com/svn/trunk/README.html

Similar to SyntaxHighlighter, you will need to download Prettify package. At this point in time, the latest release is 14 Jul 2008 version. Download and extract prettify-14-Jul-2008.zip. In total, there is 1 js file and 1 css file. Upload them to your own web hosting server and then follow instructions from http://google-code-prettify.googlecode.com/svn/trunk/README.html on integration and usage.

[ Code Snippet Plugin for Windows Live Writer ]

Homepage: http://lvildosola.blogspot.com/2007/02/code-snippet-plugin-for-windows-live.html

I shall not elaborate much on this method since I am not in favour of it. However, the instructions on the homepage itself is quite comprehensive and there should not be a problem following them.

I hope this article is helpful enough to answer "How to Insert Code Snippet on Blogger".

Will Post "How to Insert Code Snippet On Blogger" By This Weekend

I have received a couple of emails for advice on "How to Insert Code Snippet On Blogger". I shall be making a post on this topic by this weekend. Techniques discussed will also apply on other blogging sites like LiveJournal and WordPress and even on your own website hosted by yourself.

Google Syntax Highlighter

I was doing some experimenting on some free Syntax Highlighter available on the Internet and found some interesting ones.

Currently, I am using a Code Snippet plugin for Windows Live Writer. All was working pretty fine except the plugin is not very friendly when showing of line numbers is enabled. Attempting to copy published source code by selecting text will end up line numbers being selected as well.

A further research brings me to SyntaxHighlighter on Google Code. This tool is purely in JavaScript and hence does not require the use of any third-party software or any servers to be installed. I have decided to give this tool a try and see if it integrates well with Blogger.

How to Add Blogroll to Blogger?

Blogger In Draft has just released a feature for trial to add a blogroll to Blogger. A blogroll is a collection or list of links to other blogs and websites commonly featured on blogs.

To access Blogger In Draft, you must log in to http://draft.blogger.com/

http://bloggerindraft.blogspot.com/2008/02/new-feature-blog-list.html

Blogger on the Go

Blogger on to Go allows blogging by writing an email to an email address.

Post from anywhere!
When you send text or photos from your mobile device to go@blogger.com they're automatically posted to your new blog.

How it works

• Send an MMS or email to go@blogger.com from your phone
• We'll reply with the address of your new mobile blog, plus a claim code
• Post to your new mobile blog, or use the claim code to link your phone to a different blog

Cons

• Cannot attach a tag / label
• Cannot post HTML tags

http://go.blogger.com/