Vtube all about Technology: January 2014

Friday, 31 January 2014

Create a CSS3 Image Hover Effect with Animated Vinyl Record

Here is an amazing CSS image effect to reveal more information on your images with a really cool CSS3 hover animation. This is just perfect for blogs dedicated to music or if you just want to show off the music that you love.

So, what we will do in this tutorial is to take an image for our album cover, add some fancy CSS3 transitions and transforms that, on hover, will slide out a pure CSS vinyl record behind it. Finally, we will add some basic HTML to our post or page where we need to apply this amazing effect.

Demo: hover over the album cover and see how CSS reveals further information:

The Wall is the eleventh studio album by the English progressive rock group Pink Floyd.

How to Apply The Animated Vinyl Record on Blogger Images

Step 1. From your Blogger's Dashboard, go to "Template" > click on the "Edit HTML" button:

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

Step 3. Type or paste inside the search box the tag below and hit Enter to find it:

]]></b:skin>

Step 4. Just above ]]></b:skin> add the following code:

Click to expand the code

.info {
position: absolute;
z-index: 3;
top: 20%;
zoom: 1;
filter: alpha(opacity=0);
opacity: 0;
padding: 10px;
text-align: center;
color: #eee;
font-size: 13px;
font-weight: bold;
background: #333;
background: rgba(0,0,0,.7);
-moz-transition:all linear 0.5s 0s;
-webkit-transition:all linear 0.5s 0s;
transition:all ease 0.5s 0s;
}
.case:hover .info, .case:hover .vinyl {
filter: alpha(opacity=100);
opacity:1;
}
.case {
position:relative;
display:block;
width:185px;
height:185px;
-webkit-border-radius:3px;
border-radius:3px;
z-index:2;
-webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
margin:0 auto;
}
.case:after {
position:absolute;
display:block;
content: "";
width:265px;
height:10px;
left:-40px;
bottom:-8px;
z-index:1;
background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 50%, rgba(225,225,225,0) 51%, rgba(246,246,246,0) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.45)), color-stop(50%,rgba(0,0,0,0)), color-stop(51%,rgba(225,225,225,0)), color-stop(100%,rgba(246,246,246,0)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.45) 0%,rgba(0,0,0,0) 50%,rgba(225,225,225,0) 51%,rgba(246,246,246,0) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.45) 0%,rgba(0,0,0,0) 50%,rgba(225,225,225,0) 51%,rgba(246,246,246,0) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.45) 0%,rgba(0,0,0,0) 50%,rgba(225,225,225,0) 51%,rgba(246,246,246,0) 100%);
    background: radial-gradient(center, ellipse cover, rgba(0,0,0,0.45) 0%,rgba(0,0,0,0) 50%,rgba(225,225,225,0) 51%,rgba(246,246,246,0) 100%);
}
.case .cover{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:2;
-webkit-border-radius:3px;
border-radius:3px;
-webkit-box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.6);
box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.6);
}
.case .overlay{
position:absolute;
display:block;
top:0;
left:0;
z-index:3;
width:100%;
height:100%;
-webkit-box-shadow: inset 1px 1px 4px 0px rgba(255, 255, 255, 0.45),inset 1px 1px 2px 0px rgba(255,255, 255, 0.5),inset -1px -1px 2px 0px rgba(255,255, 255, 0.5);
    box-shadow: inset 1px 1px 4px 0px rgba(255,255, 255, 0.45),inset 1px 1px 2px 0px rgba(255,255, 255, 0.5),inset -1px -1px 2px 0px rgba(255,255, 255, 0.5);
-webkit-border-radius:3px;
border-radius:3px;
border:1px solid rgba(0, 0, 0, 0.35);
}
.case .overlay:before{
    position:absolute;
    display:block;
    content: "";
    top:0;
    left:0;
    z-index:4;
    width:100%;
    height:100%;
    background: -moz-linear-gradient(-55deg, rgba(255,255,255,0.1) 0%, rgba(244,244,244,0.35) 50%, rgba(225,225,225,0) 51%, rgba(246,246,246,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0.1)), color-stop(50%,rgba(244,244,244,0.35)), color-stop(51%,rgba(225,225,225,0)), color-stop(100%,rgba(246,246,246,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0.1) 0%,rgba(244,244,244,0.35) 50%,rgba(225,225,225,0) 51%,rgba(246,246,246,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg, rgba(255,255,255,0.1) 0%,rgba(244,244,244,0.35) 50%,rgba(225,225,225,0) 51%,rgba(246,246,246,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg, rgba(255,255,255,0.1) 0%,rgba(244,244,244,0.35) 50%,rgba(225,225,225,0) 51%,rgba(246,246,246,0) 100%); /* IE10+ */
    background: linear-gradient(-55deg, rgba(255,255,255,0.1) 0%,rgba(244,244,244,0.35) 50%,rgba(225,225,225,0) 51%,rgba(246,246,246,0) 100%); /* W3C */
    -webkit-border-radius:3px;
    border-radius:3px;
}
.vinyl {
    position:absolute;
    z-index:1;
    bottom:4px;
    left:5px;
    display:block;
    width:175px;
    height:175px;
    border-radius:200px;
    background: -moz-linear-gradient(top, rgba(45,45,45,1) 0%, rgba(0,0,0,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(45,45,45,1)), color-stop(100%,rgba(0,0,0,1)));
    background: -webkit-linear-gradient(top, rgba(45,45,45,1) 0%,rgba(0,0,0,1) 100%);
    background: -o-linear-gradient(top, rgba(45,45,45,1) 0%,rgba(0,0,0,1) 100%);
    background: -ms-linear-gradient(top, rgba(45,45,45,1) 0%,rgba(0,0,0,1) 100%);
    background: linear-gradient(top, rgba(45,45,45,1) 0%,rgba(0,0,0,1) 100%);
    -webkit-box-shadow: inset 0px 1px 3px 0px rgba(255, 255, 255, 1);
    box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.35), inset 0px -1px 1px 0px rgba(255, 255, 255, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.4);
    border:1px solid #595959;
    transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -webkit-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
}
.case:hover .vinyl {
    animation: spin 600ms ease-in-out;
    -moz-animation: spin 600ms ease-in-out;
    -webkit-animation: spin 600ms ease-in-out;
    left:98px;
}
.vinyl:before {
    position:absolute;
    display:block;
    content: "";
    width:100%;
    height:100%;
    border-radius:100%;
    background: -moz-radial-gradient(center, ellipse cover, rgba(38,38,38,0.4) 0%, rgba(89,89,89,0.4) 1%, rgba(35,35,35,0.4) 2%, rgba(86,86,86,0.4) 3%, rgba(35,35,35,0.4) 4%, rgba(86,86,86,0.4) 5%, rgba(35,35,35,0.4) 6%, rgba(86,86,86,0.4) 7%, rgba(35,35,35,0.4) 8%, rgba(86,86,86,0.4) 9%, rgba(35,35,35,0.4) 10%, rgba(86,86,86,0.4) 11%, rgba(35,35,35,0.4) 12%, rgba(86,86,86,0.4) 13%, rgba(35,35,35,0.4) 14%, rgba(86,86,86,0.4) 15%, rgba(35,35,35,0.4) 16%, rgba(86,86,86,0.4) 17%, rgba(35,35,35,0.4) 18%, rgba(86,86,86,0.4) 19%, rgba(35,35,35,0.4) 20%, rgba(86,86,86,0.4) 21%, rgba(35,35,35,0.4) 22%, rgba(86,86,86,0.4) 23%, rgba(35,35,35,0.4) 24%, rgba(86,86,86,0.4) 25%, rgba(35,35,35,0.4) 26%, rgba(86,86,86,0.4) 27%, rgba(35,35,35,0.4) 28%, rgba(86,86,86,0.4) 29%, rgba(35,35,35,0.4) 30%, rgba(86,86,86,0.4) 31%, rgba(35,35,35,0.4) 32%, rgba(86,86,86,0.4) 33%, rgba(35,35,35,0.4) 34%, rgba(86,86,86,0.4) 35%, rgba(35,35,35,0.4) 36%, rgba(86,86,86,0.4) 37%, rgba(35,35,35,0.4) 38%, rgba(86,86,86,0.4) 39%, rgba(35,35,35,0.4) 40%, rgba(86,86,86,0.4) 41%, rgba(35,35,35,0.4) 42%, rgba(86,86,86,0.4) 43%, rgba(35,35,35,0.4) 44%, rgba(86,86,86,0.4) 45%, rgba(35,35,35,0.4) 46%, rgba(86,86,86,0.4) 47%, rgba(35,35,35,0.4) 48%, rgba(86,86,86,0.4) 49%, rgba(35,35,35,0.4) 50%, rgba(86,86,86,0.4) 51%, rgba(35,35,35,0.4) 52%, rgba(86,86,86,0.4) 53%, rgba(35,35,35,0.4) 54%, rgba(86,86,86,0.4) 55%, rgba(35,35,35,0.4) 56%, rgba(86,86,86,0.4) 57%, rgba(35,35,35,0.4) 58%, rgba(86,86,86,0.4) 59%, rgba(35,35,35,0.4) 60%, rgba(86,86,86,0.4) 61%, rgba(35,35,35,0.4) 62%, rgba(86,86,86,0.4) 63%, rgba(35,35,35,0.4) 64%, rgba(86,86,86,0.4) 65%, rgba(35,35,35,0.4) 66%, rgba(86,86,86,0.4) 67%, rgba(35,35,35,0.4) 68%, rgba(86,86,86,0.4) 69%, rgba(35,35,35,0.4) 70%, rgba(86,86,86,0.4) 71%, rgba(35,35,35,0.4) 72%, rgba(86,86,86,0.4) 73%, rgba(35,35,35,0.4) 74%, rgba(86,86,86,0.4) 75%, rgba(35,35,35,0.4) 76%, rgba(86,86,86,0.4) 77%, rgba(35,35,35,0.4) 78%, rgba(86,86,86,0.4) 79%, rgba(35,35,35,0.4) 80%, rgba(86,86,86,0.4) 81%, rgba(35,35,35,0.4) 82%, rgba(86,86,86,0.4) 83%, rgba(35,35,35,0.4) 84%, rgba(86,86,86,0.4) 85%, rgba(35,35,35,0.4) 86%, rgba(86,86,86,0.4) 87%, rgba(35,35,35,0.4) 88%, rgba(86,86,86,0.4) 89%, rgba(35,35,35,0.4) 90%, rgba(86,86,86,0.4) 91%, rgba(35,35,35,0.4) 92%, rgba(86,86,86,0.4) 93%, rgba(35,35,35,0.4) 94%, rgba(86,86,86,0.4) 95%, rgba(35,35,35,0.4) 96%, rgba(86,86,86,0.4) 97%, rgba(86,86,86,0.4) 97%, rgba(35,35,35,0.4) 98%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(38,38,38,0.4)), color-stop(1%,rgba(89,89,89,0.4)), color-stop(2%,rgba(35,35,35,0.4)), color-stop(3%,rgba(86,86,86,0.4)), color-stop(4%,rgba(35,35,35,0.4)), color-stop(5%,rgba(86,86,86,0.4)), color-stop(6%,rgba(35,35,35,0.4)), color-stop(7%,rgba(86,86,86,0.4)), color-stop(8%,rgba(35,35,35,0.4)), color-stop(9%,rgba(86,86,86,0.4)), color-stop(10%,rgba(35,35,35,0.4)), color-stop(11%,rgba(86,86,86,0.4)), color-stop(12%,rgba(35,35,35,0.4)), color-stop(13%,rgba(86,86,86,0.4)), color-stop(14%,rgba(35,35,35,0.4)), color-stop(15%,rgba(86,86,86,0.4)), color-stop(16%,rgba(35,35,35,0.4)), color-stop(17%,rgba(86,86,86,0.4)), color-stop(18%,rgba(35,35,35,0.4)), color-stop(19%,rgba(86,86,86,0.4)), color-stop(20%,rgba(35,35,35,0.4)), color-stop(21%,rgba(86,86,86,0.4)), color-stop(22%,rgba(35,35,35,0.4)), color-stop(23%,rgba(86,86,86,0.4)), color-stop(24%,rgba(35,35,35,0.4)), color-stop(25%,rgba(86,86,86,0.4)), color-stop(26%,rgba(35,35,35,0.4)), color-stop(27%,rgba(86,86,86,0.4)), color-stop(28%,rgba(35,35,35,0.4)), color-stop(29%,rgba(86,86,86,0.4)), color-stop(30%,rgba(35,35,35,0.4)), color-stop(31%,rgba(86,86,86,0.4)), color-stop(32%,rgba(35,35,35,0.4)), color-stop(33%,rgba(86,86,86,0.4)), color-stop(34%,rgba(35,35,35,0.4)), color-stop(35%,rgba(86,86,86,0.4)), color-stop(36%,rgba(35,35,35,0.4)), color-stop(37%,rgba(86,86,86,0.4)), color-stop(38%,rgba(35,35,35,0.4)), color-stop(39%,rgba(86,86,86,0.4)), color-stop(40%,rgba(35,35,35,0.4)), color-stop(41%,rgba(86,86,86,0.4)), color-stop(42%,rgba(35,35,35,0.4)), color-stop(43%,rgba(86,86,86,0.4)), color-stop(44%,rgba(35,35,35,0.4)), color-stop(45%,rgba(86,86,86,0.4)), color-stop(46%,rgba(35,35,35,0.4)), color-stop(47%,rgba(86,86,86,0.4)), color-stop(48%,rgba(35,35,35,0.4)), color-stop(49%,rgba(86,86,86,0.4)), color-stop(50%,rgba(35,35,35,0.4)), color-stop(51%,rgba(86,86,86,0.4)), color-stop(52%,rgba(35,35,35,0.4)), color-stop(53%,rgba(86,86,86,0.4)), color-stop(54%,rgba(35,35,35,0.4)), color-stop(55%,rgba(86,86,86,0.4)), color-stop(56%,rgba(35,35,35,0.4)), color-stop(57%,rgba(86,86,86,0.4)), color-stop(58%,rgba(35,35,35,0.4)), color-stop(59%,rgba(86,86,86,0.4)), color-stop(60%,rgba(35,35,35,0.4)), color-stop(61%,rgba(86,86,86,0.4)), color-stop(62%,rgba(35,35,35,0.4)), color-stop(63%,rgba(86,86,86,0.4)), color-stop(64%,rgba(35,35,35,0.4)), color-stop(65%,rgba(86,86,86,0.4)), color-stop(66%,rgba(35,35,35,0.4)), color-stop(67%,rgba(86,86,86,0.4)), color-stop(68%,rgba(35,35,35,0.4)), color-stop(69%,rgba(86,86,86,0.4)), color-stop(70%,rgba(35,35,35,0.4)), color-stop(71%,rgba(86,86,86,0.4)), color-stop(72%,rgba(35,35,35,0.4)), color-stop(73%,rgba(86,86,86,0.4)), color-stop(74%,rgba(35,35,35,0.4)), color-stop(75%,rgba(86,86,86,0.4)), color-stop(76%,rgba(35,35,35,0.4)), color-stop(77%,rgba(86,86,86,0.4)), color-stop(78%,rgba(35,35,35,0.4)), color-stop(79%,rgba(86,86,86,0.4)), color-stop(80%,rgba(35,35,35,0.4)), color-stop(81%,rgba(86,86,86,0.4)), color-stop(82%,rgba(35,35,35,0.4)), color-stop(83%,rgba(86,86,86,0.4)), color-stop(84%,rgba(35,35,35,0.4)), color-stop(85%,rgba(86,86,86,0.4)), color-stop(86%,rgba(35,35,35,0.4)), color-stop(87%,rgba(86,86,86,0.4)), color-stop(88%,rgba(35,35,35,0.4)), color-stop(89%,rgba(86,86,86,0.4)), color-stop(90%,rgba(35,35,35,0.4)), color-stop(91%,rgba(86,86,86,0.4)), color-stop(92%,rgba(35,35,35,0.4)), color-stop(93%,rgba(86,86,86,0.4)), color-stop(94%,rgba(35,35,35,0.4)), color-stop(95%,rgba(86,86,86,0.4)), color-stop(96%,rgba(35,35,35,0.4)), color-stop(97%,rgba(86,86,86,0.4)), color-stop(97%,rgba(86,86,86,0.4)), color-stop(98%,rgba(35,35,35,0.4)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(38,38,38,0.4) 0%,rgba(89,89,89,0.4) 1%,rgba(35,35,35,0.4) 2%,rgba(86,86,86,0.4) 3%,rgba(35,35,35,0.4) 4%,rgba(86,86,86,0.4) 5%,rgba(35,35,35,0.4) 6%,rgba(86,86,86,0.4) 7%,rgba(35,35,35,0.4) 8%,rgba(86,86,86,0.4) 9%,rgba(35,35,35,0.4) 10%,rgba(86,86,86,0.4) 11%,rgba(35,35,35,0.4) 12%,rgba(86,86,86,0.4) 13%,rgba(35,35,35,0.4) 14%,rgba(86,86,86,0.4) 15%,rgba(35,35,35,0.4) 16%,rgba(86,86,86,0.4) 17%,rgba(35,35,35,0.4) 18%,rgba(86,86,86,0.4) 19%,rgba(35,35,35,0.4) 20%,rgba(86,86,86,0.4) 21%,rgba(35,35,35,0.4) 22%,rgba(86,86,86,0.4) 23%,rgba(35,35,35,0.4) 24%,rgba(86,86,86,0.4) 25%,rgba(35,35,35,0.4) 26%,rgba(86,86,86,0.4) 27%,rgba(35,35,35,0.4) 28%,rgba(86,86,86,0.4) 29%,rgba(35,35,35,0.4) 30%,rgba(86,86,86,0.4) 31%,rgba(35,35,35,0.4) 32%,rgba(86,86,86,0.4) 33%,rgba(35,35,35,0.4) 34%,rgba(86,86,86,0.4) 35%,rgba(35,35,35,0.4) 36%,rgba(86,86,86,0.4) 37%,rgba(35,35,35,0.4) 38%,rgba(86,86,86,0.4) 39%,rgba(35,35,35,0.4) 40%,rgba(86,86,86,0.4) 41%,rgba(35,35,35,0.4) 42%,rgba(86,86,86,0.4) 43%,rgba(35,35,35,0.4) 44%,rgba(86,86,86,0.4) 45%,rgba(35,35,35,0.4) 46%,rgba(86,86,86,0.4) 47%,rgba(35,35,35,0.4) 48%,rgba(86,86,86,0.4) 49%,rgba(35,35,35,0.4) 50%,rgba(86,86,86,0.4) 51%,rgba(35,35,35,0.4) 52%,rgba(86,86,86,0.4) 53%,rgba(35,35,35,0.4) 54%,rgba(86,86,86,0.4) 55%,rgba(35,35,35,0.4) 56%,rgba(86,86,86,0.4) 57%,rgba(35,35,35,0.4) 58%,rgba(86,86,86,0.4) 59%,rgba(35,35,35,0.4) 60%,rgba(86,86,86,0.4) 61%,rgba(35,35,35,0.4) 62%,rgba(86,86,86,0.4) 63%,rgba(35,35,35,0.4) 64%,rgba(86,86,86,0.4) 65%,rgba(35,35,35,0.4) 66%,rgba(86,86,86,0.4) 67%,rgba(35,35,35,0.4) 68%,rgba(86,86,86,0.4) 69%,rgba(35,35,35,0.4) 70%,rgba(86,86,86,0.4) 71%,rgba(35,35,35,0.4) 72%,rgba(86,86,86,0.4) 73%,rgba(35,35,35,0.4) 74%,rgba(86,86,86,0.4) 75%,rgba(35,35,35,0.4) 76%,rgba(86,86,86,0.4) 77%,rgba(35,35,35,0.4) 78%,rgba(86,86,86,0.4) 79%,rgba(35,35,35,0.4) 80%,rgba(86,86,86,0.4) 81%,rgba(35,35,35,0.4) 82%,rgba(86,86,86,0.4) 83%,rgba(35,35,35,0.4) 84%,rgba(86,86,86,0.4) 85%,rgba(35,35,35,0.4) 86%,rgba(86,86,86,0.4) 87%,rgba(35,35,35,0.4) 88%,rgba(86,86,86,0.4) 89%,rgba(35,35,35,0.4) 90%,rgba(86,86,86,0.4) 91%,rgba(35,35,35,0.4) 92%,rgba(86,86,86,0.4) 93%,rgba(35,35,35,0.4) 94%,rgba(86,86,86,0.4) 95%,rgba(35,35,35,0.4) 96%,rgba(86,86,86,0.4) 97%,rgba(86,86,86,0.4) 97%,rgba(35,35,35,0.4) 98%);
    background: -o-radial-gradient(center, ellipse cover, rgba(38,38,38,0.4) 0%,rgba(89,89,89,0.4) 1%,rgba(35,35,35,0.4) 2%,rgba(86,86,86,0.4) 3%,rgba(35,35,35,0.4) 4%,rgba(86,86,86,0.4) 5%,rgba(35,35,35,0.4) 6%,rgba(86,86,86,0.4) 7%,rgba(35,35,35,0.4) 8%,rgba(86,86,86,0.4) 9%,rgba(35,35,35,0.4) 10%,rgba(86,86,86,0.4) 11%,rgba(35,35,35,0.4) 12%,rgba(86,86,86,0.4) 13%,rgba(35,35,35,0.4) 14%,rgba(86,86,86,0.4) 15%,rgba(35,35,35,0.4) 16%,rgba(86,86,86,0.4) 17%,rgba(35,35,35,0.4) 18%,rgba(86,86,86,0.4) 19%,rgba(35,35,35,0.4) 20%,rgba(86,86,86,0.4) 21%,rgba(35,35,35,0.4) 22%,rgba(86,86,86,0.4) 23%,rgba(35,35,35,0.4) 24%,rgba(86,86,86,0.4) 25%,rgba(35,35,35,0.4) 26%,rgba(86,86,86,0.4) 27%,rgba(35,35,35,0.4) 28%,rgba(86,86,86,0.4) 29%,rgba(35,35,35,0.4) 30%,rgba(86,86,86,0.4) 31%,rgba(35,35,35,0.4) 32%,rgba(86,86,86,0.4) 33%,rgba(35,35,35,0.4) 34%,rgba(86,86,86,0.4) 35%,rgba(35,35,35,0.4) 36%,rgba(86,86,86,0.4) 37%,rgba(35,35,35,0.4) 38%,rgba(86,86,86,0.4) 39%,rgba(35,35,35,0.4) 40%,rgba(86,86,86,0.4) 41%,rgba(35,35,35,0.4) 42%,rgba(86,86,86,0.4) 43%,rgba(35,35,35,0.4) 44%,rgba(86,86,86,0.4) 45%,rgba(35,35,35,0.4) 46%,rgba(86,86,86,0.4) 47%,rgba(35,35,35,0.4) 48%,rgba(86,86,86,0.4) 49%,rgba(35,35,35,0.4) 50%,rgba(86,86,86,0.4) 51%,rgba(35,35,35,0.4) 52%,rgba(86,86,86,0.4) 53%,rgba(35,35,35,0.4) 54%,rgba(86,86,86,0.4) 55%,rgba(35,35,35,0.4) 56%,rgba(86,86,86,0.4) 57%,rgba(35,35,35,0.4) 58%,rgba(86,86,86,0.4) 59%,rgba(35,35,35,0.4) 60%,rgba(86,86,86,0.4) 61%,rgba(35,35,35,0.4) 62%,rgba(86,86,86,0.4) 63%,rgba(35,35,35,0.4) 64%,rgba(86,86,86,0.4) 65%,rgba(35,35,35,0.4) 66%,rgba(86,86,86,0.4) 67%,rgba(35,35,35,0.4) 68%,rgba(86,86,86,0.4) 69%,rgba(35,35,35,0.4) 70%,rgba(86,86,86,0.4) 71%,rgba(35,35,35,0.4) 72%,rgba(86,86,86,0.4) 73%,rgba(35,35,35,0.4) 74%,rgba(86,86,86,0.4) 75%,rgba(35,35,35,0.4) 76%,rgba(86,86,86,0.4) 77%,rgba(35,35,35,0.4) 78%,rgba(86,86,86,0.4) 79%,rgba(35,35,35,0.4) 80%,rgba(86,86,86,0.4) 81%,rgba(35,35,35,0.4) 82%,rgba(86,86,86,0.4) 83%,rgba(35,35,35,0.4) 84%,rgba(86,86,86,0.4) 85%,rgba(35,35,35,0.4) 86%,rgba(86,86,86,0.4) 87%,rgba(35,35,35,0.4) 88%,rgba(86,86,86,0.4) 89%,rgba(35,35,35,0.4) 90%,rgba(86,86,86,0.4) 91%,rgba(35,35,35,0.4) 92%,rgba(86,86,86,0.4) 93%,rgba(35,35,35,0.4) 94%,rgba(86,86,86,0.4) 95%,rgba(35,35,35,0.4) 96%,rgba(86,86,86,0.4) 97%,rgba(86,86,86,0.4) 97%,rgba(35,35,35,0.4) 98%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(38,38,38,0.4) 0%,rgba(89,89,89,0.4) 1%,rgba(35,35,35,0.4) 2%,rgba(86,86,86,0.4) 3%,rgba(35,35,35,0.4) 4%,rgba(86,86,86,0.4) 5%,rgba(35,35,35,0.4) 6%,rgba(86,86,86,0.4) 7%,rgba(35,35,35,0.4) 8%,rgba(86,86,86,0.4) 9%,rgba(35,35,35,0.4) 10%,rgba(86,86,86,0.4) 11%,rgba(35,35,35,0.4) 12%,rgba(86,86,86,0.4) 13%,rgba(35,35,35,0.4) 14%,rgba(86,86,86,0.4) 15%,rgba(35,35,35,0.4) 16%,rgba(86,86,86,0.4) 17%,rgba(35,35,35,0.4) 18%,rgba(86,86,86,0.4) 19%,rgba(35,35,35,0.4) 20%,rgba(86,86,86,0.4) 21%,rgba(35,35,35,0.4) 22%,rgba(86,86,86,0.4) 23%,rgba(35,35,35,0.4) 24%,rgba(86,86,86,0.4) 25%,rgba(35,35,35,0.4) 26%,rgba(86,86,86,0.4) 27%,rgba(35,35,35,0.4) 28%,rgba(86,86,86,0.4) 29%,rgba(35,35,35,0.4) 30%,rgba(86,86,86,0.4) 31%,rgba(35,35,35,0.4) 32%,rgba(86,86,86,0.4) 33%,rgba(35,35,35,0.4) 34%,rgba(86,86,86,0.4) 35%,rgba(35,35,35,0.4) 36%,rgba(86,86,86,0.4) 37%,rgba(35,35,35,0.4) 38%,rgba(86,86,86,0.4) 39%,rgba(35,35,35,0.4) 40%,rgba(86,86,86,0.4) 41%,rgba(35,35,35,0.4) 42%,rgba(86,86,86,0.4) 43%,rgba(35,35,35,0.4) 44%,rgba(86,86,86,0.4) 45%,rgba(35,35,35,0.4) 46%,rgba(86,86,86,0.4) 47%,rgba(35,35,35,0.4) 48%,rgba(86,86,86,0.4) 49%,rgba(35,35,35,0.4) 50%,rgba(86,86,86,0.4) 51%,rgba(35,35,35,0.4) 52%,rgba(86,86,86,0.4) 53%,rgba(35,35,35,0.4) 54%,rgba(86,86,86,0.4) 55%,rgba(35,35,35,0.4) 56%,rgba(86,86,86,0.4) 57%,rgba(35,35,35,0.4) 58%,rgba(86,86,86,0.4) 59%,rgba(35,35,35,0.4) 60%,rgba(86,86,86,0.4) 61%,rgba(35,35,35,0.4) 62%,rgba(86,86,86,0.4) 63%,rgba(35,35,35,0.4) 64%,rgba(86,86,86,0.4) 65%,rgba(35,35,35,0.4) 66%,rgba(86,86,86,0.4) 67%,rgba(35,35,35,0.4) 68%,rgba(86,86,86,0.4) 69%,rgba(35,35,35,0.4) 70%,rgba(86,86,86,0.4) 71%,rgba(35,35,35,0.4) 72%,rgba(86,86,86,0.4) 73%,rgba(35,35,35,0.4) 74%,rgba(86,86,86,0.4) 75%,rgba(35,35,35,0.4) 76%,rgba(86,86,86,0.4) 77%,rgba(35,35,35,0.4) 78%,rgba(86,86,86,0.4) 79%,rgba(35,35,35,0.4) 80%,rgba(86,86,86,0.4) 81%,rgba(35,35,35,0.4) 82%,rgba(86,86,86,0.4) 83%,rgba(35,35,35,0.4) 84%,rgba(86,86,86,0.4) 85%,rgba(35,35,35,0.4) 86%,rgba(86,86,86,0.4) 87%,rgba(35,35,35,0.4) 88%,rgba(86,86,86,0.4) 89%,rgba(35,35,35,0.4) 90%,rgba(86,86,86,0.4) 91%,rgba(35,35,35,0.4) 92%,rgba(86,86,86,0.4) 93%,rgba(35,35,35,0.4) 94%,rgba(86,86,86,0.4) 95%,rgba(35,35,35,0.4) 96%,rgba(86,86,86,0.4) 97%,rgba(86,86,86,0.4) 97%,rgba(35,35,35,0.4) 98%);
    background: radial-gradient(center, ellipse cover, rgba(38,38,38,0.4) 0%,rgba(89,89,89,0.4) 1%,rgba(35,35,35,0.4) 2%,rgba(86,86,86,0.4) 3%,rgba(35,35,35,0.4) 4%,rgba(86,86,86,0.4) 5%,rgba(35,35,35,0.4) 6%,rgba(86,86,86,0.4) 7%,rgba(35,35,35,0.4) 8%,rgba(86,86,86,0.4) 9%,rgba(35,35,35,0.4) 10%,rgba(86,86,86,0.4) 11%,rgba(35,35,35,0.4) 12%,rgba(86,86,86,0.4) 13%,rgba(35,35,35,0.4) 14%,rgba(86,86,86,0.4) 15%,rgba(35,35,35,0.4) 16%,rgba(86,86,86,0.4) 17%,rgba(35,35,35,0.4) 18%,rgba(86,86,86,0.4) 19%,rgba(35,35,35,0.4) 20%,rgba(86,86,86,0.4) 21%,rgba(35,35,35,0.4) 22%,rgba(86,86,86,0.4) 23%,rgba(35,35,35,0.4) 24%,rgba(86,86,86,0.4) 25%,rgba(35,35,35,0.4) 26%,rgba(86,86,86,0.4) 27%,rgba(35,35,35,0.4) 28%,rgba(86,86,86,0.4) 29%,rgba(35,35,35,0.4) 30%,rgba(86,86,86,0.4) 31%,rgba(35,35,35,0.4) 32%,rgba(86,86,86,0.4) 33%,rgba(35,35,35,0.4) 34%,rgba(86,86,86,0.4) 35%,rgba(35,35,35,0.4) 36%,rgba(86,86,86,0.4) 37%,rgba(35,35,35,0.4) 38%,rgba(86,86,86,0.4) 39%,rgba(35,35,35,0.4) 40%,rgba(86,86,86,0.4) 41%,rgba(35,35,35,0.4) 42%,rgba(86,86,86,0.4) 43%,rgba(35,35,35,0.4) 44%,rgba(86,86,86,0.4) 45%,rgba(35,35,35,0.4) 46%,rgba(86,86,86,0.4) 47%,rgba(35,35,35,0.4) 48%,rgba(86,86,86,0.4) 49%,rgba(35,35,35,0.4) 50%,rgba(86,86,86,0.4) 51%,rgba(35,35,35,0.4) 52%,rgba(86,86,86,0.4) 53%,rgba(35,35,35,0.4) 54%,rgba(86,86,86,0.4) 55%,rgba(35,35,35,0.4) 56%,rgba(86,86,86,0.4) 57%,rgba(35,35,35,0.4) 58%,rgba(86,86,86,0.4) 59%,rgba(35,35,35,0.4) 60%,rgba(86,86,86,0.4) 61%,rgba(35,35,35,0.4) 62%,rgba(86,86,86,0.4) 63%,rgba(35,35,35,0.4) 64%,rgba(86,86,86,0.4) 65%,rgba(35,35,35,0.4) 66%,rgba(86,86,86,0.4) 67%,rgba(35,35,35,0.4) 68%,rgba(86,86,86,0.4) 69%,rgba(35,35,35,0.4) 70%,rgba(86,86,86,0.4) 71%,rgba(35,35,35,0.4) 72%,rgba(86,86,86,0.4) 73%,rgba(35,35,35,0.4) 74%,rgba(86,86,86,0.4) 75%,rgba(35,35,35,0.4) 76%,rgba(86,86,86,0.4) 77%,rgba(35,35,35,0.4) 78%,rgba(86,86,86,0.4) 79%,rgba(35,35,35,0.4) 80%,rgba(86,86,86,0.4) 81%,rgba(35,35,35,0.4) 82%,rgba(86,86,86,0.4) 83%,rgba(35,35,35,0.4) 84%,rgba(86,86,86,0.4) 85%,rgba(35,35,35,0.4) 86%,rgba(86,86,86,0.4) 87%,rgba(35,35,35,0.4) 88%,rgba(86,86,86,0.4) 89%,rgba(35,35,35,0.4) 90%,rgba(86,86,86,0.4) 91%,rgba(35,35,35,0.4) 92%,rgba(86,86,86,0.4) 93%,rgba(35,35,35,0.4) 94%,rgba(86,86,86,0.4) 95%,rgba(35,35,35,0.4) 96%,rgba(86,86,86,0.4) 97%,rgba(86,86,86,0.4) 97%,rgba(35,35,35,0.4) 98%);
    top:0;
    left:0;
}
.vinyl:after {
    position:absolute;
    display:block;
    content: "\002022";
    width:34px;
    height:53px;
    line-height:53px;
    border-radius:53px;
    top:60px;
    left:60px;
    padding-left:19px;
    color:#000;
    background: -moz-linear-gradient(-45deg, rgba(252,252,252,1) 0%, rgba(239,239,239,1) 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(239,239,239,1)));
    background: -webkit-linear-gradient(-45deg, rgba(252,252,252,1) 0%,rgba(239,239,239,1) 100%);
    background: -o-linear-gradient(-45deg, rgba(252,252,252,1) 0%,rgba(239,239,239,1) 100%);
    background: -ms-linear-gradient(-45deg, rgba(252,252,252,1) 0%,rgba(239,239,239,1) 100%);
    background: linear-gradient(-45deg, rgba(252,252,252,1) 0%,rgba(239,239,239,1) 100%);
    border:1px solid #000;
    font-size:40px;
    text-shadow: 0px 0px 3px rgba(0,0,0, 0.8);
}
.slotwrapper {
    position:absolute;
    display:block;
    top:0px;
    right:-10px;
    height:100%;
    width:10px;
    overflow:hidden;
}
.slot{
    position:absolute;
    display:block;
    top:-160px;
    left:-67px;
    height:505px;
    width:85px;
    background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(76,76,76,1) 51%, rgba(76,76,76,0) 52%, rgba(0,0,0,0.1) 53%, rgba(0,0,0,0) 58%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(255,255,255,1)), color-stop(51%,rgba(76,76,76,1)), color-stop(52%,rgba(76,76,76,0)), color-stop(53%,rgba(0,0,0,0.1)), color-stop(58%,rgba(0,0,0,0)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(76,76,76,1) 51%,rgba(76,76,76,0) 52%,rgba(0,0,0,0.1) 53%,rgba(0,0,0,0) 58%);
    background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(76,76,76,1) 51%,rgba(76,76,76,0) 52%,rgba(0,0,0,0.1) 53%,rgba(0,0,0,0) 58%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(76,76,76,1) 51%,rgba(76,76,76,0) 52%,rgba(0,0,0,0.1) 53%,rgba(0,0,0,0) 58%);
    background: radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(76,76,76,1) 51%,rgba(76,76,76,0) 52%,rgba(0,0,0,0.1) 53%,rgba(0,0,0,0) 58%);
}
@keyframes spin
{
from {
    -moz-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    transform:rotate(0deg);
}
to {
    -moz-transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    transform:rotate(360deg);
}
}

@-moz-keyframes spin
{
from {
    -moz-transform:rotate(0deg);
    transform:rotate(0deg);
}
to {
    -moz-transform:rotate(360deg);
    transform:rotate(360deg);
}
}

@-webkit-keyframes spin
{
from {
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
}
to {
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
}
}

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

For applying the animated vinyl record effect on your image, first upload the picture for your album cover, copy the URL of it and then paste it inside a Notepad so that you can use it later. If you don't know how to upload images and get the URLs, please see this tutorial: How to upload images and get the URLs

Step 6. When you create a post, add this code inside the HTML section:

<div class="case">
<div class="overlay"></div>
<img class="cover" src="http://add-image-url-here.com/"/>
<span class="info">TEXT HERE</span>
<div class="slotwrapper">
<div class="slot"></div>
</div>
<div class="vinyl"></div>
</div>

Replace the URL in blue with the one that you saved earlier and the text in red with the info to show on mouse over. In case you don't need any info, remove this part:

<span class="info">TEXT HERE</span>

Step 7. Publish your post and you're done. Enjoy!

Monday, 27 January 2014

Linux Game Awards: PotM March 2014 VOTE NOW!

It's time for another installment of the somewhat bi-monthly Linux Game Awards:

The list of nominees is again quite interesting, so choose your favorite.

This months winner was 0 A.D. by the way... I guess we need to increase the promotion efforts a bit in case you weren't aware...

Wednesday, 22 January 2014

Preparing for a crowd-funding: Torque3D MIT Multi-platform

I mentioned the nice developments on the Torque3D OpenGL and Linux ports a few weeks back, and now it seems like it is getting even more serious:

Planned platforms of Torque3D

Now don't spill your beer just yet, as this is just the proposal the developer makes for a crowd-funding building up on his great previous Linux/OpenGL work.

One of the first (hopefully soon to be) FOSS games that could benefit from this, is the currently also looking for crowd-funding RoTC abstract FPS. Only 9 days left, but they made another good increase in the last couple of days, so it is still possible to reach their goal of $1500. In fact the older (mostly closed source) version was also recently updated and you can try it on some new servers.

The (more or less friendly) fork GREED tech MIT that aims to make a full FPS development kit out of Torque3D also seems to make some interesting progress, so it looks quite bright development wise for now :)

AdSense Direct: A new way to sell direct advertising on your blog

This article introduces AdSense Direct, a new way to use AdSense to manage advertising that you directly sell ads on your blog or website - and to fill those spaces with AdSense ads when there are no Direct ads running.

AdSense have announced a new feature called AdSense Direct, which will let AdSense publishers (ie people showing ads on their blogs or websites) manage directly-sold ads using their AdSense account.

"Management" means that after an advertisement and campaign details are set up and approved, the ads will show on your site without any changes to your site (apart from having AdSense ads in on it), and having all contracts, invoicing and payments handled through your AdSense account.

How to use AdSense Direct

Arrange a direct deal with an advertiser -- this can be any advertiser, even one that doesn't currently use AdWords.

Enter the details into your AdSense account; more details about this here.

You will be given a link which you email (etc) to the advertiser.

The advertiser logs in (possibly after creating a Google account), upload their ad "creative" (ie text and pictures), approve the terms you entered, and pays for the deal with Google Wallet.

You - and Google - approve the ad creative (ie words and pictures).

After this, the ad runs during the time period that you set up for it. And after it has finished, regular AdSense ads are shown instead.

Limitations

Bad news for now:

AdSense Direct is currently available to publishers and advertisers located in the U.S., and we hope to expand further in the coming months.

But my fingers are crossed that this will change soon.

There's no statement about how this works with AdSense's limits on the number of AdSense ad units shown: does an "AdSense Direct" ad count towards the three-per-type-per-page that non-premium AdSense advertisers are limited to? My guess is "yes" - because regular AdSense ads are shown if AdSenseDirect ones aren't available.

Possibly you can only have one direct advertising campaign at a time? Google's announcement also says "If you've already expanded to running multiple direct ad deals and ad networks on your pages alongside AdSense, try our ad serving solution DoubleClick for Publishers (DFP)." - and yes, AdSense Direct does seem to be a vastly simplified version of this, which will benefit Google by signing up more advertisers.

And AdSense-Direct will only work in places where you can put an AdSense ad unit. For example it is possible to put ads right inside blog-posts. But regular AdSense ads need Javascript to work, so people who read your blog by email subscription or RSS don't see them. It's likely that AdSense Direct ads will be the same.

I haven't checked, but I'm pretty sure that the standard AdSense rules will apply. And this will mean that if your advertiser ticks any of Google's categroy boxes, their AdSense-served ad will not appear on your blog if you have blocked that category.

AdSense Direct is probably not available for Blogspot domains, or at least not for ones whose owner signed up for AdSense using the easier AdSense setups for hosted publishers.

Costs?

The $64m question!

I'm still looking for information about Google's charge or margin for using Direct. For regular AdSense (for non-premium publishers, anyway), its 42%, ie they pay out 58%. I guess it will be a lot lower - but still significant, as Google are providing tools to do some of the most troublesome bits of direct advertisign for us.

My (possibly hopeful!) guess is 20%. What's yours?

Setting up AdSense for your blog

Easier AdSense setups for hosted publishers

Other advertising options for your blog

How to show an AdSense ad inside a blogger post

Monday, 20 January 2014

Putting a picture on your blog as a Gadget

You can put a picture anywhere in your Blogger blog that you can insert a gadget - and you can make it link to a post in your blog or to any other website.

The Image gadget

Dry dock in Claddagh Basin

A very simple way to put a picture into your blog is to use an Image gadget (previously called a Picture gadget).

This is a tool that Blogger provides to make is easy to add a picture that shows up on all screen and is linked to somewhere.

Often gadgets (sometimes called widgets or page elements) are put on the sidebar - but in many blogger templates they can go in other places too (header, footer, etc).

Follow these steps to add a picture gadget in Blogger

1 Make sure you know where the original picture is and that you have copyright permission to use it.

2 Copy the location (URL or file system full path-name) of the picture - and remember whether it's on your computer, or on the internet.
(This article tells you how to find the URL of a picture that's already stored in Google Album Archive. )

3 In Blogger, follow the usual Add a Gadget procedure, and choose the Image gadget from the list of options (you may have to scroll down to find it in the list).

4 In the Configure-Image box, enter the options you want for your picture. These include:

The title for the Gadget,
The caption for the picture
(the small words that go underneath it, usually explaining it, or where it came from),
What should happen when a reader clicks the picture - put this into the Link field
Where to find the picture
(ie the file-location that you copied in step 2)
Whether to re-size (ie shrink) the picture to fix the space in the sidebar in your current template.

5 Press Save.

6 If necessary, drag-and-drop the new gadget to the place where you want the picture to go, and press Save.

What your visitors see

People who visit your blog in a web-browser, will see the picture, in the place where you put the gadget. However pictures are not supported gadgets for dynamic view templates, so it won't be see if you use one of these.

Also, people who see your blog through an RSS reader, or by receiving emailed updates don't see any gadgets, so they will not see the picture.

If you entered a value for Link, your visitor's browser leaves your blog and goes to the Link location: with the Picture gadget, then there is no way to make this open a new window. If you want to do so, then use an HTML gadget instead, get the code for the picture, and put target = "_blank" into it:, so the code looks something like:

<a href="YOUR LINK" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target = "_blank"><img border="0" src="YOUR PICTURE LOCATION" /></a>

Options for putting pictures into your blog

Copyright, blogs and bloggers

Picasa and Blogger - an overview

Getting the HTML to add a picture to your blog

Finding a picture's URL in Google Album Archive

Finding the URL of a picture stored in Flickr

Showing a PowerPoint presentation in your blog

Why RSS / Subscribe to Posts is important for bloggers

Following a blog by email

Add a Cool Style to Blogger Threaded/Nested Comments

If you need a fresh style to the threaded comments of a standard Blogger template, here's a simple CSS that will help you to apply a different background, make your avatars rounded, add a border with rounded corners and a triangle which is actually an HTML entity to get that speech bubble look on your comments.

You can see a demo here.

To have this style in your comments, all you need to do is to paste the below code inside the CSS part of the template, which is between the <b:skin> and </b:skin> tags.

Styling Simple Nested Comments with CSS

Step 1. From the Blogger Dashboard, go to "Template" and press the "Edit HTML" button

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

Step 3. Paste or type the following tag inside the search box and hit Enter to find it

]]></b:skin>

Step 4. Just above ]]></b:skin> add this CSS:

.comments .comment-block {
background: #F9F9F9;
color: #555;
box-shadow: 0 4px 10px #EEEEEE;
position: relative;
margin-top: 10px;
margin-left: 60px;
padding: 10px;
border: 4px solid #EEEEEE !important;
border-radius:10px;
font: 1.190em/1.2 Cambria,Georgia,sans-serif;
}
.comment-thread li .comment-block:before {
position: absolute;
display: block;
left: -26px;
color: #EEEEEE;
content: "\25C4";
font-size: 30px;
}
.comments .avatar-image-container {
width: 60px;
height: 60px;
max-height: 60px;
margin:0px 0px 0 -28px;
padding: 0px;
border: 7px solid #EEEEEE;
border-radius:60px;
}
.comments .avatar-image-container img {
overflow:hidden;
width: 60px;
height: 60px;
max-width: 60px;
border:0 !important;
border-radius:60px;
}
.comments .comment-thread.inline-thread {
background: none;
}
.comments .continue {
border-top: 0px solid transparent;
}
.comments .comments-content .datetime {
float: right;
font-size: 11px;
}
.comments .comments-content .user a{
font-size: 15px;
color: #498EC9;
}
.comments .comments-content .datetime a:hover{
color: #777;
text-decoration: none;
}
.comments .comments-content .comment:first-child {
padding-top: 0px;
}
.comments .comments-content .comment {
margin-bottom: 0px;
padding-bottom: 0px;
}
.comments .continue a {
padding: 0px;
}
.comments .comments-content .icon.blog-author {
background-image: none;
}

How to Change Blogger Threaded Comments Background, Border and Colors

replace the #F9F9F9 value to change the background color of the comments;
#555 to change the text comments color;
#EEEEEE to change the color of the shadow around comments;
4px solid #EEEEEE to change the border width (4px), style (solid) and color (#EEEEEE) around comments;
1.190em to change the comments font size;
to change the arrow color, replace the #EEEEEE value from color: #EEEEEE;
to change the border width (7px), style (solid) and color (#EEEEEE) around avatars, modify this part: 7px solid #EEEEEE;
to change the avatars size and roundness, change the 60px value;

Here is a tool from that may help to pick your favorite color: Color Code Generator

Step 5. Finally, click on the "Save template" button... and you're done!

YouTube Monetization Disabled

Is your YouTube Monetization Disabled? then, it may be due to any of the three reasons delineated below.

Monetization Reviews

If you do not own the rights for the video that you have just submitted for monetization review, then your account might be next in line for disabled monetization. If you repeatedly submit such videos then you are bound to get banned from monetization. You will never get back the ability to monetize your videos on YouTube using the same Adsense account.

Banned Adsense Account

If your Adsense account is banned due to invalid click activity or any such thing then you will lose your ability to monetize YouTube video using that account.

Community Guidelines

If you receive multiple Community Guidelines strikes, copyright strikes and/or worldwide Content ID blocks, you may lose the ability to monetise your videos on all the accounts linked to your AdSense account. All of your accounts must be in good standing to regain monetisation after six months. Note that account monetisation may still be disabled if you delete the blocked videos.

If you have any doubts regarding this, then please feel free to leave a comment below.

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.