Adding Floating Contact Form To Blogger

Just a quick news before I start the stuff. Google Code has suspended my code account & all repositories I hosted there, so all my code that I use in this website & in tutorials in no longer controlled by me. That's it!

If you're not satisfied with adding Blogger's contact form widget to a specific page of your blog, you can also use it as a floating widget.

BloggerItems has created a cool floating contact form widget for Blogger. First, add Blogger's official contact form widget to your blog.

• Go To Blogger > Template > Edit HTML

• Search and paste this code just about ]]></b:skin>:

.floating-ct-body {
 height: 285px;
 background: white;
 border: 1px solid #09f;
 padding: 10px;
 display: none;
}
.floating-ct-head {
 text-align: right;
}
.floating-ct-body .ContactForm {
 margin: 0;
 display: block!important;
}

Then paste the below code before </body> tag in your template:

<script type='text/javascript'>
//<![CDATA[
/*Floating Contact Form by BloggerItems.com*/
$('body').append('<div class="floating-ct"><div class="floating-ct-head"><a href="#no-move">Contact</a></div><div class="floating-ct-body"></div></div>');
$('.ContactForm').appendTo('.floating-ct-body');
var slide_up_ct = false;
$('.floating-ct-head a').click(function(){
 if (!slide_up_ct) {
 slide_up_ct = true;
 $('.floating-ct-body').slideDown();
 } else {
 slide_up_ct = false;
 $('.floating-ct-body').slideUp();
 }
});
//]]>
</script>

That's IT!

Launching Our Google PageRank Checker

2013 was a great year for me. In December, I created Google PageRank checker for our new website. From this tool, you can check Google PageRank of your website with one click. No captcha or anything. Just write the URL of your website and click on Check PageRank button.

Why Try Our PageRank Checker?

I'm not Bill Gates or anything, but my tool still worth your time. It works just like any other PageRank tool. Plus, you don't need to write any captcha codes or anything. You can also embed the PR Checker on your website or add the PageRank Badge to your Blogger or website.

Embed Our PageRank Checker To Your Blog:

Just add following code to your blog:

<h2>Google PageRank Checker:</h2>
<form name="pr" action="http://www.hardeepasrani.com/demo/pagerank/pagerank/rank.php" method="post">
<input type="text" value="google.com"  name="www" />
<input type="submit" value="Check PageRank" />
</form>

Visit our Google PageRank Checker at this link. Don't forget to give us your feedback in the comments.

It's Time To Unleash The Panda!

Happy New Year to all of our loyal readers and their families! It's 2014, and I'm proud to share this small news with all of you. I've launched a new website on 1st Jan, called TricksPanda.com.

Our new website will cover all the WordPress and advanced internet tricks and some other fun tricks. It'll also cover some of the basic stuff about Blogger platform. Please visit TricksPanda.com and tell me how you guys feel about this new site.

What About BWidgets?

BWidgets.com is not going anywhere. I'll still post stuff on this blog. BUT don't expect much from me in the first quarter of this year as my boards exams are just couple of months away and I've to prepare a lot.

Happy New Year & Thanks for all the support!

Amazing Post Navigation For Blogger

It's already 2014 here in India, so I'd like to wish you all a very happy New Year. Stay safe and don't drink to much ;)

It's still New Year's Eve in most of part of the globe, so let me end the year with a final post on this blog. And this tutorial comes from the Blogger King MBT.

It's a new stylish jQuery post navigation for your blog. It'll appear on in your Blogger posts and it'll definitely catch the attention of your readers. The pagination buttons make no sense when placed at the bottom of comments container.

Add This To Blogger:

First. we will add CSS and some necessary script to our Blogger template.

• Go To Blogger > Template

• Click "Edit HTML"

• Search and add following CSS just above ]]></b:skin>

    /*################MBT Pager ##########################*/

    .mbt-pager { border-top: 2px dashed #ddd; border-bottom: 2px dashed #ddd;  margin-bottom: 10px;   overflow:hidden; padding:0px;}
    .mbt-pager li.next { float: right; padding:0px; background:none; margin:0px;}
    .mbt-pager li.next a { padding-left: 24px; }

    .mbt-pager li.previous { margin:0px -2px 0px 0px; float: left;  border-right:1px solid #ddd; padding:0px; background:none;
    }
    .mbt-pager li.previous a { padding-right: 24px;  }

    .mbt-pager li.next:hover, .mbt-pager li.previous:hover  {background:#333333; }

    .mbt-pager li { width: 50%; display: inline; float: left; text-align: center; }
    .mbt-pager li a { position: relative; min-height: 77px; display: block; padding: 15px 46px 15px; outline:none; text-decoration:none;}

    .mbt-pager li i { color: #ccc; font-size: 18px; }

    .mbt-pager li a strong { display: block; font-size: 20px; color: #ccc; letter-spacing: 0.5px; font-weight: bold; text-transform: uppercase; font-family:oswald, sans-serif, arial; margin-bottom:10px;}

    .mbt-pager li a span { font-size: 15px; color: #666;  font-family:oswald,Helvetica, arial; margin:0px;}
    .mbt-pager li a:hover span,
    .mbt-pager li a:hover i { color: #ffffff; }
    .mbt-pager li.previous i { float:left; margin-top:15%; margin-left:5%; }
    .mbt-pager li.next i { float: right;
    margin-top: 15%;
    margin-right: 5%; }

    .mbt-pager li.next i, .mbt-pager li.previous i ,
    .mbt-pager li.next,  .mbt-pager li.previous{
    -webkit-transition-property: background color; -webkit-transition-duration: 0.4s; -webkit-transition-timing-function: ease-out;
    -moz-transition-property: background color; -moz-transition-duration: 0.4s; -moz-transition-timing-function: ease-out;
    -o-transition-property: background color; -o-transition-duration: 0.4s; -o-transition-timing-function: ease-out;
    transition-property: background color; transition-duration: 0.4s; transition-timing-function: ease-out; }

    .fa-chevron-right {padding-right:0px;}

• Now, we will add fonts from Google Fonts & jQuery support.  Search for <head> and just below it paste the following code:

<script src="http://widcraft.googlecode.com/svn/jquery.js" type="text/javascript"></script>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

• Now, it's for the main event. We will add our navigator to the bottom of your post. Search for data:post.body and paste following below it:

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

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

    <ul class='mbt-pager'>

            <li class='next'>
    <b:if cond='data:newerPageUrl'>
    <i class='fa fa-chevron-right'/><a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' rel='next'/>
    <b:else/>
    <i class='fa fa-chevron-right'/><a rel='next'><strong>Next</strong> <span>You are viewing Most Recent Post</span></a>
    </b:if>
    </li>

        <li class='previous'>
    <b:if cond='data:olderPageUrl'>
    <i class='fa fa-chevron-left'/><a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' rel='previous'/>
    <b:else/>
    <i class='fa fa-chevron-left'/><a rel='previous'><strong>Previous</strong> <span>You are viewing Last Post</span></a>
    </b:if>
    </li>

        </ul>


    <script type='text/javascript'>
    //<![CDATA[
    (function($){  
        var newerLink = $('a.newer-link');
        var olderLink = $('a.older-link');
        $.get(newerLink.attr('href'), function (data) {
         newerLink.html('<strong>Next</strong> <span>'+$(data).find('.post h3.post-title').text()+'</span>');  
        },"html");
        $.get(olderLink.attr('href'), function (data2) {
         olderLink.html('<strong>Previous</strong> <span>'+$(data2).find('.post h3.post-title').text()+'</span>');  
        },"html");
    })(jQuery);
    //]]>
    </script>

          </b:if></b:if>

Save your template, and that's it for this year!

Huge Announcement:

In 2014, BWidgets.com will only cover stuff related to Blogger & Google. All WordPress and other stuff will go into your NEW WEBSITE (details coming soon). Our new site will also feature a new Google PageRank checker among other cool tools. So stay tuned!

Add Falling Snow To Blogger

Single bells single bells single all the way! It's HOLIDAY SEASON, and we're back with another great script. It's a great script and will work everywhere, not just Blogger.

This great script comes from schillmania.com. It's just a single .js file, we don't need any jquery support for this script. Just add this script to your Blogger blog and we're done. For newbies, here's how to add:

• Blogger > Template > Edit HTML> Add following script just above </head> tag:

<script src="https://widcraft.googlecode.com/svn/snowstorm.js"></script>

Want to customize snow fall effects? See Customizing Snowstorm for more.

Take Screenshot In Windows Without Any Software

Today I'm sharing a very basic, but a very useful trick with you all. Most of us bloggers have a screenshot software on their devices, but they're just a waste of space as you can easily shot your screen with one click! Here's how to do it:

Press PrntScr key and Windows captures the entire screen and copies it to its clipboard. Now start “Paint” or any other software where you can paste an image. Hold CTRL and press V and Windows pastes the screenshot, which is in the clipboard, into your document. Now just save your image!

How To Enable Jetpack Stats On MobilePress

Almost every WordPress admins uses WordPress' Jetpack plugin on their site to connect and use WordPress.com feature on their self-hosted WordPress. There are a lot of great modules in the Jetpack plugin, but Jetpack Stats module is my personal favorite.

MobilePress is also a well known plugin to create a mobile friendly version of your WordPress. It allows custom themes and a few other mobile friendly settings. But Jetpack's stats module only tracks the desktop version of your site, not the MobilePress version.

Don't worry about this, as I have found a way to enable Jetpack's stats module on our MobilePress. Here is how:

• First of all, enable Jetpack stats module on your WordPress. Now visit your WordPress website as a guest (without signing in).

• Now right click & click on View Page Source to view the source code of your current page, and search stats.wordpress.com in the source code page. You'll find a code similar to this:

<script src="http://stats.wordpress.com/e-201349.js" type="text/javascript"></script>
<script type="text/javascript">
st_go({v:'ext',j:'1:2.6',blog:'YOURUNIQUEBLOGID',post:'0',tz:'-5'});
var load_cmc = function(){linktracker_init(YOURUNIQUEBLOGID,0,2);};
if ( typeof addLoadEvent != 'undefined' ) addLoadEvent(load_cmc);
else load_cmc();
</script>

• Copy your unique blog id from your unique Jetpack stats snippet and place it in the following code:

<script src="http://stats.wordpress.com/e-201341.js" type="text/javascript"></script><script type="text/javascript">
st_go({v:'ext',j:'1:2.5',blog:'YOURUNIQUEBLOGID',post:'<?php the_ID(); ?> ',tz:'-4'});
var load_cmc = function(){linktracker_init(YOURUNIQUEBLOGID,0,2);};
if ( typeof addLoadEvent != 'undefined' ) addLoadEvent(load_cmc);
else load_cmc();
</script>

• Now paste the above code in the footer.php (webroot / wp-content / plugins / mobilepress / themes / default / footer.php) file of your current MobilePress theme. That's IT!!

As you can see, there's only one difference in the above two codes. In the second code, I have replaced the current post id with <?php the_ID(); ?>, otherwise your Jetpack wouldn't count views for specific page, and all your visits would be counted as Homepage views or of a specific post.

Set WordPress Permalinks Settings From functions.php

Permalinks are the permanent URLs to your individual WordPress or blog posts, as well as pages and other lists of blog postings. It's very important to have an easy and beautiful permalinks structure for your site, as it's a part of optimizing your site for SEO.

The default WordPress permalinks structure looks something like this:

http://www.whatever.com/?p=316

And I hate this as much as you all do. However, you can change the default structure of your blog permalinks in the settings of your WordPress blog. But we can also change the default permalinks structure from our functions.php file.

It's pretty easy, just add following snippet to your functions.php file:

<?php
// set permalink
function set_permalink(){
    global $wp_rewrite;
    $wp_rewrite->set_permalink_structure('/%year%/%monthnum%/%postname%/');
}
add_action('init', 'set_permalink');
?>

Use this snippet to change the permalink settings from your functions.php file instead of in the admin area. You can replace the red area in above code with following structure codes:

%year%
    The year of the post, four digits, for example 2004

 %monthnum%
    Month of the year, for example 05

 %day%
    Day of the month, for example 28

 %hour%
    Hour of the day, for example 15

 %minute%
    Minute of the hour, for example 43

 %second%
    Second of the minute, for example 33

 %post_id%
    The unique ID # of the post, for example 423

 %postname%
    A sanitized version of the title of the post (post slug field on Edit Post/Page panel). So “This Is A Great Post!” becomes this-is-a-great-post in the URI.

 %category%
    A sanitized version of the category name (category slug field on New/Edit Category panel). Nested sub-categories appear as nested directories in the URI.

 %author%
    A sanitized version of the author name.

Disable Auto Updates In WordPress

WordPress 3.7 came out with a new automatic background update feature in an effort to promote better security. By the default, only minor releases and translation file updates are enable. But we could manually disable or enable anything we want.

Just put following codes to your wp-config.php file to disable/enable the updates:

To specifically enable development (nightly) updates, use the following:

add_filter( 'allow_dev_auto_core_updates', '__return_true' );

To specifically disable minor updates, use the following:

add_filter( 'allow_minor_auto_core_updates', '__return_false' );

To specifically enable major updates, use the following:

add_filter( 'allow_major_auto_core_updates', '__return_true' );

Plugins, themes and translation file:

Automatic plugin and theme updates are disabled by default.

To enable automatic updates for plugins, use the following:

add_filter( 'auto_update_plugin', '__return_true' );

To enable automatic updates for themes, use the following:

add_filter( 'auto_update_theme', '__return_true' );

Automatic translation file updates are already enabled by default, the same as minor core updates.  To disable translation file updates, use the following:

add_filter( 'auto_update_translation', '__return_false' );

Core Updates:

To disable all core-type updates only, use the following:

add_filter( 'auto_update_core', '__return_false' );

All Updates

To completely disable all types of automatic updates, core or otherwise, add the following to your wp-config.php file:

define( 'AUTOMATIC_UPDATER_DISABLED', true );

You can also disable all automatic updates using the following filter:

add_filter( 'automatic_updater_disabled', '__return_true' );

Hope this would help you. Source: WordPress Codex

Most Expensive Pay Per Click Campaigns

Every year businesses and marketing companies around the globe search for new ways to increase revenue and traffic to their website. Publicity is generally always a good thing and increased number of unique visitors to a website usually results in a larger number of sales. Businesses are constantly competing for the top spots on search engine result pages but reaching the top 3 natural links is often a long tedious and challenging task.

Pay per click or adword marketing campaigns have become ever more prevalent in recent years as companies have began to realise its potential to increase profits exponentially. A PPC campaign is the process of bidding on a phrase that you have deemed relevant to your industry. When your paid link is followed through by a potential customer you will be charged according to the amount bid for.

Paid links are so popular because they eliminate the need to earn a top spot in natural search listings. Paid links are always placed in prime locations of the website and taking google as an example we would mostly likely see these phrases as the top 2-3 search results (usually highlighted in yellow) and on the right hand side of a page. By having links in such opportune positions you will significantly increase the chances of consumers visiting your website.

The price of each click is determined by many factors and can start from pennies per click, however this is not always the case any many businesses find themselves paying upwards of $140.

Competition is generally regarded as the reason for inflated costs. An example of this would be the search term 'Mesothelioma attorney' which along with many other asbestos compensation phrases holds a spot as one of the most expensive phrases. It was suggested that a legal firm in Florida was paying upwards of $200 for each click owed to competition in that area being so great. Asbestos compensation claims are a rather lucrative industry so attorneys are willing to pay 'over the odds' to not only generate a lead but to prevent a rival company from benefiting from the lead.

The type of industry that the search is related to can also affect the cost of a phrase, industries that sell legal services, web space and insurance dominate the top spots of most expensive PPC phrases. Most legal services are around $100 per click whilst insurance can range anywhere from $30-$80 per click.

Google is by far the most popular place for businesses to bid for keywords using their adwords platform. This is due to the fact that over 60% of people use google with the other sharing the other 40%. This give you more opportunity to bring potential custom to your business. Other search engine such as Yahoo and bing offer a similar service and are usually cheaper per click.

Finally the length of a search term can make or break a PPC campaign, a phrase that is overly broad may acquire many unique visitors however the amount of people who purchased your service would be lower (due to you not being quite what they want) and you would be paying a much higher rate per link. An overly specific search term would be cheaper and would receive far less visitors however the percentage of people who go on to buy something would be no doubt higher.

An example of this would be a company selling custom t-shirt, paying for the search term 'buy a t-shirt' would yield vast amounts of visitors however not many would purchase the item whereas 'buy a black t-shirt with a picture of a dog' would have far less visitors but a greater turn around rate.

Author - Adam Howard writes for Atrium on workers health. Asbestos is the biggest killer of industrial workers so litigation in this area is very lucrative. Due to this it is very competitive which is reflected in paid search click prices.