Cara Membuat Judul Blog Seperti
Mengetik Pada Tab Browser Posted by saya aidi Posted on Sabtu, Juli 13, 2013
with No comments Kepengen gak judul blog kalian berjalan seperti
ketikan..heheh..lihat aja judul blog ini...(pamer) wkwkwkw....Pada bagian Tab
Browser Kalian ada tulisan yang bergerak. Nah kita akan membuat yang seperti
itu, silahkan ikuti langkah-langkah berikut : Seperti biasa Login ke Blog
Kalian Trus pilih Tata Letak Klik Edit HTML Cari Code Paste Code di bawah ini
tepat diatas Code yang tadi. Note : kode yang berwarna merah bisa sobat ganti,
angka tersebut menandakan kecepatan ketikan'a. Simpan dan Lihat Perubahannya
Cukup Simple bukan ??? Selamat Mencoba,,semoga berhasil kawan...:D Description:
Cara Membuat Judul Blog Seperti Mengetik Pada Tab Browser Rating: 100 %
Reviewer: saya aidi ItemReviewed: Cara Membuat Judul Blog Seperti Mengetik Pada
Tab Browser
Seperti biasa Login ke Blog Kalian
Trus pilih Tata Letak Klik Edit HTML Cari Code Paste Code di bawah ini tepat
diatas Code yang tadi.
div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 88px; /* Lebar Menu Utama Atas */
text-align: center;
height: 30px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "georgia", Serif; /* Font Menu Utama Atas */
font-weight: bold;
color: blue; /* Warna Font Menu Utama Atas */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #E6E6E6; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
overflow: hidden;
background:transparent; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 88px; /* Lebar Menu Utama Atas */
text-align: center;
height: 30px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "georgia", Serif; /* Font Menu Utama Atas */
font-weight: bold;
color: blue; /* Warna Font Menu Utama Atas */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #E6E6E6; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
overflow: hidden;
background:transparent; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
CARA
MEMBUAT TABS DI BLOGSPOT
Cara membuat tabs di blogspot atau
di blogger adalah hal yang sangat perlu di terapkan. karena hal ini akan
memberikan daya tarik sendiri untuk penampilan blog kita, yang kelihatannya
lebih simpel dan menarik untuk di lihat. nah tentunya akan menjadi daya pikat
bagi pengunjung, agar pengunjung betah berlama-lamaan di blog kita. Seperti
kebanyakan blog lain, dimana kita lihat di sidebar mau pun di fotter atau di
header blog mereka banyak terdapat widget - widget, yang memungkin kan akan
lama nya proses loading suatu blog tersebut. Nah untuk mengatasi terjadi nya
kelamaan loading adalah dengan cara menambah Tabs. kita hanya cukup memerlukan
satu widget untuk menempat kan isi content yang terdapat di widget-widget yang
banyak tadi.
Nah untuk anda yang ingin blog nya
kelihatan simple dan menarik untuk di lihat anda bisa menambahkan Aplikasi ini
untuk blog anda. Berikut langkah-langkah cara menambah tabs ke dalam blog anda
:
Langkah Pertama :
Langkah Pertama :
- Login ke blogger
- Klik Rancangan >> Edit HTML
- Beri centang pada expand template widget
- Cari kode <body>
- Kemudian letakkan kode di bawah ini tepat di bawah <body>
|
<script
src='http://recent.googlecode.com/files/tabs.min.js' type='text/javascript'/>
|
- Setelah itu cari kode ]]></b:skin>
- Kemudian letakkan kode di bawah ini di bawah kode tersebut
|
<style
type='text/css'>
ul.tabs{float:left;list-style:none;height:32px;border-bottom:1px solid #999;border-left:1px solid #999;width:100%;margin:0;padding:0} ul.tabs li{float:left;height:31px;line-height:31px;border:1px solid #999;border-left:none;background:#e0e0e0;overflow:hidden;position:relative;margin:0 0 -1px;padding:0} ul.tabs li a{text-decoration:none;color:#000;display:block;font-size:1.2em;border:1px solid #fff;outline:none;padding:0 20px} ul.tabs li a:hover{background:#ccc} html ul.tabs li.active,html ul.tabs li.active a:hover{background:#fff;border-bottom:1px solid #fff} .tab_container{border:1px solid #999;border-top:none;clear:both;float:left;width:100%;background:#fff;-moz-border-radius-bottomright:5px;-khtml-border-radius-bottomright:5px;-webkit-border-bottom-right-radius:5px;-moz-border-radius-bottomleft:5px;-khtml-border-radius-bottomleft:5px;-webkit-border-bottom-left-radius:5px} .tab_content{font-size:1.2em;padding:20px} .tab_content h2{font-weight:400;padding-bottom:10px;border-bottom:1px dashed #ddd;font-size:1.8em} .tab_content h3 a{color:#254588} .tab_content img{float:left;border:1px solid #ddd;margin:0 20px 20px 0;padding:5px} html .menu{height: 1%;} </style> |
- Kemudian klik Simpan Tamplate
Langkah Kedua :
- Klik Rancangan >> Tambah Gadget
- Pilih HTML/JavaScript
- Copy paste kode dibawah ini ke dalamnya
|
<script
type="text/javascript">
$(document).ready(function() { $(".tab_content").hide(); $("ul.tabs li:first").addClass("active").show(); $(".tab_content:first").show(); $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); $(this).addClass("active"); $(".tab_content").hide(); var activeTab = $(this).find("a").attr("href"); $(activeTab).fadeIn(); return false; }); }); </script><div class="container"> <ul class="tabs"> <li><a href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> <li><a href="#tab3">Tab 3</a></li> </ul> <div class="tab_container"> <div id="tab1" class="tab_content"> <h2>Tab 1</h2> KONTEN YANG INGIN ANDA TAMPILKAN 1 </div> <div id="tab2" class="tab_content"> <h2>Tab 2</h2> KONTEN YANG INGIN ANDA TAMPILKAN 2 </div> <div id="tab3" class="tab_content"> <h2>Tab 3</h2> KONTEN YANG INGIN ANDA TAMPILKAN 3 </div> </div> </div> |
- Untuk Tulisan berwarna merah letakkan kode konten yang ingin Anda tampilkan
- Kemudian simpan dan lihat hasilnya
