Are you interested in starting your blog, or do you want to learn web designs, or are you curious about the possibility of designing a website with a smartphone? Well, it is possible to create a blog with your smartphone, and you will learn that today if you stick around a little longer.
Nevertheless, irrespective of the reason you are here. I appreciate you very much and welcome. Did you know that being a web designer can increase your chances of getting a job? According to Impactbnd.com, 53% of marketers say blogging is their top content marketing priority. Another statistic from neilpatel.com shows that 77% of companies increased content production in 2015.
These statistics are a quick reminder that there is a high demand for blogging. In Nigeria, lots of businesses now leverage blogging to share their messages and advertise their products directly with their customers. Therefore, your time here will never be a waste.
After this course, you can become a full-time blogger, or you can position yourself as a web designer and make money creating professional blogs for clients using your smartphone.
Why Smartphone? A wise man once said, “Give the hardest job to the laziest persons. They will find an easy way of doing”
I am sure you can guess who the lazy person is. Yes! I don’t like stress and wasting too much time on a task. I am always on the lookout for simple and different ways of doing things. That’s how I discovered the mind-blowing method of creating a blog using a smartphone.
Before we proceed, I am Ab Akpan, the Business Engr. By day, I am a Civil Engineering student at Akwa Ibom State University, Akwa Ibom, Nigeria. At night, I am a tech enthusiast, who is passionate about adding value myself, and the people around me.
Additionally, I have a strong obligation to make the world a better place than I met it. In my journey into entrepreneurship, starting from being a web designer, I have had the singular privilege to work with so many clients on different web projects.
These projects include; blogs, e-commerce sites, business websites, portfolios, etc. It is a pleasure to share my knowledge with you. In this course, you will be learning how to design a professional blog similar to aksu360 (the official blog of Akwa Ibom State University) with your smartphone. Let’s get started!
Before we continue, you need the following resources;
- A smartphone (any type)
- Internet service
- Chrome Browser
- RAR (Installed)
- WPS app (Installed)
- Touchpal Keyboard
You will understand why you need the following application, once we get started. To avoid unnecessary stress, I recommend you take a moment to install those applications before you proceed. Do not forget to set the Touchpal keyboard to Default. If you have done that, then we are good to go.
CREATING YOUR ACCOUNT
Blogger is a content management system that helps digital creators to develop, manage, and distribute digital content like text (articles) and images with ease.Open your chrome browser and type blogger.com to get started. Sign in with your existing Gmail account, or you can create a new one if you don’t have any. Here is a quick guide on how to create a professional email address that can get you a job. After signing up, on the next page, type in your preferred display name and click the continue to blogger button.
Note: This will appear everywhere on your website and it will be visible to users.
CREATING YOUR BLOG
On the next page, click on the create blog button—type in the name of your proposed blog or your business name in the title bar provided. Below the title bar is the address bar. In real life, the address bar can be described as the location to a place.
Example: When you typed abakpan.com, it took you straight to this website. The same thing will happen if you type the web address for Facebook or any other website. While doing this, I recommend that you keep it short and precise. After typing your desired Title and web address, hit the create blog button softly.
Congratulation, you have completed step 1, and you are now a proud owner of a live website. Click on view blog to see your new blog.
ADDING A BLOG DESCRIPTION
Now click on the settings on the menu tab. Under setting, select basic, and add your description.
Your description is what people will see when they search for your blog on Google. It should clearly describe your blog, and it should contain certain keywords to help your visibility on the search engine. After your done with that leave every other thing on Default.
CHOOSING THE RIGHT TEMPLATE
Here is the moment we all have been waiting for, it is time to turn your dummy looking website into a masterpiece. If you view your blog, you notice that it looks vintage and less attractive. This is because you are using the default blogger theme. We don’t want to use that because it isn’t cool.
Open a new tab on your browser and search “magazine blogger template”. You’ll see lots of websites on the search result page, that provides theme blogger websites. I prefer and recommend this website – gooyabitemplate, go and ahead and visit the site.
Note: For first-timers like us, it might be a bit overwhelming and we can spend lots of hours clicking the next page. You don’t want to do that. Do not spend all your time in the selection process.
Pro Tip: At this point, I already consider you to be a web designer, even if this is your first time. In the nearest future, you will be contracted to design different types of websites for clients. It will be time-wasting to find a template through the default layout on the site. You might spend all day clicking the next button till you are exhausted.
Depending on the type of web project you are designing, I recommend that you simply type (for example) “Blogger Portfolio template gooyabitemplate” on your Google search bar. This will automatically provide you with a category that only contains Portfolio templates for blogger website. If this tip is helpful, quickly type “Helpful Pro Tip” on the comment box.
APPLYING THE TEMPLATE TO YOUR SITE
Now that you are aware of how to find a template with ease. Scan the website for a convenient theme. For this project, I used the Masy theme. Download your preferred theme to your smartphone.
Note: Most times, the theme files are always compressed in zip format. However, if your phone cannot extract the files in the zip. Go to Play Store and download any unzip app.
Open the zipped file, you just downloaded, scroll to where you can find a file with .XML (Example Masy.xml. This is your actual template. Open the XML file, with WPS app preferably.
Using the TouchPal keyboard, click on the button located at the top left corner of the keyboard. Click on the SELECT and ALL (to select the whole document) and COPY.
Note: Depending on the RAM size of your phone, it might look like nothing is happening. Please have patience!
Head back to your chrome tab and to your Blogger dashboard. Click on themes under your side menu option and then select edit themes. Do not worry about backing up the default theme, you don’t need it either.
However, you can still click on the backup button to save a copy of the default theme on your phone (usually in kilobytes – kb).
This page contains a lot of codes (more than 3,000 lines of codes). I will love to take out this time to appreciate developers. They are an amazing and extraordinary set of persons. It takes weeks, thousands of lines of codes, and lots of coffees or energy drinks to develop a template. When you start making money from web designs, I recommend that you buy these templates, just to support and encourage these developers.
It also took lots of days and sleepless nights to develop this lesson for you but I didn’t have to drink coffee or energy drink. I recommend that you share this article with your friends and on your social media handles.
I am super excited and satisfied when I know that someone has learned a new skill because it goes a long way to reduce the number of unemployed persons in Nigeria and it greatly decreases the rate of social vices especially among youths in the country. Please share!
Nevertheless, you don’t have any reason to be scared of these codes. You won’t be writing or editing them in any way. Simply click anywhere on the codes displayed on your screen to pop-up your keyboard. When your TouchPal keyboard comes up, click on the Select all to select the codes and delete everything.
Note: Depending on your smartphone, this might be slow. Please be patient!
After deleting the default codes, tab your editor to show your cursor inline 1 and then paste the codes carefully. I’ll advise you to have a little patience when you paste, so you don’t do it twice. Save the editor and you are good to go. Go back to your blogger dashboard and click on view blog on the top left corner of your screen to see the new look.
ARRANGING YOUR LAYOUTS
Oh no! It is not what you expected. It looks weird, right? Yes, it’s simply because you have not made any blog post yet. However, I will teach you how to create a blog post at the end of this lesson. For now, let us continue with our design process.
Alternatively, I have provided a dummy post you will use as a placeholder, just so you can see how each team will look like, and to assist you in your design process.
The dummy post is from one of my old blogs Mallguider. It was a product review website. Hence, you will have to delete them when you are done design because it might not fit into the purpose of your blog.
To import the dummy post, CLICK on Setting and select others, then click the import post button. Confirm that you’re not a robot and check the publish post after import.
Click on import from the computer. Your file manager will open up. Go straight to your download folder and select the XML you just downloaded. Wait for some time for the post to import completely.
CLICK on the Post section to see your imported posts.
After completion, go to your post section to see the dummy post. Then view your blog to see the new look. OOH LA-LA! It is getting better right? Let’s play around and fix the empty modules quickly.
Go back to your Blogger dashboard. Select the Layout under the menu option. This is where you will be able to arrange the front-end of your website
Start with your favicon. A Favicon is an icon that appears on the top of a browsers tap, beside the page title. It is also used in bookmarks to identify a site, just the same way you have icons on your phones that represent each app.
If you have a logo or some kind of image that represents your business, you can use it here. Nevertheless, if you don’t just go and head and use any image for the purpose of this lesson.
Note: The standard size of a favicon is 100 pixels by 100 pixels. You might need to resize your photo. Check out this post on how to resize a favicon in less than 2 minutes.
After doing that, click the edit text on the bottom left on the Favicon modules. A new tab will pop up. Click on the Choose File button and your file manager will open up. Scroll or search for your resized photo and select it.
Note: You will get an error is your image is not 100 px by 100px. If you didn’t get any error, then you are good to go. Hit the Save button to proceed.
If you are using my exact theme (Masy Template), skip the modules that contain Theme options (Boxed version and Default Variable). It is already configured.
The header logo module is the section that helps to display your logo on your website. However, if you don’t have a graphic image of your logo. You can still use a text. To edit the header modules, click on the pen icon, the configuration will open in a new tab.
Enter your blog title in the Blog Title Section. Also, add a blog description in the Blog Description section (limit your description to 1 short sentence).
If you have a logo, go ahead and select the From your computer and click the choose file button. Select your preferred logo and upload it. Click save to proceed.
View your blog to see your progress level. Check for empty modules and note them. Head back to the layout section so we can remove them. To assist you efficiently, I have made a short video for you. Please check it out and let’s proceed. That’s how to create a professional blog with your smartphone.
We are still working on more free courses like this one.
Help us to become better, leave a suggestion or feedback in the comment section below. If you enjoyed this course please share it with your friends and family on social media.