Membuat Menu Tab View Belive Corners di Blog

Membuat Menu Tab View Belive Corners di Blog – jika pada sebelumnya anda sudah pernah membuat menu tab view, maka ini tidak jauh berbeda dengan menu tab view lainnya. Hanya saja pada menu tab view belive corners ini pada tab menu utama mempunyai bentuk bidang yang miring pada sudut tab menu bagian atas, dan bukan hanya itu saja.

Melainkan pada kolom konten juga menggunakan linear background yang tentunya juga serasi dan cocok untuk membuat warna menu semakin contras. Pada bagian konten dari menu tab view ini juga menggunakan warna linear background yang netral, jadi menu tab view ini bisa contras dengan template blog berwarna gelap maupun terang. Anda bisa memasangnya sebagai widget pada sidebar blog, atau bisa juga pada halaman posting. Daripada bingung memikirkan lebih baik mencoba untuk mengobati rasa penasaran, dan berikut adalah tutorial cara Membuat Menu Tab View Belive Corners di Blog:

1. Login ke akun blogger.
2. Copy kode CSS dibawah ini, lalu pada dashboard blog anda klik Template >> Sesuaikan >> Tingkat Lanjut >> Tambahkan CSS (paste kode CSS ini didalam kolom tersebut).

#tabs {
overflow: auto;
width: 100%;
list-style: none;
margin: 0;
padding: 0;
}

#tabs li {
margin: 0;
padding: 0;
float: left;
}

#tabs a {
-moz-box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
-webkit-box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
background: #ad1c1c;
background: -moz-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
background: -webkit-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);   
background: -ms-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
background: -o-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
background: linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
text-shadow: 0 1px 0 rgba(0,0,0,.5);
color: #fff;
float: left;
font: bold 12px/35px 'Lucida sans', Arial, Helvetica;
height: 35px;
padding: 0 30px;
text-decoration: none;
}

#tabs a:hover {
background: #f2f2f2;
background: -moz-linear-gradient(220deg, transparent 10px, #f2f2f2 10px);
background: -webkit-linear-gradient(220deg, transparent 10px, #f2f2f2 10px);   
background: -ms-linear-gradient(220deg, transparent 10px, #f2f2f2 10px);
background: -o-linear-gradient(220deg, transparent 10px, #f2f2f2 10px);
background: linear-gradient(220deg, transparent 10px, #f2f2f2 10px);
color: #000; 
}

#tabs a:focus {
outline: 0;
}

#tabs #current a {
background: #fff;
background: -moz-linear-gradient(220deg, transparent 10px, #fff 10px);
background: -webkit-linear-gradient(220deg, transparent 10px, #fff 10px);   
background: -ms-linear-gradient(220deg, transparent 10px, #fff 10px);
background: -o-linear-gradient(220deg, transparent 10px, #fff 10px);
background: linear-gradient(220deg, transparent 10px, #fff 10px);
text-shadow: none;  
color: #333;
}

#content {
background-color: #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
background-image: -webkit-linear-gradient(top, #fff, #ddd);
background-image: -moz-linear-gradient(top, #fff, #ddd);
background-image: -ms-linear-gradient(top, #fff, #ddd);
background-image: -o-linear-gradient(top, #fff, #ddd);
background-image: linear-gradient(top, #fff, #ddd);
-moz-border-radius: 0 2px 2px 2px;
-webkit-border-radius: 0 2px 2px 2px;
border-radius: 0 2px 2px 2px;
-moz-box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
-webkit-box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
padding: 30px;
}

#content div {
height: 220px;
}

3. Klik Terapkan ke Blog.

Perlu diperhatikan: Untuk menaruh kode CSS tidak harus seperti pada langkah di atas, cara lain bisa juga dilakukan dengan cara klik Template >> Edit HTML lalu cari kode ]]></b:skin> kemudian paste kode CSS tersebut tepat di atasnya / sebelum kode ]]></b:skin> lalu klik Simpan Template.

4. Selanjutnya untuk menampilkan Menu Tab View Belive Corners di Blog caranya copy kode HTML dibawah ini, kemudian klik Tata Letak >> Tambah Widget >> HTML/Javascript lalu paste kode berikut ini didalamnya, atau bisa juga dikolom posting dengan menggunakan mode HTML:

<ul id="tabs">
<li><a href="URL TUJUAN" title="tab1">tab1</a></li>
<li><a href="URL TUJUAN" title="tab2">tab2</a></li>
<li><a href="URL TUJUAN" title="tab3">tab3</a></li>
<li><a href="URL TUJUAN" title="tab4">tab4</a></li>  
</ul>

<div id="content">
<div id="tab1" style="overflow:auto;">
Silahkan ganti dengan teks yang di inginkan
</div>

<div id="tab2" style="overflow:auto;">
Silahkan ganti dengan teks yang di inginkan
</div>

<div id="tab3" style="overflow:auto;">
Silahkan ganti dengan teks yang di inginkan
</div>

<div id="tab4" style="overflow:auto;">
Silahkan ganti dengan teks yang di inginkan
</div>
</div>

<script src="http://faceblog-evolutions.googlecode.com/files/jquery-1.6.3.min.js"></script>
<script>
$(document).ready(function() {
$("#content div").hide();
$("#tabs li:first").attr("id","current");
$("#content div:first").fadeIn();
$('#tabs a').click(function(e) {
e.preventDefault();      
$("#content div").hide();
$("#tabs li").attr("id","");
$(this).parent().attr("id","current");
$('#' + $(this).attr('title')).fadeIn();
});
})();
</script>

Keterangan:
Ganti tulisan berwarna merah dengan URL tujuan yang di inginkan.

Ganti tulisan berwarna biru dengan judul tab yang di inginkan.

Ganti tulisan berwarna orange dengan teks/paragraf yang di inginkan.

Langkah terakhir klik Save, maka selesai dan silahkan lihat hasilnya dari cara Membuat Menu Tab View Belive Corners di Blog.

DEMO:

• HTML
• CSS
• JavaScript
• PHP

HyperText Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).

Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

JavaScript adalah bahasa skrip yang populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Internet Explorer (IE), Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT. JavaScript pertama kali dikembangkan oleh Brendan Eich dari Netscape dibawah nama Mocha, yang nantinya namanya diganti menjadi LiveScript, dan akhirnya menjadi JavaScript. Navigator sebelumnya telah mendukung Java untuk lebih bisa dimanfaatkan para programmer yang non-Java. Maka dikembangkanlah bahasa pemrograman bernama LiveScript untuk mengakomodasi hal tersebut. Bahasa pemrograman inilah yang akhirnya berkembang dan diberi nama JavaScript, walaupun tidak ada hubungan bahasa antara Java dengan JavaScript. JavaScript bisa digunakan untuk banyak tujuan, misalnya untuk membuat efek rollover baik di gambar maupun teks, dan yang penting juga adalah untuk membuat AJAX. JavaScript adalah bahasa yang digunakan untuk AJAX.

Hypertext Preprocessor (PHP) adalah bahasa skrip yang dapat ditanamkan atau disisipkan ke dalam HTML. PHP banyak dipakai untuk memrogram situs web dinamis. PHP dapat digunakan untuk membangun sebuah CMS. Pada awalnya PHP merupakan kependekan dari Personal Home Page (Situs personal). PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. Pada waktu itu PHP masih bernama Form Interpreted (FI), yang wujudnya berupa sekumpulan skrip yang digunakan untuk mengolah data formulir dari web. Selanjutnya Rasmus merilis kode sumber tersebut untuk umum dan menamakannya PHP/FI. Dengan perilisan kode sumber ini menjadi sumber terbuka, maka banyak pemrogram yang tertarik untuk ikut mengembangkan PHP. Pada November 1997, dirilis PHP/FI 2.0. Pada rilis ini, interpreter PHP sudah diimplementasikan dalam program C. Dalam rilis ini disertakan juga modul-modul ekstensi yang meningkatkan kemampuan PHP/FI secara signifikan. Pada tahun 1997, sebuah perusahaan bernama Zend menulis ulang interpreter PHP menjadi lebih bersih, lebih baik, dan lebih cepat. Kemudian pada Juni 1998, perusahaan tersebut merilis interpreter baru untuk PHP dan meresmikan rilis tersebut sebagai PHP 3.0 dan singkatan PHP diubah menjadi akronim berulang PHP: Hypertext Preprocessing. Pada pertengahan tahun 1999, Zend merilis interpreter PHP baru dan rilis tersebut dikenal dengan PHP 4.0. PHP 4.0 adalah versi PHP yang paling banyak dipakai pada awal abad ke-21. Versi ini banyak dipakai disebabkan kemampuannya untuk membangun aplikasi web kompleks tetapi tetap memiliki kecepatan dan stabilitas yang tinggi. Pada Juni 2004, Zend merilis PHP 5.0. Dalam versi ini, inti dari interpreter PHP mengalami perubahan besar. Versi ini juga memasukkan model pemrograman berorientasi objek ke dalam PHP untuk menjawab perkembangan bahasa pemrograman ke arah paradigma berorientasi objek.