Footer Widget #2
Widget
Cara Membuat Tab View Menu Tanpa Edit HTML Di Blog
01.34 // 0 komentar // Update // Category: Tutorial Blogspot , Widget Blogspot //Cara Membuat Tab View Menu Tanpa Edit HTML Di Blog - Masih ingat dengan postinga Master Chef sebelumnya yang hapir serupa dengan Resep Tutorial Blog kali ini yang berjudul Cara Membuat Tab View menu Di Blog? cara yang sebelummnya Master Chef sampaikan sedikit rumit karena harus melakukan Edit HTML. Berbeda dangan cara yang akan kita bahas dalam postingan kali ini, untuk memasang Tab Menu View Sobat tidak perlu melakukan Edit HTML. Cara yang dilakukan kurang lebih sama dengan Cara Memasang Widget Animasi Di Blog.
- Login kehalaman blog
- Dari dashbord blog pilih Tata Letak atau Layout
- Klik Add a Gadget atau Tambah Gadget
- Pilih widget HTML/JavaScript
- Copy kode berikut dan letakan dalam Widget HTML/JavaScript
- Jika sudah Klik Simpan
- Selesai dan lihat hasilnya
<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 80px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #000; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas */
border: 1px solid #ffffff; /* Warna border kotak Tab */
border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
font-weight: 900; /* Ketebalan Teks kotak tab */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; /* Warna background utama kotak tab */ }
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #ffffff; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px; /* Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a><span style="color: #fff">Tab 1</span></a>
<a><span style="color: #fff">Tab 2</span></a>
<a><span style="color: #fff">Tab 3</span></a>
</div>
<div style="width: 300px; height: 200px;" class="Pages">
<div class="Page">
<div class="Pad">
konten 1
</div>
</div>
<div class="Page">
<div class="Pad">
konten 2
</div>
</div>
<div class="Page">
<div class="Pad">
konten 3
</div>
</div>
</div></div></form>
<script src="http://dapurtutorial.googlecode.com/files/Tabview%20menu.js">
</script>
<script type="text/javascript">
tabview_initialize('TabView');
</script></div>
Related posts :
Blogger news
Followers
Berbagi Pembelajaran Berbagai Tips dan Trick penggunaan blogger.
Pejuang Technology. Diberdayakan oleh Blogger.
Popular Posts
-
Cara Membuat Menu Dropdown Horizontal Floating Keren Di Blog - Kenal dengan Menu Dropdown kan ?, Menu Navigasi ini memang banyak digemari o...
-
Cara Memasang Meta Tag Otomatis di Setiap Postingan Blog - Sudah lama banget Master Chef tidak Update Tutorial Seo Blogspot . Kali ini Mate...
-
Topik-Topik Yang Blog Ramai Dengan Pengunjung - Siapa yang tidak ingin blog ramai pengunjung ?, tentunya semua blogger menginginkannya. Sel...
-
Cara Memasang Search Engine Di Blog Dengan Mudah - Search Engine atau Mesin Pencari, pastinya sobat blogger Dapur Tutorial Blogspot dan Seo...
-
Membuat Reply Komentar Di Blog - R eply komen pada blog sangat bermanfaat, adapun salah satu manfaat dengan adanya reply komen pada koment...
-
Cara Mendaftar Atau Membuat Akun Squidoo - Setelah kemaren didalam positingan Master Chef berudul Pengenalan Squidoo untuk Memperoleh Bany...
-
Cara Posting Artikel Beserta Gambar Dan Video - Tutorial Blog Master Chef kali ini berhubungan dengan sobat blogger Dapur Tutorial Blogspot...
-
Cara Memasang Tanda Tangan Di Blog - Setelah tadi siang Master Chef Share tetang Cara Menyembunyikan Judul atau Title Blog, Master Chef dat...
-
Istilah-Istilah Yang Digunakan Dalam Squidoo - Sebelum memulai aktifitas dengan Squidoo hal terpenting yang harus diketahui adalah memahami...
-
Belajar Squidoo Untuk Memperoleh Trafik Di Blog - Selamat malam sobat blogger Dapur Tutorial Blogspot dan Seo. Senang sekali malam ini blog...
About Me
Blog Archive
-
▼
2012
(25)
-
▼
November
(14)
- Cara Memasang Tanda Tangan Di Blog Step 1
- Cara Menyembunyikan Judul Atau Title Blog
- Cara Memasang Meta Tag Otomatis di Setiap Postinga...
- Cara Membuat Tab View Menu Tanpa Edit HTML Di Blog
- Cara Membuat Tab View Menu Di Blog
- Cara Posting Artikel Beserta Gambar Dan Video Di Blog
- Cara Memasang Jam Digital Berlogo Garuda Di Blog
- Cara Memasang Follower Box Twitter Di Blog
- Cara Lengkap Membuat Read More Otomatis Di Blog
- Cara Memasang Like Box Facebook Melayang Di Blog
- Cara Membuat Recent Post Dengan Thumbnail Keren
- Cara Memasang Kamera CCTV Di Sudut Kanan Atas Blog
- Cara Membuat Artikel Kamu Tidak Bisa Di Block
- Cara Memasang Foto,Logo atau Gambar Animasi Di Blog
-
▼
November
(14)
- 2008 - 2009 SimplexDesign. Content in my blog is licensed under a Creative Commons License.
- SimplexPro template designed by Simplex Design.
- Powered by Blogger.com.