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 blogger Labels 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;

    }

Blue Customized Labels Widget

    .Label li:before {

        background-image: -moz-linear-gradient(center top , #1E5799 0%, #207CCA 100%);

        border-bottom: 1px solid #145091;

        border-left: 1px solid #145091;

        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 #3F6893;

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

        box-shadow: 0 1px 0 #B5D8FF;

        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 , #1E5799, #207CCA);

        border-bottom: 1px solid #145091;

        border-radius: 0 0.25em 0.25em 0;

        border-right: 1px solid #145091;

        border-top: 1px solid #145091;

        box-shadow: 0 1px 0 #CCE4FF 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;

    }

 Black Forest Theme Label like NetOops Blog Labels

    .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(5deg);

    }

.Label a {

    color: #fff;

    text-decoration: none;

}

Skeleton Theme for Labels Widget

.Label a {
    color: #000000;
    text-decoration: none;
}
.Label li {
    border: 1px solid #000;
    border-radius: 6px 6px 6px 6px;
    color: #000000 !important;
    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(5deg);

}

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;
}

.Label li {

    border: 1px solid;

    border-radius: 6px 6px 6px 6px;

    color: #000000 !important;

    float: left;

    font-size: 116%;

    list-style: none outside none;

    margin: 2px;

    padding: 4px;

    transition: all 0.3s ease 0s;

}

.Label a {

    color: #000;

    text-decoration: none;

}

.Label li:hover {

    transform: rotate(5deg);

}

Leaf theme for Labels Widget

.Label a {
     -moz-border-bottom-colors: none;
     -moz-border-left-colors: none;
     -moz-border-right-colors: none;
     -moz-border-top-colors: none;
     background-color: #7FBF4D;
     background-image: -moz-linear-gradient(center top , #7FBF4D, #63A62F);
     border-bottom-right-radius: 30px;
     border-color: #63A62F #63A62F #5B992B;
     border-image: none;
     border-style: solid;
     border-top-left-radius: 30px;
     border-width: 1px;
     box-shadow: 0px 1px 0px 0px #96CA6D inset;
     color: #FFFFFF;
     float: left;
     font: 14px verdana;
     height: 18px;
     margin-bottom: 9px;
     margin-left: 10px;
     padding: 10px;
     position: relative;
     text-decoration: none;
     transition: all 0.5s ease-in-out 0s;
}

.Label a:hover {
     background: none repeat scroll 0% 0% orange;
     border-radius: 0px 30px 0px 30px;
     border: 1px solid orange;
     text-shadow: 5px 5px 5px #DCDCDC;
}

.Label {
     margin: 0px;
     padding: 0px;
     position: relative;
}

.Label li:hover {

    transform: rotate(5deg);

}

.Label li {

    float: left;

    font-size: 116%;

    list-style: none outside none;

    transition: all 0.3s ease 0s;

}

More about → Customize Labels Widget with Stylish Cool Effects

Verified Facebook Page tick mark for Blogger Author Comments

Do you noticed a tick mark in some Facebook Pages like Actors, Political Leaders. Verified mark is only available for Worldwide stuff like big companies, Actors such have the chance to be faked. When we move mouse over that tick, it shows a "Verified Page" message. Do you wish to add that verified tick mark to  your (Author/Admin) comment in your blog.Here I am going to show you how to add Facebook verified Page mark to Admin comments.

Add Facebook verified Page tick to Author Comments

• Sign In to Blogger Dashboard
• Go to Template  -> Edit HTML
• Find .comments .comments-content .icon.blog-author and delete the following code inside it

background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);

• And copy the following code inside it

background: url("https://dl.dropboxusercontent.com/s/gp8fhc34w2rka9h/verified%20page.png") no-repeat scroll 0 0 transparent;

• Final code looks like the following

.comments .comments-content .icon.blog-author {

    background: url("https://dl.dropboxusercontent.com/s/gp8fhc34w2rka9h/verified%20page.png") no-repeat scroll 0 0 transparent;

}

I hope this article will help you to customize your admin comment. Please Like and Share.

More about → Verified Facebook Page tick mark for Blogger Author Comments

Highlight Author Comments in Blogger in threaded comment System

I told you before, Comments are the best way to make good relationship with your blog visitors / Followers.
Do you have a blog and do your blog getting comparatively good traffic then your blog also getting many comments, that may be positive or negative. getting comments related to how your interact with your visitors. Are you not interested to read full about this trick you can skip to trick Highlight Author Comments.


Many comments may be in your blog. How blog visitors identify or recognize your comment from these comments. There is accidental case that occur in most blogs is Many bloggers use their account name as Admin. If they comment in your blog or gives reply to other comments, the other visitors think that is the Admin of that blog. Do you have wish to highlight your comments in your blog? If so here is the trick to do that and make your comments recognizable to others.Here I am going to share the trick to highlight Author Comments in Threaded comments and this trick also work in basic commenting system. This is coded using simple Jquery.

How to highlight Author Comments in Blogger

• Sign In to Blogger Dashboard
• Go to Template -> Edit HTML
• Find </body> and copy the following code above it

<script type="text/javascript">
    $(function() {
      function highlight(){
        $(&#39;.user.blog-author,.ssyby&#39;).closest(&#39;.comment-block&#39;)
          .css(&#39;border&#39;, &#39;1px solid #e1e1e1&#39;)
          .css(&#39;background&#39;,&#39;#f1f1f1 url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTC32VOlsthpN4zyf5yYeDlXZ4Cy2JO6kNnBgYiWv9J90OtMxC869FTdlxPov3SSXFYbzNVg9E__u62SW3BSMyezlCTJ3y48NdRJMSZrl-DhkyiMvWx8d48rfbwtzyvJ4ZgHPBCcVe-2w/s1600/admin_comment1.png&quot;) no-repeat bottom right&#39;)
          .css(&#39;padding&#39;, &#39;10px&#39;);
          }
          $(document).bind(&#39;ready scroll click&#39;, highlight);
                       });</script><a style="display:none" href="http://fe-blogger.blogspot.com">Blogger Widgets</a>

• Click Save.

Congratulations you are done. If you enjoyed this article please like and share.

More about → Highlight Author Comments in Blogger in threaded comment System

How to add Search engine Friendly Title to Blogger?

This article will help new blogger blog owners and all bloggers to make their blog search engine friendly Titles.By default Blogger blog titles are not search engine friendly.Page Title is group of text that appears on top of your browser.It is more important in showing your blog/blog posts on Search engine results.The Page title is the most important element in your blog in terms of higher ranking in search results.
Here is example,the figure shows the title of our blog post,the blog title is displayed first and after that the post title has been displayed.

Google only displays 70 characters on Google search results and in case of Yahoo display bit more.So your blog posts will not display or you will not get as much rank in Search Results.Let us think about reversing of position of the blog title and post title,Giving the first priority to Post title and it will works.
It will appears like the following figure.

This
Lets see how to optimize your blogger blog titles Search engine friendly.

• Go to Design->Edit HTML
• find the following 

<title><data:blog.pageTitle/></title>

• Replace the it with the following code

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> - NetOops Blog</title>
</b:if>

Replace the red text by your blog's Name
Done..! you have an SEO friendly page title.

More about → How to add Search engine Friendly Title to Blogger?

Google Official Contact Form for Static Pages in Blogger

Blogger released it's brand new Contact Form Widget for Blogger Users .It helps to send e-mails to blog owner without Sign In to Google or any other account. Anyone can send mails by providing a valid e-mail address and Message. But there is a problem with that Widget. We posted an article about "How to add Blogger Official Contact Form?" It only works as a Widget (it occupies in Sidebar / Footer), it can place in Static Pages. In many popular websites/blogs they use a page for Contact Form. By default this Contact Form can only used as widget, we are introducing a technique to use Google Official contact Form on Blogger Static Pages.

Check our Contact Us Page for Demo

Add Blogger Official Contact Form to Static Pages

• Sign In to Blogger Dashboard
• Select Pages -> Create Blank Page

 

• Switch to HTML mode from Compose Mode.
• Click on HTML in left top of the Page
• Copy the Following code inside it and Save

<table><tbody>
<tr><td>Name</td> <td>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
</td></tr>
<tr> <td>
Email<span style="font-weight: bolder;">*Mandatory</span></td><td>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
</td></tr>
<tr> <td>
Message<span style="font-weight: bolder;">*Mandatory</span></td><td>
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
</td></tr>
<tr><td align="center" colspan="2">
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />
</td></tr>
<tr><td align="center" colspan="2">
<div style="max-width: 222px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</td></tr>
</tbody></table>

• Go to Template -> Edit HTML
• Click on Jump to Widget and take Contact Form1

•  Click on the arrow before <b:widget id='ContactForm1' locked='false' title=' Contact Us' type='ContactForm'>

 

•  Delete the portion inside <b:includable id='main'> ........ </b:includable>

• Now Sidebar Widget will not appear.
• Click on Save

More about → Google Official Contact Form for Static Pages in Blogger

Add Google Official Contact Form Widget to Blogger?

Contact Form Widget is used to send mails to the Blog owner from the visitors/users. Do your blog looks anything missing?. I think a Contact Form is an important widget that was missed for long time. Are you using Contact From in your blog? If so, it will not Google's Official contact Form. That may be from other hosted providers. Here Google released its brand new Contact Form Widget for Blogger Users. It helps to send e-mails to blog owner without Sign In to Google or any other account. Anyone can send mails by providing a valid e-mail address and Message. This Contact Form can add to any blogger blogs that hosted in Google's Server.


 It have three Fields- Name,e-mail and Message and a Send Button. E-mail and Message field are mandatory. It also have e-mail validation, checks whether the e-mail address provided is valid or not. And a notice or message will appear to show the status of sending e-mail, Shows success message it it delivered to user,otherwise shows error message.  There is no CAPTCHA (Used to prevent Spam) in the Contact Form, but Google implemented its effective Spam detection mechanisms. The problem exist with the Contact Form is it can only use as Widget (in Sidebar or  Footer or Under Posts). In many popular websites/blogs they use a page for Contact Form. By default this Contact Form can used as widget, we introduce a technique to use Google Official contact Form on Blogger Static Pages

Advantages

• Send e-mails to Blog owner without Sign In to any Accounts.
• E-mail validation is provided.
• Spam detection Mechanism.
• Show status message of sending.

Disadvantages

• Use only as Widget (in Sidebar/ in Footer)
• No CAPTCHA

Add Google Contact Form to Blogger

• Sign In to Blogger Dashboard
• Select Layout -> Click on Add a Gadget
•  Select More Gadgets in Left Side and Select Contact Form
• Give the Title and Click Save

 

• You have done please check your blog.

When visitor drop a message it goes straight to your inbox. One copy of the message will send to each Admin.
I hope this Contact Form will help your blog to get Suggestions and queries from visitors.

More about → Add Google Official Contact Form Widget to Blogger?

Beautiful Page Navigation for Blogger Blog [new script]

Blogger Page Navigation is an awesome trick to navigate your Blogger Blog Pages.It allows your users to Navigate Blog pages like Book,By using this your blog visitors can easily go to an appropriate page.By default Blogger allows Older Posts and Newer Posts link to Navigate between Blog pages.It is very difficult for your users to navigate deeper into your Blog's Posts, so the Page Navigation helps us to solve this problem.
 Let's see how to install it.Follow the steps below.

1.How to install Page Navigation Widget

• Log In to your Blogger Account
• Go to Design-> Page Elements(Shown in the Picture)
• In New Blogger Template Go to Layout -> Add Gadget

• Click on Add Gadget (anyone) and look for HTML/Javascript take it.
• Leave the Title as Blank(as shown in the figure)

• Copy and paste the below code in it.

<style type='text/css'>
#blog-pager{height: 28px;
    padding: 10px 0 0;
overflow:hidden;
text-align:center;
}
.showpageArea a {text-decoration:underline;
font-size: 16px;
       text-align: center;}
.showpageNum a {font-size:16px;text-decoration:none;border: 1px solid #cccccc;margin:0 5px;padding:5px;}
.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}

.showpagePoint {font-size:16px;text-decoration:none;border: 1px solid #cccccc;background: #216FD9;margin:0 5px;padding:5px;color:#ffffff;}

.showpageOf {text-decoration:none;padding:5px;margin: 0 5px;}
.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:5px;}
.showpage a:hover {text-decoration:none;background: #cccccc;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}</style>
<script style='text/javascript'>var pageCount=7; 
var displayPageNum=5;var upPageWord="Previous";var downPageWord="Next";</script><a href="http://fe-blogger.blogspot.com" style="font-size:0pt">Blogger Widgets</a>
<script style='text/javascript' src='http://netoopscodes.googlecode.com/svn/netoops-page-nav-v2.js'></script>

you can change Red Highlighted texts when you need. pageCount=7;  determines how many Blog posts in each pages. you want to display in each pages.(Note:if you change this value '7' goto Settings->Formatting and change value of Show at most as you given in PageCount)

And displayPageNum=5 determines how many additional Page Navigation numbers display on the page.

• Click on save,You are almost clear.
• Then Change the position of the Widget ,place under the Blog posts.(shown in the figure)
 

• Done..your blog had a page navigation bar.

The Page Navigation had been developed by Muhammed Rias and it was a good presentation.There are some bugs in that and Abu Farhan had solved it.Give them a big thanks for giving us a Beautiful Page Navigation Solution.

More about → Beautiful Page Navigation for Blogger Blog [new script]

Add Animated Ramadan Lantern Widget/Ramadan Hanging Light to Blogger?

Ramadan also known as Ramzan is a holy festival of Islam. This spiritual event is celebrated by fasting(every day sunrise to sunset) for a whole month.Ramadan is the month in which was sent down the Qur'an,
as a guide to mankind, also clear Signs for guidance and judgment between right and wrong. So everyone of you who is present during that month should spend it in fasting. In this time have you ever think about designing / decorating your blog something special. If you have a wish like that don't wait, here I am going to show a tutorial about decorating your blog with Ramadan Lanterns.

 Before revealing this tutorial I would like to thank Syed Faizan Ali of MyBloggerLab.com, he made this animated Ramadan Lantern for blog users. Not only for blogger users but also can use this to Websites or Other blogging platforms(WordPress,Drupal etc) . This animated hanging light created in flash so your browser should support Flash Player,Otherwise you have to install Flash Player. In newer Operating Systems (Windows 7, Windows 8) Flash Player already installed it.Flash Animated Ramadan Lantern in top of our blog,you can see a hanging Lantern spinning to left to right then also back with a glowing Ramadan Kareem in background. This Ramadan Lantern looks very nice in Dark backgrounds,Blue,Orange Backgrounds.

You can see the demo in top of our Blog

How to add Animated Ramadan Lantern ?

• Sign In to Blogger Dashboard
• Go to Template -> Edit HTML
• Find (Ctrl+F) </body>
• Copy the Following code just above it

 <!--  Ramadan Lantern fe-blogger.blogspot.com -->
<div align='center'>
<table border='0' cellpadding='0' cellspacing='0' width='900'>
<tr>
<td height='0' width='900'>
<div style='float:top right; position:absolute; overflow:visible; left:45px; top:0px; height:192px; width:144px z-index: 9999;'><a href="http://www.fe-blogger.blogspot.com"></a><object border='0' classid='clsid:D27CDB6E-AE6D-11CF-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0' height='144' id='obj2' width='192'><param name='movie' value='http://netoopscodes.googlecode.com/svn/branches/swf/ramzan-hanging-lanterns.swf'/><param name='quality' value='High'/><param name='wmode' value='transparent'/><embed height='144' name='obj2' pluginspage='http://www.macromedia.com/go/getflashplayer' quality='High' src='http://netoopscodes.googlecode.com/svn/branches/swf/ramzan-hanging-lanterns.swf' type='application/x-shockwave-flash' width='192' wmode='transparent'/></object>
</div>
</td>
</tr>
</table>
</div>
<!--  Ramadan Lantern By fe-blogger.blogspot.com -->

Click on  Save. It's done. Check your Blog
Here I  am posting this article in this holy occasion of Ramadan not only to reveal this trick but also to show respect ,Kindness to the atmosphere filled with spirit of mirth and love of Ramadan. In this holy occasion I heartily wishing you a Happy Ramadan.

More about → Add Animated Ramadan Lantern Widget/Ramadan Hanging Light to Blogger?

Head banner image changing on reload for Blogger Blog

Today i am saying about an interesting thing .Head banner changing trick for blogger
This is a simple blogger hack.when you add this, your blogger blog's header image will change after RELOAD the webpage on your browser.
 Follow the instructions :)

• Sign In to your blogger account.
• Go to Template->Edit HTML
• Find ]]></b:skin> and paste the following code before it.

#header {
background: url("your header image url in quotes") no-repeat left bottom;
margin:0;
padding:2px;
}

• Then copy the below script  and place above the </head> tag:

<script type="text/javascript">
var banner= new Array();

banner[0]="1st image url";
banner[1]="2nd image url";
banner[2]="3rd image url";
banner[3]="4th image url";
banner[4]="5th image url";
var random=Math.round(4*Math.random());

document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");
</script>

you are done...:)
If any problem with this blogger trick please leave comment,don't hesitate to ask,we are happy to help you:)

More about → Head banner image changing on reload for Blogger Blog

Remove Threaded Comments in blogger Easily trick revealed

This is a simple article explaining How to remove Blogger 's New Threaded commenting system easily.There are some problems with it,Many users report that when a user click on post link,it takes control to the bottom of the page(to the comment section).Would you think that Threaded commenting system is not Good for Blog? Then you can remove it.
I am not going to say too much about Threaded commenting System,because i hope you know about it.
Follow the instructions below carefully.

Before Editing Template,you must Backup your template(How to Backup Template?)

• Go to Design-> Edit HTML
• Tick on Check box  Expanded Widget Templates
• Find the code data:post.showThreadedComments easily using ctrl+F
• You will found code snippet like this

<b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>

• Replace it carefully with the following code [Note: You will find the above code twice,replace it twice]

<b:include data='post' name='comments'/>
          </b:if>
               <b:if cond='data:blog.pageType == &quot;item&quot;'>
                     <b:include data='post' name='comments'/>
      
        </b:if>

• Save it ,

No longer Threaded commenting appear on your blog.Normal commenting will back.
Cheers..!

More about → Remove Threaded Comments in blogger Easily trick revealed