How to Add and Use SyntaxHighlighter 3 for Blogger

The latest version of Syntax Hihglighter has been released and there are quite a few changes in the way things work now. This version was named Syntax Hihglighter 3.0.83.


NEW FEATURES IN 3.0.83



Dynamic Brush Loading

• SyntaxHighlighter comes with almost 30 brushes out of the box. One of the most requested feature has been the ability to dynamically load them without having to load them all on the same page.

No Flash Copy to Clipboard

• Earlier, Flash was being used to copy the code to clipboard. This has now been removed and a simpler & better way to do this has been implemented. Also, the user can now simply double-click anywhere in the code to select it and then use the standard CTRL+C to copy it.

Code Selection

• This is also now part of the SyntaxHighlighter as it allows you to select the code with your mouse and then copy and paste it without straight into your code without any additional effort.

Add Title

• Now you can add a title to the code block by title="title name" parameter to the <pre> tag.
• More under the hood
• More improvements and changes under the hood like better CSS support, easier integration with CommonJS & node.js, etc.
• Earlier, Flash was being used to copy the code to clipboard. This has now been removed and a simpler & better way to do this has been implemented. Also, the user can now simply double-click anywhere in the code to select it and then use the standard CTRL+C to copy it.

Code Selection

• This is also now part of the SyntaxHighlighter as it allows you to select the code with your mouse and then copy and paste it without straight into your code without any additional effort.

Add Title

• Now you can add a title to the code block by title="title name" parameter to the <pre> tag.
• More under the hood
• More improvements and changes under the hood like better CSS support, easier integration with CommonJS & node.js, etc.

INSTALLATION

• Before you could get in to the process, I recommend you to back up your template.
• Navigate to Dashboard > Design > Edit HTML
• Find </head> 
• Copy below code and paste it just before the </head> tag

<!-- Syntax Highlighter 3.0.83 START -->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script language='javascript' type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
<!-- Syntax Highlighter 3.0.83 END -->

• Save your template.

NOTE:

• Whenever you have to write some codes in your posts, click on "Edit HTML" tab of your post editor and write the codes between the following tags

<pre class="brush: js">
Your code here
</pre>

• To add title in your code add title="Title Here" it's look like the code below:

<pre class="brush: js" title="Title Here">
Your code here
</pre>Your code here</pre>

For an example :

<pre class="brush: js" title="This is a title, check it out!">
<b:includable id='comments' var='post'>
  <div class='comments' id='comments'>
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>
      <h4>
        <b:if cond='data:post.numComments == 1'>
          1 <data:commentLabel/>:
        <b:else/>
          <data:post.numComments/> <data:commentLabelPlural/>:
        </b:if>
      </h4>
</pre>

Will display like the below image on your blog post.

 I hope you were able to implement this in your blog.

Pls do share this post .

Enjoy :)

Follow @shipsocker

Read More

Optimize Your Headings For more Traffic

What are Heading Tags?
H means "Heading" tags. They starts from H1 to H6 in descending order of importance. The words written in H1 tags are most important words in our whole blog and the search robots give first search priority to these H1 Tags. H2 tag are less important than H1 and so on to H6. These tags plays very important role in our SEO. They are used to tell the search robots about the most important words in our blog which should be crawl first. Headline tags are also used to organize our posts. They are very useful for our posts visibility in search engines.

How To Use Headline Tags In Your Blog?
As already said, H1 tag is the most important tag in our whole blog, so it should be used only once per page of your blog to avoid duplicate contenting. In every blog (including Blogger), H1 tags are used as Blog's title. Search robots also consider the words written in H1 tag as your blog's title. So the most important thing after Blog's title is your Posts Title which should be written under H2 tags. But, I noticed that most of the Bloggers are using H3 tag as post title which is tremendously reducing the post visibility in search engines.

Increase Traffic : 
Convert Your Posts From H3 to H2 Tag

• Go to Blogger Dashboard >> Your Blog >> Template.
• Backup your template.
• Now click Edit HTML and check the box of expand widget template.
• Search for h3.post-title.
• Now replace it with h2.post-title. (Replace all h3.post-title in your template).
• Now find the following code:

 <h3><data:title/></h3>

•  And replace it with the following:

 <h2><data:title/></h2>

 Now you've successfully completed the job!

Follow @shipsocker

Read More

Attractive " Table Of Contents " Page

It's very important for a publisher To insert Sitemap (Table of Contents) in his blog  to make it look more professional. Basically Sitemap (Table of contents) is a place in your blog where all of your post are arranged according to their type.This is the reason why today we will going to Insert a Table of Contents in Blogger.

We have designed a table of contents for blogger which will update automatically so you don't need to just edit it every time when you publish a new post.If you  publish a new post on your blog it will automatically added  to your Table of Contents Page so it really saves lot of time.This Table of Contents widget will display all of your post well arranged under their specific categories (LABELS). 

This widget is designed and optimized with CSS so it looks really attractive and has some Jquery which do attract your eyes.So let us start our fingers rolling over the tutorial.

But first I know you would love to see the preview of the widget,so first see the widget which we are going to apply on our blog

Live Demo >>

( Its My other Blog ) 

Adding a Table Of Content in Blogger:

• To insert an Attractive Table Of Contents (Sitemap) in Blogger Follow these Steps
• Go To Blogger >> Template >> Edit HTML >> Proceed 
• Now search For  ]]></b:skin> in Your Template with (CTRL+F)
• when you find  ]]></b:skin> just above it  place the following code

/*--------Blogger TricksZz-----*/ .judul-label{ background-color:#E5ECF9; font-weight:bold; line-height:1.4em; margin-bottom:5px; overflow:hidden; white-space:nowrap; vertical-align: baseline; margin: 0 2px; outline: none; cursor: pointer; text-decoration: none; font: 14px/100% Arial, Helvetica, sans-serif; padding: .5em 2em .55em; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 1px 1px 4px #AAAAAA; box-shadow: 0 1px 2px rgba(0,0,0,.2); color: #e9e9e9; border: 2px solid white !important; background: #6e6e6e; background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757)); background: -moz-linear-gradient(top,  #888,  #575757); filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757'); } .data-list{ line-height:1.5em; margin-left:5px; margin-right:5px; padding-left:15px; padding-right:5px; white-space:nowrap; text-align:left; font-family:"Arial",sans-serif; font-size:12px; } .list-ganjil{ background-color:#F6F6F6; } .headactive{     color: #fef4e9;     border: 2px solid white !important;     background: #1C8DFF;     background: -webkit-gradient(linear, left top, left bottom, from(#9dc2e7), to(#438cd2));     background: -moz-linear-gradient(top,  #9dc2e7,  #438cd2);     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc2e7', endColorstr='#438cd2'); }

•  Now save the template by pressing Save Template button 
• Now we will create a new page for our Table of contents Remember:we will create a new page not post.To create a new page go to Blogger >> Pages >> New Page >> Blank Page 
• Now Give title to your page i.e "XYZ Table Of Contents" and now under EDIT HTML tab (button) paste the following code
  
  
  

  <script src="http://nurulimaminfo.googlecode.com/files/daftarisiv2-pack.js"></script> <script src="http://www.bloggertrickszz.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script> <script type="text/javascript">var accToc=true; </script> <script src="http://deroc.googlecode.com/files/accordion-pack.js" type="text/javascript"></script>

  Now after pasting the code above look for  http://www.bloggertrickszz.blogspot.com and replace it with your blog URL and Publish the page now go and view your Amazing Table of Contents with Drop down style. 

Follow @shipsocker

Read More

Automatic Read More Hack For Blogger

By default Blogger shows all the contents from your post on your blog homepage. Having everything on your homepage will make your blog homepage load slower. This might result in getting lower page views as your readers can read all your posts on a single page. So, it’s better to give a summary of your posts on your blog’s homepage and then add a ‘read more’ link below that post summary.

"Automatic Read More Hack For Blogger" i.e an expandable post hack for blogger with thumbnail of image used in blogger posts. It automatically creates a teaser instead of showing the entire post on the front page of your blog. If your readers like a post, then they can click the ‘read more’ link to view the full post.


How To Install Automatic Read More Hack To Blogger?

1. Log in to Blogger, go to Template-->Edit HTML
2. Tick the "Expand Widget Templates" checkbox.
3. Search for </head> in your blog HTML
4. Copy and paste the following code immediately before/above it.

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

 Note : You can change the numeric numbers according to your need

summary_noimg = 430; is post cut height without image
summary_img = 340; is post cut height with image
img_thumb_height = 100; is thumbnail image height
img_thumb_width = 120; is thumbnail image width




Next find (CTRL+F) <data:post.body/> 
Replace it with below codes.below.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more "<data:post.title/>"</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>

• Save the template. 

Live Demo

I hope you liked the post.Dont forget to share this with your friends

Follow @shipsocker

Read More

Animated CSS3 Bubble Buttons For Blogger

Today we will add some cool CSS3 bubble buttons to blogger blog which are designed byTutorialZine.These bubble buttons are made with pure CSS3 and on mouse hover the bubble star shaking and this effect makes these button more beautiful.This button is available in four color themes and three sizes so that you can add any button of any size just by just changing the class name of button.

Live Demo

How To Add Animated CSS3 Bubble Buttons To Blogger

For easy and better inderstanding here I am dividing this article in two parts.

1. CSS Part
2. HTML Part

1. CSS Part

1. Go to Blogger Dashboard > Template
2. As always take a backup of your template
3. Search for below code in your template

</b:skin>

 The code is too big to be displayed here. Go to the below link and copy the code from there. 

• Go here

Add the copied code  above </b:skin> 

Now we have integrated the CSS part in the template let's see how to use them.

2. HTML Part


Here I am listing button's HTML part according to their sizes.First choose size of button then choose color of button.

1.HTML For Big Button (Choose anyone according to button color)

<a href="LINK HERE" class="button big blue">TEXT HERE</a>
<a href="LINK HERE" class="button big green">TEXT HERE</a>
<a href="LINK HERE" class="button big orange">TEXT HERE</a>
<a href="LINK HERE" class="button big gray">TEXT HERE</a>

2.HTML For Medium Button (Choose anyone according to button color)

<a href="LINK HERE" class="button blue medium">TEXT HERE</a>
<a href="LINK HERE" class="button green medium">TEXT HERE</a>
<a href="LINK HERE" class="button orange medium">TEXT HERE</a>
<a href="LINK HERE" class="button gray medium">TEXT HERE</a>

3.HTML For Small Button (Choose anyone according to button color)

<a href="LINK HERE" class="button small blue">TEXT HERE</a>
<a href="LINK HERE" class="button small green">TEXT HERE</a>
<a href="LINK HERE" class="button small orange">TEXT HERE</a>
<a href="LINK HERE" class="button small gray">TEXT HERE</a>

4.HTML For Small Rounded Buttons (Choose anyone according to button color)

<a href="LINK HERE" class="button small blue rounded">TEXT HERE</a>
<a href="LINK HERE" class="button small green rounded">TEXT HERE</a>
<a href="LINK HERE" class="button small orange rounded">TEXT HERE</a>
<a href="LINK HERE" class="button small gray rounded">TEXT HERE</a>

Now replace "LINK HERE" with the link which you want to add it to button and replace "TEXT HERE" with the text which you want to appear on your button.

That's all.I hope you will like these button.

Follow @shipsocker

Read More

Solution to Missing Facebook Buttons

Facebook is the father of social networking.Promoting your blogs through facebook is a very good tactic . It can make your blog popular in days !! 

Implementing facebook buttons on your blog is one out of the many ways of doing so.
But many bloggers are facing a problem . These bloggers complain that the facebook buttons do not show up.
I guess you are also one of them and want this problem solved as soon as possible , don't you ?


So to get rid of this problem we will be adding a small code after the <body> tag. Don't worry complete instructions are given below .


Instructions :

1.  Login to blogger > Template > Edit Html 
2. Search for

</body>

1. Paste the following code below </body>

<!--Start FB Code http://bloggertrickszz.blogspot.com/--><div id='fb-root'/><script>(function() {var e = document.createElement(&#39;script&#39;);e.src = document.location.protocol + &#39;//connect.facebook.net/en_US/all.js#xfbml=1&#39;;e.async = true;document.getElementById(&#39;fb-root&#39;).appendChild(e);}());</script><!--End FB Code http://bloggertrickszz.blogspot.com/-->

This code should help you implement facebook buttons . 
To get facebook buttons -

Click Here

Select the buttons from the left hand side column. 

If you still need help , Blogger TricksZz is always there for you.

Follow @shipsocker

Read More