Professional syntax highlighter for blog posts

Syntax highlighting is a special  feature which highlights source code in blogger posts. It displays text, especially source code  in different colors and fonts according to the category of terms. This feature facilitates writing in a structured language such as a programming language or a markup language  as both structures and syntax errors are visually distinct. Highlighting does not affect the meaning of the text itself; it is intended only for human readers.(Wikipedia).

Procedure for adding syntax highlighter:

   1. First of All go to Blogger dashboard.
    2. Then Click On Template Tab
    3. Press Control+F search for </head>
    4. Paste the bellow code just before  </head>


<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/shThemeEclipse.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/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.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/shBrushJScript.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/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.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/shBrushXml.js' type='text/javascript'/>
<script language='javascript' type='text/javascript'>
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all();
</script>



5. Save the template.
6. First you have convert source code into html escaped code using follow link htmlescape
7. While writing your blog post enclose your html escaped code  between following tags

C       <pre class="brush:c";> sourcecode </pre>
java   <pre class="brush:java";> sourcecode </pre>
php    <pre class="brush:php";> sourcecode </pre>
html   <pre class="brush:html";> sourcecode </pre>
Sql     <pre class="brush:sql";> sourcecode </pre>

6. That's it your done.


setting post labels


                         Introduction:

Hi students in this post i will guide you to set different labels to blog posts.Labeling
To blog posts is a simple but tricky process through this post i will make it easy to
Set up labels.First we will discuss what is label and its functionality.  

                                   Labels:

Hi students, For beginner bloggers labeling posts  is a  new term.In Simple terms label
Means a meaning full word which makes complete sense for it's name.In blogger point of
View label single word hyperlink which is referenced multiple blog posts which under 
Same category. We should have some reasonable number of posts to make them labeled.

                             Procedure:

Step 1:

Log in to your Blogger account with your username and password. Once you are logged in, make sure you are at your Blogger's Dashboard, otherwise click on the "Dashboard" link, which will take you to a list of your blogs.



Step 2:

Click second option(posts) from above picture and you will see full window with all
Your blog posts like bellow shown picture.



Step 3:

In above window you can see some posts and some labels associate with them.we can also
Set more than one label to the single post.

If you closely look at above picture you will be notice that fist post "How to set labels to blog posts" is not associated with any label.we will set label for that post.

Step 4: Do follow bellowing to make label to the post
                       
               Step 4.1: You can see check box inside blog post simply tick it


               Step 4.2:  Click on drop down option inside publish and do following options

                               Step 4.2.1: Select new label option if you want set new label.



                               Step 4.2.2: Otherwise select existed labels.

                
              Step 4.3:  Then blogger platform will  add label to your posts.

              Step 4.3:   By same procedure we can add/delete multiple labels 

                 

Step 5:

 In next post i will explain how to add labels gadget to blog as this post title Image.

Step 6: Thats it your done.


                                          Keep write your questions in comment section


adding widgets to blog



      Introduction:

     Gadgets are small tools or applications which generally enhance functionality of
     A blog by adding extra features.Gadgets generally integrate third party applications
     Into our blogs. Example we can add Photos,Videos,RSS feeds, and we can also add
     HTML and JAVA SCRIPT source into our blog.

         Procedure:


Step 1:

Log in to your Blogger account with your username and password. Once you are logged in, make sure you are at your Blogger's Dashboard, otherwise click on the "Dashboard" link, which will take you to a list of your blogs.





Step 2:

Access the Layout page of your blog. After selecting your blog, click on the "Design" link, which will take you to the Layout page. Click on the "Page Elements" link, then click on "Add a Gadget."




Step 3:

Choose a widget or gadget. A Blogger pop-up window will appear that lists all the gadgets available to you through Google Blogger. You may search for the name of a specific gadget, or you can browse through several categories, including Basic gadgets, Featured gadgets, Most Popular gadgets or More Gadgets, which are contributed by third-party developers for Blogger.


     

Step 4:

Add the widget to Blogger. Once you find the widget you want to add, click on the blue plus sign symbol to add it to your blog's layout. On the Layout screen, you will be able to click and drag the widget to where you want it to appear on your blog.

Step 5:

Add a custom widget to Blogger using the HTML and JavaScript widget. The HTML and JavaScript widget within Blogger is a blank widget that allows you to add or paste third-party functionality or other code to your blog. The HTML and JavaScript widget can be found by clicking on "Add a Gadget" from the Blogger Layout screen.


In above widget i have given Facebook like plugin functionality.In previous post i have 
Explained how to integrate Facebook plugin in Blogger template.

  • Thats it your done
                                       Keep put your questions in Comment section
about blog layout

 Introduction:

Hi Students in this post am going to give clear idea about blogger template layout. As you
May already know what is template? ,Template is a physical structure for our blog home Page and pages. The new blogger platform has feature for dynamically configure template
Sections with help of Layout option.

  • Once your successfully logged into Blogger.com-->Click on your blog Name--->Layout



Then you will see layout of your blog template like Example shown bellow

live blog layout

 
  • Above Layout is sample layout from above image you can see i have numbered main Section with Numbers
              1. Its is area for inserting Blog icons.
              2. It is named as Gadget which very Important in Blogger platform
              3. It is a sidebar which is build with Gadgets.
     
     Gadget:

     Gadgets are small tools or applications which generally enhance functionality of
     A blog by adding extra features.Gadgets generally integrate third party applications
     Into our blogs. Example we can add Photos,Videos,RSS feeds, and we can also add
     HTML and JAVA SCRIPT source into our blog.


              
                    4. It is a main section in out template.All our blog spots are get
                     Displayed in this area. 

                 5.It is a Navbar area which means it is a top layer you can find this area
                     With feature nextblog option.

  • Practical Example corresponds to the above image is shown bellow. 
blog home layout

  • You can make use of this article help to customize your own template layout
  • Thats it your done. 







Introduction:

 Hi friends In this post i will explain about installation of  new custom template  in blogger 
Platform.Blogger platform provides basic default templates.As a beginner we can use-----
Them. But as you grown as professional blogger you will need to have more customized and Responsive template.
Note: You need to have at least one blogger template before follow this procedure
          We can download number of templates from different websites.simple search
          with following keywords"blogger templates","responsive blogger templates" like.

 Guide To Install New Blogger Template:

 Step 1: Go to http://www.blogger.com/ and log in with your account credentials.
Step 2: Once you logged in successfully,Blogger Dashboard will come.
Step 3: In Dashboard you need to click on template option as shown bellow.

blogger dashboard
Step 4: After clicking on template option,A new window you will see and click on Backup
          Template as shown in bellow picture.
template upload window
Step 5: Take your old template backup before going to try new template.
Step 6: Thats it your done.

                             Post your questions in comment section









Introduction:
Hi Students In Previous post of blogging series we have guided to create a new blog in Simple steps today am going to explain how to write articles and post's in Blog spot. 
We have wide variety of options available on Blogger Platform.We have to make use 
All of them to make a Attractive and user friendly Articles.

 Procedure To Create A New  Blog Post:
Step 1: Log in to blogger platform at blogger.com
Step 2: Once you successfully logged in you will see window like bellow picture 
Step 3: You will have to click on rectangle pencil box in the above picture or  you have 
            Select New Post option form Drop Down.
blog post editor
Step 4: We have different options for editing content.From Above image Indications
            1.Text Color Change option
            2.Text Background color Highlighter
            3.To insert web links
            4.To insert images from different sources  
            5.To insert videos from different sources
Step 5: Once you got finish post.You will need to publish that by clicking at publish button  
            At top of the screen.
Step 6: Thats it your done.

Please comment and ask your questions

           
new blog for blogger



Introduction:

 This post is dedicated to students who wants to create a new blogger blog. In this post  I'll Explain about How you can create a new blog in blogger platform.Before going to create
A  New blog yo should have a Google account already created.

Procedure To Create A New Blog:
Step 1: To create a new blog go to ww.blogger.com and log in with Google Account
            If you don't have Google Account create one form www.google.com here.
Step 2: Once you logged in , At the top click on New Blog .
Step 3: Here you need to give Title for your blog  and Proper Name Domain Name for
            for your blog
Step 4: Blogger Platform automatically check for Domain Availability. Once  you see The Blog address
             Available Message, Simply click on Create blog button.
Step 5: Next step is select a template for your blog for now select any template later on you can replace 
             It with your custom Responsive Template
  
Step 6: To set template to your blog click on Apply to blog as shown bello

Step 7: Thats it your successfully created a new blog for you.Next post I'll explain Writing new posts in blog





facebook like plugin







How To Add Facebook like box to Blogger page 


First Procedure:
  1. Decide width and height for the your Facebook box.
  2. visit this link  Like Box Generator , Input height and width and click on get code,then plugin code box will come and click on I FRAME.     
  3. Copy I FRAME code and follow Next procedure.
Second Procedure:
  1. First of All go to Blogger dashboard 
  2. Then Click On Template Tab
  3. Now Click On Add a Widget/Gadget
  4. Select HTML/JavaScript
  5. Now a Box will pops-up , Past code and save it.
  6. Refresh blog page u r done.
preventing coping blog content







How To Disable Copying Contents in Blogger

  1. First of All go to Blogger dashboard 
  2. Then Click On Template Tab
  3. Now Click On Add a Widget/Gadget
  4. Select HTML/JavaScript
  5. Now a Box will pops-up , then paste the above Copied Script in this Box
  6. Now Just Save it and you Protected your Contents , now Copy-Cat will run from your blog.
  7. Navigate to the bellow link and Insert code and save it.
  8. Click here to visit code page