cara membuat topbar pada blog

postingan ini muncul karena setelah aku browsing dan terus browsing tapi tidak menemukan yang aku cari yaitu "cara menambah sidebar pada blog"
Akhirnya, setelah mengotak-atik blog dan mengalami sedikit kerusakan,saya menemukan caranya dengan mengadaptasi dari footer. . .
OK,..inilah langkah-langkahnya. . .
1. Masuk pada akun Blog anda
2. pilih Rancangan->Edit HTML -> beri tanda centang pada Expand Template Widget

3. cari kode ]]>
4. Copas (Copy Paste) kode di bawah ini dan letakan sebelum/di atas code ]]>

#topbar { margin-top:2px; padding:5px; width:995px; background:transparent; border: 2px groove #FFD700; line-height: 1.5em;
#topbar-a { float:left; margin-left:0px; width:320px; height:200px; border-right: 2px groove #FFD700; line-height: 1.5em;}
#topbar-b { float:left; margin-left:10px; margin-right:10px; width:330px; height:200px; border-right: 2px groove #FFD700; line-height: 1.5em;}
#topbar-c { float:left; width:320px; height:200px; }

#topbar .widget { background:none }
#topbar .widget h2 { background-color:transparent; }
#topbar .widget-content { background:transparent }

yang berwarna Hijau adalah ukuran lebar dan tinggi topbar,silakan sesuaikan dengan blog anda

5. setelah itu cari kode seperti di bawah ini atau yang mirip :

<b:section class='header section' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='title blog (Header)' type='Header'/>
</b:section>

6. setelah itu, copy paste kode di bawah ini setelah kode di atas tadi:

<div id='topbar'>
<div class='clear'>&#160;</div>
<div id='topbar-a'>

<b:section class='topbar-div section' id='topbar-1' preferred='yes'>
</b:section>
</div>
<div id='topbar-b'>

<b:section class='topbar-div section' id='topbar-2' preferred='yes'>
</b:section>
</div>
<div id='topbar-c'>

<b:section class='topbar-div section' id='topbar-3' preferred='yes'>
</b:section>
</div>

<div class='clear'>&#160;</div>
</div>

catatan : jika setelah kode no. 5 ada CSS untuk Menu Horizontal, Letak kode no. 6 bisa setelah atau sesudah CSS Menu Horizontal tersebut. Letak Topbar tergantung anda, ingin di bawah menu horizontal atau di atas menu horizontal

7. Simpan dan sekarang pindah ke halaman Elemen Laman dan lihat hasilnya.

jika anda belum berhasil.,silakan tanyakan pada saya

ADMIN

Posted in: Blogger,Trik Blog