Increasing Your Visitors With Meta Tag

One of our motivations to make a blog is that our articles or pictures can be read by many people or visitors. We expect the visitors from many sources and one of them is from search engine, e.g; Google, yahoo, msn and others.
In order to make our blog get a lot of attention from search engine, we have to add Meta tag at the header of the template we are using.
Meta tag is divided into four aspects and the aspects that people often use as follows;

• Meta tag keywords

The code that is often installed for Meta keyword is as follows;
<meta content=' your keywords here' name='keywords'/>
Below is the sample to install Meta tag keywords:

<meta content='blog, blogspot, blogger, blogspot tutorial, tutorial blog, tutorial blogspot, tutorial, CSS, menu, navigation, JavaScript, template, blogspot template' name='keywords'/>

From the sample above, we can install some keywords which are assumed as the main targets of our blog, among keywords are separated by coma. However, try not to add more than 30 keywords and the keywords should be relevant with the articles in our blog. Meta tag Description
The code that is usually installed for meta tag description is as follows;
<meta content='your blog description here' name='description'/>
Below is the sample to install meta tag description:
<meta content='Tips and trick to easy blogging at blogspot also free download e-book and template' name='description'/>
The blog description is surely matched with the blog content.   If you are still confused to add meta tag in blogspot, just follow the guidance below.

1. Log in into blogger
2. Click Layout
3. Click EDIT HTML tab
4. Click Download Full template and please back up first. (important)
5. Find the code below: <title><data:blog.pageTitle/></title> .
   
6. Add the meta tag code that you have made right under the code below <title><data:blog.pageTitle/></title> .
   <meta content='your blog description here' name='description'/>
   <meta content=' your keywords here' name='keywords'/>
   
7. Click SAVE TEMPLATE
8. Finish

However, if you still confused in making meta tag, now there are many online tools to make meta tag correctly. You only put some keywords and the interest description, then click generate button, your meta tag is made in a short time. One of the website that offers this service is http://www.submitcorner.com/cgi-bin/tools/metagen.cgi .
Have a nice trying!

Make Slide Show Tab View menu

Have you ever visited http://kompas.com? One of the most famous newspaper website in Indonesia... At the left of the site, you can see a tab menu which is usually called "Tab View". Why is it called Tab Menu? Because when the tab is clicked, it will move the menu content (wanna prove, just click the tab). However, it is a little different from the normal tab menu. The tab menu usually shows the content of the menu in turn or what we usually call "slide show". Kang Rohman takes a conclusion that menu has 2 functions; as a "Tab View" and "Slide Show".
Kang Rohman was interested in that tab menu, tried to apply it in blogger template and it works. To see the sample of Slide Show Tab View menu, please visit http://magazine-1.blogspot.com and pay attention to the left side of the top, there you can see the menu that is similar to the menu in kompas.com.

If you are interested in making Slide Show Tab View menu, please follow the steps below.

#1 step

1. Log in into blogger with your ID
2. Click Layout
3. Click Edit HTML tab
4. Click Download Full template. Please back up your template first
5. Copy the code below, then paste it above ]]></b:skin>

   .indentmenu{ font: bold 11px Arial; width: 100%; /*leave this value as is in most cases*/  }  .indentmenu ul{ margin: 2px; padding: 0; float: left; /* width: 80%; width of menu*/ background: transparent; }  .indentmenu ul li{ display: inline; }  .indentmenu ul li a{ float: left; margin: 2px; color: #000; /*text color*/ padding: 5px 11px; text-decoration: none; border: 1px solid #ccc;  }  .indentmenu ul li a:hover{ background:#ddd; }  .indentmenu ul li a:visited{ color: white; }  .indentmenu ul li a.selected{ color: white !important; padding-top: 6px; /*shift text down 1px*/ padding-bottom: 4px; border: 1px solid #000000; background:#000000; }  .tabcontentstyle{ /*style of tab content container*/ border: 1px solid gray; width: 450px; margin-bottom: 1em; padding: 10px; }  .tabcontent{ display:none; }  @media print { .tabcontent { display:block !important; } }

6. Before continuing, please download this script , copy it, then paste it right above </head>
7. Click SAVE TEMPLATE
8. The 1^st is done. Now, why don't you take a rest first, drink coffee, tea or milk to make you relax

Ok, finish you coffee, let's continue to the 2^nd step
#2 step

1. Click Page Element tab
2. Click Add Gadget
   
3. Click plus button (+) for HTML/JavaScript. (img)
   
   
4. Copy and paste the code in available column: 
         
   

   <div style="float:left;margin:0px 10px 0px 0px;padding:0px;height:350px;"> <div id="pettabs" class="indentmenu"> <ul>      <li><a href="#" class="selected" rel="tab1">1</a></li>       <li><a href="#" rel="tab2">2</a></li>        <li><a href="#" rel="tab3">3</a></li>         <li><a href="#" rel="tab4">4</a></li>     </ul>          <br style="clear: left"/>       </div>  <div style="width:240px;text-align:justify;padding: 5px; margin-bottom:1em">  <div id="tab1" class="tabcontent">          <a href="http://magazine-1.blogspot.com/2008/11/obama-will-change-bush-policy.html">         <img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="obamabush" width="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQT7tLy2n9L7-5JzC-Jd8YQXXQZ8GOX-sJEAmE0hDz8-1VmIlybleuKixBd7siZJoVOCmLzXO0Am6vyLpectbKwEFjzh-5eCdtBAO-nBM8GBBlftlMa98CL_nVhJPihseb8oqr2W5PgCw/?imgmax=800" height="152" title="obamabush"/></a>  <p><h3><a href="http://magazine-1.blogspot.com/2008/11/obama-will-change-bush-policy.html">Obama Will Change Busf Policy</a></h3></p>        U.S. President Barack Obama will change several numbers of controversial policies by President George W. Bush, including the restriction of the parent embryo cell research [...]        </div>  <div id="tab2" class="tabcontent">          <a href="http://magazine-1.blogspot.com/2008/11/beyonce-will-never-sell-her-wedding.html">      <img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="beyone" width="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGREM8NAyEse5RNbmvf5fj7lphxt52l2YhJZnHJ4n1PMbhuqjpDfLrm39RxuWO27fbvpsBoba-FvMovxwRxJGzgM3Q_sP0N-f0W12gziBfLe3jY4lkqEUjHoVeCb_-QB3Ax5Qni4CwxgI/?imgmax=800" height="152" title="beyone"/></a>         <p><h3><a href="http://magazine-1.blogspot.com/2008/11/beyonce-will-never-sell-her-wedding.html">Beyone Will Never Sell Her Wedding Photo</a></h3></p>  Beyonce said, she will never consider to sells her wedding photo with Jay-Z to a celebrity magazine that offering a large amount of money as rewards, even she wonder with the amount of money that offered to her [...]          </div>         <div id="tab3" class="tabcontent">          <a href="http://magazine-1.blogspot.com/2008/11/guns-n-roses-will-back.html">         <img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="Guns N 'Roses" width="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqgqXbTPLEuooTs54GDwck_5HBxOHnOVj1772nxzbTILxVS8_L6ZjJ1WlBczDOVRY7cWXq03OH43vWrZ38XPfD0r-EpxfA7lATfks_rfnYQfBHzu64GXWEPj4fzHlmAcsXChTmG1idgVI/?imgmax=800" height="152" title="Guns N 'Roses"/></a>         <p><h3><a href="http://magazine-1.blogspot.com/2008/11/guns-n-roses-will-back.html">Guns N 'Roses Will Back</a></h3></p>       After 15 years not releasing album, the group rock Guns N ' Roses will launch a new album in the United States on 23 November. The band's latest album is "The Spaghetti Incident", released in 1993 [...]          </div>  <div id="tab4" class="tabcontent">       <a href="http://magazine-1.blogspot.com/2008/11/i-pod-can-make-your-ear-buzz.html">       <img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="ipod" width="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisXBORWdRGnFvOFsmYrcEObmZpsPujD0MSrceUjticMcCx3jL1WPtW5jmfmG0BnFQx0mZFPGYW9r-pkF_fjTn983tP4ujoz3UwFYSdQ8yFKLdZF3hWUhUCjOlDBv0lIRW_X6WrEm_-FKk/?imgmax=800" height="152" title="ipod"/></a>       <p><h3><a href="http://magazine-1.blogspot.com/2008/11/i-pod-can-make-your-ear-buzz.html">Ipod Can Make Your ear Buzz</a></h3></p>  Music is one way to wake the spirit, to create happy life, but what happens if the music makes the ears buzz? of course, not the music that makes the ear 'buzzy',[...]          </div> </div>  <script type="text/javascript">       var mypets=new ddtabcontent("pettabs")        mypets.setpersist(true)        mypets.setselectedClassTarget("link")        mypets.init(2000)        </script>

5. Click SAVE TEMPLATE button.
   
6. Finish and view you blog to see the result.
   

The code above is not absolute as Kang Rohman has written. You can modify it as your interest or suitable with your template.
Below is additional information that will ease you in modifying this code.
In the 1^st step, there is a row of CSS code, that code can be modified so that it produces a beautiful row tab. 
Take a look at the code below

<div style="float:left;margin:0px 10px 0px 0px;padding:0px;height:350px;">
<div id="pettabs" class="indentmenu">
<ul>
<li><a href="#" class="selected" rel="tab1">1</a></li>
<li><a href="#" rel="tab2">2</a></li>
<li><a href="#" rel="tab3">3</a></li>
<li><a href="#" rel="tab4">4</a></li>
</ul>
<br style="clear: left"/>
</div>

This code is a tab row with the tab row such as1, 2, 3, and 4. You can change with your favorite ones, such Recent Comments, Recent Post, Shoutbox or anything you want. To arrange the height of your widget, change height:350px  with the value that you want, example; height:400px.
Please, Pay attention the code below too.
<div style="width: 240px; text-align: justify; padding: 5px; margin-bottom: 1em">
The code above is used to arrange the menu content and it can be changed as you want to, such as;
width:240px : it is used to arrange the width, change it with the value that you want, example; width:300px.
text-align:justify : it is used to arrange the writing, change it with the value that you want,
Example; text-align:left, text-align:right.
Also, Pay attention the code below too.
<script type="text/javascript">
    var mypets=new ddtabcontent("pettabs")
    mypets.setpersist(true)
    mypets.setselectedClassTarget("link")
    mypets.init(2000)
    </script>
To arrange the moving of image from one tab to other tab, change 2000  with the value that you want, example; 2100.
Code in "Slide Show Tab View" contains Kang Rohman Articles. Please change it with your own articles.
Have a nice trying
Original Script by: dynamic drive. Modified by: Blogspot tutorial