Getting Started on Blogger [Part 1]



Hiyo I recently got a little inspired to compile a (not very good) guide with everything you need to get started. Hopefully, by showing you the process of how I went about setting up my blog, it will help new translators who choose to use blogger to host their work.

{tocify} $title={Table of Contents}

So of course, before you get started on anything, you have to ask yourself which platform is better for you. Most sites with posts comparing the various platforms usually end up with Wordpress coming up on top, specifically Wordpress.org. However, with Wordpress.org, you have to pay for hosting plan and domain and for most solo translators, when we're just starting out with this new hobby of ours—with many of us being students—we're often less inclined to invest too much into it. So, if you're like me anything that costs money is immediately off the list. 

I mentioned in one of my earlier posts that I choose blogger because it is, truly, completely free. The one thing I dislike most is having unwanted ads disrupting my view. Wordpress.com for example has 'word ads' littered all over the free blogs hosted on them and also that annoying "create your website with wordpress.com" banner that you just can't get rid of. Ugh. Most of the time those articles comparing the different platforms try to scare us with the fact that our blog, unfortunately, does belong to us, but to Google, so if Google chooses to shut down this service one day, we would lose all our data. Another point many articles bring up is how simple blogger is, but I see that as more of a double-edged sword. Simplicity has its benefits. With how simple blogger is, you can easily edit the code of your template to change it to suit your needs. And we don't even need to know how to code because of how accessible help is these days; there are so many tutorials, you'd surely be able to find one for virtually every one of your wants and needs. 

Ok. I've talked too much. Let's get into it now!

Stop Tracking Own Views(1)

The number 1 you have to do when you start your blog is to go to your page and "turn off" tracking of own views. 

On your blogger dashboard, there is a stats sections for you to have an idea of how your blog is doing and I think it's safe to assume that most, if not all, would like those numbers to be as accurate as possible. You could try using blogger's own option to turn off tracking own pageviews but it usually does not work. I know because I've tried too many times and was confused for so long… 

Manage Tracking Own Pageviews With Blogger

Anyways, here's the first example: 

After that, you can refresh to see if the number of views is updated. This is usually easy to tell at the start since you're the only one looking at your blog lollol 

Using a Cookie To Stop Tracking

Now for the next method. First, you copy the code below by double-clicking:
function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
    }
     
    createCookie("_ns", "2", 999);

Now that you've copied the code, go to the homepage of your blog and right-click on an empty space and select inspect. 

Click on the console tab as highlighted then paste the code and enter. This example is for Google chrome but you can follow the same steps and it should work for most browsers. 

Setting up Google Search Console and Google Analytics

I can't really remember this part because it's been a long time since I did it, but I'll try my best! Anyways, you have to set up your google search console because if you don't, even if you check on "visible to search engines" in your settings, you'll probably yield zero results when you search your blog on google. For the sake of this guide, I created another blog so that it's easier to show you guys.

Google Search Console

1. First you search for google search console and click on it. Alternatively, you can go to settings on your blogger dashboard and find a link to it under the section "crawlers and indexing". It will then bring you to the page as seen below. 


2. When you click on start now, it will prompt you to sign in to your google account. Remember to sign in with the account that you created your blogspot blog on. Now, you'll see two options, domain and URL prefix.
 

3. Paste the link to your homepage in domain without the https//: and continue. So for example, instead of https://basicbloggerguide.blogspot.com/, I should put www.basicbloggerguide.blogspot.com Since blogger is under google, the verification is quick.


4. Now that your blog is on google search console, you can upload your sitemap for better indexing of your site. Apparently, Google now automatically creates a sitemap for your Blogger blog, so you just have to key in 
http://blogname.blogspot.com/sitemap.xml
replacing blogname with your own blog(2). Alternatively, the method I used back then was to use a sitemap generator(3). Both work as you can see. 



Google Analytics(4)

Now, moving on to google analytics which helps you to track your traffic beyond the basic stats provided on your blogger dashboard. 

1. Similar to google search console, you search google analytics and click on the link. 
2. Then you click on start measuring and it will bring you through step by step of setting up. 
3. I found a guide for setting up google analytics that is more detailed than anything I can come up with so click on the link here. I'd recommend for you to just set up Google Analytics 4 as I think google is stopping the use of Universal Analytics. 

Customising Your Blogger

To be honest, I think that at the start, it might be better to start off with basic templates provided by blogger, such as Contempo. I started out with Contempo and it served me pretty well for quite some time. Now the reason why I say that you should start with the templates provided by blogger is that at some point in using blogger, you'd start to feel its limitations and begin wishing for more. That's probably when you start searching up tutorials and more often than not, it would involve you diving into the alien world of html, CSS, and javascript. In one tutorial, the author even recommended for bloggers to write their posts in html to minimise the toggling between html view and compose view and worrying about the risk of things going out of place when opening in compose view. 

Usually, custom blogger templates will have many new codes that as new users we would find to hard navigate through. Sometimes, the codes you use from the tutorials may even "fight" with the codes in your custom template. I'm still struggling with that, as someone who knows close to nothing about codes and stuff. That's why I suggest starting with basic blogger as practice and when you feel that you're more comfortable, you can move on. 

Deciding What Features You Want To Include in Your Blog Posts

These features can be as simple as formatting codes like adding horizontal lines to your posts, to adding functionalities like a drop-down menu. But as a start, I only fiddled with simple html codes in the html view of blogger posts/pages. Here's a list of the ones I often use:

Horizontal Line(5)

You can already see this being used at the top and bottom of my post XD My personal favourite is the most basic one  
<hr align="center" width="90%" />

But there are many other different ways you can edit the horizontal line to match your blog design. You can refer to this post for more ideas. 

Adding Gifs(6)

Another way to zhuzh up your posts is through the use of gifs. The simple way to do that is to insert the code below when in html view.
<img src="Gif_link" alt="my_gif" />

Then you replace the Gif_link with any gif link which you get by right-clicking on the gif you want to use and selecting, "copy image address". Here are some examples: 

my_gifmy_gif

Adding Footnotes(7)

Most translators have their own way of putting in information/explanations. Some may choose to do it directly within the content itself so readers don't have to scroll down, while others may choose to consolidate all the information in one place, commonly as footnotes. To ensure that readers do not lose their progress as they toggle between the chapter itself and the explanation in the footer. You can insert code-linked footnotes! For examples, you can check out my translations, most have them have footnotes.

1. Open html view and insert the code below at the location you want.
<a href="#1" name="top1"><sup>[1]</sup></a>


Example: Hello this is a footnote example[1].

2. Next you paste the following code at the bottom of your post and replace the word "FOOTNOTE" with your content
<a name="1"><b>1. </b></a>FOOTNOTE<a href="#top1"><sup>↩</sup></a><br />


1. I am the explanation for the footnote.

3. If you want to have multiple footnotes, you simply have to repeat steps 1&2  and change the numbers respectively. So: 
  • <a href="#2" name="top2"><sup>[2]</sup></a> will match with <a name="2"><b>2. </b></a>FOOTNOTE<a href="#top2"><sup>↩</sup></a><br />
  • <a href="#3" name="top3"><sup>[3]</sup></a> will match with <a name="3"><b>3. </b></a>FOOTNOTE<a href="#top3"><sup>↩</sup></a><br />
  • and so on and so forth.

Adding a Spoiler Button(8)

All you need to get a spoiler button is to copy this code by double-clicking and pasting it in your post when in html view. 
<div><input value="Show" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.value = 'Hide Content';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Show Content';}" type="button" /><div style="display: none;">HIDE CONTENT GOES HERE</div></div>
HIDE CONTENT GOES HERE

After that, you just paste your content in the HIDE CONTENT GOES HERE section and you'll get this:


Peekaboo am a spoiler example

Small Word of Advice

When opening html view in posts/pages for the first time, the html may appear as one big chunk which can make it quite hard to see. So when that happens, you simply have to click on the icon that I've drawn out for you in the blue box. 

Once you do that, it becomes a lot easier to see.

To End Off Part One

As this post getting a little too heavy and is starting to make my computer laggy, I'll be making a part two which will include other information, such as making a "Contact Me" page and how to download and use free custom blogger templates. 

Click here for part 2 (it'll be updated soon maybe)


Reference list:
  1. Kamat D. Fix Blogger Tracking Your Pageviews [Internet]. Stramaxon.com. 2016. Available from: https://www.stramaxon.com/2016/04/stop-tracking-own-pageviews-blogger.html
  2. Malone E. How to create a sitemap on Blogger and submit it to Google and Bing [Internet]. XOmisse. 2013. Available from: https://xomisse.com/blog/create-and-submit-a-sitemap-on-blogger/
  3. Create XML Sitemap for Blogger - Create XML & HTML Sitemaps. Free Sitemap Generator [Internet]. Mysitemapgenerator.com. 2009. Available from: https://www.mysitemapgenerator.com/sitemaps/platforms.str.blogger
  4. Das S. How to Setup Google Analytics for Blogger & Wordpress? [Internet]. Somenplus.blogspot.com. 2022. Available from: https://somenplus.blogspot.com/2022/02/google-analytics-guide-2022-setting-up.html
  5. M. S. How to Add a Horizontal Line (Rule) to Blogger Blogspot Post [Internet]. Webdesignexperiments.blogspot.com. 2012. Available from: https://webdesignexperiments.blogspot.com/2012/05/how-to-add-horizontal-line-rule-to.html
  6. Interlligence S. How To Add Gif Images / Animations To Post On Blogger [Internet]. Blog-tipster.blogspot.com. 2011. Available from: https://blog-tipster.blogspot.com/2011/04/how-to-add-gif-images-animations-to.html
  7. Wayne L. How to create footnotes in Blogger [Internet]. Laurenwayne.com. 2011. Available from: http://www.laurenwayne.com/2011/08/how-to-create-footnotes-in-blogger.html
  8. HOW TO PUT SPOILER BUTTON IN BLOGGER - Bloggerunlocker | Blogger tutorials [Internet]. Bloggerunlocker.blogspot.com. 2015. Available from: https://bloggerunlocker.blogspot.com/2015/03/the-spoiler-has-function-to-hide-and.html

Depsite the note at the start, this post has actually been sitting in my drafts for awhile lol but anyways, I hope this simple guide(?) helped you even just a little bit. If you liked it, you can support me by sending some love in the comments or through the button below


peace lilies~

lilies

I'm a mega weeb who just wants to share some online novels I've read and maybe translate some of them to english along the way. I do not guarantee the accuracy of my translations.

Post a Comment

Previous Post Next Post