Skip to main content

Posts

Showing posts with the label CSS in Blogger

How to Add Borders to a Blogger Footer Blogspot

In this Blogger tutorial I expand on my previous article about how to add a 3-4 column footer to Blogger by showing you how add border styling to the new footer. You will learn how to add a border around all of your footer columns or around only part of the footer columns. You will also learn how to add different border styles and border colors to customize your 3-4 column footer. If you have just landed here and need instructions on how to add a 3 or 4 column footer to your Blogger blog then please refer to how to add a 3 or 4 column footer to a Blogger template (Blogspot template) This is a walkthrough designed to assist bloggers with no experience of CSS styling who want to enhance their Blogger template with borders and other CSS styling. By following these examples you will gain the knowledge you need to make many types of custom changes to the borders of your new Blogger footer. For help with changing the background of your blogger footer please see my article How to Change the...

How to Add a Table to Blogger Blogspot Post

This Blogger tutorial (Blogspot tutorial) explains how to put a table into a Blogger post. You will learn how to create tables in Blogger ranging from a simple table to a more complex table with alternating colors. We will start with a basic table and gradually add CSS styling to the table to improve the look and functionality until we have built the table pictured directly below. No knowledge of CSS and HTML is assumed so this Blogger tutorial is suitable for absolute blogging beginners. A Blogger Table Caption Table Header Table Header Table Header Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Tables are a useful way to display information particularly tabulated information. Tables are good whenever you want to align information so that it is easy to read and understand. You can add text, hyperlinks and even images to a table which makes them very useful for pr...

Add a Comments Counter Button to Blogger Blogspot

In this Blogger tutorial (Blogspot tutorial) you will learn how to add a comments counter button to Blogger (Blogspot) to show off the number of comments each of your posts has received. A comment counter button (bubble) will have the effect of encouraging visitors to comment on your Blogger blog and also help to highlight the credibility of your articles. Installing this Blogger hack to add a comment counter button only takes a few minutes. The changes needed to add the comment bubble to Blogger while not difficult do involve adding a small snippet of code to your Blogger template in two places. For this reason I strongly urge you to back up your Blogger template before attempting this blogger hack. Blogger Tutorial Difficulty - easy to medium How to Add a Comments Counter Bubble to Blogger A Step-by-Step Walkthrough The following steps will insert a fully clickable comments counter button on the same line as the post title in Blogger. The comments counter is right aligned by default...

How to Remove or Change the Blog Title Border in Blogger (Blogspot) - Minima Template

In this Blogger tutorial I discuss how to change the blog title border color or remove the border in a Blogger template (Blogspot template) by changing either the CSS styling of the border manually or by using the Blogger Template Designer feature. Lots of bloggers have updated their Blogger template to the new default series of Blogger templates for 2010. There are however many of you who are still using the default Minima template from 2006 (and there are lots of good reasons to do so) so this tutorial is for you and anyone else who is using a custom Blogger template based on Minima. You will learn how to change the border styling around the blog title to suit your individual requirements. You can either change the border color or remove the border altogether. If you want to remove the border around images in Blogger posts (Blogspot posts) then please refer to my Blogger tutorial How to Add, Change or Remove the Border Image in Blogger Posts Remove or Change the Blog Title Border in...

How to Highlight Author Comments in Blogger Posts

In this Blogger tutorial I will show you how to highlight the author comments section of your Blogger template (Blogspot template) using CSS styling. Benefits of Adding CSS Styling to Author Comments If you are using a default Blogger template chances are it is difficult to differentiate between comments made by visitors and comments made by you, the blog author. If you only have a few comments per post that may not be enough of an issue for you. If however, you have some posts with lots of comments you may need to make your remarks stand out from those of your visitors. We can do that by adding CSS styling to highlight your author comments. What Will I Learn in This Tutorial? In this Blogger tutorial you will learn how to easily add some highlighting to your comments so that they will never get lost in the crowd again. This requires a small amount of tweaking to your Blogger template which is not difficult to do if care is taken. The image below shows one example of what can be achie...

Add CSS Styling to Blockquotes in a Blogger Template

Today I continue the series of Blogger tutorials (Blogspot tutorials) by showing you how to apply CSS styling to blockquotes in a Blogger template. Other articles I have already published on the subject of CSS styling include: How to Add, Delete or Remove Blogger Image Borders How to Align and Justify Posts in Blogger How to Add a Divider Between Blogger Posts How to Add or Change a Background Image in a Blogger Template . Today's tutorial on Blogger blockquotes will be useful if you are using a default Blogger template or a third party custom template. It will show you how to change your blockquote area in the following ways: Add a background color to the blockquote Add a border around the background of the blockquote Add or change the color of the blockquote text Add or change padding around the text Add or change the margin Add a background image Blogger beginners you can relax as I have written this Blogger tutorial with you in mind. I will walk you through the steps of styl...

Add or Change Background Image of a Blogger Template

In today's Blogger tutorial (Blogspot tutorial) I will show you how to both add a background image to a Blogger template if you don't have one already or change the existing background of your Blogger template. I have chosen to write this article not because there aren't any how to articles already on the net but because they assume quite a bit of knowledge. I have taken a different tack with this post in that I assume you are an absolute beginner with no knowledge of Blogger templates. For this reason I have provided some sample backgrounds for you to play around with. By just cutting and pasting these images you can see first hand how dramatically adding a different background to your Blogger template can change it. You will see that replacing your background image with these images isn't that difficult and hopefully it will give the confidence to branch out further and change the background of your Blogger template to suit your own needs. All that is needed is to ...

Add a Post Divider Between Blogger Posts

In today's Blogger tutorial I show you how to enhance your Blogger blog (Blogspot blog) by adding a post divider to your Blogger template. Used effectively post dividers can really jazz up your blog and will lend it that individual feel which most of us are hoping to create. This tweak is very easy and well within the capabilities of any Blogspot blogger. Only a few simple changes to your Blogger template are required and these are in the CSS styling section. By way of example I will use a divider that I downloaded from the internet free by searching for free divider graphics . Here are some sample dividers you can use to get started: URL address: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg77uNK_cfFmJp9Zz3IzuROQjenjOhaWAKETv7dl6jRdmkdvx5J20F3WPXrzn5lAX_P-oHusS45kWghGpU3GdS84EthhNcI7lkPHej7wa6fLyMw_Ir6qLqOZYc62FAmYqBVHbsiw83l-F0/s400/ribbon.gif URL address: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI9uBBT9LcRUT7k0awmN3iihQDjL7RS0f8ZWrlBtSBerIVuCC...

How to Align and Justify Blogger Posts

This is the second article in a series about CSS styling tricks and tips for Blogger written with Blogger beginners and novices in mind but suitable for all bloggers who want to customize their existing Blogger template. While the first article dealt with how to add or remove image borders in Blogger today I show you how to align and justify Blogger posts. Skill Level: Beginner Rating: Easy Time: 1 Minute Many of the questions that my readers ask me are about how to customize various features of their Blogger template (Blogspot template). Over the coming weeks I will be focusing on some simple CSS styling tricks and tips to help you get more out of your Blogger template. Much can be achieved by learning a little about CSS. So before you rush off to download a custom Blogger template consider customizing your existing Blogger template. This tutorial is part of a series of articles that I will publishing over the coming weeks about customizing your Blogger template using CSS styl...