» » Cream Tabs jQuery Plugin
Kamis, 05 Februari 2015

Cream Tabs jQuery Plugin

Side Panel
widget ini cukup keren apabila kalian mau memodifikasi fungsinya .











telah diuji pada ruang posting platform blogger [bekerja].
namun alangkah baiknya susunan asli di simpan .
sebaiknya alamat link di ubah...
silahkan diedit dengan membuka css nya atau script ,,,baca baik baik. 

<ul class="zl_cream_tabs" id="one"><!-- MAIN CONTAINER -->

<!-----------TAB ATAS--------->
<!--bagian kiri-->
<li><!--no 1-->
<a href="#"><i class="icon-envelope-alt"></i></a> <!-- Button -->
<!-- Content Start -->
<ul>
<li class="zl_padding"><!-- 1 slide -->
<h2>Deserunt Mollit Anim</h2>
<font color='black'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</font>
<h5><a href="#">Read More</a></h5>
</li>


<li><!--no 2-->
<img src="http://zalki-lab.com/demo/cream/images/retro_clothing.jpg">
</li>

<li class="zl_padding"><!-- 3 slide no 3-->
<h2>Lorem & Ipsum Dolor</h2>
<font color='black'>
Lorem officia deserunt mollit anim id est laborum <br />
Ipsum laboris nisi ut aliquip ex ea commodo <br />
Dolor consectetur adipisicing elit, sed do <br />
Sit amet aute irure dolor in reprehenderit <br />
Lorem incididunt ut labore et dolore magna aliqua <br />
Ipsum enim ad minim veniam,quis nostrud exercitation <br />
</font>
</li>
</ul>
<!-- Content Close -->
</li>

<!--bagian kanan -->
<li class="zl_padding">
<a href="#"><i class="icon-suitcase"></i></a> <!-- Button -->
<!-- Content Start -->
<ul>
<li><!-- 1 slide no 1-->
<h2>Lorem Ipsum</h2>
<img src="http://zalki-lab.com/demo/cream/images/cityofcalgary-(1).jpg" align="left" class="zl_padding">
<font color='black'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</font>
</li>
<li><!-- 2 slide no 2-->
<h2>Consectetur Elit</h2>
<img src="http://zalki-lab.com/demo/cream/images/hay-bales.jpg" align="left" class="zl_padding">
<font color='black'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</font>
</li>
<li><!-- 3 slide no 3-->
<h2>Lorem Ipsum & Dolor</h2>
<img src="http://zalki-lab.com/demo/cream/images/cityofcalgary-(1).jpg" align="left" class="zl_padding">
<font color='black'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</font>
</li>
<li><!-- 4 slide no 4-->
<h2>Kruto Kak</h2>
<img src="http://zalki-lab.com/demo/cream/images/hay-bales.jpg" align="left" class="zl_padding">
<font color='black'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</font>
</li>
</ul>
<!-- Content Close -->
</li>

<!-- bagian kanan -->
<li>
<a href="#"><i class="icon-coffee"></i></a> <!-- Button -->
<!-- Content Start -->
<ul>
<li><!-- 1 slide -->
<img src="http://zalki-lab.com/demo/cream/images/fashion_icon.jpg">
</li>
<li><!-- 2 slide -->
<img src="http://zalki-lab.com/demo/cream/images/singer.jpg">
</li>
<li><!-- 3 slide -->
<img src="http://zalki-lab.com/demo/cream/images/excited_woman.jpg">
</li>
<li><!-- 4 slide -->
<img src="http://zalki-lab.com/demo/cream/images/manlooking.jpg">
</li>
</ul>
<!-- Content Close -->
</li>
</ul><!-- MAIN CONTAINER CLOSE -->




<!---------- TAB KIRI ------------>
<ul class="zl_cream_tabs" id="two"><!-- MAIN CONTAINER -->

<!-- bagian atas 1-->
<li>
<a href="#"><i class="icon-camera-retro"></i></a> <!-- Button -->
<!-- Content Start -->
<ul>
<li><!-- 1 slide -->
<img src="http://zalki-lab.com/demo/cream/images/fashion_icon.jpg">
</li>
<li><!-- 2 slide -->
<img src="http://zalki-lab.com/demo/cream/images/singer.jpg">
</li>
<li><!-- 3 slide -->
<img src="http://zalki-lab.com/demo/cream/images/excited_woman.jpg">
</li>
<li><!-- 4 slide -->
<img src="http://zalki-lab.com/demo/cream/images/manlooking.jpg">
</li>
</ul>
<!-- Content Close -->
</li>

<!-- bagian ke 2 -->
<li class="zl_padding">
<a href="#"><i class="icon-leaf"></i></a> <!-- Button -->
<!-- bagian atas -->
<ul>
<li><!-- 1 slide -->
<h2>Lorem Ipsum</h2>
<font color='red'>    
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
</font>
<h5><a href="#">Read More</a></h5>
</li>

<li><!-- 2 slide -->
<h2>Dolor</h2>
<ul>
<font color='red'>
Lorem officia deserunt mollit anim id est laborum
Ipsum laboris nisi ut aliquip ex ea commodo
Dolor consectetur adipisicing elit, sed do
Sit amet aute irure dolor in reprehenderit
Lorem incididunt ut labore et dolore magna aliqua
Ipsum enim ad minim veniam,quis nostrud exercitation
</font>
</ul>
<h5><a href="#">Read More</a></h5>
</li>
</ul>
<!-- Content Close -->
</li>

<!-- bagian ke 3 -->
<li class="zl_padding">
<a href="#"><i class="icon-suitcase"></i></a> <!-- Button -->
<!-- Content Start -->
<ul>
<li><!-- 1 slide -->
<h2>Lorem Ipsum</h2>
<font color='red'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</font>
</li>
   
<li><!-- 2 slide -->
<h2>Dolor Sit Amet</h2>
<font color='red'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</font>
</li>
   
<li><!-- 3 slide -->
<h2>Consectetur Adipisicing</h2>
<font color='red'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</font>
</li>
</ul>
<!-- Content Close -->
</li>

 
<!-- bagian ke 4 -->
<li class="zl_padding">
<a href="#"><i class="icon-plus"></i></a> <!-- Button -->
<!-- Content Start -->
<ul>
<li><!-- 1 slide -->
<h2>Lorem Ipsum</h2>
<font color='red'>    
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
</font>
<h5><a href="#">Read More</a></h5>
</li>

<li><!-- 2 slide -->
<h2>Dolor Sit Amet</h2>
<ul>
<font color='red'>
Lorem officia deserunt mollit anim id est laborum
Ipsum laboris nisi ut aliquip ex ea commodo
Dolor consectetur adipisicing elit, sed do
Sit amet aute irure dolor in reprehenderit
Lorem incididunt ut labore et dolore magna aliqua
Ipsum enim ad minim veniam,quis nostrud exercitation
</font>
</ul>
</li>
</ul>
<!-- Content Close -->
</li>
</ul><!-- MAIN CONTAINER CLOSE -->



<!---------- TAB BAWAH ---------->
<ul class="zl_cream_tabs" id="three"><!-- MAIN CONTAINER -->

<!-- bagian kiri -->
<li>
<a href="#"><i class="icon-shopping-cart"></i></a> <!-- Button -->
<!-- Content Start -->
<ul>
<li class="zl_padding"><!-- 1 slide -->
<h3>Dolor Sit Amet</h3>
<ul>
<font color='blue'>
Lorem officia deserunt mollit anim id est laborum 
Ipsum laboris nisi ut aliquip ex ea commodo 
</font>
</ul>
</li>

<li><!-- 2 slide -->
<img src="http://zalki-lab.com/demo/cream/images/singer.jpg">
</li>

<li class="zl_padding"><!-- 3 slide -->
<h3>Deserunt Mollit Anim</h3>
<font color='blue'>
Sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi.
</font>
</li>
</ul>
<!-- Content Close -->
</li>

<!-- bagian tengah -->
<li class="zl_padding">
<a href="#"><i class="icon-file-alt"></i></a> <!-- Button -->
<!-- Content Start -->
<ul>
<li><!-- 1 slide -->
<h3>Lorem Ipsum</h3>
<font color='blue'>
Sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi.
</font>
</li>

<li><!-- 2 slide -->
<h3>Nostrud Exercitation</h3>
<font color='blue'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. 
</font>   
</li>
   
<li><!-- 3 slide -->
<h3>Deserunt Mollit Anim</h3>
<font color='blue'>
Sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi.
</font>    
</li>
   
<li><!-- 4 slide -->
<h3>Ut Enim Ad Minim</h3>
<font color='blue'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. 
</font>    
</li>
</ul>
<!-- Content Close -->
</li>

<!-- bagian kann -->
<li>
<a href="#"><i class="icon-ok"></i></a> <!-- Button -->
<!-- Content Start -->
<ul>
<li><!-- 1 slide -->
<img src="http://zalki-lab.com/demo/cream/images/fashion_icon.jpg">
</li>
<li><!-- 2 slide -->
<img src="http://zalki-lab.com/demo/cream/images/singer.jpg">
</li>
<li><!-- 3 slide -->
<img src="http://zalki-lab.com/demo/cream/images/excited_woman.jpg">
</li>
<li><!-- 4 slide -->
<img src="http://zalki-lab.com/demo/cream/images/manlooking.jpg">
</li>
</ul>
<!-- Content Close -->
</li>
</ul><!-- MAIN CONTAINER CLOSE -->




<!-----------TAB KANAN ----------->
<ul class="zl_cream_tabs" id="four"><!-- MAIN CONTAINER -->

<!-- bagaian atas -->
<li>
<a href="#"><i class="icon-star"></i></a> <!-- Button -->
<!-- Content Start -->
<ul>
<li class="zl_padding"><!-- 1 slide -->
<h3>Deserunt Mollit Anim</h3>
<font color='orange'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br />
tempor incididunt ut labore et dolore magna aliqua.<br />
</font>
<h5><a href="#">Read More</a></h5>
</li>
   
<li class="zl_padding"><!-- 2 slide -->
<h3>Lorem & Ipsum Dolor</h3>
<ul>
<font color='orange'>
Lorem officia deserunt mollit anim id est laborum<br />
Ipsum laboris nisi ut aliquip ex ea commodo<br />
Sit amet aute irure dolor in reprehenderit<br />
</font>
</ul>
</li>
   
<li class="zl_padding"><!-- 3 slide -->
<h3>Mollit Anim</h3>
<font color='orange'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br />
tempor incididunt ut labore et dolore magna aliqua.<br />
</font>
<h5><a href="#">Read More</a></h5>
</li>
</ul>
<!-- Content Close -->
</li>

<!-- bagian tengah-->
<li class="zl_padding">
<a href="#"><i class="icon-retweet"></i></a> <!-- Button -->
<!-- Content Start -->
<ul>
<li><!-- 1 slide -->
<h3>Lorem Ipsum</h3>
<img src="http://zalki-lab.com/demo/cream/images/cityofcalgary-(1).jpg">
<font color='orange'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor.
</font>
</li>
   
<li><!-- 2 slide -->
<h3>Consectetur Elit</h3>
<img src="http://zalki-lab.com/demo/cream/images/hay-bales.jpg">
<font color='orange'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor.
</font>   
</li>
   
<li><!-- 3 slide -->
<h3>Lorem Ipsum & Dolor</h3>
<img src="http://zalki-lab.com/demo/cream/images/cityofcalgary-(1).jpg">
<font color='orange'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor.
</font>   
</li>
   
<li><!-- 4 slide -->
<h3>Kruto Kak</h3>
<img src="http://zalki-lab.com/demo/cream/images/hay-bales.jpg">
<font color='orange'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor.
</font>
</li>
</ul>
<!-- Content Close -->
</li>

<!-- bagian bawah-->
<li>
<a href="#"><i class="icon-hand-left"></i></a> <!-- Button -->
<!-- Content Start -->
<ul>
<li><!-- 1 slide -->
<img src="http://zalki-lab.com/demo/cream/images/entertainer.jpg">
</li>
<li><!-- 2 slide -->
<img src="http://zalki-lab.com/demo/cream/images/fashion_icon2.jpg">
</li>
<li><!-- 3 slide -->
<img src="http://zalki-lab.com/demo/cream/images/singer2.jpg">
</li>
</ul>
<!-- Content Close -->
</li>
</ul><!-- MAIN CONTAINER CLOSE -->


<link href="http://zalki-lab.com/demo/cream/css/cream_tabs/cream.tabs.style.css" rel="stylesheet" type="text/css"></link>
<link href="http://zalki-lab.com/demo/cream/css/cream_tabs/font-awesome.css" rel="stylesheet" type="text/css"></link>

<link href="http://zalki-lab.com/demo/cream/css/style.css" rel="stylesheet" type="text/css"></link>

<script src="http://zalki-lab.com/demo/cream/jQuery/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="http://zalki-lab.com/demo/cream/js/jquery.cream-tabs.1-1-min.js" type="text/javascript"></script>


<script type="text/javascript">
$(document).ready(function(){
 $("#one").creamTabs({
  xCoor: 'auto',
  hoverSwitch: 'off'
 });
 $("#two").creamTabs({
  triggerType: 'hover',
  btnHeight: 60,
            btnWidth: 80,
            iconSize: 20,
  mainColor: '#3f2062',
            borderLight: '#55327e',
            borderDark: '#301b49',
  menuType: 'vertical',
            xPosition: 'left',
            xCoor: 0,
            yPosition: 'top',
            yCoor: 'auto',
            autoPlay: 'off',
            iconColor: '#c5aee0',
            panelHeight: 45

 });
 $("#three").creamTabs({
  hoverSwitch: 'off',
  btnHeight: 55,
            btnWidth: 55,
  conBoxWidth: 300,
        conBoxHeight: 200,
  mainColor: '#f8f8f8',
            borderLight: '#ffffff',
            borderDark: '#d8d8d8',
            xPosition: 'left',
            xCoor: 'auto',
            yPosition: 'bottom',
            yCoor: 0,
            iconColor: '#a13e53',
            iconActiveColor: '#f8f8f8',
            btnActiveColor: '#a13e53',
            piconColor: '#a13e53',
            iconPauseColor: '#a13e53',
            leftIcon: 'icon-caret-up',
            rightIcon: 'icon-caret-down',
            iconPause: 'icon-stop'

 });
  $("#four").creamTabs({
   triggerType: 'hover',
   menuType: 'vertical',
  conBoxWidth: 200,
        conBoxHeight: 300,
  mainColor: '#ABC842',
            borderLight: '#b8d259',
            borderDark: '#99b438',
            xPosition: 'right',
            xCoor: 0,
            yPosition: 'top',
            yCoor: 30,
            iconColor: '#fbfbfb',
            iconActiveColor: '#ABC842',
            btnActiveColor: '#fbfbfb',
            iconPauseColor: '#ABC842'

 });
});
</script>


Tambahkan komentar Komentator

Konversi KodeOOT

Terima kasih telah berkomentar
Langganan: Posting Komentar (Atom)