• RSS
  • Delicious
  • Digg
  • Facebook
  • Twitter
  • Linkedin
  • Heading 1 Here:Enter the heading 1 description here.Go to blogger edit html,find these words and replace it with your own description ...
  • Heading 2 Here:Enter the heading 2 description here.Go to blogger edit html,find these words and replace it with your own description ...
  • Heading 3 Here:Enter the heading 3 description here.Go to blogger edit html,find these words and replace it with your own description ...
  • Heading 4 Here:Enter the heading 4 description here.Go to blogger edit html,find these words and replace it with your own description ...
  • Heading 5 Here:Enter the heading 5 description here.Go to blogger edit html,find these words and replace it with your own description ...
  • SLIDE-1-TITLE-HERE

    Welcome to Blogger.Go to Blogger edit html and find these sentences.Now replace these text/sentences with your own descriptions.This theme is convert to Blogger by Premiumbloggertemplates.com.Download this template and more Premium Blogger Templates From PremiumBloggerTemplates.com...

  • SLIDE-2-TITLE-HERE

    Welcome to Blogger.Go to Blogger edit html and find these sentences.Now replace these text/sentences with your own descriptions.This theme is convert to Blogger by Premiumbloggertemplates.com.Download this template and more Premium Blogger Templates From PremiumBloggerTemplates.com...

  • SLIDE-3-TITLE-HERE

    Welcome to Blogger.Go to Blogger edit html and find these sentences.Now replace these text/sentences with your own descriptions.This theme is convert to Blogger by Premiumbloggertemplates.com.Download this template and more Premium Blogger Templates From PremiumBloggerTemplates.com...

  • SLIDE-4-TITLE-HERE

    Welcome to Blogger.Go to Blogger edit html and find these sentences.Now replace these text/sentences with your own descriptions.This theme is convert to Blogger by Premiumbloggertemplates.com.Download this template and more Premium Blogger Templates From PremiumBloggerTemplates.com...

Rabu, 23 Februari 2011

Menampilkan Tab Horizontal di Blogger Baru

Posted by Ozzi On 20.28 No comments

Horizontal Tab Menu di BloGGeR Baru yang akan kita bahas untuk pertama kali ini adalah bagaimana cara membuat tab horizontal dengan memanfaatkan kode css bawaan blogger baru, sehingga desain tab ini bisa dibuat sesuai harapan blogger, atau setidak-tidaknya kita bisa melakukan beberapa perubahan pada variabel pembentuk tab hingga bisa mendekati hasil optimal.

Sebelum berlanjut pada teknik pembuatan horizontal tab sederhana ini, sebaiknya kita pahami dulu beberapa hal yang berkaitan dengan pemanfaatan tab bawaan ini.
  1. Kode HTML Tabs Horizontal : Horizontal Tabs Blogger Baru hanya menggunakan kode CSS murni tanpa melibatkan javascript.
  2. Simple atau Sederhana : Karena hanya menggunakan kode CSS yang sangat terbatas, maka bentuk tabs menjadi sangat sederhana.
  3. Posisi : Hanya dapat di tempatkan di bagian bawah header (crosscol).
  4. Perubahan Variabel Tab Horizontal

    Beberapa perubahan variabel tab dapat dilakukan dalam template atau melalui:

    Perancang Template Baru!/Template Designer New! --> Advanced --> Teks Tab/Tabs Text dan Latar Tab/Tabs Background.
  5. Tidak dapat di buat di atas header dan footer (can not be created on top header and footer).
Kode Pembentuk Tab Horizontal
<ul>
 <li><a href="Link-1">Nama Link-1</a></li>
 <li><a href="Link-2">Nama Link-2</a></li>
 <li><a href="Link-3">Nama Link-3</a></li>
 <li><a href="Link-4">Nama Link-4</a></li>
 <li><a href="Link-5">Nama Link-5</a></li>
 <li><a href="Link-6">Nama Link-6</a></li>
</ul>
Catatan/Keterangan
  1. Link-1 diisi dengan URL yang diambilkan dari label/categories atau dari daftar posting/posts list, seperti :
    - http://www.blogger.com/posts.g?blogID=5154686636804131392&searchType=ALL&txtKeywords=&label=Modifikasi+Blog+BloGGer+Baru, atau
    - http://gubhugreyot.blogspot.com/2010/07/cara-merubah-ukuran-tag-cloud-cumulus.html
  2. Nama Link di ambilkan dari link yang digunakan di atas. contoh :
    - Modifikasi BloGGer Baru, atau
    - Cara Merubah Ukuran Tag Cloud Cumulus Full Color.
  3. Untuk merubah warna dan ukuran font (font-color,font-size) serta latar tabs atau tabs background silahkan masuk ke link Perancang Template Baru!/Template Designer New! --> Advanced --> Teks Tab/Tabs Text dan Latar Tab/Tabs Background

0 komentar:

Posting Komentar