CARA MEMBUAT MENU BAR DI BLOGSPOT

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.
  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 .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


  5. Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
  6. Untuk memasang kode htmnya anda dapat memasangnya dibawah tag html anda.
  7. Silahkan cari code </body>( kode ini biasanya berada dibawah tag html/xml blog anda )
  8. Copy kode dibawah ini atau didalam spoiler kemudian pastekan tepat diatas kode </body>
  9. 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...!!!

<!-- ALI REAL PG | 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/AVvXsEiGvmnECjJ3f0wOrV0OQzyL9jgRrwCjFtAjSWC3Q9RODNCtlA9P_rpPLsQ3pmugrGv4Aa7bn3gdnphyphenhyphen2P3fzLTj8J-U-e_wzQdA6AWWSVSd1nDWkbjfGRLjX0vo74_umsnHjuPhOGXGoEU/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

Penulis : alifian ~ Sebuah blog yang menyediakan berbagai macam informasi

Artikel CARA MEMBUAT MENU BAR DI BLOGSPOT ini dipublish oleh alifian pada hari Saturday, August 24, 2013. Semoga artikel ini dapat bermanfaat.Terimakasih atas kunjungan Anda silahkan tinggalkan komentar.sudah ada 0 komentar: di postingan CARA MEMBUAT MENU BAR DI BLOGSPOT
 

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)
diooda
Share