Thursday, December 12, 2013

Our 2013 Christmas Tree

Here is our Christmas Tree this year, not very different from last year.



I did not want to purchase any new ornaments this year. In fact, I donated some of our ornaments so the tree is less cluttered. I kept all the meaningful ones like the Lion & Lamb one that symbolizes peace, Chocolate and martini (mom & dad's favorites), the felt ornament H made all by herself with felt stickers, the one ornament I bought this year that says 2013 and the nicer ones like Santa, Starburst and the glitter one.


I also added some bangles that my daughter likes to wear to dress up alone with her hand and foot prints from 1st Christmas, a Baby Girl ornament and a personalized wooden ornament that has our names and year of marriage engraved, which was a present from hubby (a traditional gift for 5th anniversary).


For the skirt, I used the two Red and Silver tree skirts I had for a layered, fuller look. I skipped the nativity set this year, because all the pieces break easily and I can't trust H around it.





And for the topper, I used the birds and nests ornaments all grouped.


Here it is in all its glory.


And a shot with the biggest gift we got in life, sitting under the tree, in her school Christmas Program outfit.



Merry Christmas you all. Linking up to Holiday Cheer in Blogsphere @ Megan's and Courtney's.

Monday, December 9, 2013

Christmas Craft - Chalkboard Christmas Countdown

This year I wanted to make an advent calendar like this with little notes inside for different Christmas  activities but H is not old enough to read/understand and enjoy the activities. So I opted for a gift a day kind of advent thing. Still wanting to go with my inspiration (I had some colorful bags left over from her last birthday), I tried to find 25 tiny gifts but there were only few that can fit into those bags. After a lot of thinking, I came up with this idea of using Chalkboard art on a big poster that shows how many days left until Christmas and then a box or basket underneath/ in front of it to hold a gift each day till Christmas. With the help of these free printables as reference, I free handed the writing on both sides of a black foam board. I love using black foam board for chalk art (I used the same to draw a bunch of animals for H's 2nd birthday). They are cheap, can be cut easily to needed size and easy to draw on. One problem, you can't make mistakes, it's almost impossible to erase. Luckily I chose simple design so it wasn't a problem.

Front of the board says "Days until Christmas" and a reindeer with the numbers cut from scrap paper using my SLICE.



Back of the board says "HAVE YOURSELF a Merry little Christmas" (totally copied from the printable) which I can display on Christmas.



PS: I made the above 3 images high resolution so you can save or print if you like.



I love it so much. It makes me happy every time I see it. H is so happy to find her gifts everyday. I have been telling her about the elf (didn't introduce Elf on the shelf physically yet, may be next year) and how he watches and reports her behavior to Santa in Northpole, so she has been good these days.

Few more clicks of this.




Linking this post to Holiday Cheer in the Blogsphere @ Michaela & Cassie's blogs.

Saturday, December 7, 2013

DIY Pinterest Hover Button - Designing and adding a Pinterest Hover button to Blogger images - Tutorial

Most of the blogs have cute social media icons on the side bar or at the bottom of each post as well as Pinterest icon on each image in their blog posts. I am not much into social media but wanted to put the Pinterest icon on my images  for starters. I don't have much experience with web designing, so I tried searching for free Pinterest icon images but all I could find was the pinterest logo in different colors. I assumed most of the bloggers have their icons designed when they get blog designs done. Though I know some bloggers design their blogs themselves, no one provided (at least I couldn't find) any tutorial of sorts on how to DIY these icons. So I attempted to create my own. Not being a Photoshop pro, I had to turn to PicMonkey. After about 20 minutes of trial and error I realized it is easier than I thought to create my own social media icons. Here is what I came up with.


Now for new bloggers like me, here is the step by step tutorial.

Open PicMonkey and click on Design.






At this point you can resize the image or crop it in PicMonkey. Then save it to your computer. I saved it to computer as is and opened the image in Preview on my Mac then resized it.


Now that you have image ready, follow instructions from this link to upload your newly created Pinterest Icon into blogger and add it to your blog images.

That's it. Simple as that. So simple that you can change your icons as your blog design changes or just because.

Hope this tutorial will be useful.





For easy reference, I am copying the instructions from above referred link.

*********************************************************************************
BELOW INFORMATION IS COPIED FROM DIGITALK ONLINE BLOG just incase the link provided above did not work. I do not intend to repost it as my original content.
*********************************************************************************

NOTE: This requires editing your Blogger template. Before proceeding with the instructions below, I recommend that you backup your Blogger template first!
Don’t want to tackle these updates yourself?  I can help!
  1. In your Blogger Dashboard click on Template and then Edit HTML.
  2. Scroll down to the bottom of the code and find this line:   </body>
  3. Copy this code from BloggerSentral and paste it into your template code right above the</body> code.
  4. Click the “Save Template” button.
  5. Click the “Close” button.
Now view one of your blog posts and you should see a red Pin It button appear on top of your images when you put your mouse pointer over an image. You can call it quits now — or we can customize things a bit…

Use a Custom Pin It Image:

Download a Pinterest Icon to your computer or create your own. (You can get Free Pinterest Buttons for your Blog here!) Then upload your image to an external website such as Photobucket (and skip to step #5 below) – or you can upload it right to your Blogger blog:
  1. Create a new post.
  2. Add your Pinterest icon to the post.
  3. Once you see the image in your post, click the HTML button (top left corner). Now you will see the HTML code of the post. Look for the image code. It will start with <img and will include src= followed by a URL in quotes, similar to the yellow highlighted line shown in the image below. (Click the image to view a larger version of it.) Copy the URL that is in the quotes after src= (see the red underlined text in the image below); this is the URL of your image.
    Custom Image in Blogger
    Using a Custom Image for Your Pinterest Hover Image in Blogger
  4. Do not publish this post. The sole purpose of this new post is to store your image on Blogger. I recommend saving the post as a draft just in case you forget the URL. However, you can delete this post if you want to, since the image will still stay on Blogger’s web server.
  5. Now go back to your template’s HTML code (Template > Edit HTML) and find this code:
    var bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzT9AxfXX2C5_oX9tp-m5MVG_N3ey6EJ7enBDo6SlyoTfy3tE8Sl56UcOangqNY7c8pRX0i9UgXH1sD65ove8MpvK-XaFk11O_gXSu7YOomMF4UwCk-FnIa58ldScs6Xn68M1aiTm-_2MT/s1600/pinterestx1_72.png"; 
    and replace the URL in the quotes (in red above) with the URL of your image.
  6. Click the “Save Template” button.
  7. Click the “Close” button.

 Change the Position of the Pin It Button:

By default the Pin In button will appear in the center of your image. If you prefer that it appears in the corner of your images instead, you can easily do that. Simply find this line of code in your template’s HTML code (Template > Edit HTML):
var bs_pinButtonPos = "center";
and replace “center” with one of these positions:
  • topleft
  • topright
  • bottomleft
  • bottomright
If you want to offset the Pinterest Button from the corner of your image so there is a little space between the button and the corner of the image, you can add some CSS code to the <head> section of your template (Template > Edit HTML):
.pinit-wrapper {margin:-10px;}
(The negative value for the margin pushes the button inwards.) For example, see the yellow highlighted code in the image below:
Adding Space Around Your Pinterest Hover Image in the Corner
Adding Space Around Your Pinterest Hover Image in the Corner