The Link Medic - Free Blogging Resources

Showing posts with label CSS Tutorials. Show all posts

How To Change Linkwithin Widget's Text and Style

If your using Blogger you no doubt use Linkwithin Related Posts Widget for showing similar posts with a thumbnail.

It's incredibly easy to install and it actually works just as advertised one of the best Blogger Widgets out there hands down.

I recommend you start using it to decrease your bounce-rate immediatly.

I was browsing one of my posts after I published it to ensure everything looked good and noticed how my Linkwithin "You might also like:" text looked rather boring and didn't match my sites style.

Being the blog template tweaker I am I quickly set out to change it to match my other headers. It was a rather easy fix, and here's what I did.

Linkwithin Before

Blah!

...and After

Pow!

Here's how it's done

Head on over to your Blogger Dashboard

Click on Design > Edit HTML - Download your template for safe measure.

Add this class:

.linkwithin_text {
color:#555555;
font-weight:bolder;
font:bold 16px "Droid Sans", Arial, Helvetica, sans-serif;
text-decoration:none;
margin:0 0 10px;
padding:15px 0 0;
text-shadow: #bbbbbb 1px 1px 1px;
}

If you're unsure where to add the CSS code above find where the other classes are and you can add it anywhere by them. You should be able to recognize the other CSS by it's syntax.

For example you can add it by .menu or h2

For a better understanding check out: Learn About Class and ID Selectors | CSS For Bloggers: Part 2.

Preview & make sure everything is okay. If so click Save Template

Now it should look like mine, but that's probably not what you want. To learn how to style text check out Create Attractive CSS Text Effects | CSS For Bloggers: Part 5

How To Change What It Says

By default the widget says "You might also like:" and you just may not enjoy being like everyone else!

So let's change it to say whatever you would like.

Go back to your template HTML where you added the code above and press CTRL+F within the box to quickly find the <body> tag.

Directly after that place this code:

Preview & make sure everything is okay. If so click Save Template You're done!

Free Rounded Box Bubbles

Today we've got some rounded boxes, they're great for little off to the side notes, speech bubbles, tabs and buttons.

Check out CSS For Bloggers on how to impliment the bubble properly.

You can change the colors as you wish to match your blog just change the background and border color # codes.

Consult How to Align Images in Blog Posts Using Float | CSS For Bloggers: Part 4. to learn how to float these boxes to the left or the right and have text wrap around them, it's easier than you think!

How to Create Simple Box Content Using CSS | CSS For Bloggers: Part 3 for how to edit the size of the bubble and other parameters.

Rounded Bubble

roundedbubble. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

#roundedbubble {
width: 200px;
margin: 10px 10px 10px 112px;
padding: 30px 15px 10px 15px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
border-top: 1px solid #fff;
background-color: #F8E147;
word-wrap: break-word;
}

Note Bubble

Notebubble. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

#notebubble {
width: 200px;
margin: 10px 10px 10px 112px;
padding: 10px 15px 10px 15px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
border-top: 1px solid #fff;
background-color: #A6DADC;
word-wrap: break-word;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm_c0hofzFmNNfXKn81BSalBlmEc8jIz0r7yAzpWilijgT5-XfCWGiVZtJCfx2wDpVmm5gWwdiyFCW-rDn3qVi-gpIjxlB9jtY6N08J05-cSFf4fSuNFwR4mZSQsskwkh8Phr9M53R9xA/');
background-repeat:no-repeat; }

Tip Bubble

Tipbubble. Make sandwiches for the rest of the week on a Sunday, so you're prepared you turkey.

#tipbubble {
width: 200px;
margin: 10px 10px 10px 112px;
padding: 10px 15px 10px 15px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
border-top: 1px solid #fff;
background-color: #83FA92;
word-wrap: break-word;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiythlIAdjWzpIeqKsPm-RyLk5bepGF-_ieeS9P4f8zGndhcTQg8KKqQHyDdzeDIwzLTduzMRxsJIMTOqgcF7JOe5VH2GwcrKmMrbNrUkScb_yTJBQbcVQ8eWEakEs9u_YGR2nrMIEjp6Q/');
background-repeat:no-repeat; }

How to add to CSS style basics

To add to Blogger go to Dashboard > Design > Template Designer > Advanced > Add CSS and insert code.

To add to WordPress go to Appearance > Editor > Styles > custom.css > Add CSS code and update file.

How to add to post

Want more?

Open the CSS Code Vault

RZZ59PFKVSUZ

Free CSS Quote Containers

Here's a mini grab bag of CSS containers for the purpose of adding quotes that you can add to your blog reletivly easily.

It's just a small way of spicing up the look of your posts.

Check out CSS For Bloggers on how to impliment these boxes properly.

You can change the colors as you wish to match your blog just change the background and border color # codes.

Quote Box 1

quotebox1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris.

#quotebox1
{padding: 5px 5px 5px 50px;
margin: 8px;
background-color: #eeeeee;
border: 2px solid #dddddd;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmjy2g0WbNY9iV_WktfBNjiOtbfqM7lCF5OyIby8T4sT5efXDqMv-BJLe3U08vaCM0Z61KX9TnuDdYFK7PCGCopI22lFLQhqLaWaNNxco1hQpSDVnLdFiUY6vJjlbvCysbKVasflDNBgM/');
background-repeat:no-repeat;}

Quote Box 2

quotebox2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris.

#quotebox2
{padding: 5px 5px 5px 60px;
margin: 8px;
background-color: #eeeeee;
border: 2px solid #dddddd;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihtB4oAhStdHNTBqT_-9k877BRyjtZInawCDas1hRHz2Zh6ekccJzazES_tIRS-QKfAY2An8UK0uq8ZNxkVQjhXmTnJAE7z9dFA8pPP5Sv0dHkxOGd5ZQ0VeIKLFMmK24BZ6MW2s5_l1Q/');
background-repeat:no-repeat;}

How to add to CSS style basics

To add to Blogger go to Dashboard > Design > Template Designer > Advanced > Add CSS and insert code.

To add to WordPress go to Appearance > Editor > Styles > custom.css > Add CSS code and update file.

How to add to post

Want more?

Open the CSS Code Vault

How to Identify CSS Elements On Any Template Easily | CSS For Bloggers: Part 7

In Part 6, Learn the Anatomy of a Blogger Template I discussed a little about the basics of a standard Blogger template's CSS setup.

It was meant as a visual representation of how a CSS layout looks for beginners and a bit of a quick Thesis cheatsheet.

But what if your Blogger template is radically different or you're on WordPress or any other blog platform?

Today I'm going to show you how to identify the CSS elements on any template using a very handy browser add-on called CSS Viewer

A Simple CSS Property Viewer

I was debating putting this post as a Chrome Extension Must Have but it was originally a FireFox addon. Not only that, it ties in to my last CSS For Blogger's post as well.

CSS Viewer is a simple to use CSS property viewer that allows you to quickly find the name of the element you want to tweak.

If you didn't design the template then this can sometimes be a daunting task of viewing the source code and getting creative.

I can give one little tip to do this manually, if you're trying to find the name of the element on the page find some text by it or a image file name. From there when you're viewing the source code just search for that text and it will fall into that box or class.

But with CSS Viewer all you have to do is hover your mouse over the template itself to attain the property names of what you're looking for in no time.

From there it will show you all of it's parameters, it's also good for "stealing" the CSS Style if you wish.

So if you see a font you particularly like while on a website just use the add-on and hover over to see what font it is, it's just that easy.

CSSViewer :: Add-ons for Firefox
CSSViewer - Google Chrome extension gallery

CSS For Bloggers

Get Full Updates
Subscribe to our RSS Feed with full posts via Feedburner

Learn The Anatomy Of A Blogger Template | CSS For Bloggers: Part 6

For me one of the enjoyable aspects of blogging is tweaking your blog's design to get it just the way you want.

If you're like me you will want to change the appearance of every single facet of your blog's template.

Today I'm going to be showing you how to identify the CSS elements of your theme.

Once you figure out the CSS selector of the section you want to manipulate you can then later edit the CSS for it. Half the trouble is figuring out the names of the different elements in order to do that in the first place.

Think of this is a Blogger CSS Element Cheat Sheet.

Create Attractive CSS Text Effects | CSS For Bloggers: Part 5

learn to create attractive css text effects for your blog

Why do we use CSS for our blog? To make things look cool of course. One way to spruce up your posts is to make your blog post tile and header text stand out a bit. This will make your blog appear to have the finishing touches and fit your particular style. Afterall, that's what CSS is all about.

Today we're going to be checking out some really great effects we can apply to text anywhere using either a custom class selector or editing our header tags directly on the style sheet to make broad changes to all our posts.

How to Align Images in Blog Posts Using Float | CSS For Bloggers: Part 4.

One of the most simple and effective ways to add some flavor to your blog posts is adding images. Almost everyone uses at least one image in each blog post to create some visual interest. It also provides a nice thumbnail for when it gets shared on Facebook or a related posts section.

So how do we easily add these images and align them so that they can quickly be placed either on the right or left and wrap around your text? We can do this with CSS of course! As you can see my lovely header image to the left fits in nice and snug with this text wrapping around it. In fact this is so easy you'll be able to start using it immediately and want to fill your posts up with all kinds of nice stock photos.

How to Create Simple Box Content Using CSS | CSS For Bloggers: Part 3

In our last lesson we talked about ID Selectors and how you can use them to make unique blocks of content. These "blocks" have several applications. Maybe you want to create a welcome box that starts at the beginning of your posts to welcome new visitors to your blog?

You may want to create a box at the end of your posts to put more information on how users can subscribe to your RSS feed. In fact the possibilities are endless and with CSS. You've never had this much control on adding elements like this to your blog, that is, if you know how.

Having a few custom-made boxes to fill content into on hand can be very useful and I use them heavily on my blog. Creating one is simpler than you might think once you know the basics.

Learn About Class and ID Selectors | CSS For Bloggers: Part 2.

CSS For Bloggers: How to Style Your Text and Links

Welcome back bloggers, in our last lesson: CSS For Bloggers: How CSS Can Help Improve Your Blog Part 1. We discussed why you should learn CSS and how you can use it to improve your blog. Also, the SEO benefits of knowing CSS and the basics of implementing your styles through internal style sheets. At the end I showed you guys how to style paragraph text using <p>.

If you didn't understand a word in that intro paragraph you might want to go check out Part 1. We are going to pick up where we left off styling the paragraphs.

CSS For Bloggers: How CSS Can Help Improve Your Blog Part 1.

If you're reading this you're obviously curious about CSS pretaining to blogging. With all the pre-made templates out there ready to be downloaded and installed you may say to yourself, "How can knowing CSS help make my blog better?"

In this series, CSS For Bloggers, I will not only show you why you should learn a little bit of CSS but also show you how to use it.

As a web designer myself for many years I would have never survived without my knowledge of HTML. It honestly wasn't until I got myself into blogging that I felt it was time to learn CSS. It has become a staple of my everyday blogging and designing.

Free CSS Design Element: 300x34 Title Box (Easy to add to your current template)

This will show you how to add a nice looking "title box" to your blog using a simple CSS snippet and a simple HTML code. I created it for my site and I thought I would share it with you as it has a multitude of uses. Change the color to match your theme and viola! You can use it to highlight certain links or to caption images and various other things.

300x34 Title Box

Here's what it looks like:

Enter Your Text Here

Example Link - A Demo Link of Demonstration
Example Link - A Demo Link of Demonstration
Example Link - A Demo Link of Demonstration
Example Link - A Demo Link of Demonstration

Here is the CSS Snippet:

#titlebox {
width: 300px;
height: 34px;
letter-spacing: 1px;
margin-bottom: -24px;
padding: 2px 0px 0px 9px;
background-repeat: no-repeat;
background-image:url('http://YOURWEBSITE.com/titlebox.png');
}

Here's how to use it on your site:

Step #1: Choose and download the color you want or download the PSD file to change the color.

Download:

Free CSS Design Elements for your Blog Template

Download the original PSD file to change the color to match your own sites color scheme.

Step #2: Upload your selected title box image to your website or file hosting service.

Step #3: Copy the code snippet and add it to your style sheet.

To add to Blogger go to Dashboard > Design > Template Designer > Advanced > Add CSS and insert code.

Step #4: Replace "http://YOURWEBSITE.com/titlebar.png" with your Image URL that you uploaded and save/apply the new CSS snippet.

Step #5: Now the fun part here's how to do this on your page anywhere you want anytime.

Use this HTML to insert it where ever you want on your page:

<div id="titlebox">Type Whatever You Want</div>

Using that example it should look like this:

Type Whatever You Want

You may need to tweak it a bit so here's some notes on how to do that.

CSS NOTES:

Remember it's only 300 pixels wide so you're limited to how much text you can fit in there. Removing the "letter-spacing: 1px;" line will help.
Edit the "margin" line to fix the space between the bottom of the title box to whatever's below it. It may need shrunken up depending on your taste.
Edit the padding values to adjust where the text sits inside the box. Depending on the font you for sure will have to change this.
My test blog for example uses Veranda for the font so I had to add 2 more pixels padding for the top to make it look right so 4 instead of 2. Just play around with it, and if you don't know much about CSS it's a good way to learn by experimenting.

Let me know of sucesses, failures, opinions comment below!

How To Change Linkwithin Widget's Text and Style

Linkwithin Before

...and After

Here's how it's done

How To Change What It Says

Free Rounded Box Bubbles

Rounded Bubble

Note Bubble

Tip Bubble

How to add to CSS style basics

How to add to post

Want more?

Free CSS Quote Containers

Quote Box 1

Quote Box 2

How to add to CSS style basics

How to add to post

Want more?

How to Identify CSS Elements On Any Template Easily | CSS For Bloggers: Part 7

A Simple CSS Property Viewer

Learn The Anatomy Of A Blogger Template | CSS For Bloggers: Part 6

Create Attractive CSS Text Effects | CSS For Bloggers: Part 5

How to Align Images in Blog Posts Using Float | CSS For Bloggers: Part 4.

How to Create Simple Box Content Using CSS | CSS For Bloggers: Part 3

Learn About Class and ID Selectors | CSS For Bloggers: Part 2.

CSS For Bloggers: How CSS Can Help Improve Your Blog Part 1.

Free CSS Design Element: 300x34 Title Box (Easy to add to your current template)

Comments

Labels

About Me

Blog Archive

Badges