Skip to main content

Posts

Showing posts with the label how to

How to Add CSS code To Blogger using Template Designer

If you encounter difficulties when adding CSS codes to a Blogger template, here's a convenient and quick alternative method to incorporate CSS (Cascading Style Sheets) that simplifies blog customization. Some readers have expressed their struggle in locating the  ]]></b:skin>  tag while attempting to add CSS codes for installing specific features in Blogger. To address this issue, I have created a brief tutorial to present an alternative way of adding CSS without accessing the Blogger HTML editor. Adding CSS via the Blogger Template Designer Step 1. Log in to your Blogger account and select the desired blog for customization. Step 2. From the Blogger dashboard, choose " Template " and click on the " Customize " button. Step 3. Click on the " Advanced " tab. Step 4. Inside the " Add CSS " tab, locate the designated field on the right side (you may need to scroll down the options list) and insert your CSS code. Feel free to apply ...

How to Use Cookies in Javascript

Whenever we visit a website, cookies may be stored to retain information about our browsing activities. For instance, when we log in to a webpage using a username and password, a cookie is typically generated on our computer after successful authentication. One notable example is Google's popular website. This search engine allows users to specify the number of search results they prefer to see on each page. Through the use of a cookie, this preference remains unchanged on individual computers, even after restarting multiple sessions. However, it is advisable to occasionally delete cookies because although some expire and are automatically deleted after a certain period, others may persist indefinitely. How to Use Cookies in Javascript Cookies can be manipulated with JavaScript, often employed in various tricks for bloggers. Unfortunately, cookies have gained a negative reputation due to potential misuse. Some websites may store and analyze users' browsing patterns without thei...

What is the difference between padding and margins?

For those interested in HTML and CSS, let's explore the distinction between the margin and padding CSS properties. These properties allow us to create empty space between HTML elements, preventing them from appearing too close together. While both margin and padding serve similar purposes, each has its own unique characteristics. [ <h2>Padding</h2> ] The padding property determines the inner margins of an element. It defines the distance between the content of an element and its border. In other words, it controls the space inside the element. [ <h2>Margin</h2> ] On the other hand, the margin property is applied to the outside of an element. It affects the spacing between the element and other surrounding elements. To better understand the concept, take a look at the following illustration: As you can see, you have the option to define borders for each side of your HTML elements. Similarly, you can do the same with the margin and padding properties...

How to Create a Sitemap or Table of Contents in Blogger

[One of the limitations of a blog is that it lacks an index or sitemap, which can make it challenging for readers to locate specific content. Although the blog archive and labels provide information about published posts, they are not displayed on a single page, making it difficult to browse through them easily. Fortunately, there is a solution: you can utilize a gadget to add a table of contents or sitemap on Blogger, showcasing an index of all published posts categorized by topic. Additionally, it will highlight the latest posts with a "New!" label. How To Add a Sitemap with a List of Posts to Blogger To implement this feature on your blog, follow the steps below: Step 1. Login to your Blogger Dashboard and select your blog. Step 2. Go to Pages > click the New Page button and select Blank page Step 3 .  Click on the HTML tab and paste the following code inside the empty box: <style> p.labels a{color: #242424 ; text-transform: uppercase;font-size: 15px ;} a.post...

Understanding the Page Elements of a Blogger Layout

When following a tutorial to add a gadget/widget or make some customizations in a Blogger blog, some new users may not know the meaning of certain terms, and sometimes, it may be harder to locate them. As for the gadgets, usually it is required to access the blog's layout in order to add or arrange any of the page elements. For a better understanding, here are some basic explanations about the Page Elements located in the Layout section of a Blogger dashboard . What are the Page Elements? Page Elements is, basically, the body of our blog. To access the Page Elements, we need to click on the " Layout " option in the Blogger dashboard . Understanding the Page Elements sections The Blogger Layout is made of " sections and elements ". The sections mark certain areas of a page . Every section is represented by the tag <b:section> and has an unique "ID" that names its element which is followed by a " class " tag. Each section has some attr...

How to Add Emoticons/Smileys in Blogger Comments

Emoticons/Smileys are a great way of making discussions more interesting and fun, so it's a pity that Blogger don't support them. This tutorial will show you some simple steps on how to add some very cute emoticons called Kolobok to your Blogger/Blogspot comments, so that you and your blog visitors will be able to have an enjoyable time together. Now available for threaded commenting system too! DEMO How To Add Kolobok Smileys In Blogger Comments Step 1. Go to Dashboard - Template - Edit HTML - Proceed  Step 2. Expand Widget Template (make a backup) Step 3. Search (CTRL + F) for this tag: </body> Step 4. Copy and paste just above it, this code: For previous commenting system (comments without reply option) <!--kolobok-smileys--> <script src='http://helplogger.googlecode.com/svn/trunk/[helplogger.blogspot.com]smileys.js' type='text/javascript'/><noscript><a href='http://helplogger.blogspot.com/2012/04/how-to-add-emoticonssmileys-...