How To Add Code Box Area In Blogger Posts

• Step1: Login to your blogger account. Go to  Dashboard>> Template.
• Step2: Click on the Customize.
• Step3: GO to Advanced >> Add CSS.
• Step4: Copy and Paste the following code in the Add CSS section.

.code { background:#f5f8fa; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 20px; color: #000000; font: 13px 'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; max-height: 200px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; } .code:hover { background-repeat:no-repeat; }

• Step5: Now whenever you are composing new post , just select HTML section and paste the following code.

<div class="code">

Paste your code

</div> 

• Step6:  Go to Compose mode.  Replace Paste your code with your code. Complete your post and publish it.
  
  

Need Help ? If you need further help regarding this tutorial or regarding this blog then just leave your comment on ASK QUESTION page on my blog. I will be happy to answer your queries shortly.

Read More

Customize Labels Widget with Stylish Cool Effects

 Labels widget displays list of the categories of posts. Creating labels helps to categorize the posts in groups. So it helps visitors to see the posts under a category. Default bloggerLabels widget is not so Stylish. Don't worry, here I am sharing some cool interesting labels widget styles for you. This Labels widget can style using simple CSS codes. To do this follow the steps..

• Sign In to Blogger Dashboard
• Go to Template -> Edit HTML
• Find ]]></b:skin> and copy the code of label style you like above ]]></b:skin>
• Save Template

Black Forest Theme Labels With Animated Scaling

.Label li {
        background: linear-gradient(to bottom, #6B6B6B 0%, #6B6B6B 4%, #333333 1%, #2B2B2B 100%) repeat scroll 0 0 transparent;
        border: 1px solid;
        border-radius: 6px 6px 6px 6px;
        float: left;
        font-size: 116%;
        list-style: none outside none;
        margin: 2px;
        padding: 4px;
        transition: all 0.3s ease 0s;
    }
.Label li:hover {
    transform: rotate(351deg) scale(1.7);
}

.Label a {

    color: #fff;

    text-decoration: none;

}

Yellow Customized Labels Widget

    .Label li:before {

        background-image: -moz-linear-gradient(left top , #FEDA71, #FEBA47);

        border-bottom: 1px solid #D99D38;

        border-left: 1px solid #D99D38;

        content: "";

        height: 1.39em;

        left: -0.69em;

        position: absolute;

        top: 0.2em;

        transform: rotate(45deg);

        width: 1.3em;

        z-index: 1;

    }

    .Label li:after {

        background: none repeat scroll 0 0 #FFFFFF;

        border: 1px solid #D99D38;

        border-radius: 4.167em 4.167em 4.167em 4.167em;

        box-shadow: 0 1px 0 #FAEABA;

        content: "";

        height: 0.5em;

        left: -0.083em;

        position: absolute;

        top: 0.667em;

        width: 0.5em;

        z-index: 9999;

    }

    .Label li {

        background-image: -moz-linear-gradient(center top , #FEDA71, #FEBA47);

        border-bottom: 1px solid #D99D38;

        border-radius: 0 0.25em 0.25em 0;

        border-right: 1px solid #D99D38;

        border-top: 1px solid #D99D38;

        box-shadow: 0 1px 0 #FAEABA inset, 0 1px 1px rgba(0, 0, 0, 0.1);

        color: #996633;

        float: left;

        font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;

        font-size: 0.75em;

        font-weight: bold;

        list-style: none outside none;

        margin: 0 0 7px 20px;

        padding: 0.417em 0.417em 0.417em 0.917em;

        position: relative;

        text-decoration: none;

        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);

        z-index: 1;

    }

Skeleton Theme With Painting Hover Effect

.Label a:hover
{
text-shadow:5px 5px 5px #dcdcdc;
background:orange;
border:1px solid orange;
border-bottom-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom-left-radius: 30px;
border-top-right-radius: 30px;
}

Need Help ? If you need further help regarding this tutorial or regarding this blog then just leave your comment on ASK QUESTION page on my blog. I will be happy to answer your queries shortly.

Read More

How to Hide Sidebar in Blogger and Create a page without Sidebar

 As we've been talking about Blogger design since the creation of this blog and we would like to continue providing you with better understanding of Blogger blogs. As we told, Blogger blogs are entirely customize-able and you can change your blog design by yourself if you have the essential knowledge of web designing. In blogger we always see a static template that usually has a header, a navigation bar, a sidebar, post body and a footer. And whenever, we visit any page of our blogger blog we see all the elements all the time. Whether you visit a tab page or a single post you'll see sidebar and footer etc altogether. Today I would like to share a trick with you guys about creating a full-width page in blogger without sidebars etc. We can change our static blog to a dynamic one by using this trick. We'll use few CSS properties to hide our sidebar and create a full page. CSS3 is a magic, and nothing is impossible now!

How to Create a Page and Post Having no sidebar?

In order to add a page that don't have a sidebar; You'll use few codes of CSS. It shouldn't take you more than five minutes to finish the task. Now follow the steps below.

• Log-in to Blogger 
• Create a New Page or Post
• While editing the page click the HTML Editor tab (Appears at top left) 
• At the beginning of the page insert following CSS code 

       

          <style> #sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer { display:none !important;}#main-wrapper { width:100%!important;}.post { width:100%!important;}</style

Now switch back to compose editor and edit your post/page as the way you want. When you insert all the content in that page; simply publish that. After publishing view that page on the browser, there won't be sidebar and page will be with its full width.

Note: You can also apply this trick on your existing pages or posts. Just edit those pages/posts and click the HTML tab and at the beginning of the page insert the above CSS code.

Need Help ? If you need further help regarding this tutorial or regarding this blog then just leave your comment on ASK QUESTION page on my blog. I will be happy to answer your queries shortly.

Read More

Disabled Right Click In Blogger Or Websites

Read More

Customizing Blockquote With Light Bulb Effect

Read More