Blogging Ethics

MBT Tube

LATEST STORIES

Showing posts with label CSS and HTMLTricks. Show all posts
Showing posts with label CSS and HTMLTricks. Show all posts

May 16, 2014

How To Embed Excel Spreadsheet On A Webpage?

13 Comments so far

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.

February 10, 2014

How To Customize Font Awesome Icons in Blogger?

5 Comments so far

Customize Font Awesome Icons with CSS
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.

June 15, 2013

Create a Responsive Drop down Menu in Blogger

59 Comments so far

Responsive Drop Down Menu in bloggerThe 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!


May 30, 2013

Design a Responsive Blogger Template - Tutorial

36 Comments so far

Design Responsive Blogger TemplateDesigning Mobile Responsive Templates has become a trending topic in web today. Mobile Technology and Mobile Traffic has evolved immensely from 2010 to 2013 especially in Asia USA and Africa. People now prefer reading emails on their iPhone as compared to using their Desktop computer. Fast wireless wifi connections is another reason that encouraged usage of mobile devices like smart phones (Apple and Android), Tablets, netbooks and low resolution cellphones like NOKIA.

More of our clients today are interested in fluid and flexible Blogger templates compared to traditional Fixed width Layouts. We have received over a hundred requests for this tutorial series. We are therefore releasing the first ever complete step by step Tutorial Guide on Mobile Optimized Responsive Blogger Templates to the Google Blogger Community. You will learn how to enable your Blog layout adjust itself automatically to the Device Screen Size.


May 28, 2013

Drawbacks of JQuery Lazy Load Plugin For Posts and Images

10 Comments so far

Lazy Load For blogger blogsJquery 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.


December 27, 2012

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

33 Comments so far

css3 keyframesJquery 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.


December 4, 2012

Fancy Black Skin For LinkWithin Gadget

37 Comments so far

linkwithin black skinLinkWithin 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.


November 27, 2012

Reposition Navigation Buttons in Blogger!

22 Comments so far

reposition navigation links in bloggerThe 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.


October 16, 2012

Create Static HTML Design Of your Blogger Template

30 Comments so far

design blogger templateThis 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.


October 14, 2012

XHTML To HTML: Blogger Template Conversion

36 Comments so far

XHTML to HTML Blogger templatesI already shared how a dynamic XHTML BlogSpot template could be converted into a blank Static HTML Template, but what if you needed to keep the same design of your blog and only remove the Dynamic objects like widgets. This could easily be achieved by carefully converting the XHTML format of code structure to Basic HTML 4.0 File. This will enable you to even embed or add a PHP or ASP.net code inside the Cloned BlogSpot design in HTML format. A live example is our Contact page with a PHP contact Form. It is not possible to add PHP inside blogger templates because no direct access to web hosting ftp account is available so far. When you visit our contact page, you will feel like you are still in BlogSpot template environment but in reality its only a Cloned HTML design of the original template. The steps today are interesting and fun to try. Make sure you have a webhosting to try today's tutorial. We are using hostgator as our blog web host to host all our files and resources.


September 8, 2012

Convert Blogger Template into a blank HTML Page

51 Comments so far

turn blogger to blank pageBlogSpot 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.

September 3, 2012

Colorful Tabs: A JQuery Menu For Blogger

97 Comments so far

colourful jquery menuAfter 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.

August 27, 2012

Increase Page Layout Size by hiding Sidebar in Blogger

46 Comments so far

expand page layoutIf 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.

June 6, 2012

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

12 Comments so far

jquery animationJquery 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.


June 5, 2012

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

19 Comments so far

what is z-index propertyOne 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.


June 2, 2012

Add CSS3 Transition effect To a Drop Down Menu

24 Comments so far

CSS3 TRANSITION EASE-IN-OUTEver 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.


May 29, 2012

Create a Drop Down List For any Horizontal Menu

34 Comments so far

create a drop down listA 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.


May 16, 2012

Display Guest Author Box Automatically in Blogger

79 Comments so far

Author Box in BloggerGuest 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


May 12, 2012

Add Free Speech Recognition To Your Website Using HTML5!

16 Comments so far

Voice Recognition
Every website has some sort of a text input field, which the visitors can use either to interact with the author or other visitors, or to perform a search. Users can either input text in search boxes, comment fields, or contact forms. This input, of course, comes from keyboards, i.e. the 'written text' input. But don't you sometimes get the feeling that in this digital era where technology is taking giant leaps, things should be a bit automated? Automated in terms of ease-of-use for the users. Well fortunately, there is another, cooler input method you can employ to provide your blog visitors a better user-experience, and that is speech recognition, all thanks to HTML 5!

Speech recognition is great. And so is HTML 5! It gives your blog a wider range of functionality. Now, instead of typing keywords and phrases in search boxes, all the users need to do is connect their microphones to their computers, and speak the words right into it! Sounds great, huh? Well let's see how you can do that.


February 9, 2012

Newest 200+ Comments Not Showing In Blogger - Fix Found!

34 Comments so far

fix 200 comments problem in blogger

Due to Blogger Threaded comments, most of the comment code structure has been seriously effected. Normally when a post exceeds the limit of 200 comments, latest comments are paginated and only the oldest 200 comments are displayed on post page. You could switch between oldest and newest comments by using the comment pagination links but due to threaded commenting system these links got messed up and would not show up now. I got a custom script from my friend nhamngahanh from simplexdesign which will help you fix this 200+ comments problem so that your visitors could access all your comments. Lets cook some new recipe today!


Widgets + Web Designing

Workshops

SEO Mashup