Friday, December 21, 2012

Simple Tips Membuat Header Navbar Lebih Menarik

Pada kesempatan kali ini seosafety akan mencoba memberikan simple tips dan tidak merepotkan bagi penggunanya, pada pokok pembahasan kali ini kita bermain pada Header Navbar, untuk mempermudah dalam pelaksanaan silahkan baca sampai habis terlebih dahulu setiap langkah - langkahnya, jangan baca separuh lalu langsung praktek, takutnya terjadi kesalahan yang dapat merusak blog kamu, simak dan pahami karena ini akan mempermudah kamu nantinya dalam melakukan perubahan pada blog, adapun tipsnya adalah sebagai berikut :

  • Masuk Ke Blogger terlebih dahulu
  • Setelah itu pilih Design  >> Masuk Ke Edit HTML
  • Kemudian Cari Kode ]]</b:skin>
  • Kemudian Copy Paste Code di bawah ini tepat diatas kode ]]</b:skin>
#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; }




  •  Tetap Pada HTML kemudian cari code <body> dan ganti dengan code berikut
<body onLoad='goforit()'>

  • Setelah itu tambahkan code real time dibawah ini tepat dibawah code tadi
 &lt;script&gt; var dayarray=new Array(&quot;Sunday&quot;,&quot;Monday&quot;,&quot;Tuesday&quot;,&quot;Wednesday&quot;,&quot;Thursday&quot;,&quot;Friday&quot;,&quot;Saturday&quot;) var montharray=new Array(&quot;January&quot;,&quot;February&quot;,&quot;March&quot;,&quot;April&quot;,&quot;May&quot;,&quot;June&quot;,&quot;July&quot;,&quot;August&quot;,&quot;September&quot;,&quot;October&quot;,&quot;November&quot;,&quot;December&quot;) function getthedate(){ var mydate=new Date() var year=mydate.getYear() if (year &lt; 1000) year+=1900 var day=mydate.getDay() var month=mydate.getMonth() var daym=mydate.getDate() if (daym&lt;10) daym=&quot;0&quot;+daym var hours=mydate.getHours() var minutes=mydate.getMinutes() var seconds=mydate.getSeconds() var dn=&quot;AM&quot; if (hours&gt;=12) dn=&quot;PM&quot; if (hours&gt;12){ hours=hours-12 } if (hours==0) hours=12 if (minutes&lt;=9) minutes=&quot;0&quot;+minutes if (seconds&lt;=9) seconds=&quot;0&quot;+seconds //change font size here var cdate=&quot;&lt;small&gt;&lt;font color=&#39;ffffff&#39; face=&#39;Arial&#39;&gt;&lt;b&gt;&quot;+dayarray[day]+&quot;, &quot;+montharray[month]+&quot; &quot;+daym+&quot;, &quot;+year+&quot; &quot;+hours+&quot;:&quot;+minutes+&quot;:&quot;+seconds+&quot; &quot;+dn +&quot;&lt;/b&gt;&lt;/font&gt;&lt;/small&gt;&quot; if (document.all) document.all.clock.innerHTML=cdate else if (document.getElementById) document.getElementById(&quot;clock&quot;).innerHTML=cdate else document.write(cdate) } if (!document.all&amp;&amp;!document.getElementById) getthedate() function goforit(){ if (document.all||document.getElementById) setInterval(&quot;getthedate()&quot;,1000) } &lt;/script&gt;


  • Kemudian cari code berikut <div id='header-wrapper'> dan copy paste kode dibawah ini diatas 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: &#39;id&#39;}</script><div class='g-plusone' style='vertical-align:middle;margin-right:10px;'/> <a href='https://twitter.com/CapricornSafety'><img alt='twitter' src='https://sites.google.com/site/tutorialseoblogger/file/Twitter.png' style='vertical-align:middle'/>Twitter</a> <a href='https://www.facebook.com/safetycommunity'><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 + &quot;feeds/posts/default&quot;'><img src='https://sites.google.com/site/tutorialseoblogger/file/rss-post.png' style='vertical-align:middle'/></a><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts</a> <a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'><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 + &quot;feeds/comments/default&quot;'>Comments</a></p> </div> </div>
  • Simpan Template dan selamat mencoba

No comments:

Post a Comment