Being a Book Blogger » HTML and Custom CSS (For Blogger ONLY)

As said before in the last post regarding blogger tips, I promised some HTML tips! Now, if you’re like me, then I assume you know absolutely nothing about HTML or CSS, it’s very confusing and I totally understand where you’re coming from. But never fear! It is actually very simple (I’m sure you’ve heard this a million times) and it can make your blog look great! Unfortunately, this HTML and CSS tutorial is ONLY FOR BLOGGER. I’m really sorry, but since I do use blogger, that’s what I know. WordPress is a whole other world for me, maybe one day I’ll move to WordPress with your guys’ support!
Anyways, let’s get to it! These are some of the more simple things that will spice up your blog!

Adding Social Media Buttons

  • There are various ways to add social media buttons, but I personally find this the easiest way.
    •  To find social media buttons look on Pinterest and search up some free ones. Or you can buy them if you find some you REALLY like. For me personally, I won’t put any cash into my blog until I feel I’ve got a good handle on everything blog-related and of course, people are actually seeing my blog.
    • The hardest button to find is the Goodreads button, unfortunately I can’t find the link for the free downloadable buttons I used for my blog! Sorry guys! 😦
STEP 1 » Once you find the social media buttons you want, download them onto your device and upload them onto a blank post spread!
STEP 2 » Add them to your post. You can move them around so they are in the correct order you want. 
 
STEP 3 » Highlight the first social media icon 
STEP 4 » Hit the link button which is slightly to the right above the Pinterest button. Add the link to said social media account (i.e Goodreads button to Goodreads main profile link)
STEP 5 » Hit “Ok” and repeat this step to remaining social media buttons. 
STEP 5 » Now you’ll notice in the top left corner of a post spread there is a “Compose” button, which is where you write your post, and a “HTML” button. Click the HTML button.
STEP 6 » Once you hit it the pictures of the social media icons will turn into a long list of HTML that will probably make your head hurt. It should look like this:
STEP 7 » Copy paste the entire HTML. ALL OF IT. Once you copy it, leave the post and go down to “Layout”. Depending on where you want the social media buttons, click “Add a Gadget”. Hit the “HTML/Java Script”gadget.
STEP 8 » Paste the copied HTML from the original post, (see step 6 if you don’t remember) into the space provided by the gadget. Click save. 
STEP 9 » You’re done! Go check out your blog’s page and see some beautiful buttons! 🙂
I want to give credit to BlogaholicDesigns, this is her tutorial and it helped me so much so I figured I would share it with you guys!
Center Page Navigation
  • For this simply go to “Template” and then “Customize”. Scroll down to Advanced designer and from there go down all the way to the bottom to “Add CSS”
  • Obviously you can see I have tons of CSS coding in here, ignore that. Yours is probably blank, and if it isn’t, that’s awesome!
Copy/paste this code and insert it into the space given under “Add CSS”
.PageList {text-align:center !important;} .PageList li {float:none !important; display:inline !important;}
 
Need to give credit to this amazing blog: icanbuildablog!
 
Adding a Color Box Behind Text and Pictures
  • I’m gonna tell you right now, this is super complicated. It took me awhile. So if you don’t get it at first don’t give up, this took me a couple tries!
STEP 1 » Write out all of the things that you want highlighted in your post. For a book blog, it would typically be the author, page #, title, release and description. Maybe more. But first write all of that out, but DO NOT ADD THE PICTURE. 
 
 
STEP 2 » Once you have everything written out that you want highlighted, NOT INCLUDING THE PICTURE, switch from compose to HTML. 
STEP 3 » You’ll see an HTML pattern for everything you’ve written so far. Now this part was a bit confusing for me at first, but make space at the beginning of the HTML that currently fills the page.
STEP 4 » Add the following code into the space
  • The highlighted red is the color you want your background to be. That is the HTML number for the color grey, that’s the color I chose. You can customize this by finding a different color HTML here.

<a href=”YOUR IMAGE URL” style=”clear: left; float: left; margin-bottom: 1em; margin-right: 1em;”><img border=”0″  src=”YOUR IMAGE URL” width=”100″/>

<div style=”background-color: #D8D8D8

 

; margin-left: 20px; margin-right: 20px; padding-bottom: 8px; padding-left: 8px; padding-right: 8px; padding-top: 8px;”>
  • Note: If you copy/paste, say a synopsis from Goodreads, the background of the copy pasted text WILL be highlighted white. To remove this find this HTML code:                                                 <span style=”background-color: white;
    • Do not delete this entire code, delete it so it will look like this:                                  <span;
  • There should be more than one of these so repeat that step over until they are all gone. Once they are gone it should look just like the second picture below.
  • At the end, it should look like this. The picture at first will look small, but just click on the image and change the size, it should then be the size you actually want it to be.


Credit to Small Reviews for this great tutorial!

Hey guys, I hope this was somewhat helpful for you, another one will possibly be up again with even more tutorials on how to spice up your blog! Thanks guys! Sorry for the lack of posts too, finals have me STRESSED OUT!
Advertisements

6 thoughts on “Being a Book Blogger » HTML and Custom CSS (For Blogger ONLY)

  1. The social media tutorial is actually something I've been wondering about for awhile now! I couldn't find one that explained it in a way that I could actually figure out! But this one makes it look super easy! Next you should do one on how you made your signature! 😉

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s