Blogging Tips & Tricks #2


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>

Source

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="http://www.bloglovin.com/en/blog/4993461"target='_blank'><img height="50" width="120" alt="Follow on Bloglovin" src="http://www.bloglovin.com/widget/bilder/en/widget.gif?id=4027339" 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.






Baby Bear's Blogging Tips & Tricks #1


A few people have been asking for blogging help lately and I decided to finally start posting how I do my html.  This is the first time I'm doing a post like this so if it gets a good reaction I'll do more in the future.


1. Twitter Buttons (Easy Follow)
I know that I personally follow blogs on twitter more if they have this easy twitter button because it doesn't redirect you away from the page you are on.  If you are already signed into twitter it'll just follow them from there.



2. Blog Rolls: Display your favorite blog buttons
The other day someone asked how I did my blog roll.  I forget what site I got help from so I just took a screen shot of what I have in my html coding.
The part you should focus on is:
Red Arrow: That will make the scrolling stop when you put your mouse over it.  You can play around with how fast you want the scrolling to be.  I chose speed 3.
Blue Arrow: This is where you put the blog's web address
Purple Arrow: This is where you put the blog's button image address (You can right click the picture and copy image address).

Remember at the end to put: </center></marquee> or it won't work.

Most of the time you can just copy paste the code someone has on their blog.  Just make sure to add <center> before the code and </center> after the code so all the buttons centered.

3. How to make your own blog button:

Make a button in paint.  You can copy paste mine and then use that as size reference if you want.

After you have created an image save it.  I use photobucket.com  to upload my image.  After it's uploaded put your mouse over the picture and click direct link.  

Blue Arrow: Your blog web address
Red Arrow: This is where you paste the direct link from photobucket.com
Green Arrow: Again copy your blog web address here
Purple Arrow: Again paste direct link from photobucket.com

You can also change the size of your button where it says height="" and width=""

This will display your button and provide a box with the html code for your button for other bloggers to put on their site!

4. Favicon Fun
See the pretty flower up next to my web address?  It adds a little flavor to the page and goes with my theme.  I remember seeing other people's favicons and could not figure out how to do it.  Here's the site I used to do it:

5. Decorate a Text Box
I used to have really boring reviews that had no decoration to them.  Until one day I found this blog that had a texture in a text box and I really wanted to do that for my reviews to put the book's goodreads summary on.  Here's what I use.   

Purple Arrow: Save a picture.  Upload it in photobucket again.  Click direct link.
Blue Arrow: This is where you type whatever you want to be in the box.

If you look at my reviews I put the book cover image on the left hand corner of the box.  You can do this by dragging the picture.  Or what I do is in the html:

<img align="left" src="image web address here"/> 

You can also put "right" if you'd like it to be to the right.



6. HTML color codes
I use this site Color Codes.  It has pretty much ever shade of every color I've ever imagined.  If you look in the image above where it says #66dd33 (before the purple arrow) that is an example of where you would use these codes.  Make sure you always have the # before the number.



Popular Posts

Like us on Facebook

2013 Reading Challenge

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

2014 Reading Challenge

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

2015 Reading Challenge

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

Flickr Images