Cara Membuat menu Fixed inner

Also Read Other Articles

Sobat blogger semua, sobat bisa melihat gambar di atas atau bolg saya di top header, sobat semua pengen mempercantik blog sobat dengan menu fixed inner. Fixed inner maksudnya adalah menu tersebut akan tampil dan terlihat terus walaupun sampai di bawah... kalau belum jelas silahkan sobat lihat punya saya.. he..he..

Sekarang bagaimana cara cara membuatnya sob.. Lihat dan ikuti tutorialnya berikut..

1. Masuk dasbor

2. Klik templat lalu jangan lupa Cadangkan dan Pulihkan/download template lengkap

3. Klik Edit HTML (Exspand template widget) / Centang

4. Cari kode ]]></b:skin> (untuk mempermudah pencarian silahkan tekan Control F pada Keyboard sobat)

5. Copy kode berikut.. dan letakkan di atas kode No. 4

.toppic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCe39JGB4rdZ4b2slF02A1o_UGvQsQdiIBAbdPmu5qG20jJRHdy5eVyGrYeI7_sB0XO3RUbRYrBzPvQqkyjMMBotgcgION28dTg0JLOWIMUl_FvgFH6acKZJYGWf5_GWRgaqu2Jmz55K0/s320/navbar.gif);width:100%;margin:0 auto;border-bottom:4px solid #666}
.topnav{width: 980px;height:35px;overflow: hidden;margin:0 auto;padding:0px 10px 0px 10px; }
h1{font-size:24px;}
.clearfix:after{clear:both;content:"";display:block;font-size:0;height:0;visibility:hidden;}
.clear{clear:both;display:block;font-size:0;height:0;line-height:0;width:100%;margin:0;padding:0;}
#inner{padding-top:70px;}
#fixed {position:fixed;top:0;left:0;width:100%;height:35px;z-index:999;}
#fixedinner{text-align:center;background:transparent;height:35px;position:relative;z-index:999;}
* html, * html body{overflow-y:hidden;height:100%;}
* html #fixedinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }
* html #fixedinner{margin-right:17px;}
* html #fixed {position:absolute;}
* html #outer-wrapper {height:100%;overflow:auto}

ul#social-link li{float:right;list-style:none;margin:0;padding:0}
ul#social-link li{float:right}
ul#social-link li a{background:#fff;border-left:1px dotted #eee;width:35px;height:35px;color:#fff;display:inline-block;text-indent:-999em}
ul#social-link li a.facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUkWbgKfPYdVX088tDIo3t0MOeQR6lMvQvcwvh6Hpo25WoWOGvKozaRzzaLuGGk4etgr2vz3SN99g5agKKkzAGsTfa1OW8zJEV3zNWhUJhvbttx5movAcN0M5sAAgHPjVSgs9DlQ9RMNaA/s1600/facebook-variation.png) no-repeat center center}
ul#social-link li a.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Lvaj1fh5XJE_LCL_D7nx8P210z8JkVSd8vg-Tq0VncB423C7kcp_UtB7yl7A8IT50TjIwdzk-6-nnyjCRIo9bUInp2SzzPi9G_Rqg3yp3bopNFUnb8j0PnPkorxVzpOmBNC19nw49SYj/s1600/twitter-variation-old.png) no-repeat center center}
ul#social-link li a.youtube{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBUo-fz8LmSL2aTp_V4jUSb8UdqBM2E-xvttlVAHvIOwh-ca_KQaYjHlDilY3XmFL0ElpjQ8X52UOtP_lKvHtZnsL90fGAoiV65F7Q4qSBwBDV0uEu-7QwWscAcwD3DV6EIdRTCbR_fOvD/s1600/youtube-variation.png) no-repeat center center}
ul#social-link li a.google{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqJfXqnmEGX67gP7QfJfxTMVF_6A8_Fzz4b2w053p919-bi9Z1WNCIHxC6ZOrvk_4DgOKb9JO3gNjDDP4NJI-m-jM7q1wajiFDnzQz_hO39xyGL3QwIJPcTt9HrT9izbOz0NIH9nqPw0Xb/s1600/gplus-variation2.png) no-repeat center center}
ul#social-link li a.pinterest{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZcxD56Hrzn-T2n9GXVuq4eBu9B1JXvt6SygwsdjU-Koz5RIiLg9sVVXf9y3-nD5xfgd_Xn6uRsjUq2a3pS7L276TdPCo95ab3QNISod9GNjGAE4fjfmQ1xa1JCPUCah2oKwRLiH-Yut2X/s1600/pinterest.png) no-repeat center center}
ul#social-link li a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg025NvtpzSjhT7D8y94eMKe5PoXykeDHNP2k_fwfp4M-rO_tsouiZAS6fftkoOPS9_IpVOjvFOyhMQQ9Vmqa5RpJS3SWAq6cAwMAN8358h7VBi6rpffCji99fCoLyjXDc3R2_WztcgpzXL/s1600/rss-variation.png) no-repeat center center}
ul#social-link li a.sharethis{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjDkKKEerh26oGVLSiIHz-2LLC8AcLZJUC_r8lVFIPvYd8mWqBHXXc5JepHjD4IaNHGiy_BJpfYPZo4aUXY3K7p0O_-pDOEdc7FaTvgnEjtBIUWoWtTR-ESHv5FPZ3SGWJBBqYpkrFhTcg/s1600/sharethis-variation.png) no-repeat center center}

6. Setelah itu sekarang sobat cari kode <body>

7. Setelah ketemu silahkan copy kode berikut dan letakkan di bawah kode No. 6

<div id='fixed'>
<div id='fixedinner'>
<div class='toppic'>
<div class='topnav'>
<div style='font:bold 16px Verdana;float:left;padding-top:8px;color:#aaa;'>
Selamat datang blogger Mania di Blog Web Design
</div>

<ul class='clearfix' id='social-link'>
 <li><a class='youtube' href='http://www.youtube.com/user/AhmedMudho'>youtube</a></li>
 <li><a class='twitter' href='https://twitter.com/#!/Mudho'>twitter</a></li>
 <li><a class='facebook' href='http://www.facebook.com/Mudho1979'>facebook</a></li>
 <li><a class='google' href='https://plus.google.com/104921769529684967343'>google</a></li>
 <li><a class='pinterest' href='http://pinterest.com/AhmedMudho'>pinterest</a></li>
 <li><a class='rss' href='http://feeds.feedburner.com/Mudho1979'>rss</a></li>
 <li><a class='sharethis' href='http://sharethis.com'>share</a></li>
</ul>
</div>
</div><div style='clear:both;'/>
</div>

8. Silahkan sobat ganti Ucapan Selamat Datang dan URL Facebook, Tweet dan sebagainya dengan alamat URL sobat

9. Selesai, Laju coba dulu Klik pratinjau apa bila berhasil Klik simpan..

NB : Sesuaikan dengan blog sobat untuk menutup html di bawah kode <body>