Vtube all about Technology

Monday, 20 January 2014

The Sky of Verdun 3D - dogfight in HTML5

Came across this seemingly fun little game over here, too bad I don't have a Occulus Rift (yet):

Check their page for the Win32 and browser server/client download.

Friday, 17 January 2014

Google use Google-Sites, so we should too!

This QuickTip explains why I now feel happier about using elements from Google Sites in my blogs.

What is Google Sites, and why would a Blogger use it

Long ago (back in the late 2000's) there was a product called Google Pages, which people could use to make their own simple websites. It wasn't the greatest product that Google ever made (or purchased), and eventually it was retired, with websites made with Pages transferred over to the newer Google Sites.

Sites always seemed a bit clunky. It doesn't seem to have a huge number of users. And there are vastly better products for building more-complex websites, and for building simple ones (eg using Blogger to make a "real" website).

Now, I did use a Sites filing cabinet as the document-store for one of my sites that makes lyrics of certain public domain songs available in PowerPoint format. I chose it before Google Drive had been released, and when Docs was not nearly as good as it is now. And SEO does matter for this blog, so I came to appreciate that the link to a file in sites includes the file-name.

But I've always had a nagging sense that one day Sites would be retired too, and I'd have to move my files and edit all my posts to re-set the links.

Why won't Google retire Google Sites

Despite my previous misgivings, I'm now feeling a lot more relaxed about Google Sites.

Why? Well I don't have a crystal ball. But this recent post from the Google Testing blog talks about how they are into "dogfooding" and that Sites is one of the tools they do this with, to " host team pages, engineering docs and more"

Just to explain, "dogfooding" is corporate-jargon for using your own products. As in "eating your own dogfood". It's sometimes called "drinking your own chapmpagne" in companies that see themselves as a bit more refined, or "eating your own cooking".

Google's post is telling us that they are using Sites for building tools that they use in their own work. Most likely, they have a website built in Sites, which manages their plans for future Blogger development, and available only to people inside the company and working on the Blogger project.

So that makes me feel reassured that most likely:

Sites won't be canned any time soon, or
If Sites is turned off, Google will have a replacement tool which will provide the same (and better) features, and they will convert items now built in Sites to this better tool.

Phew!

Maybe it's time to review my file-hosting approach again, or to re-visit Sites and look at their FAQs, home-page and support-community, to see what other Sites tools I might find useful.

How have you used Sites in conjunction with your blog?

File-hosting options: places to store files that you share from your blog

Why SEO doesn't matter for lots of bloggers

Thursday, 16 January 2014

How to Add an Admin Control Panel in Blogger

A while ago I posted some tutorials on how you can remove the Blogger Navbar or add a Peek A Boo Effect so that it would show only when we mouse over on top of our page.

However, customizing or removing the Blogger Navbar also has its downside because the admin links for "New post", "Customize" and "Log Out" will be no longer visible and navigating through the blog functions could be really frustrating sometimes. When the navbar is visible, blog administrators can easily create a new post or customize their template with just one click; however, when the navbar is hidden, many more clicks are required to access the Blogger dashboard panel again.

In this tutorial, we'll see how to add an "Admin Control Panel" menu with many cool additions such as:

access to the Blogger's Homepage
create a New Page or Post
view all your posts
read your comments
access the Blog's layout to add or rearrange gadgets
edit the HTML of your Template
refresh current page or post
open a new tab with your blog's homepage
access the blog' settings
view your stats
log out

We will put all these options on the top of your page as a menu and we will make it visible only to the administrator of the blog, so our blog visitors will not be able to see it.

The result will look something like this:

Adding Admin Control Panel to Blogger template

The Admin Control Panel will only be visible when the blog author is logged in and will not display to blog readers, same with the Post Edit or widget pencil icons which are only visible to you while you are logged in.

To add the admin panel to Blogger, follow the steps below:

Step 1. Go to "Template" and click on the "Edit HTML" button:

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger' search box

Step 3. Paste this line inside the search box then hit Enter to find it:

<body expr:class='"loading" + data:blog.mobileClass'>

Note: if you can't find this line, try to find the <body> tag.

Step 4. Just below that line or tag, add the following code:

<span class='item-control blog-admin'>
<style>
.control-panel ul{z-index: 20; position: absolute; margin: 0px auto; background-color: #F6F6F6; width: 100%; }
.control-panel ul li{display: inline-block; float: left; padding: 7px 0px;}
.control-panel ul li a {color:#686868;padding: 7px 15px;border-right: 1px solid #E3E3E3;font-weight: bold;font-size: 13px;}
.control-panel a:hover {text-decoration:none; color:#FC8F44;}
</style>
<div class='control-panel'>
<ul>
<li><a href='http://www.blogger.com/home'>My Blogs</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#editor/src=sidebar"' rel='nofollow'>New Post</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#editor/target=page"' rel='nofollow'>New Page</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#posts"' rel='nofollow'>All Posts</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#comments"' rel='nofollow'>Comments</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#pageelements"' rel='nofollow'>Layout</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#templatehtml"' rel='nofollow'>Edit HTML</a></li>
<li><a href='#' onclick='location.reload(true); return false;'>Refresh</a></li>
<li><a href='/' target='_blank'>New Tab</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#basicsettings"' rel='nofollow'>Settings</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#overviewstats"' rel='nofollow'>Stats</a></li>
<li><a href='http://www.blogger.com/logout.g'>Logout</a></li>
</ul>
</div>
</span>

Step 4. Click on the "Save template" button to save the changes.

Now take a look on your blog. While you are logged in to Blogger, you should notice your control panel appear on top of your blog. Enjoy!

With this admin control panel for Blogger you can easily access the functions of the blog and you will not have to always open your blog page and the Blogger homepage at the same time.

How to Add Adsense Ads In the Middle or Anywhere inside Blogger Posts

In a previous post, we saw how and where we can place Adsense ads on our blog; however, these methods would only work when we place the ads on predetermined and fixed locations. For posts area, the most common places are below the title, at the beginning of the post or at the end of it.

But what if we want to display an AdSense ad in the middle of a post?

We can manipulate the location of the ads to be displayed by adding a script inside the template and using a tag inside our post to where we want the AdSense ad to appear. Once added, we can place the ads anywhere, be it between paragraphs or in the middle of the content etc.

Related: Insert AdSense inside posts after the first paragraph

Manually inserting AdSense ads in the middle of posts in Blogger is pretty easy, just follow these steps below:

Adding Adsense Ads In the Middle or Anywhere inside Blogger Posts

Before proceeding, it is recommended to backup your template: go to "Template" and click on the "Backup/restore" button to save a copy on your hard drive.

Adding the script

Step 1. First thing we need to do is to parse the AdSense code and convert it to plain text. Then go to "Template", click on the "Edit HTML" button and click anywhere inside the code area to search using CTRL + F keys for this tag:

<data:post.body/>

Note: you may find it several times, but we need to stop at the second one. Or, if you can't see any changes, test the third one.

Step 2. Replace <data:post.body/> with this code:

<div expr:id='"adsmiddle1" + data:post.id'></div>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div style="clear:both; margin:10px 0">

</div>
</b:if>
</b:if>
<div expr:id='"adsmiddle2" + data:post.id'>
<data:post.body/>
</div>
<script type="text/javascript">
var obj0=document.getElementById("adsmiddle1<data:post.id/>");
var obj1=document.getElementById("adsmiddle2<data:post.id/>");
var s=obj1.innerHTML;
var r=s.search(/\x3C!-- adsense --\x3E/igm);
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>

Step 3. Add the converted Adsense code on where you see the  annotation, then save the changes by clicking on the "Save template" button.

Note: For centering the ads, add the <center></center> tags before and after the AdSense code, like this:

<div style="clear:both; margin:10px 0">
<center>

</center>
</div>

Adding the AdSense annotation to display the ad

Step 4. When you create a New Post, add this annotation inside the "HTML" section to where you want the Google AdSense ads to appear:

For example:

This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text.<br /><br /> This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text.

AdSense annotation in the middle of the post content

Please note that if you don't add this annotation to specify where to display the ad, then it will appear below the title by default.

So this is how we can add AdSense ads in the middle or anywhere inside our Blogger posts. Don't worry about violating the Google's Terms of Service because applying this method will not modify the ad' structure.

Monday, 13 January 2014

How to create click events using CSS

An event is something that happens when we do something. In CSS, the most common is the hover selector which helps us to select elements when we mouse over them and then an event is executed automatically. There is one way to avoid this since in modern browsers there is a property called pointer-events which allows us to disable them. For instance, if we have a link and we set the pointer-events property value to none, it would simply not work:

<a href="page-url" style="pointer-events: none;">Click here</a>

Many use :target to make it work, however, this is not always the best choice if we consider its jumping behavior - click on the link below to see what happens:

Link with target

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu cursus dui, ac fermentum eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce elementum sapien et augue fringilla aliquam. Ut a viverra libero, eget commodo nisi. Maecenas ultrices facilisis dignissim.

<style>
#linktarget {display: none;}
#linktarget:target {display: block;}
</style>
<a href="#linktarget">Link with target</a>
<div id="linktarget">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu cursus dui, ac fermentum eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce elementum sapien et augue fringilla aliquam. Ut a viverra libero, eget commodo nisi. Maecenas ultrices facilisis dignissim.
</div>

Another option is to use the :focus selector which will make the hidden content to expand on mouse click.
The advantage of this selector is that the page stays still, however, we have to click anywhere "outside" to close the expanded content and besides this, the hidden content should be immediately after, with no intermediate tags:

Demo with focus

<style>
.focuselector {display: none;}
span:focus ~ .focuselector {display: block;}
</style>
<span tabindex="0">Link with focus</span>
<div class="focuselector">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu cursus dui, ac fermentum eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce elementum sapien et augue fringilla aliquam. Ut a viverra libero, eget commodo nisi. Maecenas ultrices facilisis dignissim.
</div>

The last method is more fancy even though it requires more tags but it works the best since it allows us to create a toggle effect, i.e., expand on click and then collapse when clicking again. In this case, we'll use the :checked selector:

Demo with checked

<style>
.checked-selector {display: none;}
:checked ~ .checked-selector {display: block;}
input.hidden[type=checkbox] {position: absolute;left: -999em;}
</style>

<label for="toggle-hidden">Demo with checked</label>
<input type="checkbox" id="toggle-hidden" class="hidden" />
<div class="checked-selector">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu cursus dui, ac fermentum eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce elementum sapien et augue fringilla aliquam. Ut a viverra libero, eget commodo nisi. Maecenas ultrices facilisis dignissim.
</div>

To apply these effects on the links and content that you want to hide and expand only on mouse click is very easy: when you create a post, paste one of the codes above inside the HTML box and replace the text in blue with the name of your link and add your text instead of the green one.