Cara Membuat Slide dengan CSS According

Salam blogger, pada kesempatan kali ini cyber mistick akan membahas Cara Membuat Slide Dengan CSS Acording, setelah kemarin cyber mistick posting cara mudah mempercepat loading blog. mulanya according ini buatan Harry Robert lalu saya sedikit merubah CSS nya, nah jika sobat tertarik dengan ini silahkan di coba dulu, untuk contoh tampilannya percis seperti gambbar disamping.

Untuk membuat menu slide dengan CSS 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 :

1. Login ke blogger 
2. Terus masuk ke area Design/Rancangan 
3. 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

<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 sekian dulu postingan klai ini tentang Cara Membuat Slide dengan CSS According. Selamat mencoba dan semoga berhasil Good Luck, happy Blogging..!!