Rounded Corners on All Your Post Images

Hi guys!!!! It's been so long since the last tutorial was posted on here!!! So here's a quicky welcome back tutorial :~)
How to Make all your Post Images Have Rounded Corners wow this is a long title
Here's an example of what I mean:

1) Sign into Blogger, then go to Template > Edit HTML

 2) Hit CTRL+F (Command+F on Macs) and search for the following:

.post-body img

OR

.post img

3) Under .post-body img/.post img add this code:

border-radius:15px;

You can change the 15 to any number you'd like. Decrease it to make the corners sharper, or increase it to make the corners rounder.
Your end result should look something like this:

4) Save and you're done!

Good luck and have fun! ^_^ Until next time,

How to add images in comments

If you don't know what I mean, click here for a preview.

How to add images in comments

1. Copy this code:

<script src='http://hosting.gmodules.com/ig/gadgets/file/105066904960012479556/nccode.js' type='text/javascript'/>

2. Sign into Blogger. From your dashboard, go to Design>Edit HTML.

3. Hit CTRL+F to search, and search for: </body>

4. Paste the code directly above </body>. It should look like this.

5. Save! Now, [im]http://yourimage.com[/im] (replace yourimage.com with direct link to image) should actually show up in a comment. Go ahead, try it out! But before that...

 FOR YOUR READERS: After saving, go to Settings>Comments and scroll down to the Comment Form Message.

Write something like this in the box;

Add images in your comment! Copy this code: [im]http://myimage.com[/im] and replace "http://myimage.com" with the direct link to your picture.

It doesn't have to be exactly that, but make sure it clearly states "[im]http://myimage.com[/im]"!

Now, you're done! :)

Good luck!

Until next time,

Rainbow Link Hover Effect

Super quick tutorial from our new template! Here's how to get this effect whenever you hover over a link;

It's super easy!

Rainbow Link Hover Effect

1. Copy this code;

<script src='http://techieblogger.com/wp-content/uploads/2009/07/rainbow.js'/>

2. Sign into Blogger, then go to Design > Edit HTML

3. Hit CTRL + F and search for: </head>

4. Paste the code directly above </head>. Save and you're done!

Until next time,

HOW TO GET RID OF THE UGLY NEW BLOGGER DESIGN!

If you just want me to get to the point... click here

Mkay soooo for all of you Chobots bloggers out there, you've probably noticed the [DAMN UGLY] new Blogger layout. Me and Two were friggin mad about that and I was about to send a niiiice long complaint on how ugly this design was to Blogger. Aaand then I found out how to get rid of that ugly design. Before I go onto that though, let me just explain how UGLY this new design is.

click to view larger

So this is your dashboard. In my opinion, Love1000's designs are more colorful and original than this. JUUUST KIDDING.... cus all Love does is steal our designs and claims them as her own. What a moron~

Here's the overview of a blog. This is just full of bullcrap... seriously. The overview itself is full of worthless stats crap and its just agonizingly annoying. THIS IS JUST A TOTAL COPY OF WORDPRESS. I hate Wordpress cus it's so hard to use and the design is just plain ugly. PLEASE TAKE A LOOK AT THE WORDPRESS OVERVIEW AND COMPARE IT TO THE BLOGGER IN DRAFT OVERVIEW.

Enough of my ranting... here's how to go back to the nice, good looking, NORMAL Blogger design.

HOW TO GET RID OF THE UGLY NEW BLOGGER DESIGN!

1. Sign into Blogger

2. You should be on your Dashboard now. Find the "Make Blogger in Draft my default" checkbox, and uncheck it.

Nothing'll happen to the page, so go to Blogger.com again and the normal design should be back up. If you type in draft.blogger.com INSTEAD of blogger.com, the new design will appear.

GO TO BLOGGER.COM FOR THE OLD DESIGN, AND GO TO DRAFT.BLOGGER.COM FOR THE NEW ONE.

Until next time

How to make a Go to Bottom button

Here you go everybody x)

How to make a Go to Bottom button

Oookay first of all, lemme tell you that I have no idea what people find useful with Go to Bottom buttons... but it's just something fun to have on your blog 8) Here we go!

1. Make a go to bottom button of some sort. Obviously there won't be a lot on the internet, because nobody really has one of these on their blogs, and I'm pretty sure not a lot of people know how to make a go to bottom button either. Here's a sample on I quickly made, and feel free to use it if you want. 

Upload your image to Tinypic or Photobucket!

2. Log on to Blogger, then from your Dashboard go to Design>Page Elements>Add a Gadget>HTML/Javascript.

3. Paste this into the gadget:

<a name="bottom"></a>

3. Now, drag this gadget to the very bottom of the page.

Click to view larger

4. Again, click Add a Gadget>HTML/Javascript, and this time, paste the following code. If you already have a gadget containing your Back to Top button code, open that up.

5. Paste the following code into the gadget:

<a style="display:scroll;position:fixed;bottom:5px;left:5px;" href="#bottom" title="Go to Bottom"><img src="URL_GOES_HERE" /></a>

Replace URL_GOES_HERE with the direct link to your image. Feel free to play around with the left bottom thing. (bottom:5px;left:5px;) Once you feel that your go to bottom button is fine, you're good to go!

Have fun, and I hope this helped you 8)

Until next time

Make an alert message/popup box

Heyyy!! New tutorial today... this time it was sent in to me, not requested, by Angelrachel. (Otherwise known as.... Love's sister. But way nicer.)

Here it is!

How to make a popup box/alert message

Normally, this is kinda annoying (just for me) but if you wanna do it, go for it!

1. Log onto Blogger. Then go to Design>Edit HTML.
2. Hit CTRL+F (Command F or something on macs... wtf I keep forgetting) and search for <body>
3. Directly below that, paste the following code;

<script type="text/javascript">alert("Write what you want to pop out!")</script>

4. Change "Write what you want to pop out!" to whatever you want the alert message to say. Be careful... don't delete the quotes 

5. Preview and Save!
Soo thanks Angelrachel! If you wanna submit a tutorial to me, feel free to send one in to aalexa555@gmail.com.

Until next time,

Make a Show/Hide Navbar button

It's been a super long time since the last tutorial... Here's a new one, requested by Magiic.

How to make a Show/Hide Navbar button

First, go to Blogger > Design > Page Elements > Add a Gadget > HTML/Javascript.
Then, copy and paste this code:

<script type="text/javascript">
var showHeader=false;
function ShowHideNav()
{
showHeader=!showHeader;
var nav=document.getElementById("navbar-iframe");
if (showHeader)
{
nav.style.visibility="visible";
nav.style.display="block";
}
else
{
nav.style.visibility="hidden";
nav.style.display="none";
}
}
</script>
<style type="text/css">
#navbar-iframe {
visibility: hidden;
display: none;
}
</style>


<span style="font-weight:bold; font-size:20px;" onclick="ShowHideNav();">
Show/Hide the Navbar
<a style="visibility:hidden;" href="#"></a>
</span>

You can also customize the button.
The first way is to change the "Show/Hide the Navbar" text (bolded) to anything you want.
You can also change the appearance by editing the code in the span style;

span style="font-weight:bold; font-size:20px;"

If you know how to, change the bolded text to any appearance settings you want... if you don't, you can check this out to learn some cool customization code. (Click on anything under "CSS Styling")

Save, Preview, and View! YAY. YOU'RE DONE! :D

And here's a little tip. Add your button above the header so it'll be easier for people to click on it. If you need to know how to add gadgets above the header, click here!

So that's basically it!

Until next time,

Custom Color Navbar!

Hey guys! Today I'm going to show you how to change the color of your navbar.

Usually when you try to pick a new navbar color, blogger only gives you boring options. Blue, black, silver, transparency's, boring stuff. I'll show you how to change it to your own custom color.

Here is an example:

{Click to view larger}

Its really really easy. Just follow these easy and simple steps...

Take a screenshot on an iPod

Hey guys. Here's a quick tutorial for all you iPod Touch and iPhone users out there... Ever seen something cool on your iPod/iPhone and have wanted to take a screenshot of it? Here's how to take a screenshot on an iPod/iPhone. Really quick!

1. Go to the app or page or whatever that you wanna take a screenshot of.
2. Press down the lock button and the Home button together and you'll see a flash and hear a click. That means your pic has been taken.
3. Go to your Pictures and your screenshot will be there!

Now you can sync your iPod and upload your pic onto your computer and share it with people!

It's really easy, isn't it?
Until next time,

How to make a randomly changing header

Happy Wednesday everybody! Today I've decided to do another tutorial cus this has been requested numerous amounts of times.

So you all know how we have different headers every time you refresh the page on here. We don't have a different header for each page... but we DO have a randomly generating header, so you could either see one header or the other. Let's get started!

Quickee Tutorial

Hey everyone! Quickee tutorial for the hour. I'm writing this on my iPod - so don't mind if some things are misspelled or doesn't make sense.

Today's tutorial is on how to have a different background for each post. (Recommended by Fruity (these tutorials are especially helpful for blogs like Shrinky's blog, where there are different authors and each author has a color coded post).

So let's get started! First off, just write your post. Don't worry about the background part for now - we'll do that later!

After you have finished your WHOLE post, switch from Compose mode to Edit HTML mode. Now, add this part of code before your whole post:

<div style="background: url(URL goes here);">

And if you want just a color for your background (not an image) here's the needed code:

<div style="background:#FFFFFF;">

And of course you have to end your div tag! So put this at the end of your code:

</div>

That's it! Now just preview and publish your post!

Until next time...

2 Tutorials in 1!

Woohoo! Two tutorials today. First one is how to have an icon next to post/sidebar titles (requested by Gymore), and the second one is how to have different backgrounds for each page of your blog (requested by Icey24635... haha I'm so awesome I memorized all those numbers after your name).

Here we goooooo!

How to Install a Favicon

Hey! Here's a new tutorial. It may seem a little hard, but it's really easy :)

 Today's tutorial is on how to install a favicon!

How to install a Post Divider

Hey! Here's a new tutorial, how to install a post divider, requested by Tapity1.

How to install a Post Divider

1. Find out the width of your blog's main wrapper

First of all, you'll need to find out the width of your main wrapper. That way, you can make sure that your post divider is the right size.

To do this, go to Design>Edit HTML on your blog.

Hit CTRL+F to search. Search for...

#main-wrapper

Now, you'll find a code that looks like this:

#main-wrapper {

width:425px;

(more code here)

The width of your main-wrapper is whatever number that's under your width. In my case, it's 425px.

2. Make your Post Divider

Now, make your post divider! REMEMBER TO MAKE THE WIDTH THE SAME WIDTH AS YOUR MAIN-WRAPPER! Otherwise, it'll be too big or too small.

 I also suggest making the height 50-75px. Make sure that you save it as a .PNG! Not only will it have good quality, but if you want your post divider with a transparent background, PNG is the only format that works.

3. Host your image online

Now, upload your image to Tinypic or Photobucket.

Leave the window open coz we'll need the direct link for later.

4. Install your Post Divider

Now, log onto Blogger, and go to Design>Edit HTML.

Hit CTRL+F again and search for...

.post {

Now, you'll find a code that looks something like this.

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}

 Now, delete this whole code and replace it with...

.post {
background: url(URL GOES HERE);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:5.5em;
}

Replace "URL GOES HERE" with your post divider's direct link. You might want to change the "5.5" for "padding-bottom" with a 5.0 or 4.5 if you think your post divider isn't "fitting". Preview and save!

Have fun and enjoy!

Until next time...

Amazing Effect #3! Ehh not really...

UPDATE: the tutorial has been updated (totally changed haha)... scroll down for more!

Hello! I know I have to post the last of the three amazing effects, but I actually thought of one idea but then I realized it would be hard to make you guys understand.

So, instead, here's a banner and a tutorial! :)

Amazing Effect #2!

HELLO!

That's the next effect... text shadow!

 THIS EFFECT DOESN'T WORK ON INTERNET EXPLORER. SUCKS.

Here's the basic code:

<div style="text-shadow: 5px 5px 5px #45DDE0;">
Text here!</div>

Pretty simple! Now to explain how to change/alter this...

To change the....
Horizontal shadow? Change the FIRST "5px" you see.
Vertical shadow? Change the SECOND "5px" you see.
Blur distance? Change the THIRD "5px" you see.
Shadow color? Change the "#45DDE0" to any color you want! (Click here for color wheel)

That's it!
Until next time...

Amazing Effects... Rounded Corners!

Hi guys!

Here are some cool effects for... stuff. Mostly images and text :)

First lemme just warn you that some of these effects won't work on IE and Opera!

I'll also be posting these effects (3 in total) on 3 different days coz you know I'm just lazy like that :)

So first off...

1. Rounded Corners

This effect does not work on IE (Internet Explorer)

YAYYYYY

So here's the code I used for this...

<div style="border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
-moz-border-radius:25px;
border-radius:25px;">
YAYYYYY
</div>

Now I'll explain this code. HARDIHARHAR

border:2px solid #a1a1a12px: width of the bordersolid: kind of border#a1a1a1: the 6 digit HTML color code padding:10px 40px; can't really explain that so just click here LOL
background:#ddddddThe background color...
width:300px...I think that explains itself.
-moz-border-radius:25px;border-radius:25px;
They're both almost the same thing... right? The -moz- at the beginning of the first part stands for "Mozilla". Why? The normal "border-radius:25px;" doesn't work on [Mozilla] Firefox. So, that first code helps support Firefox. SO ADD BOTH CODES! :pYou can also adjust the border radius by increasing or decreasing the 25.
Now that I've explained everything, I think you sorta get it by now...
Here's a starter code to help you get started!!! This code will work for all purposes (blog posts, blog widgets (HTML/Javascript), etc.)
<div style="border:2px solid #CCFFE8;
padding:20px;
background:#F5C9FF;
width:300px;
-moz-border-radius:25px;border-radius:25px;">Text here! </div>

(Here's how it's supposed to look like...)

Text here!

Haha have fun!Oh yeah and if it doesn't work the first time you try it... TRY AGAIN. AND AGAIN. AND AGAIN...

Until next time...

How to add a back to top button!

Hey guys. New tutorial! And its easy.

How to add a back to top button. If you don't know what I means, it means to click on a button that scrolls all the way to the top of  your blog for you! I have one on this blog. Click on the "Back to Top" button, (Right hand corner) and it will scroll all the way back up without refreshing.

To do this, add a gadget on your layout page, and click HTML/JavaScript (pretty obvious) 

Next, paste this code:

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="URL_GOES_HEREEE" /></a>

Now you can make your own picture of the "back to top" button or find one on the internet.

Here is an example-

 

But of course, yours won't be boring like that one.

When your done with your back to top pic, upload it to tinypic, and replace the "URL_GOES_HEREEE" with your picture link.

-Two

How to have scrolling text/a scrolling image on your blog

Hey!

So recently I was checking thru the comments and I saw this one tutorial request that fruity sent to me.

Here's an example of what I think she means:

This is called a Marquee Scrolling Image. There's also scrolling text, such as this:

Twolegers Chobots Blog... WHEEEE I'M SCROLLING IN SOME DIRECTION


Today I'm gonna show you how to do both of these.

Scrolling Text

This is the code to doing the text:

<marquee behavior="scroll" direction="left" scrollamount="5">Put anything you want here!</marquee>

 So, you can also totally customize this code :P

Obviously you can change the "Put anything you want here!" to ahem... anything you want actually.

You can also change the direction to down, right, up, alternate (like bouncing back and forth) and some more i think...

JUST DON'T REMOVE THE QUOTES (")!!!

You can also change the scroll speed by changing the 5 in the scrollamount area to any whole number between 1-100. I'm pretty sure it can outgo 100 though... You'll just have to experiment that to find out!!
 Scrolling Image

What you'll have to do for this is first of all, find an image to use.

If you're using your own image be sure to upload it to Tinypic or Photobucket or some other image hosting site!

Here's the image I'm gonna use for this, uploaded to Photobucket:

http://i868.photobucket.com/albums/ab244/aalexa555/logo.png

Now, copy and paste the code below in Notepad or something:

<marquee behavior="scroll" direction="left" scrollamount="5">
<img src="/urlgoeshere" alt="HELLOOOO" />

Some things to change...

1. You can choose to change the direction if you want. (choose from: left, right, down, up, alternate)

2. Change the "/urlgoeshere" to the url of your image. KEEP THE QUOTES!

3. Change the scrollamount to anything you want. A whole number from 1-100 please! I would suggest keeping it at 5 though.

4. Change the HELLOOOO to anything you want. This message will be shown if your reader puts their mouse over the image.

So, this is my final code:

<marquee behavior="scroll" direction="right" scrollamount="10"><img alt="HELLOOO" src="http://i868.photobucket.com/albums/ab244/aalexa555/logo.png" /></marquee>

With that being said, here's my final product:

Awesome!

You can also totally customize the marquee font. I suggest using this website for customizing this. (Also check out the rest of the site for some awesome blogging techniques!) Although there's not much to do when it comes to customizing the scrolling images.

Anyway, thanks for reading :)

Until Next time...

How to Turn a Video Into a GIF Image for a Blog Button!

OHMYGAWSH. I just found out how to turn a video file into a .GIF file, and then use that image for your blog button!
And sorry... I'm too lazy to add a LOT of pictures...

Anyway. For this tutorial, you will need...