Home
Seperti biasa sobat harus login dahulu ke blogger
Setelah itu pilih Design >> Edit HTML
Kemudian cari kode ]]></b:skin>
Copy dan pastekan kode di bawah ini tepat di atas kode tadi
#topnavbar { background: #2c4755; width: 100%; height: 40px; color: #FFFFFF; margin: 0px 0px 2px 0px; padding: 0px; } #topnavbar a, #topnavbar a:visited { font-size: 11px; font-weight: bold; color: #FFFFFF; text-decoration: none; } #topnavbar a:hover { text-decoration: underline; } #topnavbar p { font-size: 11px; font-weight: bold; padding: 0px; margin: 0px; } .topnavbarleft { width: 30%; float: left; margin: 0px; padding: 8px 0px 0px 10px; } .topnavbarright { width: 600px; float: right; margin: 0px; padding: 7px 10px 0px 0px; text-transform: uppercase; text-align: right; } .topnavbarright a img { border: none; margin: 0px 3px 3px 0px; padding: 0px; }
Kemudian cari kode <body>
Gantilah kode <body> dengan kode berikut
<body onLoad='goforit()'>
Setelah itu tambahkan kode real time dibawah ini tepat di bawah kode tadi
<script> var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday") var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December") function getthedate(){ var mydate=new Date() var year=mydate.getYear() if (year < 1000) year+=1900 var day=mydate.getDay() var month=mydate.getMonth() var daym=mydate.getDate() if (daym<10) daym="0"+daym var hours=mydate.getHours() var minutes=mydate.getMinutes() var seconds=mydate.getSeconds() var dn="AM" if (hours>=12) dn="PM" if (hours>12){ hours=hours-12 } if (hours==0) hours=12 if (minutes<=9) minutes="0"+minutes if (seconds<=9) seconds="0"+seconds //change font size here var cdate="<small><font color='ffffff' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+":"+seconds+" "+dn +"</b></font></small>" if (document.all) document.all.clock.innerHTML=cdate else if (document.getElementById) document.getElementById("clock").innerHTML=cdate else document.write(cdate) } if (!document.all&&!document.getElementById) getthedate() function goforit(){ if (document.all||document.getElementById) setInterval("getthedate()",1000) } </script>
Kemudian cari kode <div id='header-wrapper'>
Dan pastekan kode di bawah ini di atas kode tersebut
<div id='topnavbar'> <div class='topnavbarleft'> <span id='clock'/> </div> <div class='topnavbarright'> <p><script src='https://apis.google.com/js/plusone.js' type='text/javascript'>{lang: 'id'}</script><div class='g-plusone' style='vertical-align:middle;margin-right:10px;'/> <a href='http://twitter.com/tutorialforyou2'><img alt='twitter' src='https://sites.google.com/site/tutorialseoblogger/file/Twitter.png' style='vertical-align:middle'/>Twitter</a> <a href='http://www.facebook.com/tutorialforu'><img alt='facebook' src='https://sites.google.com/site/tutorialseoblogger/file/facebook-icon.png' style='vertical-align:middle'/>Facebook</a> <a expr:href='data:blog.homepageUrl + "feeds/posts/default"'><img src='https://sites.google.com/site/tutorialseoblogger/file/rss-post.png' style='vertical-align:middle'/></a><a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Posts</a> <a expr:href='data:blog.homepageUrl + "feeds/comments/default"'><img alt='' src='https://sites.google.com/site/tutorialseoblogger/file/rss-comment.png' style='vertical-align:middle;margin-left:10px;'/></a><a expr:href='data:blog.homepageUrl + "feeds/comments/default"'>Comments</a></p> </div> </div>
Kemudian simpan template sobat dan lihat hasilnya
Selesai sudah tutorial Cara Membuat Header Navbar Pada Blogger,
selamat mencoba semoga bermanfaat
Description: Cara Membuat Header Navbar Pada Blogger
Rating: 4.5
Reviewer: Andre G.
ItemReviewed: Cara Membuat Header Navbar Pada Blogger
Posted by:Mbah Qopet
Mbah Qopet Updated at: 13.00
