Designing for your Blogger/site

Beginners designing tools for your Blogger Blog. No need to be advanced to come here and learn from these tutorials.

First, back up your template. Make sure you have the following code just above your theme HTML </body> don't worry if you have to place another code just above </body> after.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Click the dropdown menu to go to the part of the page you need. Can't find what you're looking for? Click here to see all of the coding you can try.

Skip to the part you need:

Add widgets to your Blogger Add your domain to Blog Make an email domain Auto email your posts to your subs Make a dynamic link How to make a basic form Create Blogger XML Sitemap for Google Custom robots txt for Blogger How to make a Forum free Make an app

How to add widgets to Blogger

Head to Blogger's menu, and press Layout. The Menu is the 3 lines. 

Here you can preview your blog by pushing the eye button, you can add a widget, you can move a widget by holding your mouse down on that grey area with the dots, remember this will only work on a computer, or else you can't move the items. 

It shows you places you can move the items to too. Like at the top of the page, the bottom, the middle, have a play around and press the eye icon to preview it. 

You can add HTML codes, add pages, links, move your profile widget about etc. You can hide the widgets by pressing their eye icon, you can delete them also. 

Some are unmovable but HTML later in this Article we can fix that. 

You have to save the widget itself and then press save on the page too, when you're ready. 

How to change your blogger URL to a custom domain

To change your blogger url to your custom domain, simply head to settings, scroll down to where it says add your domain, write your domain down and hit save. 

I use a google domain which I recommend for blogger. I bought a domain from Ionos I believe, for around £2, and then forwarded it to google, which google walks you through how to do step by step if you already have a domain. If not, simply head to google domains. 

It is now £10 a year which it was going to be anyway.

Using a google domain means once you've saved it, google will do the rest of the work if your blogger is linked to the same google account.

Make an Email domain

My current email that you can email me on is (it's a forwarding one):

Ventsharm@prettyus.co.uk

To make a forwarding email address, transfer in your domain to Google domains. 

Once that's done, head to the email section by heading to the sidebar. 

And under email forwarding, select email alias. You write your desired email word/words, and you write what email address you want the emails to forward to, Google tells you where to write this. 

At the end of this you should have your own email domain. 

How to auto email your posts to your subscribers

Using Follow.it.

Simply, head to Follow.it - I recommend this way, because other ways are stopping the ability to subscribe or they're bringing in to pay options only. Where as Follow.it is free. 

The rest is fairly simple, Follow.it walks you through the rest. It's all about experimenting yourself and getting use to different sites. 

Lastly, add your Follow.it subscription HTML to your blog via your Layout editor on blogger. 

It will look like this:

How to make a Dynamic Link

Firstly, what is a Dynamic Link? Well, what I have came to understand about Dynamic Links, to simplify this, basically, a Dynamic Link, is the same as when you Forward a Domain, so when someone visits www.prettyus.co.uk, for example, if you are forwarding a user, they will be taken to a different website when searching www.prettyus.co.uk. With this, a user will still see the actual web address once they've been forwarded, so for example, they'll no longer see www.prettyus.co.uk once they have been forwarded.

The difference between a Dynamic Link and a Forwarding Link, is that a Dynamic Link takes you to a certain application, depending on what device you're using, however you can also include a fall back link if your app isn't compatible with computer, e.g, if you have an app on Google Play and Apple, but not on the Windows store. It also can give you information about how many clicks you're getting and things like that. Essentially, it is a smart link.  

Before you think about setting one up, you will need a Domain, please go to the top of this page and read about how to make a Domain, if you haven't already, and an app, how to create this is also located at the top of this page.

You won't be able to use your exact domain name for this. However, it will be your domain with an additional bit at the end, for example, PrettyusGPW or something like that. However a work around for this, is to forward your domain to that new web address, so a user when searching let's say www.prettyus.co.uk, will be taken straight to that dynamic link. 

So, to get started, you need to head to Firebase. Press Go to console, which should be at the top, if you need to log into google etc, it should guide you through that. Press Create project and follow the steps. 

When you're done, you should be greeted with a page like this:

Click on Dynamic Links, what I've circled above. Then press 'Get started', and google will take you through the rest. 

It isn't an easy thing to do, but at the same time, if you're not too old, you shouldn't find it too hard! If you consider yourself old, it is worth a try if it is something you want!

How to make a basic form

I created my form on Google forms. 

I feel like Google forms make the best forms. 

I'll teach you various ways you can make your form.

Let's start with how to start off. 

Head to settings and select your preferences including if you want to collect their email address. 

Head back to your form's main page and in the first part, you can write the title, I have wrote the title as 'About you', and you can write a description like I have. 

And in the first section that will pop up, I made it multiple choice and selected required, I made the first answer yes, and the second answer no, if they say yes, they'll be taken to the next question, if they say no they'll be taken to section 3.

With Google forms you add sections, you can do this by clicking the following:

Within a section there are multiple things you can add as you can see on the sidebar below. 

The first option is to add a question, when you select add a question, and then select the following, you can select multiple question options 

The next option is to import questions which lets you import questions from another form, the next is to add a title and description, the next option is to add an image, the next option is to add a video, the last one as explained, is to add a section, it's quite self explanatory. 

Section 3 for me was to display an I'm sorry note that the customer didn't meet my criteria for delivery and adding a link. I did this by adding the title and description to that section. You can add a link on there too. 

You can write where you want the person to go after each section, e.g, submit the form after that section. Remember you can also say where you want the reader to go after selecting yes or no or whatever your multiple choices are, as well, which what you put here could affect that so you should keep it as continue to next section if you're sending someone to a different part based on their answer. 

So there you go, that's how you make a basic form. 

Create Blogger XML Sitemap for Google

I found this information from Seoneurons. A sitemap tells Google that you want your Blog's posts/pages appearing on search results. I'm not sure if it will only display your upcoming posts/pages or if it will display your previous ones as well. Let me know in the comments! Also let me know how long it takes for all of it to process, and if it does for everyone. 

You can add your Blogger's posts/pages individually which I'll tell you how to do after I show you how to submit a Sitemap. 

You can check if some of your content is displaying on Google search by searching your site, just write in the url search bar: Site:https://example.blogspot.com/ change the https://example.blogspot.com in bold to your Blogger or your custom domain if that is what your Blogger url is.

First, what you want to do is head to Google search console and select domain, and add your Blogger's domain, mine is Ventsharmblogs.blogspot.com it should be auto approved. 

When you're set up, in the side menu you'll see Sitemaps, click on that and first add the following:

https://example.blogspot.com/sitemap.xml

Change the text in bold to your Blogger's domain or your custom domain if that is what your Blogger url is. Submit it and this should be successful after that and you should see how many posts you have under 'Discovered pages'.

Next, add:

https://example.blogspot.com/sitemap-pages.xml

Again, change the text in bold to your Blogger's domain or change it to your custom domain if that is what your Blogger url is. Submit it and this should be successful after that and you should see how many pages you have under 'Discovered pages'.

If you need to index a specific page so it appears on Google Search results, go to the URL inspection part of Google Search Console, type in the page that needs indexing, enter, and request indexing. You have a limit on how many you can request for indexing per day I think it is. You can try again the next day and if that doesn't work keep trying everyday if you like until it does work. 

I hope you've learnt something about Google Search Console. 

Custom robots txt for Blogger

Custom robots txt tells the search engine which pages should be crawled. As we want all of our pages crawled, head to Blogger's settings. Edit as follows:

Make sure you select all for each option when it asks you.

How to make a Forum free

You can make use of your Blogger's commenting feature by adding a comment widget to your Homepage and your most recent comments to your Homepage, I teach you how to do those things here, scroll down on that page to find out how to add most recent comments to your Homepage. It could look something like this:

Alternatively, you can add a forum via Iframe with Freeflarum or the code made for you with Powr which will also be displayed in an Iframe.

You can head to Freeflarum and follow the simple steps to make a forum free. After submitting your information, simply follow the next steps in your email. You can add this to your Blog using an Iframe, you can find out how to do that here. You can also remove the branding for a one time cost.

It could look something like this if you've paid for the branding to be removed:

Or you can head to Powr and follow the simple steps. They give you a code to put in your Blog. You can remove the branding if you subscribe but I think the branding will return if you unsubscribe. 

It could look something like this if you've subscribed for the branding to be removed:

How to make an app, free

Coming soon!

Don't forget to save your edits!

I do hope you've found something useful from this page. Leave me a comment below if something isn't working right! Thank you!

The next thing I suggest you read is Basic CSS codes for your Blogger