Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Membuat Menu Tab View Belive Corners di Blog

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).
Menu Tab View Belive Corners di Blog
#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:

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.

Berlangganan artikel via email

26 Response to "Membuat Menu Tab View Belive Corners di Blog"

Hm, dapat ilmu baru..
terimakasih..^^

Balas

Wah bagus sekali hasilnya sobat, sangat menarik dan mantap.
Tapi kalau terlalu banyak kode kss dicoba diblog apa tidak memberatkan blog sobat??
terima kasih sudah berbagi

Balas

ijin nyimak sobat postingan terbarunya hehehe

Balas

salut ane sama yang punya blog ini gan, CSS nya mantap hehe

Balas

Terimakasih gan udah dishare tutornya, mantap nih :)

Balas

Bagus nih, hanya membutuhkan tempat sedikit untuk postingan yang banyak dan tampilannya bagus :D
Saya simpan dulu, kapan2 saya coba, makasih sob

Balas
avatar
Anonymous

Waow.. keren tab view nya mas rizky... benar-benar kreatif, lansung coba nih.

Balas

bagus mas..klo mau ngurangin submenunya diatas berarti tinggal ngehapus url tujuan sama judul tabnya ya?

Balas

sip deh kapan kapan dicoba lah

Balas

namanya keren ya.. belive belive :D .

Balas

wah keren2 sob :)

Balas

wah mantap mass makasih tutorialnya

Balas

Demo nya keren gan, dan tidk trlalu berat.
keren dah, variasi warna jga bagus!

Balas

Mantap mas andes tutorialnya...sgt bermanfaat utk para niewbie!

Balas

mas andes memang master banget deh kalau buat beginian..mantap mas..bookmark dulu deh

Balas

selalu setia berkunjung disini mas andes, makin mantab aja ni tutornya sukses ya

Balas

dsni slalu ada tutorial bguuss , hehehe .. bljr dmna mas css nya ?

Balas

mantap gan ..di copas dulu ah...wkwkwk

Balas

Siang sohib...
Bagus juga nih infonya.. Izin copy ya.
Btw, apakah nantinya akan memberatkan loading blog gak ya?

Balas

mas andes memang master banget deh kalau buat beginian..mantap mas..bookmark dulu deh

Balas

mas URL tujuan kok nggk fungsi ya...soalnya aku coba URL gambar yg dari blog ok nggk muncul?

Balas

mas, kalo mau buang skrol nya gimana mas, agar dia membesar otomatis saja sesuai banyak nya isi konten..?

Balas

diisi link download bisa gak gan?

Balas

keren mastah thanks ya

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Membuat Menu Tab View Belive Corners di Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode