World News : Blogger Tricks | Your Blog Description Here

Home » Posts filed under Blogger Tricks

Add Comment count to Post Header Titles in Blogger

You noticed the number of comments displayed in comments section inside each posts. It is placed under the post. It is not noticeable to visitors. Do you want to add it to header to inspire your visitors to comment. The visitors only see the comment count when they reach at the end of the post. if the visitor not scroll to footer part , the comment count will not see.
Do you think about displaying comment count on the top of post will be better? Then here we are showing a technique to add comment count with beautiful backgrounds to the header part of the post, not only inside the post but also it will display to homepage.

After adding his trick the comment count will be displayed with post titles , if more comments on the post, it will encourage the users to comment and also helps to jump to comment section.

Here are some tricks related to comments
Recent Comments Widget
Change Comment Style in Blogger
Highlight Author Comments in Blogger
Verified Facebook tick mark for author comments
Add Yahoo smileys to Blogger Threaded Comments
How to change Blogger POST A COMMENT message to Image

How to add Comment count to Post Header

Sign In to Blogger Dashboard
Go to Template -> Edit HTML
Find (Ctrl+F) ]]></b:skin> and copy the below code above it

.comment-count {
float : right;
width : 48px;
height : 48px;
background : url( IMAGE URL );
background-repeat: no-repeat;
font-size : 18px;
position:absolute;
margin-top : -15px;
margin-right : 2px;
text-align : center;
}

Choose the comment count background

Copy the URL of image you want by right clicking and select Copy image Location or Copy Image URL.
Replace the RED marked portion above with the image URL

Add Comment count code

Find the following code

<h2 class='post-title entry-title' itemprop='name'>

class='post-title entry-title'

Add the following code below it

<b:if cond='data:post.allowComments'>
<a class='comment-count' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>

Save Template

Congratulations you have done. Check your blog and get more comments. If you liked this article please like and share this blog.

Awesome Recent Comments Widget for Blogger, Feed Comments

in Blogger Special Tricks, Blogger Tricks, Blogger Widgets - on 11:55 PM - No comments

Recent Comments Widget can be used to display the latest Comments in the blog. Comments are the best way to make a good contact with your blog visitors and followers. By default Blogger added commenting System to Blogger blogs. Recent Comments Widget will inspire your blog visitors to post a comment on your Blog. If you don't like to read full about this widget or Are you hurry to add this widget to you blog go to "How to add Recent Comments Widget to Blogger Blog".

There are many changes made to Blogger Commenting System. At earlier time the basic commenting System was used then it changed to Threaded Comments (Others can reply to one comment), it can be change back to basic blogger Commenting System. All Blogger blogs are using Threaded Comments System. Now another type of commenting System was introduced in Blogger Blogs, Google+ commenting System.
The Recent Comments Widget also inspire your blog visitors to post a comment. Your visitors may be interested to see their names in other blogs. If their comment is good ,it will catch other visitors eyes and they also may have wish to do comment.
The Recent Comment Widget shows the Commentators name with Profile link followed by the Post name and followed by their Comment. This Widget can be added to Sidebar or Footer or anywhere which catches the visitors eyes. This Widget was coded using JavaScript and you can also change the style of Widget according to your template.

Wish to see Demo?
Recent Comments Widget

How to Add Recent Comments Widget?

Sign In to Blogger Dashboard
Select Layout -> Click on Add a Gadget
Take HTML/Javascript from the list
Give the Title and Copy the below code to it and Save

<script style=text/javascript src="http://netoopscodes.googlecode.com/svn/branches/Js files/recent_comments_netoopsblog_min.js"></script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src=http://netoopsblog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script>
<a style="display:none" href=http://netoopsblog.blogspot.com>Recent Comments Widget</a><style type=text/css>
.rcw-comments a {text-transform: capitalize;}
.rcw-comments {border-bottom: 1px solid #666; padding-top: 6px!important; padding-bottom: 6px!important;}

</style>

Change the RED highlighted with your blog name

If you want different Styles for this Widget, Please visit again I will post soon.

Another Way to add Recent Comments Widget

Go to Layout -> Click on Add a Gadget
Select Feed from the list and give the following URL

http://netoopsblog.blogspot.com/feeds/comments/default

Change the RED marked portion with your Blog URL

A Window will appear and shows demo,there are some options, you can select the options for adding comment date, commenter name etc.. Using this method you have only limited options.

Click Save

Congratulations you have done..
I hope this article will help you and you enjoyed this article if so, Please Like and Share .

Add Google type Stylish Breadcrumbs to Blogger Blog?

in Blogger Special Tricks, Blogger Tricks, CSS3 - on 11:31 PM - No comments

The Breadcrumbs or breadcrumb trail is used as an aid for navigation. The breadcrumbs allows users to keep track of their location and to understand where they are. In Blogger, the breadcrumbs are the way to realize the category of an article/post. I think you had seen this in e-commerce sites like ebay,myntra,yebhi. They used breadcrumbs to identify a product is in which category. Its just like a Home link followed by the category belongs and then the current location/current post.

Demo shows in top of this post Click Here

Sign in to your Blogger Dashboard
Go to Template -> Edit HTML
Step 1: Find (ctrl+F) the following code

<b:include data='top' name='status-message'/>

copy the following code after it

<b:include data='posts' name='breadcrumb'/>

Step2: Find the following code

<b:includable id='main' var='top'>

copy the following code above it

<b:includable id='breadcrumb' var='posts'>
                                <b:if cond='data:blog.homepageUrl == data:blog.url'>
                            
                     <b:else/>
          <b:if cond='data:blog.pageType == "item"'><a href="http://www.netoopsblog.blogspot.com"></a><p class='breadcrumbs'> <span class='post-navigation'><a expr:href='data:blog.homepageUrl' rel='tag'> Home </a>
                                        <b:loop values='data:posts' var='post'>
                                          <b:if cond='data:post.labels'>
                                            <b:loop values='data:post.labels' var='label'>
                                              <b:if cond='data:label.isLast == "true"'>

                                                <a expr:href='data:label.url' rel='tag'>
                                                  <data:label.name/>
                                                </a>
                                              </b:if>
                                            </b:loop>
                                            <b:else/>
                                            Unlabelled
                                          </b:if>

                                          <span>
                                            <data:post.title/>
                                          </span>
                                        </b:loop>
                                      </span>
                                    </p>
                                    <b:else/>
                                    <b:if cond='data:blog.pageType == "archive"'>
                                      
                                      <p class='breadcrumbs'>
                                        <span class='post-labels post-navigation'>
                                          <a expr:href='data:blog.homepageUrl'>
                                            Home
                                          </a>
                                           Archives for
                                          <data:blog.pageName/>
                                        </span>
                                      </p>
                                      <b:else/>
                                      <b:if cond='data:blog.pageType == "index"'>
                                        <p class='breadcrumbs'>
                                          <span class='post-labels post-navigation'>
                                            <b:if cond='data:blog.pageName == ""'>
                                              <a expr:href='data:blog.homepageUrl'>
                                                Home
                                              </a>
                                               All posts
                                              <b:else/>
                                              <a expr:href='data:blog.homepageUrl'>
                                                Home
                                              </a>
                                               <span>Posts filed under
                                                 <data:blog.pageName/></span>
                                            </b:if>
                                          </span>
                                        </p>
                                      </b:if>
                                    </b:if>
                                </b:if>
                          </b:if>
        </b:includable>

Step 3: Find ]]></b:skin> and Copy the following css code above it

Style 1: Style like this blog used

.breadcrumbs {

margin: 0px 0px 15px 0px;
font-size:95%;

}
.post-navigation > a:after, .post-navigation > a:before {
    border-bottom: 13px solid transparent;
    border-left: 11px solid #B7B7B7;
    border-top: 13px solid transparent;
    content: "";
    display: inline-block;
    left: 100%;
    position: absolute;
    top: -2%;
    z-index: 1;
}
.post-navigation > a:after {
    border-left-color: #F2F2F2;
    left: 99%;
}.post-navigation > a:hover {
    padding-left: 23px;
}
.post-navigation > a {
    background: none repeat scroll 0 0 #F2F2F2;
    border: 1px solid #B7B7B7;
    color: #000000;
    padding: 4px 12px;
    position: relative;
    text-decoration: none;
transition: all 0.2s ease 0s;-moz-transition: all 0.2s ease 0s;-webkit-transition: all 0.2s ease 0s;
}
.post-navigation > span {
    padding-left: 14px;
}

Style 2: Google Type

.breadcrumbs a {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-position: 100% 0;
    background-repeat: no-repeat;
    border-color: #D9D9D9;
    border-image: none;
    border-style: solid;
    border-width: 1px 0 1px 1px;
    color: #666666;
    display: block;
    float: left;
    font-size: 95%;
    padding: 7px 16px 7px 19px;
    position: relative;
    text-decoration: none;
    z-index: 1;
}
.breadcrumbs a:hover {
    border-bottom-color: #C4C4C4;
    border-top-color: #C4C4C4;
    box-shadow: 0 2px 2px #E8E8E8;
    color: #333333;
}
.breadcrumbs a:first-child, .breadcrumbs a:first-child:hover {
    border-top-left-radius: 5px;
    z-index: 30 !important;
}.breadcrumbs {
    margin: 0px 0px 15px 0px;
    font-size:95%;
    }

Style 3: Wood Type

     .breadcrumbs {
    margin: 0px 0px 15px 0px;
    font-size:95%;
    }
    .post-navigation > a {
        background: url("http://i.imgur.com/qJ9sJ2N.jpg") no-repeat scroll 0 0 transparent;
        border: 1px solid #C76A29;
        border-radius: 7px 7px 7px 7px;
        color: #FFFFFF;
        padding: 4px 23px;
        position: relative;
        text-decoration: none;
        text-shadow: 1px 1px 2px #000000;
        transition: all 0.2s ease 0s;
    }
    .post-navigation > span {
        padding-left: 14px;

    }

Style 4: Blue Type

.breadcrumbs {
    margin: 0px 0px 15px 0px;
    font-size:95%;
    }.post-navigation > a {
    background: url("http://i.imgur.com/KbrSuUv.jpg") repeat scroll 0 0 transparent;
    border: 1px solid #016DB5;
    border-radius: 8px 8px 8px 8px;
    color: #FFFFFF;
    padding: 4px 26px;
    position: relative;
    text-decoration: none;
    transition: all 0.2s ease 0s;
} .post-navigation > span {
        padding-left: 14px;

    }

I hope this article will help you, if you liked this please spread our Blog.

How to Add Yahoo Smileys on Blogger Threaded Comments?

in Blogger Special Tricks, Blogger Tricks, Template Tricks - on 11:07 PM - No comments

Yahoo smileys for Blogger Threaded Comments

I 'm going to say about how to add yahoo smileys to Blogger Threaded comments. This is an awesome trick was scripted by an Indonesian Blogger Kang Ismet and I think he did a very good job for us. This Blogger hack works with New Blogger Threaded commenting system.
Follow the instructions Below..

To see demo :
Go to Comments OR Click Here

What's inside this article?

How to Add yahoo smileys to Blogger Threaded comments in 3 steps..?

Go to Blogger Account
Go to Template -> Edit HTML [click Proceed]

Add CSS code

Find ]]></b:skin> [easily find Ctrl + F]

img.bhacksmly {
    height: auto !important;
    vertical-align: middle !important;
    width: auto !important;
    border:0px !important;
}

Add Javascript code

Find </body> and copy the below code just above it.

Save the template
Save Template

Add HTML code

Check Expand Widget Templates
Find <div class='post-footer-line post-footer-line-3'>
Find the next </b:includable> and copy the code above it

Example
</div>
.
Place code here

</b:includable>

Copy the below code above </b:includable>

<b:if cond='data:blog.pageType == "item"'>
<div class='netoopsblogysmile' id='ysmile' style='

background: -moz-linear-gradient(top, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4f5fc), color-stop(50%,#bfe8f9), color-stop(51%,#9fd8ef), color-stop(100%,#2ab0ed));background: -webkit-linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);background: -o-linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);background: -ms-linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);background: linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);border-radius: 3px;width:100%; padding:10px; height:65px;'>

Save the Template
That's all

We proudly introduced our new yahoo smileys to Blogger threaded comments...Please Check it and feel it...Click HERE
We will post like our Yahoo smileys soon...

If you liked this article please Join via Google Friend Connect,Share,Like us to get Stronger...

Awesome Multi-Colored Popular Posts Widget for Blogger powered CSS3

in Blogger Special Tricks, Blogger Tricks, Blogger Widgets, CSS3 - on 12:14 AM - No comments

Popular Posts Widget is a Widget providing by Blogger and we can add it to our Blog. This Widget displays the Most viewed posts of your blog, that may be of Month or in Week or All the time. You can select how Popular posts are to be displayed.By default it shows an image(if the post has) and Title of Post followed by the content of post wrapped by 20-25 Words. This article is a tutorial to Style that Popular posts Widget to an Awesome Multi - colored Popular posts Widget. This trick is done using simple CSS3 rather than using complex JavaScripts. A great feature of this trick is each Post shown in each Flat UI color, so these colors catches your Blog visitor's eyes and they have the tendency to take that post even if the Post is not so good.

Demo shows in bottom right side →
Features of this Widget

Flat UI colors used (it will attract users attention)
Automatic Post Numbering
CSS3 Hover Animation

Sign in to your Blogger Account and Active Popular Posts Widget

First Add Popular post Widget to Blogger

Go to Layout -> Select "Add a Gadget" and take Popular Posts Widget from the Widget List appear.
Give Title of widget, select how the popular posts should be appeared(in Month,or Week or All time) and click Save

Go to Template -> Edit HTML, Find ( Ctrl + F ) ]]></b:skin>
Copy the following code and Paste just above it

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:97%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
}
#PopularPosts1 img:hover {
border-radius: 0 0 0 0;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}

Click on Preview Template (You can see the template without saving)
Save the Template.

View Your Blog it is ready to attract users. I think this article will help you if so please share and Like us to spread our Blog.
If any problems with this trick don't hesitate to ask, do comment here...

Extreme CSS3 Floating Google Search Bar for Blogger FREE..!!

in Blogger Special Tricks, Blogger Tricks, CSS3 - on 12:12 AM - No comments

All of you know about Google Search bar. You'd see the style of search bar used in Google. If you didn't see Google search bar either go to Google or please see the right top of our blog, you can see a static Google search bar. Here is a trick to add this Google search bar to your blog. This is not the real Google search bar, instead this is a CSS3 styled search bar using Blogger's search method. If you need Google's real search bar[but it can't get Google's search box style] go to http://www.google.co.in/cse. Let's see how to add Google type search bar to your blog...

Demo shows in right top →
Features

Floating Static (Fixed) Search bar
CSS3 styled search bar
CSS3 animated

Go to Layout -> Click on Add a Gadget
Select HTML/JavaScript from the list
Leave the Title as Blank and copy paste the following code inside the Content portion

OR
Sign in to Blogger Dashboard and go to Template -> Edit HTML
Search (Ctrl+F) <body
Copy and paste the following code after it

<div class='noop-searchbox' id='noop-searchbox'>
      <form action='/search' id='noop-searchform' method='get'>
        <input id='s' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' type='text' value='Search...'/>
        <button id='sbutton' type='submit'>
          <span id='simg'/>
        </button>
      </form>
    </div>
<style type="text/css">
#sbutton {
background: -moz-linear-gradient(center top , #4D90FE 0%, #4787ED 100%) repeat scroll 0pt 0pt transparent;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#4787ed));
background: -webkit-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: -o-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: -ms-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: linear-gradient(top, #4d90fe 0%,#4787ed 100%);background-color: #4d90fe;
border: 1px solid #3079ED;
border-radius: 2px 2px 2px 2px;
color: #FFFFFF;
height: 27px;
min-width: 76px;
padding: 0 21px;padding-bottom: 2px;
}
#sbutton:hover{ background-color: #357AE8;
background-image: -moz-linear-gradient(center top , #4D90FE, #357AE8);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#357ae8));
background: -webkit-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: -o-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: -ms-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: linear-gradient(top, #4d90fe 0%,#357ae8 100%);
border: 1px solid #2F5BB7;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);}
#simg {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwix8ijy2vG1FyA3LT6CQNVZCTnpTG8tFUYfUH2te9j8LAr3VnIhhlAQHh6YS1e4OawlxqC86ytFDS2QqC1ovaWjdaTvHfRnAETyOuN_x1oD-Cn9042av6lQ8_jB0EMyzcheDZPg06YC0/s1600/searchicon.png") no-repeat scroll 0 0 transparent;
display: inline-block;
height: 14px;
margin: 0;
width: 17px;z-index:101;
}#s:hover {box-shadow: 0 1px 2px #C1C1C1 inset;}
#s {border: 1px solid #BCBCBC;border-radius: 4px 4px 4px 4px;font: italic 14px times New Roman;padding: 4px 2px;width: 146px; -moz-transition: width 0.2s ease-in 0s; -webkit-transition: width 0.2s ease-in; -o-transition: width 0.2s ease-in;}
#s:focus {width: 200px;}
.noop-searchbox {
display: block;
position: fixed;
right: 0;
top: 1%;
max-width: 300px;min-width: 238px;
z-index: 100;
}
</style>

I hope this article will help you. If any problem with this please do comment.

How to Change Blogger POST A COMMENT Message/Text/Style?

in Blogger Special Tricks, Blogger Tricks - on 12:20 AM - No comments

You know Comments are the best way to interact or make a good contact with your blog visitors.I think you are all seen a message "Post a Comment" in the bottom of every post in your blog. Do you think it is not so good to see your blog visitors? Then here I am going to show you how to change "Post a Comment" text from that part and place interesting images there. Also I am giving some cool images link with this article. Lets see how to change this

Click Here to view our Comment Form

Sign In to Blogger Dashboard
Go to Template -> Edit HTML
Search (Ctrl+F) for the code marked Bold

<a expr:id='data:widget.instanceId + "_comment-editor-toggle-link"' href='javascript:void(0)'><data:postCommentMsg/></a>

Search the next <data:postCommentMsg/> ,that code looks like the following

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

replace <data:postCommentMsg/> with the image code
Select the code of image you want from the following

Style 1

<img src="http://i.imgur.com/Qv18EaT.gif"/>

Style 2

<img src="http://i.imgur.com/hR5AoQv.jpg"/>

Style 3

<img src="http://i.imgur.com/542TClt.jpg"/>

Style 4

<img src="http://i.imgur.com/2RqqdBN.jpg"/>

Style 5

<img src="http://i.imgur.com/h0oIkzC.jpg"/>

Style 6

<img src="http://i.imgur.com/YbPOTnI.jpg"/>

Style 7

<img src="http://i.imgur.com/wRUQ2JN.jpg"/>

Style 8

<img src="http://i.imgur.com/b7gXQLd.jpg"/>

Style 9

<img src="http://i.imgur.com/TXqb5vI.jpg"/>

Style 10

<img src="http://i.imgur.com/Wu2M9sv.jpg/>

Style 11

<img src="http://i.imgur.com/rP7bUnN.jpg"/>

Style 12

<img src="http://i.imgur.com/ZcVbJRa.jpg"/>

Save Template

I hope this article will help you. If you got any doubt or Suggestions, please do comment

Article also Applicable for

How to Change Post a comment Text in Blogger?
How to Remove Blogger Post a Comment Message?
Change Post a comment text to images
Change Post a Comment Message to Animated images

Highlight Author Comments in Blogger in threaded comment System

in Blogger Tricks, JQuery - on 4:20 PM - No comments

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(){
        $('.user.blog-author,.ssyby').closest('.comment-block')
          .css('border', '1px solid #e1e1e1')
          .css('background','#f1f1f1 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM3N4ngGpU6lhe0OEIN8HCbJtpdxRDnI3ecpzMseDdA76IVZet3q7v-UgNu1r62IXx-5WJRYv2xYM_OdopYBA6cdowIa5KLxZoi1mmhyphenhyphenxdPfvtz7qT5loYEW4bkNsm0cXxZOmM7ultDr8/s1600/admin_comment1.png") no-repeat bottom right')
          .css('padding', '10px');
          }
          $(document).bind('ready scroll click', highlight);
                       });</script><a style="display:none" href="http://netoopsblog.blogspot.com">Blogger Widgets</a>

Click Save.

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

How to add Search engine Friendly Title to Blogger?

in Blogger Tricks, Blogging Basic Tips, Template Tricks - on 10:37 PM - No comments

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 == "index"'>
<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.

Google Official Contact Form for Static Pages in Blogger

in Blogger Tricks - on 9:52 PM - No comments

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

Add Google Official Contact Form Widget to Blogger?

in Blogger Tricks, Blogger Widgets - on 9:48 PM - No comments

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.