cara membuat menu bar di bawah halaman blog

Menu bar di bottom halaman blog dapat kita manfaatkan sebagai media Menu Navigasi dan media subscribe seperti pada tutorial kali ini, dengan cara memanfaatkan Menu bar bottom ini selain design blog terlihat elegan dapat juga anda pergunakan sebagai media interaktiv buat para pengunjung blog anda. Menu bar bottom ini tidak mempengaruhi tampilan halaman blog anda menjadi sempit sebab menu bar bottom ini hanya memakan tempat yang sedikit. Disamping tampilannya yang ranping dan elegan, menu bar bottom ini juga valid HTML 5 dan CSS 3, serta memiliki penulisan tag tag yang ringan, jadi anda tidak perlu takut menu bar bottom ini mempengaruhi loading blog anda. Oke saya merasa anda sudah lebih paham dari pada saya soal Menu bar bottom yang saya posting ini. Untuk melihat bagaimana cara pembuatan menu bar bottom ini pada halaman blog kesayangan anda silahkan simak tutorial dibawah ini, buat teman teman yang sudah master di dunia blog saya permisi untuk posting artikel yang tidak seberapa ini.

Untuk DEMO silahkan " KLIK DISINI " Lihat bagian bawah halaman, naahhh... !! itu dia demonya, saatnya simak tutorial pembuatannya di halaman blog kesayangan anda.

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code ]]></b:skin>
4. Copy Code script CSS dibawah ini, pastekan diatas code]]></b:skin> tadi

/*****************************************
Name : Bottom menu bar halaman blog
By :Rivai Silaban | Blog Design
Update : 12/08/2013
******************************************/
.content-wrapper {
position : relative;
max-width : 980px;
margin : 0 auto;
}
#BD-bottom-menu{
border-top:3px solid #00CCFF;
z-index:100;
bottom:0;
left:0;
width:100%;
overflow:auto;
position:fixed;
margin:0 0 4px;
padding:8px 0 6px;
height: auto;
background-color: #444;// latar belakang
box-shadow: 1px 0 5px #111;
}
#BD-bottom-menu .left a{
float:left;
border: solid #333333 1px;
text-decoration:none;
color:#C0C0C0;
padding:5px 10px;
margin:0 3px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #515151;
text-transform: uppercase;
font-weight: bold;
text-shadow: 1px 2px #111;
}
#BD-bottom-menu .left a:hover{

color:#fff;box-shadow:0 0 2px #222;border: solid #111 1px;
background-color: #4D4D4D;text-shadow:none;
}
#BD-bottom-menu .right .BD-box {
margin-bottom : 0px;
padding : 0px;
float: right;
}
#BD-bottom-menu .right .BD-box input {
border : rgb(9, 149, 223) solid 1px;
font-size : 12px;
padding : 5px;
text-shadow : 1px 1px 0 #FFF;
width : 200px;
color : #0000CC;
font-family : georgia;
border : rgb(9, 149, 223) solid 1px;
border-color : #0099FF;
background-color: #EAF8FF;
}
#BD-bottom-menu .right .BD-box input:hover {
background-color: #FFFFFF;
}
#BD-bottom-menu .right .BD-box .submit {
border : rgb(9, 149, 223) solid 2px;
color : #E5E5E5;
cursor : pointer;
font-family : verdana;
font-size : 12px;
padding : 0 0 3px 0;
text-shadow : 1px 1px #111;
text-transform : uppercase;
width : 100px;
height : 25px;
background-color : #0066FF;
border-color : #0099FF;
font-style: italic;
font-weight: bold;
}
#BD-bottom-menu .right .BD-box .submit:hover {
background-color :#0099FF;
color : #FFFFFF;
border-color : #00CCFF;
text-shadow: none;
}
/*** Blog Design CSS Bottom menu bar halaman blog and ***/

Install Program Tag HTML

• Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
• Untuk memasang kode htmnya anda dapat memasangnya dibawah tag html anda.
• Silahkan cari code </body>( kode ini biasanya berada dibawah tag html/xml blog anda )
• Copy kode dibawah ini atau didalam spoiler kemudian pastekan tepat diatas kode </body>
• Save template anda lihat hasilnya dan silahkan ucapkan terimakasih atas kodenya melalui form komentar pada halaman blog ini, untuk memberikan semangat buat saya untuk berbagai tutorial kedepannya. salam bloger dari saya...!!!

<!-- Rivai Silaban | BLOG DESIGN Bottom menu bar halaman blog start -->
<br/><br/>
<div id='BD-bottom-menu'>
<div class='content-wrapper'>
<div class='left'>
<a href='link anda' rel='nofollow' target="_blank" title='disclaimer'>Disclaimer</a>
<a href='link anda' rel='nofollow' target="_blank" title='privacy policy'>privacy policy</a>
<a href='link anda' rel='nofollow' target="_blank" title='sitemap'>sitemap</a>
<a href='link anda' rel='nofollow' target="_blank" title='kontak'>contact</a>
</div>
<div class='right'>
<div class='BD-box'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ID FEEDBURNER &apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=600,height=550&apos;);return true' target='popupwindow'>
<img alt="feedburner" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3bN5pC-AX7lWJ8TRgxtYQzGLBunJatZfqFjvcgLuE3tB5vkXcvEDQkG5hVfQHZ5yYJRhhnzNigzOKu8qJlrVwBwOrJWtDChbs2b6CDAQK5ObSgOV0Jod5TvXgVr_siKS0JY8kR8RNlL8/h77/feedburner.png" title='feedburner' style="margin-bottom:-9px;"/> <input name='email' type='text' class='required email' onblur='if (this.value == &apos;&apos;) this.value = &apos;Enter email here !!&apos;;' onclick='if (this.value == &apos;Enter email here !!&apos;) this.value = &apos;&apos;;' value='Enter email here !!' /> <input class='submit' id='submit' name='submit' title='subscribe' type='submit' value='SUBSCRIBE'/>
<input name='uri' type='hidden' value='ID FEEDBURNER'/>
<input name='loc' type='hidden' value='en_US'/>
</form></div></div></div></div>
<!-- Rivai Silaban | BLOG DESIGN Bottom menu bar halaman blog and-->

Keterangan Code

• Untuk kode CSSnya sesuaikan tampilan dengan kreative anda sendiri,
  Untuk tulisan warna HIJAU pada CSS bila pada template anda sudah ada, silahkan anda hapus kode tersebut bila tidak ada anda dapat memakainya, kemudian edit lebar halaman anda [ max-width : 980px; ] agar sama dengan lebar halaman anda.
• Untuk kode HTML nya silahkan ganti tulisan warna MERAH sesuai dengan link menu anda dan ID Feddburner anda, ganti semua sesuai yang telah dituliskan, perhatikan warnanya masing masing.
• Tulisan warna BIRU adalah title menu anda dan menu anda, dalam tutorial ini saya memakai menu seperti diatas.
• Kode kuning <br/> dapat anda kurangi atau tambahkan bila halaman yang paling bawah dari halaman blog anda tertutupi, silahkan tambah code <br/> bila terlalu jauh silahkan kurangi.
• Untuk ID Feedburner bila anda belum memilikinya silahkan kunjungi tutorial cara mengetahui ID feedburner KLIK DISINI

Kesimpulan

Silahkan edit semua kode diatas bila ingin menyesuaikan tampilan menu bar bottom agar sesuai dengan template anda.

Bila anda mengalami kendala dalam memasang aplikasi tersebut silahkan hubungi saya atau berikan komentr pada form komentr dibawah anda dapat share dengan say sendiri. Semua solusi pasti ada jalannya bila kita saling berbagi.

Menu bar bottom ini valid HTML 5 dan CSS 3 serta menganut sistem penulisan tag yang SEO Friendly, bicara tentang loading kode menu bar bottom ini tidak mempengaruhi loading blog anda sebab tag htmlnya ringan.

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 5:04 PM