This is the final part of a weeklong series on how to build a wedding website for FREE.
- Monday's post showed you how to get started, add a colored background, and customized your header image.
- Tuesday's post tackled customizing the menu, adding rounded corners to your header, and adding your first post.
- Wednesday had you handling adding a favicon, creating rounded corners for your menu, and adding pages.
- Thursday, you customized the footer and added some fun stuff to the sidebar (plus making some customizations there, too).
Today, we're going crazy and learning how to add lots more little fun things to your sidebar (an Instagram feed, a Pinterest feed, social media images, adding a Pin It button to your images, and more!) and we'll also be doing lots more customizations all over the blog (plus adding a slideshow to your homepage post)! So let's go!
Adding A Pinterest Gadget in Your Sidebar
Have you been pinning the crap out of pretty wedding stuff (I know I do – follow my boards!) on Pinterest? Wanna share the pretty with your wedding guests? Y'all is SOOO easy with this amazing tutorial from Marie over at Code It Pretty. Here's my website before the Pinterest pretty:
And here it is after the Pinterest pretty:
Gah! So pretty! I know that the code to this tutorial FEELS overwhelming but y'all have already messed with CSS and gadgets in this week's other tutorials so… take a deep breath and try it out. If you have any issues contact me on Twitter or ask Marie via her Twitter account. We're here to help!
Adding Pinterest "Pin It" Buttons to Your Images
And here it is after the "Pin It" button cuteness:
Again with the cuteness! You did great (and look – you even learned to add jQuery to your code!). If you have any issues contact me on Twitter or ask Marie via her Twitter account. We're here to help!
Making an HTML "Grab Button" for Your Blog
This is another amazing tutorial from my girl, Marie, at Code It Pretty. This is one that I've modified and use on the Kiss My Tulle blog! It's for those of you who want to add a "grab button" to your wedding website. A grab button is code that is attached to an image and a website URL and visitors can just grab that code, insert it into their own website, and your image (linked to your URL) will appear.
Think of the possiblitites, ya'll! Bridesmaid "badges" for Facebook, wedding day reminders for various family blogs, links to your other blogs – this could be awesome! Here's my website before the "Grab Button" goodness:
Here's my website after the "Grab Button" goodness:
Editing the Sidebar Gadgets
So, we have a bunch of cool gadgets in place but they're kinda random and all over-the-place and you've also decided that you don't like a couple of them. Cool. We can handle that. Go to Blogger Dashboard>Layout and look for your "Gadgets" section:
This si the area where we'll do all the editing. Let's start with moving some gadgets around so they appear in the sidebar in a more appealing order. All you have to do is click and drag each gadet to the position you'd like it to appear in. When you're happy with the new order of your sidebar, click "Save Arrangement". Easy-peasy. So now my "Layout" looks like this:
Which means that my website sidebar looks like this:
Holla!Now let's tackle a few of the boring gadgets – first, up "Blog Archive". Since you are doing a wedding website and you're only post is the one that appears on the homepage, I encourage you to delete this gadget completely. You can do this by going to Blogger Dashboard>Layout and clicking the "Blog Archive" Edit button. In the pop-up window, scrolldown and click "Remove" then "OK". And it's gone!
Next, let's delete the "About Me" gadget, too. I'm gonna be showing you how to code a WAY better one in a second. You can do this by going to Blogger Dashboard>Layout and clicking the "About Me" Edit button. In the pop-up window, scrolldown and click "Remove" then "OK". Sweet!
Next, you need to know your website's URL (it in the address bar when you're on your homepage), and create (and host it on a photo server like Photobucket) an image (I chose one that I sized at 200×100 pixals), and create a few lines of text to welcome display under your photo (I went with "Welcome to Cris and The Boy's wedding website! We're getting married in Texas on May 26, 2012 and hope to see you there!")
<a href="YOUR WEBSITE URL HERE" target="_blank"><img src="YOUR IMAGE HERE"></a><p>Your welcome text here.</p>
Click "Save", then click "Save Arrangement", and "View Blog":
Oh the awesomeness! Now let's add some social media icons so your guests can connect with you via Facebook, Twitter, and Pinterest (and more!).
Adding Social Media Icons
Adding social media icons in Blogger will be a breeze now that you've added coding in a sidebar to your list of Blogger skills. First, find the icon images you want to show in your sidebar. Here's a list of my favorites (also, Google "free social media icons" and look in the images section for no less than a BILLION options):
- Craftiments Pantone Social Media Icons
- Elegant Themes Beautiful & Free Social Media Icons
- Beautiful Dawn Designs's Freebie: Social Media Icon Pack
- Pixals Daily Stitched Social Icon Set (This is the one I'm using for this tutorial)
- Deviant Art Wood Social Networking Icons
- Macrofolio Social Post Stamps
- Carrie Loves Free Social Media Icons for Bloggers
- August Empress Social Hearts
Download and save each social medis icon as it's own image (generally 16×16 pixals, 32×32 pixals, or 64×64 pixals but y'all do whatever works for you!). Host each image on a photo server (like Photobucket). Then go to Blogger Dashboard>Layout and click on "Add a Gadget".
<a href="YOUR FACEBOOK URL HERE" target="_blank"><img src="YOUR FACEBOOK SOCIAL MEDIA ICON HERE"/></a> <a href="YOUR TWITTER URL HERE" target="_blank"><img src="YOUR TWITTER SOCIAL MEDIA ICON HERE"/></a> <a href="YOUR PINTEREST URL HERE" target="_blank"><img src="YOUR PINTEREST SOCIAL MEDIA ICON HERE"/></a> <a href="mailto:YOUR EMAIL ADDRESS HERE" target="_blank"><img src="YOUR EMAIL SOCIAL MEDIA ICON HERE"/></a><a href="YOUR LINKEDIN URL HERE" target="_blank"><img src="YOUR LINKEDIN SOCIAL MEDIA ICON HERE"/></a>
I only used a few here, feel free to add what ever accounts you have. If you'd like to add more social media icons than the 5 listed here simply insert the following code at the bottom of your HTML gadget:
<a href="YOUR SOCIAL MEDIA URL HERE" target="_blank"><img src="YOUR SOCIAL MEDIA ICON HERE"/></a>
Click "Save" and move your social media icon gadget to wherever you want it to appear in your sidebar. Then click "Save Arrangement" and check out your blog!
Before the icons:
After the icons:
Adding a Slideshow to your Posts or Pages
So, this is that last little thing that I'm going to share is how to include a slideshow using your images in your posts or pages. I'm going to add mine to the post we made that acts like a homepage:
To do this, we're going to follow this tutorial from Way2Blogging. It's done in a two part process and I'll be helping you with parts of it here. First, go to the tutorial and generate the first code. Copy it and then go to Blogger Dashboard>Template>Edit HTML>Proceed*.
*Before doing this, take a second and back up your blog. It's a good idea to do this right before (and every time) we make a change to your blog. Follow these directions from Social Moms.
Next, scrolldown to the bottom-ish of the page and look for the code </head>. Paste the code that the Way2Blogging tutorial generated for you DIRECTLY ABOVE </head>. Just like I did here:
See my code in there? Right above the </head> code? Great? Click "Save" and then "Close".
The second part is a little more work. You'll need to resize some images for the slider so that end up being 640 pixals x 300 pixals (try doing it in Microsoft Paint). You will also need to host them on a photo server (I suggest Photobucket). I did 5 images for this example but use however many you wish.
Next, go back to the tutorial and generate the second code. This will take you to a page where you will input the information for each slide:
Copy and paste the URL for each hosted image in the "Image URL" spot. If you wish, add a caption and a link (I did per my photographer's copyright). To add slides, click the "+Add a New Slide" link. When you're done adding slides, change the "Show the Slider in?" option to "Posts". Click "Generate" to generate your code. It will open a new page and you'll need to scroll down to find the "Add to Blogger" button:
This will take you to a page where it will ask you if you want to add this "Widget". Click "Add Widget" and the slider should automatically start working…
Unfortunately, mine didn't. I have someone looking into this now so once they help me figure out the fix/issue, I'll update this section and we will have a slider. AS GOD IS MY WITNESS, I'LL NEVER GO SLIDERLESS AGAIN!!!!
Your Wedding Website is DONE
Phew! That was SO much information, y'all – congrats for sticking it out with me! Do you have any questions or concerns? Wanna link to the wedding website you're working on and brag? Are you hoping that I'll do another series like this but focus more on the design aspects of the blog (and less on the coding)? Fire away!