<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/AVvXsEi2RmFDOn4CDYePKKCyaY4TVpaS4sUpmnUSOv3GsclwJ1lvcaa0nVK4rWz5uHsn3Eqi4G8k-ok9wSggxkw8HBSi0VR4rgg3EGEWC6jbRYCUiA_hyMqqNkHj6h2e1V7ku2m1EcZc73uhtFM/?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/AVvXsEiUciBFd4A8KiHSdMwiG4I_it_kitxdWOVa4MSW7WgLQw1R8-6oNZtfpurHAfMAn2d3LXR-YfN4h0Vml-zDKdV_0bpnB9oLtdBsYU7oxEnksqoQcFXI-_VY2qr-UYIxhyTG2pjD-ob2kYo/?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/AVvXsEjP62DmUxJcrf448aF1nLKDULSY3JiJFrkty1MN826aoPoPbSQ7b9sy74B3GD7AK-QMgNtdGeojz4d5fR69tfaAaKHoggv7pXgY_OeMHzZ_dtNx2HUJ_jRiU8yXuNhQo6YhQOydpGxEJ4g/?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/AVvXsEjzGxevv71ZGxjeIDtjvqkpFA22sEbxOmL3nxmggkN1ynZcOoHj45530o_z_0C9izoikrKjJrA6BkLywfmaBJ7mdVJ-2BjTi3rZ6A52hhAxNtbKOzGsPjI9-raXjC4Hn9P6uLC8N7xjUiM/?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>
Click SAVE TEMPLATE button.
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 1st 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.
<
</blockquote></pre>
