5 Cool CSS Tricks To Spice Up Your Website

CSS is a basic part of any webpage, and is what gives the page its distinctive look. CSS can be simple yet complicated at the same time, from a simple typography rule to a complex animation. It can be used to create amazing things. Today, we'll share some CSS styles which you might useful, and may use on your website to spice things up a bit.

More

Unknown 12/04/2014

How To Control Browser Cache And Cookies With HTML?

Caching and cookies are two methods browsers employ to save data regarding a certain website. Caching is used to store some web page data locally for faster loading on each subsequent revisit, whereas cookies are small pieces of data containing important user information for a website. Not many webmasters know or use this, but you can actually use just HTML meta tags to control cookies and browser caching for your website!

More

Unknown 11/24/2014

Use HTML 5 Picture Element To Make Webpages Load Faster

Responsive Web Design has taken web developers and designers by storm, changing the way they approach the development of a website. However, it isn't perfect and has its limitations. According to Archive.org, images constitute about 62% of the total weight of a webpage on average, suggesting that there's a need for a better way than CSS rules to deliver images responsively to a virtually infinite number of screen types and sizes. Meet the new HTML 5 Picture element.

More

Unknown 9/13/2014

How To Clean Up A CSS Stylesheet?

Often over the course of time, you need to make small tweaks to your website. Most of these tweaks are usually visual, and involve working with CSS files. Over time, CSS files grow and may accumulate redundant or overlapping CSS rules that are old and no longer used, or are overwritten by new styles. Some styles might be leftovers from a plugin or an on-page element that you no longer use. These useless styles can increase the size of your CSS files, hence compromise the load speed. Let's take a look at how you can clean out your CSS files.

More

Unknown 8/19/2014

How To Embed Excel Spreadsheet On A Webpage?

While writing an article, presenting data in a tabular form sometimes becomes important. It can be useful to represent statistical or analytical data. Now most of us use a spreadsheet software such as Microsoft Office or Google Docs for data calculation and manipulation, but can only make do with tables - or worse, images - when representing that data online. Well today, I'll show you how to embed Excel and Google Spreadsheets on a webpage.

More

Unknown 5/16/2014

How To Customize Font Awesome Icons in Blogger?

Font Awesome is an amazing icon-based font that contains compact-sized, but high quality scalable vector graphics that can be used to optimize most icons across your site. We've talked about implementing Font Awesome Icons on your Blogger template (or any HTML webpage), and we saw that one of the best features about this iconic font is that it is CSS-customizable, which means you can use some pre-built classes, or write your own custom styles to fit your website! In this post, we'll talk about customizing these icons for your site.

More

Unknown 2/10/2014

Create a Responsive Drop down Menu in Blogger

The task of Designing a responsive blogger template starts with the Header and the most important part of Header is the top navigation menu that provides useful links to your inner pages. Responsive drop down menus are viral now and can be seen widely implemented on all wordpress blogs and even mashable.com. Today we are releasing the first ever tutorial on designing a flexible Drop down navigation menu for BlogSpot blogs without using a single script or image! The best part is that it is not just a flat menu but with a drop down list. This makes our tutorial distinguished from those several codes and plugins proposed by some Geeky friends at Github. Using simply HTML5 <nav> tags and CSS3 :checked selectors, we managed to design a menu that we hope would be useful to the blogger community because it is really an efficient menu that is compatible with all major browsers and uses no Jquery at all!

More

Mohammad 6/15/2013

Drawbacks of JQuery Lazy Load Plugin For Posts and Images

Jquery and CSS3 has enabled front end developers and even designers to create amazing effects but unless you check the compatibility of the code, never play with such plugins and tools because there are still people who don't use JavaScript in their browsers and your blog will look no less than a mess to them. This effects both your readership and blog pageviews. We are observing a growing trend of Jquery implementation on both Blogger and Wordpress blogs. A Famous known plugin is Lazy Load for images (inspired from Yahoo plugin) and Lazy Load for blogger posts (Also called infinite scrolling). Lazy load for images delays loading of images in long web pages and makes the page load faster, on the other hand Infinite Scrolling plugin for Blogger keeps on loading posts as you scroll down the page just like you scroll down to load more tweets in twitter.

More

Mohammad 5/28/2013

Animation using CSS3 KeyFrames and jQuery's scrollTop() function

Jquery is indeed the most compressed and efficient library of JavaScript introduced so far that has made a web developer's job more easy. Its built in functions of show(), hide(), AJAX() and my beloved scrollTop() are indeed the most used functions that gives a new life to user interface (UI). CSS3 animations using @Keyframes rule is one of the most innovative things I came across so far. Pseudo elements such as :before and :after are increasingly being used now because they eliminated the use of unnecessary div tags.

More

Mohammad 12/27/2012

Fancy Black Skin For LinkWithin Gadget

LinkWithin is an excellent plugin that can be integrated in both Wordpress and Blogger to display related stories by fetching posts that belong to the same category/label or tag. It really loads fast and do help in increasing reader engagement in reading more and more and helps build pageviews. Months ago we introduced a way by which you can customize the look and feel of this plugin by overriding its default stylesheet. You can surely override any Class or ID by simply using the !important property.

More

Mohammad 12/04/2012

Reposition Navigation Buttons in Blogger!

The navigation buttons or links that are displayed at the bottom of each comment section in BlogSpot blogs enable visitors to switch between new and old posts or move from one post page to another ordered by date and time. These buttons become less of use when number of comments increase too much. Normally readers do not even observe the navigation deep down and this results in loss of precious pageviews. I have always emphasized that value pageviews more than unique visitors because it is indeed pageviews that turns into revenue generating page impressions both for AdSense or any other Ad Network.  You might have seen the More, Next and Previous button showing inside the top black sticky bar on MBT homepage and post pages. It is really not possible to shift a Post data item to any other widget section in blogger. Doing such results in "Data variable not found in dictionary" error or similar.

More

Mohammad 11/27/2012

Create Static HTML Design Of your Blogger Template

This is part 2 of our series "XHTML to HTML" . We have already learned how to turn blogspot's layout into blank HTML page but we have no yet shared how to remove the dynamic XML tags alone leaving behind the stylesheet, scripts and html design. In today's tutorial I will try to share the basic way of understanding a websites core structure by identifying the important div sections that make up the structure. I hope you have followed part one of the series and have downloaded your blogspot template. I also assume you have Dreamweaver or Codelobster installed on your desktop computers or laptops.

More

Mohammad 10/16/2012

Convert Blogger Template into a blank HTML Page

BlogSpot templates are codded using the XHTML 1.0 Strict Document Type. It was developed by world wide web consortium on 26 January 2000. Unlike PHP or ASP.net the rules of XML are strict and unforgiving. A slight mistake in code results in terrifying error messages that you often see while editing your blog template. In order to understand how these templates are designed and programmed. You need to start from scratch. I was planning to release some grid and List view templates but the tough work schedule made it difficult to do so. However I am releasing today a simple code that will turn your test Blog's XML structure into a plain, empty template with no widgets. The entire blogger template consists of widgets that are operated and managed using classes and IDs. The blog posts section itself is a giant widget that can be styled in different ways. To make things simple I will share today how to create a blank HTML Page out of a Blogger Template and then start adding widgets to it to experiment exciting new ways of customizing the blog view.

More

Mohammad 9/08/2012

Colorful Tabs: A JQuery Menu For Blogger

After having published and designed over 100+ Navigation Menus for Blogger, both with horizontal and vertical list view, today we would like to share a beautiful menu that has remained the favorite choice of all MBT clients so far. This menu changes color for each tab on mouse hover. It uses simple JavaScript functions to produce neat and clean transition effects. Instead of displaying the sub menu items in traditional vertical drop down list, we aligned them with one another to fit into a single line. Unlike other menus, this widget would easily fit any BlogSpot template without design conflicts. It is positioned at the top most section of your blog to attract readers the most. The installation steps are fun to try and extremely easy. The Menu works fine on all major browsers i.e: IE7+, Safari, Chrome, Mozilla and Opera.  Lets add it to your blogs and get rid of any existing bulky menu that proved no less than a trouble.

More

Mohammad 9/03/2012

Increase Page Layout Size by hiding Sidebar in Blogger

If you visit the Search, Advertise , 404 Error page or contact Page of MBT, you will observe that the entire page width expands and the sidebar wrapper which contains all widgets disappears. You will find these static pages and post sections looking like a plain Static HTML webpage with no labels, Author description, Icons and widgets. All that you see is a wide layout with some text and title. This is achieved by overwriting the Stylesheet with custom styles using conditional XML tags to remove certain sections of the blog layout. Sections that can be removed include your blog header, post body, sidebar, footer and what not! Today you will learn an easy way to achieve this and turn your featured pages and posts into a Website Look and not a weblog.

More

Mohammad 8/27/2012

Add jQuery .slideToggle() effect in a Drop Down Menu

Jquery is a beautiful library of JavaScript that has inflated a new life in web technology.  Websites today largely use jQuery to create gadgets and designs that were impossible in past. Unlike CSS3 and HTML5, jquery is supported by all major browsers including IE8+.  The functionality that we will learn today is called Jquery Slide Toggle effect. It enables you to control the speed elements which respond on mouse hover. If you move your mouse towards the drop down menu (at top) on this blog, you will observe that the column drops smoothly and slowly. It first slides down and then expands to its full width. We will use one simple function to introduce this animation in its simplest form. It is .slideToggle(). This animates the drop down list and produces a beautiful effect.

More

Mohammad 6/06/2012

z-index: Send an HTML element to Back or bring to Front

One of the major problems people facing while designing HTML layouts using CSS is the overlapping issue. CSS positioning lets you position an HTML object anywhere you like. You can locate an object anywhere you like but it involves great care. By using the CSS positioning attributes like absolute, fixed or relative you often come across a problem where on object overlaps another or blocks the view of another section. In order to bring one div section on front or back of another you will need to use z-index property of CSS. Just like in Adobe Photoshop CS5, z-index lets you to send an element to back or bring it to front. In todays' tutorial we will aim at explaining this property briefly and with clarity.

More

Mohammad 6/05/2012

Add CSS3 Transition effect To a Drop Down Menu

Ever since The World Wide Web Consortium (W3C) introduced CSS3 and HTML5, websites, content management systems and online web tools  took a whole new shape. Classic and traditional layouts created using tables no more exists and today we play with well developed style properties to better control the positioning of objects. In our previous post we learnt how to add a drop down menu list to a horizontal menu and in earlier posts you learnt in detail how to create menus but today we will play with the structure we created and will add cool ease-in-out effects. Ease-in-out effect is an interesting property that lets you control the display using a timer. This along with some other attributes made animation in CSS3 possible. With ease-in-out we can add soft mouse hover effect to the navigation menus. Whether you may be a Blogger user or Wordpress, todays' post will give a new look and easing touch to your menu.

More

Mohammad 6/02/2012

Create a Drop Down List For any Horizontal Menu

A website's Header section which includes mainly the logo and navigation menu, is the region that attracts a visitor the most. It's the first section of your entire layout that catches reader attention. Therefore with time designers introduced non-traditional versions of drop down menus using Jquery and CSS3. Most of you probably know how to customize a menu but you often find it difficult to add Jquery effects to an existing menu, add CSS3 transitions for rollover effects and especially to turn a simple horizontal menu into a multi-level drop down menu. In order to understand the core basics of a Menu's HTML and CSS structure we will be publishing series of tutorials on this topic to make it extremely easy for most of you to create and design Menus by your own.

More

Mohammad 5/29/2012

Display Guest Author Box Automatically in Blogger

Guest posting saves great time when you are stuck in exams or engaged in some other off-side work. Google Blogs provide the best blogging experience when it comes to ease and comfort. The user interface and over all control options are extremely easy to set and play with. Unlike wordpress where you can display author box using a plugin, in blogger we will have to code things ourselves. Displaying author info at the bottom of the posts can be done in two ways. The first method as you may know is pasting the author info box manually below each post yourself. The problem with this method is of course precious loss of time. Manually adding an author box below each post could turn out to be a headache, therefore an automatic way would be the best. You have seen the above author box displaying introduction of Qasim below all his posts. This box appears automatically below each post published by his shared blogger account. We used conditional tags to make it work and its really just two lines of code, the rest is all design. Lets understand few things before jumping straight at the tutorial

More

Mohammad 5/16/2012