Home »

How to create a code block on Blogger

Chủ Nhật, 9 tháng 1, 2011
This thing has been my problem since the day I started blogging how to display HTML, CSS or Javascript code block on Blogger. This is when you paste your code on the Blogger editor it gets interpreted as code and don't display as you wanted it to be a sample code. Now I assure you that I found the easiest way to resolve that problem. Hit on the continue link to see the steps in displaying code block on Blogger.

  1. Be sure that you already log on to your blogger account. Then go to Layout-->Template Editor.
  2. Blogger's Template Designer allows you to customize almost any aspect of your blog's appearance through the use of cascading style sheets (CSS). To add custom CSS snippets to your template, simply open the Template Designer and add your code to the field located in the Advanced | Add CSS tab. Changes you make will reflect instantly in a live preview beneath the editor.
    Note: Editing CSS allows you to change the look and feel of your blog. For changes to the actual content of your blog, including the adding of gadgets or changes to the layout, please use the Edit HTML field located in the Layouts tab. Also remember that, like other customizations, your CSS will be removed if you change designs.
    While CSS allows for an almost unlimited number of style customizations, here we'll just go over a couple of the most popular CSS tweaks so you can get a sense of how these changes can be made. For a more comprehensive list of various CSS tweaks, please see the 'What can I do with CSS' article in our Help Center.
    The first CSS change we'll go over is how to center the header text on your blog. Head over to the CSS field located in the Advanced | Add CSS tab in the Template Designer. Once there, simply drop in the following lines of code:


    3. You add this code:
    .post blockquote {
    width: auto;
    font-family: Courier;
    margin:.75em 0;
    border:1px solid #596;
    border-width:1px 1px;
    padding:5px 15px;
    overflow: scroll;
    background-color: #C6E4F0;
    white-space: pre;
    }

    Now after you have encode the piece of code you want to display.

    1. Go to Posting-->New Post.
    2. Type or copy your article you need to post.
    3. Then go to Edit Html tab of your editor (upper right).
    4. Paste there the encoded code, enclosed in <code> </code>
    5. After that Publish Post.
    6. Then view your article.
Tags:

Comments[ 0 ]


Đăng nhận xét