Dynamic Blog Sidebar Usage and Mobile UX Optimization Strategy (Including CLS Prevention Code)
This guide covers the setting of Dynamic Sticky Sidebars for desktop to increase blog revenue and strategies for constant exposure in mobile environments. It provides optimized HTML and JavaScript code that improves User Experience (UX) by adding a 'View Comments' button and ensures stability by not triggering CLS (Cumulative Layout Shift), a key Core Web Vitals metric.
1. Redefining the Sidebar from the Perspective of Blog Revenue and User Experience (UX)
In a blog, the sidebar is a core area that directly impacts blog revenue by exposing information and advertisements to users. The sidebar serves to simply convey important blog information (popular posts, categories, notices) to visiting users and contributes significantly to increasing revenue by displaying advertisements such as AdSense.
Sidebar Problems in Mobile Environments
However, several structural problems occur with the sidebar when accessing via mobile. In the case of general blog skins, advertisement exposure does not occur properly, or because the sidebar is hidden in a toggle format on mobile, the information or advertisements the operator wants to expose are not effectively delivered to the user. This limits user choices and can lead to a drop in advertisement click-through rates (CTR), lowering blog revenue.
An even bigger issue is advertisement exposure for blog revenue. Many users do not recognize the toggle-type sidebar at the top of the mobile screen, making the side area virtually useless on mobile and leading to lost opportunity costs. Therefore, when considering blog revenue and sidebar utilization, the method of sidebar exposure, especially the constant exposure strategy on mobile, is very important.
Space Wastage Issues in Desktop Environments
The sidebar occupies one-third of the total area on desktop, but as the main content increases and the user scrolls down, the remaining area after the sidebar ends often remains as empty space. This results in space wastage where advertisement exposure stops during scrolling even on desktop. To solve this problem, a method to dynamically move the sidebar information must be applied.
2. Dynamic Sidebar Implementation Strategy for Increasing Blog Revenue
Dynamically Moving Sidebar Information on Desktop (Sticky/Follow Sidebar)
In a desktop environment, when side information is scrolled out of the user's view area (View Port), it is set to move back into the view area so it is always exposed. With this method, a 'Sticky' structure where the sidebar follows the user can be configured, maximizing advertisement exposure efficiency in particular.
Strategy to fill empty space by moving the view and increase advertisement exposure time
Setting Selective Exposure to Constant Exposure on Mobile (Mobile Optimization Strategy)
Using the side area in a toggle format in a mobile environment requires users to access it selectively to check it. This selective environment not only causes inconvenience to users but also reduces advertisement exposure opportunities. Furthermore, toggle-type side information often covers the main content.
Therefore, to allow users to access information easily, placing the side area fixed at the bottom of the main content and setting the side area to be always exposed upon mobile access can also increase the effect of advertisement exposure.
Preventing conflicts between selective items and main content and maximizing exposure through fixed bottom placement
This problem can be solved through the following code, which configures the side area as a dynamic side (desktop) and a fixed side (mobile). This code can be used in other skins by simply changing the id or class selectors of HTML elements according to the Tistory skin.
3. Dynamic Side Area Fix Code for CLS Prevention
Desktop Dynamic Scroll and Mobile Bottom Fix Script
The code below dynamically changes the position of the side information on desktop according to the user's view area, and on mobile, it fixes the side area to position: static at the bottom of the main content so it does not follow the scroll. This was written based on the Blue Club skin and uses the #aside and #container selectors.
โ Script code to be applied to HTML (Apply at the top of /body)
script async
document.addEventListener('DOMContentLoaded', function() {
const aside = document.getElementById('aside');
const container = document.getElementById('container');
function updateAsidePosition() {
const isDesktop = window.matchMedia('(min-width: 769px)').matches;
const isMobile = window.matchMedia('(max-width: 768px)').matches;
if (isMobile) {
aside.style.width = '100%';
aside.style.position = 'static';
aside.style.top = 'initial';
aside.style.right = 'auto';
} else if (isDesktop) {
const asideRect = aside.getBoundingClientRect();
const asideHeight = asideRect.height;
const windowHeight = window.innerHeight;
const scrollTop = window.scrollY;
const containerRect = container.getBoundingClientRect();
const containerBottom = containerRect.bottom + scrollTop;
const asideBottom = asideRect.bottom + scrollTop;
if (asideBottom windowHeight + scrollTop) {
aside.style.position = 'absolute';
aside.style.top = `${Math.max(windowHeight - asideHeight, 0)}px`;
} else {
aside.style.position = 'sticky';
aside.style.top = '0';
}
}
}
window.addEventListener('scroll', updateAsidePosition);
window.addEventListener('resize', updateAsidePosition);
updateAsidePosition();
});
/scriptUsing CSS for Sticky and Hiding Mobile Menus
This CSS code secures basic dynamic exposure via position: sticky on desktop while hiding unnecessary sidebar menu toggle buttons on mobile. Please add it to the bottom of your CSS editor.
โ CSS code to be applied to CSS
#aside {
position: sticky !important;
top: 0; /* Fix to top during scroll */
}
@media screen and (max-width: 768px) {
/* Push sidebar below main content and release fix in mobile environment */
#aside {
position: static !important;
width: 100%; /* Set width to 100% for visibility */
}
#header .util .menu {
display: none; /* Hide mobile sidebar toggle menu button */
}
}Through this method, the side area can always be exposed to users, and the efficiency of advertisement exposure also increases. Furthermore, position: sticky is stable as it secures the space occupied by the element within the viewport in advance, thus not triggering CLS (Layout Shift).
4. Improving User Experience (UX) Through Hiding Comments and 'View Comments' Button
When the sidebar is placed at the bottom of the main content on mobile, comments can cause issues. Users experience inconvenience because they have to scroll through long and complex comment sections to reach the side information (advertisements), which lowers the probability of reaching the side information area.
Therefore, instead of making the sidebar a selective environment, creating the comment area as a selective environment is beneficial for both blog revenue and UX.
Adding View Comments Button and Code Explanation
Modify the settings to hide comments upon initial page loading and add a button so that users can view the comment content only if they choose to do so. Applying the code below to the top of /body at the bottom of the HTML will automatically generate a View Comments button.
โ Script code to be applied to HTML
script async
document.addEventListener('DOMContentLoaded', function() {
setTimeout(function() {
const buttonContainer = document.createElement('div');
buttonContainer.className = 'button-container';
const button = document.createElement('button');
button.id = 'show-comments';
button.className = 'styled-button';
button.textContent = 'View Comments';
buttonContainer.appendChild(button);
const namecardBox = document.querySelector('.tt_box_namecard');
const comments = document.querySelector('.tt-comment-cont');
if (namecardBox && comments) {
namecardBox.parentNode.insertBefore(buttonContainer, namecardBox.nextSibling);
button.addEventListener('click', function() {
if (comments) {
comments.style.display = comments.style.display === 'block' ? 'none' : 'block';
this.textContent = comments.style.display === 'block' ? 'Hide Comments' : 'View Comments';
}
});
}
}, 1000);
});
/scriptโ CSS code to be applied to CSS (Hiding comments and button styling)
/* Initial hiding of comment area */
.tt-comment-cont {
display: none;
}
/* Button container and style */
.button-container {
display: flex;
justify-content: center;
margin-top: 20px;
}
.styled-button {
position: relative;
border: 1px solid #adb5bd;
color: #292d31;
font-weight: 500;
font-size: 16px;
padding: 10px 40px 10px 45px;
background-color: #f8f9fa;
cursor: pointer;
border-radius: 5px;
transition: all 0.3s ease;
}
.styled-button:hover {
background-color: #e9ecef;
color: #212529;
border-color: #6c757d;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}Doesn't putting ads in the sidebar cause CLS (Layout Shift) issues?
When putting ads in the sidebar, you can minimize CLS by pre-fixing the size of the ad area through CSS (e.g., height: 250px;) or by using position: sticky to secure space. Using position: sticky as in the code above is stable because the space occupied by the element is maintained. It is particularly stable as it does not trigger CLS (Layout Shift), maintaining stable performance.
Is moving the sidebar to the bottom on mobile instead of hiding it more beneficial for revenue?
Yes, it is much more beneficial. If the sidebar is hidden on mobile, users must explicitly open it, so advertisement exposure opportunities almost disappear. By always placing the sidebar at the bottom of the main content, users are naturally exposed to advertisements after finishing the post, maintaining revenue generation opportunities. This is one of the core strategies for mobile optimization.
Doesn't adding a View Comments button reduce the comment rate?
Hiding comments may slightly reduce the comment rate, but this is a trade-off. By hiding the comment area, you can achieve the effect of increasing the user's main content consumption and sidebar advertisement exposure rate. Also, since it loads only when a user explicitly expresses interest by clicking View Comments, it indirectly contributes to improving page loading performance.
Can I use this code on other blog platforms (e.g., WordPress)?
The provided JavaScript code relies on the IDs of HTML elements (e.g., #aside, #container). To use it on WordPress or other platforms, you must check the theme structure of that platform and change the IDs or class selectors to the correct ones for the sidebar and main content area. The CSS code can also be used universally if only the selectors are changed.