Pages

Receive More Updates

Date: - Time:
SMS: Send FOLLOW BALLOWAP To 40404 For Free - EMAIL: azeezbello8@gmail.com

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:


.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 their urls, please read 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!

6 Simple Tips To Write Quality Content For Your Blog


This is a guest post compiled by +uche Nwokolo  for OgbongeBlog



Content is king; everyone knows about that but how can we produce content that would keep your readers interested and at the same time attract new readers to your blogs? Apart from being unique, a good content should useful, easy to read, interesting and at the same time beneficial to the reader.





Below are just six tips to write quality content for you blog:





#1 BALANCE YOUR HEADLINES BETWEEN SEO AND YOUR READERS




Firstly, to write quality content for your blog you should ensure there is a balance between SEO and your reader’s attention when crafting your headline. You wouldn’t want to lose visitors by writing headlines (titles) for only SEO benefits while neglecting your customers. Neither would you want to write for only your customers while neglecting SEO.





Take a good look at the two examples below to better understand this issue.




  •  Spending habits: how to get rid of them

  • 5 ways to get rid of bad spending habits once and for all.  


Which do you think it better?





SEO requires that the keyword be at the beginning but sometimes doing that makes the headline not attractive to get the attention of readers. You have to learn how to balance this issue if you want to write quality content for your blog.





#2 WRITE WHEN YOU ARE IN THE MOOD





Secondly, write when you are in the mood: I have discovered that I write quality content when am I much lively or in high spirits than when am tired or a have other things on my mind. When you are not in the state or mood to blog why not just leave it and attend to other things.





You can’t cheat nature. When it is time to rest, just rest. After all blogging is not something you do once in a month it is continuous. Passion makes the work easier not burdensome so don’t stress yourself all in the name of passion.





#3 PEN DOWN YOUR IDEAS IMMEDIATELY





Thirdly, Pen down your content when you get the idea immediately: Ideas come fast but they also leave fast. When you get an idea about a topic, pen it down. You can easily save the idea as a blog draft or in a Note application on your mobile device. Forget about the mistakes you can edit them later.



One way to get an idea to write a better content is to read your posts yourself, yes very simple. Open your blog in your browser then go through it as a visitor. You would be shock at the amount of ideas you would receive to improve your content, I do that every day and I also receive ideas to write quality content, try it out, remember pen down the ideas immediately.











#4 DECIDE WHEN IT SHOULD BE A POST OR A PAGE






The fourth tip to write quality content is to differentiate when it should be a post or a guide/ebook: A post doesn’t contain many words compared to a guide.



I wrote a post on financial statements, on income statement and also on balance sheet but at a second thought I decided to combine them into one and make it a guide instead of being post why?





Apart from struggling to get a good headline people won’t comment on it talk more of sharing it, so I wrote the beginners guide to understanding financial statements which is useful to my readers?





Write a post if you are going to be brief and if the reader would benefit from it but if not think about writing it as a guide/ebook if you need to elaborate more on the idea.





#5 HAVE FUN WHEN YOU BLOG





The fifth tip to write quality content for you blog is to have fun while you blog. This is very important if you want to write quality content for your blog. You should write when you have a story to tell not to be pouring out content all the time because of SEO.





When I started blogging, I kept on thinking of how to produce content everyday all in the name of content is king. It got to a stage that I was now thinking of producing content just for Seo while forgetting about the benefits it would have for my readers and I never had fun doing it.





Blog when you have something interesting or a story to tell your readers. It is more exciting when you have a story to tell than just churning content for machines.



#6 WRITE A COMPELLING INTRODUCTION





Last but not the least, your introduction should more else be written like a copywriter i.e apart from a good headline the first paragraph should be written in such a way that the reader cannot leave without clicking the read more button.





Avoid unnecessary words. Make it clear in the first paragraph, what you want to achieve in that post and what benefit it has to the reader.





That's all.





What's your take on this? Do you have other tips you would like to contribute to this? Pls, let me hear from you via comments.




This post was written by +uche Nwokolo . He is a blogger and the founder of wisdom for wealth blog where he blogs on how to create wealth that won’t cost you your soul.

Monday 27 January 2014

4 Questions to Ask Yourself Before You Start A Blog


This is a guest post compiled by +Shamsudeen Adeshokan  for OgbongeBlog







Most bloggers fail in their first attempt in creating a blog due to lack of clear concise plan on how to start and run a successful blog. This is one of the reasons why most of such bloggers abandon their first blogs to start new ones.



I also failed in my first attempt to start a blog. Everything was done zig-zag. Too many task to  complete, I didn't even know where to get started. Fast forward to date, I looked back at my beginning, and wish I had known most of what I knew today before I ever start a blog.



If you are interested in starting a new blog and won't want it to be abandoned in the long run, there are some questions you will have to ask yourself. Questioning yourself will help you determine which direction to go.



To save you a lot of time and hard work I went through trying to figure out blogging, I want you to ask yourself these questions below, and take time to consider your answers before you get started with your new blog.






questions




#1. Why am I starting this blog?  




This should be the starting point to why you're creating a blog. Without defining your purpose from the get-go, you’ll have no clear direction. You need to ask yourself the reason why you wanting to start a blog. Is it for money, fame, to build your writing skills or just for fun?



Your definite answer will determine your approach and aggressiveness toward your blog task and marketing. With this question, you will easily keep your blog on track.





#2. Who Are My Targeted Audience? 



Right before anything else, I mean even before registering a domain name and hosting, you need to decide very quickly who your intended audience is.



You need to determine who will be reading your articles. The clearer you can define them, the easier it will be for you to plan content for them.



Knowing your targeted audience will help you decide how you'll set up your blog from scratch. Type of content to create, how to drive traffic to it and many more.



#3. Where and how to get traffic?



Few weeks or months after you might have started your blog, you’re going to have to turn your attention to promoting your blog so as to get new readers apart from your family and friends.



There are free ways you can market your blog eg social media and there are some other ways that will cost you some money eg Google or Facebook ads.



The earlier you decide how you're going to be driving traffic to your blog, the better for you. If you're starting a content marketing blog, is much easier to learn with it but if you're running a business blog, you better buckle up in time. Every cents you spent either makes you happy or frustrated.



#4. How Often Will I Post?



Creating and maintaining a blog involves a lot of work and you need to put effort into it. If you want to attract readers to your blog and keep them coming back, you have to be updating your blog frequently.



You can post everyday, weekly or on weekends. It's better to decide in advance how often you will be posting to your blog. Whatever rate of posting you decide, you have to stick with it, if you don't want to lose readers.





Conclusion.......



Starting and maintaining a blog can be difficult, but if you ask yourself these questions and consider the answers before you start your blog, you will have a much easier task ahead of you.



Don't forget to help spread this article for your loved ones to enjoy by playing around a little with those sharing buttons below this post.



Kindly let me hear from you via comments if you have one or two things to say as regards this post.






This post was written by +Shamsudeen Adeshokan  . He is a passionate blogger who writes about blogging tips and tutorials at CyberNaira.com. If
he is not working on his computer, then he is in the field playing
football.

Sunday 26 January 2014

How To Buy Domain Name for N520 Without Coupon


This is a guest post compiled by  Imran Muhammed for OgbongeBlog



Godaddy calls itself the world’s largest domain name registrar. It is known to sell domain names at very cheap rates. With coupons, you can buy a domain name for $2.17 (N360) or even as low as $1.17 (N194). I assume an exchange rate of N 166 to a dollar. But the problem of coupons is that they have terms of usage which most of us do not take time to read.





These terms may include the following:


  • Expiration date: Some coupons are meant to stop working on a specific date.

  • Number of uses: Other coupons are designed to be used so-and-so number of times e.g. 200. In other words, the coupon will continue to function until it has been used 200 times, after which it goes into oblivion.

  • Country specific: That is to say, if you are a Nigerian, you will not be able to use a coupon intended for United States citizens; unless of course you change your IP. 


However, we do not want to go that route. In fact, we don’t want to use any coupon.



Here are the don’ts and dos of getting a domain name from Godaddy at $3.13 (N 520) without a coupon.



Don'ts


  • Do not enter Godaddy website through the “front door.” In other words, do not type www.godaddy.com in your browser because that is the front door. You are to enter through the “back door.”

  • If you have an existing account with Godaddy, do not use it. The discount is meant for new clients only. So, if you need 10 domains at $3.13 each, you are to create 10 new accounts.




Dos




  • Visit www.google.com or www.google.com.ng (whichever you prefer) and type “godaddy” (without the quotes). You will likely get something like this:



godaddy1



Normally, Google displays two types of information: adverts and search results. Observe that Godaddy appears in both. Also note that in the advert section, Godaddy is OFFICIALLY advertising .com domain names for $2.95. That is what we are looking for.




  • Click on the one in the advert section. This will take you to Godaddy website through the “back door.” I call it “back door” because the page that will open is not the usual home page of Godaddy; yet you will be able to do everything you would have done on the home page. The page should look like this:





godaddy2




  • Type in the domain you intend to buy and click on “search.” For illustration purposes, I will attempt to register a hypothetical domain name: www.imran2015.com. A pop-up window will appear. 







godaddy3


  • Click on “Add,” wait until the orange rectangle changes to grey. Then hit “Continue to Cart.” The next page ought to be the shopping cart.





godaddy4




  • As can be seen above, Godaddy will automatically request you to register the domain name for 2 years ($2.95 for the first year and $9.99 for subsequent years). For the fact that, we are trying to spend only N520, simply change the Term to 1 year. The price will be updated.





godaddy5


  • The total is now $3.13, i.e. $2.95 plus $0.18 ICANN fees which is N520. Click on “Proceed to Checkout” and complete the remaining steps.




Warning 



This Godaddy “bonanza” is on-and-off; meaning that it’s not always available. Don’t be surprised to get a search result like this:




godaddy6





Here, the $2.95 in the advert section is missing. If you see this, just try again later because once you click on the Godaddy advert, you will be taken to the “front door” www.godaddy.com.



Secondly, avoid the temptation of bookmarking the “back door” so that you will be going in as often as you wish. That will be “breaking into Godaddy’s house” which is illegal. If you do that, at the point of checking out, don’t be surprised to get a nasty error message like: Sorry, this offer is no longer available. So, you need to wait for the “back door” to be OFFICIALLY opened.



Final note



Domain names are renewed on a yearly basis. Discount prices companies like Godaddy offer applies for the first year only. Whenever you are to renew the domain, you have to pay the full price. The “full price” of a domain varies from one web host to another. But generally, it ranges from $10 (N1,660) to $12 (N1,992). The $9.99 we saw earlier in the shopping cart is a special discount for long term purchase.




This post was written by Imran Muhammed . He loves sharing web design lessons at his Hascy Technology blog. You can add him as friend on Facebook.






Saturday 25 January 2014

5 Things Student Must Consider When Deciding To Buy Computer or SmartPhone


This is a guest post compiled by +Ayoola Ayobami  for OgbongeBlog



 As a Student [Most especially, Nigerian Student] there are so many decisions to make when you are studying in Higher Institution or just moving to the University. One of those decisions, is deciding what to buy between a Laptop or a Smartphone - i.e. If you cannot afford both. Basically, you should go for the one you need most and at the same time the one that will affect your studies positively, not negatively.





 According to some international surveys on University Students, Smartphones are causing so much distractions more than Laptops do, whereas many students don't use Tablets at all; maybe because of it's size.



Consider this -  A survey of 100 students at Dongguk University in South Korea said, about 50% of the students uses their smartphones more than five hours a day and 68% rated themselves as being addicted to their phones. The main purpose of the students’ smartphone use was to chat with friends, play games and read news. 70% of the surveyed students feel anxious when their phone’s battery is running out, when there is no fast internet access or when they cannot update their Apps. Moreover, 77% of the students answered that their smartphones causes distraction whenever they are studying or working.




PC or Phone





The survey summarized above not only applies to South Korean students but to students generally all over the world. Although the number, size and percentage is higher & lower ranging from one country to another and one university to another.



Apart from the factors mentioned above, another determiner to buying a Smartphone or a Laptop is the price. You can't buy what you can't afford when there is something else your money can buy easily, right ?



But hold on here, there are some important questions every student must ask himself / herself when in a situation like this. Consider the questions listed below and find an answer to them, to determine what is right for you - A Smartphone or A Laptop ?




  • Will you have regular access to electricity supply ? Remember that
    Smartphones generally have longer battery life than Laptops which means a
    Smartphone will spend many more hours without charging than a Laptop
    will.



  •  How much of a serious student do you intend to be ? Remember that a
    Smartphone comes with lot of distractions (Chatting on 2go and WhatsApp,
    Pinging on BBM, Playing Games etc) according to the survey
    aforementioned. Some of these distractions are quite difficult to avoid
    whereas the distractions from a Laptop can be easily avoided.



  • What course are you studying ? Some courses require regular paper work. A
    laptop offers a better word processing experience than a Smartphone. It
    will be much easier for you to edit your work on a Laptop and then
    print out. Furthermore, there are some complex assignments you can never
    do with a Smartphone. Imagine a Computer Science given a pure
    programming assignment.



  •  How much have you budgeted for it ? Sometimes, the amount you have to
    spend on your purchase will determine what you will eventually end up
    buying. Having only #20,000 with you means you'll probably buy a Nokia
    Lumia 520 not HP Pavilion G6. Just Measure twice and Cut once !!!



  •  Do you have an Internet Connection for your device (Be it a Laptop or
    Smartphone) ?
    You really need an internet connection for either of the
    two in order to do your assignments. Buying a Laptop means you need a
    USB Modem & Data Plan while Buying a Smartphone means you only
    need a Data Plan. Well, many universities do provide free Wi-Fi Internet
    Access for students and if yours is among, maybe you need not to worry
    about spending your extra cash on Internet Access.


Are you through with the answers to the questions above?  If yes, you should now realize what you need in your University life which should probably be a Laptop.



Generally, It seems like many students need a Laptop for their Academic years in the University while some need Smartphones.



Its now up to you to decide if you are among the many who needs a Laptop, few who needs a Smartphone or most who needs both. Decide and Choose wisely. Wish you success in your studies, Cheers !!!




This post was written by +Ayoola Ayobami . He is a Computer Engineer with passion for blogging and web development. He owns and manages StevenBergy.Com.Ng. You can follow him on Twitter or add him as friend on Facebook.

Friday 24 January 2014

TechNigeria Brings All the Naija Tech Stories In One Place

If you love reading about technology startups, innovations, ideas and an all round revolution of Nigerian economy using IT as a viable tool, then you no longer have to be jumping from one technology blog and news site to another. You can now follow all the latest happenings in the Nigerian tech ecosystem in one place, at TechNigeria.com.ng.







TechNigeria has emerged as a free Nigerian Technology News aggregator that specifically syndicates technology news, articles and stories appearing on various Nigerian Tech websites and blogs. The site was built to search and make public every bit of Naija tech news as a result of the increasing growth of technology interest in Nigeria.




techNigeria site





TechNigeria selects most up-to-date information from the numerous number of technology publications by an automatic aggregation algorithm. Stories are being displayed in the order at which it was published from the authors’ site irrespective of the time it was aggregated. Hence, users/readers can see the most recent 40 stories curate from TechNigeria sources.



The site's design is cool and responsive. Whether you’re accessing the site from a smart phone or tablet, you will get nearly all the same feature you’d expect from a large browser on a desktop computer, making it easy for you to browse and discover stories without pining for a larger screen.






What's your take on this site? Do you know Aggregator websites similar to TechNigeria?



Please, let me know via comments.


Tuesday 21 January 2014

Mobiz : Site Where You Can Create Mobile Site For Your Business

Over time, small and medium scale enterprises' (SMEs) have been limited to the areas in which they operate. These businesses are only known to few family and friends who also tell friends, limiting the business coverage area to their network of friends.





Research has also shown that about 88% of internet traffic in Nigeria originates from mobile devices. Now imagine what would happen to your business if some or all of this traffic is directed to your business way - larger customer base, increase in profit, nationwide visibility, to mention a few.



Mobiz has in the spirit of the New Year launched a special promotion to develop an easy to operate mobile website for SMEs at a giveaway monthly rate of N999!



For just N999 (nine hundred and ninety nine naira) you can own a mobile website with your own domain name (eg. www.zicotexsports.com.ng). The mobile site will be fully optimized for all feature and smart phones.




mobiz Nigeria







With the mobile site, you have a wide variety of templates to choose from, your business images and videos can be uploaded and you can connect with customers via social networks (such as Twitter, Facebook). You can also integrate M-commerce (Shopping Cart) payment - enabling customers to pay directly into your bank account.



Products, services and price information can also be placed on the mobile website making communication with customers and site visitors very easy. Your website will receive regular traffic with numerous users searching for various goods and services.



The mobile site gives you nationwide visibility as it is linked with various social media. It enables video marketing, promotes contextual advertising and would be linked to one of the most visited sites in Nigeria. You can communicate with customers and site visitors via videos and images uploaded on the site.



Owning a mobile site gives your business an identity, a face that goes beyond just a business name, it becomes an entity customers relate with. Mobile mobile site helps you acquire customer information, enabling you to know your customers and their needs and how to tailor your services to suit them. Mobiz mobile website helps you grow your customer base while building a stable followership network.



This opportunity presented by Mobiz is one you don't want to miss as a small business owner who is limited by cash to launch the aggressive advert campaign needed to make your business a household name. The opportunities available for your business as a result of the Mobiz mobile site are numerous going by the large number of mobile internet users.



A sample of a mobile site created at Mobiz is : www.zicotexsports.com.ng






mobiz







To own your own mobile site, simply FLASH 01-2263422 or log on to (www.mobiz.ng/start) for more information.



NB: To partake in this offer by Mobiz, a minimum subscription of 1 year is required.



What do you have to say as regards this offer?

Monday 20 January 2014

How to Reveal Hidden or Shortened URLs

I use Twitter a lot! Using Twitter a lot comes with it's own challenges. One of such challenges is that I get lots of Tweets from people via replies and DM (direct messages) asking me to check out some URLs (links). Due to the fact that Twitter only allows 140 characters, people choose to hide or shorten the URLs.





Some of these URLs are genuine while most are complete spam. Clicking on these links might expose your Twitter account to hacking. It might also be a source of malware to your computer, tablet or mobile device. The best way to confirm this is to find a way to reveal all hidden or shortened URLs you get on Twitter.





You should also do the same thing for all the shortened URLs you get in your email address and over the internet and social networks. This would secure you from a lot of troubles and unnecessary clicking of the URLs you are not sure of.





How Do I Reveal Hidden or Shortened URLs?





I use UrlReveal to achieve this. The site has been very useful for me. You can use it also. You don't need to rush and start clicking all the hidden or shortened URLs you receive.













As shown in the image above, enter the hidden or shortened URL in the space provided and click on "Show me the real URL" button.








I hope this helps? Let me know if it does.





Follow me on Twitter at https://twitter.com/adesojiadegbulu





Regards,


Adesoji

Find Location of Anyone With Glo Family and Friends Finder

Now you can find the location of anyone with a Glo line or alert others when help is needed, using the newly launched Globacom Family & Friends Finder. User privacy is fully protected, as only if there is consent the other person can locate another one. If a person doesn't provide consent, one cannot be located by others.



By using this Glo exciting innovation, you can give yourself peace of mind about the safety of your family members and friends. Companies can also use it to optimize operations by locating employees on the go. Locations are defined with landmarks that are locally well-known places such as prominent buildings, market places etc



The Glo family and Friends Finder works in every phone. It is very easy to use with simple text commands that are sent to 5511. It can only locate someone using a Glo line.




Glo Family and Friends Finder










How To Use Glo Family and Friends Finder




==> Text "Find PhoneNumber" to 5511 to know the whereabout of a friend or family member. Costs N50 per request



Glo will send a text to the person to approve it by replying with YES or No. If the person reply with a "YES", Glo will text you the location of the person.



==> Text "LIST" to 5511 to see a list of people who can find you and those whom you can find. Costs N20.



==> Text "HIDE" to 5511 to make yourself invisible from the service so that people can't find your location for 24 hours. This costs N20



==> Text "UNHIDE" to 5511 to cancel the HIDE command



==> Text "WHO" to show a list of people who have used the service to find you in the past 24 hours. Costs N20



==> Text "SOS"to 5511 to send an SOS message to all those who you have allowed to find you that you are in trouble. Useful when stranded or in an emergency. Costs N20 per recipient.



==> Text "OK"to 5511 to send an SOS message to all those who you have allowed to find you that you are OK. Costs N50 per recipient.



==> Text "STOP GloPhoneNumber" to 5511 if you want someone to stop locating you.



==> Text "STOP" to 5511 if you want to stop using the service.



Alternatively, you can download Glo Family & Friends Finder from Google Play. The Glo finder is also available for Blackberry and other phones here.



That's all.



What's your take on this service?






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 <b:skin> and </b:skin>

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 roundedness, change the 60px value;

Here is a tool from that may help to pick your favorite color:
Color Code Generator (after you choose a color, copy the hex value)

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

PLACE YOUR ADS HERE