Showing posts with label Templates. Show all posts
Showing posts with label Templates. Show all posts

Sunday, December 10, 2017

Average Image Color Utility

Demo




Get the average color of an image. Upload your own image or get the images from pixabay.com.

Tuesday, October 24, 2017

Font Awesome App Icon Generator

Do you need an icon for your application or for custom folders on your desktop?


The Font Awesome Icon Generator is a free tool for creating custom icons based on the Font Awesome icon font.



You can access the Font Awesome Icon Generator here.

Sunday, June 21, 2015

Time To Color Blogger Widget


The time to color Blogger widget will generate a background color for your blog according to the current time and update every second.




The end result will look like this.



The Time To Color script can be used on any HTML page. Here are the steps for adding it to Blogger as a widget:


Monday, December 29, 2014

Karate Button - Animated Mobile Menu Button - Twitter Bootstrap 3


A nice addition to Twitter Bootstrap would be an animated mobile menu button similar to the one on the apple.com website.

Demo

Keep in mind that if you are not viewing the Demo from a desktop browser you will need to resize the window in order to see the mobile menu button.

In case you were looking for a simple way to add an animated mobile menu button to your twitter bootstrap website, here it is:

In order to have a fully functional Twitter Bootstrap mobile menu Karate Button all you have to do is include the two links below in the header section of your website.

<link rel="stylesheet" type="text/css" href="http://ta-systems.net/Blogger/tudor-anghelina.com/Karate-Button/karate_button.css">

<script src="http://ta-systems.net/Blogger/tudor-anghelina.com/Karate-Button/karate-button.js"></script>


The Karate Button uses JavaScript for removing the standard Twitter Bootstrap default mobile menu button and replace it with the CSS3 animated mobile menu button.


Please leave your questions / suggestions in the comments sections below.

Friday, March 7, 2014

Free Pure CSS3 Logo



CSS3 is supported on most mobile devices nowadays so you have the option of designing a custom CSS3 logo.

See a demo of the Pure CSS3 logo here and download the code used for this tutorial here.

Each of the five words used for the creation of the CSS3 Logo is enclosed in an individual div. By applying CSS3 gradient backgrounds you will get the colored stripes.

The first letter of each word is actually a lighter version of the background color.

You can use different color combinations to mach the palette of your brand.

Sunday, February 23, 2014

Wednesday, February 12, 2014

Top 10 Website Builders of 2014

If you are not convinced that writing HTML and CSS code is for you but you still want to design your own website, a website builder might be what you are looking for. These days you have a lot of good choices.

Top 10 Website Builders of 2014


You can create your own website from a template or start from scratch and create your own design by dragging a dropping elements in place.

I will list the top 10 Website Builders i have reviewed in 2014.


Friday, February 7, 2014

Single Page HTML5 CSS3 Business Card Template 2.0

After seeing a huge interest in the Single Page Business Card Tutorial i decided to create a Single Page Business Card 2.0 Template. Besides listing your title and contact details the 2.0 template also has some nice CSS3 transition effects, is available in 4 colors and the best part: IT'S FREE FOR DOWNLOAD.



Demo Download




CSS3 Transition Effect


On hover the Name/Title block and the Contact Details blocks slide out vertically showing a centered block containing name and position, social and contact icons.

Sunday, February 2, 2014

How To Create A Free Contact Form For Your Website Using Google Drive

If you are determined not to use PHP for creating a contact form you have the option to use Google Drive Forms. You can then use a custom page styling to create your own contact page. For the purposes of this tutorial I will use Twitter Bootstrap 3.



Demo Download



1. Open drive.google.com and create a new form. Add the following fields until you get the result as shown in the screenshot below. You will need a Name, an E-mail, a Subject and a Message field.

Monday, October 14, 2013

Free Music Album Blogger Template - HTML5 Audio, CSS3, JavaScript





HTML5 Audio - Free Blogger Album Template


Download the free Blogger template to present your Album to your fans. Your tracks can be played online and you can also add a download link to your entire album or the iTunes link.


Saturday, October 12, 2013

How To Create A Blogger Popular Posts Carousel




Stylish Popular Posts Carousel for Blogger


After reading a lot of questions regarding resizing the Popular Posts thumbnail image size, I decided to write this tutorial. But that wasn't enough. The reason for the many questions is that publishers using Blogger are searching for a better, more attractive way to display their popular posts.

I wrote the code for a blogger carousel as displayed on this blog's homepage and decided to offer it for free for download.

Thursday, October 3, 2013

His & Hers Free HTML5, CSS3, Bootstrap3 Resume Template

After posting the Free HTML5, CSS3 & Twitter Bootstrap 3 Minimalist Design Resume I got some interesting feedback. I decided to look at the improvement suggestions and release Version 2.0 of the Free HTML5, CSS3, Bootstrap3 Resume Template.

Special thanks to +David Metcalfe for the design improvement suggestions.








Responsive Design


The resume template was designed with cross-screen compatibility in mind. The responsive, scrollspy navigation ensures easy access to all sections of the resume while resizing in order to adapt to the screen size.

Sunday, September 29, 2013

How To Integrate The Twitter Bootstrap 3 Framework Into Your Blogger Template

In this tutorial you will learn how to integrate the Twitter Bootstrap 3 Framework with your Blogger template.




Monday, September 16, 2013

How To Create Your Own Blogger Template

If you want to create your own Blogger Template or better understand the best way to customize an existing template this tutorial should help you.

 

In this tutorial we will modify the White "Simple" Blogger Template.



1. To follow the instructions in this tutorial step by step, please login to your Blogger Dashboard and click "Templates. Apply the White Simple template to your Blog;




Saturday, September 14, 2013

How to create a PHP, Bootstrap 3 Contact Form which works with blogger and any other platform

Need a contact form for your Blog?


Here is a simple way to create a professional looking contact form using PHP, HTML and Twitter Bootstrap 3. By downloading the files in this tutorial and with some minor modifications you can quickly implement the contact form on your blog.


You can download the 2 files used for this tutorial from here. I have also included the PNG file used as a background tile in case you want the same design.

Monday, September 9, 2013

How to create an easy to style Custom Blogger Search Form

You will find that the Blogger Search widget is unbelievably difficult to customize. If you are using a pre-developed HTML and CSS template like twitter Bootstrap 3, the CSS stylesheets will not be applied to the Blogger Search Widget form.





The above form is styled using the default twitter Bootstrap 3 stylesheet. You can use this code to create your own easy to style Blogger Search Widget.

<form role="search" method="get" action="/search" class="form-inline">
  <div class="form-group">
    <input class="btn btn-default" id="submit" value="Search" type="submit" />
    <div class="form-group">
      <input id="searchBox" class="form-control" type="text" placeholder="Search" name="q"></input>
    </div>
  </div>
</form>

Dark Tile - Free Minimalist Blogger Template - HTML5 CSS3 Bootstrap 3


Download the free Dark Tile Blogger Template from here.


The free Dark Tile Blogger Template includes:

  • Complete responsive design using HTML5 CSS3 & Twitter Bootstrap
  • Fixed top navbar
  • Blogger title link as navbar home link
  • Responsive menu
  • Blogger labels listed as dropdown
  • Header AdSense ad unit

Friday, September 6, 2013

Free Blogger Template - HTML5 CSS3 jQuery Mobile



Download the free HTML5 CSS3 jQuery Mobile Blogger Template from here.


The free blogger templates includes:

  • Custom designed header
  • Custom designed gadgets
  • Custom designed search form

Monday, September 2, 2013

Free HTML5, CSS3 & Twitter Bootstrap 3 Minimalist Design Resume




Download the new Minimalist Design Resume Template

 

Use the template above to create your own Minimalist Design Resume.
See the live version here

After downloading the .zip file if you try to edit the html file locally, you will need to change the links to the bootstrap stylesheets by adding "http:" before each of the CND hosted bootstrap links, and before the link of the google hosted jQuery library.

Sunday, December 2, 2012

Make a HTML Signature for Apple Mail - OS X Mountain Lion

In this tutorial you will learn how to create a HTML signature, for the OS X Mountain Lion Mail App, compatible with most e-mail apps. HTML e-mail signatures are the perfect way to give your e-mail a more professional and elegant look.


1. Creating the HTML Signature

The first thing we will do is write the HTML code for our signature and preview it in Safari. You can use your preferred browser for this.

I will use TextWrangler for writing the HTML and CSS in this tutorial, as this is my favourite text editor for OS X. As an alternative for Windows i recommend Notepad++ or if you prefer an online editor Could9 IDE gets the job done.