Showing posts with label Tutorials. Show all posts
Showing posts with label Tutorials. Show all posts
Saturday, April 1, 2017
Friday, March 3, 2017
Google PageSpeed Insights - How To Optimize Your Website - Part 1
If your website is taking forever to load and you would like to optimize it but don't know where to start, Google PageSpeed Insights Tool is exactly what you need.
Labels:
Blogger,
CSS,
HTML,
JavaScript,
jQuery,
Tutorials,
Web Development
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.
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.
Labels:
Blogger,
CSS,
Free,
Freebies,
HTML,
JavaScript,
jQuery,
Templates,
Tutorials,
Web Development
Sunday, February 23, 2014
Saturday, February 22, 2014
How to Submit a Blogger Sitemap to Google Webmaster Tools
The easiest way to submit a sitemap to Google Webmaster Tools

To submit a sitemap to Google Webmaster Tools just follow the steps below:
Labels:
Blogger,
Tutorials,
Web Development
Sunday, February 9, 2014
Web Design For Beginners - 4. Your First Web Page
So now that you are all setup you can create your first web page. We could first go into the details and learn about each of the HTML tags but that would be less fun.
1. First you will need to open Aptana Studio 3.
1. First you will need to open Aptana Studio 3.
Labels:
Bootstrap,
CSS,
Free,
Freebies,
HTML,
JavaScript,
jQuery,
Tutorials,
Web Development
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
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.
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.
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.
How to Create a HTML5 CSS3 Single Page Business Card - Free Download
Wednesday, January 29, 2014
Web Design For Beginners - 3. How To Install Aptana Studio, GIMP and Google Chrome on Linux Mint
First of, let me congratulate you for choosing and installing Linux Mint. A few more steps and you should have all you need for learning to create amazing websites.
We will start with GIMP, the prefect PhotoShop replacement. Besides being free, GIMP can do pretty much anything you will need as a web designer.
How To Install GIMP
We will start with GIMP, the prefect PhotoShop replacement. Besides being free, GIMP can do pretty much anything you will need as a web designer.
Monday, January 20, 2014
The Easiest Way To Sell A Song For Free On iTunes, Google Play, Amazon and Spotify
If you want to sell your music online besides having the option of creating individual accounts on iTunes, Google Play, Amazon and Spotify and post you song on each of the 4 platforms.
An easier option is to create a DistroKid account and post a song for free.
Sunday, January 19, 2014
Web Design For Beginners - 2. How To Install Linux Mint
In the second part of our Web Series Web Design For Beginners we will look at how to install Linux Mint.
You are welcome to use any other operating system but I will be basing this Web Series on Linux Mint. Your other alternatives are Windows (which I will not suggest due to the license cost) and OS X (which I will not suggest due to the hardware cost).
Web Design For Beginners - 1. What You Will Need And Why
So you want to take your first steps towards Web Design. A good starting point is to understand what you will need and why.
Hardware:
- Average Computer (Desktop or Laptop)
Software:
- Operating System
- Web Browser
- Text Editor
- Image Manipulation Program
Trying to learn web design should not cost you more than it has to. So I will try to only suggest only open source or free software and hardware that will get the job done without being too expensive.
Tuesday, October 15, 2013
Using The HTML5 Audio Tag To Add Background Music To Any Webpage
The HTML5 Audio Tag
The HLTM5 Audio Tag can be used to add background music to any website. The code provided in this tutorial will work on any platform. I will demonstrate the HTML5 Audio functionality right in this blog post.
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.
Monday, October 7, 2013
How To Easily Resize The Blogger Popular Posts Thumbnail Image Size
The Popular Posts Gadget
If you are reading this post you probably know that the Blogger Popular Posts gadget presents the option to include thumbnail images of the listed popular posts.
The default size of the thumbnail images is 72 pixels high by 72 pixels wide. There is no option to change the size of the thumbnails from the gadget settings and if you change the width and height attributes of img tag in your Blogger Template the images will be stretched and low quality.
Labels:
Blogger,
JavaScript,
jQuery,
Tutorials
Saturday, October 5, 2013
How To Completely Backup Your Blogger Data
1. Backing Up The Contents Of Your Blog
You can easily backup all posts, pages and labels by logging in to your Blogger Dashboard, clicking on Settings and clicking on Export Blog, in the Blog Tools section.
Subscribe to:
Comments (Atom)










