Test Blog

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 . 2. We will now start editing Blogger template. Go to Template --> Edit HTML 3. We will open a div and add a Blogger section. Add the following code right after the opening of the body tag: <div id="header" class="navbar navbar-default navbar-fixed-top section"> <b:section class='navbar' id='customnavbar' maxwidgets='1' showaddelement='no'> ...

In this tutorial you will learn how to remove the Blogger Navbar Gadget.   1. The firs step is to Log in to your Blogger account and go to your click on Layout . 2. Click Edit in the Navbar widget. 3. Scroll to the bottom, click the Off checkbox and click save. The Navbar widget should now be removed from your Blog.   Leave your questions and suggestions below.

In this tutorial you will learn how to integrate the Twitter Bootstrap 3 Framework with your Blogger template. 1. We will apply the Twitter Bootstrap Framework on top of the Blogger Simple template, so as a first step go to your Blogger Dashboard --> Template and apply the Simple  white template. After applying the white Simple Blogger Template you blog will look something like this: 2. Open the HTML Editor by going to Template --> Edit HTML . Here we will add the Twitter Bootstrap CSS and js files to the header section. 3. Search for the closing tag of your header section and add the Twitter Bootstrap Framework and i suggest also adding the jQuery library if you plan to use the Bootstrap jQuery plugins. Like this: <link href='//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' rel='stylesheet'/> <script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/> <script src='//netdna.bootstrapcdn.co...

I recently was asked how one could restore Safari as the default web browser on Mac OS X. Here is the quickest way to do that: 1. Open Safari 2. Open the Safari menu and select Preferences 2. In the General tab open the Default web browser drop down menu and select your preferred browser. (In this tutorial I selected Safari) You have now successfully changed your default browser.

In some cases iOS7 does not display the "Decline" button for incoming calls. So how do you decline a call when the "Decline" button is not there? The answer is simple: All you have to do is press the physical lock button (at the top right of your iPhone) twice. Pressing the lock button once while receiving a call will silent the phone. Pressing the button a second time will send the call to voicemail. Please leave your comments or questions below.

Meta descriptions are HTML attributes which provide a description of the contents of a web page. They are used by search engines to provide preview snippets for the search results. In this tutorial you will learn to create a meta description which perfectly fits the Google search results page description snippet. As an example you can google "apple" and see how the www.apple.com description is not truncated and perfectly fits in the two description rows under the search result title. The first guideline for having the perfect search description is to have between 150 and 160 characters. You can use a word processor or an online tool for making sure that your search description does not exceed 160 characters. Mostly, I use Letter Count . If you enter the Apple search description in Letter Count you will see that they have used 142 characters, this being the reason their description is not trimmed. For implementing the meta search description in your website your code should l...

For a better understanding of the results you can achieve by styling your website background I will demonstrate the options you have using CSS3.   The background-image property displays one or more background images for an element. In this tutorial we will cover using one background image to style the background of the HTML body . We will use the image above as background-image and regent st blue (#9abee1) as background-color. The correct CSS syntax for the HTML body background image & color is: body{ background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijRO0KKRuzG_5fiiucDOYAIk7X4H20Lz8q9iMSn5ZZ9Yj6iATQd5_7Zwezg8eVQ_qgDpfJW6qGuBO45ZHPOn6Whar0x1lCJvRHDr-GOdNjTizk_oVvRiwXCxjh2cUT3qKHjljPTQyxGjM/s1600/bg.jpg'); background-color:#9abee1; } However, using only this code the image will be tiled (in most browsers), and not stretched to cover the entire browser window. We will now make sure the background image does not scroll with ...

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; 2. Click on Layout and make sure you have the same widgets on your Blog as the ones in the image below; You can later add other widgets and customize them to match your template. 3. Click Edit on the Navbar widget and select Off . 4. Click Save arrangement and preview your Blog. This is what you should have so far: 5. Now let's start by removing the styling of the template so that we are left with a blank template. To clear the style of the template click on Template then Edit HTML and expand the <b:skin> tag by clicking on the small arrow on the left. Find this code: /* C...

Many new devices have double the pixel density of old devices. So you can use images twice in size for your websites background or content, in order to obtain a better looking design. The best and easiest way is to use two background images, as shown in the image above, and display the correct image using CSS3 media queries. Using this method the right image will be sued as the background image depending on weather the device is equipped with a retina screen or not. Here is the code:   You will have your regular CSS declaration of the body background image: body{ background: url ('background-image.png') repeat; } At the end of your CSS stylesheet you can then use this code: @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( ...

Using the Blogger conditional tag will be easy if you have this cheat sheet handy: Your standard conditional code will look like this: <b:if cond='condition'> content to display <b:else/>   content to display otherwise </b:if> Or like this if you have no "else" condition: <b:if cond='condition'> content to display </b:if> You can also embed an if condition into another if condition: <b:if cond='condition'> <b:if cond='condition'>   content to display </b:if> </b:if> So let's have a look at the complete list of available <b:if> tags: For showing content only on static pages: <b:if cond='data:blog.pageType == "static_page"'> content to display <b:else/>   content to display otherwise </b:if> For showing content on each post page: <b:if cond='data:blog.pageType == "item"'> content to display <b:el...

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. Open the zip file downloaded from above and open the HTML file. Copy the PHP file and host it on a server with PHP. You can use one of the free hosting providers or host it on your own server. Now, copy the location of the PHP file and paste it in the HTML file on line 29 replacing the URL in form action="" . Open the zip file downloaded from above and open the HTML file. Copy the form to your contact page and apply your own style to it. Here is an example of the form HTML code embedded in this page: Contact Form Name Email ...

If you are using Joomla and you wish to preview your articles before publishing them on your website you can use this simple method. The first step is to set the Article status to Archived . You can now save your article and click on the Publishing Options tab. On the Publishing tab find the Article ID . Now, in your browser type http:// your_website_address /index.php?option=com_content&view=article&id= article_id Replace your_website_address with your own website address and article_id with your Article ID. This way you can preview your articles before publishing. Please leave your questions and suggestions below.

Based on a popular CMS and designed using a customized version of Twitter Bootstrap Version 2.3.2, Best Offers delivers the best deals in Romania through social networks, newsletter and the website itself. The listed offers are published on their individual pages containing Company Name, Region of availability, Offer Title, Offer Image, Price, Expiration Date, Social & Sharing Button, Published Date, Number of Visits, Offer Description and Company Contact Information with integrated Google Mapsiframe. Best Offers publishes offers from 4 different categories: Shopping , Services , Travel & Events . Customers are redirected to the Company Online Shop of the Company Reservation Page. Please check out the website and leave your comments or suggestions below.

These are my top 10 choices for web design, inspiration & tutorials: 1. Web Designer Wall Started by Nick La in 2007, Web Designer Wall was launched as a personal blog where Nick wrote about design ideas, trends, and tutorials. The site has been featured on many magazines and galleries. It is also recognized as one of the popular design blogs due to quality content and beautiful design Link to Web Designer Wall 2. Noupe Noupe passionately delivers stylish and dynamic news for designers and Web developers across the globe on all subjects of design; ranging from CSS, Ajax, JavaScript, Web design, graphics, typography, advertising & much more! Our goal is to help you communicate effectively on the Web with an engaging website and functional interface. Link to Noupe 3. Smashing Magazine Founded in September 2006, Smashing Magazine delivers useful and innovative information to Web designers and developers. Link to Smashing Magazine 4. Webdesigntuts+ Webdesigntuts+ is a blog made to ...

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> If you need any help with the implementation of the template po...

Character Simple Code Numerical Code Hex Code Ä &Auml; &#196; Capital A-umlaut ä &auml; &#228; Lowercase a-umlaut Ö &Ouml; &#214; Capital O-umlaut ö &ouml; &#246; Lowercase o-umlaut Ü &Uuml; &#220; Capital U-umlaut ü &uuml; &#252; Lowercase u-umlaut ß &szlig; &#223; SZ ligature

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 Search widget Tag cloud widget Googe +1 button Blog Archive widget Stats widget Right sidebar vertical tower AdSense ad Google followers widget Follow by e-mail widget Popular posts widget Blogger adapted pagination links Footer AdSense horizontal ad unit Footer links section You can see the live version of this template in action here. Installing the free Dark Tile Blogger Template   Download thefree Dark Tile Blogger template   here Extract the html file Open the file using your favorite text editor Copy the entire contents of the file Go to your blogger account Click   Template , then   Edit HTML Paste the contents of the HTML file you previously copied Click ...