Sunday, 27 January 2013

Splash HTML5 Template

Filled under:

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

Friday, 25 January 2013

The Odesk Contractor Manual

Filled under: ,


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

CSS3 Social Network Buttons

Filled under: ,


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

Wednesday, 23 January 2013

How to create a stylish header using CSS3

Filled under:


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

Wednesday, 16 January 2013

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


Shout it

Posted By Unknown5:10:00 am

Thursday, 10 January 2013

How to Install Windows Programs on Ubuntu

Filled under: ,

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

Tuesday, 1 January 2013

How to Add a Subscription Box

Filled under: ,


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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=labstrike&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);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 == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}'
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='TWITTER URL' rel='nofollow' target='_blank'
<a href='GOOGLE+ URL' rel='nofollow' target='_blank'
<a href='PINTEREST URL' rel='nofollow' target='_blank'
<a href='RSS URL' rel='nofollow' target='_blank'
</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

Happy New Year - 2013

Filled under:

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

Monday, 31 December 2012

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











Photo Credit: Digiday

Posted By Unknown1:05:00 pm

Sunday, 30 December 2012

Merry Christmas to all our Faithful readers

Filled under:

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


Posted By Unknown11:06:00 pm

Friday, 28 December 2012

How to Create the Microsoft Logo using CSS

Filled under: ,

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

SlideJS JQuery slideshow plugin for Wordpress

Filled under: , ,


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
BthemesandTricks is loading comments...