Tags: Blogging Tips / Tutorials

How to Automatically Remove Spam Links from Blogger Comments

- 16 Comments

Comment Spam is a major issue for all bloggers and identifying/removing spam comments is among the most frustrating job for a blogger. We all love comments but identifying spam comments from hundreds of comments is the toughest job, especially when you don't have time to moderate all those comments. Obviously you don't want to remove all comments just for a few spam comments. As we know that Blogger doesn't have a real-time spam detection plugin, so its your job that how you manage with spam comments. Today, in this article, we will show you that How to Automatically Remove Spam Links from Blogger Comments.

Automatically Remove Spam Links from Blogger Comments

Method I : Use CSS to Completely Remove Links

Step 1. Log in to your Blogger Account
Step 2. Select your Blog >> Template >> Edit HTML and search for the ]]></b:skin> tag
Step 3. Copy the below code and Paste it just above/before it

.comment-content a {
display: none;
}

Step 4. Press the Save Template button and you're done

Method II : Use jQuery to Remove Links

Step 1. Log in to your Blogger Account
Step 2. Select your Blog >> Template >> Edit HTML and seach for the <body> tagStep 3. Copy the below code and Paste it just after/below it

<script>$('.comment-content a[rel$=nofollow]').replaceWith(function(){return ($(this).text());});
</script>

Step 4. Press the Save Template button and you're done

From Editors Desk

I hope that this article helped you in Removing Spam Links from Blogger Comments. Share it with your friends and don't forget to subscribe us.

Tags: Blogging Tips / Traffic Tips

7 Ways to Increase your Blog Traffic

- 4 Comments

Started a New Blog? Don't know how to drive more traffic to your blog? Don't worry, today in this article we are going to share some top ways to increase your blog traffic. Traffic is one of the most important parameters of your blog, the more traffic you have, the more people you have to read your ideas and articles. If you want a strong readership for your blog, its obvious that you need to create great content. But that's not sufficient, not only great content is required for a successful blog. Create great content, share it on social networks, that's not all that is required to build a thriving blog. To build a thriving blog, you also need to learn that how to drive traffic to it. There are almost unlimited number of ways to increase traffic to your blog, here are 7 top ways to get you started.

Content is the King

We know that people visit our blog to get knowledge or to learn something new. If you've published quality content on your blog, then people will your blog regularly as they know you're providing great content to them.If your content is helpful for them, them they'll visit your blog daily as they know that you'll publish something new in which they're interested. Which means that about 70% of your blog's traffic depends on your content. As Content is the King, so if your blog contains quality content then there is no doubt that people will not visit your daily, again and again.

Guest Blogging

Guest Blogging is another great way to drive more traffic to your blog. Write Guest posts on other top blogs, if your post gets accepted, they will publish your post and in return you'll get a back link to your blog, top blogs have thousands of daily visitors, which means thousands of people will read your article and in return you'll get great traffic from that post. So write quality guest posts and increase your blog traffic.

Submit your Blog to Search Engines

Submit your blog to top search engines like Google, Yahoo and Bing. Most search engines provides you a submit button to submit your links to them. As we know that the Google search engine is the biggest search engine, millions of people search their queries daily and no doubt, bloggers too. If your blog appears in Google search result then you'll get traffic from Google. Google provides its Webmaster tools to justify your appearance in Search Results, so you should use webmaster tools to increase your search appearance. We also have written some quality post on this topic. Check them Out:
How to Submit your Sitemap to Google Webmaster Tools
How to Submit your Blogger Blog to Google Webmaster Tools
How to Submit your Blog/Website/URL to Google, Bing and Yahoo!
How to Submit your Blog/Website to Google

Promote your Blog on Social Media

Submit your blog posts on social media websites like Facebook and Twitter is a great way to boost your traffic. Create a Page on Facebook >> Promote it >> Submit your Posts on your Page and you'll see a great increase in your blog Traffic. So, use social media and boost your traffic.

Focus on your Design

The first thing that people notice when they visit your blog is your blog design. So, if you want people to stay on your blog then you should give your blog an eye catching look, once they're interested in your design then they will read that what you've published on your blog. To make your blog attractive you should give then a clean design which includes Beautiful Header >> Easy Navigation and User Friendly.

Submit Your Blog to Bookmarking Websites

Another great way to boost your blog traffic is to submit your content to best bookmarking websites like stumbleupon, Reddit, Digg and more. So, submit your blog posts to these bookmarking websites and boost up your traffic.

Add Images

Images don't just make your blog pretty but also increase your traffic and search engine listing. People often use Image options provided by search engines like Google and Yahoo. So, adding images to your blog with search engine optimization can easily boost your traffic.

From Editors Desk

There are hundreds of other useful methods to increase your blog traffic, we just have shared just 7 of them and we'll try to share all of them. We hope that this article will help you to increase your blog's traffic. Share this article with your friends and don't forget to subscribe us.

Tags: Blogging Tips / Tutorials

How to Change Mouse Cursor in Blogger

- 6 Comments

You might have seen that many sites have their own mouse cursors. When you move your cursor on their blog, the cursor automatically changes and a custom mouse cursor makes your blog different from others. Recently, one of our readers asked us to write an article on changing mouse cursor of your blog. So today in this tutorial, we'll learn that How to Change Mouse Cursor in Blogger.

What is a Mouse Cursor?

In the computers, a pointer or mouse cursor is a graphical image on the computer monitor or other display device. A cursor is an indicator used to show the position on a computer monitor. It is mostly used for clicking, select or for moving folders/files from one place to other.

How to Change Mouse Cursor in Blogger?

First of all, log in to your Blogger Account and select your Blog. Go to Template >> Edit HTML >> Search (Ctrl + F) for the ]]></b:skin> tag and paste the following piece of code just above/before it.

body{
cursor: url(Your Cursor Image), auto;
}

Now replace Your Cursor Image with the image URL of your cursor and press the Save Template Button.
Note: You can get hundreds of free cursor images here at >> http://www.cursors-4u.com/
Congratulations: You've successfully customized you mouse cursor. Now visit your blog and see the magic.

From Editors Desk

We hope that this article helped you in customizing your mouse cursor in blogger. Share this tutorial with your friends and don't forget to subscribe us.

Tags: Blog Design / Blogging Tips / CSS Tricks

Add CSS3 Hover Animation Effect to Post Titles in Blogger

- 53 Comments

You might have seen hover effect on post titles on many blogs (especially in blogger blogs). Adding a CSS3 hover animation effect to post titles will increase your readership and it'll also attract your readers. One of our readers asked us that how to add a link nudge effect to post titles in blogger. So, today in this article we are going to learn how to add CSS3 hover animation effect to post titles in Blogger. How it works? Click on the demo button and move your mouse cursor over any post title to see how it works.

Demo

Add CSS3 Hover Animation Effect to Post Titles in Blogger

Step 1. Log in toy your Blogger Account
Step 2. Go to Template >> Edit HTML and search for the ]]></b:skin> tag
Step 3. Now copy the below code and paste it just above/before it

.post h2 {
margin:.1em 0 0;
padding:0 0 4px;
font-size:1.0em;
font-weight:normal;
line-height:2.5em;
color:#444;
font-family: Oswald, Serif;
}
.post h2 a, .post h2 a:visited, .post h2 strong {
display:block;
text-decoration:none;
color:#444;
font-size:2.0em;
font-weight:normal;
font-family: Oswald, Serif;
}
.post h2 strong, .post h2 a:hover {
color:#2aa4cf;
padding: 0px 00px 0px 10px;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
transition: all 1s ease-out;
}

Step 4. Click on Save Template button
And you're done!

From Editors Desk

We hope this article helped you in learning How to Add CSS3 Hover Animation Effect to Post Titles in Blogger. Share this article with your friends and don't forget to subscribe us!

Tags: Blogging Tips / CSS Tricks

How to Add CSS3 Rounded Border Wrap in Blogger Templates

- 17 Comments

Adding Rounded Corners body wrapper to your blog is a great way to make your template more beautiful and attractive. By default, there is no border/rounded border wrap in blogger templates. By adding such styles you can make your blog look like professional blogs. This wrapper will make your blog to fit in every screen and it will also attract your visitors. So, today in this article we are going to share How to Add CSS3 Rounded Border Wrap in Blogger Templates.

Add CSS3 Rounded Border Wrap in Blogger Templates

Step 1. Log in to your Blogger Account
Step 2. Go to Template and click on Edit HTML Button
Step 3. Search for the ]]></b:skin> tag
Step 4. Copy the below code and paste it just above/before it

#bgtwrap {
    background: #ffffff;
    width: 965px;
    margin: 10px auto 5px auto;
    padding: 0;
    position: relative;
    border-right: 15px solid #333;
    border-left: 15px solid #333;
    border-top: 10px solid #333;
    border-bottom: 15px solid #333;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
    box-shadow: #333 0px 1px 3px;
    }

Step 5. Now search for <body> and paste the below code just below/after it

<div id='bgtwrap'>

Step 6. Finally, search for </body> and paste the below code just above it

</div>

Step 7. Click on Save Template Button
And you're done

Final Words

We hope this article helped you in learning How to Add CSS3 Rounded Border Wrap in Blogger Templates. Share this article with your friends and don't forget to subscribe us!

Tags: Blog Design / Blogging Tips / Buttons

How to Create a Button/Badge for your Blog

- 3 Comments

You might have seen that many blogs and directories are using Buttons for their promotion. Blog buttons are becoming a very popular way to promote and link back to your blog. A badge in your blog's sidebar is really a good way to provide your readers something that they can use and display on their own blog to show that which blog's they read and it'll also increase your blog's traffic. It's really easy to create a button for promoting your blog. You can choose color, border, font style, background and text for your button by using this button maker tool. Using this tool is extremely easy and in this article we'll show you How to Create a Button/Badge for your Blog using Button maker tool.

How to Create a Button/Badge for your Blog

Go to this page and Customize you badge
Customization:
1- Choose a base color or keep it transparent
2- Choose a border color or keep it transparent
2- Select your Button Size and
4- Choose a vertical bar color or keep it transparent
5- For better look, write a small abbreviation of your blog or whatever you want (Left Side Text) and select its background and text color
6- Write your main keyword in the (Right Side Text) and select it background and text color
7- Click on Update >> Looks good so right click on the image and Save it
8- Upload it to blogger to get its link

How to Add this Badge to your Blog

<a href="Your-Blog-URL" ><img border="0" src='Your-button-link' rel="Keyword"/></a>

1- Replace Your-Blog-URL with the url of your blog
2- Replace Your-button-link with the link of your button
3- Replace Keyword with your blog's keyword
Now to add this button to your blog Log in to your Blogger Account >> Layout >> Add a Gadget >> Scroll down the page and select HTML/JavaScript gadget from the list of gadgets. Paste the above code after customization in the empty HTML/JavaScript Box and click on Save Button.

From Editors Desk

I hope this article helped you in learning How to Create a Button/Badge for your Blog and How to Add it to your Blog. Share this article with your friends and don't forget to subscribe us. Take Care!

Tags: Blog Design / Blogging Tips

Add Rainbow Animation Effect to Links in Blogger

- 23 Comments

Got tired of Blogger's default link effect? Want to change your links hover effect? Don't worry, today we have a beautiful link effect for your blog. By using this link effect you can make the links on your blog change through different colors when the cursor is hovered over them. This effect works on JavaScript and it's really easy to implement this Rainbow Animation Link Effect to your blog. Follow the steps below to implement this Rainbow Animation Effect to your Blog.

How to Add Rainbow Animation Effect to Links in Blogger

Step 1. Log in to your Blogger Dashboard
Step 2. Go to Template >> Edit HTML >> and Search for the <head> tag
Step 3. Now Copy the below code and Paste it just below/after the <head> tag

<script type='text/javascript'>
//<![CDATA[
var rate = 20;
if (document.getElementById)
window.onerror=new Function("return true")
var objActive; // The object which event occured in
var act = 0;    // Flag during the action
var elmH = 0;   // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg;     // A color before the change
var TimerID;    // Timer ID
if (document.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}
function doRainbow(obj)
{
if (act == 0) {
act = 1;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
function stopRainbow()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
function doRainbowAnchor()
{
if (act == 0) {
var obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
}
if (obj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function Mozilla_doRainbowAnchor(e)
{
if (act == 0) {
obj = e.target;
while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
}
if (obj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function Mozilla_stopRainbowAnchor(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function ChangeColor()
{
objActive.style.color = makeColor();
}
function makeColor()
{
// Don't you think Color Gamut to look like Rainbow?
// HSVtoRGB
if (elmS == 0) {
elmR = elmV;    elmG = elmV;    elmB = elmV;
}
else {
t1 = elmV;
t2 = (255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = (t1 - t2) * t3 / 60;
if (elmH < 60) {
elmR = t1; elmB = t2; elmG = t2 + t3;
}
else if (elmH < 120) {
elmG = t1; elmB = t2; elmR = t1 - t3;
}
else if (elmH < 180) {
elmG = t1; elmR = t2; elmB = t2 + t3;
}
else if (elmH < 240) {
elmB = t1; elmR = t2; elmG = t1 - t3;
}
else if (elmH < 300) {
elmB = t1; elmG = t2; elmR = t2 + t3;
}
else if (elmH < 360) {
elmR = t1; elmG = t2; elmB = t1 - t3;
}
else {
elmR = 0;   elmG = 0;   elmB = 0;
}
}
elmR = Math.floor(elmR).toString(16);
elmG = Math.floor(elmG).toString(16);
elmB = Math.floor(elmB).toString(16);
if (elmR.length == 1)    elmR = "0" + elmR;
if (elmG.length == 1)    elmG = "0" + elmG;
if (elmB.length == 1)    elmB = "0" + elmB;
elmH = elmH + rate;
if (elmH >= 360)
elmH = 0;
return '#' + elmR + elmG + elmB;
}
//]]>
</script>

Step 4. Hit the Save Template button
And you're done...

From Editors Desk

I hope this articled helped you in learning How to Add Rainbow Animation Effect to Links in Blogger. Share this article with your friends.

Tags: Blogging Tips / CSS Tricks

How to Create a Tooltip For Hyperlink in Blogger

- 2 Comments

What is a tooltip? A tooltip is a text in box which is displayed over a hyperlink, when you move your mouse cursor on the link. Tooltips are used for displaying extra text over links. Tooltips can be used for all sorts of things i.e descriptions, definitions, word meanings etc. You might have seen different types of tooptips on many blogs. So, today we are going to share a simple and beautiful tooltip for your blog. In the image below "Text to Show" is your text and link and the text in the blue box just above it is your tooltip.

How to Create a Tooltip For Hyperlink in Blogger

Step 1. Log in to your Blogger Dashboard
Step 2. Go to Template and Click on Edit HTML button
Step 3. Now search for the ]]></b:skin> tag
Step 4. Copy the below code and paste it just above/before the ]]></b:skin> tag

/* Tooltip Provided by blogolect.blogspot.com */
a:link,
a:visited {
position:relative;
}
.bgttooltip {
width:300px;
position:absolute;
bottom:100%;
margin:0 0 7px 0;
padding:5px;
font-family:Verdana,sans-serif;
font-size:13px;
font-weight:normal;
font-style:normal;
text-align:left;
text-decoration:none;
text-shadow:0 1px 0 rgba(255,255,255,0.3);
line-height:1.5;
border:solid 1px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
border-radius:0px;
-moz-box-shadow:
0 1px 2px rgba(0,0,0,0.3),
0 1px 2px rgba(255,255,255,0.5) inset;
-webkit-box-shadow:
0 1px 2px rgba(0,0,0,0.3),
0 1px 2px rgba(255,255,255,0.5) inset;
box-shadow:
0 1px 2px rgba(0,0,0,0.3),
0 1px 2px rgba(255,255,255,0.5) inset;
cursor:default;
display:block;
visibility:hidden;
opacity:0;
z-index:999;
-moz-transition:all 0.4s linear;
-webkit-transition:all 0.4s linear;
-o-transition:all 0.4s linear;
transition:all 0.4s linear;
color:#2B2B2B;
background:#2aa4cf;
background:-moz-linear-gradient(top,rgba(192,192,192,0.8),rgba(192,192,192,1));
background: #2aa4cf;
border-color:#2aa4cf;
}
.bgttooltip:before,
.bgttooltip:after
{
width:0;
height:0;
position:absolute;
bottom:0;
margin:0 0 -20px -10px;
border:solid 10px;
border-color:transparent;
display:table-cell;
content:"";
}
.bgttooltip:before
{
margin:0 0 -24px -12px;
border:solid 12px;
border-color:transparent;
z-index:-1;
}
a:hover .bgttooltip
{
text-decoration:none;
visibility:visible;
opacity:1;
-moz-transition:all 0.2s linear;
-webkit-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}
.bgttooltip,
.bgttooltip.left {
left:0;
right:0;
}
.bgttooltip:before,
.bgttooltip:after,
.bgttooltip.left:before,
.bgttooltip.left:after {
left:40px;
right:auto;
}
.bgttooltip:before {
border-top-color:#2aa4cf;
}
.bgttooltip:after {
border-top-color:#2aa4cf;
}
/* Tooltip Provided by blogolect.blogspot.com */

Step 5. Click on Save Template button

How to Use this Tooltip for Hyperlink

In the post editor click HTML and paste the following code where you want to use it

<a href="Your-Link-URL">Text to Show<span class="bgttooltip">Your Tooltip Text</span></a>

Customization:

Replace Your-Link-URL with your URL

Replace Text to Show with the text you want to show before hover

Replace Your Tooltip Text with the text you want to show in tooptip on mouse hover

Step 6. Click on Publish button
And you're done!!

Subscribe to: Posts ( Atom )

Don't Miss

Method I : Use CSS to Completely Remove Links

Method II : Use jQuery to Remove Links

From Editors Desk

Content is the King

Guest Blogging

Submit your Blog to Search Engines

Promote your Blog on Social Media

Focus on your Design

Submit Your Blog to Bookmarking Websites

Add Images

From Editors Desk

What is a Mouse Cursor?

How to Change Mouse Cursor in Blogger?

From Editors Desk

Add CSS3 Hover Animation Effect to Post Titles in Blogger

From Editors Desk

Add CSS3 Rounded Border Wrap in Blogger Templates

Final Words

How to Create a Button/Badge for your Blog

How to Add this Badge to your Blog

From Editors Desk

How to Add Rainbow Animation Effect to Links in Blogger

From Editors Desk

How to Create a Tooltip For Hyperlink in Blogger

How to Use this Tooltip for Hyperlink