How to Make a WordPress Blog – Step by Step For Beginners!
Hi. My name is Hogan and welcome to this tutorial where I’ll be showing you how to make this blog step by step without skipping any steps Now, this isn’t a video telling you what you should blog about or showing you how to do a blog using code And it’s definitely not a quick, 5-minute tutorial either So if you’re looking for one of those things, then this video probably isn’t for you However, if you want to learn how to make a beautiful and simple blog without any technical skills and you’d rather watch a full, complete video that covers everything a beginner needs to know then keep on watching So this tutorial is perfect for anyone who wants to start a blog it could be about food, fashion, travel, music or anything you want to blog about you can have your own dream blog up and running within a few hours So let me give you a tour and show you how it works and what I’ll be covering in the tutorial Okay, so let’s turn on the Builder. I’m really excited ’cause it’s really cool So basically you got all these different type of modules that you can drag and drop to anyway you like on your blog and you can virtually create any layout that you wish And another cool thing is if you click on the options here and if we go to Styling we’re able to select a normal background image, a gradient background or even a video background if you want to. All you need to do is upload the video and upload the images and then you’re good to go Changing text is really easy as well. So for example, we just double-click the Text module And basically delete it like any text editor change the text and then click on Save Rearranging the layout is really easy as well you just drag it and drop it to wherever you want and you can even use the Undo function which is really cool And you can also change the column layout as well. So you got different column layouts here For example if you want to move your sidebar to the lefthand side, you can jsut drag it and move it across So it’s really, really versatile but what makes it really awesome is the flexibility So for example, we’re able to customize the look of the header design just with a few clicks So you don’t need any coding or anything like that And you can also change the post layout for your blog posts. So it’s really cool. You’re able to create something really unique really quickly and it’s just really cool So if we actually turn off the Builder now And I’m gonna show you what I’m going to cover in this video I’m gonna move that one across first and save it and then close it Now, let’s go back up. Now the first thing I’m going to show you is how to add in your logo And also a Favicon. It’s like a little logo for your browser And then I’m going to show you how to customize the header section how to add in a slider and where to get images for free I’ll show you how to add in text and edit text as well and then I’ll show you how to add in Blog posts So I’m gonna click on that blog post So within this blog post, I’m gonna be showing you how to add in links images, video, as well as social media buttons so people are able to share it and also how to add in this comment section so people can leave a comment on your blog post If we go back to the page here, I’ll also show you how to add in an email subscription box So people can subscribe and you can do email campaigns And also how to add in an image, a little profile image of yourself I’ll also show you how to add in the most popular post with the thumbnail I’ll show you how to connect to twitter so you can display your latest tweets as well as adding in the Instagram feed. So that’s not loading yet. I might refresh that I’m also gonna show you how to add in the Google AdSense as well as the regular banner ads So for example, the banner ad down here I’ll also show you how to add in the Facebook live box as well And then I’ll show you how to add in the social media icons down here and customize the footer section Then I’m gonna show you how to create a really amazing About page. So basically when visitors come, they’re really amazed by it Scrolling down. It’s really cool with the Parallax scrolling effect And then I’m gonna show you how to create a blog page. So with the Blog page, you can select different layouts And I’ll show you how to do that as well And of course, I’ll show you how to add in a gallery So if you have work to display, people can click it and it opens up in a light box And of course, I’ll show you how to embed videos on your blog and also show you how to create a simple contact page which includes a map as well as a contact form so people don’t need to go to their email address they can send you a message straight away So that’s really cool. And for this blog, it’s also completely mobile responsive as well So it resizes down perfectly for any device like iPad and other mobile devices as well So that’s really cool So before I begin with an overview of what we need, you’re probably wondering which platform we’re gonna be building on So you’ve probably heard of tumblr, Blogger, and WordPress.com and WordPress.com is basically hosted by the WordPress servers So first I do wanna say that these servers are easy to get started with but there are several reasons why I don’t recommend them to you So the first reason is that you don’t get your own domain name So for example you get a domain (Your name).tumblr.com So it’s not professional and is also hard to remember Now, secondly, you don’t own this blog or website So they’re hosting it on their servers and if they don’t like your content, then they can delete that content So you can lose your work and if they close the servers, then it’s really hard to transfer your blog to another platform as well And thirdly, it really lacks customization and it has a lot of limitations. For example limited opportunity to advertise especially on the WordPress.com platform And you have less control and functionality as well And, usually, if you want to unlock those functionalities, then you need to get the premium version which is more expensive in the long run anyway So which platform are we gonna be building on? The simple answer is we’re gonna be using WordPress.org So WordPress.org is an open source version of WordPress and it is used to create websites blogs, and basically a lot of people use WordPress. It’s the most popular content management system out there You’ll see Fortune 500 companies use it such as eBay Jay-Z, Katy Perry, CNN, Forbes, they use it for their blogs as well but top bloggers such as Pat Flynn from Smart Passive Income, he uses WordPress and recommends it Also John Lee Dumas of Entrepreneur on Fire He uses WordPress as well for his blog. And of course, for my website and blog I use WordPress as well So I highly recommend it and basically right now I’m gonna show you what we’re gonna need to start building our Blog So the first thing that you’ll need is a Domain Name and basically a Domain Name is your web address. For example, www.google.com then your one will be www.(your name).com Now the second thing is Hosting Basically Hosting is where all your blog files or website files are stored So that way people are able to access that content 24/7 All around the world So those 2 things are must-haves And then we’re gonna be installing WordPress and then we’re gonna install the Theme So what are the costs involved? So for Domain Name, normally, it would cost you $13.00 a year but I have a special coupon code which is half-priced so you’re gonna get a domain name for about $6.00 And Hosting is normally $10.00 but with the coupon I think it’s about less than $8.00 or so So Installing WordPress, the open source version, it is free and the theme will be free as well So the total cost would be around less than $13.00 to get started So we’re pretty much ready to start with the tutorial. if you have any questions, make sure to drop it in the Comments section down below and let’s see if we can get this video to about 200 likes. That would be really awesome and thank you guys for that So the first thing that we’ll need is to get our Hosting and Domain Name we can get that at the same place So there’s a link down below this video. Click on that link, that’s a special discount link Or you can go to a browser and then you can type in HostGator/Promo/Hogan So this is a special discount link that HostGator has given me And HostGator, I’ve been using them for about 6 years now to host my websites and blogs for my clients and myself. And basically, they’re fast, cheap, and reliable I’ve a lot of people who follow my tutorials and I found that a lot of them have problems with these cheap hosts because those cheap hosts are using shared resources. It makes the whole website like really slow And sometimes the builder doesn’t work either so that’s why I recommend HostGator and you won’t get any issues like that. And if you do get any issues like that, then you can also contact their LiveChat support so that’s really, really awesome And if you don’t like it, they you also get a 45-day Money Back Guarantee So there are basically 3 different plans to choose for hosting. So the first one is the Hatchling plan Now the second one is the Baby plan and the third one is the Business plan So we’re gonna get the Baby plan and the reason why I recommend the Baby plan for you is because for the single domain and it is the cheapest option So I personally have the Baby plan because I have a lot of websites and blogs to host but generally a lot of people will just have 1 domain to keep the costs low, we might pick the Hatchling plan and you can upgrade later to Baby plan if you want to. So click on Buy Now So here you’ll want to enter in the domain name that you want to purchase So for example, it could be your name or something like that. So sometimes it might not be available and you need to be a bit creative with it so just click on the outside here And normally I would recommend to just get a .com domain because that’s the most popular one And that’s the most popular extension that people type in. Now, we’re gonna scroll down here And you want to uncheck this. So we’ve selected the Hatchling plan Now, the Billing cycle. So if you want to go month to month, then you can select this one And it’s about $7.66 but if you go for 12 months, then you get a bigger discount So you can go month to month or you can go for 12 months and get a bigger discount Or even a bigger if you go for long as well So what I recommend is getting the 12-month option because most of you who start a blog, you would most likely gonna be blogging for about a year or more than that So you may as well get it cheaper. So we’re gonna put in a username here. So just type in a username and a security PIN scroll down And I’m gonna enter in my Billing Information. So I’m gonna pause the video and do that so you do that as well So once you’ve filled in your details, then you need to select Credit Card or PayPal and fill in the credit card details if you’re paying by credit card Or if you select Paypal, then you’d be asked to sign in to PayPal and confirm that payment So let’s scroll down here and you’ll want to uncheck these services ’cause I have videos on my chanel on how to secure your website as well as back it up So you can do those things for free And make sure that the coupon code here is Bonus Code. So that gives you the bigger discount And scrolling down, you’ll see that the cost for the domain is $5.99 And the Domain is $64.00 so the total would be $70.43 which is I think less than $6.00 per month So if we scroll down here, I want you to select “I’ve Read and Agree to the Terms of Services” and then click on Check Out Now And then after when you’ve checked out, then you’ll either get a Paypal login. We have to log in to your account and then pay the amount Or you get a confirmation page that looks like this and once you’ve got that confirmation, then we need to go back to our e-mail to check our details, to log-in to our CPanel to install WordPress So once you’ve got your hosting and domain name, then go to your email address HostGator will send you an email. Something like this with basicall your Control Panel URL and your username and password to log in to your control panel so you can install WordPress So click on the URL and all you need to do is to copy over the username and your password and then you’ll need to paste it in this section here. So I’m just gonna type mine in and then you’ll need to log in Once you’ve logged in, then you got your CPanel and this is basically where you install WordPress So you can either click on WordPress installer here or you can scroll down to software and then click on Quick Install and then click on WordPress So I’m gonna click on WordPress Installer Then you’ll need to select your domain name. Normally, you just have one domain but I got a few So select the domain name that you just bought um, BlogSiteDemo.com And for this part, leave this empty and then you’ll need to click on Next So, Blog Title. I’m just gonna put the name of the blog So you can change the title after if you want, so don’t worry about it Admin User, this is where you put in your username that we’re gonna log in with First Name, Last Name, and your E-mail Address. Make sure this one’s correct ’cause I will also be setting in details to this email address So click on You’ve Agreed to the Terms of Service and, after that, just click on Install Now So Installation will take about 30 seconds or a minute or so Once the installation is complete, then what I want you to do is right-click and open this link in a new tab So once you’ve done that, copy over this password And you should see this page here. You might not see it depending on how long ago you just bought the domain hosting. If you’ve just bought it, it might take 15-20. Worst case scenario, probably about 2 hours So that HostGator can set you up on the back end So If you have any issues, you can contact the HostGator LiveChat support And I’m pretty sure they can help you out So what I want you to do is to click on Admin Log-in And basically you just need to put in your username and then paste over the password that you got from here Paste that over and then you can log in What I like to do is save this URL as a bookmark so I can just click on this bookmark and it will direct me straight to the log-in page So, after that, just log in And I also wanted to note that you can also just copy this URL. For example, Copy that URL and if you paste that into here. So “wp-admin” and then click on Enter that would also take you to your log in page So right now this is your WordPress Dashboard and what we need to do is we’re gonna click on No Thanks And we’re gonna click on We Don’t Need Help because I’m gonna show you how to set it up manually that’s imporatant and it looks a little bit overwhelming ’cause there’s a lot of things popping up But I’m gonna show you it is pretty easy So just close all these things first to clear things up a little bit. Dismiss that Minimize these things I don’t really use these things and you probably don’t need them that often So this is where you control your whole entire blog. You don’t need to log in to your CPanel anymore So I’m gonna close that and I’m gonna visit our website Open that in a new tab and this is what your blog looks like at the moment So it’s really, really plain. Not much is going on. But once we’ve installed the theme, then it’ll start looking pretty good. So I’m gonna close that for now And the first thing that we’ll need to do is configure some really basic settings What I want you to do is hover over User and then click on your profile So I want to change the password ’cause it’s a little bit too long to remember So I’m gonna click on Generate Password. And click on Hide And then set in the strongest password that you can remember. I’m just gonna click on Confirm and then I’m gonna update profile Now, once that is done, then I want you to hover over settings. Click on Permalinks And basically what we’re doing here is we’re making sure that the URL has the post title or the page title in the URL itself So we don’t want a URL that looks like “?p=123” ’cause that’s not good for search engines and people don’t know what your page is talking about. So I want you to select Post Name this is realyl important and click on Save Changes Once that is done, then we need to add in some pages to your website or blog So click on Pages here And pages are basically, for example, this Home Page is a page. Your About page, Blog page, your Contact page those are all pages these ones are blog posts so it’s a little bit different. With the page, you can build any type of layout that you want With the post, it’s more of like a set sort of layout So this is a post let’s go back to our pages And what I want you to do is trash the sample pages and then I want to go to Trash and then I want to delete that permanently I want to add new pages so click on Add New up here So the first page I want to set in is Home. So just type the title and all you need to do is to publish that and we need to do that for all the pages of the tutorial. So click on Add New About page Publish Add New again Blog page Publish And you can add as many pages that you want. So click on Add New again And the lucky last: Contact and Publish So you’ve added in all the pages. Now, all we need to do is to add in the theme So hover over Appearance and click on Themes So the theme is basically the skin of the website and that includes the Builder as well So below this video, you’ll see the description. Make sure to click on Show More and you’ll see the link to download the theme. Click on the link and that it will automatically download to your computer Just save it on to your desktop or something like that and you can also download the images to follow along with the video as well So you can follow along step by step if that link doesn’t work, what you need to do is copy that link URL and just paste into your browser Hit Enter and it should download And after that, this is what it should look like Themify_Ultra.zip. That is your theme And images_Blog.zip, that is where all the images are Sometimes the file might automatically unzip it so it turns into a folder and you don’t want that. You don’t want to upload this folder. You want to upload the .zip So make sure that you right-click it and press it back to the .zip. So I don’t need that anymore Trash that one And for the images, you have to double-click it to unzip or whatever you do to unzip it on your computer And basically all the images are in here So I’m just gonna arrange that by name. That’s a little better Now let’s go back to our website and we need to upload the themes. So click on Upload here And then click on Upload theme again. Choose file And go to your desktop where you’ve saved the theme. And make sure that you upload the .zip file Themify Ultra. Click on Open and Install Now So you can see the progress bar of the upload on the bottom left That’ll take 30 seconds or a minute depending on your upload speeds. But some of you might have trouble uploading the theme and you might get an error message If you do get error messages, make sure to check out www.hoganchua.com/FAQ And I have a whole section on problems that people commonly face and you can sort it out Especially this one You might get a message that says Uploader File Exceeds the Upload Max File Size And then you can check out this video and that’ll solve your problem. Go back here and let’s wait for that to upload Once that is done, it should say Theme Installed Successfully. Click on Activate And that will activate our theme for us And the skins and demo will pop up. What I want you to do is click on the X here So just close that like that and you can close these things here You don’t need that And we can check the websites. So open that in a New Tab And then you should see this So you can see the look of the website has changed and it looks a lot better now So once we’ve done that, we need to go back to our Dashboard and we need to go to Plug-ins here So click on Plug-ins And plug-ins are basically applications that enhance the functionality of a website So basically on your phone you have applications such as Instagram or you might have some activity apps Basically, apps are for phones, plug-ins are for websites. So what I want you to do is select all these come pre-installed And I actually want to deactivate them. Click on Apply Sometimes it might conflict with our Builder and our website so I’m just gonna deactivate them. If you have any other plug-ins that you don’t use, then deactivate it as well and then deactivate it. So deactivate it then select them all again and then select delete and apply Once that is done, click on Add New. We’re gonna install some new plug-ins that you’ll need So the first one will be Instagram Feed. So that will be our Instagram Feed that we’ll be adding So this one will be by Smash Balloon with 300,000 active installs. Click on Install Now And then what you can do is click on Activate Now And after that, we’re going to dismiss this message click on Add New again And then we’re gonna search for MailChimp …..for WordPress. And basically, it will connect our MailChimp account with WordPress and MailChimp is like an email management system so people are able to subscribe to your list and then you’re able to promote your products and things through email So this one will be by IberiCode. Click on Install Now. And Activate Next one, click on Add New again, will be Social Sharing So this one will be the social sharing icons in your post So it’s a lightweight plug-in that I really, really like and it’s really cool. So this is is by Ibericode again. Click on Install Now and then activate it Then we got the Contact Form and it basically allows people to send you a message without knowing your email. So, Contact Form 7 hit on Enter and then this one will have a million installs. So click Install Now and then we want to activate it Add New, the last one will be Easy Facebook Like Box and then click on Enter and this one will be by Sheved. Hopefully, I pronounced that right. We’re going to Install Now and then we’re going to activate it Okay, awesome. As you can see, a little pop-up pops up. I normally just click on I Have Support Already and it’ll take you here so don’t worry about that. All we need to do now is go to our website click our Home Page And we actually need to set in our Static Front Page So what that basically is is if we open that link in a new tab, if we click on the home page then you’ll see that it says “/home”, that’s your home page. But we actually want this homepage to be just called blogsitedemo.com. You don’t want that /home in the URL So we need to set the static front page. To do that, go to Customize up here just click on that and then basically what you’ll need to do, um, Themify Options automatically pops up. Click on back here Static Front Page, Static Page, and then select Home and then save and publish Once that is done, then you can actually close the customizer And what you’ll notice is that you’re on the Home page at the moment. And this is the Home page but now it is just called blogsitedemo.com and you don’t have the / anymore So that’s what you want and you’ll see the Themify Builder as well So now what we’re gonna do before we start building our blog, we need to set some basic theme settings So what I’m gonna do is we’re gonna go back to our Dashboard So click on your Dashboard Then what I want you to do is hover over Themify Ultra, click on Themify Settings and you’ll be automatically directed to the General tab So what I want you to do is to scroll right down to the bottom and you’ll see Google Fonts I want you to select all Google Fonts so you have more fonts to choose from and then you can click on Save And then what I want you to do is click on the Default Layouts tab So you’ll see that there is Default Archive Post Layout and also the Single Post Layout Don’t worry too much about this now at the moment. I’ll show you how to do that later on So we’re gonna scroll right down to the Default Page layout So for example, if we take a look at our blog now. Open link in new tab We’re on the homepage at the moment and this is the default page layout. So it has a title and it also has a sidebar on the righthand side So refer back to this then we want to select No Sidebar And we also want to hide the title. So select Yes And you also don’t want page comments on your pages so select that So if we click on Save and if we refresh the page You should that disappear So that’s looking pretty good. The title’s disappeared and you don’t have the sidebar anymore So you basically got a blank canvass to rebuild your blog on and that’s what you want. And let’s go back to the settings And I want you to go to Theme Settings And then go to Theme Appearance and then go to Header Design So at the moment, we have this header design, as you can see Now I want to change it to the Header Top bar which is a nice simple one but it’s really optional you can change it later to whatever you want So you can do that and what I want to do is I want to remove the RSS link here and I’m just gonna click on Exclude and you can also exclude the tag line as well as the search. This is the tag line, this is the search that is totally optional and at the moment, I’m gonna leave the sticky header So what the sticky header is is if we’re scrolling down our page, you’ll see that the header navigation bar it basically stays there and follows us down the website So I really think that’s a good user experience So for example on my website, I don’t have it So you can disable it if you want to, it’s up to you. And for the Footer Design, what I want to do is just exclude the site logo. This is the site logo and this is the back to top button. You can exclude that one as well here and I’m gonna save it to see what that looks like Save and Refresh So your blog should look something like this at the moment You’ve got your name, logo, tagline, search, the navigation, and you’ve removed the logo here So what we need to do now is some of you might want to remove this thing here So I’m gonna show you how to do that. So go back to Themify Settings Scroll right down to the bottom and you’ll see Footer Text 1 and Footer Text 2 So this is Footer Text 1, this is Footer Text 2 So to remove Footer Text 2, all you need to do is click on Space and then just save it. That’s all you need to do. If you want to add some links, to link it to another website or something like that, you can check out my FAQ section I’ll probably add that in very soon So what we can do now is refresh the page and you should see that powerbar WordPress disappear So everything is looking pretty good. Now, we want to set in our social links So click on Social Links let’s scroll back up here and what you need to do is get your Twitter profile URL So for example, I’ve logged in to Twitter. I’m just gonna copy that URL And you need to paste in your link here. Same for your Facebook Grab your Facebook Fanpage URL and then paste into there Get your Google+ one. Copy that. Paste that into there. Uh, Youtube grab your Youtube and make sure to subscribe to my channel. I’ll be uploading some more videos So put that into there And let’s say you don’t have Pinterest. All you need to do is leave that empty but you might have Instagram. So Instagram doesn’t appear here so you need to click on Add Link put in title. Just type in “Instagram” and then grab your Instagram URL Just copy that over, paste that into there, and click on Insert Icon Click on Brand Icons and then you’ve got a lot of brands that you can add in depending on what you need So I’m gonna look for I for Instagram and that’s basically it So you can set in the colors as well and I recommend setting in the same colors so it keeps everything professional but I’m not gonna show you how to do that now ’cause it’s not necessary So what we’re gonna do now is just save it Now to display the links in the Footer section, what you’ll need to do is add instant widgets So go to Appearance. Click on Widgets And we need to look for Themify Social Links. So this is your widget And we need to click on it and drag it. Drag it up And then put it into your footer social widgets section. Drop it into there And then I’m going to select Open Link in a New Tab And I do that because it’s an external link And this is better for the user. So do that and save it And if you refresh that, it should show up in the footer section here. Okay, looking awesome And if you want to add it to the header section up here all you need to do is to drag the Themify Social Link widget and put it into the social widgets section here and then just save it So let’s go back to our website and what we’ll need to do is to set in the Menu Navigation up here So as you can see, it’s not in order. We want to put it into order as well So we need to go back to our dashboard And then we need to go to Appearance Click on Menus So we want to create a new menu and give it a new name. So it’s gonna be “Top Nav” for Top Navigation and then just click on Create Menu And you can create as many menus as you want And then you can add it in for specific pages and I’ll show you where you can do it later So select all the pages that you want for the menu. I’m gonna select all of it click on Add to Menu And you can rearrange it just by holding it and dragging it. Like that And if you want to create a drop-down menu, for example, like the one that you see in my page like that, drop down menu, all you need is click on one of the menu links and then drag it and pull it in like that So this will be a drop down of Home. When people hover over Home, then that will drop down that’s how you do it let’s put it back So you can also set this one. So if you add in new pages, then it will be automatically added to this menu I’m gonna leave that empty. For the Theme Location, I want to select Main Navigation And if you want your menu to appear on the footer, you can select Footer Navigation down there So let’s click on refresh and it should be in order now So that would be your main navigation menu done. The next part of the tutorial will be showing you where you can add in your logo as well as adding a favicon here So favicons are everything such as these little icons here So what we need to do to add in our logo is we need to go to Customize And what I want you to do is automatically take your Themify Options. Click on the Advanced Options tab wait for that to load, and then you can click on Site Logo and Tag Line click on Site Logo If you don’t have a logo image yet, don’t worry. You can just put in some text. For example, Logo Site title like that And you can change it to the different fonts here And I’m gonna leave it as default and the font is called Open Sans I’m just gonna leave it there and you can also change the font width here. It’s really cool change it to 600 or something like that and you can change the colors. You got basic styling options here But if you have a logo image, all you need to do is click on Logo Image and click on that to upload Select files And if you’ve been following along with the tutorial and you’ve downloaded the images folder then click on that and we can upload a logo. So with logos, you want to make sure that if you’re creating it yourself, you want to crop it as close to the actual logo as possible Something like that. So it doesn’t have any white space around it at all as compared to this one. So this is a bad example ’cause there’s so much white space up here You want to crop it as close to the logo as possible and the ideal size that I found is 128 px (w) X 64 px (h) But what I recommend is actually, going to my description and click on the link that will direct you to the $5.00 logo, and that will direct you to the Fiverr Marketplace So this is a place where you can get logo designs for just $5.00 SO click on that and you’ll be directed here and you can check out all these people who provide $5.00 logos and let’s click on one of them And to join, you just need to log in with your Facebook or you can enter in an email and fill in some basic details And after when you’ve done that, then you can check out which service provider that you want As you can see, you got 31,000 views, 169 orders in queue and you can get logos here for $5.00 And I think it’s just good value for money. ANd you can just tell them the size that you want to have the logo at or you can just crop it yourself So we can go back here and let’s say we’ve uploaded the logo Um, this one here is a good example: Infinite 64. Open And then you can actually insert that into there And as you can see, it’s quite big. For here, I want you to type in 64 and then that would be pretty good So if you actually save and publish that um, you might want to actually open this in a new tab and you can see what that sort of looks like, the logo So that’s pretty good So if you don’t have a logo, click on site title for now but make sure to delete this measurement here Otherwise your logo would be confined to a certain measurement and it will be showing vertically So just click on site title, I’m just gonna save and publish and close that. And I’m gonna show you where you can add in your Favicon So we need to go to our Dashboard here and close that And hover over Themify Ultra, Themify Settings So Favicon here, you just need to upload it And for the favicon size, the recommended size is about 32X32 pixels And for this one, I don’t think it matters about cropping the space up there ’cause it looks pretty good So once I upload it in, you’ll see what it looks like. Make sure that it’s a PNG file. That means it’s transparent So Open Save it And then visit the website And you should see the logo up here and it’s pretty high-quality and you’re pretty much good to go So we’re pretty much good to go and we can build our Homepage now. But before we do, we actually need to get the images ready to upload. So, as you can see, these are nice images that we got and I’ll show you where you can get them for free and I’m also gonna show you where you can crop them to the perfect size so that they’re not blurry or they’re not too big so your website takes too long to load So this part’s really, really important because it’s like the signage of your business. If people don’t trust your website at first impression, they’re gonna leave and then there’s no point having your blog because they’re not gonna read your content or anything like that So what we’re gonna do is we’re gonna go to a website called Unsplash.com And you can use these images for free and you can edit them and it’s awesome So if you do want more resources for images, you might not find the perfect images here but you can go to my website, Hoganchua.com. Click on Blog And somewhere in the Blog post, you’ll see Ultimate List of Website Resources. So click into that and check out my list and I’ll show you where I also get some more free images from So let’s go back to Unsplash. And let’s say, for example, you like maybe this image of the fish So click on that. So you can just click on Download and you can just save it on to your desktop What I recommend is creating a new folder and saving your images in that folder And I already got the images so I’m gonna cancel that and I might just close that as well So what we’re gonna do now is I’m gonna show you where you can edit the images. So go to Fotorr.com And you’ll need to click on Edit. This is where I edit my images before uploading to my website To make sure they’re not too big. And you can also sort of edit the brightness and sharpness of the image as well as add text to it or whatever you need So all we need to do is to open And if you’ve been following along, then click on the Images folder And I have an image there for you to crop. It’s called Slider 3 to Crop Click on Open Close that and you’ll see this image and you’ll see that the size is 3520X2272 So taht image is really, really, really large and you don’t want to upload that to your website ’cause it’s gonna take too long to load So what we need to do is re-size it. So click on Resize here Close that And click on the Lock icon. So when you change the size here, it will resize proportionately for the height as well So the ideal width that I found was about 1800 and the ideal height was about 1000 So it’s not 1000 automatically so we need to crop it manually ourselves. So click on Crop And type in 1800 here and then type in 1000 here. And then select where you want to crop that image And I think that looks really good. Just there. And then I’m gonna click on Apply Once you’ve done that, then you can click on 1 Type Enhance and that enhances the image a little bit more it brightens it up, makes it sharper, or whatever. You can also click on Basic to edit it or you can click on Effects and you can add a filter to that image as well. You can add text as well by clicking here So I’m just gonna save it and I’m gonna save it as normal Any image about 300 kilobytes or 400 kilobytes, that is pretty good. You don’t want it much bigger than that So save to your computer. I’m gonna save it as Slider 3 and delete that And I’m gonna save it as Cropped so…. Save it there and then close it So do that for the few images that you want or you need So let’s go back to our website. And before we turn on the Builder, I’d like to refresh the page first So refresh the page and you can turn on the Builder And sometimes the Builder might not turn on and what I recommend you do is to check out my FAQ again Generally, the most common fix is to use Google Chrome. I have a lot of people use Safari or some other browser. It didn’t work properly But once they switched to Chrome and it worked And also make sure that you’re on the latest version of WordPress And also the version of PHP is 5.6+ And also, you might want to try deactivating the plug-ins which are not mentioned in the tutorial So if you have any issues, just leave a comment Let’s go back here and let’s click on Row Options ’cause we’re gonna set in a Slider And what I want you to do is to go to the Styling tab So you can upload an image if you want to and to upload an image, make sure to click on Browse Library to upload your image like here So don’t click on upload. Otherwise, it would automatically sort of crop the image for you And that would make your image really, really blurry. So make sure to click on Browse Library if you want to upload an image And for the Background Mode, I recommend Full Cover. And Background Position, I recomment Set as Center So I’m gonna be adding in a slider and I’m gonna Insert Gallery And I’m gonna upload the files. Select Files I’m gonna select Slider 1, Slider 2, and Slider 3 which is cropped. Click on Open And I’m just gonna wait on that to upload Once that is done upload, then you can Add to Gallery and then Update Gallery. And you got your slider images And for the image size, you want to set it to Original For the Background Slider Mode, you’re gonna select Full Cover And what we’re gonna do now is we’re gonna click on Save to see what that sort of looks like. Okay, save it You’ll see that the whole image doesn’t really appear yet What we need to do actually is to add in some padding which is also known as space inside there So we need to go back to options. Go to Styling And then scroll down to Padding So for the Padding, I want you to deselect that. Type in 15. Change that to Percentage And type in 15 for the bottom and change that to percentage So you see that it’s added space for the image. And once we’ve added some text in there, Then it will be even taller. So you can see more of that image So just keep it as 15% for now and then what I want you to do is I want you to go to scroll back up a little bit, and go to Row Overlay And here, I want you set it to black and I want you to set the Opacity down to about 10% Like that So what this basically does is it makes it sort of a little bit darker, your image And why I do that is because I want to add in some white text later on So that makes the white text sort of pop out a little bit more. But if your image is dark already, then you might not want to add in the overlay color So I’m gonna set in the Overlay Hover and what that means is if I hover over that image, then it’ll turn into whatever color I set it into So I might change that to 0.5. Like that And then what I’m gonna do is click on Save Save it and then close it So before I add in text, as you can see, there’s space up here, space on the side I want to make sure that it covers the whole screen So to do that, what I want you to do is click on Edit page Scroll down to Themify Custom Panel oops, Themify Custom Panel, and for the content width, you want to select Full Width So this Themify Custom Panel is where you can edit this specific page you can edit the page appearance for that specific page and you can also select a custom menu that you’ve created for that specific page So we’re gonna click on Update And I’m going to leave the page and hopefully that covers the whole screen right now Okay, that’s awesome. We’re gonna turn on the Builder and let’s add in some text So as you can see, we’ve got different types of modules. I’m gonna drop in a text module right into there And then I’m gonna type in the headline “To Discover”. And I’m gonna set this to Heading 1 tag You want to click on Toggle Toolbar Select Heading 1. Give that a little preview. Okay, so the text is there And you can go to styling and you can click on Heading tab here . And you can edit the Font Family Font Color, Font Size here but I’m not gonna do that because I’m gonna show you how to do it in the Customizer section Because I want to edit the Heading 1 fonts universally So whenever I set the Heading 1 font, it will be default So it saves a lot of time and it’s really consistent So after that, what I want you to do is go to Animation and I’m gonna set in some animation. So click on this and set in Fade In and select 1-second delay. And just click on Save Once you’ve done that, then I’m gonna set the sub-headline So I’m gonna duplicate that text module below. Double-click it And then I’m gonna type in my sub-headline. So it’s gonna be….. “Create Your Own Blog Today” Like that. And then I want to go to Styling. For the Font Size, I’m gonna change it to 24 Like that. I might give that a little preview Okay, that’s what I want For the animation, instead of 1 second, I want to set it to 1.5 second so it will appear after the headline Click on Save So you noticed that these two colors are set in already. What I like to do is I like to go to Row Options Go to Styling And then go to Font. And then for the font color, I want to change it to white So what that does is it edits all the fonts within this entire row And it’s just a little bit more conventient. And then you can click on Center that will center everything within the row. So after when you’ve done that, you can click on Save And the next thing we’re gonna do now is drop in an icon And we’re gonna drop in the arrow icon. So, I’m gonna Insert Icon And we’re gonna select in Directional Angle, Double Down. Give that a little preview So that’s what it currently looks like. I want to change it to large and I want to change the background style to none And then I want to go to Styling. Um, actually, before that, I want to go to Link and I want you to type in “#row2” Make sure it is exactly like this it is case senstitive and make sure there are no spaces as well After that, go to Styling and click on Icon And make sure to set the color to white here So that ensures that icon is white For the animation, I’m gonna set in the same animation fade in cause I want to keep it consistent And then I want to set the delay to 2 seconds Set that to 2 seconds and that is pretty much done Save it And what I want to do now is set in the Heading 1 font. So I’m gonna close the Builder So I’m gonna go to Customize And then what I want you do is, that will automatically pop out, your Themify Options, click on Heading And click on Heading 1 Font And this is the Heading 1 font as you remember setting it in. But if you do forget, then you can right-click. Inspect And you should see the Heading 1 tag there So what I’m gonna do is set the font to about 80 pixels And you can change to whatever font you want but I’m gonna leave it as default which is Open Sans which looks nice, simple, and good Then I’m gonna change the font width to about 600 or maybe bold if that looks better I think 600 looks pretty good and then I’m gonna save and publish. Close it And I think that looks pretty good. I might want to remove this text up a little bit to do that, we can turn on the Builder And we need to set in some minor margins So turn taht on. Double-click this Text Module Go to Styling And deselect this and put in -2% for margin So we can click on Save and as you can see, it moved up a little bit So basically that is pretty much done. We do need to go to the 2nd row here And we need to set in the Row Anchor As you can see, if you click on that, it will scroll down to this section here And the reason why it does that is because we put the link here which is the #row2 And we’ve set in the row location So we’re gonna set in the Row Location now. So click on the Row Options here And you’ll see Row Anchor So instead of the #, leave that out. Just type in row2 And then click on Save If we save it and close it and refresh it and, hopefully, if we click it, then it will scroll down to the section that we set in So if we click on the arrow, it will scroll you down to the Row Location 2 that you just set in for that row So now what we’re gonna do is I’m gonna show you how to add in your blog post adding in links, images, and video to that blog post as well and let’s get started So to add in a blog post, we can go back to our Dashboard first and then we can click on Post here So we’re gonna delete the “Hello World” post which is the sample. So trash that first And then go to trash and delete that permanently And then I might just close those things here. Click on Add New So this will be the title of your Blog Post. So for example “Inspire the World” And this will be where you’ll be adding your text so you’ll be typing in the blog post, adding in the images, and things like that here So you got a really basic word editor thing here I’m just gonna paste in some random text and show you So copy that over And what I normally do when I’m pasting in something from another source is to right click and paste to match style If you’re on Windows, I think you will paste in plain text But if you don’t have those options, just click on this icon here and that will paste everything as plain text So Ctrl+V or Command+V that pastes that stuff in there. So to add a link, all you need to do is to highlight the text that you want to be linked and then click Insert Link. And click on Link Options So for example, you might want to link it to the website here Copy the link URL, paste it into there And because it’s an external link, I like to open in it a new tab So if you have existing content, you can search for it here and you can select it and instantly add that link. So I’m gonna click on Add Link and there you go, there’s your link To add in an image, for example I might hit enter there You just need to click Add Medium Upload files, select files And I’m gonna upload the Blog Image # 1 Click on Open And the size of that image is set to 1165 width in pixels X 775 So normally I would keep the width at somewhere around 1000 or so to ensure that it’s kind of good quality But for the blog post you really don’t have to have a standard image size But try to keep it consistent. That way it will look nice and professional on your website So for the size, I’m just gonna select Full Size here and insert that into post And your image will appear. So that’s looking good. And basically to add in a video, What you’ll need to do is go to Youtube, find a video there that you like or is your video Copy the URL Go back to your post and let’s say you want to put your video here. Hit on Enter And just paste in the URL And it will appear in about 1 second like that Okay. Really, really simple And after when you’ve done that, you want to set in a category for your post just to sort out your blog post and things like that to make it easy for people to search To add a new category. This category might be “Travel” Click on Add New And then you’ve got tags here.Tags are for search engines as well as for people who might use the search function and it will take the tags and look for the blog post So for this one it might be “Hiking” and then a comma to separate it “Travel the World”. Click on Add And then what I want you to do is set in a Featured Image So the Featured Image will be the image that will show up on your homepage. Like that So let’s go to the Featured Image Upload Files, Select Files And click on Blog 1 Feature. Click on Open And the size for the featured blog image is 1165X665 So if you’re beginning, then I recommend using this size So it’s the optimal size that I found. And Set Featured Image And that will be good to go, I’m pretty sure. Just click on Publish And afterwards when you’ve published that, then we can view that post So we’re gonna view the post. Right-click Open Link in a New Tab And there is your Blog Post. So this is your featured image that you set in. Your first image Scroll down, your title This is your Meta Information, this is your author Category, tags, number of comments the link that you’ve added in the image that you’ve added in and also the video that you’ve added in And the plug-in which is Social Sharing down here. Nice and simple And also the comments section where people are able to comment. So let’s go back to that post And if we scroll down, you’ll see Themify Custom Panel You can actually change the post layout to any of these post layouts which is really cool. For example, Split If we select that and update it And if we actually refresh this page You’ll see that the blog post has changed layout So that’s a really cool feature of this theme and you can also play around with the settings here But if you go back to the Themify Settings, you can actually set the default post layout So I’m gonna show you again And go to Default Layouts, scroll down to Default Single Post Layout And then you can set the default single post layouts for all the new blog posts that you’re gonna add in So one of the most common things is that people want to remove the circle date thing And to do that, you can click on Display. Post Date as Inline Text instead of the circle style. And select that. and then you can click on Save So what I’m gonna do now is I’m gonna add in a few more blog posts. So I might pause the video and do that and then I’m gonna come back and show you how to edit your Home Page So just click on Post again and then click on Add New So I’m gonna add them in now So I added in all the posts and what I’m gonna do is go back to my Homepage And then add in the Post Module So we’re gonna turn on the Builder Scroll down here. And we’re gonna drag in a post module into this section. Before actually doing that, we need to set in the row the columns, actually. Sorry. And I want to set it in this one here. So you got the Sidebar here and the main section here where we’re gonna drop in the posts So drop in the post module there So you got different post layouts so you can preview that to see what that sort of looks like at the moment You’ve got different post layouts that you can set. I’m gonna set the default one And you can set in different categories only or you can exclude categories and you can limit the number of posts to show I might put in the limit to be 6 and the most important part is the Display. As of the moment, it’s displaying the whole of the content in the blog post You just want to display just an excerpt of it So that would basically mean just a small summary of the blog post and people can click into that blog post to read more about it So you got some basic settings that you can set in here that’s not really necessary. The only thing I want to do is I want to add Styling align everything into the middle. So Align Center. Like that and I think that looks pretty good then all you need to do is click on Save And now we’re gonna add in the Sidebar section. So you can drop in Widget ties module into there Select Sidebar and you can click on Save And this is the basic default sidebar. I’m gonna show you how to add in everything that you need in just a moment. Before we do that, I’m going to add a little bit of spacing to the top here because it’s too close to the slider So go to options for the Row # 2. Styling. And de-select that. For the padding to the top, set it to 5% For the bottom, set that to 5% as well and then click on Save So besides adding in the post module, you can add in the slider module as well to display blog posts. So you might have a few featured blog posts that you want to display then you can set in the specific categories or whatever you want. So if you preview that It will actually show a slider version. So I’m gonna set the display to Excerpt which is a small summary they’ll see the slider. So people can select that post and then click it and then read more about it once they click into it So besides adding in posts as slider, you can add in images as well. Make sure to click on Browse Library And you can do videos as well. So you can paste in a video, a Youtube URL And you can also do a text slider. So it’s really good for testimonials or quotes or things like that So if we close that, then you can also add in a video as well So these are the most common modules that people use. For example, if you drop in a video there And all you need to do is, let’s say, we find a video here Copy that URL I’m gonna pause the video. And all you need to do is paste that URL in here Preview that and then you have a video here You can save it and you can move that video anywhere on your page So I’m gonna close that And one more really common module is the gallery module So you can drop in a gallery You can drop it into this column here or you can drop it into a new row like that And you can insert the gallery. Like that And I’m just gonna select the images that I have uploaded before. Like that I might select those 6 images and then add to gallery Exit gallery And if you preview that, it will show the gallery. Like that Since there are only 6 images, then we can select 3 columns. So there are 2 images per column And then you can click on Save Save that and then close it And people can click on that and it will open up in a light box. So you can showcase your work or anything that you want, really So we’re gonna turn the builder and delete that module Delete that like that What I’m gonna show you is that what you can do is, let’s say we make a mistake we’re gonna click on this thing And drag that thing across like that And you made a mistake. For example, that’s a mistake Then what we can actually do is click on Undo and that will undo the changes that you made And what you can do as well is you can actually save the revision. So you can click on the arrow here save the revision. And this is useful if you have made a big mistake and then you can load the revision So Homepage, and then you could do the date. So 1st December and then you can put in a time or something like that and save the revision So let’s say you make a big mistake, then you can load the revision And then you’re layout will be back to normal again So what you can do is you can also save as layout. So save the layout Put in a title and save it And with the layout. What it’s useful for is, for example, if you want to create a similar page to the homepage on the about page or any page that you want is you can actually load the layout. So click on Load Layout And these are some pre-designed layouts that you can use. And Parallax ones which are really cool as well And this is the one that you’ve saved in So you can click on that and that will load the whole entire layout for you Then you’ll save a lot of time from rebuilding it So pretty much right now I’m gonna show you how to configure the sidebar and the first thing that we’re gonna do ist to set up the MailChimp account Save that and close that What I want you to do is open a new tab and type in Mailchimp.com and this will take you www.mailchimp.com and you need to sign up for free Click on Sign up for Free All you need to do is fill in you email, password, and username that you want And click on Get Started And after that, you’ll receive an email to confirm that you have signed up for the account and then it will take you to another page where you have to fill in your basic details After that, you can log in to your account So I am a member already so I’m just gonna log in to my account Okay. Log-in And once you’ve logged in, you should see a pretty similar dashboard And the firs thing that you’ll need to do is probably create a list So click on list and what you’ll need to do is create list create list Your list name, just put in your website address or something like that as long as you know what the list is for. So this might be “Blog Tutorial” December. And put in your email address If you put in your Gmail address, this will come up If you don’t have, for example, a domain email address yet, just leave it as your Gmail address and I’ll probably create a video pretty soon and I’ll put that link in the description below and you watch that to create your own domain email So I might put in my one which I’ve actually made beforehand For the name, just type in your name here. And write in a short reminder of how people signed up So “Youtube tutorials….” And then you need to put in your address. I think you already should have done that then click on Save So you created the new list and what you need to do now is we need to get the API code to connect it to our MailChimp plug-in So click on here and click on Profile and then click on Extras. API Keys And what you’ll need to do is you’ll probably don’t have an API Key here yet So you need to click on Create a New Key So create a new key and this will come up.Then copy over the API to your clipboard Go back to your website and then go to your Dashboard And then click on MailChimp here Paste in your API Key just like that and save changes. And it should connect If it’s connected, it should show a green theme about it Once you’ve done that, then click on Forms And what you’ll need to do, click on it again What you’ll need to do is enter in a new form name. So this one might be “Blog Site Demo” And then select the list that you just created. So normally it should just have one list So select that and add a new form Once that is done, then they’ll have your default form ready and you can preview that form just by clicking on that. And by default, that’s what your form looks like. Personally, I’m gonna delete the email address ’cause the email addresses are already in here and change the name to Subcribe So let’s go back to the form fields here And I’m gonna delete that label. And that Gonna change the name to Subscribe here And you can also add in other fields here. You can check out the FAQ if you have any more queries So let’s save the changes and once that is done, give that a little preview again to see what that looks like That’s what we wanted it to look like Then what you’ll need to do is if you want to paste or add in the Subscribe box to anywhere on your website, just copy over this short code to your clipboard And then you can paste it inside a post, a page, or inside the text module and the subscribe box will show up But we’re gonna add it to the sidebar so what you need to do is go to Appearance and click on Widgets An this is your sidebar here at the moment that’s the sidebar section So we’re gonna delete everything here for now and we’re gonna add it n ourselves So I’m gonna quickly delete that Once you’ve deleted all of that, then look on the left. You’ll see the MailChimp signup form drag it and put it in there And all you need to do is click on Save And once you’ve saved that, you can go and visit your website I might close that for now And then scroll down and then you’ll see your email subscribe box So people can enter in their email and subscribe and they’ll subscribe to your list and then you can promote to them your offers or anything like that through your email campaigns So let’s go back to Widgets and the next thing we’re gonna be adding in is the profile picture So that’s really, really easy as well. So what we need to do is go back to our Dashboard section and click on Media. So we’re gonna upload the profile picture of yourself first. So click on Add New So click on Select files. And then I’m gonna go to my desktop and the images folder and then upload profile picture So if you’ve been following along, then just upload my one for now. Click on Open And the size of the image is 250X250 to keep it nice and small otherwise it’s gonna take too long to load So what you want is to copy in this URL here to your clipboard. And then you can close that for now And then you’ll need to go back to the widget area And we need to drag in a text module – a text widget, sorry. and put in below the MailChimp thing So now what we’re gonna do is add in some basic HTML so we can display our profile picture So follow me exactly and you should be good Sosign So really easy. All you need to do is replace the URL here Replace the name of that image which will probably be your name and that’s about it And if you issues, make sure that is all correct. Save it We’re back and refresh the page. And the image should be up here All good. So the next part you’re gonna be doing is adding in the recent posts or the most popular posts So let’s go back to widget area. This part is even easier All you need to do is drag in the Themify Featured Posts Scroll back up and put it below there So you might change that to “Most Popular Posts” And you can select specific categories. Show 5 Posts. I’m gonna show the post date and display post thumbnail as well So for the Thumbnail size, I’m gonna select 120X68 So that’s the ideal size that I found and then you can click on Save Give that a little refresh and then you should be good to go So if you want your site to load quicker, then what I suggest is to disable the post thumbnails cause then the website wouldn’t need to load extra images and that would speed things up Now the next part we’re gonna be adding in is the Tweets So you can add in the Twitter Feed So what we need to do is connect the Twitter Feed to our website So let’s go to Themify Ultra. Themify Settings Scroll down to Twitter Settings and what you’ll need to do here is get the Consumer Key and Consumer Secret So let’s right-click here. Open the documentation in a new tab And then what I want you to do is create an application on Twitter Before you d that, you might need to log in first to your Twitter account So try to log-in first and then click on Create Application Cause once when you’ve logged in, then it will direct you straight to here to fill in the application details So I’m just gonna put in the application name. So maybe “Blog Tutorial Dec 1” Description “Twitter Feed for Tutorial” or whatever you want, really For your website, what you need to do is copy over the website URL So make sure to copy that like that. Exclude everything after that / So it should be something like that And then that’s what you need to do. Just click on Yes. And create Twitter Application So once that is done, then you need to click on Keys and Access Tokens And we need to copy that key and paste it into here Paste the consumer API Oops. Back into here Make sure to delete that space. Otherwise, it might not work. And then click on Save Once that is done, you’ll need to go to Appearance. Widgets And then you’ll need to scroll down and look for Themify Twitter Scroll back up And put it below Featured Posts And for the Twitter ID. Your Twitter ID is normally this one here. “Hogan Chua” for example So you can copy over that and we can just paste it into here. Like that Show maybe 3 Tweets, display the Follow Me Button, include ReTweets and exclude replies. Click on Save So once that is done, then we can give that a little preview and hopefully it will show up on our page oops, scrolling down. Okay, you got your Twitter Feed there. Looking great Now the next part is adding in the Facebook Like Box This one’s a little bit easier. So what we need to do is we need to look for Easy Facebook Like Box and drag it and put it underneath All we need is your Facebook URL so copy that to your clipboard and paste it into here And for the width, what I recommend is setting in I think 270. The height, set it to 400 And set it to be responsive Show post as well And click on Save Now you can also copy this short code here and paste it on to anywhere on your website in your post, pages, or the text module or anything that you want and it’ll show So once you’ve saved that, then you can go to the page.Refresh it And hopefully your Facebook Feed will show up. Okay, that’s looking awesome and people can like it Straight away Now, the next part will be our Instagram Feed. So that’s really simple as well. Let’s go back to Widget area And let’s click on Instagram Feed here And same thing: we need to log in to get the access token. So what we’re gonna do is click on the link here And we need to log in. So enter in your username password and then log in Once you’ve done that, then we need to get the access token.Copy all of that paste that into there and get the user ID. Copy that and paste it into there as well Then we’re gonna save the changes and we’re gonna customize the feed. So click on Customize And here, the options are pretty much optional but I’m gonna show you how I customize my one So for the number of images, I’m gonna select 8 images And for the number of columns, because I want it to the sidebar, I’m gonna select 2 columns So if you want to display on your homepage, you might have 4 columns or 6 columns or something like that it’s up to you And then scroll down. For the header, I’m going to disable it Scroll down. For Load More button, I’m going to disable that as well But for the Follow button, I’m going to leave it and I’m gonna change the background color to black as well as changing the text color to white And then all you need to do is click on Save Changes Click on Display Feed And copy over the shortcode and you can use these other shortcodes to display your feed sort of in a different display What we need to do once we’ve got the shortcode is go back to Apperance and go to your Widget area And then all you need to do is drag in a text widget. Put it there Paste in the shortcode Save it And let’s give our page a little refresh And there you go. Awesome. And we got our Instagram Feed and that’s looking great So right now, I’m gonna show you how to add in Google AdSense It might not be important to you now but I think, later on, you would want to monetize your blog to make some passive income So you can get money for doing what you love. So the Google AdSense is this ad thing you see here And it’s really easy to add in. So I’m gonna quickly show you. So we’re gonna type in Google AdSense in Google and just click on the first result here and just click on that And if you don’t have an account yet, then you need to sign up now. SO click on Sign Up now And it says I’m currently signed to my email. So you can actually use it to sign up automatically So you can click on Yes or you could use another account. Then you’ll probably have to fill in some more details and things like that So you might need to fill your website details. Information about you and maybe your payment method And things like that So I’m just gonna log in to the current account and then this is the dashboard so I’m gonna go and click on my ads here And all you need to do is click on Add a New Ad Unit And then name it so maybe “Blog Tutorial Test Dec 2” And select this one which is automatically selected. You can also change the text ad style But I’m gonna leave it as default and all you need to do is save and get the code It should say that the code has been successfully selected. All you need to do is copy over this code Copy that to your clipboard and you need to go back to your website here and we need to go to hover over here and click on Widgets which is a shortcut And all you need to do is drag in a text module and put it below the Instagram Feed Paste the code in And click on Save. And we can go and visit our website. Open Link in a New Tab And hopefully, it will show up. Sometimes it might not automatically show up yet. It might take a few hours I’m not sure. It might be part of the algorithm or it might be that your website doesn’t have unique content yet And I think part of the algorithm uses your content to determine what sort of ads to show on your blog So as you can see, it’s not showed up yet. And also you’re gonna make sure that your Google AdBlock is also enabled for your website. Otherwise, it’s gonna block that ad and it won’t show up So to make sure that the ad is there, then you can just inspect it. Like that And if you scroll up a little bit, you should see this thing here which has GoogleAds.g and things like that And it should highlight blue on the left. That means that the Google Ads is active, it just hasn’t shown up yet So don’t worry about too much now because you’re not getting any traffic to your blog anyways so you can worry about it once you start getting traffic I just want to show you guys. I also want to show you that this can be applied for all sorts of banner ads that you might get with other affiliate programs such as Amazon So for example for the banner ads from Amazon, you’re able to select the different categories For example, if you want to display a camera ad, then all you need to do is they’ll give you a html code that you could just copy to your clipboard and just paste it into the text widget area as well the same as that and save So a lot of affiliate programs will give you banner HTML to add in like that And if we refresh that page, hopefully this one will show up So let’s scroll back down. And as you can see, the ad shows up So I’m also gonna show you another method because, sometimes, affiliate programs might just give you an affiliate link rather than HTML that you could just paste into your website So I’m gonna show you how to add that in. So what we need to do first is we need to go to the widget area and go back to your dashboard. And you need to click on Media So you’ll need to upload the image or the banner that you want to display on your sidebar So I’m gonna click on Add New. Select Files And in the images folder that you’ve been following along, I have Amazon Ad Image. So this is just an example. It can be any banner ad. So click on Open And there you have your Amazon ad. And then you’ve got your URL here to that image So double-click that to select all and copy that to your clipboard And what you need to do is go to your Widgets area again And then what you want to do is drag in a text module below that and maybe just paste that into there the URL of that image. First And then normally, you get an affiliate link. So I’m gonna use product links from Amazon as an example So I’m gonna search for a book Go and then what I’m gonna do is click on that And they will give you a link. So this is the affiliate link So I’m actually gonna shorten it with this and copy that to my clipboard like that And then this is your affiliate link. So this can be any affiliate link that your affiliate program gives you This is just an example. So what you need to do now is type in some basic HTML So this is fairly similar to the one that we’ve added to our profile image So type in