Splash HTML5 Template

For a while now, HTML5 and CSS3 has been the buzz in 

website designing. Today, I'll provide you with a free HTML5 

template so you can have a feel of it.

The Splash HTML5 is an HTML5 page that includes a social 

network sharing box as well as  a subscribe button.

Posted By Unknown7:01:00 am

0

Continue Reading

The Odesk Contractor Manual

For those who are members of Odesk, you'll find the Odesk contractor manual very useful and for those who aren't you'll find a lot of stuff you need to know as a contractor on Odesk. You'll fully understand the contractor manual only if you sign up. Click here to sign up.
After reading the manual, please do drop your comments.

Posted By Unknown2:19:00 pm

2

Continue Reading

CSS3 Social Network Buttons

In this tutorial, I'll show you how to create CSS3 social network subscribe buttons. 

Follow these steps precisely:

1. Go to your layout in Blogger dashboard.
2. Click on add new gadget
3. Locate add HTML/JavaScript code in the pop-up window.
4. Copy, Paste and save the code below into the editor that appears and save.

<style>
/* BthemesandTricks */
.socialicons{
list-style-type:none;
margin:0;
padding:0;
background: #f0f8ff;
width: 350px;
}
.socialicons li{
display:inline;
width: 60px;
height:60px;
}
.socialicons li img{
width: 50px; /* width of each image.*/
height: 50px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.socialicons li img:hover{
-moz-transform:scale(0.8); /*scale up image 1.8x*/
-webkit-transform:scale(0.8);
-o-transform:scale(0.8);
}</style>

<br />
<center>
<br />
<ul class="socialicons">
<li><a href="http://www.plus.google.com/#"><img src="http://icons.iconarchive.com/icons/designbolts/minimalist-social/64/Google-Plus-icon.png" title="+1 us on Google Plus" /></a></li>

<li><a href="http://www.facebook.com/#"><img src="http://icons.iconarchive.com/icons/designbolts/minimalist-social/64/Facebook-icon.png" title="Like us on Facebook" /></a></li>

<li><a href="http://www.pinterest.com/#"><img src="http://icons.iconarchive.com/icons/designbolts/minimalist-social/64/Pinterest-icon.png" title="Follow on Pinterest" /></a></li>

<li><a href="http://www.twitter/#"><img src="http://icons.iconarchive.com/icons/designbolts/minimalist-social/64/Twitter-2-icon.png" title="Follow on Twitter" /></a></li>

<li><a href="http://feeds2.feedburner.com/#"><img src="http://icons.iconarchive.com/icons/designbolts/minimalist-social/64/RSS-icon.png" title="Subscribe to our feed" /></a></li>

<li><a href="http://linkedin.com/#"><img src="http://icons.iconarchive.com/icons/designbolts/minimalist-social/64/Linkedin-icon.png" title="Connect with us on Linkedin" /></a>
</ul>
5. Change the "#" sign to your username.
6. Enjoy! 

Demo

• 
• 
• 
• 
• 
• 

Posted By Unknown2:02:00 pm

0

Continue Reading

How to create a stylish header using CSS3

CSS can be used for a lot of styling purposes today. In fact, CSS can now be  used in place of such software as photoshop and corel draw when manipulated correctly. In this article, I'll show you how to create a fancy header using CSS3.
During the days of CSS2.1, you could only use the standard font types such as serif, sans-serif, cursive, fantasy, et cetera. And the only way any of such fonts would display on the users browser is if the font is installed on the computer, thus if you applied, say Georgia fonts to your CSS rule and perhaps that font isn't installed on your user's PC, the browser uses the default serif font thus you lose all your styles and impression you would have made.
CSS3 introduced a new element which is the @font-face. With it, you can apply web fonts to your CSS rules, that way, the font displays on your user's PC irrespective of whether the font is installed or not. Great right? sure, it is. Not just that, you can include some fancy styles to the font.
Get ready to learn some cool ways to create headers using CSS3.
You can add a cool header to your website using the code below.
<style rel="stylesheet">
/* @font-face tutorials by BthemesandTricks */
@font-face {
font-family: 'Crafty Girls';
font-style: normal;
font-weight: 400;
src: local('Crafty Girls'), local('CraftyGirls'), url(http://themes.googleusercontent.com/static/fonts/craftygirls/v2/0Sv8UWFFdhQmesHL32H8o3hCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
header {
font-size: 50px;
padding: 15px;
height: 100px;
text-align: left;
text-shadow: -4px 4px 3px #999, 1px -1px 2px #000;
margin-top: 0;
margin-bottom: 0;
}
</style>
<header>
<h1>Stylish Header</h1>
</header>

Stylish Header

Posted By Unknown3:15:00 am

0

Continue Reading

Backup you data on the fly with Ubuntu One

 

Cloud Storage

Today, we'll look into the Ubuntu Cloud storage know as Ubuntu One.

Ubuntu One is a storage application, operated by Canonical limited. It automatically synchronizes your computer data to the Internet storage once you added a new file. For instance, once Ubuntu One is activated, the moment you add a new file or document to a folder, it is automatically stored online through a process known as cloud storage. Therefore, you don't need to worry about backing up your PC any longer, just use Ubuntu One and it does it automatically. You get a free 5GB storage space on sign up and extra megabytes of data once you refer others. 

Available For Most Operating Systems

Not only is Ubuntu One available on Linux Ubuntu operating systems, it is also available for download in Windows, Mac, Android and IPhone operating systems.

Downloads

• Before you download Ubuntu One, you need to sign up. Sign up free, click here.
• After you must have signed up, download the application using the link for you  operating system.
• Ubuntu OS users already have the application running in their computer.

  

Click here to download Ubuntu One for Mac

 

Click here to download for Windows

                                                                                     

                                                                          Click here to install on Android

                                                                                     Click here to install on IPhone

Posted By Unknown5:10:00 am

3

Continue Reading

How to Install Windows Programs on Ubuntu

Hello dear readers, I'm back again with my tips. Did you know you can install Windows Applications on Ubuntu? Yes, you can, if you know how.  

Today, we'll show you how to install Windows Apps and Programs on Ubuntu.

Follow the steps below.

1. Visit the Ubuntu Software Center from your Ubuntu OS
2. Search for the Software 'Wine', you'll be show a couple of lists. 
3. Click on Wine Compatibility Layer Package  (Beta Release)
4. Click on the Install Button (You need an Internet Connection)
5. The Application will download to your computer in minutes
6. Presto! That's All, you can now run your Windows Programs in the Wine Program.
7. Enjoy!!!

Posted By Unknown7:17:00 am

0

Continue Reading

How to Add a Subscription Box

Hello, today, I'll be sharing with you on how to add a subscription box to your website or blog. To add one follow the steps outlined below:

• Click on the Add a Gadget link in your Blogger layout.
• Select HTML & JavaScript Code from the pop-up window
• Copy the code below:

<style>

.tbisubscribe {

border: 1px solid #D3D3D3;

padding: 8px;

width: 300px;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

.tbisubscribe:hover {

-moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);

-webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);

box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);

}

.tbimailbox {

border: 1px solid #D3D3D3;

-webkit-border-radius: 4px;

border-radius: 4px;

-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;

-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;

box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;

color: #666;

font: 14px "trebuchet ms", sans-serif;

padding: 7px 15px;

width: 160px;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

.tbimailbox:hover {

-webkit-box-shadow: none;

box-shadow: none;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

.tbisubmit {

font: bold 12px Tahoma, Geneva, sans-serif;

font-style: normal;

color: #ffffff;

background: #ff5714;

border: 0px solid #ffffff;

text-shadow: 0px -1px 1px #222222;

box-shadow: 2px 2px 5px #000000;

-moz-box-shadow: 2px 2px 5px #000000;

-webkit-box-shadow: 2px 2px 5px #000000;

border-radius: 10px 10px 10px 10px;

-moz-border-radius: 10px 10px 10px 10px;

-webkit-border-radius: 10px 10px 10px 10px;

padding: 8px 15px;

cursor: pointer;

margin: 0 auto;

}

.tbisubmit:active {

cursor: pointer;

position: relative;

top: 2px;

}

.tbisubmit::-moz-focus-inner {

border: 0;

padding: 0;

margin: 0;

}

</style>

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />

<div class='tbisubscribe'>

<div style='color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;'>Get Free Updates in your Inbox</div>

<div style='margin: 10px 0 0 6px;'>

<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform'

method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=labstrike', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true'

style='margin: 0pt;' target='popupwindow'>

<input name='uri' type='hidden' value='labstrike' />

<input name='loc' type='hidden' value='en_US' />

<input class='tbimailbox' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}'

onfocus='if (this.value == "Enter your email...") {this.value = ""}'

type='text' value='Enter your email...' />

<input alt='' class='tbisubmit' title='' type='submit' value='Subscribe'/>

</form>

</div>

<div style='border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;'>Follow us on:</div>

<div style='margin: -32px 0 0 120px;'>

<a href='FACEBOOK URL' target='_blank' title='Join us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxxebQd-JwSpti8wlnxFIOnB_f9kesZ5wD7i8zhe67b1i_YcpBH4TlLVb9nC2yWi3eEP00kbpckp55A7UksaILvg5S80S8YAmzJmm6QWpaO5I8gYg4FqcGAPIVu0Wd-4lQdUWwPdUIhr8/s1600/facebook500.png' alt='facebook'/></a>

<a href='TWITTER URL' rel='nofollow' target='_blank'

title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5DB4tY3155PXb-hn2CmHrmbG1xdnAqAZDV3C8xsWKYqhzJxbZoRNsExQoA8sURgm1Cw8DuSjjZCdGPaum6UA34QJtYzxFUHUfzqvoTdfduyRWovuZYrq9Hqet2T07i83Ja1y5jXxjxcE/s1600/twitter.png' alt='twitter'/></a>

<a href='GOOGLE+ URL' rel='nofollow' target='_blank'

title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLNbP8LQfX-ypM4NR4rddYzpVDhILEHdCSYcIM63dBBC9ELj5XtyceI-wTjQrpMe1UHKZNzP1brf1RLBBkOcLbrUHdP5EEgGCrTR76kft9e6-KIPbtdGf2ssoiSWxSZTGfQgIP1jchp54/s1600/googleplus-revised.png' alt='gplus'/></a>

<a href='PINTEREST URL' rel='nofollow' target='_blank'

title='Follow us on Pinterest'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvgDu7gr0d6oyK3kxY6MpTnihF-crU-kHZxJEzJMB2pa18b_Z37CRROU_FNzyMHsWAfSSA6Ir-x0fq1J0ua9cIBv9NjZlIGXJlKMfjg0wTah9Fol16Fq7mKyRyefWHuxDA7bNN5HF4g0E/s1600/pinterest.png' alt='pinterest'/></a>

<a href='RSS URL' rel='nofollow' target='_blank'

title='Subscribe to RSS'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib_FsvpxCpynj0yODllevzSz69gIraRlp2LiKe_cTLVTcCaDQYwc0kYfniG-Mi9TmrXKnjZrpD4ngTMjVPUDvT65bI1sdZZglFCphRdhuQVT7NQNiecElaa22IN1I-a1OBHkL9oOsnBZ0/s1600/rss.png' alt='rss'/></a>

</div>

</div>

• Paste it into a text editor such as Notepad

• Edit the Facebook, Twitter, Google+, Pinterest, and RSS url respectively to your desired url.

• Copy the code from the text editor and paste it into the HTM & JavaScript column 

• Save the changes

• Open your blog and view the results

  
 

Posted By Unknown10:47:00 pm

0

Continue Reading

Happy New Year - 2013

We love and cherish our viewers so much and we wish you a Happy new year, one that is fruitful and productive with favour and the blessings of God. Enjoy!


▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ ▓┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼▓
▓┼█┼█┼███┼███┼███┼█┼█┼▓
▓┼█┼█┼█┼█┼█┼█┼█┼█┼█┼█┼▓
▓┼███┼███┼███┼███┼███┼▓
▓┼█┼█┼█┼█┼█┼┼┼█┼┼┼┼█┼┼▓
▓┼█┼█┼█┼█┼█┼┼┼█┼┼┼┼█┼┼▓
▓┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼▓
▓┼┼┼██┼┼█┼███┼█┼┼┼█┼┼┼▓
▓┼┼┼███┼█┼█┼┼┼█┼┼┼█┼┼┼▓
▓┼┼┼█████┼███┼█┼█┼█┼┼┼▓
▓┼┼┼█┼███┼█┼┼┼█┼█┼█┼┼┼▓
▓┼┼┼█┼┼██┼███┼██┼██┼┼┼▓
▓┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼▓
▓┼┼┼█┼█┼███┼███┼███┼┼┼▓
▓┼┼┼█┼█┼█┼┼┼█┼█┼█┼█┼┼┼▓
▓┼┼┼███┼███┼███┼██┼┼┼┼▓
▓┼┼┼┼█┼┼█┼┼┼█┼█┼█┼█┼┼┼▓
▓┼┼┼┼█┼┼███┼█┼█┼█┼██┼┼▓
▓┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼▓
▓┼┼┼███┼███┼██┼┼███┼┼┼▓
▓┼┼┼┼┼█┼█┼█┼┼█┼┼┼┼█┼┼┼▓
▓┼┼┼███┼█┼█┼┼█┼┼███┼┼┼▓
▓┼┼┼█┼┼┼█┼█┼┼█┼┼┼┼█┼┼┼▓
▓┼┼┼███┼███┼███┼███┼┼┼▓
▓┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓

Posted By Unknown12:19:00 am

0

Continue Reading

How to add customized Facebook Like box to your website or blog

Hi guys, we are always here to serve you with tools and tips that will transform your blog from a boring website to an absolutely eye-catching one.
Today, we'll be sharing with you on how to create a customized Facebook Like button.
For Blogger Users
Go to your http://blogger.com
Click on Layout
Click on add new gadget
Select the Add HTML/JavaScript Gadget in the pop up window that appears
Copy the Code below and paste it into the text area
Save it
Save the current layout arrangement and click on view blog

<style type="text/css"> .facebookOuter { background-color:#FFCC00; width:250px; padding:10px 0 10px 10px; height:250px; border:1px solid #CCCCCC; } .facebookInner { height:250px; overflow:hidden; } </style> <div class="facebookOuter"> <div class="facebookInner"> <div class="fb-like-box" data-width="245" data-height="290" data-href="http://www.facebook.com/websytedesigners" data-border-color="#F4F4F4" data-show-faces="true" data-stream="false" data-header="false"> </div> </div> </div> <div id="fb-root"> </div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script>










Photo Credit: Digiday

Posted By Unknown1:05:00 pm

0

Continue Reading

Merry Christmas to all our Faithful readers

We wish you a merry christmas and blissful new year ahead. God bless you!

Posted By Unknown11:06:00 pm

0

Continue Reading

How to Create the Microsoft Logo using CSS

In this article, I"ll show you a simple way of creating the Microsoft Logo above using only pure CSS. You won't use Photoshop or Corel Draw just CSS. Isn't that amazing?
Copy the following code into your text editor and save it as logo.html
Open up the new document in your web browser and presto, you're good to go.

 <logo>Microsoft</logo>

<style>
logo {
    font: bold 60px "Segoe UI";
    color: #747273;
    line-height: 1.5em;
    padding-left: 1.7em;
}

logo:before {
    content: '\2006';
    position: absolute;
    height: 00.095em;
    left: 0;
    box-shadow: 0.35em 0.35em 0 0.25em #f8510c,
                1.05em 0.35em 0 0.25em #7eba00,
                0.35em 0.97em 0 0.25em #00a3f4,
                1.05em 0.97em 0 0.25em #ffba00;    
}
</style>

Posted By Unknown2:01:00 pm

2

Continue Reading

SlideJS JQuery slideshow plugin for Wordpress

We're back with our free downloads. Download Slide JS JQuery slideshow plugin for Wordpress.

Click the button below to download

Posted By Unknown1:46:00 am

1

Continue Reading