Hay friends, Dengerin lagu yuks
Hehehehe ..
Andyrra

Male, 45 years

Batam, Indonesia

If you're doing your best, you won't have any time to worry about failure and The past can't see you, but the future is listening.

andyrra.com

Translate

Java Filipino Czech English iran Romania Thailand Bangladesh India India French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

poto

Mounting created Bloggif

9 Jun 2013

Cara Membuat According Dengan CSS dan JQuery

design according menuBismillah.... di hari yang cerah ini semoga sobat masih semangat dalam dunia blog dan masih ingin berkreasi di dunia online via blog baik menggunakan CMS Blogger ataupunCMS WordPress atau CMS yang lainnya. pada postingan ini saya akan sedikit sharecara membuat according dengan menggunakan CSS dan JavaScript JQuery.


Untuk membuat according sekarang ini tidak terlalu sulit karena sobat tinggal contek aja kode kodenya dari blog/web orang lain dan sobat tinggal terapkan di blog kita, bukan ngajarin yang tidak benar tapi daripada kita tidak berkreasi dan tidak bergerak sama sekali he he,mendingan kita ngembangin yang sudah ada, karena untuk berkreasi itu emang cukup sulit dan diperlukan skil yang tinggi.

Oke daripada bicara kesana kemari, mendingan kita langsung ke cara membuat Menu According, untuk membuat menu ini yang diperlukan adalah 
  • JavaScript Jquery silahkan sobat kunjungi situs Jquery nya di alamathttp://jquery.com/ 
  • CSS untuk mendesain tampilan Menu According
  • Terakhir adalah Script HTML
Terus seperti apa Menu According itu? saya kuang paham dan kurang tau definisi according itu seperti apa, jika sobat penasaran dengan arti dan makna According silahkan sobat cari di mesin pencari misalkan Google,Yahoo,Bing, dan lainnya.

Sekarang kita lanjut saja ke TKP jika sobat tertarik dengan menu according  ini, silahkan sobat ikuti dan bisa di copy paste, he he.

Script CSS According

<style type='text/css'>
.container {
    width: 500px;
    margin: 0 auto;
}
h1 {
    font: 4em normal Georgia, &#39;Times New Roman&#39;, Times, serif;
    text-align:center;
    padding: 20px 0;
    color: #aaa;
}
h1 small{
    font: 0.3em normal Verdana, Arial, Helvetica, sans-serif;
    text-transform:uppercase;
    letter-spacing: 0.5em;
    display: block;}
h2.acc_trigger {
    padding: 0;    margin: 0 0 5px 0;
    height: 46px;    line-height: 46px;
    width: 500px;
    font-size: 2em;
    font-weight: normal;
    float: left;
background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));
background: -moz-linear-gradient(top, #c9151b, #a11115);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#c9151b&#39;, endColorstr=&#39;#a11115&#39;);
cursor: pointer;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
h2.acc_trigger a {
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 0 10px 0 10px;
}
h2.acc_trigger a:hover {
background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));
background: -moz-linear-gradient(top, #c9151b, #a11115);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#c9151b&#39;, endColorstr=&#39;#a11115&#39;);
cursor: pointer;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
h2.active {
color: #de898c;
background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
background: -moz-linear-gradient(top, #aa1317, #ed1c24);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#aa1317&#39;, endColorstr=&#39;#ed1c24&#39;);
cursor: pointer;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.acc_container {
margin: 0 0 5px; padding: 0;
overflow: hidden;
font-size: 1.2em;
width: 500px;
clear: both;
color: #d9eef7;
border: solid 1px #0076a3;
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -moz-linear-gradient(top, #00adee, #0078a5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#00adee&#39;, endColorstr=&#39;#0078a5&#39;);
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.acc_container .block {
    padding: 20px;
}
.acc_container .block p {
    padding: 5px 0;
    margin: 5px 0;
}
.acc_container h3 {
    font: 1.5em normal Georgia, &quot;Times New Roman&quot;, Times, serif;
    margin: 0 0 10px;
    padding: 0 0 5px 0;
    border-bottom: 1px dashed #ccc;
}
</style>

JavaScript According 

<script type='text/javascript'>
$(document).ready(function(){
    
//Set default open/close settings
$(&#39;.acc_container&#39;).hide(); //Hide/close all containers
$(&#39;.acc_trigger:first&#39;).addClass(&#39;active&#39;).next().show(); //Add &quot;active&quot; class to first trigger, then show/open the immediate next container

//On Click
$(&#39;.acc_trigger&#39;).click(function(){
    if( $(this).next().is(&#39;:hidden&#39;) ) { //If immediate next container is closed...
        $(&#39;.acc_trigger&#39;).removeClass(&#39;active&#39;).next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
        $(this).toggleClass(&#39;active&#39;).next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
    }
    return false; //Prevent the browser jump to the link anchor
});

});
</script>

Terus kita gunakan Script Jquery kita cukup panggil saja dengan secript seperti di bawah

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>


Jika sobat sudah punya hosting sendiri silahkan sobat donwload Script Jquery nya di disini dan masukan dalam server hosting sobat.

Langkah terakhir cara penerpan di tag HTML sebagai contoh saya menggunakan 5 tab According 


<div class="container">
    <h2 class="acc_trigger"><a href="#">TAB 1</a></h2>
    <div class="acc_container">
        <div class="block">
            <h3>TAB 1</h3>
            <p>isi Tab 1 </p>
        </div>
    </div>
        <h2 class="acc_trigger"><a href="#">TAB 2</a></h2>
    <div class="acc_container">
        <div class="block">
            <h3>TAB 2</h3>
            <p>isi Tab 2 </p>
        </div>
    </div>
    <h2 class="acc_trigger"><a href="#">TAB 3</a></h2>
    <div class="acc_container">
        <div class="block">
            <h3>TAB 3</h3>
            <p>isi Tab 3 </p>
        </div>
    </div>
    <h2 class="acc_trigger"><a href="#">TAB 4</a></h2>
    <div class="acc_container">
        <div class="block">
            <h3>TAB4</h3>
                <p>isi Tab 4 </p>
        </div>
    </div>
    <h2 class="acc_trigger"><a href="#">TAB 5</a></h2>
    <div class="acc_container">
        <div class="block">
            <h3>TAB5</h3>
                <p>isi Tab 5 </p>
        </div>
    </div>
</div>
Nah munkin itu sedikit info tentang cara membuat menu according jika sobat mau menerapkan dalam blogger sobat tinggal copy Code JavaScriptnya danCode CSS dan masukan di bawah tag
<head> atau di atas tag </head> , terus sobat tinggal sisipkan Code HTML nya di dalam tag
<body> atau sobat tinggal masukan di dalam Gadget HTML/JavaScript. Terakhir Good Luck Happy Blogging.

Get free daily email updates!

Follow us!



Share to Facebook Share this post on twitter Bookmark Delicious Digg This Stumbleupon Reddit Yahoo Bookmark Furl-Diigo Google Bookmark Technorati Newsvine Tips Triks Blogger, Tutorial SEO, Info

0   komentar

Cancel Reply

Led


copas gif

loading

SOCIAL NETWORK

email  
   
 
google plusGoogle+
 
  youtube 
 
andyrra.com

VISITOR FROM

andyrra.com

RECENT POST



>

Enter your email address:



what is my ip address?