Tidbits, Tips, and Codes for DIY Blog Designing posted by Something Swanky Pin Share Tweet Email SomethingSwanky is reader-supported. When you buy through links on our site, we may earn an affiliate commission at no extra cost to you. My DIY Blog Design series is coming to a close, and we’ve covered a lot of ground… like headers, social media icons, post dividers, and linking multiple URLs to one image. But I’ve still got all sorts of little tips and tricks that I use all the time, but I haven’t been able to find just the spot in my previous posts to add them to. So this is going to be sort of a random hodge podge of important tidbits you won’t want to lose! Tidbit #1: Quicklinks These are some of my favorite quick links when making changes to the blog: How to Create a Static Homepage Creating a “Go to Top” Buttonย Creating a Custom Jump Break Adding a Post Signature HTML Converter Tip #2: Avoid Grainy ImagesAlways save your design images as .png not .jpgย Code #3: Remove Image Drop ShadowsThis code removes the drop shadow from behind your images. Insert it in the CSS section of Advance Settings in ‘Design’ or “Layout’ img {-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);} Tidbit #4: Learn How to Google I found everything I’ve used in blog design by googling. Seriously. There are so many awesome design blogs out there, and they’ve got all the information you need. The trick is searching the right words to find the tutorial that will help you the most.For example: I found image-maps.com by googling. I wanted to add my social media icons to my header, but I couldn’t think of a concise search to enter into Google. So I gave up on the “concise” part, and just typed in exactly what I was looking for, “I want to put my social media icons on my header in blogger, how.” Seriously. That’s what I typed in.And that led me to lots of hits that contained key words like, “multiple links,” “one image,” “map coordinates.” Once I could identify the “techy words” for what I wanted to say, I was able to type those into the search engine, and the led me to exactly what I was looking for.Moral of the story: google, google, GOOGLE! The information you need is out there!! ***Also– make sure you use the keywords “in blogger” or “in wordpress.” It makes a difference in the results. Tip #5: Be a CopycatDon’t be afraid to be a copycat! If you see something you like on someone else’s blog, don’t be afraid to try and re-create it (in your own way, of course) on your blog! And if you’re nervous about copyright infringement, there’s usually a link to contact the designer at the bottom of the blog. But as long as you aren’t copying and pasting images, you should be safe. Code #6: Lock Post Title Color This code should lock the color of your post titles– so they don’t switch from that pretty color you’ve picked out to black when you’re on the page. Be sure to insert the color code in place of the #000000. h3.post-title a, h3 {color: #000000;} Tidbit #7: Where to Find Clip ArtWhile I’m a firm believe that having a beautiful blog doesn’t need to cost you a penny– I’m also a clip art fiend. I love it. And You can find some of the BEST clipart packages on Etsy. And many of the shop owners offer BOGO type sales all the time! Simply go to Etsy.com and type in whichever kind of clip art you’re looking for. Or even just type in “cute clip art.” You’ll be stunned at how much cool stuff is available for $5.00 or less! And all you have to do is save the clip art to the computer and then pull it right up in Picmonkey! Some of my favorite Etsy clip art designers are: Clip Art’s Corner Erin Bradley’s Designs Sugar Studios JW Illustrations There’s also a lot of free clip art out there on the web– just google it! Again, it’s a simple matter of learning the key words to search for. Example: ‘silhouette’ is a helpful keyword to search for. Silhouette clip art is extremely useful because it’s solid and usually black– which means you can customize the color to match your blog settings using Picmonkey. Tip #8: Reach OutDon’t be afraid to email other bloggers and ask them “how they did something.” It might take them a while to get back to you, but, in my experience, they almost always do– and they almost always have a helpful answer for you!Code #9: Remove Blogger NavbarThis code removes your blogger navbar: #navbar {height: 0px;visibility: hidden;display: none;} Tidbit #10: Do Your HomeworkGet to know some of the “techy” blogs out there! There are tons and tons of helpful blogs solely dedicated to creating blogger plugin codes, writing how-to articles, and answering your blog design questions! Some of my favorites are: Southern Speakers Spice Up Your Blog Blogger Plugins I have officially divulged all of my secrets! So it’s back to the kitchen for me ๐ Don’t worry– I’ll still do blog designs posts on a Q&A basis,ย so feel free to shoot me an email if there’s something you’d like me to cover! And as I find more goodies that I can’t wait to use on Something Swanky, I’ll be sure to PIN them to my Blogging Tips & Designs Board or my Blogging Re-design Board! It’s been fun folks! Thanks for the love ๐ Please visit my Party Page for a more complete index of Link Parties.
Here’s a quick question for you. After following your tutorial for making a custom header using image maps, how do you get rid of the default header (I am using blogger)? Right now I just uploaded a little sliver of white as a picture, but now I can’t use the mobile version (because the default header is a little sliver of white). Oh, and thanks so much for creating all these tutorials for people like me that have no clue what they’re doing until someone takes us by the hand and shows us how! Nikki Kelly @ the ambitious procrastinator Reply
you are such a smartie pants! can’t wait to set aside a few minutes and really peruse these tips! xo Reply
Coming to an end? Waaaaa… {<- me, crying} Love all these tips, thanks for the quick links too. I ditto Erin Bradley, as her clip art is what my header uses. And they were commercial use too, super cheap. They'll have to do until I can afford to pay someone to design me a supercute logo and site. That's gonna be awhile...unless I sell a kidney. ๐ Reply
These are great tips. I have a Blog Hop on Wednesdays, and I would love it if you would link this post. You can find it athttp://www.adornedfromabove.com/2012/06/natural-hair-gel-and-wednesdays-adorned.htmlIt is called Wednesdays Adorned From Above Blog Hop.I hope to see you there. Have a great Day.Debi BolocofskyAdorned From Abovehttp://www.adornedfromabove.com Reply
What about your photos after editing…do you save them as jpeg or jpng? Thanks for all your tips. I’ve loved them all! Reply
Thank you so much for sharing these. I google a lot of stuff, but sometimes I still don’t find it! Thanks for the photo tip too! Didn’t know that one! Reply
Great tips. I am going to add a signature right now. I am a new follower. Hope to see you at True Aim. Reply
So many great tips!I used number 6 straight away – I’ve been searching for a way to do this forever.Thanks so much for the help! Reply
What a great list of tips!!! Thank you so very much for sharing this at The DIY Dreamer.. From Dream to Reality! ๐ Reply
Great tips! I’ve been working on a new blogger series and these go along perfectly! Hope you’re having a fantastic 4th!-Melissa Reply
Thank you so much for this series, I have a lot to do to redesign my blog but with all of the information you provided I am on my way. Reply
Hi, thanks a million for all the wonderful tips…can you show a tutorial on how to make drop down menu/label bars….and please do not stop posting DIY blogger tips. Reply