Cara Membuat CSS According Slide

Baca Juga

Slide According

Bismillah.. Setelah saya posting tentang cara membuat menu according sekarang saya akan posting lagi tentang 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>

Contoh 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.

CSS SLIDE ACCORDING

<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

CODE SLIDE ACCORDING

<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, happy Blogging