Tutorials, Tips, and Resources

for Creating a Better Blog



CSS

10 Posts Back Home

How to Make Your Blogger Menu Float While Scrolling

The most common email I receive is from Blogger users wondering how to make their navigation menu float while the user scrolls down the page.  This can be super handy and add to your user experience since the visitor won’t have to scroll all the way back up to the top of the page to see your menu links. Method 1: Menu at Top of Content The first and easiest…


How To Create “Hidden” Pinterest Images

With Pinterest being one of the best search engine marketing tools to date, creating eye-catching Pin-able images is a must for any blogger.  When you create great Pinterest-specific graphics which include the title of the post on the actual image, the visibility of your blog post can reach new heights.  Many bloggers are already practicing this and include Pin-able images within their blog posts. But, what if you’ve created a…


How To Add a Drop Down Menu To a Blogger Blog (Without Javascript!)

Drop down menus can help organize and categorize content links. While many web developers debate whether or not they are good or bad practice, there’s no doubt that they can help clean up a design if you have a rather busy blog. If your blog contains a large amount of information and you’re interested in categorizing your links a little better, a drop down menu might be the ticket! Since…


How To Change The Blogger “Read More” Link

The “Read More” feature of Blogger is a handy little one that can help condense your posts on your homepage and increase click-throughs. A lot of bloggers utilize this feature, but sometimes the default Blogger text can blend in a little too much with your post. It’s important to make that link stand out so visitors know that they are supposed to click to continue reading the remainder of a…


How To Style The Blogger Comment Link

We already went over how to style your Blogger sidebar widget titles with background images, and since then I have received a few requests to show you how to style the comment link at the bottom of each post as well. Making your comment link appear bolder/brighter will help to separate it from that whole post footer area as sometimes it can get a little cluttered down there depending on…


How To Style Blogger Sidebar Widget Titles

Widget titles are the titles that appear above your sidebar widgets. Usually, you will simply type them into the “title” box in your widget editor and they are styled based on your chosen template. We’re going to take it a little farther today though and add a custom background image behind our widget titles for a custom effect. To do this, we’ll first need to decide what we want to…


The Ultimate HTML Cheat Sheet For Beginners

Below is a complete guide of HTML codes that you can copy and paste for use on your own blog or website. Although I like to insist on bloggers taking the time to learn how to write these codes and know what each part of them does, sometimes you need a code in a pinch! Be sure to view the other tutorials on this site for more in-depth demonstrations and…



CSS Lesson 2: DIV Positioning

Now that you’ve read through my Introduction to CSS and Lesson 1: DIV Elements, you should have a basic understanding of the way the <div> element works. In this tutorial, I’m going to teach you all about <div> positioning which will help with creating certain website elements, like a floating menu bar. Static Positioning Example: #nav {position: static;} Where #nav is your ID selector. Static positioning simply means that the…


CSS Lesson 1: DIV Elements

I get asked quite frequently how to create certain blog features… such as floating navigation buttons that stay in place as you scroll down the page.  I haven’t yet created any tutorials for this sort of thing because I really want to walk you through the basics before you go searching for a code to copy and paste into your site. Copying and pasting a code is a quick and…


Navigate