English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified



Tempat Tutorial Blog

Berisi Tentang Seluruh Informasi,widget,panduan Dan Segala macam Tutorial Blog lainnya

Berbagai Cara Bisnis Online

Tempatnya Informasi Bisnis Online Beserta Tips-Triknya

Berbagai Info Tentang SEO

Tempat Berbagai Informasi Tentang SEO,Tips & Trik Dsb.
Tempatnya Informasi,Tips Trik Tentang Komputer,Tutorial,Download,Belajar Microsoft Dan Program Lainnya

Kamis, 04 Maret 2010

Cara Membuat Menu Tab View Slide

Sekian Lama Ka Neo Jarang Nge Posting,Akhirnya bisa posting juga.

HEEEI SOBAT!
Udah Tau Kan Menu TaB View Slide,,Ituloh Yang Ada Di Atas Postingan Blog Ka Neo
,




Ka Neo Mo Cerita Dulu Nih Untuk Temen-Temen KlikShare,Waktu Itu (lupa hehehehe.....).Sobat Ku Bertanya Tentang Tutorialnya.Dan sekarang ka Neo Buatin.
Oh ya Sobat Ka Neo Yang Di Maksud Adalah
Ka Uka
Selain Sobat Faceboook Juga ,Dia Sobat Blogger ku Juga.Kita Lanjut aja se
  1. Loggin ke Blogger => Layout => Edit HTML dan cari kode ini ]]> letekkan kode berikut diatas ]]>


.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;
}
}

-----------------------------------------------
2. Download kode selanjutnya,
KLIK DI SINI
3. Copi kode tersebut dan paste sebelum kode
4. Simpan template
5. Selanjutnya pilih elemen halaman=> tambah gadget=> HTML/JavaScript=> Masukkan code berikut pada kolom content

<div style="float:left;margin:0px 10px 0px 0px;padding:0px;height:350px;">
<div id="pettabs" class="indentmenu">
<ul>
<li><a href="URLartikelkamu1" class="selected" rel="tab1">1</a></li>
<li><a href="URLartikelkamu2" rel="tab2">2</a></li>
<li><a href="URLartikelkamu3" rel="tab3">3</a></li>
<li><a href="URLartikelkamu4" rel="tab4">4</a></li>
</ul>
<br style="clear: left"/>
</div>
<div style="width:240px;text-align:justify;padding: 5px; margin-bottom:1em">
<div id="tab1" class="tabcontent">
<a href="URLartikelkamu1">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="tampilan mouse" width="240" src="URLgambar1?imgmax=800" height="152" title="title gambar"/></a>
<p><h3><a href="URLartikelkamu1">Judul Aritkel 1</a></h3></p>
Kamu tulis deskripsi dingkat artikel pertama kamu disini [...]
</div>
<div id="tab2" class="tabcontent">
<a href="URLartikelkamu2">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="beyone" width="240" src="URLgambar2?imgmax=800" height="152" title="title gambar"/></a>
<p><h3><a href="URLartikelkamu2">Judul Aritkel 2</a></h3></p>
Kamu tulis deskripsi dingkat artikel kedua kamu disini [...]
</div>
<div id="tab3" class="tabcontent">
<a href="URLartikelkamu3">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="Guns N 'Roses" width="240" src="URLgambar3?imgmax=800" height="152" title="Guns N 'Roses"/></a>
<p><h3><a href="URLartikelkamu3">Judul Aritkel 3</a></h3></p>
Kamu tulis deskripsi dingkat artikel ktiga kamu disini [...]
</div>
<div id="tab4" class="tabcontent">
<a href="URLartikelkamu4">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="ipod" width="240" src="URLgambar4?imgmax=800" height="152" title="ipod"/></a>
<p><h3><a href="URLartikelkamu4">Judul Aritkel 4</a></h3></p>
Kamu tulis deskripsi dingkat artikel keempat kamu disini [...]
</div> </div>
<script type="text/javascript">
var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(2000)
</script>


Moga-Moga Tutorialnya Bermanfaat Dan Bisa Memperindah Blog/Website Sobat.
Digg Google Bookmarks reddit Mixx StumbleUpon Technorati Yahoo! Buzz DesignFloat Delicious BlinkList Furl

4 komentar: on "Cara Membuat Menu Tab View Slide"

Kintaro kazami mengatakan...

yang "3. Copi kode tersebut dan paste sebelum kode" mksutnya yg mna sob?

mohiden mengatakan...

selain kode...mana kodenya bro? yang ini lho(3. Copi kode tersebut dan paste sebelum kode..????????)kutunggu kunjungan baliknya bro...

Anonim mengatakan...

tipsnya mantabs sob ...
salam

Agus Supriatna mengatakan...

Thank atas tutorialnya...kebetulan lg belajar modif template blog...


Blog Berikhtiar
Direktori Website Toko Online

Posting Komentar