Momaye's Diary

Showing posts with label blogger template. Show all posts

Wednesday, February 12, 2014

New Blog Design + Our Bestfriend's Valentine Wedding

Hi guys! Have you noticed my new blog design? Thinking you are on the wrong blog but no it's still Momaye's Diary.

Last Monday, I started to tweak my blog template. Then yesterday, I was able to create a new blog header with social media buttons. Want to know how to create a header with clickable social media buttons? Don't worry I'll post that one of these days. Sorry I know I have so many promises but I'll do my best to make a tutorial about that.

Blog header with clickable social media buttons

Tuesday, February 11, 2014

Feeling Lazy Tuesday + A Yummy Discovery

Hello everyone! How's your week so far? Me, I cannot really overcome the weekend hangover. It's always bitin e, one day lang kasi. Yesterday, I almost not completed my weekly report. It seems that I'm already losing my focus on my work. There's something missing already, or I am just hoping I can quit this job soon. Praying to be a work at home mom soon, in time it will. Sorry that I always write about that wishful thinking of mine :)

And guess what, Tuesday na but I'm feeling lazy pa din. I'm listing down a to do list for a week but I don't know where to start. Oh yeah, talking about losing my focus again. Hehe...

The truth is, I'm more excited with tweaking my blog template. Yesterday, I have read about 10 Things that shouldn’t be on your blog. That's why I go through my blog and put out all (well, almost) that are not necessary. I'm also interested with how to make a blog template from scratch but just looking at the xml and html codes, naloka na ako. Hehe... I always want to learn how to design a blog. That's one work I should do when I'm WAHMy already. Wish-a-wish-a-wish-a-wish-wish-wish!

Saturday, April 20, 2013

Making Your Own Logo

As you all know, I am the one who is designing my blog and I do tweak my template when I am at the mood. I tried to find ready make blogger template design but I can't find ready made template that really suits me. I mean, I can't seem to find one template design that already includes all the features I want.

That's why when I am in the mood and have time, I patiently rearrange and do my own header, background, etc. I have seen blogs with badge and logo so I was inspired to make my own. It was not easy as I need to create a logo that includes all the ideas in my mind about my blog.

Upon searching for a free software that I can download to make my own logo, I stumble upon an online logo creator. I immediately registered and tried to make my own logo and I can say the software is user friendly. It has clear options unlike other photo editors I have tried. You can add symbol and text with many fonts to choose from. You have the options to save your project for future editing and/or download the finished logo. That easy!

Thursday, May 24, 2012

How to Add Social Media Buttons to Blogger

Again, since my blog had a make over, I have to add the embedded buttons. That is pretty hard because I have to research how for I already forgot how to, haha.

I am glad that Google really helps me quickly but I need to choose which is the best and fastest way.

For Facebook, Twitter, Blogger and other social sites share buttons, you can go to AddThis. Follow the instructions bellow on how to add the share buttons.

Then, sign in to your Blogger > Dashboard > your blog’s Design > Edit HTML, and check “Expand Widget Templates”.

Note: Be sure to back up your template before making any changes on it. How to save a copy? Click the “Download Full Template” under Backup / Restore Template. Save it in a folder on your computer.

Find this line of code inside the template box: <data:post.body/>

You can use the search or find feature of your browser. Just press Crtl+F (or Command+F) and paste <data:post.body/> in the find box then press enter. It will take you to that line instantly.

Click SAVE TEMPLATE. There you have your share buttons and you can share your post easily.

For the Facebook Like Button, here's how:

1. Copy the code below:

2. Sign in to your Blogger > Dashboard > your blog’s Design > Edit HTML, and check “Expand Widget Templates”. Be sure to back up your template before making any changes on it. Save template as done above.

Find this line of code inside the template box: <data:post.body/>

Just press Crtl+F (or Command+F) and paste <data:post.body/> in the find box then press enter.

Insert the copied code before the line <data:post.body/>, to appear like this:

Click SAVE TEMPLATE.

If you have any concern, just leave a comment :)

How to Add a Personalized Signature to your Blogger Post

I have done a major makeover of my blog. I have changed the template and theme color using Artisteer and you can learn how it works here.

Then, the hardest part of this make over is arranging the blog widgets, adding the signature and the buttons. It took me 3 days to finally figure out how to add again my signature.

You can actually add a custom signature below each of your blog post. I am sharing you how to embed or add/ personalized Signature to Blogger and it is so easy.

Create your Signature. Make your own signature using softwares like Photoshop and Photoscape, or some online Generators like My LiveSignature.

I create my Signature using Photoscape since this is very easy to use. I create a signature that can be a Signature and post divider, double purpose that is. Cool ha!

Get the url of the Signature. You can upload your personalized Signature to your blogger then copy the url link or you can upload it to image hosting sites like Flicker.

I upload mine at Tiny Pic. All you have to do is to upload the signature from your computer then get the image direct link.

Insert the Signature url to Blogger Template. Sign in to your Blogger > Dashboard > your blog’s Design > Edit HTML, and check “Expand Widget Templates”.

Note: Be sure to back up your template before making any changes on it. How to save a copy? Click the “Download Full Template” under Backup / Restore Template. Save it in a folder on your computer.

Now find this line of code inside the template box: <data:post.body/>

You can use the search or find feature of your browser. Just press Crtl+F (or Command+F) and paste <data:post.body/> in the find box then press enter. It will take you to that line instantly.

Then paste this

<img src='image url' style='border: none; background: transparent;'/><br/>

below that line, so that it would look like this:

Click SAVE TEMPLATE. Your done, so easy right?

Momaye's Diary had a make-over!

Hello guys and gals! I hope you will like the new face of Momaye's Diary.

Why a face lift? I am adding a page yesterday and then something went wrong which I could not trace. The pages suddenly disappear and I can't make them appear, lol! I tried the save html of my template (I thought it is the latest, hmp), but it won't work. Lesson: you should always save the html of your current template before doing or adding something.

So, I decided to have a total makeover using Artisteer. I already posted how to create a personalized template using Artisteer and you can read it here.

I changed the color theme from light green to pink, which I heart. I also add columns to my footer and I will teach you how soon. What I am missing is how to add the signature and the facebook/twitter share. I have yet to find again. My internet connection is so slow, maybe next week I can fix these all.

Goodbye to my old banner!

I tried this one but I wanted a simple one.

So I end up choosing this. Flowers galore, haha!

There you go, Momaye's Diary had a make over and hope you like it!

Happy weekened everyone and keep safe!

How to create a personalized blogger template using Artisteer

I consider myself still new into blogging but I'm sharing what I have learned so far in creating a personalized blogger template.

First you need to download the Artisteer software. We'll use this software to create a personalized blogger template. You can download a trial version here and then install it in your computer.

This is how it will look when you open it.

Choose Blogger.

Click Ideas>Suggest Design. By clicking this, the software will suggest different blogger designs you can edit to make your own personalized template.

Then, you can go to Color and Fonts. You can change the color theme and you can still adjust the colors if you want.

You can choose the fonts that you want too, and adjust the size. I recommend that you stick with one font type to make your site looks neat and so your readers will not get lazy reading your posts.

Under Layout, you can change/edit the the way you page looks like. You can change the Menu position or you choose No Menu also.

You can change the Sheet width, make it narrower, or wider just like the one below.

Change the number of columns by clicking Columns, then just adjust the widths to your desire.

Next, go to Background. You can upload your own background photo or just choose from the available designs in the software. You can change the Glare and Texture types, and the colors too.

After the background, you can edit the Sheet. You may change the off set distance above the menu or may set it as no off set.

If you want to add sheet borders and change the colors, just click borders. There are also some options there like Radius that you can manipulate to your desire appearance.

Now, for the Header, like the Background, you may choose upload your own header. This will make your blog more personalized. Create your own one then just upload. Other options are in the tab that you can manipulate.

With the menu, you can also choose its Gradient and Texture types, and your desired color too.

The items and the sub-items in the Menu bar can also be edited. You can change how the Active Items will appear, its color when hovered and when visited too.

Next is the Article. You may change the fonts of the body, the header, the footer and the links too. many options are in the tab that can help you achieve your desire template.

Like the Article, you can also manipulate the Sidebars. Options are also available for your desire appearance.

Other options are Button and Footer. You can edit them like the way you edit other parts above.

If you are done with editing and your final template is there, upload your new personalized template.

The box below will appear after clicking Publish Template to Blogger.com

Click Publish and a template Code code will be generated.

After clicking Continue, your Blogger layout page will automatically open. Before saving the code, save or download your current template first in case a problem occur with your new template. Clear the template area, paste the code of your personalized template and click Save. Click View Blog to see your new template design.

Did you get it? The software looks complicated but is actually user-friendly. So go make your own template now :)