Blogging Ethics

MBT Tube


Showing posts with label Web Designing. Show all posts
Showing posts with label Web Designing. Show all posts

December 20, 2013

How to Use LocalStorage in Blogger to Set Cookies?

13 Comments so far

how to create cookies in blogger?In our last post we learned the difference between a web cookie and HTML5 Local storage. Now when you are cleared what are the benefits of using HTML5 Local and Session storage methods to store data on a client's browser, lets now learn how to implement these functions to any HTML DOM in Blogspot blogs. This method is not limited to Blogger but can also be used in exact same procedure in Wordpress blogs. Lets learn this interesting new technology with this extremely easy first time guide.

December 18, 2013

How to Set Cookies In Blogger Using HTML5?

5 Comments so far

setup cookies in BloggerSaving data inside cookies in blogger blogs is probably the most untouched topic because we often avoided talking about internet cookies due to its privacy concerns. There are many cookie plugins available such as this jQuery Plugin by Hartl which monitors and stores user activity. But neither will we use any such plugin nor will we run bulky JavaScript on front end. We will rather use HTML5 LocalStorage, the most efficient new technology that is rapidly embraced by developers across all platforms. Unlike web cookies, LocalStorage doesn't save data as text files on your hard disk, instead it saves them on your browser and only the website which stored data in the browser can access it, that's the most interesting part of it that has vanished possibility of all security threats forever. You can now easily control the display of widgets on your BlogSpot blogs using this method.

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

January 14, 2013

Launching Service: Vector Face Art

44 Comments so far


Mohammad Mustafa Ahmedzai

Can you recognize this man up here? Yup that's me! ;p Colored in almost just black and white. We are glad to introduce today yet another additional service being offered by STC Network. Apart from the huge list of services we offer like designing icons, logos and web templates, we have stepped into Vector Face Designing. An art that is a mixture of limited flavors of colors that combine to produce a compelling digital image. Whether it be you, your pet or your company's CEO, just submit his photo to us and get him an artistic digital Personality!

December 29, 2012

Releasing Blogger Notification Bar!

70 Comments so far

Blogger Notification BarLooks like the new year is near! Out of the premium sets of design resources in our repository, we often share one of them as a freebie when the occasion is precious. There are many creative premium widgets, tools and plugins that we managed to develop this month for our regular clients and out of these I will be sharing just two such resources as a new year gift. They are: (1) Blogger Notification bar widget that you can see live on our blog at the top and (2) a Blogger Template entitled "Salahuddin Ayubi" which is far better than any of the templates we designed so far and makes us really jealous when we compare it to our current design of MBT blog itself!

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.

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.

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

June 25, 2012

jCarousel Plugin- Scroll Images with jQuery in blogger

15 Comments so far

jcarousel image scroller

jCarousel is a jQuery plugin used widely for controlling list of items (both images, videos or text) in horizontal or vertical order. The items can be scrolled back and forth with animation. The carousel can be used either as image scroller or textscroller. It can be controlled externally with both JavaScript and AJAX and of course php. So it's a smart coded plugin that can be altered with all possible jquery functions. Its created by Jan Sorgalla and you can see several versions of here by visiting Sorgalla' website. To keep things simple we have filtered the code, compressed  it and made it as small as possible. You can easily customize it and install it on your BlogSpot blogs with just a single copy and paste of the code we would share today. You can use the same code to install it on any blogging platform may it be Joomla, wordpress or even a Static HTML website. Lets get to work now:

June 22, 2012

CodeLobster: The Perfect PHP Development Tool

38 Comments so far

Codelobster a perfect php editor

PHP is one of the most widely used programming scripts. It is the same language that gave birth to Facebook and your beloved Wordpress. Content Management systems and ecommerce websites are built largely with PHP. I really enjoy writing and testing algorithms. PHP is enjoyable as long as you are using the right tool else its all of a headache and tasteless consuming language. While developing my recent university project which was based on "Online Mobile Marketplace " I badly felt the necessity of built-in PHP and JavaScript functions. It is really difficult to code every single function out of scratch unless you use a handy tool to code fast and efficiently. I used various online free PHP editors but their Syntax Highlighting, intellisense and debugger sucked so bad that  I had almost made up my mind to switch to a different project. But then a fellow friend who is a freelance developer suggested that I should try Codelobster PHP Edition.

June 21, 2012

Expand/Collapse Blogger comment Box with jQuery

116 Comments so far

expand/collapse blogger comment boxBlogger comment form is the only section in blogspot blogs that still irritates users a lot.  After a successful customization of this form last year we now took a step even further to integrate jQuery slideToggle and accordion effect into it. Luckily major browsers now do support JavaScript library so this widget is compatible with all browsers. The tutorial today will help you to create a beautiful expandable and collapsible huge button that will display comment form by sliding down smoothly when triggered and hide it when clicked again. We will be using simple jquery functions to enable a button to  show/hide all div sections that hold the comments box.

June 10, 2012

Releasing Cheery Sharing Icons - Free!

10 Comments so far

Cheery icons set

I had a habit of releasing freebies on special occasions two years ago but due to laziness I neglected its importance. In order to revive that lost habit we are releasing a free icon bundle entitled "Cheery" which is the nickname of  our funny university Chairperson =p. The bundle includes all major social networking icons like the latest Google Plus, Pinterest, Delicious, StumbleUpon, Technorati, Facebook, Twitter, RSS, DIGG  and most importantly an icon for MBT. This set thus includes a total of 10 Free well crafted icons in PNG Format. You can download the icons in original 300 X 300 pixels size. I have not resized them to standards like 16, 32, 48 and 128.

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

Widgets + Web Designing


SEO Mashup