Cara Menciptakan Hidangan Floating Fixed - Tempat Blogging

Cara Menciptakan Hidangan Floating Fixed

Cara Membuat Menu Floating Fixed  - Floating Menu (Menu Melayang) atau sering juga disebut dengan "Fixed Menu" yang pada dasarnya ialah sajian yang selalu berada di atas, walaupun blog di scroll hingga bawah.

Cara menciptakan floating sajian / fixed sajian ini sudah direquest oleh beberapa sahabat, namun gres ketika ini aku buat tutorialnya. Untuk lebih jelasnya,sahabat sanggup lihat sajian paling atas di blog ini, atau lihat screenshoot dibawah ini :

Cara menciptakan :

1. Masukkan instruksi ini di atas ]]></b:skin> :

/* Floating Menu */ #ki_floating_menu{background-color: #1484CE;background: #1484ce;background: -moz-linear-gradient(top,  #1484ce 0%, #1274b5 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1484ce), color-stop(100%,#1274b5));background: -webkit-linear-gradient(top,  #1484ce 0%,#1274b5 100%);background: -o-linear-gradient(top,  #1484ce 0%,#1274b5 100%);background: -ms-linear-gradient(top,  #1484ce 0%,#1274b5 100%);background: linear-gradient(to bottom,  #1484ce 0%,#1274b5 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1484ce', endColorstr='#1274b5',GradientType=0 );border-bottom: 1px solid rgba(255, 255, 255, 0.1);box-shadow: 0 2px 0 #0E5A8C;box-shadow: 0px 2px 0px #0e5a8c;height:34px;width:100%;min-width:970px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:1px solid #2a8fd2;} #ki_floating_menu ul{list-style: none;margin:0 auto;width:970px;} #ki_floating_menu ul li{float:left} #ki_floating_menu ul li a{line-height:34px;padding:0 15px;color:#f0e8e5;font-size:13px;font-family:Arial, sans-serif;text-shadow:0px -1px 0px #0f669f;display:block;text-decoration:none;border-right: 1px solid #1470ad;border-left:1px solid #2a88c6;} #ki_floating_menu ul li a:hover{background-color:rgba(255,255,255,0.125);color:white;}

2. Ganti 970px dengan ukuran blog sobat. Untuk mendeklarasikannya, simpan instruksi ini di bawah </head>
<!-- Floating Menu--> <div id='ki_floating_menu'> <ul>   <li style='border-left:1px solid rgba(30, 30, 30, 0.125);'><a href='/'><img alt='Home' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlFT-bjNqMbttvdFdYyWJuU3IiKSWTsPUDb4yGGl0fXduxGdncOvVIHldruBzYPspJeWLPDa9bLTS3iOKSTVlxBBAzvvqw16Mh69Us8VU9mJ2fzlfE4s8dZkb7ke34fvbEFaNPVt0_QkE/s1600/home.png' style='padding:0px;'/></a></li> <li><a href='#'>Menu 1</a></li> <li><a href='#'>Menu 2</a></li> <li><a href='#'>Menu 3</a></li> <li><a href='#'>Menu 4</a></li> <li><a href='#'>Menu 5</a></li> </ul> </div>

Related


Itulah sob Cara Membuat Menu Floating Fixed di blog. Semoga tips ini sanggup mempercantik tampilan blog sobat.

Source

Related Posts

Show comments
Hide comments

0 Response to "Cara Menciptakan Hidangan Floating Fixed"

Post a Comment

Blog ini merupakan Blog Dofollow, karena beberapa alasan tertentu, sobat bisa mencari backlink di blog ini dengan syarat :
1. Tidak mengandung SARA
2. Komentar SPAM dan JUNK akan dihapus
3. Tidak diperbolehkan menyertakan link aktif
4. Berkomentar dengan format (Name/URL)

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Klik subscribe by email agar Anda segera tahu balasan komentar Anda

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

close