Cara Membuat Header Navbar Pada Blogger

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

Anda sedang membaca artikel tentang Cara Membuat Header Navbar Pada Blogger dan anda bisa menemukan artikel Cara Membuat Header Navbar Pada Blogger ini dengan url http://cuz-tom.blogspot.com/2012/12/cara-membuat-header-navbar-pada-blogger.html. Anda boleh menyebarluaskan atau mengcopy artikel Cara Membuat Header Navbar Pada Blogger ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya.

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

Cara Membuat Header Navbar Pada Blogger

Cara Membuat Header Navbar Pada Blogger

2 komentar:

Label