Cara Membuat Tab View di Blog

Cara Membuat Tab View di Blog - Hallo sahabat berita aneh, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Tab View di Blog, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel widget for blog, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Membuat Tab View di Blog
link : Cara Membuat Tab View di Blog

Baca juga


Cara Membuat Tab View di Blog

Cara Membuat Tab View di Blog, Tab View di blog yang satu ini sering digunakan oleh para blogger,namun tab view yang satu ini sangat mudah cara membuat maupun mengeditnya,karena dengan tab view ini kamu tidak perlu mengotak-atik html yang ada pada template kamu.

Cara Membuat Tab View di BlogDengan tab view ini kamu hanya perlu menambahkan gadget atu widget pada blog kamu,jadi kamu bisa sangat mudah menghapusnya jika tidak diperlukan, nah dibawah ini adalah kode untuk tab view yang bisa kamu modifikasi warna juga bentukkya sesuai blog kamu. berikut kode tab view tersebut:



<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 92px;
height: 22px;
text-align: center;
margin: 5px 0px 0px 3px;
background-color:#999999;
padding-top: 6px;
border: 1px solid #ffffff;
border-bottom: 1px solid #ccc;
font-family: "Arial, Helvetica, sans-serif", Arial;
font-weight: 900;

}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #444343; }
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc;
overflow: hidden;
background-color: #F2F2F2;
}
div.TabView div.Pages div.Page
{
padding: 2px;
height: 100%;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
.list {
background: url("http://lh4.ggpht.com/_15FopxVONSo/ShYuf4RqUuI/AAAAAAAACxI/jcump2GgfLg/iconbullet.gif") no-repeat left center;
border-bottom:1px dotted #7f7f7f;
line-height:1.5em;
padding:3px 0px 3px 20px;
}
</style>

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 298px;">
<a href="http://www.blogger.com/post-create.g?blogID=7490537618574143540"><span style="color: white;">Tutorial Blog</span></a>
<a href="http://www.blogger.com/post-create.g?blogID=7490537618574143540"><span style="color: white;">Wordpress</span></a>
<a href="http://www.blogger.com/post-create.g?blogID=7490537618574143540"><span style="color: white;">Joomla</span></a></div>
<div class="Pages" style="height: 200px; width: 298px;">

<div class="Page">
<div class="Pad">
<div class="list">
<a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-efek-image-zoom-dengan-jquery.html">Membuat Efek Image Zoom dengan Jquery</a></div>
<div class="list">
<a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-sliding-loginregister-form.html">Membuat Sliding Login/Register Form Panel di Blog</a></div>
<div class="list">
dan seterusnya ............................................................... </div>
</div>
</div>

<div class="Page">
<div class="Pad">
<div class="list">
<a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-efek-image-zoom-dengan-jquery.html">Membuat Efek Image Zoom dengan Jquery</a></div>
<div class="list">
<a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-sliding-loginregister-form.html">Membuat Sliding Login/Register Form Panel di Blog</a></div>
<div class="list">
dan seterusnya ............................................................... </div>
</div>
</div>

<div class="Page">
<div class="Pad">
<div class="list">
<a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-efek-image-zoom-dengan-jquery.html">Membuat Efek Image Zoom dengan Jquery</a></div>
<div class="list">
<a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-sliding-loginregister-form.html">Membuat Sliding Login/Register Form Panel di Blog</a></div>
<div class="list">
dan seterusnya ............................................................... </div>
</div>
</div>
</div>
</div>
</form>

<script src="http://creatingwebsite.googlecode.com/files/tab_view.js">
</script>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Atur warna dan lebarnya sesuai yang kamu inginkan. demikian sobat semoga berhasil yach , semoga berguna!


Demikianlah Artikel Cara Membuat Tab View di Blog

Sekianlah artikel Cara Membuat Tab View di Blog kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Membuat Tab View di Blog dengan alamat link http://beritaaneh13.blogspot.com/2012/03/cara-membuat-tab-view-di-blog.html

0 Response to "Cara Membuat Tab View di Blog"

Posting Komentar