**Adding Social Media and Teacher Store Buttons to Your Blog
-Okay, first go here and download what you want.
-Then, you need to get your text ready. Below are the html codes you need for the various links.
<a href="mailto:YourEmailAddress" title="Email"><img src="image url" width=“65" height=“65" alt="mail" /></a>
<a href="PinterestAddress" title="Pinterest"><img src="image url" width="65" height="65" alt="Pinterest" /></a>
<a href="FacebookAddress" title="Facebook"><img src="image url" width="65" height="65" alt="Facebook" /></a>
Teacher's Notebook
<a href="TeachersNotebookAddress" title="TN"><img src="image url" width="65" height="65" alt="TN" /></a>
Teachers Pay Teachers
<a href="TeachersPayTeachersAddress" title="TPT"><img src="image url" width="65" height="65" alt="TPT" /></a>
<a href="YourTwitterAddress" title="Twitter"><img src="image url" width="65" height="65" alt="Twitter" /></a>
-Copy the links, paste in your correct website urls and picture urls (more on that in the video if you're not sure what that means.)
-Take out the spaces so it looks like one big glop of code.
<a href="mailto:YourEmailAddress" title="Email"><img src="image url" width="65" height="65" alt="mail" /></a><a href="PinterestAddress" title="Pinterest"><img src="image url" width="65" height="65" alt="Pinterest" /></a><a href="TeachersPayTeachersAddress" title="TPT"><img src="image url" width="65" height="65" alt="TPT" /></a>
-Now take all that html code and copy it. In Layout, add a new gadget and paste all that code in. I encourage you to center it. You can do that by adding the following code:
At the beginning of all that mess, add <center >
At the end, add </center>
-Save
-Drag that gadget where you want it to go, and save. **If you want four across, you'll probably need to change all those 65's to 50's.
Here's a video of me adding it onto my fake blog.
**How to Get Rid of That Weird Line on Your Background
You just checked your blog to see if you had a weird line, didn't you? Anyway, that line is from when your background ends and starts again. Think of it as two pieces of paper taped together, there's a seam.
Okay, probably that line doesn't bother you. BUT, if it does, here's how to get rid of it. It does take a little HTML work, but it's just two teeny tiny words. No biggie.
Okay, now go through these steps:
-From your dashboard, go to template
-Select Edit HTML
-Click Proceed
-Scroll past the beginning and all the "Group Description" stuff
Find this section called "Variable name="body.background" description="Body Background" type="background"
(On a mac, you can press Command and F. A little search box will pop up. You can put in scroll and it'll find this section for you. Probably control f on a pc?)
-You'll see scroll in there twice. Change both of them to the word fixed.
-That's it.
-Save your changes and you're good to go!
What this does is "hold" your background still while the body scrolls down. So you never see where those seams are "taped" together.
Here's a video if you want to see this fix in action.
**Add a signature
It's easier than you think to stick a signature in you Blogger post. And a lot easier than sticking that image in. Every. Single. Time.
If you already have an image, all you need is the HTML code for it. Upload it to Photobucket, copy the HTML code, and you're good to go.
-Go to Settings
-Posts and Comments
-Post Template
-Paste that code in
-Save settings
-Ta Da!
Need to make a signature? Super easy, too. Watch this video. It shows how to create your signature, host on Photobucket, and stick into Blogger. All that in 5 minutes people.
**Adding a Favicon (that cute little picture next to your web address)
This one is so easy! Find whatever image you want, I used my button.
-Go to Layout
-At the top should be a little box called Favicon
-Click edit
-Upload the picture you want
-Save
**I want a picture next to my post title, too!**
Okay, this isn't super tricky. But it's definitely more than 4 steps. You'll need to have a picture. You'll need to upload it to Photobucket. Add you'll need this code:
h3.post-title {
background:url(DIRECT LINK) no-repeat left;
height: 45px;
padding-left: 50px;
padding-top: 15px;
margin-bottom: -10px;
}
Here's a video of me putting a Post Icon on my fake blog.
I wish I was cool enough to have figured this out on my own. But I'm not. I learned how to do it from the fabulous Dani at Blog Designs by Dani. Stop by to tell her hello.
**I bought a blog design or used a freebie, and I need a button
WARNING!!
Read the terms of use from your designer before doing this!!! Make sure what I'm about to tell you to do isn't illegal.