Cute begginers

♥Hello bbs!♥ It's been a while since I made a post. Today I will give you some codes you may find useful if you are new on blogspot, I am not the master blogger, but I was lost when I started so I want to help the ones that are lost too. 

I will make 4 basic things for you to edit / add on the simple template & will be divided in: 

• Basic simple codes
• Cursors
• Widgets
• Backgrounds & buttons

I hope you like it!

Marquee images

 A really simple code that will be useful ! Just put this code on a new widget "html" one

<marquee direction="right" scrollamount="2" ><img src="YOUR IMAGE HERE"/></marquee>

The direction can be "up", "left, "right" or "down" & the scrollamount is the speed of the animation, if it's a higher number the speed will be faster. If you want that picture to send you to another page add an <a href="URL"> before the image.. like this:

<marquee direction="left" scrollamount="4" ><a href="URL"><img src="YOUR IMAGE"></a></marquee>

Blockquote

Ok so the blockquote is like the text box that appears when you make a quote on a new post it can be easily edited going to personalize or customize (My blogger is in spanish so I'm not sure) then chose advanced & choose the last option "ADD CSS" 

Paste the following code:

blockquote {
color: #FONT COLOR;
background: #ffffff url("YOUR IMAGE");
border: BORDER color/style;
}

Remember that there are different kind of borders.

border: 1px solid #000; just change the "solid" for: Dotted * Dashed * Groove * Ridge

Don't want the navbar?

The navbar that blogger puts on top of your blog & everyone elses blog.

Just paste this code on "Edit HTML" & place yourself before </head>

<style type="text/css">
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}
</style>

Dividers between widgets 

Go to  Customize > Advanced > "ADD CSS" 

.column-right-outer .widget, .column-left-outer .widget {
border-bottom:4px solid #000;

padding-bottom:20px;
} What is in blue is what you can edit, 4px is the width of the line, "solid" the type of line & #000 the color of the line.
But what if you want an image instead of a stupid line??
well add the following code in the same place than the other:

.column-right-outer .widget, .column-left-outer .widget {
background: url(YOUR IMAGE)no-repeat 50% 100%;padding-bottom:70px; border:0; }

Now here are some cute dividers you can use:

Columns

Okay so you may have 2 or 3 columns in your layout.. right? want to put a border on them ? & even a background! it may look like this (it doesn't have a background):

Same than before Customize > Advanced > "ADD CSS" & the following code:

.main-inner .column-right-inner {
  border:3px DASHED #fcc;
  background: #fff url(YOUR IMAGE); 
  padding: 7px;
}

Change what it's in blue (color, size, type). If you want a background color instead of an image delete the "url" thingy.
If you want the center column to have the border instead of the right one just change "right" for "center" or "left".

 

To add a cute cursor is a really easy thing to do! Paste the following codes AFTER </body> going to Edit HTML

You can use the following cursors that have already the code OR easily use these images:

 

or whatever image you want, & change the URL on the code

<style type="text/css">body
{cursor:url("NEW URL"),default}</style>

<style><!-- BODY{ cursor: url('http://i756.photobucket.com/albums/xx204/maeca_louisse/23-1.png'), default } } --> <!-- CURSOR CODE BY: ITSTHEMAE.TUMBLR.COM // CHOCCOPANDA.TUMBLR.COM --> </style>  <style type="text/css">body {cursor:url("http://img706.imageshack.us/img706/9681/angelitai.gif"),default}</style>
<style type="text/css">body {cursor:url("http://i911.photobucket.com/albums/ac312/china_bella81/cursors/BunnyBonbon1.gif"),default}</style>  <style> body, a, a:hover { cursor:url('http://www.dolliehost.com/dolliecrave/graphics/cursors-animals/6.gif'), auto }</style>

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/nature/nat-10/nat984.cur), progress !important;}</style>  <style> body, a, a:hover { cursor:url('http://www.dolliehost.com/dolliecrave/graphics/cursors-cute/1.gif'), auto }</style>

<style> body, a, a:hover { cursor:url('http://www.dolliehost.com/dolliecrave/cursors/cursors-cute/cute27.gif'), auto }</style>  <style type="text/css">body {cursor:url("http://img827.imageshack.us/img827/3761/angelita3.gif"),default}</style>

Now if you want to add effects.. for example.. stars add this code (click) after </body>

Now some cute widgets you can use on your sidebar!

<embed src="http://img184.imageshack.us/img184/7526/dreamgirl2kl4.swf" width=190 height=290 type=application/x-shockwave-flash Wmode="transparent"></embed>

<embed align='middle' src='http://img100.imageshack.us/img100/3305/write2ks4.swf' width='160' height='193' flashvars='notice=text here' wmode='transparent'></embed><br />

<embed src=http://img137.imageshack.us/img137/2522/flowerstimemt6.swf width=161 height=197 type=application/x-shockwave-flash quality='high' wmode='transparent'></EMBED>

<embed src="http://blog.roodo.com/prb999/9c51ba94.swf" width="160" height="250" wmode="transparent"></embed>

Finally be happy with these backgrounds

HOPE YOU LIKED THE POST!!!