March 20, 2014

A Few Blog Design Tips & Tricks

Hello everyone! So today I want to take a moment to blog about...blogging. Over the last few weeks, I've spent a LOT of time learning about my template and how to change things. First lesson: HTML is freakin complicated. Second lesson: There's usually an easier way to do things. I've found simple solutions to some of my biggest questions, and decided to share them here with you in an effort to promote fabulous blogging.

To be clear, I am in no way an expert. These are things that have worked for me and my blog, and they may react differently to your template and settings. I've focused on  my two biggest questions as a new blogger, and I hope you find my suggestions helpful. :) 

How to Set up a Photo Gallery

So there are several tutorials online, none of which worked for the template I'm using. I'd always end up with weird lines/charts, boxes around each photo, photos that didn't line up, etc. I finally figured out how to do it on my own, and it was surprisingly simple. 

You can see the final results (in different sizes) on my Fashion, Lifestyle + Home Decor, and Popular Projects pages. 

First, upload your thumbnail images  to Photobucket (or whatever site you use). Then copy and paste the html code of each photo into your page. You can then center and/or space the images how ever you'd like. Depending on the size, it may automatically place them three in a row, four in a row, etc. You can change the number of photos in each row by simply hitting "enter" and moving them to the next line. You can also change the size the same way you'd change a normal photo, but if you want them smaller than the preset "small" size (which is 200), you can switch over to html view and edit the hight and width. They'll be easy to spot because each will be followed by "200". You can change the number shown to match any size you'd like - most of my photo gallery thumbnails are set to 150. Easy right? If only someone had told me this 4 months ago! The only thing I haven't figured out is adding titles to each image - for some reason blogger won't allow more than one titled image per line. If I figure it out, I'll let you all know! 

How to Add Sharing Buttons to Posts 

Many tutorials have you editing your html code so that it's technically part of your tag line/footer, but I found it is much, much easier to just have blogger add code to each post automatically (rather than each footer). 

To do this, you simply copy and paste the code below into the "post template" area of your settings. Now, the buttons appear every time I start a new draft. I just blog as normal, and then when I'm done I hit enter a few times so that there's a break between the text and the buttons. I got this code from another blog and personalized it a bit so that my version doesn't have any text, and the buttons are centered. You can see the buttons in action at the end of this post. I like that the buttons are grey (and therefore blend in a bit more), but if you'd like to spice things up by using your own images, you can replace what comes directly after src= with your image's direct link code (you can get this code from Photobucket and other similar websites).

How to Add a Fancy Shmacny  Text Box So Readers Can Add Your Buttons

If you'd like your readers to be able to add your button, you'll need to provide an easy method of copying the html code. That's where the box comes in (like the one above that has the sharing button code). I use the "Grab My Button" Code Generator because it makes it super easy. You simply input the name of your blog, the link that you want the button attached to, and the image you'd like to use. Then you can change attributes of the box such as background color, text color, and border type. It will then give you a preview, and if you're satisfied with the result, you can copy and paste their html code in your post/page/sidebar/whatever. 

That's it for now! I hope you find these ideas helpful, but if you run into any issues, I'll do my best to answer questions. Happy blogging!

Share to Facebook Share to Twitter Email This Pin This Share on Google Plus Share on Tumblr


Confessions of a Secret Crafter © 2013.

Design by The Blog Boat