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

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)

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,

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

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 link to other pages (Facebook, Twitter, etc.) using images

Have no idea what I'm talking about? Just look at the photo below.

It's very easy, my friend. VERY EASY.

Wanna make your OWN signature?!

:)
I promised you how to make your own signature, and welp, here it is!!!!!!
First I'll give you the basic template. And here it is.

(just click on the giant blank spot)
This one is in 250x100 px, the average signature size :)

This one is the average signature one with the STAR, like mine and Twolegers' and Dorey's.
(still 250x100)

This is one longer one, 400x100, in case you have a longer [user]name.


And this one is the 400x100 one with the star :)

Click the one that best suits your [user]name and right-click and save it!
Ookay, so I suggest paint.net for this. Download it at getpaint.net
Open the blank template and youll see its a checkered design. This means that its TRANSPARENT, and we WANT it to stay like that. In order to do that, just KEEP IT SAVED AS A PNG FILE and dont change it to jpeg or bmp or something like that!!

Now. Many peeps just add text and tada. But here are some tips, and how to DO it (For new paint.net users)
First click the T on your toolbar, if you dont see it just click "Window" then "Tools" or click f8.
Now choose from any font. If you want another font, I suggest going over to dafont.com and choose a font you want! Then extract it and install it, if you dont know how to do that google it.
Choose your font (Thats readable, not liek webdings) and a good size (So that people can read it) and click and type your [user]name. You may choose a color from the color wheel, and get as creative as you want! have fun with it though!!!!!!!!! :)
Now thta you finish it, save it and then just remember where it is on your computer, then head over to tinypic.com.

Now, I suggest Photobucket, cuz for all of the signatures ive made, it has never let me down. But idk about Tinypic, lemme try it out....
...Woot it does!! So you may upload it to Tinypic, just click Browse and look for the file on your comp, click ok, and then click upload now! it should just take a few seconds :)

Then youll see the four usual code choices: Email and IM, HTML code, Direct link, and the IMG code. Copy the html code. And here's how to use it:

after u copy it log into blogger, click settings, then formatting
then scroll to the bottom to a 'post template' box. paste the html code there.
after that, save and voila!
to use ur new signature, just click 'new post' and then drag the signature to the bottom of the screen, type whatever you want, then publish and it should show up!!!
but, you may notice a border outlining the signature in a box.
if you wanna remove this box, first go to layout then edit html.
for windows users, hit ctrl+f to open a search box. paste this in there: .post img
for non windows users or if it doesnt show up, just scroll down and see if you can find .post img
then this should show up (or something like this)

.post img {
padding:4px;
border:1px solid $bordercolor;
}

then change the 1 to 0. itll look like this now.

.post img {
padding:4px;
border:0px solid $bordercolor;
}

then preview and save!!
:)



PS: Thanks for redoing Bob, dorey lol :)

Signature for Dorey :)

Welp, Twolegers requested a signature made for Doreysweetie626, so I made one :)



Her's is a teeeeeeny bit bigger than the average size, because her name won't fit in the size. Hope you dont mind :)

How to use it:
first you need to get the HTML code of the signature. but unfortunately, blogger wont let you post the code cuz when you paste it, the code disappears and then the picture shows up!! O_O
So, just click the link and then copy the html code to keep it easy. to do this just scroll down and youll get four codes: email and im, direct link, html code, and img code. aaannndd you know which one to copy :P

Heres the link:
http://i892.photobucket.com/albums/ac127/rentana1234/dorey-1.png

after u copy it log into blogger, click settings, then formatting
then scroll to the bottom to a 'post template' box. paste the html code there.
after that, save and voila!
to use ur new signature, just click 'new post' and then drag the signature to the bottom of the screen, type whatever you want, then publish and it should show up!!!
but, you may notice a border outlining the signature in a box.
if you wanna remove this box, first go to layout then edit html.
for windows users, hit ctrl+f to open a search box. paste this in there: .post img
for non windows users or if it doesnt show up, just scroll down and see if you can find .post img
then this should show up (or something like this)

.post img {
padding:4px;
border:1px solid $bordercolor;
}

then change the 1 to 0. itll look like this now.

.post img {
padding:4px;
border:0px solid $bordercolor;
}

then preview and save!!
hope you enjoy your new signature!! :D
want a tutorial on how to MAKE a signature?! Sure :D Cooommmiiinnnngggg soooooooooonnnnn..... :)