2009-09-20

Membuat Float Navigation Bar

Hampir mirip dengan NavBar bawaan blogger, namun bentuknya float dan lebih sederhana.
Untuk membuatnya ikuti langkah-langkah berikut:
1. Masuk ke Layout -Edit HTML
2. Centang Expand Widget Template.
3. Cari kode ini ]]></b:skin>
4. Letakkan kode dibawah ini tepat diatas kode yang tadi.


/********************************
* Navigasi Apung *
*********************************/
#navigasi-apung
{
align: center;
position: fixed;
border-top: 1px solid #fff;
border-bottom: 1px solid #000;
background-color: #c0c0c0;
width: 100%;
left: 0px;
color: #000;
z-index:10000;
opacity: 0.8;
filter: alphaundefinedopacity: 80);
bottom:0;
}
#navigasi-apung:hover
{
opacity: 1;
filter: alphaundefinedopacity: 100);
}
#navigasi-apung a
{
color: #000;
font-weight:bold;
}
/********************************
* Navigasi Apung Kiri *
*********************************/
.kiri_apungmnu
{
float:left;
list-style-type:none;
padding:0;
margin:3px 0px 3px 5px;}
.kiri_apungmnu li
{
padding: 0px 0px 0px 3px;
margin-left:2px;
float:left;
color:#000;
font:normal 11px arial;
}
.kiri_apungmnu li a
{
display:block;
font:normal 11px arial;
width:auto;
float:left;
text-decoration:none;
}
.kiri_apungmnu li a:hover
{
text-decoration:none;
}
/********************************
* Navigasi Apung Kanan *
*********************************/
.kanan_apungmnu
{
float:right;
list-style-type:none;
padding:0;
margin:3px 5px 3px 0;
}
.kanan_apungmnu li
{
padding: 0 0 0 3px;
margin-left:2px;
float:left;
color:#000;
font:normal 11px arial;
}
.kanan_apungmnu li a
{
display:block;
font:normal 11px arial;
width:auto;
float:left;
text-decoration:none;
}
.kanan_apungmnu li a:hover
{
text-decoration:none;
}


5. Yang di cetak tebal bisa kamu ganti sesuai keinginan. Kemudian cari kode ini  <body>
6. Letakkan kode dibawah ini setelah kode yang tadi.


<div id='navigasi-apung'>
<ul class="kiri_apungmnu">
<li><a href="/" title="Halaman Utama">Beranda</a></li>
<li>|</li>
<li><a href="/search?max-results=50" title="Daftar Isi">Daftar Isi</a></li>
<li>|</li>
<li><a href="/feeds/posts/default" title="Baca via Feed" target="_blank">Feed</a></li>
<li>|</li>
<li><a href="" title="Berlangganan Artikel">Langgan</a></li>
<li>|</li>
<li><a href="mailto:chungkring@gmail.com" title="Email Adhiets">Email</a></li>
<li>|</li>
<li><a href="http://adhiets.blogspot.com/" title="Tentang Adhiets" target="_blank">Tentang</a></li>
</ul>
<ul class="kanan_apungmnu">
<li><a href="http://www.blogger.com/" title="Blogger Login" target="_blank">Login</a></li>
<li>|</li>
<li><a href="http://www.blogger.com/post-create.g?blogID=XXXXXX" title="Entri Baru">Entri Baru</a></li>
<li>|</li>
<li><a href="http://www.blogger.com/posts.g?blogID=XXXXXX" title="Edit Entri">Edit Entri</a></li>
<li>|</li>
<li><a href="http://www.blogger.com/blog-options-basic.g?blogID=XXXXXX" title="Pengaturan">Pengaturan</a></li>
<li>|</li>
<li><a href="http://www.blogger.com/rearrange?blogID=XXXXXX" title="Tata Letak">Tata Letak</a>
</li>
</ul>
</div>


Simpan dan lihat hasilnya.

15 komentar:

Bang Del on 20 September 2009 at 19:04

Mengucapkan SELAMAT HARI RAYA IDUL FITRI untuk Tips Tricks, Tutorial, Blogging, Bisnis Online, Aditya Ramadan & Seluruh pengunjung blog ini...

Seno Rasca on 22 September 2009 at 09:55

navbarnya keren bro, tapi ada pengaruh minusnya ga sama blogger.com? By de way met Idul Fitri maaf lahir batin.

Mbah Gendeng on 11 November 2009 at 12:37

makasih mas tutorialnya sangat bagus langsuung coba

rossi on 15 November 2009 at 12:29

Pelatihan Internet Marketing / Bisnis Online

Ini adalah tingkatan Paling Atas: Praktek secara Langsung semua Materi Internet Bisnis Tingkat Atas, didampingi langsung oleh Tim Kami sampai benar-benar Bisa secara langsung di tempat kami.

Kalau Tidak Bisa Bagaimana???

Kalau sampai Tidak Bisa, Anda tidak Perlu Bayar sedikitpun. Ini merupakan TANGGUNG JAWAB KAMI dan GARANSI KAMI.

KANTOR dan LAB kami Jelas, Data - Data kami Valid, Foto dan Video kami ada, Denah/Peta Alamat kami Lengkap (ada di menu LOKASI), ada Call Center juga, Rekening kami Jelas, Punya Kelas untuk Kursus Lanjutan, Boleh Datang dulu, Bisa Konsultasi langsung, sekaligus anda bisa mengikuti dulu SEMINAR INTERNET kami secara GRATIS.

http://jurus-usaha.co.cc/

labecan on 20 November 2009 at 16:36

wah patut dicoba ni :D

belajar seo blog on 9 December 2009 at 04:36

tutorial yang sangat bagus untuk mengembalikan jati diri bangsa semoga terus memberikan tutorial yang banyak

Onc0m on 15 December 2009 at 00:45

niceeeeeeeeeeeeeeeee......

日月神教-任我行 on 8 May 2010 at 18:27

成人遊戲,免費成人影片,成人光碟,情色遊戲,情色a片,情色網,性愛自拍,美女寫真,亂倫,戀愛ING,免費視訊聊天,視訊聊天,成人短片,美女交友,美女遊戲,18禁,三級片,美女,成人圖片區,avdvd,色情遊戲,情色貼圖,女優,偷拍,情色視訊,愛情小說,85cc成人片,成人貼圖站,成人論壇,080聊天室,080苗栗人聊天室,免費a片,視訊美女,視訊做愛,免費視訊,伊莉討論區,sogo論壇,台灣論壇,plus論壇,維克斯論壇,情色論壇,性感影片,正妹,走光,色遊戲,情色自拍,kk俱樂部,好玩遊戲,免費遊戲,貼圖區,好玩遊戲區,中部人聊天室,情色視訊聊天室,聊天室ut,自拍,後宮電影院,85cc,免費影片,a片

香草泡芙Landy on 17 May 2010 at 17:59

,徵信社,尋人,偵探,偵探社,徵才,私家偵探,徵信,徵信社,徵信公司,抓猴,出軌,背叛,婚姻,劈腿,感情,第三者,婚外情,一夜情,小老婆,外遇,商標,市場調查,公平交易法,抓姦,債務,債務協商,應收帳款,詐欺,離婚,監護權,法律諮詢,法律常識,離婚諮詢,錄音,找人,追蹤器,徵信,徵信公司,尋人,抓姦,外遇,徵信,徵信社,徵信公司,尋人,抓姦,外遇,徵信,徵信社徵信公司,尋人,抓姦,外遇,徵信,徵信社,徵信公司,尋人,抓姦,外遇,徵信社

seo tutorial on 18 June 2010 at 22:06

thanks for the good article. keyword research, competition analysis, on-page and off-page are the topics included in seo tutorial. this website is offering free seo tutorial with practical explanation.seo tutorial

aksesoris mobil terios on 29 May 2013 at 14:02

okeh sip gan..thx for share...izin bookmark

Kelly Tanoto on 14 April 2015 at 01:35

www.indobet77.com

Master Agen Bola , Casino , Tangkas , Togel Terbesar
dan Terpercaya Pilihan Para Bettor

New Promo ( khusus produk 998bet )
- Bonus 100 % New Member sportsbook ( 998 bet ) .
- Bonus 100 % New Member Casino ( 998 bet ) .
( Syarat dan Ketentuan Berlaku )

Promo Terbaru :
- Bonus 10% New Member Sportsbook ( SBObet, IBCbet , AFB88 ,368bet , M8bet , 998bet )
- Bonus 5% New Member Casino Online ( 338a , 1Scasino , Asia8bet , CBO855 )
- Bonus 10% Setiap Hari Bola Tangkas ( TangkasNet , 368MM , 88 Tangkas )
- Togel Online ( Klik4D )
- Sabung Ayam ( New Produk )
- CASHBACK untuk Member
- BONUS REFERRAL 5% + 1% Seumur Hidup

untuk Informasi lebih jelasnya silahkan hubungi CS kami :
- YM : indobet77_sb2@yahoo.com
- EMAIL : indobet77@gmail.com
- WHATSAPP : +63 905 213 7238
- WECHAT : indobet77
- SMS CENTER : +63 905 213 7238
- PIN BB : 2B65A547 / 24CC5D0F

Salam Admin ,
http://indobet77.com/

Jonny Chan on 24 April 2015 at 17:02

Agen Taruhan
qq Online
Domino qq
Agen Poker
Bandar Bola
Togel Indonesia
Tvonline
nonton bioskop online
Tv Indonesia
Film Bokep
Info Bola
Prediksi Togel
Info Togel
Aplikasi Gratis
Foto Bugil
Hasil Bola
Cerita Dewasa
Lagu Mp3
Indo Togel
Rumus Togel
Prediksi Bola
Livescore

Luna Sweet on 9 June 2015 at 18:11

Berita Sepak bola
cerita dewasa
lotere indonesia
nonton bokep
Nonton Movie Online
Film Bioskop Terbaru
berita artis hot

App Development Company on 30 March 2017 at 15:37

Great article, Thanks for your great information, the content is quiet interesting. I will be waiting for your next post.

Leave a Comment

Silahkan menuliskan komentar anda pada opsi Google/Blogger untuk anda yang memiliki akun Google/Blogger.
Silahkan pilih account yang sesuai dengan blog/website anda (LiveJournal, WordPress, TypePad, AIM).
Pada opsi OpenID silahkan masukkan URL blog/website anda pada kotak yang tersedia.
Atau anda bisa memilih opsi Nama/URL, lalu tulis nama anda dan URL blog/website anda pada kotak yang tersedia.

Jika anda tidak punya blog/website, kolom URL boleh dikosongkan.
Gunakan opsi 'Anonim' jika anda tidak ingin mempublikasikan data anda. (sangat tidak disarankan). Jika komentar anda berupa pertanyaan, maka jika anda menggunakan opsi ini tidak akan ditanggapi.