Vtube all about Technology

Monday, 3 June 2013

Hedgewars 0.9.19 released

Everyone's favorite clone of worm-warfare, Hedgewars recently got a rather big new release as one of the developers pointed out to us by email.

One of the new level themes for Hedgewars 0.9.19

The changes are quite extensive, so instead of failing to summarize them here, check out the above linked quite extensive original release announcement.

You can also have a look at this fan-made trailer if you enjoy cheezy stuff ;)

Sunday, 2 June 2013

Top 10 Best Shooter Games for Android

After the series of the best Top 10 Best Android Games for Android Smartphone and Top 10 Best Android Games of 2013, now we are going to focus on the top 10 best Shooters game for Android users. Shooting games are always one of the most favorite choices for the video game enthusiasts and they are always my favorite too. At present Google Play Store is flooded with a bunch of various shooter games and to help you choose from some of the best I am providing the list of top 10 best Shooter Games for Android, just read that to know if your favorite game is listed here! Jump in the heat of battle and push your Android device to the limit!

Frontline Commando

This is one of the most popular shooting games for Android users. As the sole surviving Commando of a renegade attack against a ruthless dictator, you are stranded on the frontline and hell-bent on payback. You must use all of your specialized skills to survive the onslaught of the enemy forces and avenge your fallen soldiers. This game is absolutely free to install, so just download it to have a try.

Deer Hunter Reloaded

The most REALISTIC and AUTHENTIC hunting sim returns. It's time to reload your rifles and take to the wilds of North America to bag the BIGGEST GAME out there. The game is free to play, but you can choose to pay real money for some extra items.

Six-Guns

With this game, you can explore a truly enormous and open Wild West frontier full of cowboys, bandits and more. Take on 40 missions with a great variety of tasks for you to overcome. You’ll race horses, take out robbers, fend off waves of enemies and more along the way! Free games have never been this deep or fun! It costs you nothing to download and play the game to the end!

Dead Trigger

Billions of people died from a strange virus, while others turned into butcherly beasts with just one thought: TO KILL! Only a few people on the planet have survived, at least until they run out of ammo... or learn how to stop them... This game has Stunning graphics with advanced lighting and post-process effects. And it is full of 3D characters and environments with an unprecedented level of detail.

Critical Strike Portable

Critical Strike Portable (CS Portable) delivers the nostalgic Counter-Strike style gaming experience on your Android smartphone and tablet! You can enjoy the smooth and customizable touch controls and play the exciting cross-platform first-person shooter against other players on the web and on other mobile platforms. The gameplay and graphics are absolutely incredible.

N.O.V.A 3
First, Note that N.O.V.A. 3 - Near Orbit Vanguard Alliance needs 2GB of free memory to install.

Get ready to fight for the survival of the human kind in the greatest space shooter on mobile devices! Amazing graphics and a strong storyline behind the concept of N.O.V.A makes it a great choice. This is a paid game brought to you by the popular developer Gameloft. You can play this game with your friends with its innovative multiplayer features.

Contract Killer 2

Contract Killer is a new entry in the list of the best shooting games for Android. You are Jack Griffin, the ultimate Contract Killer. The story theme of this game revolves around the concept of contract killing and assassination of gangs. This game offers a bunch weapons and moves which create a unique experience. To survive in this line of work, you have to sneak your way in, shoot your way out!

Contract Killer Zombies 2

Free to Play and Contract Killer is the Free-Movement Third-Person Action shooting Games. Game offers very High quality Rich 3D Graphics. Step into the role of Evelyn as she tries to clear out the Savehaven Research Center from the hordes of zombies and reveal the mystery behind the outbreak. Use a variety of deadly guns, grenades and melee weapons to kill zombies!

Modern Combat 3
This game requires 1.37 GB of free storage space.

Why we love it: Experience different types of gameplay: escort, destroy, helicopter, 4×4 chase, etc. Fight through a 13-mission campaign from Los Angeles to Pakistan. Enter multiplayer battles for up to 12 players in 6 exclusive maps and 7 different modes.

Shadowgun

Shadowgun: DeadZone is one of the sharpest-looking shooters. Excellent graphics, mind blowing story and fluid controls emphasize the user to spend hours on this game. It is a paid game but it can surely worth the value. The only reason that makes it a bit low in the ranking is the fact that this game is OLD, it is undoubtedly the best choice but it is very common now. If you haven’t tried it yet, then I will surely recommend you to give it a shot.

Let us know if we missed your favorite shooter games, so we can check it out and maybe add it to the list next time.

Horizontal menu with sub-tabs in two columns for Blogger

This is a very nice horizontal menu in which its sub-tabs are displayed in two columns and is also made with CSS, without any scripts.

blogger navigation menu, css menu, drop-down menu

The "advantage" so to speak, is that the sub-tabs when arranged in two columns are not very long, so it will be neat and less space along. You can see an example here:

Adding A Horizontal Menu With Sub Tabs in Two Columns To Blogger

STEP 1: In Blogger, go to your "Layout" and on the "Page Elements" section.

Click on the "Add a Gadget" link just under your header image
From the Gadget's List, select "HTML/JavaScript" option.

STEP 2: Simply copy and paste this ENTIRE code into your widget. Note: Leave the "Title" section of this widget blank.

<div id='menucol'>
<div id='topwrapper'>
<ul id='top'>
<li><a href='http://YOUR URL HERE.com'>Tab 1 Title Here</a></li>
<li><a href='http://YOUR URL HERE.com'>Tab 2 Title Here</a></li>
<li><a class='submenucol' href='#'>Tab 3 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.3</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.4</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.5</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.6</a></li>
</ul>
</li>
<li><a class='submenucol' href='#'>Tab 4 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.3</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.4</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.5</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.6</a></li>
</ul>
</li>
<li><a class='submenucol' href='#'>Tab 5 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.3</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.4</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.5</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.6</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.7</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.8</a></li>
</ul>
</li>
<li><a href='http://YOUR URL HERE.com'>Tab 6 Title Here</a></li>

</ul>
<br class='clearit'/>
</div>
</div>

Customize your main tabs by changing the Tab Titles to whatever you want. Include a URL for each one if you want it to be 'clickable'. If not, you can just put a # sign where it says http://YOUR URL HERE.com

You can add or delete as many of the main tabs as you need, just make sure to copy the entire code for the main tab for each additional tab you want:

<li><a href='http://YOUR URL HERE.com'>Tab 7 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 7.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 7.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 7.3</a></li>
</ul>
</li>

STEP 3: Now let's go a step further and add the CSS style in our Template

Go to Template > Edit HTML

Click on the sideways arrow next to <b:skin>...</b:skin>

Then click anywhere inside the code area and search - using CTRL + F keys - for the ]]></b:skin> tag and just above ]]></b:skin> add this code:

/* Horizontal menu with 2 columns
----------------------------------------------- */
#menucol {
width:940px;
height:37px;
background-image: -moz-linear-gradient(top, #666666, #000000);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #666666), color-stop(1.0, #000000));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#666666,endColorStr=#000000);
border-bottom:1px solid #666666;
border-top:1px solid #666666;
margin:0 auto;padding:0 auto;
overflow:hidden;
}
#topwrapper {
width:940px;
height:40px;
margin:0 auto;
padding:0 auto;
}
.clearit {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;
}
#top {
width:100%;
}
#top, #top ul {
padding: 0;
margin: 0;
list-style: none;
}
#top a {
border-right:1px solid #333333;
text-align:left;
display: block;
text-decoration: none;
padding:10px 12px 11px;
font:bold 14px Arial;
text-transform:none;
color:#eee;
}
#top a:hover {
background:#000000;
color:#F6F6F6;
}
#top a.submenucol {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglOMF7WCD17mDXeBoUhzFm8y-8iTrSG8navJXXmCK7FlpG4Etvw_pLFhgzx2YwGoBrClBANNFsAvxOIESbHuRx2yivtOm7VaZdMBFA33NxwUJoAMtDllQcYsuiEeOI6vPvmbwwcfFYH2s/s1600/arrow_white.gif);
background-repeat: no-repeat;
padding: 10px 24px 11px 12px;
background-position: right center;
}
#top li {
float: left;
position: relative;
}
#top li {
position: static !important;
width: auto;
}
#top li ul, #top ul li {
width:300px;
}
#top ul li a {
text-align:left;
padding: 6px 15px;
font-size:13px;
font-weight:normal;
text-transform:none;
font-family:Arial, sans-serif;
border:none;
}
#top li ul {
z-index:100;
position: absolute;
display: none;
background-color:#F1F1F1;
margin-left:-80px;
padding:10px 0;
border-radius: 0px 0px 6px 6px;
box-shadow:0 2px 2px rgba(0,0,0,0.6);
filter:alpha(opacity=87);
opacity:.87;
}
#top li ul li {
width:150px;
float:left;
margin:0;
padding:0;
}
#top li:hover ul, #top li.hvr ul {
display: block;
}
#top li:hover ul a, #top li.hvr ul a {
color:#333;
background-color:transparent;
text-decoration:none;
}
#top ul a:hover {
text-decoration:underline!important;
color:#444444 !important;
}

Now find (CTRL + F) this line:

/* Tabs

It will also have some little lines beneath:

/* Tabs
----------------------------------------------- */

And just below these little lines, delete the code below until you reach at:

/* Columns
----------------------------------------------- */

Instead of the code that you have removed, add this one:

#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}
.tabs-inner {padding: 0 0px;}

See this screenshot for more info:

menu for blogger, blogger gadgets, blogger widgets

STEP 4: The final step is to Save the Template and you are done!

Visit your blog to see a beautiful navigation menu just below header.
If you have any questions or need help, leave a comment below.

Fade In/Out Page Loading Effect On Blogger Posts

A very common effect in jQuery is the fade effect that hides or shows an element by fading it, and we can use it in many ways as for example in the blog's navigation. The following script does just that, by loading the page with a fading effect when we browse on internal links that are in the blog, such as post titles, labels links, archive, navigation links, etc..

jQuery effect, fade in effect, blogger jQuery

You can see an example in this demo blog, click on the title of any post and see the fading effect when the page is loading.

How To Implement the Fade In Loading Effect

1) To put this fading effect on your blog, go to your Template > Edit HTML :

fading effect, blogger blogspot, blogger tricks

2) Click anywhere inside the code area and search for the </head> tag using CTRL + F keys:

3) Then, just above </head> add the following code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$("body").css("z-index", "-10");
$("body").fadeIn(0);

$("a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(500, redirectPage); });
function redirectPage() {
window.location = linkLocation;
}
});
//]]>
</script>
<style>
html {
background-color: #F2F2F2; /* Color fading */
}
</style>

4) Save the changes and that's it. In green you can see where to change the color that fades on a loading page.

The original script hides the body of the page while loading, I prefer to change that property with a negative z-index to avoid problems with the search engine robots that may effect the positioning.

Problems?

Consider that such effects could increase the blog loading time, so I recommend using it only when your blog loads fast and does not have too many scripts.

If you already use another version of jQuery remove the other, leaving only this which will be readed first.

If you are using Mootools or Scriptaculous, then you have to make some modifications to the code in order to be compatible.
If you have another script with a fade effect, then it could interfere with this and you might not see anything on the page except the color fading, in such cases it is better without this script.

You can also use this effect only on some links, for example, if you want to appear only when you click on the post titles in the navigation links (older posts and newer posts), and on the top tabs, then replace this line:

$("a").click(function(event){

With this:

$(".post-title a, .blog-pager-older-link, .blog-pager-newer-link, .tabs").click(function(event){

In some cases, the page can load for a second and then load with the fade effect, this may be "normal" because the browser is slow to read the script on page load.

Apart from these drawbacks, I think it's a very elegant way to load blog pages while browsing them, don't you think?

Saturday, 1 June 2013

Using the :before and :after Pseudo Elements on Sidebar Titles

This is another method of using the :after and :before properties and it will work without too many problems in any browser, including IE8. What this trick will do is to divide the header bar into left and right sections, where the left will contain an explanatory title and the right, a related link.

The idea of generating Adobe-like Arrow Headers was actually discussed by css-tricks and adapted to Blogger.

How to Add Adobe-like Headers to Blogger

Step 1. Log in to your Blogger dashboard > go to Template > Edit HTML, then click anywhere inside the code area to search - using the CTRL + F keys - for the following tag:

</head>

Step 2. Just above it, copy and paste this code:

<style>
.module h2 {
background-color: #D5D5D5;
border-radius: 20px 0 0 20px;
color: #FFFFFF;
font-family: Verdana;
font-size: 14px;
line-height: 32px;
margin: 0;
padding: 0 0 0 20px;
text-shadow: 2px 1px 1px #222;
}

.module h2 a {
    border-left: 5px solid #ffffff;
    color: #101921;
    float: right;
    font-size: 14px;
    text-decoration: none;
    text-shadow: none;
    padding: 0 10px;
    position: relative;
   -moz-transition: padding 0.1s linear;
   -webkit-transition: padding 0.1s linear;
   -ms-transition: padding 0.1s linear;
   -o-transition: padding 0.1s linear;
}
.module h2 a:hover {
padding: 0 32px;
}

.module h2 a:before, .module h2 a:after {
    content: "";
    height: 0;
    position: absolute;
    top: 50%;
    width: 0;
}
.module h2 a:before {
    border-bottom: 8px solid transparent;
    border-right: 8px solid #ffffff;
    border-top: 8px solid transparent;
    left: -12px;
    margin-top: -8px;
}
.module h2 a:after {
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    left: -6px;
    margin-top: -6px;
}

.module.blue h2 a {background-color: #A2D5EC;}
.module.blue h2 a:hover {background-color: #C5F0FF;}
.module.blue h2 a:after {border-right: 6px solid #A2D5EC;}
.module.blue h2 a:hover:after {border-right-color: #C5F0FF;}

.module.yellow h2 a {background-color: #FCE98D;}
.module.yellow h2 a:hover {background-color: #FFD700;}
.module.yellow h2 a:after {border-right: 6px solid #FCE98D;}
.module.yellow h2 a:hover:after {border-right-color: #FFD700;}

.module.green h2 a {background-color: #bada55;}
.module.green h2 a:hover {background: #C7E176;}
.module.green h2 a:after {border-right: 6px solid #bada55;}
.module.green h2 a:hover:after {border-right-color: #C7E176;}

.module.red h2 a {background-color: #F0A5B5;}
.module.red h2 a:hover {background-color: #FFC7D2;}
.module.red h2 a:after {border-right: 6px solid #F0A5B5;}
.module.red h2 a:hover:after {border-right-color: #FFC7D2;}
</style>

Step 3. Save the Template.

Screenshot:

Step 4. Now go to Layout and Add a new HTML/JavaScript Gadget with one of the codes below for each of the widget title:

Background in blue:

<div class="module blue">
<h2>Title in <a href="Link URL">Blue</a></h2>
</div>

Background in yellow:

<div class="module yellow">
<h2>Title in <a href="Link URL">Yellow</a></h2>
</div>

Background in green:

<div class="module green">
<h2>Title in <a href="Link URL">Green</a></h2>
</div>

Background in red:

<div class="module red">
<h2>Title in <a href="Link URL">Red</a></h2>
</div>

Note: Change "Title in" text with your widget's title and Blue, Yellow, Green and Red with the text on the right, then add a Link URL to it.
Step 5. After you saved the HTML/Javascript gadgets containing the codes above, drag and drop them just above the widgets you want to show... and Save the Arrangement.

DEMO

You can see how the sidebar titles has been replaced with some cool header bars on this demo blog.