Showing posts with label Blog Design for Beginners. Show all posts
Showing posts with label Blog Design for Beginners. Show all posts

May 28, 2013

➷ I'm Back!!! ➹

Hello, dearest bloggers! Oh, how I have missed you all! 

I have finished my first year of MBA school and the whole time I was itching to return to my blog! For those of you who have gotten an MBA, you know how awfully awesome getting your face kicked in by school can be! 
On the one hand, the kid in me was like, "Screw this! Blog! Blog! Blog!" 
On the other hand, the adult in me was like, "No time! Study! Study! Study!" So it's been a months since I've been able to say hello! 
None of you sweet ladies have any  idea how badly I wanted to do something, do anything, get out, and let all my pent up creativity out in a crazy project frenzy. Instead, my year was filled with long black skirts, tidy professional blouses, and math, math, math! 

I am sooooo... excited to see what's been going on and what this year has brought you. Please leave me links to your blogs or fav projects in the comments, so I can see what you've all been making!! 

Love yous guys! 
   ➸ xoxo ➸
 photo 2fc9bcc8-3007-4b83-a06b-544496708353.jpg
 

February 15, 2012

Create & Add a G+ Icon to Your Blog [tutorial]

Have you guys heard the Google Plus buzz?
I ignored it until Google went and announced they would be yanking my favorite free photo editing software - Picnik. After that announcement, and the rumors Picnik would still be available if you belonged to G+, I decided to sign up just to check it out.
 
For all you guys who have already jumped on board I thought I share how I made my G+ icon. First you need to make the icon image, and there's a few ways. Then it's a few simple steps to turn the image into a working G+ icon. [THESE SAME STEPS WILL WORK FOR ALL ICONS EXCEPT RSS  -here- AND EMAIL-here-]

Make the icon: WAY #1  {How I made mine}
1] Upload one of your existing button images to Picnik {or photo editing program}.



2]  Make a patch to cover the old emblem.
Go to: Stickers, then to "Shapes." Next, select a square to cover the existing label, whether it's a "P" or "T" or whatever. Then use the dropper to color match the square to the rest of the icon.
3] Edit the icon to add a "G+"
Now- Go to "Text" and select "Georgia"
It's not an exact match, but it's the closest I could find! You want a lower case "g" and place it so it's hanging off the icon a little.
Next add the "+" symbol

Make the icon: WAY #2
1] If you don't have an button you can upload a pic of the outline of a square {or whatever shape you want.}.
2] Edit the square to look like your other icons
If your other buttons have rounded edges, like mine, you should do step 2: Select "Matte" and round out the corners of the square.
3]Go to "Duo-Tone" and select the colors for your square that will match your blog.
4] Edit the icon to add a "G+" Now- Go to "Text" and select "Georgia"
You want a lower case "g" and place it so it's hanging off the icon a little. Next, add the "+" symbol



Make the icon: WAY #3 
 1] You could upload a stock icon--they can be found for free all over the web.  -Or-  You could also just grab drag any of the free icons below {by dragging it onto your desktop. }
2] Edit the square to look like your other icons
 Go to "Duo-Tone" and select a color for your square.
3] Edit the icon to add a "G+"
Now- Go to "Text" and select "Georgia"
You want a lower case "g" and place it so it's hanging off the icon a little. Next, add the "+" symbol.

-NOW-
A] Your image needs a HTML code
Upload your image to a photosharing site, like Photobucket, and "save a copy" then you can get an URL for the pic. COPY the "HTML code".
B] Get your Google+ account URL
Pop over to your Google+ account and grab the web address for YOUR profile page.

Now that you have an image URL for the icon you made and the URL from your G+ account insert them into the red portions specified for this sample code. Easy Peasy, yes?
 I also like to center my icon on my side bar. If you want yours centered it's easy to do- just insert the underlined code onto both sides of the code you've just inserted your information into.


C] Add your new icon to your blog.
For Blogger: Go into Layout for blogger. "Add a Gadget" and open a new "Configure HTML/JavaScript"
Now you can input your new icon using the code above. Just add your info where the red writing is. First the URL for your G+ account, then add the html code for your new icon.

Inserting the HTML code is where Blogger and Wordpress will differ. If you have Wordpress then upload your icon how you added your other social media icons. Sorry I can't give a better description!

My last tip- I put my "G+ code" in the same "Gadget" as my code for my Pinterest, RSS, and Email buttons. I just added it right in at the end and then made sure the "center code" was behind the last icon I added.
It should look something like this when you're done. The buttons all lined up and centered in the middle of the sidebar- or where ever you've put it.

Need any other gadget tutorials? Want to make your own working  Email or  RSS icon? Or add a blogging signature to your posts? How about personalize your favicon?- you know, that little symbol that shows up at the tops of the browser window when people are reading your blog- DIY one in a few minutes.

Here's the thing about this little blogging design stuff, isn't very hard! There's no need to pay people to make these small gadgets and icons! You CAN DIY it!!


September 20, 2011

Create a Blogging Signature


I had never really read blogs before I started mine. I expected to write about Z and I and , well, just life. But very quickly I realized blogs are awesome! Seriously, I couldn't believe I had never checked them out before. My favorite to read were and still are home blogs about creative and inspirational DIY decorating.

When I decided to start blogging my own little projects there was a pretty big learning curve. But I took note of all the little {and big} touches that set popular blogs aside from the run of the mill family one.

I noticed that creating an identity was important. One way to do that was to add a personalized signature to sign off at the end of a post. Adding a signature is a piece of cake. Head over to My Live Signature where they will walk you through a few easy steps in creating your new individualized touch.

You will choose the font, color, size, and angle your signature can appear.
You don't need an account, just select "Click Here to Start" .
 

On the next page we are going to select the first option, 
Step 1:Write your name, as you want it to appear in the box.
Step 2: On the next page we can choose from 120 different fonts by viewing a preview.
Here's some of the ones I liked:
 
 From there you will be asked to select all your specifications to make your name look exactly as you'd like it to.
Step 3: Pick out your size, I think I choose size #5.  I'm not 100% certain though.

 Steep 4: Color. Just double click in the box and you'll have the whole color wheel to choose from.
In this screen shot you can see the preview for my name on the left. 
I chose a transparent background and a color for my name.
Step 5: Pick the slant for your name. Currently I have slope #1, which is  pretty much 0 slope. I think I'll change it in the future, to make my name stand apart from all the other text a little better.
Go to the next page and you will have 3 options of what you can do with your new signature. You wan the last choice,  "Want to Use this Signature?" 
The link takes you to the next page, just click on "Generate HTML Code."
Step 6: Now your last decision, would you like you name to appear with other writing or alone. Do you use a good bye tag line? Would you like to start using one?
For example, some peeps say "Hugs" or "xoxo" or something like that. Now's your time to add one if you want one.
Preview your choice and click on "Generate Code" once you've finished.

 Step 7:Choose the link "Generate Code for Blogging" { there are other usage options if you want to explore those on your own}
Below your new code you should select "click here" to get directions on how to insert the code into your blog.
It's super easy, I copied them and pasted them below in case you guys have questions.

WordPress

To add your signature to a post:
- Select "Code" in the editor window
- Insert the HTML code of the signature
- Select "Visual" and continue editing

 Blogger
To add your signature to a post:
- Click "Edit HTML" in the editor window
- Insert the HTML code of the signature
- Click "Edit HTML" and continue editing

Basically, your signature Html code is pasted into the Html version of EACH post you write. You can paste it anywhere, I always scroll to the very bottom and paste it in there.

BLOGGER: You can also upload it permanently into your blog template- just go to:

  • Settings
  • then: Posts and Comments
  • in the Post Template box add your img src code
Super easy and quick way to help personalize your blog, portray who you are, and solidify you blogging identity. Hope that helps some of you new guys. I wished I had help with these things { like making blog buttons, creating the Html code to allow others to copy your button, personalizing your Favicon, and adding Email and RSS social media icons} when I was getting started.
That's why I write these babies up! Hope they help!

 
 Looking for places to link up your projects? Check out my Party page
I'm also linked up here

August 11, 2011

Create & Personalize Blog Favicon [Tutorial]-Lose that Orange B



You know when you're online, the icon to the left of your web address?


Well, that is called a favicon and if you blog on Blogger is looks like an orange "B" and on Wordpress it's a black "W".
While you're reading my post right now, you'll see a little house and a "G 2 B" on it.


So there's a FREE way to make your own. You guys know how I love to make my own blogging accessories, cause I'm kinda cheap frugal like that!
You just head over to Favicon and sign up for a free account.
{You have to sign up, or else you can't copy and save your creation- which is annoying since you have to start over, not that I know from experience!}
Once your account is created you can design your favicon however you'd like. Something that signifies your blog theme of blog name is probably a good idea.

There's two ways {that I know of} to add a favicon to a blog.
The 1st Way
Once you've decided you like the icon, you can look at "Preview" and underneath it click to "download" it.
Next go into your Dashboard and click on "Design."
Right under "Add and Arrange Page Elements" you'll see "Favicon" go ahead and click on "edit." You want to add the saved file here. Save the addition and preview it. If anything's wrong you can delete the text out and start over, no worries.
Once you've saved your changes you should be good to go.


 This 2nd Way is a little harder- but it's the way I learned first so I'm sure you can do it too.

Once you've decided you like the icon, you can look at "Preview" and underneath it click to 
"publish under an open license."
You will be prompted to title it, then you'll get directed to a new page that will hold all the icons you make.
Click on the title of your favicon and you'll get a page with the ability to download you icon or copy its code.
There are directions with the code for where to insert the icon's html code. But basically it tells you to go into your Dashboard and click on "Design."
Right under the page tabs you'll see "edit html" go ahead and click on that.
(People say you should copy your whole page before touching it, creating a back up for yourself, since you WILL be inserting code there in just a minute.  But don't worry too much about inserting code into your page layout- you can preview the changes and "clear edits" so nothing to be too freaked out about.)
Now go back to the Favicon website and copy the second html code {the lower one} for your new icon.
Then insert the code in between and . For me it's about 2/3's of the way down the page. {You can just "control F" search for it.}  Then Preview it and if you like it, save your changes.

Good luck with this one guys, but it sounds harder than it is. It's just a little difficult to explain. Let me know if you all have questions!

 Update: I thought I'd add in the new updated version of my favicon to go with my new blog background!
Also- thank you all for letting me know when you've finished making your own! I LOVE getting to see what you guys come up with!

August 4, 2011

Tutorial: Add Social Media Icon [RSS} into Your Blog

I've explained that most buttons are easy to make- but your email icon and RSS work require an extra step. We made the email icon and added that- now you wanna make the RSS link?
 

[1] Decide on an image what you want to use to represent the link on your blog. There are several sites, like Design Matterz, that allow you to use images for free and this one has a great selection of colors.
[2] Once you've decided on the image, upload it to a photo hosting site, like PhotoBucket. This is important because we need an image code that we will insert into our html code.

[3] Now you want to copy the grey code and insert your your feed URL{not the same as your blog URL} and your direct image code in place of the red portions.

[4] You are now ready to insert the code into the html portion of your blog post or (more likely) into your blog design.
To do this you should go to the "design" page, then click on "add a gadget." Next click on the gadget "HTML/Javascript." Here you can insert your entire code. By the way, you often see the buttons for email, Facebook, Pinterest and RSS all listed together. You can add the code into the same gadget, by listing one code after another.


Good luck making your own!

July 31, 2011

Tutorial: Create Email Social Media Icon



As my blog has been growing, I've began the process of figuring out the technical side of blogging, 
I've posted on how you can make your own blog button and how you can create copyable button code so others can grab it.

You've probably noticed how bigger blogs have social media icons allowing you to easily link up with them using various sources like Facebook, Pinterest, and email. Most buttons follow the same process [tutorial here]- but the email button needs an extra link. You can make one, download one from online or grab one below--then follow this tutorial to add it to your blog

 Well, let's make ourselves an email link, OK?
[1] Decide on an image what you want to use to represent the link on your blog. This often looks like and {e} or an image of a letter. There are sites like Design Matterz that allow you to use images for free, and this one has a great selection of colors. You can also use any of these icons from that were free downloads by dragging them onto your desktop.

[2] Once you've decided on the image, upload it to a photo hosting site, like PhotoBucket. This is important because we need an image code that we will insert into our html code.
[3] Now you want to copy the grey code and insert your email address and your direct image code in place of the red portions.

[4] You are now ready to insert the code into the Html portion of your blog or (more likely) into your blog background. To do this you should go to the "design" page, then click on "add a gadget." Next click on the gadget "HTML/Javascript." Here you can insert your entire code.

That's all there is to it. I guess I'll be working on the other buttons next.
Good luck making your own!