Pages

CARA MEMBUAT SLIDE MENU SHOW

Bagi anda yang tertarik membuat Menu Slide Show Tab View, silahkan ikuti langkah-langkah berikut INI yang saya copy dari kang rohman tea sok atuh :



Langkah #1

1. Login ke blogger dengan ID anda.
2. Klik Tata Letak.
3. Klik tab Edit HTML.
4.

Copy kode di bawah ini, lalu paste persis di atas kode ]]>

.indentmenu{
font: bold 11px Arial;
width: 100%; /*leave this value as is in most cases*/

}

.indentmenu ul{
margin: 2px;
padding: 0;
float: left;
/* width: 80%; width of menu*/
background: transparent;
}

.indentmenu ul li{
display: inline;
}

.indentmenu ul li a{
float: left;
margin: 2px;
color: #000; /*text color*/
padding: 5px 11px;
text-decoration: none;
border: 1px solid #ccc;
}

.indentmenu ul li a:hover{
background:#ddd;
}

.indentmenu ul li a:visited{
color: white;
}

.indentmenu ul li a.selected{
color: white !important;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 4px;
border: 1px solid #000000;
background:#000000;
}

.tabcontentstyle{ /*style of tab content container*/
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block !important;
}
}


5. Download dulu







script ini, copy lalu paste persis di atas kode
6. Klik tombol SIMPAN TEMPLATE.
7. Langkah pertama selesai. Silahkan istirahat dulu, minum Coffee khe, minum teh khe atau apa gitu biar tenang dulu Big Grin



Jika sudah santai, ayo kita lanjut ke langkah berikutnya.

Langkah #2

1. Klik tab Elemen Halaman.
2. Klik Tambah Gadget

tambahgadget
3.

Klik tombol plus (+) Untuk HTML/JavaScript.

html
4. Copy lalu paste kode berikut pada kolom yang tersedia :
















obamabush


Obama Will Change Busf Policy


U.S. President Barack Obama will change several numbers of controversial policies by President George W. Bush, including the restriction of the parent embryo cell research [...]




beyone

Beyone Will Never Sell Her Wedding Photo



Beyonce said, she will never consider to sells her wedding photo with Jay-Z to a celebrity magazine that offering a large amount of money as rewards, even she wonder with the amount of money that offered to her [...]




Guns N 'Roses

Guns N 'Roses Will Back



After 15 years not releasing album, the group rock Guns N ' Roses will launch a new album in the United States on 23 November. The band's latest album is "The Spaghetti Incident", released in 1993 [...]




ipod

Ipod Can Make Your ear Buzz



Music is one way to wake the spirit, to create happy life, but what happens if the music makes the ears buzz? of course, not the music that makes the ear 'buzzy',[...]




5. Klik tombol SIMPAN TEMPLATE.
6. Selesai. Silahkan lihat hasilnya.



Kode-kode di atas tentunya tidak mutlak harus seperti yang Kang Rohman tulis, namun anda bisa memodifikasinya agar sesuai dengan keinginan atau[un sesuai dengan template yang anda pakai.



Sedikit keterangan agar lebih memudahkan anda dalam memodifikasi kode ini.



Pada langkah pertama, ada deretan kode CSS, kode tersebut bisa anda kreasikan sendiri agar menghasilkan bentuk deretan tab yang cantik.

Perhatikan kode berikut :









Kode ini adalah deretan tab dengan urutan tab seperti ini : 1, 2, 3, 4. Ini bisa anda ubah dengan apa yang anda mau. Misal Recent Comments, Recen Post, Shoutbox, atau apa saja sesuai keinginan. Untuk mengatur tinggi dari widget tersebut, anda tinggal mengganti nilai height:350px; menjadi nilai yang lain. Misal : height:400px;



Perhatikan juga yang ini :



Kode tersebut adalah untuk mengatur isi dari menu tersebut, ini tentunya bisa anda ubah sesuai dengan keinginan anda, Misal :

width:240px : ini untuk mengatur lebar, ubah dengan nilai yang sesuai keinginan. Contoh : width:300px.

text-align:justify : ini untuk mengatur perataan tulisan, ganti dengan yang anda inginkan. Contoh : text-align:left, text-align:right.



Perhatikan kode berikut :







Untuk mengatur lamanya waktu perpindahan dari satu tab ke tab yang lain, anda tinggal mengganti nilai 2000 menjadi nilai yang lain. Misal : 2100. Semakin besar nilainya maka semakin lama pindah.

Kode dalam “Slide Show Tab View” di atas memuat artikel milik kang Rohman, silahkan di ganti sesuai keinginan, itu hanya contoh untuk memberikan sugesti terhadap anda.



Selamat mencoba!

No comments:

copyright © . all rights reserved. designed by Color and Code

grid layout coding by helpblogger.com