Tips Blogger

  1. Cara Membuat Blog
  2. Cara Memasang Templete
  3. Cara Membuat Live Traffic Feed
  4. Cara Membuat Visitor Histats
  5. Cara Merubah Cursor Pada Blog
  6. Cara Membuat Widget di Header
  7. Cara Membuat Menu Dropdown
  8. Cara Membuat Meta Tag
  9. Cara Memperkecil Ukuran Feedburner Dari 576K
  10. Cara Membuat Gambar Melayang
  11. Cara Menampilkan Jumlah Pembaca pada Email Subscriber
  12. Cara Mensetting Blog
  13. Cara Memasang Alexa Rank
  14. Cara Membuat Text Area
  15. Cara Membuat Text Area Select All
  16. Cara Memasang Jam
  17. Cara Membuat Link Berjalan
  18. Tips SEO (Search Engine Optimization)
  19. Cara Mengganti Judul Blog Dengan Judul Postingan
  20. Cara Agar Blog Terkenal
  21. Cara Agar Blog Banyak Dikunjungi
  22. Cara Unik Agar Blog Selalu Rame
  23. Cara Melihat Harga Jual Blog
  24. Cara Meningkatkan Pageviews
  25. Cara Membuat Form Berlangganan
  26. Cara Membuat Off/Online Yahoo Messenger
  27. Cara Membuat Visitor Flag Counter
  28. Cara Mengganti Logo Blogspot
  29. Cara Meningkatkan Alexa Rank
  30. Cara Menambah Tag Alt Pada Gambar
  31. Cara Membuat Read More
  32. Cara Membuat Tombol Reply Pada Komentar
  33. Syarat Google Adsense
  34. Situs - Situs Pay Per Click
  35. Cara Membuat Daftar Isi 3 Kolom
  36. Cara Membuat Recent Comment
  37. Cara Membuat Background Posting
  38. Cara Membuat Link
  39. Cara Membuat Contact Form / Kontak Kirim Email
  40. Cara Membuat Text Flash
  41. Cara Membuat Link Berkedip Warna Warni
  42. Cara Membuat Buku Tamu Shoutmix
  43. Cara Membuat Daftar Isi
  44. Cara agar Postingan Baru Tidak Muncul Pada Home
  45. Cara Membuat Translator
  46. Cara Memasang Site Meter
  47. Cara Mengetahui Jumlah Pengunjung Yang Online
  48. Cara Memasang Ip Address Checker
  49. Cara Menghitung Total Pengunjung
  50. Cara Membuat Tanda Tangan
  51. Cara Memasang PageRank
  52. Cara Memasang Kalender
  53. Cara Membuat Huruf Besar Pada Awal Postingan
  54. Cara Meningkatkan Traffic Blog
  55. Cara Merubah Tampilan Alexa Dan Page Rank
  56. Cara Membuat Tools Mengukur Berat Blog
  57. Cara Mengukur Berat Blog
  58. Cara Membuat Convert Kode Html
  59. Cara Posting Kode HTML
  60. Cara Mengecek Blog Yang Dofollow
  61. Cara Membuat Blog Menjadi Dofollow

Artikel Populer

Download Software GRATIS

Cara Membuat Daftar Isi 3 Kolom

Ini sama halnya cara membuat menu tab view tapi mungkin Anda tidak tahu, itu bagi para pemula termasuk saya :) . Gambar disamping adalah contoh dari menu tab view sama halnya dengan daftar isi bentuknya tapi ini disertai dengan atau terbagi menjadi tiga kolom supaya memudahkan Anda untuk menaruh setiap judul posting yang baru Anda posting seperti blog punya Mas Debby. Selain untuk daftar isi, ini juga bisa digunakan untuk menaruh link banner teman2 blogger Anda, data statistik dari traffic Anda jika Anda membuat histats, visitor, pagerank dll. Membuat tab viem menu ini juga bisa meminimalisasi blog Anda biar tidak terlalu berantakan dimana fitur blog Anda yang sebagian besar menggunakan HTML atau Javascript. Kalau begitu mari kita coba buat dengan tips membuat view tab menu berikut ini:

1. Login ke blogger, Dasbor pergi ke>> Rancangan>>Edit HML.

2. Centang Expand Template Widget.

3. Anda juga perlu untuk membackup template asli anda terlebih dahulu dengan Download Template Lengkap dan memilih simpan/save dan menyimpannya pada hard disk. Cadangan ini akan bermanfaat jika ada yang tidak beres dengan langkah2 yang anda kerjakan.

4. Cari kode ]]></b:skin>
Kalau sulit bisa dengan cara cepat saat pencarian yaitu dengan tekan CTRL F/F3.

5. Letakkan kode dibawah ini diatas kode tersebut.

/* Menu Tab View
----------------------------------------------- */
div.TabView div.Tabs {widht:100%;
padding-top: 0px;
height: 24px;
overflow: hidden;
}
/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 89px; /* ukuran lebar menu */
text-align: center; /* rata tengah */
height: 30px; /* ukuran tinggi menu */
padding-top: 10px;
margin-right:4px; /* jarak antarmenu */
vertical-align: middle;
border: 1px solid #ccc; /* warna border menu */
border-bottom-width: 0;
margin:0px;
padding: 5px 0;
font-family:verdana,Helvetica,sans-serif; /* font */
font-size:12px; /* ukuran font */
font-weight:bold; /* besar hurup menu */
background-color: #D8D8D8; /* warna latar menu */
color: #424242; /* warna huruf menu */
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
}
div.TabView div.Tabs a.Active {
background-color: gray; /* warna background menu aktif */
color: #000000;
}
div.TabView div.Tabs a:hover {
background-color: #D8D8D8; /* warna background menu hover */
color: #424242;
font-weight: bold;
}
/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #CCC; /* warna border kotak utama */
overflow: hidden;
background:#D8D8D8; /* background kotak utama */
}
div.TabView div.Pages div.Page {
height: 100%;
padding: 7px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad {
padding: 5px 0px;
font-size: 12px; /* besar hurup kotak utama */
}

/* tabview css end */
Jangan lupa edit yang ditunjukkan kode yang berwarna merah sepaya sesuai dengan blog Anda Ok.

6. Kemudian Anda cari kode </head> dan letak kode dibawah ini diatas kode tersebut.

<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/tabview.js' type='text/javascript'/>

7. Jangan lupa Simpan Template.

8. Kemudian Anda masuk ke menu Rancangan.

9. Klik Elemen Laman.

10. Klik Tambah Gedget.

11. Pilih HTML/JavaScript dan masukkan kode dibawah ini ke dalam content HTML tersebut.

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 273px;">
<a>Komputer</a>
<a>Internet</a>
<a>Traffic</a>
</div>
<div class="Pages" style="width: 271px; height: 275px;">

<div class="Page">
<div class="Pad">
<li><a href="http://mas-debby.blogspot.com/2011/01/cara-agar-file-komputer-tidak-bisa-di.html">1. Cara Agar File Komputer Tidak Bisa Di Pindah Ke Flashdisk</a></li>
<li><a href="http://mas-debby.blogspot.com/2011/01/software-penghemat-baterai-laptop.html">2. Software Penghemat Baterai Laptop</a></li>
</div>
</div>

<div class="Page">
<div class="Pad">
<li><a href='http://mas-debby.blogspot.com/2011/01/google-adsense.html'>1. Google Adsense</a></li>
<li><a href='http://mas-debby.blogspot.com/2011/01/internet-gratis.html'>2. Internet Gratis</a></li>
</div>
</div>

<div class="Page">
<div class="Pad">
<li><a href="http:/mas-debby.blogspot.com/2011/01/cara-download-video-di-youtube.html">1. Cara Download Video di Youtube</a></li>
<li><a href="http:/mas-debby.blogspot.com/2011/02/mempercepat-internet-download-manager.html#more">2. Mempercepat Internet Download Manager</a></li>
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initializeundefined'TabView');
</script><noscript><a href="http://www.centro.web.id" title="Centro Indonesia"><strong>software, tips blog, ebook, bisnis online
</strong></a></noscript>
Anda bisa ganti warna merah dengan link Anda.

12. Lalu Save dan selesai semoga berhasil.

comment 1 komentar:

Shawol of SHINee on 3 Oktober 2011 12.29 mengatakan...

thanks for tutor, so usefull!

Posting Komentar

 
© 2010 Tips Teknik Komputer is proudly powered by Blogger