The Link Medic - Free Blogging Resources

Showing posts with label CSS Code Vault. 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

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!