Simple Coded by <small>Tommie Hansen</small>

Dimana ada web/blog keren, gaya punya, lugas dalam penyampaian artikelnya, maka disana Beben si bloglang anu ganteng kalem tea akan menclok mengacak-ngacak seluruh postingan mengenai tutorial tentunya...what are you doing dudes :D Seperti teman kita Tommie Hansen ini! Mencari desain halaman web profesional, profil perusahaan atau cara untuk dagangan produk kita melalui iklan? Saya lebih suka mail di mana anda menentukan lebih mendalam apa yang anda benar-benar ingin dan tidak. Komunikasi adalah, tentu saja, salah satu hal yang paling penting ketika bekerja dengan klien. Namun terlalu banyak bicara jarang baik untuk setiap proyek. Seperti kata, tentukan apa yang anda inginkan dan jangan malu untuk menulis terlalu banyak. Jika anda misalnya telah melihat halaman desain atau web yang Anda sukai dan ingin desain anda atau halaman di baris yang sama gaya kemudian pergi ke depan dan mengirim screenshot, materi atau link ke halaman web di pos. Jangan ragu untuk melampirkan dokumen Adobe PDF atau apapun lainnya dapat anda temukan.

Itulah segelintir kata-kata dari empunya webnya. Sekarang mari kita masuk ke artikel²nya ;)

Simpel CSS Menu

CSS

#exampleMenu {
width:800px;
margin:auto;
position:relative;
}
/* base menu style */
.menu {
height:40px;
background:#999;
padding:0 10px;
margin-bottom:30px;
}
.menu li {
float: left;
list-style:none
}
.menu a {
display:block;
padding:0 10px;
text-decoration:none;
height:40px;
font:bold 11px/40px arial,helvetica,sans-serif; text-transform:uppercase;
}
.menu a { float: left; } /* Needed for IE6/IE7 */
.menu a {
color:#444;
text-shadow:1px 1px #bbb;
}
.menu a:hover {
background:#555;
color:#f00;
text-shadow:1px 1px #666;
}

XHTML

<div id="exampleMenu">
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Categories</a></li>
<li><a href="#">Random</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Graphics</a></li>
<li><a href="#">Designs</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

Dengan begitu saja kita sudah memiliki sebuah menu simpel pure CSS.

Simple CSS menu

jQuery simple tabs

The jQuery Script Plugin<script type='text/javascript'>
//<![CDATA[
$(function () {

var alltabs = $('div.tab'); //selector for all the tabs
var tabs = $('#tabs'); //selector for the tab menu
alltabs.first().show(); //show the first tab
tabs.find('li:first').addClass('on'); //add class 'on' to the first li to set the item to active

tabs.find('a').live('click', function() {
alltabs.hide()
tabs.find('li').removeClass('on')
$(this).parent().toggleClass('on')
var tabref = $(this).attr('rel')
$(tabref).fadeIn(500)
this.blur()
return false;
})

}); //end domready
//]]>
</script>CSS

#tabs {
width:100%;
height:30px;
margin:0;
padding:0
}
#tabs li {
float: left;
margin-right:5px;
list-style: none
}
#tabs li a {
display:block;
padding:3px 5px;
text-decoration:none;
}
/* background for active tab */
#tabs li.on a {
background:#555;color:#fff;
}
/* hide tabs */
.tab {display:none;}
.tab {
border:2px solid #ddd;
padding:10px;
border-bottom:2px solid;
border-top:0
}

XHTML

<ul id="tabs">
<li><a rel="div.tab1" href="#">Tab 1</a></li>
<li><a rel="div.tab2" href="#">Tab 2</a></li>
<li><a rel="div.tab3" href="#">Tab 3</a></li>
<li><a rel="div.tab4" href="#">Tab 4</a></li>
<li><a rel="div.tab5" href="#">Tab 5</a></li>
</ul>
<div class="tab tab1">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div class="tab tab2">
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div class="tab tab3">
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
<div class="tab tab4">
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
</div>
<div class="tab tab5">
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus.
</div>

example jQuery simple tabs

jQuery show/hide anything

The jQuery Script Plugin

<script type='text/javascript'>
//<![CDATA[
$(function () {

var hiddendivs = $('div.hidden'); //selector for all the hidden div's
var showmore = $('a.showhidden');

showmore.live('click', function() {
$(this).toggleClass('on')
$(this).parent().nextAll('div.hidden:first').slideToggle(300)
this.blur()
return false;
})

});
//]]>
</script>

CSS/* hide tabs */
.hidden {display:none;}
.hidden {
border:2px solid #ddd;
padding:5px;
border-bottom:2px solid;
margin:0 auto;
}
a.on {color:#777;}XHTML

<p>Click Show more1</p>
<p><a href="#" class="showhidden">Show more1</a></p>
<div class="hidden">
<p>Lorem ipsum dolor sit amet quae quasi error laudantium totam quia voluptatem natus dolores sit sit, voluptatem dolores sunt aut illo sed explicabo voluptatem aut sit illo aut sunt ut perspiciatis quia quae illo illo, voluptatem voluptas. Voluptasaspernatur ut ab et qui dicta qui ipsam iste</p>
</div>
<p>Click Show other more</p>
<p><a href="#" class="showhidden">Show other more</a></p>
<div class="hidden">
<p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<p>Click Show a lot more</p>
<p><a href="#" class="showhidden">Show a lot more</a></p>
<div class="hidden">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
</div>

example jQuery show/hide anything

Maaf jika disini Beben tidak memaparkan dimana-mananya kode itu diletakkan pada template sobat. Beben rasa sudah pada tauk semua kode CSS dimana dimasukinnya (sebelum kode ]]></b:skin>), kode HTML dimana (didalam tag <body>) dan script itu dimana (baiknya sebelum tag penutup </body>)!!! Kode CSS yg ada dipostingan Beben ini sudah ditambah/dirubah guna kebaikan dalam penerapan dalam template sobat-sobat :) Please visit http://byme.se/
Happy blogging \m/