Make Code Snippets Look Awesome With Google Code Prettify Syntax Highlighter

Add Comment

Everyone wants their blog/website to look unique as well as stylish. Even while displaying code snippets also you would prefer to stay different which matches to your site theme and look elegant. Lots of methods are there to avail and one of them is Google Code Prettify which make your code look more pretty, easy to use and install.

Google+Code+Prettify

Image Credits : Karolo

Some Features Of GCP :

  • ◾Works on HTML pages.
  • ◾Works even if code contains embedded links, line numbers, etc..
  • ◾Simple API.
  • ◾Does not block page from loading while running.
  • ◾Customizable styles.
  • ◾Supports all C-like, Bash-like, and XML-like languages. No need to specify the language
  • ◾Extensible language handlers for other languages. You can specify the language.
  • ◾Widely used with good cross-browser support. Powers code.google.com and stackoverflow.com

Adding Google Code Prettify To Blogger :

Before doing anything Backup your Template first.

1) Go to blogger template by clicking on Template and then on Edit HTML

Blogger+Template

Now search (Ctrl+F) for </head> tag in the template and copy the below code and paste it above </head> tag.

<!-- Prettify SheToldMe--> 
<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' 
rel='stylesheet' type='text/css'/>
<script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' 
type='text/javascript'/>

2) Again search for <body> tag and replace it with below line of code

<body onload='prettyPrint()'>

3) That's it. Now whenever you want to add some code in your post, switch to Edit HTML mode, rather than Compose, and add

HTML-Mode

<pre class="prettyprint">
// YOUR CODE HERE
</pre>

means you need put your code in pre tag and use the prettyprint class

Note : * Do not forget to Encode your code here to convert your raw HTML into escaped characters.

You can even tell the pretty print about the language you are using e.g.

<pre class="prettyprint lang-java">
// YOUR CODE HERE
</pre>

A list of all the supported languages and how it works can be found in their READ ME File

Customizing Google Code Prettify To Look More Pretty :

If you are not happy with the default style or theme then don't worry, you can get more themes to choose from the below Gallery.

Google-Code-Prettify-Theme-Default

By default you will be using this prettify style only.

Google-Code-Prettify-Theme-Desert Google-Code-Prettify-Theme-Sunburst Google-Code-Prettify-Theme-Sons-Of-Obsidian Google-Code-Prettify-Theme-Doxy

Click on the style which suit your need and use them by Hosting at your own server.

Must Read >> Host Your External Files In Drop box For Free.

We Still got more themes to choose. Thanks to JMBlog for providing below styles. Click on the style which fits your need and download them.

Google-Code-Prettify-Theme-Vibrant-Ink-From-JMBlog Google-Code-Prettify-Theme-Git-Hub-From-JMBlog Google-Code-Prettify-Theme-Tomorrow-Night-From-JMBlog Google-Code-Prettify-Theme-Tomorrow-From-JMBlog Google-Code-Prettify-Theme-Tomorrow-Night-Eighties-From-JMBlog Google-Code-Prettify-Theme-Tomorrow-Night-Blue-From-JMBlog Google-Code-Prettify-Theme-Tomorrow-Night-Bright-From-JMBlog Google-Code-Prettify-Theme-Hemisu-Dark-From-JMBlog Google-Code-Prettify-Theme-Hemisu-Light-From-JMBlog

After downloading and hosting the CSS file at your server. Replace the default style which we used at the starting of the post with your new style as shown in below code.

<link href='YOUR UPLOADED CSS URL' rel='stylesheet' type='text/css'/>

*Replace 'YOUR UPLOADED CSS URL' with your hosted URL.

Final Words :
Hope this article is simple and clear to understand, let me know if I'm unclear or missing any points. Getting Started section is there if you want to explore more. Do tell us which Syntax Highlighter you are familiar or presently using. If you implemented this successfully using this tutorial in your site/blog then thank us by dropping your comments.

How To Backup / Restore / Upload Blogger Template In New Interface

Add Comment

Backup+Restore+Blogger+Template+In+New+Interface

Image Courtesy : Stuart Miles/FreeDigitalPhotos.net

Whenever you want to play with your template to make any new changes then its mandatory and very important to backup your template.


Why should I Backup ?

What happens when you

  Ran in to an error while editing the blogger template.

  Uploaded a new template to test but forgot to backup (seriously! i faced this once).

  Thought to change the styles but on Ctrl+Z also unable to revert back.


Like this so many silly things we come across. So to avoid all those minute mistakes it is better to Backup before or after our new changes.


How To Backup Your Blogger Template :

Step (1) Go to Blogger Dashboard and Click On Template Button.

Blogger+Layout


Step (2) Click on 'Backup/Restore' button which will be on top right corner.

Backup+Restore+Settings


Step (3) Click on 'Download Full Template' button and Save the .xml file.

Backup-Restore-Template

Now you can alter your Blogger template and if you come across with any problems then just revert back to your old saved template which is handy.


How To Restore Your Blogger Template :

Repeat Step (1) and (2)


Step (4) Click on ‘Choose File’ button. Then browse for the backup file which is on our computer, select it and Click on ‘Upload’ button.


How To Upload New Blogger Template :

Repeat Step (1) and (2)


Step (4) Click on ‘Choose File’ button. Then browse for the New Blogger Template file which you downloaded, select it and Click on ‘Upload’ button.


Final Words :

Hope this simple tutorial is clear enough. Feel free to ask if you face any issues, do subscribe and visit us for more topics.

Host Your External Files In Dropbox For Free

Add Comment

Drop box is a free cloud storage service that lets you host your files also. If you hadn't registered yet, then visit Drop box to claim your 2 GB of space for free, moreover you can upgrade your space up to 16 GB without paying a single penny with your referrals, where they are offering 500 MB per referral to both sides. Means if you refer any person then you and the person you referred will get 500 MB of free space.You can host your external files like CSS, JavaScript ..etc.


Dropbox

Why Should I Host ?


If you open your Blogger template by clicking on Template and then on Edit HTML, you will find some external CSS or JavaScript files which are hosted on some other servers.


Blogger Template


What happens if

those private servers become down or offline.
user removed those files.
bandwidth exceeds… etc..

lot of questions will rise like this and moreover our control will not be there on those files. So to avoid all those hectic issues we need to place them at our own free server which is reputed and also got 99% uptime.


So, Is It Unlimited !


No, its not unlimited but you can get lot of it. Here is the catch, for Free accounts, the total amount of traffic that all of your links together can generate is 20 GB per day. For Pro and Business accounts, the limit is 200 GB per day. Visit here for more info. If your happy with this lets move ahead and learn how to host.


Hosting Your External Files :


1. Login to your Drop box and click on Public Folder.


Dropbox+Public+Folder

2. Right Click on empty space or just beside Public folder name you will find Upload button, Click on it.


Dropbox+Upload+Button | Dropbox+Upload+Button


3. Click on Choose files and select the file you want to upload.


Dropbox+Uploader

4. After upload is complete Click on Done and Right Click on the uploaded file.

Dropbox Upload Done


Dropbox Upload Finish


5. Click in Copy public link to grab your public link.


Dropbox+Copy+Public+Link

6. Copy the link and you can use it anywhere like below example

<link href='https://dl.dropboxusercontent.com/u/50682415/SheToldMeBloggerTheme.css' rel='stylesheet' type='text/css'/>
*My Uploaded CSS


<link href='YOUR DROPBOX COPIED LINK HERE' rel='stylesheet' type='text/css'/>
*Use this for your uploaded CSS


<script src='YOUR DROPBOX COPIED LINK HERE' type='text/javascript'/>
*Use this for for your uploaded JavaScript file


7.You can even shorten your links and use them as given below

Dropbox+Shorten+Link

<link href='https://db.tt/b71MpShJ' rel='stylesheet' type='text/css'/>


Final Words :


Hope, I'm clear with this small tutorial in hosting the files. Feel free to ask if you face any hiccups. See you with other tip. Adios!

White Photos Uploading To Blogger and Google+ Are Uploading With Grey And Faded Backgrounds

Add Comment

White Photos Uploading To Blogger and Google  Are Uploading With Grey And Faded Backgrounds

 

Recently while creating a post on adding disqus comments widget to blogger , I faced a problem with the photos which are in white background are uploaded as grey and faded. If you have uploaded photos recently via Blogger or Google+ then you've probably faced the same problem with white backgrounds.

 

Example:

Original Photo

Uploaded Photo

From the above example you can clearly catch the difference.But don’t worry here is a quick and pretty simple fix for the issue.Recently Google+ integrated a photo enhancement feature called Auto Enhance and is turned on by default and we need to turned off. Thanks to Lo Sauer for the solution.

 

To turn it off go to your Google+ account, then go to your account settings, then got to Google+ Settings page and scroll down for Auto Enhance and set it to Off.

Now try again uploading and voila the issue is fixed.

Hope you found the tutorial useful. Keep visiting.

 

Faded Rose Image Credits : Decadence Grief

Adding Disqus Comments Widget To Blogger

1 Comment

Disqus Logo

A good-looking commenting system is a must for every blogger as it can build communication between all users and lot of traffic increased through this. Even through this platform we can gain some back links too.

 

Previously we discussed about adding Google plus comments widget to blogger which is limited to only Google users but this time I came up with another commenting system called Disqus which got full of advantages.

 

Disqus is a quite neat commenting system which accepts multiple logins to register like Facebook, Twitter, Google else you can register manually for your desired username. Moreover we can integrate this in to Blogger without any hectic codes. This can be integrated in almost all kind of websites/blogs. Many popular sites are already using this commenting system as it got bundle of of good features.

 

Some Salient Features Of Disqus :

  • Great Design
  • Social Integration 
  • Real Time Commenting
  • Comment Moderation
  • Mobile Commenting 
  • Spam Controller
  • Threaded Commenting System
  • Star and Reactions In Comments
  • Thumbs Up & Thumbs Down
  • Edit & Delete Comment and many more...

Integrating Disqus with Blogger: Head over to Disqus and register yourself a free account by filling all the details and move to the next step. Disqus Email Registration

 

In the next step fill in your site details to create a unique profile for your site and click on Finish Registration. Disqus Site Registration

 

In this step it will ask you to select a Platform. Just Select 'Blogger' and proceed to the next step. Disqus Blogger Selection

 

After selecting 'Blogger' as your platform, you will be redirected to a page which consists of two main steps

  1. adding commenting system widget to your blog
  2. importing existing comments from blogger to Disqus.
Disqus Setup Instructions

 

Lets go ahead with step1 first and later we will complete step 2.

 

Step#1 >> Adding Widget : Click on Add "Your Site Name" to my blogger site and a new window will pop out which will allow you to install the widget in our blog.

Disqus Adding Widget

From the list select your blog and press the blue "Add Widget" button as shown in above screenshot.

 

It should install Disqus commenting system in your blog/site and should show as below snapshot.

Disqus Widget For Blogger

If you guys still following me and successfully installed the widget, lets move ahead and import the comments.

 

Step#2 >> Importing Comments: In order to import all your old comments just go to Discussions Tab and select Import Tab. Disqus Importing Comments

 

In this Import menu we should again select Blogger tab where you can find a button to "Import comments from Blogger". Just click on that so that it imports all those comments which are previously published on our site. After clicking the "Import comments from Blogger" button Blogger will ask your permission to grant access. Just click "Grant Access" button to give the permission.

Disqus Grant Access For Comments

 

After granting the permission you will be again redirected to Imports page and able to see a new option to "Choose a blog to import from" which will allow you to import comments from your blog. From the list select your blog and click on "Import" button.

Disqus Import Blogger Comments

Now you will see the message that your import has been successfully uploaded and queued.

 

Conclusion :

Cheers! Now Disqus is successfully integrated into your Blogger. All the old comments will be processed and will be available on your site once the Disqus team finish their review.I think it’s a great commenting system and one more thing which I forgot to tell you that it allows us to generate a decent amount of revenue by showing some advertisements. You can find that in Analytics tab.

 

I hope you've enjoyed this tutorial and if your struck at any point or got any question then feel free to ask me from below commenting system.

Gracias and Adios

Dragon Fly Eating A Bug [Complete & Rare Video]

Add Comment

Dragon Fly Eating A Bug [Complete & Rare Video]

Here is the complete video of Dragon Fly Eating A Bug or an Insect which is bit big in size.

This video has been shot on Panasonic Lumix DMC-LZ5 at Hyderabad.

When I'm shooting this Fly it dint even moved or not even cared me until it ate that Bug completely.

I'm very close to this one while filming and not even kept a Zoom