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.

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.... :)

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)

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.

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...

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:

<!-- Start www.BWidgets.com: Changing the Blogger Title Tag -->
<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.

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:

<!-- Disqus comments gadget -->

• 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'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <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 = &#39;EXAMPLE&#39;;
                var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;

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

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

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

                <script type='text/javascript'>
                    (function() {
                        var bloggerjs = document.createElement(&#39;script&#39;);
                        bloggerjs.type = &#39;text/javascript&#39;;
                        bloggerjs.async = true;
                        bloggerjs.src = &#39;http://&#39;+disqus_shortname+&#39;.disqus.com/blogger_item.js&#39;;
                        (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[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(&#39;script&#39;);
                    bloggerjs.type = &#39;text/javascript&#39;;
                    bloggerjs.async = true;
                    bloggerjs.src = &#39;http://&#39;+disqus_shortname+&#39;.disqus.com/blogger_index.js&#39;;
                    (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[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 == &quot;item&quot;'>
<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 == &quot;item&quot;'>
<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="&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe>
        </td>
        <td>
            <div expr:id="&quot;w2bPinit-&quot; + 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 == &quot;item&quot;'>
<data:post.body/>

Place the Widget code in between the two tags.