Disable Spam Backlinks In Blogger Comments Using jQuery

Are you fed up of spam comments? It's not strange that any good going site will be affected by the tsunami of spam comments and spammy backlinks. Over the internet there are millions of spammers and may be your site can also be one of their target, so how to defend your site from such irrelevant comments?

Recently I found a jQuery plugin which disables embeded backlinks in your sites comment box and prevent them from opening the spam sites or pages. This plugin is helpful in the real sense as it completely blocks your users to enter the spam sites or pages via backlinks.

To install this plugin in your blogger site open Blogger Dashboard → Template → Html Editor and then search for  </head>  (pressing Ctrl+F).

And add below given code just before/above it.

jQuery

<script>
$(document).ready(function() {
    $(&#39;.comment-content a&#39;).click(function(e) {
        e.preventDefault();
        
    });
});
</script>

Now save the template and you are done.

Final Words

This plugin will share half of your labour without asking for any payment. You can also publish some of the spam (Anonymous) comments without any fear of spam backlinks. Because after installation of this plugin visitors of your site will not be able to follow the link, so he can't enter the spam sites. Since it is jQuery plugin so it will work perfectly, just install it and forget it.

Continue Reading(...)

by Unknown 11/06/2013 Leave a Comment

Social Media Sharing Widget V2 for Blogger

Hey Friends you have seen social media share widget I have been using just below the posts title of my post. So now it's time for you to use this widget in your blog's posts. Well I have not done so much of customization here. I just had used very simple CSS properties to give it a minimal and elegant look. Let's proceed to our tutorial now

Step#1

• Open Blogger Dashboard → Template → Html Editor
• Search for below code in your template.

Html

<div class='entry-header'>

Or

<div class='post-footer'>

• Now add below given code just after the above code.

Html

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='share-this'>
<h3 class='share_it'>Socialize Us</h3>
<div class='stumble-button' style='float:left;padding:3px 0% 5px 0;margin:0 2% 0 0;'>
<su:badge layout='1'/></div> 
<div class='fb_button' style='float:left;padding:3px 2% 5px 0;'>
<fb:like font='' href='' layout='button_count' send='false' show_faces='false'/></div>
<div class='gplus_share' style='float:left;padding: 3px 1.5% 5px 0;margin: 0 0% 0 0%;'>
<span class='g-plus' data-action='share' data-annotation='bubble'/>
</div>
<div class='gplus_this' style='float:left;padding:3px 5px 5px 0;width:13%'>
<div class='g-plusone' data-size='medium'/>
</div>
<div class='twit_button' style='float:left;padding:3px 0% 0px 0;width:15.5%'>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='trackmyblog' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
</div>
</div>
</b:if>

• Now search for </head> and add below code just before it.

Javascript

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>

<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
<script type='text/javascript'>
  (function() {
    var li = document.createElement(&#39;script&#39;); li.type = &#39;text/javascript&#39;; li.async = true;
    li.src = (&#39;https:&#39; == document.location.protocol ? &#39;https:&#39; : &#39;http:&#39;) + &#39;//platform.stumbleupon.com/1/widgets.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(li, s);
  })();
</script>

• After you have done by adding script code add the following CSS code in your templates skin. i.e. before ]]></b:skin>

Css

#share-this {
background: transparent;
float: left;
width: 94%;
margin: 2% 2% 5% 2%;
padding: 10px 0 3px;
border-top: 1px solid #DDD;
border-bottom: 1px solid #DDD;

}

.share_it{
float: left;
padding: 0% 5% 0 1%;
color:#414141;
text-shadow: 1px 1px 0px rgba(241, 241, 241, .5);
}

Continue Reading(...)

by Unknown 10/22/2013 Leave a Comment

How To Prettify The Syntax Code Of Your Blog

Syntax highlighting/Code Pretiffier is used for giving a piece of code more presentable look and attraction.
This google-code-prettify was developed by Mike Samuels from Google. You will be learning to imply this feature on your blog.

■ Open Blog Dashboard → Template → Html Editor
■ Find </head> ( pressing Ctrl+F )

■ Now paste the below given code just before/above it.

Javascript

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js" type="text/javascript"/>

■ Hit the Save button and preview the syntax codes of your blog now.

■ You also can change the look of syntax by adding pre-designed CSS codes.
■ Add below CSS code just above/before

]]></b:skin>

1.Default

CSS

/* Pretty printing styles. Used with prettify.js. */

/* SPAN elements with the classes below are added by prettyprint. */
.pln { color: #000 }  /* plain text */

@media screen {
  .str { color: #080 }  /* string content */
  .kwd { color: #008 }  /* a keyword */
  .com { color: #800 }  /* a comment */
  .typ { color: #606 }  /* a type name */
  .lit { color: #066 }  /* a literal value */
  /* punctuation, lisp open bracket, lisp close bracket */
  .pun, .opn, .clo { color: #660 }
  .tag { color: #008 }  /* a markup tag name */
  .atn { color: #606 }  /* a markup attribute name */
  .atv { color: #080 }  /* a markup attribute value */
  .dec, .var { color: #606 }  /* a declaration; a variable name */
  .fun { color: red }  /* a function name */
}

/* Use higher contrast and text-weight for printable form. */
@media print, projection {
  .str { color: #060 }
  .kwd { color: #006; font-weight: bold }
  .com { color: #600; font-style: italic }
  .typ { color: #404; font-weight: bold }
  .lit { color: #044 }
  .pun, .opn, .clo { color: #440 }
  .tag { color: #006; font-weight: bold }
  .atn { color: #404 }
  .atv { color: #060 }
}

/* Put a border around prettyprinted code snippets. */
pre.prettyprint { padding: 2px; border: 1px solid #888 }

/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */
li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 { background: #eee }

2. Sunburst

CSS

/* Pretty printing styles. Used with prettify.js. */
/* Vim sunburst theme by David Leibovic */

pre .str, code .str { color: #65B042; } /* string  - green */
pre .kwd, code .kwd { color: #E28964; } /* keyword - dark pink */
pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - gray */
pre .typ, code .typ { color: #89bdff; } /* type - light blue */
pre .lit, code .lit { color: #3387CC; } /* literal - blue */
pre .pun, code .pun { color: #fff; } /* punctuation - white */
pre .pln, code .pln { color: #fff; } /* plaintext - white */
pre .tag, code .tag { color: #89bdff; } /* html/xml tag    - light blue */
pre .atn, code .atn { color: #bdb76b; } /* html/xml attribute name  - khaki */
pre .atv, code .atv { color: #65B042; } /* html/xml attribute value - green */
pre .dec, code .dec { color: #3387CC; } /* decimal - blue */

pre.prettyprint, code.prettyprint {
        background-color: #000;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        -o-border-radius: 8px;
        -ms-border-radius: 8px;
        -khtml-border-radius: 8px;
        border-radius: 8px;
}

pre.prettyprint {
        width: 95%;
        margin: 1em auto;
        padding: 1em;
        white-space: pre-wrap;
}


/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE; } /* IE indents via margin-left */
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 { }

@media print {
  pre .str, code .str { color: #060; }
  pre .kwd, code .kwd { color: #006; font-weight: bold; }
  pre .com, code .com { color: #600; font-style: italic; }
  pre .typ, code .typ { color: #404; font-weight: bold; }
  pre .lit, code .lit { color: #044; }
  pre .pun, code .pun { color: #440; }
  pre .pln, code .pln { color: #000; }
  pre .tag, code .tag { color: #006; font-weight: bold; }
  pre .atn, code .atn { color: #404; }
  pre .atv, code .atv { color: #060; }
}

You can find more styles here.

Continue Reading(...)

by Unknown 8/24/2013 Leave a Comment