Posted by Aak
Aak-share.com Updated at: 12:16:00 PM

Stylish Tab Accordion Menu UI Awesome

6 comments:
Stylish Tab Accordion Menu UI Awesome - Dengan mengusung stylish Metro UI kedalam Blog design UI yang fully featured menjadikan tampilan lebih indah dan menarik pada Blog dan tampilan itu pun ada pada Tab Accordion .  Tab Accordion membuat tampilan lebih hidup dengan css animasi tabion , tampilan pada Tab Accordion Menu UI yang di komobinasikan dengan font Awesome menjadikan tampilan lebih dinamis dan menarik .



Untuk menciptakannya , Anda menuju Editor Template kemudian cari kode </head> , lalu salin kode berikut dan terapakan diatasnya atau sebelumnya .

<link href="http://fonts.googleapis.com/css?family=Dosis|Open+Sans" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://002-jbwp.jb-webs.com/02-show/Plugins/UserPlugins/MC-Tabs/css/animate-custom.css" type="text/css">
<link rel="stylesheet" href="http://002-jbwp.jb-webs.com/02-show/Plugins/UserPlugins/MC-Tabs/css/tabion-css.css" type="text/css">
<link rel="stylesheet" href="css/tabion-css-ie8.css" type="text/css" />

Berikut ini markup HTML-nya ,  seperti di bawah ini :

<div id="mainform">
    <!-- START TABION -->
    <ul class="tabion height-500">

        <!-- Start Tab 1 -->
        <li>
       
             <!-- Start Tab Button -->
   <label for="tab11" class="tabtile tabtile-small solid-blue-2 hovershadow-blue light-text">
                <i class="fa fa-group fa-3x"></i>
                <span class="light-text">Group</span>
            </label>
            <input type="radio" name="tabion" id="tab11">
            <!-- End Tab Button -->
           
            <!-- Start Tab Content -->
            <div class="tab-content animated tab-rollIn solid-blue-2 light-text pos-top-100">
                <p class="title"><i class="fa fa-group"></i> GROUP CONTENT</p>
                <p class="closebt"><label for="close_tabion"><i class="fa fa-close fa-2x"></i></label></p>
                <p>
ISI KAN CONTENT ANDA DI SINI .......
                </p>
            </div>
            <!-- End Tab Content -->
        </li>
        <!-- End Tab 1 -->
       
       
        <!-- Start Tab 2 -->
        <li>
            <!-- Start Tab Button -->
   <label for="tab12" class="tabtile tabtile-small solid-red-2 hovershadow-red light-text pos-left-100">
                <i class="fa fa-download fa-3x"></i>
                <span class="light-text">Download</span>
            </label>
            <input type="radio" name="tabion" id="tab12" checked="">
            <!-- End Tab Button -->
           
            <!-- Start Tab Content -->
            <div class="tab-content animated tab-bounceIn solid-red-2 light-text pos-top-100">
                <p class="title"><i class="fa fa-download"></i> Download</p>
                <p class="closebt"><label for="close_tabion"><i class="fa fa-close fa-2x"></i></label></p>
                <p>
ISI KAN CONTENT ANDA DI SINI .......
                </p>

            </div>
            <!-- End Tab Content -->
        </li>
        <!-- End Tab 2 -->

        <!-- Start Tab 3 -->
        <li>
            <!-- Start Tab Button -->
   <label for="tab13" class="tabtile tabtile-small solid-orange-2 hovershadow-orange light-text pos-left-200">
                <i class="fa fa-comments fa-3x"></i>
                <span class="light-text">Comments</span>
            </label>
           
            <input type="radio" name="tabion" id="tab13">
            <!-- End Tab Button -->
           
            <!-- Start Tab Content -->
            <div class="tab-content animated tab-flipInY solid-orange-2 light-text pos-top-100">
                <p class="title"><i class="fa fa-comments"></i> Comments</p>
                <p class="closebt"><label for="close_tabion"><i class="fa fa-close fa-2x"></i></label></p>
                <p>
ISI KAN CONTENT ANDA DI SINI .......
                </p>
            </div>
            <!-- End Tab Content -->
        </li>
        <!-- End Tab 3 -->


        <!-- Start Tab 4 -->
        <li>
            <!-- Start Tab Button -->
   <label for="tab14" class="tabtile tabtile-small solid-green-2 hovershadow-green light-text pos-left-300">
                <i class="fa fa-male fa-3x"></i>
                <span class="light-text">About Me</span>
            </label>
           
            <input type="radio" name="tabion" id="tab14">
            <!-- End Tab Button -->
           
            <!-- Start Tab Content -->
            <div class="tab-content animated tab-lightSpeedIn solid-green-2 light-text pos-top-100">
                <p class="title"><i class="fa fa-male"></i> About Me</p>
                <p class="closebt"><label for="close_tabion"><i class="fa fa-close fa-2x"></i></label></p>
                <p>
ISI KAN CONTENT ANDA DI SINI .......
                </p>
            </div>
            <!-- End Tab Content -->
        </li>
        <!-- End Tab 4 -->
       
       
        <!-- Start Tab 5 -->
        <li>
            <!-- Start Tab Button -->
   <label for="tab15" class="tabtile tabtile-small solid-red hovershadow-red light-text pos-left-400">
                <i class="fa fa-youtube-play fa-3x"></i>
                <span class="light-text">Play</span>
            </label>
           
            <input type="radio" name="tabion" id="tab15">
            <!-- End Tab Button -->
           
            <!-- Start Tab Content -->
            <div class="tab-content animated tab-flip solid-red light-text pos-top-100">
                <p class="title"><i class="fa fa-youtube-play"></i> Play Video</p>
                <p class="closebt"><label for="close_tabion"><i class="fa fa-close fa-2x"></i></label></p>
                <p>
ISI KAN CONTENT ANDA DI SINI .......
                </p>
            </div>
            <!-- End Tab Content -->
        </li>
        <!-- End Tab 5 -->

        <!-- Start Tab 6 -->
        <li>
            <!-- Start Tab Button -->
            <label for="tab16" class="tabtile tabtile-small solid-green hovershadow-green light-text pos-left-500">
                <i class="fa fa-bell fa-3x"></i>
                <span class="light-text">Notification</span>
            </label>
           
            <input type="radio" name="tabion" id="tab16">
            <!-- End Tab Button -->
           
            <!-- Start Tab Content -->
            <div class="tab-content animated tab-flipInX solid-green light-text pos-top-100">
                <p class="title"><i class="fa fa-bell"></i> Notification</p>
                <p class="closebt"><label for="close_tabion"><i class="fa fa-close fa-2x"></i></label></p>
                <p>
ISI KAN CONTENT ANDA DI SINI .......
                </p>
            </div>
            <!-- End Tab Content -->
        </li>
        <!-- End Tab 6 -->
       
       
        <!-- Start Tab 7 -->
        <li>
            <!-- Start Tab Button -->
            <label for="tab17" class="tabtile tabtile-small solid-black hovershadow-black light-text pos-left-600">
                <i class="fa fa-envelope-o fa-3x"></i>
                <span class="light-text">Contact</span>
            </label>
           
            <input type="radio" name="tabion" id="tab17">
            <!-- End Tab Button -->
           
            <!-- Start Tab Content -->
            <div class="tab-content animated tab-bounceInRight solid-black light-text pos-top-100">
                <p class="title"><i class="fa fa-envelope-o"></i> Contact Me</p>
                <p class="closebt"><label for="close_tabion"><i class="fa fa-close fa-2x"></i></label></p>
                <p>
ISI KAN CONTENT ANDA DI SINI .......
                </p>
            </div>
            <!-- End Tab Content -->
        </li>
        <!-- End Tab 7 -->

    <!-- Radio is used to close tabion content -->
    <input type="radio" name="tabion" class="none" id="close_tabion">
   
    </ul>
    <!-- END TABION -->
    <div class="clearspace"></div>
</div>


Anda hanya cukup mengganti tulisan yang bertuliskan isi content pada HTML diatas dengan apa yang ingin ditampilkan.

Semoga bermanfaat!


Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

6 comments