Blogger Tab Sistemi CSS3 Menü

   Yayın içerisinde çok şık ve kullanışlı bir tab sistemi menü.Her yazınızda kullanabileceğiniz ve uzun yazılarda da konuyu kısalmak içinde uygun bir özellik.Açıkcası kullanış konusunda çok seçenek olması işimizi kolaylaştırabiliyor.

   Kullanımı konusunda bilgi vermek gerekiyorsa yapacak olduğunuz işlem şöyledir;
Yeni makale hazırlarken bu menüyü kullanacaksanız zaman HTML kısmına tıklayarak kodları ekleyip HTML kısmında iken düzenlenecek yerleri düzenleyin ve yazınıza Oluştur kısmından devam edin.Yada yeni başlayanlar için kolaylık olsun diye kodları not defterine ekleyin düzenleyip sonra HTML kısmından kodları ekleyin.
Kodlarda bozulma olursa altta ki butona tıklayarak kodları bilgisayarınıza indirebilirsiniz.

<style type="text/css">
judul {color: #fff;
margin-bottom: .5em;
font-size: 1.7em;
font-weight: bold;
text-shadow: 0 1px 0 rgba(0,0,0,1);
}
.slides {position: relative;
width: 500px;
height: 250px;
overflow: hidden;
box-shadow: 0 0 10px rgba(0,0,0,.5);
border-radius: 5px;
background: #333;
border: 1px solid rgba(255,255,255,.1);
margin:0 auto;
}.slide {position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}.content {position: absolute;
width: auto;
transform: translateX(-100%);
top: 0;
opacity: 0;
padding: 20px;
transition: transform .5s ease-out, opacity 1s ease-out;
}.content p {font-size: .85em;
color: #fff !important;
}input[type=radio] {display: none;
}label {display: block;
position: absolute;
bottom: 0;
line-height: 3em;
width: 25%;
text-align: center;
cursor: pointer;
font-size: .8em;
z-index: 50;
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.25);
font-weight: bold;
background: rgb(135,224,253);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 );}.slide:nth-child(2) label {margin-left: 25%;
}.slide:nth-child(3) label {margin-left: 50%;
}.slide:nth-child(4) label {margin-left: 75%;
}input[type=radio]:checked ~ .content {transform: translateX(0);
opacity: 1;
}input[type=radio]:checked + label {background: #333;color: #ccc;text-shadow: none;}</style>
<div class="slides">
<div class="slide">
<input id="slide1" name="slideshow" type="radio" /><label for="slide1">CSS</label>
<div class="content">
<judul>CSS</judul>
<p>CSS adalah bagian dari sebuah website yang khusus dibuat untuk mengatur tampilan sebuah website. Kita dapat mengontrol isi (konten) dan tampilan secara terpisah.</p>
</div>
</div>
<div class="slide">
<input id="slide2" name="slideshow" type="radio" /><label for="slide2">HTML</label>
<div class="content">
<judul>HTML</judul>
<p>HTML yang  singkatan dari HyperText Markup Language merupakan sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah Penjelajah web Internet dan formating hypertext sederhana yang ditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.</p>
</div>
</div>
<div class="slide">
<input id="slide3" name="slideshow" type="radio" /><label for="slide3">JQUERY</label>
<div class="content">
<judul>JQUERY</judul>
<p>jQuery adalah librari atau kumpulan kode JavaScript siap pakai. Keunggulan menggunakan jQuery dibandingkan dengan JavaScript standar, yaitu menyederhanakan kode JavaScript dengan cara memanggil fungsi-fungsi yang disediakan oleh jQuery. JavaScript sendiri merupakan bahasa Scripting yang bekerja disisi Client/Browser sehingga website bisa lebih interaktif.</p>
</div>
</div>
<div class="slide">
<input id="slide4" name="slideshow" type="radio" /><label for="slide4">JAVA SCRIPT</label>
<div class="content">
<judul>JAVASCRIPT</judul>
<p>JavaScript merupakan bahasa pemrograman berbasis client, artinya bahasa ini berjalan pada sisi browser pengguna (user) dan bukan pada server. Salah satu keuntungan dari bahasa ini adalah ringan karena berjalan pada masing-masing browser dan pekerjaan tidak di bebankan pada server. Jika di akses oleh 1000 orang maka setiap beban akan di tanggung oleh masing-masing browser, bukan server yang menanggung eksekusi 1000 pengakses tersebut.</p>
</div>
</div>
</div>

Kodlar içerisinde düzenlenecek yerleri farklı renklerle belirledim.

Gizle

Göster

CSS

CSS
CSS adalah bagian dari sebuah website yang khusus dibuat untuk mengatur tampilan sebuah website. Kita dapat mengontrol isi (konten) dan tampilan secara terpisah.

HTML

HTML
HTML yang singkatan dari HyperText Markup Language merupakan sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah Penjelajah web Internet dan formating hypertext sederhana yang ditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.

JQUERY

JQUERY
jQuery adalah librari atau kumpulan kode JavaScript siap pakai. Keunggulan menggunakan jQuery dibandingkan dengan JavaScript standar, yaitu menyederhanakan kode JavaScript dengan cara memanggil fungsi-fungsi yang disediakan oleh jQuery. JavaScript sendiri merupakan bahasa Scripting yang bekerja disisi Client/Browser sehingga website bisa lebih interaktif.

JAVA SCRIPT

JAVASCRIPT
JavaScript merupakan bahasa pemrograman berbasis client, artinya bahasa ini berjalan pada sisi browser pengguna (user) dan bukan pada server. Salah satu keuntungan dari bahasa ini adalah ringan karena berjalan pada masing-masing browser dan pekerjaan tidak di bebankan pada server. Jika di akses oleh 1000 orang maka setiap beban akan di tanggung oleh masing-masing browser, bukan server yang menanggung eksekusi 1000 pengakses tersebut.

Blogumuza Abone Olun
Yeni Yazılar e-posta Adresinize Gelsin

Not: Gelen Maili Aktif Etmeyi Unutmayınız!