Blogging Tips & Tricks #2

12:00 AM

Here are some more tips I've gathered over the past few months.

1. Search Bar:

See the pretty search bar on the top right hand corner of my page?  I just learned how to do this the other day and here is the code so you can add one to your page. 

1. Layout-->Add Gadget-->HTML/Java Script

2. Copy & Paste the code below.
3. Change the color of your search bar.  For example, To change the color of the search box I used #35BABA the teal color of my blog.
4. Save

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" style="background: #FFFFFF; border: 2px solid #000000"/><input id="search-btn" value="Search" type="submit" style="background: #35BABA; border: 2px outset #000000; color: #ffffff; font-weight: bold;"/></form>


2. Jump To:
Ever wonder how to make links that allow you to jump down the page to the content you want?  This tutorial really helped me when making my Review Archive.

This blogger teaches you how to make these Named Attribute Jumps.  It took me forever to understand how to do this though because her directions are a little tricky.  So here's my extra advice.

1. Copy and Paste the link below to the top of your review archive.  (Blogger is stupid and will mess up the code so every time you go to update your archive you have to make sure you open it when it's in HTML format already.  It sucks, but the end result is worth it.

<span style="font-size: large;"><a href="#A">A</a> <a href="#B">B</a> <a href="#C">C</a> <a href="#D">D</a> <a href="#E">E</a> <a href="#F">F</a> <a href="#G">G</a> <a href="#H">H</a> <a href="#I">I</a> <a href="#J">J</a> <a href="#K">K</a> <a href="#L">L</a> <a href="#M">M</a> <a href="#N">N</a> <a href="#O">O</a> <a href="#P">P</a> <a href="#Q">Q</a> <a href="#R">R</a> <a href="#S">S</a> <a href="#T">T</a> <a href="#U">U</a> <a href="#V">V</a> <a href="#W">W</a> <a href="#X">X</a> <a href="#Y">Y</a> <a href="#Z">Z</a> <a href="##">#</a></span></div>

2. Where you want the link to take you put this code:
 <a name="C">C</a>
Do this for all the letters.  So for example, you'd put that code above the authors or covers that start with C.

3. DO NOT click compose.  Save it in the HTML format or all your hard work will be messed up.

The tutorial I linked to shows you how to do this with other things besides letters.  here's an example of my read-along page where I have links so you can jump to the different events I participated in.

3. Blog Lovin' Button:

This I learned from Kimba! She's amazing and you should follow her tips and tricks.  She taught me how to make the bloglovin follow button code so that it opens in a new browser when someone clicks on it.  I took it a step further on my blog and made the button smaller because it was GINORMOUS!

<div style="margin-left:auto; margin-right:auto; text-align: center;"><a title="Follow Harley Bear Book Blog on Bloglovin" href=""target='_blank'><img height="50" width="120" alt="Follow on Bloglovin" src="" border="0" /></a></div></center>

The red parts are where you can change how big you want the button to be.  The blue is where you would change it to your blog's bloglovin' page.

4. Polls

Do you like the poll on the right hand side bar?  I like this site the best for creating easy and simple polls.  You customize it and then copy paste the code into HTML/Java Script gadget in layout.

You Might Also Like


Popular Posts

Like us on Facebook

2013 Reading Challenge

2013 Reading Challenge
Melissa has read 5 books toward her goal of 100 books.

2014 Reading Challenge

2014 Reading Challenge
Melissa has read 0 books toward her goal of 100 books.

2015 Reading Challenge

2015 Reading Challenge
Melissa has read 16 books toward her goal of 50 books.

Flickr Images