Wednesday, February 11, 2015

How to Decorate Your Blog for Valentine's Day

*Warning*
 There will be an obsessive amount of pink in this post. You have been warned. You may now continue. ;)

So this evening I thought I would share a couple easy codes with you that will get your blog ready for the Valentine's Day season. 
Feel free to use these but please do not claim these as your own and please give me the credit if you share these codes elsewhere.
Watercolor Blog Background
So here's a watercolor blog background for you guys. I painted it and then edited it digitally. To me it looks like fluffy cotton candy. Ah, cotton candy. Mmm. Whoops, sorry...got detracted there. ;)*clears throat* Now for the tutorial.
p.s before following the steps below, make sure you have a transparent background so it will show. 
Go to 'Template'>>>'Customize'>>>'Advanced'>>>Add CSS
Copy the code below and paste it into the CSS section. Then Save.
body { background-image: url(http://3.bp.blogspot.com/-WNo3Yfyw8NQ/VNv8urVvDSI/AAAAAAAAGrI/cjrld-99tPo/s1600/Untitledaa.png); background-repeat: repeat; }

Falling Hearts
So you've probably heard of or seen snow (little dots) falling on some blogs. I think it's a super cute and cool effect so I thought I would make a Valentine's Day version. The code below will make little hearts fall on your blog. Click here to see the demo. 
Tutorial:
Go to 'Layout'>>>'Add a 'Gadget'>>>'HTML/Javascript'
Copy the code below and paste it into the gadget. Then Save.
<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['rain1']="http://2.bp.blogspot.com/-c6pIBzu45yo/VNjEP_t1xOI/AAAAAAAAGp8/pRHSKWJJYr8/s1600/Untitled.png";image_urls['rain2']="http://2.bp.blogspot.com/-c6pIBzu45yo/VNjEP_t1xOI/AAAAAAAAGp8/pRHSKWJJYr8/s1600/Untitled.png";image_urls['rain3']="http://2.bp.blogspot.com/-c6pIBzu45yo/VNjEP_t1xOI/AAAAAAAAGp8/pRHSKWJJYr8/s1600/Untitled.png";image_urls['rain4']="http://2.bp.blogspot.com/-c6pIBzu45yo/VNjEP_t1xOI/AAAAAAAAGp8/pRHSKWJJYr8/s1600/Untitled.png";$(document).ready(function(){var c=$(window).width();var d=$(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(5,50)}).animate({top:(d-10)+'px'},e(10000,10000),function(){$(this).fadeOut('slow',function(){f(a)})})},e(1,8000))};$('<div></div>').attr('id','rainDiv')
.css({position:'fixed',width:(c-20)+'px',height:'5px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=20;i++){var g=$('<img/>').attr('src',image_urls['rain'+e(1,4)])
.css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'2px.'+e(30,500),'margin-left':0}).addClass('rainDrop').appendTo('#rainDiv');f(g);g=null};var h=0;var j=0;$(window).resize(function(){c=$(window).width();d=$(window).height()})});</script>
<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>$(document).ready(function(){var a=$('<img>').attr({'src':'','border':0});$('<a></a>').css({position:'relative',right:'0px',top:'22px','z-index':'-1px'}).attr({'href':'http://tutorialuntukblog.blogspot.com/2011/10/tutorial-kelopak-bunga-berguguran-di.html'}).append(a).appendTo('body')});</script>
Enjoy your new digital decorations! I hope you all like them. :)

Would you like me to post more code tutorials?

41 comments:

  1. Oh my goodness, so cute! Love the falling hearts!
    Hagen

    www.jihcphotography.blogspot.com

    ReplyDelete
  2. Cool! Thanks for sharing. :)
    Sophia
    someplaceinthemidst.blogspot.com

    ReplyDelete
    Replies
    1. No problem. Glad you like them. :)

      Delete
  3. Aww, so cute! :D I love the background. XD

    xoxo Morning

    ReplyDelete
  4. Those falling hearts are amazing (:

    ReplyDelete
  5. Those falling hearts are so cute! And the background is adorable.

    ReplyDelete
    Replies
    1. Thank you, Ashley! You are so sweet. :)

      Delete
  6. AWWWW I lurv the little hearts muchly. Definitely puts me in the Valentine's Day spirit;)

    ReplyDelete
  7. oh, how cute! I love the falling hearts! :D

    ReplyDelete
  8. These are awesomeeee!! You should totally post more tutorials. ♥

    xoxo

    ReplyDelete
    Replies
    1. Thanks, Adelaide! I definitely will.♥

      Delete
  9. Cute! Thats awesome! I wish I was good at designing blogs! I found a class that teaches blog/web designing, and I might take it! :D Great post and happy Valentines day in advance!
    Clara <3

    ReplyDelete
    Replies
    1. Thank you, Clara!
      How awesome! You should totally give it a try. :) Thanks, you too! <3

      Delete
  10. This is so cute! Especially the falling hearts one. I never used those, partly because I didn't think it fitted with my designs, but I always thought it was really cute <3

    ReplyDelete
  11. I like your "warning". The hearts are really cute!

    ReplyDelete
  12. This is amazing! I love the falling hearts on my blog. Thank you!

    Sophia.xo

    ReplyDelete
    Replies
    1. Thank you so much, Sophia! I'm so glad you found this helpful. ♥

      Delete
  13. Thanks for sharing! I would love to see more html/coding posts.
    ---
    I just start a party called Friday Friends. It's about finding new blogs and bloggers, please if you would check it out and link up?
    Thank you!
    -June

    ReplyDelete
    Replies
    1. No problem, June! <3
      How awesome! I'll definitely check that out. :)

      Delete
  14. I LOVE these! I would love to see more html/coding tutorials. I tried a class in java coding and stuff like that, but it really didn't come naturally to me. I guess I just need to practice some more XD
    -Lauren <3

    ReplyDelete
    Replies
    1. Thanks, Lauren! Yeah, coding can be really difficult. Google is a life saver for finding awesome (and easy) codes. :)
      Well you know what they say, "Practice makes perfect." <3
      Thanks for commenting!

      Delete
  15. So cute!! I love these freebies :) Thanks for sharing them with us! xx.

    ReplyDelete
    Replies
    1. Aw, thank you, Elisabeth! I'm so glad you like them. <3

      Delete
  16. Ohhh Thank You!!! love the hearts! Prefect touch for my card making post! Thanks again!
    Vanessa
    simplyperfectone.blogspot.com

    ReplyDelete
    Replies
    1. No problem, Vanessa! Thank you so much! :D

      Delete
  17. I love the background and falling hearts! I have been looking for little ways to spice up my blog for Valentines day, thanks for sharing<3 -Bethany!

    ReplyDelete
  18. These are so cute! Love the look and it really shows how dedicated you are to blogging.

    Claire x
    http://brightandclearblog.blogspot.com.au/

    ReplyDelete
  19. I had to make it rain hearts, I just had to! Ahaha thanks for these, Eve, I might actually keep those little hearts year round because they fit so well with my design. And that wallpaper is seamless - very well done!

    ReplyDelete
  20. I love the hearts!! XD Do you know how to do other objects?

    ReplyDelete