25 Creatively Designed Login Pages

1. How-r-u

2. Mobile Me

3. Redbrick Health

4. Mail Chimp

5. Mig33

6.  Tick Spot

7. Wakoopa

8. KISSmetrics

9. 20×200

10. tuts+

11. Gist

12. Converse

13. Wufoo

14. Product Planner

15. Grooveshark

16. Vimeo

17. Battle.net

18. Taste Book

19. Krop

20. Picnik

21. Yellow Bird Project

22. Campaign Monitor

23. Rhapsody

24. Virtual Paper

25. Cosmic Soda

Have you seen other cool login pages? Don’t keep them a secret. Share them with us in a comment below.

Aligning & Positioning Gadgets (Blogger)

Sometimes people wonder how to align or position a gadget to fit your certain needs. Well its really quite simple to do.


You need to Locate The Widget/GadgetID# 
Now go to Design-->Template Designer-->Advanced--> Add CSS--> Input one of the codes below


This is for basic text alignment. Replace the Blue with center, left, or right
#GadgteID# {
text-align: center;
}


This is for a more precise alignment.You can use Padding & Margin
#GadgetID# {
padding: 0px 0px 0px 0px
}


You can also use a code like this to fit your needs.
#GadgetID# {
position:absolute;
left:100px;
top:150px;
}


This would display your gadget  100px off the left side of your browser screen and 150px off the top. You can adjust this to your liking.


Their are a few different types of positioning variables you can use.


absolute:  Generates an absolutely positioned element, positioned relative to the first parent element that has a position other than static. The element's position is specified with the "left", "top", "right", and "bottom" properties


fixed:  Generates an absolutely positioned element, positioned relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties




relative:   Generates a relatively positioned element, positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position


static:   Default. No position, the element occurs in the normal flow (ignores any top, bottom, left, right, or z-index declarations)


inherit:    Specifies that the value of the position property should be inherited from the parent element

How to delete comment in our own Chatbox?

When I was checking all of my comments, I found a comment from a blogger.In the comment, he asked me "How to delete comment in our own shoutmix chatbox? He also asked me whether I know or not.Do you know that we can delete comment in our own Shoutmix chatbox? I bet plenty of you did not know yet? If you want to learn how to delete comment in our own Shoutmix chatbox, follow the steps below.

Steps to delete comment in our own shoutmix chatbox.

Step 1: You must go to www.shoutmix.com.

Step 2: You need to log in using your Shoutbox ID and password. To sign in, you must click at the login at the menu bar.

Step 3: After you had fill the blank below and click at the login button,you will directly go to your Shoutmix-Settings.

Step 4: To start delete the comment in the Shoutmix, you must go to your shoutbox and click at the Delete button. 

Step 5: After that, the message or comment in your shoutbox will disappeared.

Done!! Don't forget to leave this post a comment..

Adding Scroll Box To Widgets/Gadgets

Sometimes you don't want to have a homepage that scrolls for miles. This can slow down loading time and make you blog look unprofessional. So the solution to this is to add a scroll effect to the sidebar widget/gadgets. This allowing the widget/gadgets to scroll instead of your whole page.




1. Locate your Gadget ID#
2. Go to Design--> Template Designer--> Advanced--> Add CSS--> Input code below
#GadgetID .widget-content {
height: 400px;
overflow: auto;
}


4. Replace the GadgetID with the one you just found in step 1
5. Change the height size to whatever you want.


After your done it should look something like this.
#LinkList2 .widget-content {
height: 400px;
overflow: auto;
}


(Optional )
You can add something to change the colors of the scroll bar but this only works in Internet Explorer.  All other browsers will just display as your normal gray scroll box.  


To add color effects to the scroll bar just add this code below just below the  overflow: auto;


scrollbar-3dlight-color:#000000;
scrollbar-arrow-color:#000000; 
scrollbar-base-color:#00ff00; 
scrollbar-darkshadow-color:green; 
scrollbar-face-color:00ff00; 
scrollbar-highlight-color:lime; 
scrollbar-shadow-color:lime; 




Example:


#LinkList2 .widget-content {
height: 400px;
overflow: auto;
scrollbar-3dlight-color:#000000;
scrollbar-arrow-color:#000000;
scrollbar-base-color:#00ff00;
scrollbar-darkshadow-color:green;
scrollbar-face-color:00ff00;
scrollbar-highlight-color:lime;
scrollbar-shadow-color:lime;
}


Just play around with the colors to get them to your liking.

Upload prepare Template to blogger

If you want to upload any prepare template from any where e.g http://createyourownbloggertemplate-noor.blogspot.com/p/blogger-templates.html 


you need to follow the following steps:

1. Select any 1 template as you like.
2. download it.
3. extract file
4. now go to blogspot.com and sign in by your ID.
5. go to Design and then edit HTML.
6. now download your present template as a back up file.
7. then go to chose the file and select XML file which was include in template extracted file and upload it.
8. always remember keep widget file if you will not keep it then file must be lost.
9. you can also check uploaded file by preview.
10. and finally press save template.

with template files read me files are also attached which has given the steps as per need. majority of template need to follow the given same instructions but some need change, you can also upload it to follow instructions in given read me file.

Open Link List Gadget Links in a New Window (Blogger)

By default a Link List link will load the URL clicked with in the window you are in. With this tweak you can change that and have it open another window to load while keeping the same window you had before open. This is the same as adding target="_blank" into a URL.
First you need to Locate The Widget/GadgetID#.
Go to Edit HTML and Expand Widget Templates.
Click Ctrl+F to activate the browser Find bar.
 In the Find bar that pops up input the Gadget ID# (This will locate that gadget in your HTML page.)
You should see something like this code below
<b:widget id='LinkList3' locked='false' title='Blogger Help Forums Helps' type='LinkList'>
<b:includable id='main'>


<b:if cond='data:title'><h2><data:title/></h2></b:if>
 <div class='widget-content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>

    6.   Replace the code in red with this code below.
<li><a expr:href='data:link.target' target="_blank"><data:link.name/></a></li>

    7. Save and your done

Simple Link Button

To make a link button simply add this code into a post in Edit HTML mode or in a HTML/javascript gadget.
<form><input onclick="window.location.href='YOUR LINK'" type="button" value="BUTTON NAME" /></form>


Change the BUTTON NAME to what you want to display and change the YOUR LINK to the link you want it to direct you too.


EXAMPLE:

Post Links For Static Pages

With this tweak you can add more links into your page list and you can also link to outside sites. Normally with the Page gadget you can only have up to 10 Static Pages. But using this method will be little more work but you can have unlimited amount of links in the Page List.


First off I want to point out what makes Page gadget links look the way they do. This is done through the CSS styles located in your template, it has nothing to do with the gadget its self.


You can go the easy route and add a Link List gadget just below the header. This would give you the same design and look as a Page gadget but allow you to make use of post or outside links.


The other option is to make your own Page gadget with a HTML/javascript gadget. This is a little more difficult, but if you ever decide to customize the tabs and links even farther then you would already be ahead of the game. I will be making tutorials on how to customize your tabs and links making them truly unique in the near future. 


1. On your Page Elements screen add a HTML/javascript gadget.
2. Input this code below


<ul>
<li><a href="www.MyURL.com">Page 1</a></li>
<li><a href="www.MyURL.com">Page 2</a></li>
<li><a href="www.MyURL.com">Page 3</a></li>
<li><a href="www.MyURL.com">Page 4</a></li>
<li><a href="www.MyURL.com">Page 5</a></li>
</ul>


This code above is just basic HTML coding no more.


Replace the Orange with the URL you want that Page Link to go to.


Replace the Red with the the Name you want that Page Link to display.


If you want more or less you can add or remove one of these lines below.


<li><a href="www.MyURL.com">Page #</a></li>


This HTML/javascript gadget must be placed in the Crosscol section of you blog. That is the section just below the header.


You have no need to read any farther unless you want to know about the HTML used in this tweak.
This tweak is really just three HTML codes put together. Below I will go over each one.


Keep in mind all HTML codes have a Start Tag and a Closing Tag.


This HTML code is to designate a Unordered List (UL)


Start Tag: 
<ul>


Closing Tag:
</ul>


This HTML code is to designate a List Item (LI)


Start Tag:
<li>


Closing Tag.
</li>


The last part is a bit different and requires more then a Start tag and End tag.
<a href="www.MYURL.com">Link text</a>


This is just a basic Hyperlink code. Every time you click the link button in the Post Editor you are creating one of these. The Anchor (A) is to designate followed by the Hypertext Reference (HREF). 


When we put all 3 codes together we get this below.
<ul><li><a href="www.MyURL.com">Link Text</a></li><ul>

Download File Button

With this tweak I will show you how to make a simple button that will allow your visitors to download files with the use of  HTML <form> and <button> tags.


Their are other methods to make this button as well but I am doing it this way as a demonstration in using these HTML tags.  Also some other methods require JavaScript which I am trying to avoid since some users disable JavaScript on their browser.  


The syntax for creating a download file button is as followed.
<form action="Direct Link To File" method="get">
  <button>Download Now</button>
</form>


Red text is the direct link to the file you wish for your users to download.
Orange text is the title to display on the button.


The code above will render the following.

HOW TO SOLVE CSS ERRORS IN BLOGGER TEMPLATE USING FIREBUG

Knowing CSS can help you in solving Blogger template errors ,or make some customization . But how to do that ? how to find where is the trouble or find what CSS attribute you need to change when  make customization ? In this post ,I will show you what I did : using Firebug (a Firefox add-on ) to work with CSS .
Firebug is a great add-on of Firefox browser ,it's very popular in web development because it can help us inspecting website elements ,debugging errors in CSS ,script ,seeing web layout ....
To use Firebug ,first ,Firefox browser must be installed in your PC . Then go to website :http://getfirebug.com/ ,click on Install Firebug to get the latest version and installed this add-on to Firefox .

After installing Firebug ,you will see an new button in browser window ,this button has the image of a bug .

Enter the Blogger blog you want to fix errors or make customization
When the page fully loaded ,click on firebug button ,the firebug window will appear at the bottom ofbrowser window .

Click on the arrow button in firebug window
 
After click this button ,there will be a rectangle around the element that the mouse is pointing .  Move your mouse pointer to the element you want to change size or fix error
In the right panel of firebug window ,you will see the CSS tags of element which you are pointing .

You can click on the value of these CSS attributes to change value of them ,for example ,in this picture ,I changed width of an element in the right panel ,and see how it look after changing immediately in browser window .
You can also add more attributes to a CSS tags to make it display as you want ,for example ,you want color of all text in an element changed to white color,just right click on right-panel and ,choose new property ,and then add color:#fff;

That's very easy and fun because you can see how your site is right after making changes .

But how to know which CSS need to change ,or meaning of CSS tags or what need to add to make it display as you want ? You can see it easily in my previous post : 31 online CSS cheatsheets that may helpful .

You can use Firebug to see the element layout ,the right or left margin ,padding... in Layout tab in right panel .
When you finish the work ,just go to Blogger template (xml file) ,and add the tags or attributes that you've just added in Firebugs to your template .
There're many functions that Firebug can help you in finding bugs and fixing errors .It's very easy to use ,believe me ,just need a little of time ,you can handle this software and make it work for you ^^