| BWidgets

Home All posts

Saturday, 2 February 2013

Remove Attribution Widget From Blogger Mobile Template

In our last post, we discussed how to remove attribution widget from blogger. In this post, we'll discuss how to remove attribution widget from blogger mobile template.

In previous post, we showed you how to remove attribution widget from your blog but that widget can still be viewed by visiting your mobile template (If you're using). After searching on Google for hours i found nothing about this topic, so i invented my own way to do this.

In last trick, we removed this widget, now we'll hide'em. Without wasting any time, let's get started:

Go To Blogger > Template > Edit HTML > Proceed

Find and remove following code from your template:

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

Find </body> in your template and just above it paste following code:

<div style='display:none;'>
<b:section class='hiddenbar' id='hiddenbar' preferred='no'>
<b:widget id='Attribution1' locked='true' mobile='no' title='' type='Attribution'/>
</b:section>
</div>

Save your template, it's done.

Let me explain this, instead of removing attribution widget, we hid this widget with css. If you only add mobile='no' property in your attribution, instead of this code, it'll only remove this widget from your mobile template. If you're copying this tutorial, then don't forget to give us a backlink on your post. Also, don't forget to leave a comment.

Remove Attribution Widget From Blogger

Today I'll show you how to remove attribution (Powered by Blogger) widget from your blog. It's always hard for newbies to remove this widget but don't worry about that.

In this tutorial, you'll learn about removing locked widget from your blog, just like Attribution widget. Not much to explain, let's get started:

Go To Blogger > Template > Edit HTML > Proceed:

Find following code in your template:

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

Now, just replace locked='true' in above code with locked='false'. Save your template.

Now your attribution widget in unlocked. If you want remove, then you can remove it from your layout section. In next post, i'll show you how to removing attribution widget from your mobile template.

Thursday, 31 January 2013

Display Your Feed On A HTML Page

About every blogger now is using feedburner to publish their feed. By using feedburner, you can get realtime stats and subscriber count. You can even use a custom domain with feedburner. You can display your feedburner feed on Blogger with a simple feed widget but you can't use that widget on your html site. Don't worry, you can still display your feed on a static html or your website by using BuzzBoost. Here we go:

Go To FeedBurner > Click on your feed:

Click on the "Publicize" tab, and then click on "BuzzBoost" in the list at the left side of the screen (see image below). At this point BuzzBoost will give you a number of different options. Choose your preference and click on "Active" button. If you’ve already activated BuzzBoost you’ll see the option to save instead of activate.

Once you choose your settings and activate BuzzBoost you will be provided with the piece of code. Copy the code provided by FeedBurner and paste it into your page wherever you want it to be displayed. You're completely free to use my feeds on your blog:

<script src="http://feeds.feedburner.com/WidgetCraft?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/WidgetCraft"></a><br/>Powered by FeedBurner</p> </noscript>

It's done, you can also style this code by using some css:

.feedTitle {
background: none repeat scroll 0% 0% whitesmoke;
padding: 10px;
text-align: center;
font-size: 20px;
font-weight: bold;
border: 1px solid rgb(81, 104, 59);
}
.feedburnerFeedBlock ul {
margin-left:0;
padding-left:0;
list-style-type: none;
}

.feedburnerFeedBlock ul li {
padding: 5px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #E0E0E0;
}

.feedburnerFeedBlock ul li span.headline a {
color: #990000;
text-decoration: none;
display: block;
}

.feedburnerFeedBlock ul li span.headline a:hover {
color: #535353;
}

#creditfooter {
display: none;
}

Tuesday, 29 January 2013

Create A Free Android App For Your Blog

Android is a Linux-based operating system designed primarily for touchscreen mobile devices such as smartphones and tablet computers. Initially developed by Android, Inc., which Google backed financially and later purchased in 2005.

It's really great idea to create a native Android app for your blog. In this tutorial I'll show you how to create an Android app without any App Development knowledge. Download an example at this link.

AppsGeyser is a free service that converts your content into an App and makes you money. Your app will have all you need including messaging, social sharing, tabs and full support for HTML5 enhancements.

Visit AppsGeyser and Sign Up. After signing up, click on 'Create App' button. You'll see a big list of app tabs. Now we have to choose a suitable tab for our app. I'll tell you about two different methods:

Using Mobile Site

If you're using Blogger Mobile template or you have a mobile version of your site then you can choose 'Website' option:

In next page fill up your site details and preference (I'll use my second blog WWE Fans Nation to explain this tutorial):

In Website URL section fill your mobile sites url (http://www.yourblog.com?m=1 for blogger users.) Fill all fields and then click on 'Create App' button. It's Done!!! In next page you'll receive downloading link and more options about your app. You can download this app by clicking here.

Using Feed

You can also create an Android app using your blog's feed. Click on 'Create App' button and in next page choose 'NEWS Feed' option:

Hope you're using feeds on your blog. In next page fill up your feed's url and some details:

Now fill your feed url (Ex: http://feeds.feedburner.com/WWEFansNation) and fill your app's details. After completing this form click on 'Create App' button. In next page you'll receive downloading link and more options about your app. You can download this app by clicking here.

You can add more than one tabs to your app. Also, you can monetize your Android app using AppsGeyser's publishers program.

You can also publish your app on Google Play by paying one time 25$ fee. Don't forget to leave a comment.

Wednesday, 23 January 2013

Stylish CSS Sprites Menu For Blogger

It's always hard to find a suitable menu for your blog. We're making that decision more hard for you by sharing another awesome menu... :p Remember, you can't change menu option, because it's an image based menu. Here we go:

Go To Blogger > Template > Edit HTML > Find ]]></b:skin>.

Just above ]]></b:skin> post following css:

/*Menu Stars BWidgets.com */
.bwidgets-nav {
    display:block;
    height:72px;
    margin:30px auto;
    position:relative;
    width:525px; }
.bwidgets-nav ul {
    float:none;
    list-style-image:none;
    list-style-type:none;
    margin:3px 0; }
.bwidgets-nav ul li {
    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdoeMzNPpTXbvyIK9XVcaPLMaIhPyECOa_ZkXtlYYXdu1DqXelgqfZhxHE9Ps3pQcNvJU6MsF1FRkgyF9aPSF5-FTLhZUMgTU32xvQK_9YRann8kyme9ND8jXlg-9vDc28lmAL2s0yW9I/s1600/SpritesMenu.png');
    background-repeat:no-repeat;
    float:left;
    height:72px;
    margin:0px;
    padding-top:5px;
    position:absolute; }
.bwidgets-nav ul li a {
    display:block;
    height:100%;
    width:100%; }
.bwidgets-nav ul li.sm1 {
    background-position:0 0;
    left:0px;
    width:125px; }
.bwidgets-nav ul li.sm2 {
    background-position:-125px 0;
    left:100px;
    width:124px; }
.bwidgets-nav ul li.sm3 {
    background-position:-249px 0;
    left:200px;
    width:124px; }
.bwidgets-nav ul li.sm4 {
    background-position:-373px 0;
    left:300px;
    width:125px; }
.bwidgets-nav ul li.sm5 {
    background-position:-498px 0;
    left:400px;
    width:126px; }
.bwidgets-nav ul li:hover {
    z-index:1000; }
.bwidgets-nav ul li.sm1:hover {
    background-position:0 -75px; }
.bwidgets-nav ul li.sm2:hover {
    background-position:-125px -75px; }
.bwidgets-nav ul li.sm3:hover {
    background-position:-249px -75px; }
.bwidgets-nav ul li.sm4:hover {
    background-position:-373px -75px; }
.bwidgets-nav ul li.sm5:hover {
    background-position:-498px -75px; }
/*Menu Ends BWidgets.com */

Now save your template...

All done with this past, now it's time to add html mark-up of this menu on your layout.

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

<div class="bwidgets-nav">
<ul>
<li class="sm1"><a href="#"></a></li>
<li class="sm2"><a href="#"></a></li>
<li class="sm3"><a href="#"></a></li>
<li class="sm4"><a href="#"></a></li>
<li class="sm5"><a href="#"></a></li>
</ul>
</div>

Replace all # in above code with your links.....Save It.......

Don't forget to leave a comment.... :)

Sunday, 20 January 2013

We Are Now Accepting Guest Posts

It's time for me to take some rest, while you can get featured on TricksPanda.com & BWidgets by writing a guest post for our blog. It's a great way to promote your blog or profiles. You'll be free to write any legal thing on your guest post.

How To Submit?

It's easy, just email me your guest post on contact[at]bwidgets.com. (.html or .zip)

You'll Get...

You'll get full credit of your guest post, also a backlink to your blog. Don't forget to email me your name and website. I'll also post "About Author" column below your guest post. It's great way to get more fans.

More Info:

Niche:

Blogging
Web Designing
Internet
Android
Google
Social Media
Money Blogging
WordPress

Supported formats:

.zip
.html
.txt

By submitting a guest post you accept:

It's an original and fresh post. (No Copycats Allowed)
We can modify your post. (Only to make some changes, not much)
Your post is totally legal. (Only legal posts accepted. Not for hackers.)
I'am Awesome. (Most important point)

Saturday, 19 January 2013

Blogger File Hosting Solution

Unlike WordPress, Blogger doesn't provides file hosting. You can only upload images on your blog via Picasa. Every blog owner needs some kind of file hosting to host their scripts, projects, documents and all. In this post, I'll discuss upload several sites, which provides free file hosting. All sites are powered by Google.

Picasa: Picasa is Google's official image hosting website, where you can host all your images. It's totally free and it works via Blogger's image uploader. Your blog's all images are hosted in Picasa.

YouTube: YouTube is Google's video hosting website also world's #1 video hosting website. You upload and embed your videos on your blog via YouTube. It's a great way to promote your blog with your videos. It's totally free, and you can also earn some money via YouTube.

Google Code: Google Code is best place for all developers. You can host your js, css, html, swf, zip, images, txt and bunch of more files formats on Google Code. Google Code is also totally free and it provides 4GB space. You can learn about hosting your files on Google Code on our site.

Google Sites: Google Sites is a free and easy way to create and share webpages. You can also hosts your files on Google Sites. It supports css, js, zip, swf, images and bunch more files formats. It provides 100MBs of free storage per site. You can create unlimited sites on Google Sites. Best part of Google Sites is that you can use your custom domain.

Google Drive: Google Drive is a file storage and synchronization service by Google. Google Drive gives all users 5 GB of cloud storage to start with. A user can get additional storage, which is shared between Picasa and Google Drive, from 25 GB up to 16 TB through a paid monthly subscription plan. It supports images, videos, html, js, css and more. You can learn more about Google Drive's supported file formats at this link.

Wednesday, 16 January 2013

How To Screen Capture Your Android

So recently i bought a new Android phone, and i was trying to capture above screenshot. It's going to be a very useful tutorial for you. We just need a free software from Google Play. You don't need a rooted for this tutorial. First go and download Screen Capture Shortcut from Google Play. After downloading and installing open the software:

As you can see in above picture, In first option (Capture From Notification) select Yes. Now your software is totally activated and you can capture image any time. So still wondering who to capture?

Now when you want to capture any screenshot just slide your notification bar down:

As you can see in above picture, after clicking on 'Screen Capture Shortcut,' your phone will capture your screen in 0.5 seconds.

You can also change notification type, capture time and all other options in your app. Hope this will work you...Don't forget to leave a comment...

Wednesday, 9 January 2013

Monetize Your Blog With InfoLinks

Lots of peoples are blogging just for money, and they are not getting much success in it because Google Adsense is still not accepting their application or they banned them. If you want to earn some money with your blog with some high-quality ads (Way much better than ClickSor) then you should join InfoLinks.

InfoLinks is world's leader in Text-Links advertising. It's very easy to use, and you earn some good amount with it. It gives you four different types of advertising options (including inText, inTag, inSearch and inFrame), and you choose any of it (maybe all four).

For those of you who are wondering about payment options, you can get your payment via eCheck, Paypal, Wire Transfer and Payoneer pre-paid debit card.

Even if you're using Adsense on your blog, then InfoLinks is also a good way to get more from your blog. In my opinion Adsense + InfoLinks is best way to earn for small and medium publishers. Don't worry....It's 100% safe to use InfoLinks with your Adsense account.

Get Started By Clicking Here.

Optimize Blog Title For Search Results

Your traffic from search depends on your content and post titles. I guess now it's time to give a bit attention to your blog/post title for a better SEO. Sorry for bad editing, i recently formatted my pc, and right now i don't have Photoshop. Let's focus on topic....

It would be better if Title Starts with your Post Title and ends with your Blog Title.I do believe that it will definitely improve your Click Through Rate.

Go To Blogger > Template > Edit HTML

Find following code in your template:

<title><data:blog.pageTitle/></title>

and replace it with:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/><b:if cond='data:blog.pageName'> ~ </b:if><data:blog.title/></title>
</b:if>
<!-- End www.BWidgets.com: Changing the Blogger Title Tag –>

Save Your Template......That' IT!!

After saving the template take a look at your blog post pages and your will notice the change in titles in your browser's title bar.

Soon Google bot will re-index your pages with new improved page titles.

Saturday, 5 January 2013

Manually Adding Disqus Comment Box On Blogger

Previously we discussed about adding Disqus comment system to Blogger. Now i'll tell you how to add Disqus comment system manually on your blog.

If the Disqus gadget installer isn't working, you have the option of manually installing the gadget on your Blogger site. This will require editing your Blogger template HTML, so it won't work with Dynamic Views templates.

Go To Blogger > Layout > Add A Gadget > HTML/JavaScript

Enter Disqus as the title and the following code for the content:

Click save and the window will close....

Now all done in Layout section of your blog, now it's time to move to the Template section.

Go to your blog's Template section and then click the "Edit HTML" button > Proceed

Click 'Expand Widget Templates' box

Search for the widget you just created in your HTML template by pressing Ctrl-F (Command-F on OSX) then typing Disqus. You should find the following line:

<b:widget id='HTML1' locked='false' title='Disqus' type='HTML'>

Below that locate and DELETE the following code right before the closing tag. The section you're deleting should look like this:

<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>

Now before the closing </b:widget> tag, add the following Disqus code

<b:includable id='main'>
            <script type='text/javascript'>
                var disqus_shortname = 'EXAMPLE';
                var disqus_blogger_current_url = "<data:blog.canonicalUrl/>";

                if (!disqus_blogger_current_url.length) {
                    disqus_blogger_current_url = "<data:blog.url/>";
                }

                var disqus_blogger_homepage_url = "<data:blog.homepageUrl/>";
                var disqus_blogger_canonical_homepage_url = "<data:blog.canonicalHomepageUrl/>";
            </script>

            <b:if cond='data:blog.pageType == "item"'>
                <style type='text/css'>
                    #comments {display:none;}
                </style>

                <script type='text/javascript'>
                    (function() {
                        var bloggerjs = document.createElement('script');
                        bloggerjs.type = 'text/javascript';
                        bloggerjs.async = true;
                        bloggerjs.src = 'http://'+disqus_shortname+'.disqus.com/blogger_item.js';
                        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(bloggerjs);
                    })();

                </script>
            </b:if>
                <style type='text/css'>
                    .post-comment-link { visibility: hidden; }
                </style>

                <script type='text/javascript'>
                (function() {
                    var bloggerjs = document.createElement('script');
                    bloggerjs.type = 'text/javascript';
                    bloggerjs.async = true;
                    bloggerjs.src = 'http://'+disqus_shortname+'.disqus.com/blogger_index.js';
                    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(bloggerjs);
                })();

            </script>
</b:includable>

Now change EXAMPLE to your site's shortname.

Click Save template. Assuming there are no errors, Disqus should properly show up on your site now.

Blogger Add Widget Not Working

Want to add a new widget but Add Widget button is not working? Yea, you're are not the only one who is facing this problem. Blogger has a new bug, in which Add Widget button is not working. Thus, you can't add Disqus and other type of widgets on your blog.

If you're new to Blogger, then you should know that you can still add widget to your blog. Browse some widgets from our site or other sites. Click on Add to Blogger button and a pop-up will appear. In that window, Add Widget button will not work so Copy all the code from 'Edit Content' box and manually add that code to your blog:

How To Add Disqus Comment Box

Now, you can't add Disqus widget from this way....To add Disqus comment box on your blog read this article.

Floating Social Sharing Bar Widget For Blogger

This amazing sharing bar is created by W2B. It's a horizontal sharing bar with several social sharing options. Lot's of big websites are using this type of widget on their sites. It'll surely approach your readers to share your posts on their social profiles. Time to add it..

Go To Blogger > Template > Edit HTML > Proceed > Check the 'Expand Template Widgets' checkbox.

This widget contains jquery so if your blog already has jquery script then remove it from our code.

Now search for </head> and just above it paste the following script.

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/*<![CDATA[*/
    #w2bSocialFloat {clear:both;padding: 6px 0;display:block;background:#FFFFFF;}
    #w2bSocialFloat td{padding:4px;margin:0;border:none;}
    #w2bSocialFloat td iframe{max-width:82px;width:82px !important;}
    #w2bSocialFloat.w2bFloatSocial{position: fixed;top:0;z-index:9999999;border-bottom:1px solid #ccc;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Set the Top Offset
$theOffset = 0;

jQuery(document).ready(function(b){var a=b("#w2bSocialFloat");a.wrap('<div id="w2bSocialPlaceholder"></div>').closest("#w2bSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#w2bSocialFloat iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass("w2bFloatSocial"):a.removeClass("w2bFloatSocial");f=b(".post");if(f.length!=0){c=f.outerHeight()+f.offset().top;d>=c?a.stop().animate({top:"-150px"}):a.stop().animate({top:$theOffset+"px"})}else d>=e?a.css("top",$theOffset+"px"):a.css("top","0")})});
/*]]>*/
</script>
<script type="text/javascript" src="https://widcraft.googlecode.com/svn/w2b-blogger-pinit.js"></script>
<script type="text/javascript" src="https://widcraft.googlecode.com/svn/jquery.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
    // Twitter
    (function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a,d)}})(document,"script","twitter-wjs");
    // Google + (plus)
    (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
    // Stumbleupon
    (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
    // Digg
    (function(){var a=document.createElement("SCRIPT"),b=document.getElementsByTagName("SCRIPT")[0];a.type="text/javascript";a.async=true;a.src="http://widgets.digg.com/buttons.js";b.parentNode.insertBefore(a,b)})();
/*]]>*/
</script>
</b:if>

Let’s add the final Social horizontal bar widget code. Add this code before <data:post.body/> tag.

<b:if cond='data:blog.pageType == "item"'>
<div id="w2bSocialFloat" class="w2bSocialFloat">
<table width="100%" class="w2bSocialFloat">
    <tr>
        <td>
            <a href="https://twitter.com/share" class="twitter-share-button" expr:data-url="data:post.url" expr:data-text="data:post.title">Tweet</a>
        </td>
        <td>
            <iframe expr:src=""//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21"" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe>
        </td>
        <td>
            <div expr:id=""w2bPinit-" + data:post.id" style="display: none;visibility: hidden;height: 0;width:0;overflow: hidden;" class="w2bPinitButton">
                <data:post.body/>
                <script type="text/javascript">
                    w2bPinItButton({
                        url:"<data:post.url/>",
                        thumb: "<data:post.thumbnailUrl/>",
                        id: "<data:post.id/>",
                        defaultThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRFeTajLrpW3Ob3OROSkVTJHcqjYWgEQYiB7xij6-xhs-MlLu4luvA8RGzk2ZUHD_jhY0AaCJ5oPUTCHy4fj7rUwE2Y3yIyczyOFnNJwfdOEDTloXopSafrvBATwoIgLl6cLhTOi0iMN8/s1600/bigthumbnail.png",
                        pincount: "horizontal"
                    });
                </script>
            </div>
        </td>
        <td>
            <div class="g-plusone" data-size="medium" expr:data-href="data:post.url"></div>
        </td>
        <td>
            <su:badge layout="1" expr:location="data:post.url"></su:badge>
        </td>
        <td>
            <a class="DiggThisButton DiggCompact"></a>
        </td>
    </tr>
</table>
</div>
</b:if>

Save Template....That's It....

If you found the <data:post.body/> three times, then search for two lines below:

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>

Place the Widget code in between the two tags.

Friday, 4 January 2013

Adding Disqus Popular Threads Widget To Blogger

Previously i shared two Disqus widgets. Now it's time to share third widget, which is a way to show some recent popular posts/threads of your blog. I don't have much to say about it right now so let's just get started.You can also use below code on your html document or wordpress.

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

<div id="popularthreads" class="dsq-widget"><h2 class="dsq-widget-title">Popular Threads</h2><script type="text/javascript" src="http://wwefansnation.disqus.com/popular_threads_widget.js?num_items=5"></script></div>

Replace wwefansnation.disqus.com with your site's Disqus ID.
Replace 5 with the number of threads your want to display.

Now save and you're done.!!!

Disqus Popular Threads Widget For WordPress:

You can download add Disqus Popular Threads Widget to WordPress with this plugin.

Thursday, 3 January 2013

Optimizing Your Blog's Load Time

Your site's loading time is a vital factor in its ability to engage its readers. Our users don't like a site, which takes way to much time to load. Even we like Google Search because it takes very little time to load. Optimizing your blog/site's loading time is a must, and today we'll learn about it. Here comes the Service called PageSpeed Insights.

What is PageSpeed Insights?

PageSpeed Insights analyzes the content of a web page, then generates suggestions to make that page faster. Reducing page load times can reduce bounce rates and increase conversion rates.

Test Your Blog's Score

Go to PageSpeed Insights and Enter the URL and Press Analyze.After a bit of loading you will get a detailed deport discussing your site's loading time. You'll get a lot of reports on where your site's loading time is good or bad. You'll get your report in five parts:

High priority. These suggestions represent the largest potential performance wins for the least development effort.

Medium priority. These suggestions may represent smaller wins or much more work to implement.

Low priority. These suggestions represent the smallest wins. You should only be concerned with these items after you've handled the higher-priority ones.

Experimental rules. These suggestions are experimental, but do not affect the overall PageSpeed score.

Already done!. There are no suggestions for these rules, since this page already follows these best practices. Good job!

Now some very important things to consider while optimizing your Score

Combine images into CSS sprites: This becomes very important if you're using lots of icons on your site.

Optimize images: Properly formatting and compressing images can save many bytes of data.

Minify JavaScript: Compacting JavaScript code can save many bytes of data and speed up downloading, parsing, and execution time.

Place CSS in Head: Any external CSS file should be placed in the <head> tag as it helps in fast rendering of the Page

Specify image dimensions: Specifying a width and height for all images allows for faster rendering by eliminating the need for unnecessary reflows and repaints.

Remove Unused CSS and JavaScript: If you're not using a css or javascript then don't forget to remove it.

Here are several reasons of your blog's low speed

Leverage browser caching: Blogger doesn't give you access to the .htaccess file where you have to set the expiry date for your resources, making them cacheable.

Default CSS File: Blogger loads a CSS file namely bundle.css ,over which you have no control. This file contains default styling of Blogger widgets.

Slow Widgets: Remove Gadgets like Facebook Like Box and Followers Gadget, as the images of members that are loaded ,very badly effect Load Times and Page Size.

Every blog has their own different problems and some of them are their publisher networks like Clicksor. Don't forget to leave a comment with your score...!!!

Wednesday, 2 January 2013

Adding Threaded Commenting System To Blogger

Most bloggers are already using this system on their blog, but i never used it because i'am using Disqus commenting system, which is better than Blogger commenting system. My brother created a blog call My Droid Arena, and he is using this threaded system in his blog.

After using this trick your Blogger comments will have a reply option. Now let's get started:

Go To Blogger > Template > Edit HTML > Proceed.

Select (Tick) the "Expand the Widget" Box.

Search for the following code:

<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>

Once you find the above code, replace it with the following.

<b:if cond='data:blog.pageType == "static_page"'>
         <b:if cond='data:post.showThreadedComments'>
           <b:include data='post' name='threaded_comments'/>
         <b:else/>
           <b:include data='post' name='comments'/>
         </b:if>
       </b:if>
       <b:if cond='data:blog.pageType == "item"'>
         <b:if cond='data:post.showThreadedComments'>
           <b:include data='post' name='threaded_comments'/>
         <b:else/>
           <b:include data='post' name='comments'/>
         </b:if>
       </b:if>

Now go ahead and save the template. That's it for this time. You can also customize this system with some css.

Adding Disqus Top Commenters Widget To Blogger

Previously i shared Disqus Recent Comments Widget, which was an awesome way to show some recent comments and this time i'am going to share Top Commenters widget with you guys. It's a great way to show your site's most active commenters. You can also use below code on your html document or wordpress.

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

<div id="topcommenters" class="dsq-widget"><h2 class="dsq-widget-title">Top Commenters</h2><script type="text/javascript" src="http://wwefansnation.disqus.com/top_commenters_widget.js?num_items=5&hide_mods=0&hide_avatars=0&avatar_size=32"></script></div>

Replace wwefansnation.disqus.com with your site's Disqus ID.
Replace 5 with the number of commenters your want to display.
Replace hide_mods=0 with hide_mods=1 if you want to hide moderator's name from this widget.

Now save and you're done.!!!

Disqus Top Commenters Widget For WordPress:

You can download add Disqus Top Commenters Widget to WordPress with this plugin.

Tuesday, 1 January 2013

GoDaddy Promo Codes : .COM Domain For 0.99$ (Rs. 54)

GoDaddy is back with a superb discount on .COM domains. Get a .COM for just $0.99 (Rs 54). So don't waste your time and score a .COM. You can get a .COM For Rs 54 by clicking here. Happy New Year!!!

Why Choose GoDaddy? :

Go Daddy offers everything you need to make a name for yourself on the Web, from domain names and website builders to complete eCommerce solutions. GoDaddy earned their place as the world's #1 ICANN-accredited domain registrar by delivering world-class products at competitive prices and supporting them with industry-best service, delivered 24/7/365. GoDaddy is proud to serve our customers from locations around the world, including Arizona, Iowa, California, Colorado, Washington, D.C., India, Singapore, and The Netherlands.

So go and get a .COM for $0.99 only by clicking here.

Using Google Web Fonts In Blogger

Every blog needs some perfect fonts to match their content. There are lots of websites where you can get some free and paid fonts, but Google Web Fonts are totally free to use and it's hosted in Google's Server. From this tutorial you'll learn how to use these fonts on your blog, website or anywhere.

Here We Go

First go to Google Web Fonts and select your favorite style by clicking 'Quick Use.'

Now scroll down a bit and you will see a link tag code , copy this code and also copy #2 text (Web Font Family Name) as shown in image below:

Now Go To Blogger > Template > Edit HTML and paste Font Style Sheet just below <head>:

Now search and add the CSS to use this font, just before the ]]></b:skin> tag :

h1 {
font-family: WEB-FONT-NAME ;
}

Replace WEB-FONT-NAME with your web font name which we copied earlier. In this font our web font name is 'Freckle Face', cursive. So make this code like:

h1 {
font-family: 'Freckle Face', cursive;
}

Tuesday, 25 December 2012

GoDaddy Promo Codes : 76% Off On .COM

GoDaddy is back with a superb discount on .COM domains. Get 76% Off on .COM Domains which means you get a .COM for just $2.95 (Rs 162.99). So don't waste your time and score a .COM. You can get a .COM For Rs 162.99 by clicking here. Merry Christmas!!!

Why Choose GoDaddy? :

Go Daddy offers everything you need to make a name for yourself on the Web, from domain names and website builders to complete eCommerce solutions. GoDaddy earned their place as the world's #1 ICANN-accredited domain registrar by delivering world-class products at competitive prices and supporting them with industry-best service, delivered 24/7/365. GoDaddy is proud to serve our customers from locations around the world, including Arizona, Iowa, California, Colorado, Washington, D.C., India, Singapore, and The Netherlands.

So go and get a .COM for $2.95 only by clicking here.

Monday, 24 December 2012

3 In 1 Like Box Widget For Blogger - Version 5.0

Previous Versions : Version 1.0 | Version 2.0 | Version 3.0 | Version 4.0

So here is last pop-up social subscribing widget of the year. It's awesome and better than all previous widgets and you can also set appear time and other features of this widget. Happy Holidays.

You can generate this widget using our widget generator :

BigRock Promo Codes : .ASIA Domain @ Rs 99

BigRock is back with another superb discount on .ASIA domains. Get a Free Website with every .ASIA domain. Includes Web and Email Hosting for 6 months @ Rs. 99 only!!! So don't waste your time and score a .ASIA. You can get a .ASIA For Rs 99 by clicking here.

Why Choose BigRock? :

BigRock is an ICANN-Accredited Domain Name Registrar that sells Domain names at the most competitive rates in the industry. BigRock's platform powers over 6 million domains. At BigRock they have a seamless domain search process and our cheap domain registration prices are upto 80% lesser than other Registrars. Bigrock is India #1 domain registration and web hosting provider. On BigRock you can register domain names in many different name spaces including .com, .net, .org, .biz, .info, .mobi, .in, .co.in, .co.uk, .asia and many other spaces. Additionally they offer 24X7 support for all your domain registration and web hosting services. So if you are looking for Domain Registration in India look no further. BigRock is the destination for you!.

So go and get a .ASIA for Rs 99 only by clicking here.

Note : This is a limited time offer only but if this offers expires then you can always get 10% discount on domains by clicking here.

Saturday, 22 December 2012

Top 10 Google Search Trends Of 2012

It's December and 2012 has come to an end. So i wanted to post top 10 Google Search Trends/Terms. You can get all latest Google Trends of 2012 on Zeitgeist 2012.

Here are top ten terms of 2012 in all categories:

Searches

Images

Athletes

Events

People

Feature Films

TV Shows

Performing Artists

Consumer Electronics

Airlines

Google+ Hashtags

#SOPA
#Awesome
#Sandy
#IO12
#Curiosity
#Olympics
#SXSW
#Debate
#BlastFromThePast
#Eastwooding

Videos

Facebook Introduces Two New Features

Facebook has announced two new features and in my opinion these are one of the best features of the year. It's Christmas time and i guess this is a Christmas gift for us. Now let's talk above these two new features.

Multiple Photos On Status

Now you can upload more than one pic on your Facebook status. If you want to post your tour, favorite celebs and more than now you can upload them on one single status instead of creating an album.

As you can see in above picture that i have uploaded two pictures in one status (And also that I'am a WWE Fan) and you can upload more photos in it. Just click on that + sign and upload more. After posting your status your pictures will look something like:

Now as you can see in above picture my profile pic is a Black Dot and let me tell you why. In Delhi last Sunday a girl was rapped and all Indians are demanding justice and security for her and for other girls by changing their profile pic to a Black Dot.

Privacy Shortcuts

Also Facebook has a new privacy shortcut option in it's menu. Where you can control "Who can see my stuff?" , "Who can contact me?" and "How do i stop someone from bothering me?" . You can control all your privacy under this option.

That's it for now and hopefully i except that Facebook will launch more new features in 2013 and also i wish you a very Happy Holidays!!

Friday, 21 December 2012

Facebook Events Widget For Blogger

Facebook event is a really good way to remind your fans and friends of some important events of your life and Facebook has bunch of useful plugins/widgets for websites and blog but still there is no events widget yet. Thanks to BandRx now you can also embed your upcoming events on your blog or website. It's simple you can generate your widget code at BandRx or you can also use by our tutorial.

<iframe src="http://www.bandrx.com/facebook/events.php?theme=zuck&page=PAGEUSERNAME&bgcolor=ffffff&textcolor=000000&linkcolor=555555&max=5" width="320" height="520" frameborder="no" scrolling="auto"></iframe>

Just replace red text in above code with your Facebook page username and it's done...now i hope you guys know how to add this widget to your blogger. You can also use this plugin on wordpress and all html sites.

Thursday, 20 December 2012

Styling Blogger Static Pages

In some points Static pages should look different than all other posts of our blog. We all use static pages for our forms, forums and all other stuff. They all need a big space and in this tutorial i'll tell you how to apply custom style on your blogger static pages. First make sure you have some basic css and html knowledge:

Go To Blogger > Template > Edit HTML

Search for <body>

Copy the code below and paste it right after <body>:

<b:if cond='data:blog.pageType == "static_page"'>
<style>
.blog-pager, .footer, .post-footer, .feed-links, .sidebar, #rsidebar { display:none !important;}
#main-wrapper {width: 95%; float:none; margin: 0 auto !important;}
</style>
</b:if>

Now between <style> ... < /style> add id or class of thing that you want to hide on your static pages.

You can also add background color, and so many things to style your static pages....If you're having any problems then please leave a comment.

Wednesday, 19 December 2012

How To Customize Google Drive Form

First of all this article is from Immersion Media. It's a very useful article and don't forget to visit their site. Before trying this you need some basic html and css knowledge so first get some lessons then come here.

If you're wondering how to create forms using Google Drive/Docs then you can learn it by clicking here.

Now let's get to our topic. It's very useful and i hope you'll use it in good way.

After creating your form visit your form and Right click on page and select view source from menu. Copy form code by selecting everything between the <form>…</form>tags. See example below. You can also include the JavaScript at the end. This will be the form field validation.

Paste code in a new page/document.

This step is optional, but since you’ve taken the time to stylizing your form, you might as well create a nice confirmation page. After creating a confirmation page, replace the <form> tag of your form page and replace it with the JavaScript listed below.

Find and Replace this:

<form action="YOUR-GOOGLE-SPREADSHEET-LINK" method="POST">

With this:

<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe"
style="display:none;" onload="if(submitted)
{window.location='http://CONFIRMATION-PAGE.html';}"></iframe>
<form action="YOUR-GOOGLE-SPREADSHEET-LINK" method="post"
target="hidden_iframe" onsubmit="submitted=true;">

Even though the form is no longer hosted on Google, form submissions will continue to be posted to your Google Drive/Docs account. Hope this will help you.....

Saturday, 2 February 2013

Thursday, 31 January 2013

Tuesday, 29 January 2013

Wednesday, 23 January 2013

Sunday, 20 January 2013

Saturday, 19 January 2013

Wednesday, 16 January 2013

Wednesday, 9 January 2013

Saturday, 5 January 2013

Friday, 4 January 2013

Thursday, 3 January 2013

Wednesday, 2 January 2013

Tuesday, 1 January 2013

Tuesday, 25 December 2012

Monday, 24 December 2012

Saturday, 22 December 2012

Friday, 21 December 2012

Thursday, 20 December 2012

Wednesday, 19 December 2012

Popular Posts

Admin Control Panel

Contact Us

Like Us!

Recent Posts

Disqus

Labels

About Me

Blog Archive

Subscribe