?

Catatan

NULL

Tentang Blog Ini×

Blog ini adalah tempat Saya menuangkan hasil-hasil karya Saya sekaligus tempat saya belajar membangun sebuah blog/website dan berharap untuk tetap bisa memberikan yang terbaik kepada pembaca. kom4 (seekor nyamuk kecil yang tak pernah berhenti menyebarkan wabah.!)

Tentang Saya

Salam pembuka dari saya sebagai penulis blog ini sebelumnya akan memperkenalkan diri saya sebagai salah satu blogger yang berasal dari Sulawesi.

Berikut adalah data diri saya Dharla Ferdana, Bagi para pembaca yang mungkin juga ingin menghubungi saya, bisa melihat alamat juga kontak saya yang disediakan dibawah ini. jika ada yang mengaku saya,namun mempunyai data yang berbeda dari yang ada dibawah, maka itu bukanlah saya. berikut data diri saya:

Nama : Muh. Dharla Ferdana Samudra
Email : dharlaferdana@yahoo.co.id
Invite My BBM : PIN : 2779647D

iklan
Bagikan kepada teman!

Memasang Top Menu Fixed Pada Blog Dengan Css

top menu
Screenshot top menu fixed

Cara penerapan menu tersebut pada blog

Letakkan kode di bawah ini tepat di atas kode ]]></b:skin>

.menuholder {
float:left;
font:normal bold 11px/35px verdana, sans-serif;
overflow:hidden;
position:absolute;
position:fixed;
top:14px;
left:0;
}
.menuholder .shadow {
-moz-box-shadow:0 0 20px rgba(0, 0, 0, 1);
-o-box-shadow:0 0 20px rgba(0, 0, 0, 1);
-webkit-box-shadow:0 0 20px rgba(0, 0, 0, 1);

box-shadow:0 0 20px rgba(0, 0, 0, 1);
height:20px;
left:5%;
position:absolute;
top:-9px;
width:90%;
z-index:100;
}
.menuholder .back {
-moz-transition-duration:.4s;
-o-transition-duration:.4s;
-webkit-transition-duration:.4s;
background-color:rgba(0, 0, 0, 0.5);
height:0;
width:100%;
}
.menuholder:hover div.back {
height:650px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
ul.menu {
display:block;
float:left;
list-style:none;
margin:0;
padding:0 125px;
position:relative;
}
ul.menu li {
float:left;
margin:0 5px 0 0;
}
ul.menu li > a {
-moz-border-radius:0 0 10px 10px;
-moz-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
-moz-transition:all 0.2s ease-in-out;
-o-border-radius:0 0 10px 10px;
-o-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
-o-transition:all 0.2s ease-in-out;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
-webkit-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
-webkit-transition:all 0.2s ease-in-out;
border-radius:0 0 10px 10px;
box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);

display:block;
padding:0 10px;
text-decoration:none;
transition:all 0.2s ease-in-out;
}
ul.menu li a.red {
background:#a00;
}
ul.menu li a.orange {
background:#da0;
}
ul.menu li a.yellow {
background:#aa0;
}
ul.menu li a.green {
background:#060;
}
ul.menu li a.blue {
background:#00a;
}
ul.menu li a.violet {
background:#682bc2;
}
.menu li div.subs {
left:0;
overflow:hidden;
position:absolute;
top:35px;
width:0;
}
.menu li div.subs dl {
-moz-transition-duration:.2s;
-o-transition-duration:.2s;
-webkit-transition-duration:.2s;
float:left;
margin:0 130px 0 0;
overflow:hidden;
padding:40px 0 5% 2%;
width:0;
}
.menu dt {
color:#fc0;
font-family:arial, sans-serif;
font-size:12px;
font-weight:700;
height:20px;
line-height:20px;
margin:0;
padding:0 0 0 10px;
white-space:nowrap;
}
.menu dd {
margin:0;
padding:0;
text-align:left;
}
.menu dd a {
background:transparent;
color:#fff;
font-size:12px;
height:20px;
line-height:20px;
padding:0 0 0 10px;
text-align:left;
white-space:nowrap;
width:80px;
}
.menu dd a:hover {
color:#fc0;
}
.menu li:hover div.subs dl {
-moz-transition-delay:0.2s;
-o-transition-delay:0.2s;
-webkit-transition-delay:0.2s;
margin-right:2%;
width:30%;
}
ul.menu li:hover > a,ul.menu li > a:hover {
background:#aaa;
color:#fff;
padding:10px 10px 0;
}
ul.menu li a.red:hover,ul.menu li:hover a.red {
background:#c00;
}
ul.menu li a.orange:hover,ul.menu li:hover a.orange {
background:#fc0;
}
ul.menu li a.yellow:hover,ul.menu li:hover a.yellow {
background:#cc0;
}
ul.menu li a.green:hover,ul.menu li:hover a.green {
background:#080;
}
ul.menu li a.blue:hover,ul.menu li:hover a.blue {
background:#00c;
}
ul.menu li a.violet:hover,ul.menu li:hover a.violet {
background:#8a2be2;
}
.menu li:hover div.subs,.menu li a:hover div.subs {
width:100%;
}

Kemudian salin kode di bawah ini dan simpan pada widget HTML/JavaScript blog anda.

<div class='menuholder'>
<ul class='menu slide'>
<li><a class='red' href='/'>Home</a>
</li>
<li><a class='orange' href='#'>Tutorials</a>
<div class='subs'>
<dl>

<dt>Blogging</dt>
<dd><a href='#'>Membuat Blog</a>
</dd>
<dd><a href='#'>Menu Melayang</a>
</dd>
<dd><a href='#'>Redirect URL</a>
</dd>
<dd><a href='#'>Link Share</a>
</dd>
<dd><a href='#'>Fav Icon</a>
</dd>
<dd><a href='#'>Iklan Di Postingan</a>
</dd>
<dd><a href='#'>Twitter+Facebook</a>
</dd>
<dd><a href='#'>Text Area</a>
</dd>
<dd><a href='#'>Dua Kolom Label</a>
</dd>
<dd><a href='#'>Page Navigasi</a>
</dd>
<dd><a href='#'>Readmore Thumbail</a>
</dd>
<dd><a href='#'>Menambah Gadget</a>
</dd>
<dd><a href='#'>WordPress Tutorial </a>
</dd>
<dd><a href='#'>Breadcum Blogger</a>
</dd>
<dd><a href='#'>Panduan Blogger</a>
</dd>
<dd><a href='#'>Related Post</a>
</dd>
</dl>
<dl>

<dt>CSS</dt>
<dd><a href='#'>According Slide</a>
</dd>
<dd><a href='#'>SiteMap According</a>
</dd>
<dd><a href='#'>Animasi Post</a>
</dd>
<dd><a href='#'>Button Style</a>
</dd>
<dd><a href='#'>BackGround Blogspot</a>
</dd>
<dd><a href='#'>CSS&Jquery</a>
</dd>
<dd><a href='#'>Rounded Corner</a>
</dd>
<dd><a href='#'>Menu Horizontal</a>
</dd>
<dd><a href='#'>CSS Hover</a>
</dd>
<dd><a href='#'>CSS Diamond</a>
</dd>
<dd><a href='#'>CSS3 Gradient</a>
</dd>
<dd><a href='#'>CSS3 Maker</a>
</dd>
<dd><a href='#'>CSS Search</a>
</dd>
<dd><a href='#'>CSS Subscribe</a>
</dd>
</dl>
</div>
</li>
<li><a class='yellow' href='#'>Plus++</a>
<div class='subs'>
<dl>

<dt>SEO</dt>
<dd><a href='#'>Tentang Seo</a>
</dd>
<dd><a href='#'>Alexa Trafick</a>
</dd>
<dd><a href='#'>Cek Page Rank</a>
</dd>
<dd><a href='#'>Optimasi Blog</a>
</dd>
<dd><a href='#'>Iweb Tools</a>
</dd>
<dd><a href='#'>Meta Tag</a>
</dd>
<dd><a href='#'>Google Webmaster</a>
</dd>
<dd><a href='#'>Submit Demoz</a>
</dd>
<dd><a href='#'>Submit Yahoo</a>
</dd>
<dd><a href='#'>Optimalisasi Gambar</a>
</dd>
<dd><a href='#'>Meningkatkan PR</a>
</dd>
</dl>
<dl>

<dt>Gadget</dt>
<dd><a href='#'>Buku Tamu</a>
</dd>
<dd><a href='#'>Float Bookmark</a>
</dd>
<dd><a href='#'>MP3 Di Blog</a>
</dd>
<dd><a href='#'>Opy Yahoo</a>
</dd>
<dd><a href='#'>Translate Flag</a>
</dd>
<dd><a href='#'>Alexa Gadget</a>
</dd>
<dd><a href='#'>Gadget Interaktif</a>
</dd>
</dl>
</div>
</li>
<li><a class='green' href='#'>About</a>
<div class='subs'>
<dl>
<dd><a href='#'>FORUM</a>
</dd>
<dd><a href='#'>Site Map</a>
</dd>
<dd><a href='#'>About Me</a>
</dd>
<dd><a href='#'>FB Comunity</a>
</dd>
<dd><a href='#'>Twitter</a>

</dd>
<dd><a href='#'>My History</a>
</dd>
<dd><a href='#'>Gallery Photo</a>
</dd>
</dl>
</div>
</li>
</ul>
<div class='back'></div>
</div>
Catatan :
Silahkan anda ganti kode # dengan URL anda dan jangan lupa ganti juga judulnya.
iklanBuruan Pasang Iklan Anda Di Sini Dengan Harga Yang Terjangkau.Pajang bisnis online anda di blog http://kom4.blogspot.com dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.
iklanBuruan Pasang Iklan Anda Di Sini Dengan Harga Yang Terjangkau.Pajang bisnis online anda di blog http://kom4.blogspot.com/ dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.
Iklan Murah

Sejauh ini belum ada diskusi yang masuk. Mulailah berdiskusi dan temukan teman-teman barumu.

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode <i rel="anchor">http://nama_situs.com</i>
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA</i>
Untuk menyisipkan gambar, gunakan kode <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI...</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI...</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.
:) :( ^_^ :D ;) :-bd :'( :\ :p B) :Q :Ozz 7:( \o/ **p <3 0:) :-a 7:O *fck* x@ X@ ~x( :yaya: =p* Klik untuk melihat kode!

Konversi Kode di Sini (Jendela Munculan) Emoticon

Batal

Pasang IklanPasang IklanPasang IklanPasang Iklan

Terakhir Diperbaharui

Ke atas!