Instructions

Blogger Theme Panel 1	Blogger Theme Panel 2	Blogger Layout Panel
The Browser Inspector	custom CSS Area	The HTML Editor

Click on the screenshots above that show the two important areas (theme and layout panels), and your browser's built in code inspector (yes, they all have them, even though the name may be slightly different) to open them in a large size. I will occasionally refer you to these as we go further into what to pay attention to, how to fix bugs, and so on; since there will be some issues that you will have to deal with as you install a 3rd party responsive theme into blogger. There is a post on one of my other web design blogs about using the browser inspector and it may also be good to take a look at that since this is something that you may need to use as you get your newly installed theme ready for visitors:

https://easypeasydesign.blogspot.com/2022/06/css-finding-css-handles-of-items-that.html

This is going to be a long page since there are a lot of bits and pieces that I want to tell you about. The indented list below gives you a summary of the different sections:

        Issue 1: Cleaning up the Layout Panel
        Issue 2: Fixing the post count on your blog pager

        Issue 3: Menus

        Issue 4: The Sidebar Widgets

        Issue 5: The Text Widget

        Issue 6: Custom Widgets    

Issue 1: Cleaning up the Layout panel: On the 3rd party templates there is a bug which I have not been able to figure out why it is happening. It is extremely annoying and time consuming to fix it and yet in order to get the theme to work correctly it has to be done almost every time that you switch from one theme to another: 

When you restore the template quite a few widgets repeat themselves. Sometimes this happens on the header and you will suddenly get 2 headers or some other widget appearing at the top of your blog where it is not supposed to be at all. but outside of the duplicates you also have a lot of empty HTML widgets, as well as many other things that are not supposed to be there at all, including advertisements and "follow" widgets that lead back to the original template creator. And, this bug obviously seems to have a memory since one of the widgets that very often pops up is the old old "Navbar" widget which Blogger took out of commission maybe a decade ago. And yet, even this silly old NavBar thing appears very often.

The only way to fix this is by doing a manual cleanup: Go to the layout panel, look for duplicates (especially those that appear on the header) and all sorts of other things that seem to be there for no good reason at all and remove them manually. However, make sure you are not deleting the correct one (duplicate headers especially - one is correct, the other isn't). So click on the eye on the bottom right and take a preview before you save the new layout.

Issue 2: Fixing the post count issue: First off, I am going to have to say that it is a very good idea to somewhat familiarize yourself with the HTML editor of Blogger since some of what you will need to fix will have to be done there. As is the case with the next topic at hand which is about the number of posts that appear on your first page and the continue pages of your blog feed. These need to have the correct post count, otherwise they will repeat themselves on the follow pages. And this is a problem has to be resolved inside the HTML editor: On the newer 3rd party templates there is an issue with correctly displaying posts. The follow pages will display some of the last posts on your entry page all over again.

To fix this, find either of the codes below, or something that looks very similar to this, since there can be small variations on different blogs themes:

<script type='text/javascript'>

var postperpage=5;

var numshowpage=5;

var upPageWord =&#39;Prev&#39;;

var downPageWord =&#39;Next&#39;;

var urlactivepage=location.href;

var home_page=&quot;/&quot;;

</script>

var pageCount=5;

var displayPageNum=5;

var upPageWord ="<i class='fa fa-angle-left'></i>";

var downPageWord ="<i class='fa fa-angle-right'></i>";

<script type='text/javascript'>

          var postperpage=5;

         </script>

<script type='text/javascript'>

var numshowpage=5;

var upPageWord =&#39;&lt;i class=&quot;fa fa-angle-left&quot;&gt;&lt;/i&gt; Prev&#39;;

var downPageWord =&#39;Next &lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt;&#39;;

var urlactivepage=location.href;

var home_page=&quot;/&quot;;

</script>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<script type='text/javascript'>

var numPages=5;

These are the ones that I am seeing most often, but sometimes the code will look very different to this. So, if you have difficulty finding it just search for "postperpage" or "pageCount" and then change that and "numshowpage" or "displayPageNum" to your number - search without the quotation marks, I only put them to make things a bit more obvious. Change the number 5 that I have here to whatever you want to show, but the maximum appears to be 18. 

However, you are not done yet: Now go to the Layout tab and change the page numbers on your blog widget and the posts per page widget that a lot of 3rd party templates already have. And finally go to Settings and make the change on blog pages there as well. And yes - you will have to do all these things, even if they seem repetitive. And, what is even worse news is that every time you change a theme you will have to do all of it all over. 

Issue 3: Menus

Outside of exceptions where I have used the re-designed them on one of my own blogs (in which case you will see my links) you will find the menu exactly as the original theme creator made it. So, just like I had to when I used it for my own stuff, all the links and the link names will have to be changed by you. In the screenshot above I am showing you the 2 types of menu editing that you may encounter. The one on the left (editing the menu from the layout tab) is far more common. This is what you will almost always get. However, there can be the rare occasion where you cannot find the widget on the layout tab and you need to go and find it inside the HTML editor which is what I am showing you in the image on the right. 

An easy way of finding this menu inside the HTML editor is to write one of the link names inside the menu in the search box of the HTML editor and just press enter to get to it. In the example that I have here this would be the word documentation since this is not something you are very likely to find anywhere else inside the code. And sure enough when I type it into the search box it takes me straight there, where I am now stuck with getting all this in order with my own info, which is now a matter of very carefully editing the links and link names. And this can be tricky work that needs quite a bit of attention since the original theme creator may have arranged things or listed them in a somewhat disorderly manner. My advise is to make frequent backups as you go, then go to the blog, test the link and continue only after you know that all is as it should be. 

One very important thing is how you format submenus: In both the widget that you open from the layout panels as well as the menu inside the code you will see underscores (_). A single underscore means that this is a first child submenu item and a double underscore means that it is the child of the first child. These underscores need to stay. So, do not delete them. They will not appear on your published menu, they are only there for the code to know what to do. And another thing that needs attention is to make sure that children are listed right under the parent item. Inside the widget box you do this by moving the item up or down with the arrows. Inside the code it can become a bit more complicated since you may need to cut and paste - in which case, again make a backup, go to the published blog and make sure that everything is in place before you continue.

Item 4: The Sidebar Widgets: These may need to be aligned to the posts on the homepage from the top. Sometimes you will see that the things on the sidebar stand higher or lower, depending on which widget you have at the very top of your sidebar since they may have different top margins. 

In most 3rd party templates the customize panel that you reach by directly clicking on the big orange customize button on the theme page will have a CSS entry field that you will find under 'Advanced':. Find out what your top widget ID is by using the browser inspector (please look at the screenshots and go to the link at the start of the page to learn how to do this. Your widget ID will consist of a name and a number written together - so it will be something like LinkListXX or HTMLXX or Text1 or BlogArchive1. Once you find it replace WidgetID in the code below with yours and then paste this inside the Custom CSS box under the Advanced tab under Customize:

#WidgetID {

margin-top: XXpx;

}

You will see your top sidebar widget move up or down depending on what the XX value is. Tweak the number until everything looks perfect. And then repeat the same procedure for other widgets that may be spaced too close together or too far apart. 

Moving the entire Sidebar up or down: You may want to do this instead of tweaking individual widgets. In that case you will need to find out what your sidebar is called. This will mostly be #sidebar-wrapper or .sidebar-wrapper or just #sidebar or .sidebar. (Note how it can be just a dot or a hashtag). However, it could be called something else as well and the way to find out is to again use the browser inspector, click on an empty area just a above one of the sidebar widgets and then move up inside the hierarchy until you get to the top of the sidebar section. And then you will need to go down to Styles and see what it is. And then instead of using the widget ID you do the same thing with the same code above by placing the sidebar ID where the widget ID is. 

And what if there is no custom CSS entry box under Advanced? No sweat, then you place the same exact code inside the HTML editor, directly above the code line ]]></b:skin> and then you take a preview - which is a hassle of course, not as convenient as seeing the thing move as you are doing it, but essentially it is exactly the same thing. 

Item 5: The Text Widget: I find that it is much easier to format the text inside the text widget externally, and not inside the big HTML editor. Here is the code:

<div style="font-family: XXXX; font-size: XXpx; font-weight: XXX; line-height: Xem; text-align: XXXX; text-transform: XXXXXX;"><span style="color: #XXXXXX;">Your text goes here</span></div>

Custom Widgets:

On some of the themes I have placed custom widgets such as random posts, popular posts or recent posts. These will be HTML widgets, not the normal blogger widgets. In order to get these to work with your blog you will need to change the URL that the widget code links to inside the HTML widget. In most cases the URL you will need to look for in order to change it will be https://bizarregeometries6.blogspot.com, however it may also be something else depending on the test blog that I used to put the re-design together. Once you have replaced this with the URL of your own blog everything should connect perfectly.