Monday, 12 October 2015

HostGator Best Hosting Plans For Bloggers

Hostgator is surely the biggest giant today with excellent 24/7 customer service and largest collection of sites hosted. This review discusses reasons for which Hostgator has become the first choice for pro bloggers and internet marketers.
Note: This post has been updated with new changes made in 2015
No matter whatever blogging platform or content management system (CMS) you may be using, the topic today will discuss reliable and affordable web hosting plans that you can purchase to kick start your blogging career. Advertisers and direct sponsors have started giving more value to blogs which are self hosted and produce quality content. Here we will discuss how to transfer your current domain to HostGator and at the same time buy a reliable hosting plan. We will also answer some frequently asked questions to keep things clean and clear.

Why HostGator?

For this I have written a detailed article that you can read here:

I wont tell you any technical details here like unlimited bandwidth, Disk space, sub domains etc. I would only highlight their excellent customer service. You always need active real support from your web hosting company so that in times of technical need you may not feel helpless. Whether you are a customer or just a passing visitor the agents there are always available to give free help and suggestion.

Web Hosting companies are examined and tested by Online testing organizations and critics every year. HostGator has amazingly moved ahead of everyone in the world of web hosting for speed, reliability and support for over 9 consecutive years. You can Read the long list of awards they have achieved so far at their homepage.

I must tell you that these awards matter a lot because they are reviews collected after detailed research and they are not paid reviews. Therefore their authenticity is always respected and can't be ignored.

I researched for almost a week before choosing our web hosting company. Almost every professional blogger, designer and developer that I came across used HostGator as his web host. I read their reviews and read several forums before making my mind to choose HostGator to provide us with a storage space where we could save our resources and tools. Its one month now since I first joined HostGator and the experience so far has been outstanding. I am learning and experiencing new technologies and can easily apply them to the blog because all latest web technologies and development tools are fully supported by HostGator Control Panel.

They also provide free SEO software to monitor and track performance of your blog along with free $100 Adword and $100 Yahoo Ads campaign if you live in USA.

What can I create after buying a hosting plan?

You can create almost anything using the softwares found in HostGator control Panel (Cpanel)

  1. Blog Software  eg: Wordpress, LifeType
  2. Forum Software
  3. Gallery Software
  4. Guestbook Software
  5. Website Builder
  6. Mail Software  eg: xyz@mybloggertricks.com
  7. Social Networking Software   eg: Facebook, mySpace
  8. Wiki Software
  9. Survey Software
  10. Billing Software
  11. Chat Software
  12. Directory Software
  13. eCommerce Software

I am using Free Blogger, How would it effect me?

You can continue using blogger the same way you did before. You will write and access your posts from blogger.com dashboard as you normally do. Everything would remain the same except that now you don't need to save your style sheets, scripts and web pages on third party servers. You will have your own allocated disk space at HostGator which you can use to create unlimited numbers of sub domains like a Blogging Forum, tool or services Page. Your blog would load much faster than before and would grow more popular amongst the readers and daily visitors.

You can create a separate webpage for any purpose you may like. For example: You can create a uniquely designed webpage for each of your Ebook promotion or any other product promotion. You can do everything that pro bloggers have been doing so far.

I am using Free Wordpress, How would it effect me?

You can easily transfer your posts to your self hosted Wordpress blog with the help of agents. HostGator guys provide great support for Wordpress and the community is always more  helpful in your case. You will have all the privileges that I explained for a blogger user.

Note: Incase you needed premier help in redirecting your Free Wordpress to Paid Wordpress without losing traffic and ranking then you may please contact us via our Services Page

Will Domain Migration Effect my Ranking or Traffic?

Surely not! You can migrate your domain from your current registrar to HostGator within a week and during this time your website would work just normal. It wont stop working or show a no server found error. The transfer never effects your traffic or ranking. Since you are not changing your domain address and just the company who owned your domain therefore all your backlinks will still point to you and you can continue enjoying the PageRank Juice.

However if you are using Blogger.com then your website will go down for just 24 hours till your DNS settings are propagated successfully. We had informed our readers when MBT was about to Go down for a day. Luckily things proved more easy then we expected thanks to the sincere help of HostGator Agents.

How much will it cost me?

It will cost you less than $100 per year! Imagine you waste more than $100-$200 per month on your stomach and accessories, a small budget can build your entire future career. I have share below discount Coupon codes that you can use to get up to 25% discount on your hosting plan.

 

Ready To Become a Webmaster?

 

If you have made up your mind just like me and wish to start experiencing the lifestyle of a webmaster for less than $100 per year then the details below is what you must understand and apply the sooner possible:

HostGator Hosting Plans

There are three business plans that HostGator offers which are:

1. Hatchling Pan

  • Single Domain
  • UNLIMITED Disk Space
  • UNLIMITED Bandwidth
  • Shared SSL Certificate
  • Starting at $6.71/month   Which means $107 per year   This will decrease further after applying our 25% discount coupon

2. Baby Plan   (The plan that we use)

  • UNLIMITED Domains
  • UNLIMITED Disk Space
  • UNLIMITED Bandwidth
  • Shared SSL Certificate
  • Starting at $8.96/month  which means $143 per year. Would further decrease with Discount coupon

3. Business Plan  (Obviously Not for bloggers)

  • UNLIMITED Domains
  • UNLIMITED Disk Space
  • UNLIMITED Bandwidth
  • FREE Private SSL & IP
  • FREE Toll Free Number
  • Starting at $12.71/month  which means $203 per year. Would further decrease with Discount coupon

I used Hatchling plan for running this blog and I will highly recommend it if you are planning to run just one domain on a single HostGator account. If you have more than one blogs/domains than Baby plan is a much profitable hosting plan for you. We are planning to launch a new blog so we will be upgrading to baby plan because we can run two blog networks on a single account for less than $76 per year which is just amazing. This amount will further decrease thanks to discount coupons.

Update: We are using baby plan now!

Conclusion:

Use Hatchling if you want to run just one Domain

Use Baby if you are planning to open more domains in future.

For How Many Years Should You Register?

Register your domain for no less than 3 years. If your register for Less than three years suppose 1 year or 2 years, then it would cost you more because higher discounts are given only when you register for a minimum of three years. We registered our blog for 3 years and I advise the same for you. Higher Discount Coupon codes do not apply for less than three years.

Once your registration expires after three years, you can then easily renew it. They wont terrify you with deadlines.

25% Discount Coupon Codes

If you register now using the coupon code below during the sign up process you will get 25% discount on any hosting plan you choose. You can enjoy free first 7 months with the following discount codes:

discount with coupon

Straight $26.85 Discount ! Apply for at least 3 years!

Click this link and try it.

123927819218

If you are buying a hosting for just one year then using the following coupon will give you $9.94 OFF.

Click this link and try it.

5153557876

Note: Get Higher Discount with this Updated Coupon

mbtblogdiscount

We will make sure to share higher discount coupon codes in coming days.

How To Transfer Your Current Domain To HostGator?

Domain transfer is amazingly free. HostGator did not charged us for Domain transfer unlike other web hosting companies that charge around $28 for a domain transfer. You may confidently proceed for Hatchling or baby plan. During the process if you needed any help you can always contact us or post your relevant queries in the comment box below.

Wish you a happy blogging career. Peace and blessings pals. :)

Wednesday, 7 October 2015

View Blogger JSON Feeds in Human readable Format

Viewing Blogger Json and XML feedsFor web technologies like "Google Blogger blogs" also known as "blogspot blogs", a flexible medium for transporting data from one platform to another is mandatory. For this purpose blogger blogs uses XML to serve Feeds in Atom/RSS formats as a flexible source of data transport and data sharing between third party Content Management systems like Wordpress. With the introduction of JSON in Blogger Data API, it has now become even faster to fetch data and interchange it between blogspot server and browser. Since the default XML and JSON files are compressed in size and all data is presented without indentation in a single line, it becomes difficult to understand the Parent/child relationship of data and view the structure properly. In this part of the tutorial series you will learn how to view Blogspot JSON Feeds and XML Feeds in a human friendly format with clear indentation and tree structure. What you will learn today is a serious Post Mortem about blogspot blogs!

Note: Click the Button below to see full list of topics under discussion.

Topics List

Convert JSON Strings to a Friendly Readable Format

Follow these steps to convert your JSON feed into a tree structure.

1 Paste your Blog Feed JSON URL in browser

http://www.mybloggertricks.com/feeds/posts/default?alt=json

Note: Replace the domain name with yours

2 Copy all the code inside the browser

Tip: Press Ctrl + A followed by Ctrl + C  to select and copy all data

raw JSON

 

3 Next Visit JSON Viewer and paste your code inside the TEXT tab as shown below

viewing JSON feeds

4 Finally switch to VIEWER tab, You will see a neat and clean representation of your JSON feed Objects and Arrays in a tree structure format.

Blogger JSON Feeds structure

 

  • The most important object is the { } Feed object, which contains all data about your blogspot blog. The [ ] entry is the most important array inside the Feed object which contains all data about your Blog posts.  

For example if you wish to find the total number of comments posted on your most recent post, its author name, Post title, Post publishing date and so on then simply click/collapse the starting object inside the entry array i.e. { } 0

Entry array in JSON Feeds

Note:

  • Objects are represented in curly braces { }
  • Arrays are represent in square brackets [ ]

Where,

  • { } id is the unique ID that blogger assigns to each post.
  • { } published is the Post publishing date
  • { } updated is the Post editing date
  • [ ] category shows the list of Labels assigned to this post
  • { } title gives the Post Title text
  • { } content shows the Post content depending on what settings have you assigned for your blog Feeds
  • [ ] link contains important URLs to Comment Form, Comment Feed and Post Page URL.
  • [ ] author includes all data about Author name, Author Thumbnail and Google+ profile link
  • { } media$thumbnail gives the featured thumbnail image URL. If Post contains no image, then this object will be absent.
  • { } thr$total shows the Comments Count.

In my next post, you will learn in detail on how to parse JSON using JavaScript to fetch data form all these Objects and Array nodes.

View Blogger XML Feeds in Human-Readable Format

Note:
Although our Tutorial series focuses mainly on how to fetch data from JSON feeds, we are also giving you information regarding viewing XML feed data just for the sake of learning. You can skip this part if you wish.

First you need to download any freeware XML viewer software available online. I recommend "XML Viewer" or "XML explorer". In my case I am using XML explorer.

Once you have installed this lightweight software, you need to follow these steps:

1 Visit your blog and press "Ctrl + U"

2 You will now be able to see your source file. Search for this

application/atom+xml

3 Click the XML Feed link which looks similar to this one

XML Feed link 

4 Next copy all the raw XML Atom Feed code that you see on screen

raw XML Feed

5 Now paste it inside your XML viewer software. If you are using XML Explorer, select "New from Clipboard" option and all the code will be auto paste inside the software and converted into a readable format.

pasting in XML explorer

 

XML looks just like HTML where all data is enclosed inside custom tags.

Channel tag in XML atom FEED

  • Here the most important tag is <channel> which contains all data about your blog form Labels list till Post info. We used to call it { } feed in JSON.

item tag in XML atom feeds

  • The next most important tag is the <item> tag which contains all your Post data. This tag is renamed as [ ] entry in JSON.

Where:

  • <guid> tag contains your Post ID
  • <pubDate> tag contains Publishing Date
  • <atom:updated> tag contains the Last Edit date
  • <category> tag tells us about the Labels used in the post
  • <title> tag gives the Post Title
  • <description> tag contains all Post content.
  • <link> gives a Feed link which is of little use.
  • <author> tag contains info about Author Name and Thumbnail Link. Note that unlike JSON feeds XML feeds does not provide Google+ Profile Link of Authors.
  • <thr:total> tag contains total Comments Count
  • <feedburner:origLink> tag contains the Post URL

XML feeds play a major role when you migrate your Blog to a non-blogger platform or when you update your readers with newsletters through Feed aggregators. All your Post data and comments info is included inside that XML import file.

Have Questions?

I hope you enjoyed this interesting post mortem of blogspot blogs where you get a clear idea of how data is organized in such content management systems through XML and JSON feeds. In our next parts, we will be covering the coding part and discussing delicious ways to parse JSON in JS. Let me know if you need any help in better understanding any concept covered in last two parts of this longest tutorial series shared first time on web.

Have great time learning and experimenting buddies. Peace and blessings be upon you all! :)

Monday, 5 October 2015

Introduction To Blogger JSON Feeds and Blogger API

Blogger JSON Feeds - IntroductionAfter the introduction of Blogger Data API v3 and its support with JSON Feeds, blogspot blogs have become the new hub of UI creativity for web designers. Almost every developer is busy creating fancy Blogger templates using JSON feeds to fetch important data such as Post Summary, Title, Timestamp, Comments count, Thumbnail image, Label List, Author info and so on. Developing of all these useful widgets and templates was never that easy before until Google provided support for JSON Feeds using the parameter ?alt=json . You might be confused on what techy stuff are we talking here but if you really wish to start developing Blogspot widgets from scratch and start designing professional templates then this tutorial series will take you on the most interesting and easy-to-understand ride. We will be publishing around 10+ interesting tutorials first time on internet to help a newbie blogger to learn how to communicate better with data stored on his blog and how to start talking to it!

This tutorial requires you that you may have some basic understanding of HTML/CSS/JavaScript no advanced know-how is required and you don't need to be a skilled programmer to understand all these concepts. We will try our best to make it as easy as possible.

Note: Click the Button below to see full list of topics under discussion. BTW the list below is also updated using JSON ;)

Topics List

Examples of Gadgets created using JSON Feeds

Lets first see what can JSON do for you. I am sharing below some of the most popular widgets created for blogger blogs using JSON Feeds provided by Blogger API. All widgets listed below have been developed by STCnetwork for our clients and we will be sharing with you how to code similar widgets from scratch in coming days. 

1. Recent Comments Widget

UPDATE: Recent Comments Widget For Blogger Released!

One of our clients requested a plugin which would show the list of recent comments posted by users. He also wanted to display Post titles and Comments' timestamp inside CSS3 tooltips that we introduced in our shortcode plugin. The JSON feed for comments does not include Post Title data so we had to work around the permalink using JavaScript split function to make it work. The result was something as shown below:

recent comments widget with tooltips

2. Recent Posts by Label

UPDATE: Recent Posts with Featured Thumbnails released!

You might have seen several new magazine style templates designed on blogger that shows list of recent posts by Label/category in Vertical / horizontal / gallery view. In one of our most recent templates that we will release quite soon, we implemented this use of JSON feeds in the most creative way possible. Some screenshots of our latest designs are first time shared below:

Horizontal List

Recent posts in List view

Gallery View

Recent posts by label in gallery view

Landscape View

recent posts by label in landscape view

Simple Horizontal List View

This plugin was also created for some clients who requested "Edited" option which is often seen on Facebook posts. We introduced a similar in blogger using JSON Feeds' updated object property. You will learn them all!

recent posts by label in horizontal view

Interesting Fact!

We created all the above widgets using a single script concept, rest it is all CSS which gives them the different look.

3. Table of Contents

table of contents created using JSON feeds

and so.............. 

later in this tutorial series, you will learn several ways to create new widgets for your blog like "Total posts by author", "Total posts, Total comments count on your blog" and several ways to request data using JSON and display it on your blog.

What is Blogger JSON Feed?

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. It allows the browser to interact easily with your blog server and fetch data much more faster compared to XML which is much slower in this case.

Google Blogger Team stores all its Posts and Comments data (users data, category list, authors names, profile links, posts titles, post URLs, article content, thumbnails, publish date etc.) inside human-readable files called XML. Accessing data through XML is slow because it requires a XML parser to parse data. Therefore Blogger Data API provides us with JSON support which is a smart alternative to XML files. JSON can easily be parsed through a JavaScript function and is much quicker to read and write compared to XML.

XML Feed URL in Blogger

Blogger XML is served in Atom as well as RSS format so it can be accessed in two ways:

ATOM: http://www.mybloggertricks.com/feeds/posts/default

RSS: http://www.mybloggertricks.com/feeds/posts/default?alt=rss

Using XML Feeds, you provide information about your blog to feed aggregators services like Feedburner and search engines like Google by letting them know easily where each data is located. It serves the same purpose as JSON but JSON is much quicker in performance. Even your blog sitemap is created in XML format and accessed via /sitemap.xml

JSON Feed URL in Blogger

JSON: http://www.mybloggertricks.com/feeds/posts/default?alt=json

 

Fact
The reason why a Blogger JSON file is called "JSON feed" is because of the Feed object as shown in the screenshot below inside {curly braces}.

JSON FEED object

The feed object is where all your blog data is stored as shown below.

    JSON Objects and Arrays

    JSON syntax is made up of these elements:

    • Data is stored in name / value pairs
    • Curly braces hold objects { }
    • Square brackets hold arrays [ ]

    In short Blogger JSON Feeds stores your blog data in an organized way and allow third-party services to easily access all this data.

    Note: By default JSON feed appears in complex non-readable format as shown below. In next part you will learn how to view it in organized tree-structure format as shown in the screenshots above.

    raw JSON

    What is Blogger API?

    "API" stands for Application Package Interface which is the communication medium for Applications to interact with each other. The developers of an application provides APIs if they want other developer to create apps and interact with their own. Similarly, the Blogger team has created an API of its own that allows external developers to interact with the Blogger content management system.

    The Blogger Data API allows client applications to view and update Blogger content in the form of Google Data API feeds. Your client application can use the Data API to create new blog posts, edit or delete existing posts, and query for posts that match particular criteria.

    With this API you can:

    • Add Posts, Pages and Comments from your blog to a non-blogger site
    • Create a Desktop Software that allows users to create or edit Blogger posts from their desktop computers
    • Create browser and mobile-based apps that serve the same purpose as above

    The JSON feed which provides information about your blog is also provided by Blogger API. Thus Blogger API gives us a great medium to create so many useful widgets and apps.

    Some non-techy newbies often confuse Blogger JSON API with Blogger JSON Feeds. JSON feeds are simple files used for storing/interchanging data while JSON API is a Application Package Interface that allows it to interact with other 3rd party applications.

    For details refer these links:

    Note:
    Throughout our tutorial we will be only concerned with JSON Feeds provided by Blogger Data API and we wont discuss further details about how this API works because this requires advanced programming skills which is beyond the scope of this tutorial series. 

    Have Questions?

    Let me know if you failed to understand any logic or any part of this tutorial. In our next tutorial, you will be introduced towards tools to view JSON and XML in tree structure and human-readable format. Stay tuned and subscribe to our updates for learning all about building better blogger templates and widgets!

    Take good care of yourselves. Peace and blessings be upon you all always! =)

    Thursday, 10 September 2015

    How can a "Fish Aquarium" Keep you Punctual in Office?

    Fish aquarium keeps one punctual in officeAround 22 beautiful and colorful Malawi, guppy and tropical fishes joined STCnetwork! These fishes were brought in for a purpose that is extremely related to work productivity and performance. The most difficult of all things for an entrepreneur is remaining punctual with office work. When you have no boss at top to monitor and supervise your activities, as a human we are all bound to become lazy and lethargic at some point and especially unpunctual when it comes to Office timings.  I love sleeping a lot and barely open my eyes unless I have slept enough for 12 hours! As a result my office opening timings are never fixed, sometimes I go at 11:00 AM while sometimes I go at 3:00PM. Indeed this habit will make me dump and lazy in future if I don't take precautionary steps to avoid sleeping a lot and making sure I setup a fix time to go office every morning. Neither did exercise help me with this lazy habit nor did sleeping early at night. The only best solution that I came around was placing a "Fish Aquarium" or "Fish Tank" at the Office!


    Fish Feeding really makes one Punctual

    Fishes are fed twice every 24 hours using a food supplement that looks like spherical balls which includes necessary nutrition for a healthy fish life. These fishes are so cute and adorable that you can barely miss feeding them on time else they would have a much shorter life and some would barely survive. Fishes even eat each other's wings or tails when they are not properly fed. Since they are living beings just like us, so I make sure that I treat them with care and feed them on time without delaying.

    This habit has made be in fact quite punctual. Sometimes I jump off my bed just to reach office the sooner possible so that I may feed these little babies on time with proper diet. Just yesterday, I left my breakfast because I had a dull sinking sensation within my stomach that may be the little creatures are hungry, so I rushed straight to Office and started feeding the little ones. I had my breakfast after the fishes were properly served!

    Aquarium keeps you and your customers socially active!

    I never feel alone when I am in office thanks to these colorful little beings that smiles at you when you look at them. They even are quite hospitable to customers who visit the office. Customers find these colorful creatures quite fascinating and these clever beings never miss an opportunity of bringing a smile on a new visitor's face. =)

    They keep the office lively, full of love, harmony and joy. Seeing so many lively colors in front of your eyes really makes one more productive and vigilant throughout the day.

    Some Tropical Fishes are deadly carnivorous!

    I am not sure if this term would be right for these beautiful little creatures but in fact the little ones are way quicker and sharper compared to the larger ones. Two days have passed now and around 4 of the fishes are hunted down by the Shifu Gang (it's the name I have given to the naughty ones), amongst the dead are the black balloon fish and few Malawi ones. The shifu group eats up the tails and wings of the bigger ones and I honestly feel too bad when I find a fish being badly tortured by this group. I am new to fish keeping and not well trained on what combination of fishes are kept together to make sure they breed and live for a longer period. The shop keepers being profit-motivated misguided me in this matter but with time I am learning how to keep better care of them and make sure no one is harassed! =d

    Share your experience and feeding tips!

    Let me know what tips could you give me to take better care of these little babies and make sure they are well looked after. How often do you feed them and what tips can you share regarding the combination and selection of same type of fishes that live in harmony without eating up each other! :p

    Thursday, 3 September 2015

    Design Responsive Blogger Templates - Step by Step Guide

    how to design responsive blogger templatesFinally we are done with the most comprehensive and descriptive tutorial series on Google powered  blogger blogs. We have discussed the core basics to create and develop a mobile responsive layout using simple CSS3 @media queries and some built-in scripts. This series will help you understand the step-by-step effort involved in transforming an ordinary static, inflexible and non-responsive blogger template into a fluid and responsive one that may help you improve your Mobile Search traffic and better entertain your users with a mobile friendly user-interface (UI). A Mobile UI is an important SEO ranking metric and helps you improve your mobile pageviews and thereby the site CTR revenue.

    Why bother creating a responsive design?

    Google recently rolled out a Mobile Friendly update on April 21, 2015, which boosts the ranking of mobile-friendly sites on mobile search results.  Google no longer favors fixed width layouts and recommends that all sites must provide better touch experience, where text should be readable without tapping or zooming, tap targets are spaced appropriately and the page avoids unplayable content or horizontal scrolling.

    Running out of time? Let's read a brief summary to each part.

    Brief Summary

    Here we demonstrated what exactly are responsive designs and how they are created using CSS3 @media screen queries. Normally mobile browsers emulates a desktop view by squeezing big resolutions into small screens that is often difficult to read and browse. You must be familiar that how difficult it is to click a web link in iphone unless you zoom it.

    Therefore we make sure all elements on the site from buttons, links and images/media provide a better touch experience. To make them look big and clean with clear resolution all that needs to be done is to add Meta Viewport tag in the page header and some CSS3 Media queries that does all the job.

    Breakpoints are points at which your layout design breaks or crashes. Breakpoints are CSS3 Media Queries that tells the browser which Layout to load for your website based on the screen size (viewport). It controls the display of your user interface (UI) on mobile devices.

    With so many Mobile Products in market where each smartphone or tablet has a different Screen size, it is important that we select some Content Specific Breakpoints so that your blogspot page may adjust and fit perfectly to the different screen sizes and may not looked squeezed or poor in resolution

    3. Hiding Widgets & Scripts in Mobile Templates [1], [2]

    Surprisingly blogger templates supports a rarely used mobile conditional expression i.e. isMobileRequest which is a Globally Available Data which can be applied to any HTML DOM inside the template. isMobileRequest  is a Boolean Data Type that accepts only two values which is either True or False. It can be used to show or hide HTML content or widgets containers in smartphone devices. It currently does not support Tablets or iPads etc. but you can surely use it to prevent rendering of unnecessary widgets and scripts on mobile devices to speed up your page load time on small screen devices.

    This tag also helps you to avoid using CSS Display:none  to hide content on your site which is not a SEO friendly approach to responsive designs. Thus it is really a time saving condition that gives you more control and power over the blog content that loads in mobile phones.

    The fundamental part of a responsive design is the structure of its Header which includes your blog logo and navigation menu. This tutorial shares an easy to use responsive drop down menu with a search functionality. This menu can be displayed on both PC Desktop screens and smartphones and tablets. You can also choose to maintain your current desktop menu and instead chose to use this responsive menu for mobile screens only. A simple fix to the most important component of your mobile layout.

    Ever wondered how to make your blog images to auto adjust their dimensions in mobile phones and tablets without effecting its resolution and quality? Images with large sizes often don't fit in small screen devices and as a result gives a bad UI impression. Images must be fluid in its behavior, their width and height dimensions should be stylized such that they may instantly change their overall size as the browser screen goes smaller or bigger.

    Our approach is based on CSS @media Queries unlike adaptive image methods which makes use of JavaScript of php.

    Are you among people who complain about AdSense responsive Ad units showing a blank space on your webpage? If yes then read this tutorial to fix this blank rendering issue and better style your responsive ads for different screen sizes using device breakpoints.

    7. Make Blog Sections Responsive: Header Widgets, Posts + Sidebar, Footer

    Since we have learned the core basics, now its time to start customizing different sections of your blog and make them auto adapt to mobile screens. This tutorial in chunk discusses ways to mobilize the 4 important sections of your blog which are:

    1. Header
    2. Content area
    3. Sidebar
    4. Footer 

    Need Help?

    I hope this short summary of different parts of this major and longest tutorial will help you take a helicopter view of every tools and methods required to customize your beautiful blogs into a mobile supported layout that may better help your readers to browse and read your articles. Thus giving you the advantage of both pageviews and search ranking. Let us know if you need any help and I would love to answer all your queries. Peace and blessings buddies! =)

    Sunday, 30 August 2015

    STCnetwork's Exclusive Interview by NED Entrepreneurship Society


    STCnetwork Exclusive Interview


    It is not very often that we get to learn the secrets of success from successful people. Many are very secretive about what they do and how they achieve success. But it has always been our understanding that if you limit knowledge, knowledge will in turn limit you. It is our aim here at STCnetwork to spread our knowledge and to provide guidance to aspiring people looking to make a name for themselves online. To that end, I'd like to share with all our readers some words of wisdom passed on by our Mohammad Mustafa, who was cordially invited by the NED Entrepreneurship Society (NES) to an interview as an alumni where he shared some insights about his professional life and online business secrets, and how he started STCnetwork and reshaped it into what it is today. The interview took place at STCnetwork's head office in karachi.


    The interview was partly in English and partly in Urdu. For our readers, we have translated the interview and retold the story in a narrative form. Hope you find it useful and inspiring :)







    Q 1: Tell us about your business - how and when did you start?



    It�s not easy to identify a particular point in time when it all started. A lot of things in life can be attributed to fate and circumstance. After A-levels, I � like my peers � applied for higher education in the United States. But was unable to secure a visa owing to unfavorable financial circumstances. Studying and working hard all your life to realize your dream of getting a scholarship, and then having that dream snatched away takes its toll on a person�s mind. Heart-broken, I felt reluctant to pursue higher studies. I guess that�s when it all started.





    I spent some of my time learning about and making a small personal website for friends. That�s when I realized that all the things I was learning, I can write about it and teach others as well. And thus began the foray into the world of blogging. That crazy hobby turned into a full-time profession.



    Q 2: Where did you start, and where does your business stand now?



    STCnetwork Official website


    I brought a laptop during my second year of Computer and Systems engineering. The earnings I generated blogging, I invested them into resources that would help me along the way. It started from a Pentium 3 in a small room where I used to write articles, and slowly and gradually it started taking the shape of a network. Now, this network has many websites under its umbrella.





    Many people think that the major source of income is the advertisements on these websites. That is not the story. The story behind any professional blogger is the services that he provides at the backend. The biggest difference us and most other publishers is that we learn, we practice and then we share. To do a specific task, not everyone has the time or the energy to learn everything about it. It�s just better to find someone who already has the know-how. That�s where we, as professional bloggers, come in. As compared to a freelancer, a professional blogger has a portfolio and more credibility and people trust him more.





    We currently have a large client-base, and right now we�re into phase one of our venture whereby we have set up an office and registered our company STCnetwork, which is Pakistan�s first registered company of professional bloggers. We plan to take this nationwide and to develop the first ever SEO academy in Pakistan, and we�re working hard day and night to realize that dream!



    Q 3: Did you always plan on becoming an Entrepreneur?




    To be honest, I didn�t even know how to pronounce �Entrepreneurship� until a few years ago, which was when I looked it up and realized that this is what I have been doing all along � I�m an Entrepreneur. I guess the freedom of creativity was the one thing that attracted me towards entrepreneurship, and I often associate the term �slave mentality� with having a job, because you are not free to do what you want and you have to do what your supervisor says to you.



    Q 4: What was your family�s reaction to you becoming a professional blogger?




    One of the biggest dilemma with any serious blogger � or any such professional for that matter � is the lack of support from parents. Blogging is something that has picked up pace in the last few years, and the older generation has a hard time following the concept. It takes at least 6 months for you to set up an identity for yourself, and another 6 months to get the hang of what you�re doing. When I started blogging, initially I had a very low income, and that didn�t serve as much of a motivation for my parents who couldn�t see the point of it all.





    But money is never the point. My passion was to learn and to share what I have learnt. Having someone read and comment on my articles was motivation enough for me. That and my mentors helped me stay persistent and focus on my goal. My first mentors were Indians and I will never forget their help.



    Q 5: You have always referred to blogging as an art. Why is that?




    A blogger is a complete package of everything that exists online. A blogger needs to know the basics of web design and development, a blogger needs to be more pro-active than a journalist, because he needs to stay up to date with the latest in technology, latest in his field, and latest out there on the internet.



    Q 6: What does "STC" stands for?




    Back in O levels, our English teacher instructed us to write a poem to be featured in the school magazine. The poem I wrote was titled �Death Was What I Met Last Night� and it was about a boy who tries to bribe the Angel of Death to save himself. But the Angel reminds him that everything in life was just temporary, and death is an eventuality everyone has to face. The poem had a rhythmic phrase �Soon To Come�, and I adopted this phrase as a trade mark, serving to keep me grounded and to remind me that no matter how successful you are in life, you must never lose sight of the truth which each and every one of us has to face one day.



    Q 7: How do you manage the workload of running multiple websites at once?




    Entrepreneurship isn�t a one man job. You need a team, and you need to learn how to delegate your work. We have a team of authors; Nida Zaidi who writes from Karachi, Qasim Zaib from Islamabad, Yusra Adil from Dubai, and our latest addition Rohan from India. These are our �Ninjas� managing our sites while I handle working with our clients. The important thing isn�t just to work hard, but to work smart as well.




    STCnetwork Team





    Q 8: What other hobbies do you maintain apart from your work?




    I love swimming, and I love riding bikes � though I wish I had a horse to ride. The best thing about life is to enjoy your leisure time, which I spend with friends. I love spending quality time with friends, and I think you�re being cruel with your life if you spend 6 days of the week working but don�t take out leisure time for yourself.





    I love riding bikes, and I currently have a 125 which is my second bike. My first 125 was stolen from university grounds on my last day at university when I went to get my degree. In that sense, I like to think of my degree as having cost me a bike. Other than that, I have a family car but for leisure time and spending time with friends, a bike is your best friend, although I do not indulge in stunts because that�s not what a responsible family and business man does � gambling with your life and health for no apparent reason.



    Q 9: What hurdles did you face in your business initially?




    I think the biggest fear every new-comer faces is coping with the challenge of client expectations. The client pays you for a job, and expects you to do it well. The expectation serves to instill fear into new-comers, which is why I adopted a strategy � and I would recommend this to others as well � to work free of charge initially. When there are no charges, there are no expectations and it leaves you free to explore and experiment. That learning you gain from completing projects grooms you and makes you become a professional.



    Q 10: If you weren�t an entrepreneur, what would you have been?




    I would have looked like a spoilt kid who hangs out often with friends. But one thing I am sure of � I would never have worked at a regular job. I would have been out on the streets selling vegetables or French fries. Most people look down on such vendors and attribute their place in society to their lack of education. But the fact is, education has little to do with how happy and successful you are at your own life. The French fries vendor owns his own bicycle, his own stall, and his own stalls, and he sleeps peacefully at night, knowing that everything he has, he owns it himself.





    Compare this to a corporate employee who sits in an air-conditioned room where nothing, not the chair he is sitting on, not the laptop he is working, not the company car he drives, nothing is his own. He may have more money, but I ask you, who is rich at heart? There are countless food businesses around us that began as stalls, and are now earning millions. Success is life has less to do with your education, and more to do with your hard work and good ethics.




    STCnetwork Team



    Q 11: What would you have done for students if you were the Prime Minister of Pakistan?




    God forbid :) If I was ever the Prime Minister, I would revise university curriculum and cut down the theory to only about 30%. Our emphasis should on the practical aspects, and students should be given gadgets and resources to play around and experiment with. University curriculum is heavily padded with unnecessary skills that are of little use in the practical field. What rule book says that what you are taught in your 4th semester, you can�t learn in your 1st?





    Nick D'Aloisio was a 15 year old when he developed an app Summly which summarizes long articles into one short paragraph. Yahoo bought his app for $30 Million, and now he is an internet entrepreneur working at Yahoo without having ever attended university. The founder of Whatsapp was turned down by Facebook when he applied for a job there, because he was �under-qualified�. Two years later, he sold Whatsapp to Facebook for $19 Billion.





    Unless you take control of your learning, develop your skills and do the thing that puts your mind to rest, you will not be happy with your work.



    Q 12: Advice for NED students who are pressured into settling?




    If you are pressured into settling, if you have developed your mindset, then it is very difficult to change that mindset. So my advice to you would be to not let a single day go to waste. Work on developing a skillset. Skills and education makes you a perfect person � it makes you a scholar. Do something extra to get an edge over other fellow students, take a professional course or complete a project. If you can�t find a job, then don�t worry! Start working with someone free of cost and learn. Learn to develop the skills that are relevant to your field. Don�t pursue an irrelevant degree such as an MBA simply because you�re unable to find employment.





    Time is money � don�t squander it away.


    Q 13: Any words for NES (NED Entrepreneurship Society)?


    NED Entrepreneurship Society




    Thanks you NED Entrepreneurship Society for the interview. It is nothing short of an honor for me as an alumnus, and I will always remember this kind gesture of coming out to our office and giving us time. What you guys are doing is brilliant, and only people with great minds do it. God bless you with everything. Thank you!


    Have Something To Share?


    That was it for the interview. We got to learn a lot about Mohammad and STCnetwork, and how it all started. The story is nothing short of inspirational. From a guy who didn't have very favorable circumstances to someone who has established a reputable profession online, and is now working with a team to bring help and guidance to thousands of other aspiring entrepreneurs online - Mohammad has not only earned the confidence of his large client base, but has also earned respect from us and from thousands of followers of the STCnetwork. This sort of commitment is truly inspirational, and may it serve to motivate others into utilizing their time and efforts to create something productive, something unique.



    All the best to the STC Network for its future endeavors, and the best of luck to you, our beloved readers and followers who aspire to make a name for yourselves and contribute positively to the society.

    Let us know if this company has helped you the little in reshaping your life in some manner, do share your precious views with us. Would love to hear from you all. Peace, and God bless you all!


    Tuesday, 25 August 2015

    2 ways To Fix XML Parsing Errors in Blogger

    fix XML errors in blogger editorMost often when you insert a Facebook JavaScript or AdSense JavaScript in your blogger template editor, you often come across XML Parsing errors that prompts and says "The reference to entity "version" must end with the ';' delimiter." Blogger blogs are coded in XHTML and  XML is quite strict in following correct syntax formatting than HTML. XML is surely unforgiving in this case. Blogger interprets all your document as XML rather than as HTML. XML is PCDATA (Parsed Character Data) by default which means that XML parsers will normally parse all the text in a document. As a result when we insert JavaScript inside blogspot templates, all script inside the JavaScript tags is treated as a text and due to the presence of some illegal special characters like "<" , ">" and "&" , you often face the following error:

     

    Error parsing XML, line 1458, column 64: The reference to entity "version" must end with the ';' delimiter.

    error parsing xml in blogger

    What are the special characters in XML that causes error?

    XML is a human readable form of textual data. It parses all the text in a document and gives errors for the following 5 special characters:

    1. (<)  - less than

    2. (&) - ampersand

    3. (>) - greater than

    4. (")  - double-quote

    5. (')  - apostrophe or single-quote

    The following three are more crucial:
    • "<" will generate an error because the parser interprets it as the start of a new element.
    • ">" will generate an error because the parser interprets it as the end of a start-tag or an end-tag
    • "&" will generate an error because the parser interprets it as the start of a character entity.

    Two ways to fix XML errors in Blogger

    XML errors can be avoided by using two methods:

    1. Use CDATA
    2. Escape HTML entities

     

    1. Use CDATA

    The term CDATA refers to (Unparsed) Character Data which is used about text data that should not be parsed by the XML parser. To avoid errors, all script code is enclosed inside a CDATA section. Everything inside a CDATA section including the 5 special characters is ignored by the parser.

    A CDATA section starts with "<![CDATA[" and ends with "]]>":

    Next time when you add your Facebook code, enclose it inside CDATA as shown below:

    <script>
    //<![CDATA[

    (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3&appId=";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));


    //]]>
    </script>

    All your script code will exists inside the CDATA and blogger editor will not parse the script code and thus wont give any errors.

    The reason why Facebook script gives errors in blogger is due to the presence of a special character (&) that is used before the variable "version" as highlighted in the code above. "&" will generate an error because the XML parser interprets it as the start of a character entity and thus it prompts an error that says:

    The reference to entity "version" must end with the ';' delimiter.

     

    2. Escape HTML entities

    Another simple method is to escape all 5 special characters and instead use the legal characters as alternatives to the above 5.

    • Replace < with &lt;
    • Replace  > with &gt;
    • Replace  "  with &quot;
    • Replace  '  with &#039;
    • Replace  & with &amp;

    PS: Note how every alternative character set ends with a delimiter (;)

    This method will help you encode your AdSense code and paste it inside your template without errors. It will also help you paste HTML code inside blogger comments!

    This method is also called as HTML encoding and we have built a Special tool for this purpose to help you encode HTML characters with ease.

    Need Help?

    I hope now you will be able to add social media plugins and third party scripts inside your blogger templates without any errors. Do let me know if you need any further assistance or clarification on any point. Would love to give a hand buddies! =)