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 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

Blogging Tips!

Oookay so uhh... I got inspired to write a post filled with blogging tips. This is just personally what I would advise for you to do on your blog. These aren't the best blogging tips in the world but feel free to use them if you like 8)

Sneak Peek!

Here's a sneak peek at the Summer 2011 template! I've already added the header, and Two's still working on the template though.

click to enlarge

Like it?

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,

Next month's template!

Hey everyoneeeee... Happy Easter to all of you who celebrate it!

I just wanna quickly show you guys a sneak peek at next month's template. You might expect sunny flowery May, but really it's more dark and techy and radiant and that stuff. With some purple and splatters added ;) Here's the background to give you sort of an idea -

Click to view in full size

I'm excited to show it to you guys next month. :D I think you'll like it. Stay tuned! Hehehe

Until next time,

...A GIVEAWAY (or contest...) Another one!

Hey everybody! Since Two's gone to Vegas (psh lucky askfduejkf) I might as well do something interesting for you guys. SO HERE'S ANOTHER GIVEAWAY. YAYYYYY

This one requires a little work to enter. It kinda works like a contest - but I don't choose the winner. Instead some random number generating thing chooses the winner for me.

Here are the details!

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!

Take a Look at THIS!

Hey everyone! Check out what Ebtama made using my tutorial!

ISN'T THAT ADORABLE?!?!?!!!!!1111

You should really give out a button code for that :D Keep making more Ebs!

Also, if you've made an animated button or at least attempted to, comment it here! I'd love to see it :)

Until next time,

WOOHOO!

WOOHOO! 150 followers! Thanks!!!

♥♥♥

We love you guys :)

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! :)

Something Awesome

HI EVERYBODY~~~

So I just wanna show you something cool today, that I think you'll all like...

I actually discovered this quite a while ago. I've been testing it out and playing around with it on my test blogs and stuff before I put it on here...

So you know how there's this welcome message that appeared when you came on here?

I just wanna share with you all on how to get something like this!

This tutorial is copyrighted and I'm pretty sure that I can't even come close to explaining this, so here's the website where I got the tutorial from~

http://www.bloggersentral.com/2010/01/adding-entry-or-welcome-page.html

ALL CREDITS GO TO THIS GUY. 8)

Although it can be hard playing around with the borders and colors and stuff, HAVE FUN WITH IT!!! :)

Until next time...

7 Awesome Places Where You Can Edit Pics

Hi guys!

So you know how for many and most contests on the main blog require you to edit or create or do SOMETHING with a picture? (Which, I think is pathetic)

Many of you use Photoshop (which you all illegally downloaded online btw) and for the some of you who a)are too stupid to know how to get free photoshop b)don't want to or can't afford photoshop or c)hate photoshop and don't ever want to use it (WTF IS WRONG WITH YOU), this post is for you!

Here are seven great places ONLINE where you can edit images. 8) From the basics of adding text to totally giving an online makeover, these places are da bomb!

1. Sumo Paint

You've heard of Paint, Paint.NET and all of these other sucky computer APPLICATIONS, but Sumo Paint is an online tool with, in my honest opinion, MANY of Photoshop's features.

To go to the app directly click here or go to http://www.sumopaint.com/app/

Or to go to the official Sumo Paint website go to http://sumopaint.com/

2. Fotoflexer

If you have a Photobucket account you'll definitely recognize Fotoflexer. This lets you add text, adjustments, and even ANIMATIONS to an image! Pretty high tech.

Click here to use the app directly, or click here to go to the fotoflexer website.

3. Photoshop Express

probably impossible to see coz it's a white image and there's a light background

If you think this is like the online version of the real photoshop, it honestly isn't...

...it only contains what you would find under the "Adjustments" part of Photoshop. You can't add text. But you can still crop and add effects :)

To go to the image uploader click here. To directly go to photoshop.com click here.

4. Splashup

Splashup is a pretty cool tool. Probably my favorite out of the seven. It's advanced, but therefore not too advanced that you can't understand how to use it. My favorite thing about it is that it has LAYERS. WOAH. (Okay not so great coz i'm pretty sure that 2-3 more of these programs have layers as well)

Lemme also point out that Splashup ALSO has an application for computers. It's called Splashup Light. It has a little less features than the regular Splashup but it's still great... :)

LOL a lot of links for this one...

Click here for the Splashup website

Click here to directly use Splashup

Click here for the Splashup Light website

and Click here to download Splashup Light.

5. Picnik

Picnik is best for adding additions to images. But, the site also lets you add text and tons of effects which makes it a cool site. Kind of like fotoflexer :P

Click here to go to the Picnik app and click here to go to the Picnik website.

6. Pixlr

I also really like Pixlr. It's very much like Splashup except all the buttons and little icons are PUNY. Microscopic. Can barely see them.

But it's still really advanced :)

Here's the link to the Pixlr website and here's the Pixlr editor.

7. Aviary

LAST OF ALL! Here's Aviary, VERY much like Picnik but it has A LOTTTT more variety! I mean look at the homepage!

Wow. A MUSIC maker? AWESOME!!!

No endings to what you can do on this site...

Here's the link to the Aviary website. Check out and explore the whole site! :)

That's the seven I recommend! There's probably like a thousand in the world but these are just the ones I know of and recommend for editing pictures when you need to edit them for not only contests on the main blog... but anything! :)

Thanks for reading!

Until next time..

Ohai...

Did you know that our blog has gone mobile? 8D Yeah, now you can reach us on your mobile phone or iPod!

Here's how it looks like. (I took the picture from my iPod)

And then you just click little post tab to view the whole post.

You would not believe the trouble I went thru to get this picture uploaded... at once I was in risk of getting my whole iTunes library + all my apps deleted

Oh yeah, and then the racing game contest has ended. Here are the winners...

I took this image off Chobots Official blog coz I'm too fat, lazy and ugly to take my own screenshot.

Doesn't number 6 remind you of someone? -gags-

Haha.

Until next time...