Cara Membuat CSS According Slide

cara membuat slide according, according ini buatan Harry Robert dan saya sedikit rubah  CSS nya, jika sobat tertarik dengan ini silahkan di coba coba.

Untuk membuat menu slide according ini sobat tidak memerlukan JavaScript yang diperlukan hanya CSS dan Tag HTML, dalam According ini yang dugakan adalah tag h2, tag div dan tag ul li, silahkan sobat bisa kembangkan lagi sesuai dengan kebutuhan sobat jika sobat mau lihat contohnya silahkan sobat kunjungi According Slide.

Pertama kita buat dulu Tag ul dalam editor HTML dan beri kelas (class="namakelas") sebagai  contoh 

================================

<ul class="accordion"></ul>

=====================================

Terus tambahkan tag li di dalam tag ul dan beri kelas <li class="namakelas"> jadi strukturnya seperti di bawah

=====================================

<ul class="accordion">

<li class="slide-01"></li>

<li class="slide-02"></li>

<li class="slide-03"></li>

<li class="slide-04"></li>

<li class="slide-05"></li>

</ul>

=====================================

CSS AcordingContoh di atas adalah dasar dari pembuatan menu dengan menggunakan tag ul dan li. sekarang kita langsung ke cara membuat According Slide dengan CSS. jika sobat ingin pasang slide according ini pada blogspot langkah pertama yang harus dilakukan adalah :

Login ke blogger 

Terus masuk ke area Design/Rancangan 

Langkah selanjutnya masuk ke area Edit HTML terus sobat centang Expand Widget

Setelah itu sobat masukan kode CSS di bawah ini di atas tag </head>, atau sobat bisa juga memasukannya dalam CSS sobat. itu terserah yang penting CSS nya bisa jalan.

============================================

<style>

.accordion{

  width:500px;

  overflow:hidden;

  list-style:none;

  margin-bottom:10px;

  text-shadow:1px 1px 1px rgba(0,0,0,0.25);

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='#00adee', endColorstr='#0078a5');

  -moz-border-radius:10px;

  -webkit-border-radius:10px;

  -o-border-radius:10px;

  border-radius:10px;

}

.accordion li{

  float:left;

  width:20%;

  overflow:hidden;

  height:250px;

  -moz-transition:width 0.2s ease-out;

  -webkit-transition:width 0.2s ease-out;

  -o-transition:width 0.2s ease-out;

  transition:width 0.2s ease-out;

  -moz-transition-delay:0.15s;

  -webkit-transition-delay:0.15s;

  -o-transition-delay:0.15s;

  transition-delay:0.15s;

}

.accordion li:first-of-type{

  -moz-border-radius:10px 0 0 10px;

  -webkit-border-radius:10px 0 0 10px;

  -o-border-radius:10px 0 0 10px;

  border-radius:10px 0 0 10px;

}

.accordion li:last-of-type{

  -moz-border-radius:0 10px 10px 0;

  -webkit-border-radius:0 10px 10px 0;

  -o-border-radius:0 10px 10px 0;

  border-radius:0 10px 10px 0;

}

.accordion div{ padding:10px;}

.accordion:hover li{  width:10%;}

.accordion li:hover{  width:60%;}

.slide-01  { background: #d81b21;

background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));

background: -moz-linear-gradient(top, #ed1c24, #aa1317);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');

color:white;}

.slide-02  { background: #f78d1d;

background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));

background: -moz-linear-gradient(top, #faa51a, #f47a20);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');

 color:white; }

.slide-03  { background: #333;

background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));

background: -moz-linear-gradient(top, #666, #000);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');

color:white;}

.slide-04  { background: #64991e;

background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));

background: -moz-linear-gradient(top, #7db72f, #4e7d0e);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');

color:white; }

.slide-05  { 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='#00adee', endColorstr='#0078a5');

color:white; }

</style>

============================================

Jika sudah sobat save template blog sobat. 

Langkah selanjutnya sobat kembali masuk ke area design/rancangan blog

Terus sobat tambahkan Gadet HTM/JavaScript dan Copy Code di bawah dan masukan dalam gadget tersebut

===========================================

<ul class="accordion">

  <li class="slide-01">

    <div>

      <h2>Slide 1</h2>

      <p>Test According1</p>

    </div>

  </li>

  <li class="slide-02">

    <div>

      <h2>Slide 2</h2>

     <p>Test According2</p>

    </div>

  </li>

  <li class="slide-03">

    <div>

      <h2>Slide 3</h2>

       <p>Test According3</p>

    </div>

  </li>

  <li class="slide-04">

    <div>

      <h2>Slide 4</a></h2>

      <p>Test According4</p>

    </div>

  </li>

  <li class="slide-05">

    <div>

      <h2>Slide 5</h2>

     <p>Test According5</p>

    </div>

  </li>

</ul> 

===========================================

Silahkan sobat ganti Title atau kata Slide 1 ,2,3,4,5 dengan title blog sobat atau dengan judul postingan sobat jika sobat mau menambahkan link sobat tinggal tambahkan saja, jika belum tau cara membuat link silahkan sobat baca baca lagi, oke sobat semoga berhasil.. Good Luck, 

contohnya seperti di bawah ini

CSS SLIDE ACCORDING Slide 12345

• 
  
  
  
  

  SLIDE 1

  
  Test According1
  
• 
  
  
  
  

  SLIDE 2

  
  Test According2
  
• 
  
  
  
  

  SLIDE 3

  
  Test According3
  
• 
  
  
  
  

  SLIDE 4

  
  Test According4
  
• 
  
  
  
  

  SLIDE 5

  
  Test According5