How To Block An IP Address On Blogger

It's too hard to deal with spammers and copy cats but if some how you find their IP address then this article may help you. It's php based tutorial then we first need a php file hosting.

• Copy/paste the PHP code below in a notepad

• Replace IP Address 1, IP Address 2, and IP Address 3 with the actual IP addresses you want blocked

• Save the file as a .php file (ex. ipblocker.php)

<?php
/*
Blogspot IP address blocker.
*/
$iplist = array(“IP Address 1″,”IP Address 2″,”IP Address 3″); // the list of banned IPs
$ip = getenv(“REMOTE_ADDR”); // get the visitors IP address
// echo “$ip”;
$found = false;
foreach ($iplist as $value) { // scan the list
if (strpos($ip, $value) === 0){
$found = true;
}
}
if ($found == true) {
echo “top.location = “error.html”;n”; // page to divert to
}
 ?>

Upload your newly created PHP file on any PHP supported web hosting service like 000webhost.com and zymic.com

Now paste following script in your blog's template just above </head> :

<script language=’javascript’ src='URL of your php File' type='text/javascript'></script>

Save your template and it's done.... :)

Make Your Own URL Shortening Service With Google Short Links

As soon as your website becomes big we all want to include some advanced features and we all wants to create short links with our own domain not with goo.gl or any other services and Google Short Links is perfect for us.

With Google Short Links you can create your own url shortening service in some easy steps. All you need is a custom domain with DNS management and a Google Apps account.If you don't have a Google Apps account then you can create it within minutes for free by clicking here.

Here is an example of what we're going to create. Just visit go.bwidgets.com.

Now after creating your Google Apps account add Google Short Links app on your account at this link. By default your redirection service will be available at links.example.com but you are free to choose any other sub-domain for this purpose. From the dashboard, open your Short Links settings and add a new URL (I picked go.bwidgets.com) and then deleted the default links sub-domain.

Next open your web domains cpanel (DNS manager) and create a new CNAME record for the same sub-domain that should point to ghs.google.com or ghs.googlehosted.com as shown on their instructions.

Wait for a couple of minutes for the DNS changes to propagate across the Internet and your TinyURL clone is ready to serve. Here’s the default web interface where you can create short URLs using your Google Apps account.

You can check a sample of our short links : http://go.bwidgets.com/twitter.

I hope this may help you.....

Get A Free .in Domain And Web Hosting From Google

Google and HostGator is giving free .in domain and hosting for one year so i really prefer you all to try this because it's good to try all thinks like this before buying your first domain and hosting and it's totally free and if you like it then after one year you can renew your plan to get your domain and hosting.


Here's what you'll get:

• Free easy-to-build professional website
• Free .in domain name and hosting for one year
• Free email addresses
• Free 365 days support

There's no thinking twice. Get started today. Just go to http://www.indiagetonline.in/ and apply for your free .in domain.

Downloading Paid Android Apps For Free

Choosing an Android phone or tab is a really smart choice because Android OS is owned by Google and it provides you best apps for your device. You can choose from millions of cool free and paid apps on Google Play but lot of us don't think paying for apps is a good idea so here we are with a nice trick to download all paid Android apps for free all you need is an internet connection and an Android phone.

First of all let me clear that i'am not responsible for any content you download for free because this is totally illegal so do this on your own risk.

OK so this is easy to download paid apps for free just follow these steps :

For this we need a file sharing website so i'am going to use 4shared for this so you can simply do this by visiting 4shared.com or you can download 4Shared App on your Android device by clicking here.

After downloading 4Shared app or visiting their website Sign Up for a free account on 4Shared and on search-bar search for your favorite Android app with the .apk format for example if you wanna download Temple Run then search for Temple Run.apk and download it and have fun for free.

Let me explain this to you 4Shared is a file sharing website and anyone can upload their file on 4Shared for free so the paid app you're downloading for free is probably uploaded by a person who paid for it.

If you're on an old device then you might need to download .apk installer on your Android to install these apps.You can find lots of .apk installers on Google Apps for free.

Social Subscription Scrolling Slider Widget For Blogger

After searching web finally i found a cool social subscribing widget for blogger. This widget contains like button, follow button and +1 button which will surely help you to build your social blogging network. Well there is nothing in the world like Social Blogging Network but i thought it was cool. Here we go:

• Go To Blogger > Layout > Add A Gadget > HTML/JavaScript > Paste following code:

<script type="text/javascript" src="http://widcraft.googlecode.com/svn/jquery.min.js"></script>
<script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#mblsocialslide").show("slow");else $("#mblsocialslide").hide("slow");});function closeMBlsocialslide(){$('#mblsocialslide').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script>
<style>
#mblsocialslide{background:#f3f3f3;border-radius:9px;-moz-border-radius:9px;-webkit-border-radius:9px;-moz-box-shadow:inset 0 0 3px #333;-webkit-box-shadow:inset 0 0 3px #333;box-shadow:inner 0 0 3px #333;padding:12px 14px 12px 14px;width:300px;position:fixed;bottom:13px;right:2px;display:none;z-index:3;height:65px;}
</style>
<div style="display: none;" id="mblsocialslide">
<a style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closeMBlsocialslide();">(X)</a>
<span style="font-family: Tekton Pro; font-size: 20px; margin: 10px 0; text-shadow: 1px 1px 0 #FFFFFF;">Don't forget to join our community!</span><br />
<div style="float:left; margin:15px;"><g:plusone annotation="none"></g:plusone></div>
<div style="float:left; margin:15px;"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FPageUsername&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe></div>
<div style="float:left; margin:15px;"><a href="https://twitter.com/TwitterUsername" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Follow Us</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
</div>
<div class='clear'></div>

• Now replace TwitterUsername with your twitter username and PageUsername with your facebook page username and save it.....

Adding Read More Button On Blogger

Showing full post on homepage is not a good idea at all and it also makes your blog's loading a bit slow. So now i'am going to tell you how to add Read More button on your blog to make loading fast and giving a pro look to your blog. Here we go :

• Go To Blogger > Template > Edit HTML > Search for </head>

• Just above </head> paste following script:

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

If you want to change image thumbnail size then find these numbers 100 and  120.

• Now click on Expand Widgets Template and search for <data:post.body/> and replace it with following code :

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>

Save It and we're done....now take a look at your blog...... 

Amazing Social Sharing Widget For Blogger

Social Sharing is best way to get more visitors but it only effects if your visitors shares your good content on their social network and a good social sharing widgets really helps you to attract more visitors and a really good button helps you to add it directly on your blog so as you can see in above image this widget is totally awesome so you can add this widget by clicking on the "Add To Blogger" button below :

Make sure to add this widget just below posts on your layout.

Google + Style Subscription Box Widget For Blogger

Here is another cool subscription box for Blogger. You can call it a Google + style or a Chrome style but believe me it really doesn't matters what you say because all it matters is what your visitors say. So here is this quick and easy tutorial :

• Go To Blogger > Layout > Add A Widget > HTML/JavaScript > Paste below code :

<div class="subscribe_outer">
<div class="subscribe_wrapper">
<p>Subscribe Updates, Its FREE!</p>
<div id="btntEmailsub">
<form class="btntEmailform" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FeedID', 'popupwindow', 'scrollbars=yes,width=600,height=540');return true" method="post" action="http://feedburner.google.com/fb/a/mailverify">
<input type="hidden" value="FeedID" name="uri">
<input type="hidden" value="en_US" name="loc">
<input class="emailText" type="text" value="Enter your email..." onfocus="if (this.value == " enter="" your="" email...")="" {this.value="" }"="" onblur="if (this.value == " ")="" ;}"="" onclick="value=''"name="email">
<input class="emailButton" type="submit" value="Signup Now!" title="">
</form>
</div>
</div>
</div>
<style>

.subscribe_outer {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsdaS3WtJlcjEr-V4Wq2q1-FK94jRzpbjfs-9MR7hLsV2Lx9bCxkdborrvrsbWrGgQCS9XNwdK-0i_wTsoJ_ZqL9b2RMVX_xAB5fR3NUAuYLd33G5V1In3PC2XWq80g0vVGpcMpOmqahg/s1600/color-chronicl.gif") repeat scroll 0 0 transparent;
    margin: 0 -10px;
    padding: 5px 0;
}
.subscribe_wrapper {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIKs4GvaZVkWMWbiCekf2MOgpn69gozRNdjs5GdBwB-T4JAi5jCWH1bM7Psawm3JtoVbdHZ4CV2ZgvdO2e7IaI033613N-IQZDbU1DjAVNdvkAjKSLx0HpN_5B0WXlSgqCJAvSF9846hw/s1600/pattern-chronicl.png") repeat scroll 0 0 #333333;
    color: #CCCCCC;
    font-size: 15px;
    font-weight:bold;
    line-height: 20px;
    padding: 10px 50px 18px 38px;
}
.emailButton {
    background:#249334;
    border: 0 none;
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF;
    cursor: pointer;
    font-weight: bold;
    padding: 10px 40px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
    width: 100%;
}
.emailText {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiafC2cve3EYSSS6sb3dX6dtKYNylvH1X6ajtyOWBlEMdX43b2RJbsxd2VZJj-bbJ3Jx_KV3vGLv9i2r-MBNsPegZlS6taDwMTwzurqUIO0pYnZ3AbmVBpg1We8La7zf-Jc_FO_c1LZ9Ok/s1600/email.png") no-repeat scroll 10px center #FFFFFF;
    border: 0 none;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.05) inset;
    color: #444444;
    padding: 10px 40px;
    margin: 0 0 15px;
    outline: none;
    text-decoration: none;
    width: 70%;
}
input, textarea {
    font-family:'Lora',georgia,serif;
}
.subscribe_wrapper {
    color: #CCCCCC;
    font-size: 14px;
    line-height: 20px;
}
.emailButton {
    width: 300px;
}
.emailButton {
    background: -moz-linear-gradient(center top , #30A146 0%, #249334 100%) repeat scroll 0 0 transparent;
    border: 0 none;
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF;
    cursor: pointer;
    font-weight: bold;
    padding: 10px 40px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
    width: 100%;
}
</style>

Now in above code change FeedID with your feed id.

For example if your feed url is feeds.feedburner.com/WidgetCraft then WidgetCraft is your FeedID

How To Edit Blogger Mobile Template

In this post we're going to learn about how to edit our blogger template for mobile phones so please starting this don't forget to enable mobile template on your blogger by visiting template section.

How To Customize The Structure Of Your Mobile Template :

Blogger Templates are made by using widgets. Blogger has added a new property (mobile) to the <b:widget/> tag. This property can take the following values: ‘default', ‘yes', ‘no', ‘only'. As you may have guessed, this property will determine how the widget will be rendered in the mobile view.

By default, the widgets that will be shown on mobile are:

• Header
• Blog
• Profile
• PageList
• AdSense
• Attribution

a) If you want to hide any of said widgets, you need to use the property mobile='no' in the widget tag. By doing so, that widget would no longer appear in the mobile view.

For instance, you can hide the Attribution Gadget in Mobile view if you use:

<b:widget id='Attribution1' locked='true' mobile='no' title='' type='Attribution'/>

b) If you want  to display a non-default widget in the Mobile view of your Blogger blog, then just set its mobile property to 'yes'.

Here is an example:

This is the normal tag for the Blog Archive Widget:

<b:widget id='BlogArchive1' title='Blog Archive' type='BlogArchive'>

When you set the mobile property as

<b:widget id='BlogArchive1' title='Blog Archive' mobile='yes' type='BlogArchive'>

you should see the Archive Widget on your Mobile view.

c) If you want a widget to appear only in the mobile view, you can achieve this be setting the Mobile property to 'only':

<b:widget id='Attribution1' locked='true' mobile='only' title='' type='Attribution'/>

If you use this tag, the attribution gadget will disappear from your desktop view, and will appear only on the mobile view.

How To Customize The Look And Feel Of Your Mobile Template :

You can fully customize the look of your mobile template. The body element of the mobile template will be styled by the mobile class:

<body class='loading mobile'>

Make sure that your template contains the following line of code:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

If you have experience working with CSS, you can use this class name to style your mobile template.

.mobile .date-header {
text-decoration:underline;
}

Alternate Widget Content On Mobile View :

When you switch to the Custom Mobile Template, you might find that the template is too huge to fit into a Mobile Browser. If you want you can provide alternate content inside a widget.

For example:

<div class="widget-content">
<b:if cond="data:blog.isMobile">
<!-- Show a text link in mobile view.-->
<a href="http://www.blogger.com">
Powered By Blogger
</a>
<b:else/>
<!-- Show an image link in desktop view.-->
<a href="http://www.blogger.com">
<img expr:src="data:fullButton" alt="Powered By Blogger"/>
</a>
</b:if>
</div>

This code will show a Powered by Blogger Text link on the Mobile View and a Powered by Blogger image on the normal desktop view.

The condition

<b:if cond="data:blog.isMobile"/>

can be used to check if a visitor is viewing your blog in a mobile browser or not. You can use this conditional check creatively and give a totally different look to the mobile version of the blog.

That’s all!

Google Page Rank Checker

Check Page Rank of your Web site pages instantly: