Demo

What's new in Bootstrap 4?

Bootstrap 4 Alpha 6 is out and it is packed with new features. Let's have a look at the top 10 most expected updates it includes: 

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:

Demo



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.

Download the Animated Responsive CSS3 HTML5 Image Slide Up Menu Template for free.

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.

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.

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.

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.

Visit the album website here.

New HTML5 Website Launched

Download the complete album for free.

For the release of the Shimmer album I have created an HTML5 website with integrated audio player, microdata markup for search engine optimisation and responsive design for cross screen compatibility.

Responsive Design

Cross-screen compatible design featuring a responsive Navbar. The responsive layout adapts well to desktop, tablet and smartphone screens.

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.

In this tutorial you will learn how to create a Navigation Bar using the Blogger Labels widget.

We will use the Blogger Simple template and style it using the Twitter Bootstrap 3 framework.

If you want to follow the tutorial step by step but don't know how to apply the Blogger Simple Template and integrate the Twitter Bootstrap 3 framework, you can find a tutorial here.

1.

First off all, we will remove the Blogger Navbar so that it will not conflict with the static navbar we will create in this tutorial.

If you are unsure how to do this you can find a tutorial here.

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

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.

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>

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

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