Cara Membuat Tab View Unik Pada Blog

Cara Membuat Tab View Unik Pada Blog – setelah banyak membahas tutorial blog yang salah satunya Cara Membuat Iklan Teks Seperti Iklan PPC dan kembali lagi penulis ingin memberikan tutorial kembali mengenai Cara Membuat Tab View Unik Pada Blog.  Tab View merupakan desain yang simple untuk menempatkan beberapa artikel blog sehingga mengehmat space atau tempat pada blog. Mungkin ada banyak tutorial yang bisa anda cari di google dan semoga artikel ini juga bisa menambah wawasan anda mengenai pembuatan Tab View tersebut.

Jika anda berminat untuk mengikuti tutorial Cara Membuat Tab View Unik Pada Blog silahkan bisa membaca artikel ini hingga selesai dan anda dapat mengaplikasikanya pada blog anda. Memang terlihat agak sulit dalam penerapanya jadi sedikit diperlukan kelteliatian jika anda ingin benar – benar memasang di blog atau situs anda.

Berikut Tutorial Cara Membuat Tab View Unik Pada Blog

1. Pertama, login dahulu pada blogger.com

2. Kemudian menuju menu Template dan pilih edit HTML

3. Carilah kode ]]></b:skin>

4. Tempatkan kode divbawah ini tepat diatas ]]></b:skin>

div.TabView div.Tabs a{float:left;display:block;width:92px;height:22px;text-align:center;background-color:#999;padding-top:6px;border:1px solid #fff;border-bottom:1px solid #ccc;font-family:"Arial, Helvetica, sans-serif", Arial;font-weight:900;margin:5px 0 0 3px} div.TabView div.Tabs a:hover,div.TabView div.Tabs a.Active{background-color:#444343} div.TabView div.Pages{clear:both;border:1px solid #ccc;overflow:hidden;background-color:#F2F2F2} div.TabView div.Pages div.Page{height:100%;overflow:hidden;padding:2px} div.TabView div.Pages div.Page div.Pad{padding:3px 5px} .list{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglLx4FxaYHwHJke5o7pcYkrJ1Sxh1sGS7j-QANXBUmh6U693-3JIOtVLz63Dc_JKJV91KreSj1HiDyUfAJnIKIP4EaT3fTP5rL4IK8Pi4buBWDKnPQ-QLnV9CfOnHMSJZSgP5Wfoommyb4/) no-repeat left center;border-bottom:1px dotted #7f7f7f;line-height:1.5em;padding:3px 0 3px 20px}

5. Lalu save dan langkah selanjutnya memesang widget pada menu Tata Letak

6. Pilih +HTML/Javascript

7. Masukkan kode dibawah ini lalu save

<style type="text/css">div.TabView div.Tabs a { float: left; display: block; width: 90px; /* Lebar Kotak Tab */ height: 25px; /* Tinggi Menu Utama Atas */ text-align: center; /* Posisi Teks Menu Tab */ margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */ background-color: #0066CC; /* Warna background Kotak Tab */ padding-top: 6px; /* 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: #cccccc; /* 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: 2px; /* Jarak teks dalam kotak content */ overflow: hidden; } div.TabView div.Pages div.Page div.Pad { padding: 3px 5px; } </style>

TutorialTips n TrickTemplate

Menampilkan Widget Tertentu Di Homepage

Ganti Translate Dengan Gambar Bendera

Modifikasi Popular Post Seperti Gallery

Membuat Tab View Ala Maskolis

Blogger Anti Maling

Membuat Site Map Blog Efek Jquery

Cara Memperbaiki H1 Zero that is Really Bad di Chkme.com

Gambar Beputar di Halaman Tertentu

Menghilangkan Tulisan Powered By Blogger

Membuat Iklan Teks Sendiri Seperti Adsense

Solusi Meningkatkan Traffik Alexa

Membuat Widget Blog Lebih Hidup

Backlink Gratis Dari PR 9

Backlink Gratis Dari Direktori Artikel

Cara Membangun Komunitas Blogger Sesama Daerah

Memberikan Efek Jera Kepada Spammer

Cara Mengetahui Jumlah Murni Pengunjung blog

Template Centil

Template Imut Bikin Gemez

Template Kompiana ( fast Loading )

Gamer Darkpaper

CelebrityMag

8. Dan Selesai.

Untuk Keterangan kode – kode di atas dan yang perlu diperhatikan diantaranya:

a. Pada ukuran dari Tab View tersebut dan anda bisa mengganti sesuai keinginan anda.

b. Kemudian judul Tab dari posisi kiri ke kanan dan bisa diganti sesuai isi blog anda, seperti gambar diatas.

c. Gantilah URL dan judul artikelnya sesuai dengan URL blog dan judul artikel pada blog anda.

d. Dianjurkan agar lebih teliti pada pengeditan kode Javascriptnya agar anda bisa berhasil melakukanya.

Demikianlah tutorial kali ini tentang Cara Membuat Tab View Unik Pada Blog agar dapat menghemat ruang space pada bagian blog bila anda ingin memasang beberapa artikel yang banyak sehingga bisa dilihat oleh para visitor maupun pembaca blog. Semoga dapat bermanfaat dan anda lekas mencobanya. Jangan lupa like jika anda menyukai artikel ini. 

Deny Ir 15 Feb, 2014

-
Source: http://biscer.blogspot.com/2014/02/cara-membuat-tab-view-unik-pada-blog.html
--
Manage subscription | Powered by rssforward.com