Thursday 28 October 2021

Need Help Editing Your Blogger Blog?

Do You Need Help Editing Your Blogger Site

By Strictly-Software

After my last post about editing blogger blogs using JavaScript on the client side due to the lack of functionality in the back end of the admin side of blogger I was contacted by a couple of people who needed help on their blogs.

I have implemented features such as the following using the JavaScript/Text widgets that you can add to your layout for adding CSS Styles and JavaScript code to do the following so far:

1. Added the code I use to turn my SEO optimisation on or off. In my sidebar there is a section where you can turn bolded sentences or words off and on again. Some people like having the bold on as it holds the key information in a blog piece and helps with skim reading. However as it is loaded server side to aid SEO, I can turn it off with client side JavaScript either on each page or by using cookies to remember your choice when doing so that when you come back the next time it will have remembered your choice.

2. Used JavaScript to totally change a blogs colour scheme from a default light grey to a dark blue and white scheme. Similar to using the JavaScript widgets but with a bit more code and use of the querySelector and querySelectorAll methods and then looping through matching elements to change their colours using .style.backgroundColor & .style.color methods.

3. Again changed the layout of the blog by expanding buttons that were too small on search bars, adding in custom search engines that only search certain sites, usually related blogs or sites about the same content that the blog in question was about.

4. Ensured Google Adsense was enabled and turned on in the best way to increase revenue streams from visitors to the site.

5. For a blog that was hotlinking to a site that had no SSL anymore to display images. I obtained the original image and uploaded into Blogger so that it was stored IN the blog and referenced from there. People are often put off sites with no HTTPS URL such as my own, purely due to Browser warning pages that believe every site nowadays needs to have an SSL.

Well if you are not actually buying anything or logging into the site or passing personal information to it e.g it's just a blog or site with text and pictures you are reading then there is really no danger at all from going to the uncertified site. 

Just click Advanced and then "Go To Site Anyway" or the comparable message. You can check this out by going to my own site, however I have found the if you use BRAVE as your browser it or either one of the following extensions remembers that you have gone there and prevents the same MalwareBytes Browser Guardwarning page from showing: or DuckDuckGo Privacy Essentials.

You can check 2 of these sites out here:

And check out the changes and features for yourself.

If you are interested in getting some widgets added to your own Blogger site then contact me by email and we can work out a price for the work. There is a lot we can do client side with JavaScript to replace the lack of functionality the old Blogger system had for changing layout and colours etc on the page loading.

By Strictly-Software

Thursday 21 October 2021

Changing Blogger With JavaScript

Using JavaScript To Edit Blogger Layout

By Strictly-Software

If you are using Googles blogger to output content then there will often be times where you want to edit the layout depending on the page you are on, or the content that is shown.

I recently had a site where I needed to edit the content in multiple places depending on whether a GoFundMe post was being shown on the homepage, or it's own page. As I also had a mini GoFundMe logo in the sidebar I didn't want both images to be shown at the same time.

I also had a Custom Google Search Bar which only searched a certain number of websites related to the content on the blog.

Therefore the logic I needed was to.

1. Once the page had loaded I needed to ensure if a post of GoFundMe was shown on the page then I needed to remove the sidebar image in ID #Image4.
2. Just doing a test for #Image4 doesn't work as the widgets change names server side before output therefore I need to list out the pages / URLS that the post appears on where I know that the image in the side bar and the main post image both exist.
3. I need to add text to a special Google Search Bar when the site has loaded, sometimes this can be slow depending on Google's Servers, so therefore I decided to put it in a window.onload event to ensure all other images and external items had loaded before I edited the input bar.
4. On focus of the search bar I need to clear it to allow people to put their own search terms.
5. On leaving the search bar if it's empty then I need to put the default text back in, a simple onblur, onfocus toggle.

As the widget I added (an HTML/JavaScript widget), was at the bottom of the page the likelihood of the code running after these items had loaded was high so the chances of the code running before the search bar being loaded was low. 

However on the chance it did run, the window.onload event unlike DOMLoad events ensure that all external items have loaded. If I tried a DOMLoad event there was a small chance that the code would run before the items it was affecting had loaded.

Therefore to test that the page was showing a post with the GoFundMe on it and therefore removing a server side loaded item from the page I used Regular Expressions

I looked at all the places the pages loaded this post and they were the homepage, the homepage for mobile or non mobile sites, with or without the Google # link for the search bar tab being in the URL, plus certain labels that only this post appeared on.

The Regular Expression I came up with that worked using my test page I made in HTML & JS that worked was this.

This expression uses the document.location.href value to run on and is anchored from the start to end of input with ^ and $.

It always contains the main domain in the URL and I have made the ending / optional with a ? e.g escaped with a forward slash first and putting a question mark after it e.g \/?.

The next part is whether or not a querystring ? exists which is why there is an escaped question mark first to denote a real question mark, followed by another one to say it "May or may not be there". 

The next part is a check to see if there has been a toggle used on the site to change from a mobile view to a website view. They use a simple querystring value for this m=0 (website), m=1 (mobile), so I have (m=\d) which denotes m=(any digit), just incase they change or append digits.

This is the 1st part of an OR section wrapped in a group. I could have put ?: at the start of the group to say "do not store", but as I am not back referencing or using the group in replacements then I didn't bother.

The whole OR is broken down into this logic.

The logic contained within the OR (expression|expression|expression) is the equivalent to this long explanation:

(\??[optional back slash](m=\d)?[optional mobile/website URL toggle to any digit](\d+)[optional anchor that denotes Google has loaded up its search bar code as if you are quick you can catch a document.location.href value without this on it]. Then a wrap around the main post called GoFundMe with \S+? which makes it look for non space characters 1 or more times before or after the words GoFundMe which appear on the posts page in the middle of the URL e.g and then finally a look for the 3 labels that are used to find the page and appear in the URL like so (as you can see when I copied the URL the page hadn't loaded in the Google Search Bar which is why there is no in the URL) so this is why I have made that part optional as well.)

So that regular expression handles the following URL's whether or not the Google code has loaded or there is code to force it show a mobile site or website version of the blog. or

I made a quick function call to querySelector so that it is short, I always used G when it was document.getElementById(val), so I used it again as to me it means GET G(x) = GetMe(x) a reference to the small framework I made which is on the blog somewhere e.g

G = function(v){return document.querySelector(v)};

Then I can reference objects by class, selector or ID easily with a one letter function e.g

var el=G(".gsc-search-button > input");

The final code I inserted into the JavaScript/HTML widget was this.

<script type="text/javascript">
G = function(v){return document.querySelector(v)};
window.addEventListener("load", function() 
		G("#gsc-i-id1").value = "Search for similar articles here";
			G("#gsc-i-id1").value = "Search for similar articles here";
// As these elements are loaded server side they will exist when any JavaScript gets to run so no need to put inside the Window.Onload event
var exp = new RegExp(/^https:\/\/\/?(\??(m=\d+)?(\d+)?|\S+?GoFundMe\S+?|\S+?\/(?:Donate|Donations|GoFundMe)\S+?)?$/,"gi");
// search button never appears wide enough to say "Search" so expand
var el=G(".gsc-search-button > input"); // Use selector to get child input of class
gsc-search-button which is used numerous times
if(el){"60px";} // just a safety test to ensure it's there - which it should be

It works and I am happy to see no double GoFundMe images on the page and the focus/blur code working fine.

It is just an example of using JavaScript to modify the DOM when you cannot use Server Side code to initially output it.

© 2021 By Strictly-Software