Blogging HTML: Adding Social Media Links | Spindle & Rye

Blogging HTML: Adding Social Media Links

Thursday, April 30, 2015





Are you new to blogging or just wanting to add a few new features to your existing sidebar? 

After sharing my new blog a few days ago, I received a few questions via email or Instagram about the design and some of it's features. I thought I'd try to help and answer most of those here with 
a Mini Blogging Series. 


I'll post a few "how to's" a week with some of the most popular blog add ons. How fun!




I, in no way, claim to be a html or blogging expert, but I have had my share of experience with other blogs I have managed and feel pretty confident that I can make my "way around" most html tasks.

I have learned that some can be pretty complicated, so I ALWAYS make a back up copy of my blog template in case things "go South" and I need to restore it. This is kind of one of those things that you really need to concentrate on while first learning. You might want to hide your cell phone & lock up the kiddos until you get the hang of it!

The definition of HTML is HyperText Markup Language.


HyperText  is the method by which you move around on the web — by clicking on special text called hyperlinks which bring you to the next page. The fact that it ishyper just means it is not linear — i.e. you can go to any place on the Internet whenever you want by clicking on links — there is no set order to do things in.
Markup  is what HTML tags do to the text inside them. They mark it as a certain type of text (italicized text, for example).
HTML is a Language, as it has code-words and syntax like any other language.


Now that we all know what it stands for, enough with the boring stuff......who wants to add some fun features to your blog sidebar? 


Blog Series #1: Social Media Links


I really love the social media links at the upper right hand side of my blog. Its a great way for a reader to be able to connect to all of your social media channels in one convenient place. I purposely set these at the top of the page because they are one of the first things you look at when the page opens......smart cookie I am:)



When you first open your Blogger blog dashboard , you should see something like this. Click on the "Layout" tab. Then click "Add a Gadget".




You will want to scroll through the gadget menu until you see the "HTML/Java Script" choice. Click  on that hot stuff.....you're now rocking HTML!




Once you click on "HTML/Java Script", this box will appear. It is HERE that you will input the social media html codes that I provide below. (I know I spelled the word "then" wrong....sorry friends.....I have fast, sticky fingers!)


Copy and paste these html codes directly into the box above. Yes, all of them in the same box. Click "save"

<div align="center">

<a href="URL TO YOUR FACEBOOK PAGE GOES HERE" title="Facebook" target="_blank"><i class="icon-facebook"></i></a>

<a href="URL TO YOUR TWITTER PAGE GOES HERE" title="Twitter" target="_blank"><i class="icon-twitter"></i></a>

<a href="URL TO YOUR PINTEREST PAGE GOES HERE" title="Pinterest" target="_blank"><span class="social"><i class="icon-pinterest"></i></span></a>

<a href="URL TO YOUR INSTAGRAM PROFILE GOES HERE/" title="Instagram" target="_blank"><i class="icon-instagram"></i></a>

<a href="mailto:YOUR EMAIL ADDRESS GOES HERE" title="Email Me" target="_blank"><span class="social"><i class="icon-email"></i></span></a>

<a href="YOUR URL TO YOUR ETSY SHOP GOES HERE
" title="Etsy" target="_blank"><span class="etsy">E</span></a>
  

</div>




Here is what your html social media codes should look like once you replace my information with yours. Make sure you copy and paste the code exactly as it is above. If for some reason you think you may have accidentally deleted a character, it's just best to scratch what you copied, and start again.
Each quotation sign, parenthesis and < sign means SOMETHING to the code working correctly.




After you have added the codes to the box and clicked save, you will now need to click "save arrangement" in the orange box shown above.



You should now see your new titled gadget on the right hand side of your layout screen. You can click on it's box and drag into any order on the sidebar! Easey Peasey, right?



Next up?
Blog Series #2: Adding Instagram Photos to Your Sidebar













9 comments:

  1. This is great!! I need help with advertising - I've been doing some research and there's so many out there, it's a little overwhelming. I've tried Google Adsense, but I got denied. Boo!

    ReplyDelete
    Replies
    1. I hear ya sister...and of course you want to help promote items to your demographic of readers, not the latest pack of gum...bwaaaaaah:)
      Happy weekend friend!

      Delete
  2. So helpful! Thanks for sharing!!!

    ReplyDelete
    Replies
    1. You're so welcome Brandi! Thanks for stopping by!
      Happy weekend!

      Delete
  3. Love it and congrats on your new blog Collette! Looks amazing!

    ReplyDelete
  4. Love it and congrats on your new blog Collette! Looks amazing!

    ReplyDelete
    Replies
    1. Thank you sweet friend...love the new blog soooo much more:)
      Happy Weekend to YOU:)

      Delete
  5. Great info Collette! Just updated your blog name on my sidebar. Happy Friday! xx

    ReplyDelete
    Replies
    1. Thanks Sweets!! I'll go take a peek:)

      Delete

Printfriendly