Cara Membuat Related Post with Tab View ~ berita teknologi

Seperti anda tahu dengan Tab View anda bisa mendaftarkan atau menyusun isi dari blog anda untuk lebih mudah dibaca oleh pengunjung blog anda. Sehingga besar kemungkinannya pengunjung blog anda akan berlama-lama di blog anda karena mereka menemukan artikel-artikel yang menarik yang ada pada daftar tab view anda.

Kenapa artikel berikut saya beri judul Tab View Versi 2? ini artinya saya sudah memposting artikel Tab View Versi 1 (Baca: Cara Membuat tab View Versi 1) bahkan Tab View yang menggunakan sentuhan JQuery juga pernah saya posting (Baca: Tab View dengan Jquery) dan pastikan anda tidak melewatinya.

Berikut tutorial untuk membuat Tab View Versi 2 ini:

Login ke Blogger.com
Kemudian Tata Letak
Pilih Edit HTML
Centang Expand Widget
Copas kode berikut diatas kode </head>

<script src='http://sites.google.com/site/rasiqzonetwork/javascript/tabview2.js' type='text/javascript'/>

Setelah itu, Copas kode berikut diatas kode ]]></b:skin>

div.Tab div.TFs
{height: 30px; overflow: hidden;} div.Tab
div.TFs a
{float: left; display: block; text-align: center; text-decoration: none; font: normal 12px arial;
padding:3px 5px 3px 3px; margin:0 5px 0 0;letter-spacing:-0.07em;
background:#0080ff;
color: #000;
border-top:0px solid #ccc;
border-right:0px solid #999999;
border-bottom:0px solid #999999;
border-left:0px solid #cccccc;
-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px;
}
div.Tab div.TFs a:hover
{
background: #fff;
border-top:1px solid #0080ff;
border-right:1px solid #0080ff;
border-bottom:1px solid #999;
border-left:1px solid #ccc;}
div.Tab div.TFs a.Active
{ background: #fff; color: #000;
border-top:1px solid #0080ff; border-right:1px solid #0080ff;
border-bottom:1px solid #0080ff;
border-left:1px solid #0080ff; font-weight:bold;}
div.Tab div.Pages { clear: both; overflow: hidden; height:240px; border:1px solid #EFF0F1;
padding:0;background: #fff;
-moz-border-radius:5px;}
div.Tab div.Pages div.Page {height: 100%;padding: 0px; overflow: hidden; }
div.Tab div.Pages div.Page div.floor { font-size:11px;padding: 3px 5px; text-align:left;}

Silahkan ganti ukuran dan warnanya sesuai selera anda, untuk kode warna (Baca: Kode Warna HTML)
Selanjutnya Save Template
Langkah selanjutnya Klik Elemen Halaman
Kemudian Tambahkan Elemen Halaman
Pilih HTML/JavaScript
Copas kode berikut pada konten:

<form action="tab.html" method="get">
<div class="Tab" id="Tab">
<div class="TFs">
<a>Tutorial Blogger</a>
<a>Design Template</a>
<a>Widgets</a>
<a>JQuery</a>
</div>
<div class="Pages">
<div class="Page">
<div class="floor">
<ul>
<li><a href="http://rasiqzonetwork.blogspot.com/2009/08/bikin-blog-di-blogger.html">Cara Membuat Blog</a></li>
<li><a href="http://rasiqzonetwork.blogspot.com/2010/01/cara-setting-blog-di-blogger.html">Cara Setting Blog</a></li>
</ul>
</div>
</div>
<div class="Page">
<div class="floor">
<ul>
<li><a href="http://rasiqzonetwork.blogspot.com/2010/02/cara-mengubah-lebar-kolom-template.html">Cara Mengatur Lebar Template</a></li>
<li><a href="http://rasiqzonetwork.blogspot.com/2010/02/cara-menambah-kolom-pada-sidebar.html">Menambahkan Kolom Baru Pada Sidebar</a></li>
</ul>
</div>
</div>
<div class="Page">
<div class="floor">
<ul>
<li><a href="http://rasiqzonetwork.blogspot.com/2010/01/cara-pasang-translator-cantik.html">Cara Pasang Translator Cantik</a></li>
<li><a href="http://rasiqzonetwork.blogspot.com/2010/02/cara-membuat-shoutmix-buku-tamu.html">Cara Membuat Buku Tamu undefinedShoutmix)</a></li>
<li><a href="http://rasiqzonetwork.blogspot.com/2010/02/cara-modifikasi-shoutmix-buku-tamu.html">Cara Modifikasi Buku Tamu undefinedShoutmix)</a></li>
<li><a href="http://rasiqzonetwork.blogspot.com/2010/03/cara-membuat-link-berkedip-pelangi.html">Cara Membuat Link Berkedip Pelangi</a></li>
</ul>
</div>
</div>
<div class="Page">
<div class="floor">
<ul>
<li><a href="http://rasiqzonetwork.blogspot.com/2010/03/cara-termudah-membuat-tab-animasi.html">JQuery Pada Menu Tab View</a></li>
<li><a href="http://rasiqzonetwork.blogspot.com/2010/03/jquery-pada-multi-kolom-footer.html">JQuery Pada Multi Kolom Footer</a></li>
</ul>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">tabardi33_nameundefined'Tab');</script>
<div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="#" target="_blank" title="Tabview Widget">Klik disini cara pasang widget ini</a></div>

Silahkan ganti yang berwarna merah dan yang lainnya sesuaikan dengan milik anda
Selanjutnya Save

Semoga Bermanfaat dan membantu anda dalam kegiatan blogging..

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.