Posts Tagged ‘blogger tricks’
New PHP WordPress Layout from Artisteer
If you’ve followed some of my posts about how to edit the code of Artisteer generated templates, you might be freaking out a little that the updated version is so much different. Don’t worry. Artisteer has actually made things a little easier for you. Let me show you how. Read the rest of this entry »
Logo & Blog Design for Annie Kennedy Photography
I so enjoyed working with Annie from Annie Kennedy Photography as we helped to give her a presence as she starts her new business venture.
Making Your Blog Eye Friendly and Easy to Navigate
I was just browsing through some new twitter followers blogs, and I couldn’t help but notice some well designed themes, and some very poorly designed WordPress and Blogger themes. Most of these have great content, but a lot don’t really make you want to stay on their site very long because they are either not friendly on the eyes or they are difficult to navigate through.
Here are some simple tips to help you make your blog or site keep more viewers. (Note: not all of these tips are even used on my own site, but should be.
Updated Blogger Scrapbook Theme
I’ve been working to update my Blogger Scrapbook site to make it more visually appealing and easier to navigate, so make sure to check it out! I’m very pleased with the results. I was also able to add a search box and some social icons that I created to the header for further usability. The icons I added simply by the “Add a Gadget” method, but the Google Search Box I added by creating a new div in the Header code.
Here’s how I added a new div to the html: Read the rest of this entry »
Esthers Cakes and Cards
I just finished designing a blog for my sister-in-law who makes the most amazing and creative cakes! She also makes adorable handmade cards, and both are done inexpensively and simply (which is a key when you have a family of 6!) You can check out her blog by clicking on the picture below. Please note that this blog is just getting started, so it doesn’t have a ton of content yet and still needs some tweaks.
This blog was a fun design to make. I first created the polka dot pattern in Photoshop, I then created the ribbon pattern, sidebar sheet and main sheet, cropped them all into one horizontal layer and used that for the blog’s background. Using the ribbon image, I created a texture for the block headers as well as the main menu background. I decided to go with original title button designs for the left side of the blog for items that I know won’t change and are of the same category, while I used the template headers I created for the right side of the blog for items that can be more easily edited and changed. You’ll also notice my original post dividers, signature graphics, scrolling twitter, rss, facebook, and back to top button, as well as other little details. You can find out how to do all of those yourself by visiting my Bloggers Scrapbook blog.
How to Add a “Back to Top” Button to WordPress
Adding a scrolling “Back to Top” button is a very nice feature for your blog so that people don’t have to keep scrolling to get back to the top of the page. I have already posted on how to do this for your BlogSpot blogs, and you can view that post on Blogger Scrapbook by clicking here.
Adding this button to WordPress takes a few more steps, but is still relatively easy. Now, I got the basic information from a site called instantShift, but they don’t have all of the information you need to actually add a button yourself. But, not to fear, I have been working and tweaking until I figured out exactly what you need to do in the simplest way! So, here goes!
- First of all, create and upload an image you want to use to your WordPress ftp, and save the url to it’s location.
- Secondly, log into your dashboard and click on Editor, then Header.php.
- Look for the following code: </head> <body>
- If the body element already has an id, copy that id name, but if it does not, give it an id by changing it to the following and save your template: <body id=”top”>
- Now, go to your Footer.php and find the following code <p> class=”art-page-footer”></p> </div>
- Directly after that code, add this code: <div> <a style=”display:scroll;position:fixed;bottom:10px;right:10px;” href=”#top“><img src=”THE URL TO YOUR IMAGE HERE”/></a> </div>
- Change the URL to your actual image url, and you can change the position on the screen by changing the red elements above.
- Make sure, that if your Header.php already had an id associated with the body, that you replace “#top” to that id instead making sure to keep the # and quotation marks.
- Save your template, and you are all done!
- If you also want to add a text link to the bottom of your posts, all you need to do is add the code below to the bottom of each post that you write (just make sure that you are in HTML mode and not Visual): <a href=”#top”>Back to Top</a>
I just did this for my own site, and it works great in IE, Firefox, and Safari. Hint: You can use this same trick to add buttons to your footer that link to your RSS feed, or other items. Simply change the “#top” to the http address where you want the image to link to, and of course, you’ll need to add the correct image and image url as well.
Please leave a comment if this was helpful or if you have any questions, and feel free to contact me if you are interested in any customized graphics or buttons. I do have some free pre-made and hosted back to top buttons available on my Blogger Scrapbook site.
//
Brand New Blogger Scrapbook!
No, I’m not posting about an actual scrapbook, but about my updated blogger blog called Blogger Scrapbook. Click on the image to check out this blog. After finishing my recent design project, I finally had the brainstorm I needed on how to use my recently created blogspot blogs. I gave this one a fresh, scrabook feel and it is designed to give information on how to personalize and customize your own blog. It already has a lot of great tips, and I will continue to add more on a regular basis. It will also feature free blogger themes and graphics.
Some of the tips you’ll find on this blog are the following:
- How to add a favicon to your blog
- How to add a signature to your blog (to all posts past and future)
- How to add post dividers to your blog
- How to get rid of unwanted text like “Showing all posts from…”
- How to customize your Profile Widget or make a brand new one
- How to add more widgets to every part of your blog
- How to create and manipulate scrolling and fixed buttons on your blog
And those are just the starters. So, please stay posted to Blogger Scrapbook if you use Blogspot, and make sure to leave comments or your own tips, too!
Customized Blogger Theme
I just created a completely customized blogger theme for someone blogging about money saving tips. You can view this Money Matters blog by clicking here. My design was based around a vector image of a woman shopping that I purchased from istock. (As a note, your designs should always be based around one theme or element that ties the design together and sets your design apart from others). The rest of the graphics and design are my own including the signature dollar sign circle graphic.
Other edits and changes I did to this blog are the following:
- Created and added a favicon to match the site
- Created and added post dividers
- Created and added a customized About Me Widget which includes an original graphic that links back to the home page of the site.
- Edited the footer copyright text so that it includes all of my desired links as well as a Contact button that links to an email address.
- Added a couple of advertisement graphics and text to the side bar.
- Added Google AdSense to the bottom of the site (I’m still waiting for it to show up. I might end up having to remove or tweak that part slightly).
- Added pages according to labels
- Removed the Date Header from the posts so that the date only appears with my other meta data icons below the header instead of below and above the header.
This blog was also uploaded manually for those of you using Artisteer and still a little nervous about doing this. Grant it, it is a little tedious, but all I did was the following:
- Exported my design as a folder
- Opened the XML file in Notepad
- Saved all of the images to Picasa
- Edited the XML by changing the image urls to match the actual image locations. (All you need to do is open up the correct images in your web album, right click on an image, and copy and paste the image location to your xml doc.)
- Deleted the current template HTML in blogger (I first saved it just in case).
- Pasted the new edited XML file with the correct image urls into blogger. (Make sure that you select Expand Widget Templates first).
- Saved my new template, and there you go!
A couple of notes on this: Make sure to click on each image individually in your Web Album. If you right click on the thumbnail for the image location, you’ll be getting that smaller sized image instead of the full size that you’ll need. Also, note that you will need to replace the url for each image in two separate places each.
Let me know if you are interested in your own customized Blogger or WordPress theme, and I’d be happy to discuss options and pricing with you.





