TheLinkMedic has followers.
Showing posts with label Blogger Tweaks. Show all posts
Showing posts with label Blogger Tweaks. 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:

<script>linkwithin_text='Custom Title Text:'</script>

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

How to Make Your Jump Link Stand Out in Blogger

Here's another quick little tweak to help make your Jump-link stand out a bit more while adding a bit of style. I recently decided mine needed to be more visable so I sat down to figure out how to do so. This is what I came up with and I wanted to share it with you because that's what this site is about!

What is a Jump-Link?
A jump-link is where you can break off your posts on your main page and continue reading it on the actual post's page. It's crucial to use them in order to keep the main blog page clean and fast loading.

How to change your font in Blogger without any CSS knowledge

If you have Blogger you may be wondering how can I change my font to something other then the few they offer me? I like Veranda just as much as the next guy but you might be looking for something a bit more spiffy. Luckily it's pretty simple to change your font, the hard part is more than likely finding what font you want to use.

How can I change my font for Blogger?
It's as easy as copy and pasting some CSS into the template designer. That way you can preview it and see if it works and if you like it and make any size changes if needed. Since it's a CSS override your exsisting CSS styling stays in place if you decide to remove this new code. So have no fear and do some experimenting.

Let's get started

Step #1 Goto your Blogger Dashboard (Link opens in new tab)

Step #2 Click on Design

Step #3 Click on Template Designer

Step #4 Click on Advanced > Add CSS

We're going to change your font to Lucida Console here as it's a rather browser friendly font.

Now once you're here add this code:

table, tr, td, li, div {font-family:"lucida console"; color:000000; font-size:15px;} .btext {font-family:"lucida console"; color:000000; font-size:15px;} .blacktext10 {font-family:"lucida console"; color:000000; font-size:15px;} .blacktext12 {font-family:"lucida console"; color:000000; font-size:15px;} .lightbluetext8 {font-family:"lucida console"; color:000000; font-size:15px;} .orangetext15 {font-family:"lucida console"; color:000000; font-size:15px;} .redtext {font-family:"lucida console"; color:000000; font-size:15px;} .redbtext {font-family:"lucida console"; color:000000; font-size:15px;} .text {font-family:"lucida console"; color:000000; font-size:15px;} .whitetext12 {font-family:"lucida console"; color:000000; font-size:15px;} a.navbar:active, a.navbar:visited, a.navbar:link {font-family:"lucida console"; color:000000; font-size:15px;} a.navbar:hover {font-family:"lucida console"; color:000000; font-size:15px;} a.redlink:active, a.redlink:visited, a.redlink:link {font-family:"lucida console"; color:000000; font-size:15px;} a.redlink:hover {font-family:"lucida console"; color:000000; font-size:15px;} .nametext {font-family:"lucida console"; color:000000; font-size:15px;} .title {font-family:"lucida console"; color:000000; font-size:15px;}

This code is to add Lucida Console as an example it looks like this.


How do I customise it?

To change it to whatever font you want simply replace all text that says Lucida Console with your font's name.
Since this is a CSS override your current template might make it look a bit screwy so to change the size just experiment until it looks right. It's defualt set to 15px you might have to make it larger or smaller to make it look right just add a higher or lower number than 15.

To do more CSS font size styling here are some more properties you can use.

Font Size

font-size: value;

  • xx-large
  • x-large
  • larger
  • large
  • medium
  • small
  • smaller
  • x-small
  • xx-small
  • length

What are some other cool "browser safe fonts" I can use?

Monospace
Century Gothic
Footlight mt light
Technic
Cursive

More Blogger Tricks and Tweaks

Optimize your Blogger post titles for better PR in minutes with one code

There is a ton of competition on Google for page rank and just as many ideas on how to increase it. When it comes to finding a website when searching what do you look at first? The page's title and so does Google's spiders. The title of your post is one of the key ingredients to any successful high traffic page. I'm going to show you how to fix your titles in Blogger permanently with one section of code.

The average Blogger post in Google will look like this. Beards and Burgers Blog | Top Ten Ways to Shave your Beard. As you can see the name of the blog shows up first. A better way of doing it is having the post show up first, people will be more keen to click it because it will catch their attention faster and at a glance know what it's about. So let's change it so it will read, Top Ten Ways to Shave your Beard | Beards and Burgers Blog


Step #1 Goto your Blogger Dashboard (Link opens in new tab)


Step #2 Click on Design

Blogger dashboard - Design

Step #3 Download your template so you can revert back to it if there is a problem.


Step #4 Check the Expand Widget Templates, this ensures all the code will be there, wait a few moments for it to load. If your computer is slow give it some time. Then proceed.


Step #5 Click anywhere inside the HTML box and hit CTRL+F to find:

<title><data:blog.pageTitle/></title>

Step #6 Highlight that code and replace it with:

<b:if cond='data:blog.pageType == &quot;index&quot;'> <title><data:blog.title/></title> <b:else/> <title><data:blog.pageName/> | <data:blog.title/></title> </b:if>

Step #5 Save your template and test it out.

More Blogger Tricks and Tweaks

How to add a simple HTML navigation sidebar gadget to Blogger

Adding a simple HTML Navigation menu to your sidebar is one of the best ways to improve your overall Blogger site design. When visitors come to your site they need an easy to find navigation menu of some kind. Blogger by default uses Tabs, but this is only for listing your pages. What about your posts and other link you wish to add?


Here's how it will it will look:

How to add a HTML navigation gadget to your blogspot blogger blog

Heres how to do it:

1. Goto your Blogger Dashboard (Link opens in new tab)

2. Click on Design
Blogger dashboard - Design

3. Click on Add Gadget where you want to place your side navigation menu (vertically)
Blogger dashboard - Add gadget

4. Click the + for a new HTML/Javascript element
Blogger dashboard - Add HTML

5. Copy this code

 <! -- Simple HTML Navigation Code -- >
<b>List of Site Links</b><br>
<a href="http://mysite.com/sample.html">My Pages</a><br>
<a href="http://mysite.com/sample.html">My Pages</a><br>
<a href="http://mysite.com/sample.html">My Pages</a><br>
<a href="http://mysite.com/sample.html">My Pages</a><br>
<a href="http://mysite.com/sample.html">My Pages</a><br>
<a href="http://mysite.com/sample.html">My Pages</a><br>

<b>Some More Links</b><br>
<a href="http://mysite.com/sample.html">My Pages</a><br>
<a href="http://mysite.com/sample.html">My Pages</a><br>
<a href="http://mysite.com/sample.html">My Pages</a><br>
<a href="http://mysite.com/sample.html">My Pages</a><br>
<a href="http://mysite.com/sample.html">My Pages</a><br>
<a href="http://mysite.com/sample.html">My Pages</a><br>

6. Paste the code here
Blogger dashboard - Add HTML


7. Customise the code to your links and you're done!

Tips:
To add a link to a category to one of your labels it's

http://www.myblogspotblog.blogspot.com/search/label/nameoflabel

More Blogger Tricks and Tweaks

Related Posts Plugin for WordPress, Blogger...