Blogger Tuts http://bloggertuts.com Tut Tut Blogger-o! Fri, 04 May 2012 00:00:00 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Understanding the Cleanroom http://bloggertuts.com/2012/05/understanding-the-cleanroom.html http://bloggertuts.com/2012/05/understanding-the-cleanroom.html#comments Fri, 04 May 2012 00:00:00 +0000 admin http://bloggertuts.com/2012/05/understanding-the-cleanroom.html The term clean room refers to a type of sterile facility that is often used for manufacturing or conducting scientific research and experiment. For certain types of research or manufacturing facilities, it is important to have a sterile environment that is free of dangerous contaminants such as hazardous chemicals, dust and micro-organisms, which may pollute the environment. In order to mitigate the likelihood of contamination people who work in clean rooms generally use sterilized equipment and tools like cleanroom gloves and clean room suits.

The Importance of Clean Rooms in Manufacturing

As far as the manufacturing industry is concerned; clean rooms are usually used in the production of food and medical products. As you can imagine, cleanliness is extremely important when in comes to these two areas of manufacturing for obvious health reasons. Any form of contamination could be extremely harmful and even potentially lethal to consumers of the product. Precaution must therefore be taken to protect against all possible threats to the working environment being polluted with harmful substances. This not only ensures the health of consumers, but also saves the manufacturing company from paying out a great deal of money to settle lawsuits etc.

Clean Rooms and the Scientific Industry

Scientific research and experiment demand absolute sterility in order to garner accurate results to communicate to the scientific community. Contamination of the facility may severely compromise research findings, so scientists make it a priority to use the necessary tools such as cleanroom gloves to protect against that eventuality. Scientific experiments need to be carried out in a controlled environment so that all the variables involved are accounted for. This way results are accurate and can be replicated when the experiment is repeated. Take for example, scientists working on some life changing drug in a room filled with potential contaminants. We can see how that could be harmful to the outcome of the research and seriously compromise the integrity of the study. This example therefore highlights the importance of clean rooms in scientific research.

]]> http://bloggertuts.com/2012/05/understanding-the-cleanroom.html/feed 0 Saving Money By Buying Wholesale http://bloggertuts.com/2012/04/saving-money-by-buying-wholesale.html http://bloggertuts.com/2012/04/saving-money-by-buying-wholesale.html#comments Tue, 24 Apr 2012 07:15:05 +0000 admin http://bloggertuts.com/2012/04/saving-money-by-buying-wholesale.html

As a mother to be, I got a lot of advice from friends, family and
sometimes even from strangers. So when someone suggested that I buy baby clothes wholesale, I found myself more than a little curious. It seemed
like that would be an awful lot of clothes for one little baby. But I
found myself drawn to the idea, because of the savings involved. Yes,
you bought a lot of clothes, but they were purchased at a deeply
discounted rate.

It did not take long to realize that when it came to buying onesies or
jumpers for my brand new little bundle of joy, that wholesale was the
way to go. Newborns are prone to spitting up as their bodies adjust to
their mother’s milk or the formula they are drinking. I found that
buying simple white onesies wholesale was not only a financially sound
investment, but just all around easier on me as I learned how to handle
the rigors of being a new parent. Rather than having to try and scrub
out the yellow spit up stains that would inevitably end up on the
clothing from multiple feedings, I was able to just gather them up in a
box once they became heavily soiled, and use new ones. Then the old ones
could be used as cleaning rags, and we even used a couple to build a
comfortable bed for our new puppy.

Even in the few situations where my son outgrew some of the clothing
before he wore it, they were easily given to friends or relatives, or
donated to charity while still being less expensive than buying the same
pieces from a retail store.

When it comes to buying baby clothes wholesale the internet has made it
easier than ever to find the best deal possible. Now you can go to a
search engine and compare prices from the various wholesale companies,
and find the one that offers the best deal to you.

]]> http://bloggertuts.com/2012/04/saving-money-by-buying-wholesale.html/feed 0 Hello world! http://bloggertuts.com/2011/07/hello-world.html http://bloggertuts.com/2011/07/hello-world.html#comments Tue, 05 Jul 2011 06:13:20 +0000 admin http://demogator.hostgator.com/wp/?p=1 Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!

]]> http://bloggertuts.com/2011/07/hello-world.html/feed 1 Google Font API – The Easiest Way to Use Custom Fonts Ever http://bloggertuts.com/2010/05/google-font-api-easiest-way-to-use.html http://bloggertuts.com/2010/05/google-font-api-easiest-way-to-use.html#comments Thu, 27 May 2010 13:45:49 +0000 admin http://bloggertuts.com/?p=17 Google just introduced us its new Font API. I have played around a with it and I can assure you It’s the best and simplest way to use custom fonts I’ve ever seen.

It takes less than 10 seconds to install and use a new font, and gives you full control over the fonts even with CSS 3. One of the best features is that it’s pretty fast on time loading and supports Internet Explorer 6 (aka Lost Cause).

So here’s a quick tutorial on how to use the new Google Font API on your Blogger Blog.

1 – Choosing the Font

Just go to the Google Font Directory and pick the desired font. There is a quite nice collection already, but I am pretty sure they will keep expanding it while the new API gets popular.

Once you have picked the one you want, just click it and it will take to a new page with further details about the font, how it looks, a couple of variants, etc.

2 – Get the Code!

Now just click “Get the Code”.

And copy the font code:

3 – Installing the Font

As you can see, it gives you a link to a external stylesheet, just copy it and paste between your <head> and </head> tags. Like this:

view plainprint?
  1. <head>
  2. <link href=’http://fonts.googleapis.com/css?family=Cantarell’ rel=’stylesheet’ type=’text/css’>
  3. </head>

Note: In order to get parsed, Blogger asks you to close the link tag, just add a little “/” in the end like this:

view plainprint?
  1. <head>
  2. <link href=’http://fonts.googleapis.com/css?family=Cantarell’ rel=’stylesheet’ type=’text/css’/>
  3. </head>

4 – Using the Font

Now all you have to do is to use it normally the font name in your CSS, like when you are using a general web font like Arial, but make sure you wrap the font name with ‘ and ‘. Like this example given by google:

view plainprint?
  1. h1 { font-family: ’Cantarell’, arial, serif; }

5 – Final Words

I would love to see how you have used this tutorial to improve your blog, just post your examples in the comments below and share your ideas with our community! Also if you have any questions or suggestions on how this tutorial could be improved, don’t hesitate to comment.

]]> http://bloggertuts.com/2010/05/google-font-api-easiest-way-to-use.html/feed 0 Make a Navigation Bar with Automatic Highlighted Current Links http://bloggertuts.com/2009/10/make-navigation-bar-with-automatic.html http://bloggertuts.com/2009/10/make-navigation-bar-with-automatic.html#comments Sat, 17 Oct 2009 02:15:44 +0000 admin http://bloggertuts.com/?p=19

Today we’re going to learn how to make a navigation bar for your blog using a very simple way to highlight current links automatically. This method is very easy and it uses only conditional tags from Blogger, so there is no need for JavaScript.

I will explain here the method and how to make a simple style for your navigation bar, I mean very simple. It’s up to you the way you want to style them, I will not go trough the basics of CSS, but if you follow this tutorial carefully you will get the idea and be able to do it in any blog.

What we are making

Check here the Live Demo of the result we are going to achieve, this is a very simple example using Blogger Minima Template, just so you understand the method.

 

Step 1 – Preparation

As I said, I am not going trough CSS basics and all that, What we are going to explain here is the method to get the result needed, if you understand it, you will be able to make on any blog.

We are going to apply the method on a general blog using Minima template, so quickly go to your Dashboard, create a new blog, choose Minima Template and Make 2 posts Called “About” and “Contact” with some Lorem Ipsum inside. You should get something similar to the live demo.

Step 2 – Tweaking The Cross Column Section

This step is not very important to the method, but as we are going to add the widget on our Crosscol section, we are going to tweak it so it becomes available to receive widgets.

Go to your Blog’s Dashboard > Layout > Edit HTML > Hit CTRL + F > Find class=’crosscol’, and you should get this:

<div id='crosscol-wrapper' style='text-align:center'>
        <b:section class='crosscol' id='crosscol' showaddelement='no'/>
      </div>

As you can notice you have these two parts on your code: style=’text-align:center’ and showaddelement=’no’, the first one make our widgets align in the center, and the second make unavailable to add any widget on your Page Elements section. So to fix it we are going to replace the whole block of code for this one:

<div id='crosscol-wrapper'>
  <b:section class='crosscol' id='crosscol' showaddelement='yes'/>
</div>

Step 3 – Adding the Link List Widget

 

Now that we have tweaked the cross column section, we should be able to add a new widget to it, for this go to your Page Elements section, click to Add a Gadget in the section below your header.

Choose Link List from the panel, now add your links here, as you can see on the picture above, on New Site URL insert the link to your post, in the example I have used the link to my About post, and in New Site Name, the text you want on your menu. Just click Add Link to confirm. You can add as many links as wished.

Step 4 – Giving basic styles to the menu

As I said I will not go trough the basics of CSS here, so go to Layout > Edit HTML, and add the code below right before ]]></b:skin>.

/* Navigation
------------------------------------------------ */
.crosscol .LinkList ul {padding:0px;}

.crosscol .LinkList ul li {
float:left;
list-style-type:none;
margin-right:1px;
}

.crosscol .LinkList ul li a {
border:1px solid #CCCCCC;
padding:5px 10px;
}

.crosscol .LinkList ul li a:hover, .crosscol .LinkList ul li a.current {
background:#ccc;
}

Basically it will make your links align horizontally, give a nice gray border to them, and make the hover and current links have a gray background.

Step 5 – Tweaking the Link List widget

Now we need to make the Link List widget behave automatically on highlighting current links, to do this go to Layout > Edit HTML > Check Expand Widget Templates and search for the following code:

<div id='crosscol-wrapper'>
        <b:section class='crosscol' id='crosscol' showaddelement='yes'>
<b:widget id='LinkList1' locked='false' title='' 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>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
 </div>
</b:includable>
</b:widget>
</b:section>
      </div>

and replace for the following:

<div id='crosscol-wrapper'>
        <b:section class='crosscol' id='crosscol' showaddelement='yes'>
<b:widget id='LinkList1' locked='false' title='' 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'>
       <b:if cond='data:blog.url!=data:link.target'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
       <b:else/>
       <li><a class='current' expr:href='data:link.target'><data:link.name/></a></li>
       </b:if>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
 </div>
</b:includable>
</b:widget>
</b:section>
      </div>

Save it, and you are done.

Some Credits

I found the solution for this tutorial when I was going to make the code for Bloggertuts, I asked my friend Aneesh and he helped me with it, thanks a lot buddy.

Final Words

The is really a handy trick, specially when we get to use the static pages feature. This will help you improve your blog’s usability and give the visitors a clue of what page are they looking at.

Don’t forget to subscribe to get our updates and follow us on twitter.

]]> http://bloggertuts.com/2009/10/make-navigation-bar-with-automatic.html/feed 0 Tabbed Sidebar for Blogger http://bloggertuts.com/2009/10/tabbed-sidebar-for-blogger.html http://bloggertuts.com/2009/10/tabbed-sidebar-for-blogger.html#comments Thu, 15 Oct 2009 10:00:59 +0000 admin http://bloggertuts.com/?p=11

Tabs are well know for being very useful to everyone, specially for those who have a lot of content on their blogs and spend much time thinking where to place new stuff.

I know there are quite a few tutorials around about making tabs for blogger, but they all have one thing in common, are kind of difficult to implement, and may confuse some users.

The method I developed is inspired in a tutorial from Webitect, I just found it very useful and decided to adapt that technique to Blogger platform. This tutorial will bring you a very easy to implement way to make tabs out of your sidebar widgets, here are some features of my method:

  • Easy to install.
  • No need edit html in Sidebar part.
  • Automatically place your handpicked widgets inside tabs.
  • Freedom to set what widgets stay out of the tabs.
  • After implementing, Widgets are normally edited from Page Elements section.

The Final Result

If you want to see it working please check the live demo.

Step 1 – Placing the styles on your CSS

The style of the tabs can be easily changed anytime just using CSS, but this is not the main reason for this tutorial, It’s up to you to change or not, use your own CSS skills. We’ve made a general layout for it, to install it just place the following code right before the ]]></b:skin> line:

]]> http://bloggertuts.com/2009/10/tabbed-sidebar-for-blogger.html/feed 0 Blogger Templates Cheat Sheet #1 http://bloggertuts.com/2009/10/blogger-templates-cheat-sheet-1.html http://bloggertuts.com/2009/10/blogger-templates-cheat-sheet-1.html#comments Fri, 02 Oct 2009 23:02:41 +0000 admin http://bloggertuts.com/?p=14

This is the first time ever I make a visual cheat sheet, It was a little difficult for me, but I think it came out kind of good. I tried to put as much as details as I could. As Blogger templates have a lot of terms to go trough, I decided to make “Chapters” of it, and release them one by one, so you guys don’t have to wait a lot for the full one.

What you’ll get

 

 

 

This is a visual cheat sheet for Blogger templates XML, I will explain each important term that you need to have in mind in order to be a template designer. In this first “issue” I will go trough the Wrappers, means the structural parts of the template, the divs that keep your template together.

How to download

I have made two versions, which are a High Quality PDF and a Medium Quality JPEG file, you can choose any of it.

Step 1 (Very Important)

The first step is very easy and painless… You only need to subscribe to our feed, and follow us on twitter… Once you have done that, you are allowed to do the next step :)

Note: If you proceed to Step 2 without going trough Step 1, SHE will grab your feet in the middle of the night!!

Step 2

  • High Quality PDF (3.54 MB) – Download
  • Medium Quality JPEG (866 KB) – Download
  • Or just View Online

Final Words

I hope you guys enjoy it and I hope that helps you in the path of becoming a professional Blogger designer. Remember that this is only the first edition of my Blogger Templates Cheat Sheet, so make sure you subscribe in order to get the following ones. Aldo don’t forget to follow us on twitter.

]]> http://bloggertuts.com/2009/10/blogger-templates-cheat-sheet-1.html/feed 0 Blogger Resources Link Feed http://bloggertuts.com/2009/09/blogger-resources-link-feed.html http://bloggertuts.com/2009/09/blogger-resources-link-feed.html#comments Tue, 08 Sep 2009 23:15:47 +0000 admin http://bloggertuts.com/?p=21 Let’s make this feed the best resource for those looking for Blogger stuff. Use it to promote your articles to the Blogger community, get more visits and direct traffic to your websites. Let’s share around what Blogger community is up to.

  • Google search goes social
    Yesterday, Google announced the introduction of Google Social Search. This service is available as part of a new experiment on Google Labs and getting started is pretty simple and straightforward.
  • The Blog Templates
    TheBlogTemplates is the place to download free Blogger Templates and WordPress Themes.
  • 5 Useful Tutorials for Newbie Blogger-users
    The best way to learn CSS is to create a Blogger blog. It is a well-known fact that most bloggers and designers detest Blogger, but Blogger is actually the best free blogging platform ever.
  • Top 40+ Blogger Tutorials Roundup
    Yup a one stop for all important blogger tutorials here. So bookmark it for further use and don’t forget to drop a comment if you have a good tutorial i will be glad to add it in my next list. Cheers!
  • Top 25 Magazine Style Blogger Templates
    The 25 Newest Magazine Style Blogger Templates.
  • 50 Surprisingly Amazing Themes for Blogger
    Great collection of the newest amaing Blogger templates. It’s worth a click, many good people featured there.
  • New Google Translator widget
    Translate your Blogger Blog automatically into 51 languages with this incredible translator powered by Google Translate.
  • Blogger theme tutorials
    WordPress certainlly isn’t the only blogging platform available. Thousands of people are tusing blogger for its simplicity and most importantly it is completely free. Here I found some very useful links for you.
  • BloggerTuts Community Link Feed
    Let’s make this feed the best resource for those looking for Blogger stuff. Use it to promote your articles to the Blogger community, get more visits and direct traffic to your websites. Let’s share around what Blogger community is up to.
]]> http://bloggertuts.com/2009/09/blogger-resources-link-feed.html/feed 0