Nah,, Kali Ini saya akan ngebaHas tentang :
Saat saya jalan jalan, eh ketemu tutorial unik nih yaitu buat Tab view model baru. Keren deh,,...
Mau tahu caranya ikutilangkah-langkahnya :
- Login ke
Blogger.com
- Klik
Layout/Tata Letak
- Klik Menu
Edit
HTML
- Klik
Edit HTML --> Sebelumnya terlebih
dahulu anda backup dulu templatenya
dengan mengklik
Download
Template Lengkap.Supaya bila
terjadi kesalahan maka bisa diulang
kembali.
- Copy Paste kode berikut diatas kode
]]></b:skin>
/* ######### CSS for Shade Tabs.
Remove if not using ######### */
.shadetabs{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left,
center, or right to align the menu
as desired*/
}
.shadetabs li{
display: inline;
margin: 0;
}
.shadetabs li a{
text-decoration: none;
position: relative;
z-index: 1;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: white url(gambar
shade.gif) top left repeat-x;
}
.shadetabs li a:visited{
color: #2d2b2b;
}
.shadetabs li a:hover{
text-decoration: underline;
color: #2d2b2b;
}
.shadetabs li a.selected{ /*selected
main tab style */
position: relative;
top: 1px;
}
.shadetabs li a.selected{ /*selected
main tab style */
background-image: url(gambarshadeactive.gif);
border-bottom-color: white;
}
.shadetabs li a.selected:hover{
/*selected main tab style */
text-decoration: none;
}
.tabcontent{
display:none;
}
@media print {
.tabcontent {
display:block !important;
}
}
/* ######### CSS for Inverted Modern
Bricks II Tabs. Remove if not using
######### */
.modernbricksmenu2{
padding: 0;
width: 362px;
border-top: 5px solid #D25A0B;
/*Brown color theme*/
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}
.modernbricksmenu2 ul{
margin:0;
margin-left: 10px; /*margin between
first menu item and left browser
edge*/
padding: 0;
list-style: none;
}
.modernbricksmenu2 li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}
.modernbricksmenu2 a{
float: left;
display: block;
font: bold 11px Arial;
color: white;
text-decoration: none;
margin: 0 1px 0 0; /*Margin between
each menu item*/
padding: 5px 10px;
background-color: black; /*Brown
color theme*/
border-top: 1px solid white;
}
.modernbricksmenu2 a:hover{
background-color: #D25A0B; /*Brown
color theme*/
color: white;
}
.modernbricksmenu2 a.selected{
/*currently selected tab*/
background-color: #D25A0B; /*Brown
color theme*/
color: white;
border-color: #D25A0B; /*Brown color
theme*/
}
.tabcontent{
display:none;
}
@media print {
.tabcontent {
display:block !important;
}
}
/* ######### CSS for Indented CSS
Tabs. Remove if not using #########
*/
.indentmenu{
font: bold 13px Arial;
width: 100%; /*leave this value as
is in most cases*/
}
.indentmenu ul{
margin: 0;
padding: 0;
float: left;
/* width: 80%; width of menu*/
border-top: 1px solid navy; /*navy
border*/
background: black url(gambar
indentbg.gif) center center
repeat-x;
}
.indentmenu ul li{
display: inline;
}
.indentmenu ul li a{
float: left;
color: white; /*text color*/
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid navy; /*navy
divider between menu items*/
}
.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;
background: black url(gambar
indentbg2.gif) center center
repeat-x;
}
.tabcontentstyle{ /*style of tab
content oontainer*/
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}
.tabcontent{
display:none;
}
@media print {
.tabcontent {
display:block !important;
}
}
- Copy Paste Script berikut dibawah
kode <head>
<script type="text/javascript"
src="http://www.geocities.com/ridwanox/tabcontent.js"/>
Langkah kedua
- Klik
Tata Letak/Layout
- Klik
Elemen Halaman/Page Elements
- Klik
Tambah Gadget/Add Gadget
- Copy Paste Kode Berikut :
<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1"
class="selected">Tab 1</a></li>
<li><a href="#" rel="country2">Tab
2</a></li>
<li><a href="#" rel="country3">Tab
3</a></li>
<li><a href="#" rel="country4">Tab
4</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic
Drive</a></li>
</ul>
<div style="border:1px solid gray;
width:450px; margin-bottom: 1em;
padding: 10px">
<div id="country1" class="tabcontent">
Tab content 1 here<br />Tab content
1 here<br />
</div>
<div id="country2" class="tabcontent">
Tab content 2 here<br />Tab content
2 here<br />
</div>
<div id="country3" class="tabcontent">
Tab content 3 here<br />Tab content
3 here<br />
</div>
<div id="country4" class="tabcontent">
Tab content 4 here<br />Tab content
4 here<br />
</div>
</div>
<script type="text/javascript">
var countries=new
ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link")
//"link" or "linkparent"
countries.init()
</script>
<p><a href="javascript:countries.cycleit('prev')"
style="margin-right: 25px; text-decoration:none"><img
src="rhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq7PewnXWDvrvVyuXNGU8MtqyJHhDe5x9lCPve0c0xVn568AqFo8ynUOi4WxaQpo7t3kNr65I1GJ5KI9hKvlp1wj-u2UARKVA2uaN02pPIvWaAZA7kGKqVhbyWdZVn_zySaXbPDvVVWQQ/s1600/roundleft.gif"
border="0" /> Back</a> <a href="javascript:
countries.expandit(3)">Click here to
select last tab</a> <a href="javascript:countries.cycleit('next')"
style="margin-left: 25px; text-decoration:none"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPGLUMc3YINggPqi1QecTRhcDJB6N6xqOjxHNMPE8myrz5mC1ZNAD8Tj7OA0ekp47Yn9mKqWofz9NNIFsQ51B06Cw9TURAx3a0tRJMenB2Ni15rVCb2AIyW6G0erSRTyYbxRKt8Fdfqxg/s1600-h/roundright.gif"
border="0" /> Forward</a></p>
<hr />
- Simpan
Jika anda berhasil maka hasilnya akan begini:
0 komentar