TutorialBlog: Buat Pages Blogger Contact A to Z

Assalamualaikum dan salam sejahtera,

Boleh tengok contoh di SINI. Cantik kan?

 Cara:
1- Pergi ke Blogger Dashboard > New Page > HTML Mode
2- Boleh juga senaraikan semua blogger contact A to Z, linkkan siap-siap di Compose mode, kemudian 'copy paste' sahaja di HTML mode nanti.
3- Letak kod berikut di HTML mode.

<style type="text/css">
div.TabTampil div.TTs
{height: 24px; overflow: hidden; }
div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active
{ background-color: #33564F; }
div.TabTampil div.Halamans
{ clear: both; border: 1px solid #55D437; overflow: hidden; background-color: #ffffff;}
div.TabTampil div.Halamans div.Halaman
{ height: 100%; padding: 0px; overflow: hidden; }
div.TabTampil div.Halamans div.Halaman div.Alas
{ padding: 3px 5px; }
div.TabTampil div.TTs a
{ border-left:1px solid #55D437; border-right:1px solid #55D437; border-top:1px solid #55D437; border-bottom:0px solid #ffffff; float: left;
display: block; width: 100px; text-align: center; height: 24px; padding-top: 3px; vertical-align: middle; text-decoration: none; font-family: "Arial", Serif;
font-size: 12px; font-weight: 900; color: #222}
</style>

<br />
<form action="tabtampil.html" method="get">
<div class="TabTampil" id="TabTampil">
<div class="TTs" style="width: 650px;">
<a>ABCDE</a> <a>FGHIJ</a> <a>KLMNO</a> <a>PQRST</a> <a>UVWYZ</a> <a>SHOP&amp;GA</a>

</div>
<div class="Halamans" style="height: 600px; width: 665px;">
<div class="Halaman">
<div class="Alas"><br />
Letak Kandungan Bloglist A

</div>
</div>

<div class="Halaman">
<div class="Alas"><br />
Letak Kandungan Bloglist B

</div>
</div>

<div class="Halaman">
<div class="Alas"><br />
Letak Kandungan Bloglist C

</div>
</div>

<div class="Halaman">
<div class="Alas"><br />
Letak Kandungan Bloglist D

</div>
</div>

<div class="Halaman">
<div class="Alas"><br />
Letak Kandungan Bloglist E

</div>
</div>

<div class="Halaman">
<div class="Alas"><br />
Letak Kandungan Bloglist D

</div>
</div>
</div></form>
<script style="text/javascript" src="http://gagan.exe.googlepages.com/newscriptab.js"></script>
<script type="text/javascript">tabtampil_inisial('TabTampil');</script>

*hijau - untuk ukur besar keluasan kotak, rujuk TUTO INI.
*merah - ubah kod warna lain
*biru - kandungan dalam kotak tab nanti.

 

*Pastikan entri dalam HMTL mode sebelum terus publish!
Kalau dah terbuat, buang SEMUA hightlight biru ini:  <a href="https://www.blogger.com/null">A-E</a>
dan terus PUBLISH!

Terima kasih baca, sudi-sudilah komen :) .