Add a Comments Counter Button to Blogger Blogspot

In this Blogger tutorial (Blogspot tutorial) you will learn how to add a comments counter button to Blogger (Blogspot) to show off the number of comments each of your posts has received.

A comment counter button (bubble) will have the effect of encouraging visitors to comment on your Blogger blog and also help to highlight the credibility of your articles.

Installing this Blogger hack to add a comment counter button only takes a few minutes. The changes needed to add the comment bubble to Blogger while not difficult do involve adding a small snippet of code to your Blogger template in two places. For this reason I strongly urge you to back up your Blogger template before attempting this blogger hack.

Blogger Tutorial Difficulty - easy to medium

How to Add a Comments Counter Bubble to Blogger
A Step-by-Step Walkthrough
The following steps will insert a fully clickable comments counter button on the same line as the post title in Blogger. The comments counter is right aligned by default.

Log in to Blogger and the blog you wish to apply these changes to
Select Design > Edit HTML
Click on Download Full Template to back up your template before you make any changes
Check the Expand Widget Templates box
In the CSS Styling section of your Blogger template and just before the ]]></b:skin>

.comments-button {
width : 48px;
height : 48px;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ9tWY2fMVRAJq6RlPAXEO0gs2joToETyIe6tZAt7hju1Xwop1imJwfDCXIJ0UgEpvhP3HtVIn5aPMjdqSvMQPjFOFI3t9CicDKrmn1BmNgrStY_vvXCX87mm_rYDGF5A3EtrjRKbzcQD1/s200/comment-counter-bubble.png) no-repeat;
float : right;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
padding-top:10px;
}
Now find the following block of code using CTRL key + F

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
Copy this code block:

<b:if cond='data:post.allowComments'>
<a class='comments-button' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>
Insert as follows:

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.allowComments'>
<a class='comments-button' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
Save template and then view blog to admire your new comment counter badge.

Tips and Troubleshooting

If you prefer you can replace the button image I have provided with your own image. You can find other buttons easily enough by doing a Google search with a term like "speech button icons".

Upload your button to a hosting service such as Photobucket and change the URL address of the image in the CSS styling section. The following example will render a smaller blue button. Note I have reduced the font size to accommodate the change. You may need to play around with the settings to get the font sizing right for your image.

.comments-button {
width : 48px;
height : 48px;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR_IX6x-gGqRiBdrbW_9ZtB8PHeqVxZimPK3EbI85ljhcRhVn_DdLQ_5d8DeEZbaLP3WdT7DBejPTXLtC_8JNvjrpKfVVzWmlggHA5ZE5X1pQncNflBk0YsfiRrYTzDLY_TCLbw418oQdT/s200/comment-counter-bubble-2.png) no-repeat;
float : right;
font-size : 14px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
padding-top:10px;
}
If you want your comment counter to be left aligned instead of right you will need to change the CSS styling from float:right; to float:left;

In today's Blogger tutorial I have covered how to add a comments counter to a Blogger blog (blogspot blog) that will appear to the right of your blog post title. A comments counter is a way to encourage visitors to comment and is a way of showing off the credibility of your blog posts. Good luck! Any comments about installing this blogger hack are most welcome.

Related Articles
List of Blog Know How Tutorials for Blogger Blogs
Tips to Add Digg Button to Blogger Blogspot
Add Twitter Followers Counter to Blogger
Add Twitter Badge or Button to Blogger
Add a Social Bookmarking Button to Blogger
Add Social Bookmark Buttons to Blogger

How to Change Bullet Point Style in Blogger (Blogspot) Lists

In Part 1 of this three part series of Blogger tutorials I discuss how to change bullet point styles of lists you may want to include in Blogger posts. This first Blogger tutorial deals with unordered lists and how these can be styled using CSS in Blogger (Blogspot). The second part of these tutorials will deal with ordered lists while part 3 discusses bullet point changes you can make to your sidebar, footer and menus.

Today you will learn how to:

change the style of bullet points in unordered lists
add bullet points to unordered lists if they are absent
add an image instead of a bullet to lists in your Blogger posts

This tutorial is rated easy and is designed so that even Blogger newbies can make the changes they want to their Blogger template. Changing the bullet point style involves changing the CSS styling in your Blogger template (Blogspot template). Join me as I walk you through this step by step guide.

How to Add Bullet Points to a Blogger Post
If you are still using the old Blogger editor you will need to add bullet points manually to any unordered lists you create in Blogger posts. If you are using the new editor the work is done for you. Either way though this is the type of code that generates unordered lists:

<ul><li>Create your own list markers in Blogger</li>
<li>Create unordered lists in Blogger</li>
<li>Create bullet points in Blogger</li>
</ul>

Any text can be placed between the two <li></li> tags. Simply copy this list into a Blogger post and substitute your text for mine and you will have an unordered list.

Circular Bullet Points
Circular bullets (also known as markers or discs) are displayed in Blogger by default whenever unordered lists appear. This means that whenever the <ul></ul> tags are used in Blogger posts a leader dot or disc will appear before each line of text denoted by <li>. (Note I will discuss ordered lists <ol></ol> tags in part two of this tutorial).

An unordered list in a Blogger post using the <ul></ul> tags would appear like this:

Change Bullet Point Style in Blogger
Add Bullets to Blogger
Changing the look of unordered lists in Blogger

We can make lots of changes to the look of these filled discs or filled circles by changing the CSS styling in Blogger. For instance we can have squares, or we can choose to have no bullet point at all. Here's how.

To Add Square Bullet Points to Blogger (Blogspot)
The following code will replace the filled circle bullet points with squares instead:

Login to Blogger if not already logged in
From the Dashboard go to Design >Edit HTML
Back up your template
Find the posts section of your CSS stylesheet which will be before ]]></b:skin> tag
For the following default Blogger templates eg "Simple" add the following CSS code to the post section like this

.post ul li {
list-style: square;
}
Save template and view blog post to see the circular bullet points have been replaced by square ones

To Add Circle Bullet Points to Blogger (Blogspot)
To add unfilled circle list markers or bullet points to Blogger posts do the following:

Follow steps 1-4 as per square bullets
Add the following code to the posts section of the CSS stylesheet of your Blogger template by entering the following code:

.post ul li {
list-style: circle;
}
Save the changes to your template and view a blog post to see the empty circle bullet points

How To Indent Bullet Points in Blogger
There are two ways to increase the indentation of list style markers or bullet points.

Using the Inside or Outside Element
The indentation of bullet points can be varied using the "inside" element. By default the list will be "outside" unless the "inside element" is used. The following code shifts the indentation of the list further to the right.

.post ul li {
list-style: circle inside;
}
Custom Indentation CSS Styling
It is also possible to add custom indentation styling to lists. For instance here I have added a 2.5em indent using the following code to the circles example:

.post ul li {
list-style: circle;
margin-left: 2.5em;
}

How To Replace Bullet Points with an Image in Blogger (Blogspot)
Sometimes you may prefer to have an image list marker or icon instead of a bullet point. You will need to host your image somewhere such as a free image hosting service eg Flickr or Photo Bucket. Follow the steps below to replace bullet points in your Blogger posts with an image

Follow steps 1-4 as per square bullets
In the CSS styling of the posts section of your Blogger template and before the </head> insert the following code:

.post ul li {
list-style: url("http://URLaddressofImage.gif");
}
Replace URLaddressofImage with the URL address of the image you have uploaded to an image hosting service. Note in most cases the file will have a .gif extension. If the extension is anything other than .gif you will need to change this too.
Save the changes to your Blogger template and navigate to a post page to see your image list marker installed

How to Remove the Bullet Points from Blogger Posts
If you are going for a minimalist look you may prefer to have no bullet points in the lists in your Blogger posts. In this case:

Follow steps 1-4 as per square bullets
In the CSS styling of the posts section of your Blogger template and before the </head> insert the following code:

.post ul li {
list-style: none;
}

XSS & CSRF Vulnerabilities on Area Startup Website

Hi Guys, I have found Major XSS and CSRF Vulnerabilities on Area Startup Website while I was just searching for some IT firms details :P and the site is still vulnerable so I have submitted it to xssed.com vulnerability database I hope they will soon fix it :D

Issue Details

Reflected cross-site scripting vulnerabilities arise when data is copied from a request and echoed into the application's immediate response in an unsafe way. An attacker can use the vulnerability to construct a request which, if issued by another application user, will cause JavaScript code supplied by the attacker to execute within the user's browser in the context of that user's session with the application.

The attacker-supplied code can perform a wide variety of actions, such as stealing the victim's session token or login credentials, performing arbitrary actions on the victim's behalf, and logging their keystrokes.

Users can be induced to issue the attacker's crafted request in various ways. For example, the attacker can send a victim a link containing a malicious URL in an email or instant message. They can submit the link to popular web sites that allow content authoring, for example in blog comments. And they can create an innocuous looking web site which causes anyone viewing it to make arbitrary cross-domain requests to the vulnerable application (using either the GET or the POST method).

Crosssite request forgeries (CSRF or sometimes called XSRF) are a simple attack that has huge impacts on Web application security.

CSRF GET-based CSRF (or blind redirects) is simple with XSS-Proxy.The attacker enters the destination into the “fetch document” admin form and the victim will go to the URL, determine that it can’t read the contents, and recover back to where the attacker can perform other actions.

POST-based CSRF is also possible, but requires some JavaScript (via the eval admin form) to perform the attack.The JavaScript could perform a POST-based CSRF if entered in the XSS-Proxy eval admin form (this can be entered as one large command or as multiple eval submissions).

Proof of Concept

Vulnerable Link 1:

http://www.areastartups.com/search?cx=003315328923615770654%3Apidzer5tuca&cof=FORID%3A9&ie=UTF-8&q=%22%3E%3Cscript%3Ealert%28document.cookie%29%3C/script%3E&sa=Search#842

Screenshot 1:

Vulnerable Link 2:
http://www.areastartups.com/search?cx=003315328923615770654%3Apidzer5tuca&cof=FORID%3A9&ie=UTF-8&q=%22%3E%3Cscript%3Ealert%28%27This%20Site%20is%20XSS%20Vulnerable%27%29%3C/script%3E&sa=Search#242

Screenshot 2:

Vulnerable Link 3:
http://www.areastartups.com/search?cx=003315328923615770654%3Apidzer5tuca&cof=FORID%3A9&ie=UTF-8&q=%22%3E%3Ciframe%20src=http://xssed.com%3E&sa=Search#242

Screenshot 3:

Vulnerable Link 4:
http://www.areastartups.com/search?cx=003315328923615770654%3Apidzer5tuca&cof=FORID%3A9&ie=UTF-8&q=%22%3E%3Cmarquee%3E%3Ch1%3EXSS%28This%20Site%20is%20XSS%20Vulnerable%3C/h1%3E%3C/marquee%3E&sa=Search#243

Screenshot 4:

Vulnerable Link 5:
3

Screenshot 5:

Video:

Symantec Norton Website XSS Vulnerable

Hi Guys, two weeks back I have found that Information Security Gaint Symantec Norton's Website has few XSS vulnerabilities. As off now they have fixed there site it so I am disclosing the Issue :)

Issue Details

Reflected cross-site scripting vulnerabilities arise when data is copied from a request and echoed into the application's immediate response in an unsafe way. An attacker can use the vulnerability to construct a request which, if issued by another application user, will cause JavaScript code supplied by the attacker to execute within the user's browser in the context of that user's session with the application.

The attacker-supplied code can perform a wide variety of actions, such as stealing the victim's session token or login credentials, performing arbitrary actions on the victim's behalf, and logging their keystrokes.

Users can be induced to issue the attacker's crafted request in various ways. For example, the attacker can send a victim a link containing a malicious URL in an email or instant message. They can submit the link to popular web sites that allow content authoring, for example in blog comments. And they can create an innocuous looking web site which causes anyone viewing it to make arbitrary cross-domain requests to the vulnerable application (using either the GET or the POST method).

Proof of Concept

Vulnerable Link 1:
https://buy.norton.com/estore/mf/landingProductFeatures?sfid="><script>alert('xss')</script>Jq23M7YG4pjMHzwGYtlDfhdq1ZYF22vswwCBfgSGGz0k5FrgMHF9!1505726402!1291573284101

or the following code can be used in the search box or input box :

<script>alert('xss')</script>

Screenshot 1:

Vulnerable Link 2:
http://buy.norton.com/estore/mf/landingProductFeatures?sfid="><script>alert('xss')</script>Q72nM7hHJ18nVR9GQVNT3Bz01whgMYMNGSLT1H2nyYDtwwChvs22!1505726402!1291573991721

or the following code can be used in the search box or input box :

<script>alert('xss')</script>

Screenshot 2:

Remove Image Border in Default Blogger Templates Simple and Awesome Inc

In this Blogger tutorial I show you how to remove the border around images in Blogger posts (Blogspot posts) when using one of the latest default Blogger templates Simple or Awesome Inc.

If you are using an older generation Blogger template or a custom template the solutions contained in this article may work for you however it is more likely that you will need to follow the methods to remove image borders outlined in my previous Blogger tutorial Change or Remove Blogger Image Borders (Part 1)

Below I explore two methods of removing or deleting image borders in the Blogger template Simple. The first method shows you how to remove the image border using Template Designer and the second method outlined describes how to remove the image border manually by changing the code.

Method 1 - Use Template Designer to Remove Image Border in Blogger

From the Blogger Dashboard go to Design > Template Designer
Then select Advanced > Images
Under Border Color use the drop down arrow to open the color palette
Change the setting to transparent by checking the small box on the bottom right hand side marked "transparent"

Note: If you are using the black version of the Awesome Inc template you will need to change the Background Color to transparent too. Click on the down arrow of the color palette and select transparent.
Click Apply to Blog to save your changes to the template
Navigate to any post page to view images in posts without the border

Method 2 - Change Template Code to Manually Remove Image Border from the New Default Blogger Templates

From the Blogger Dashboard go to Design > Edit HTML
Back up your Blogger template
Find this line amongst the declared variables at the top of your template

<Variable name="image.border.color" description="Border Color" type="color" default="transparent" value="#cccccc"/>
Change to the value of the border color to transparent like so

<Variable name="image.border.color" description="Border Color" type="color" default="transparent" value="transparent"/>
Save your changes to the template
Navigate to any post page that has an image and see that the border around the image is no longer visible