MENAMBAH TOPNAVBAR
Prosedure Modifikasi Minima bagian kedua kali ini merupakan lanjutan Prosedure modifikasi Minima bagian pertama yang membahas tentang bagaimana memodifikasi template minima menjadi "Edel2XMinima", kali ini kita akan membahas bagaimana menambahkan TopNavbar, yaitu ruang navigasi diatas Header.
Untuk meodifikasi ini, kita perlu menyembunyikan Navbar Blogger terlebih dahulu, pasang kode
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}
setelah kode berikut :
/* Use this with templates/template-twocol.html */
kemudian kita tambahkan kode berikut, diatas kode : ]]></b:skin>
/*topnavbar
------------------------*/
#topnavbar {
background: #2c4755;
width: 980px;
height: 30px;
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: 250px;
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;
}
pada body kita tambahkan : topnavbar yang isinya realtime, post feed & comment feed dari blog kita.
rubah <body> dengan <body onLoad='goforit()'> lalu tambahkan kode real time dibawah ini :
<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='000000' 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'> lalu tambahkan kode dibawah ini di atas kode tersebut
<div id='topnavbar'>
<div class='topnavbarleft'>
<span id='clock'/>
</div>
<div class='topnavbarright'>
<p><a expr:href='data:blog.homepageUrl + "feeds/posts/default"'><img src='http://i288.photobucket.com/albums/ll179/ahnning/rssnatal.gif' 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='http://i288.photobucket.com/albums/ll179/ahnning/rssnatal.gif' style='vertical-align:middle;margin-left:10px;'/></a><a expr:href='data:blog.homepageUrl + "feeds/comments/default"'>Comments</a></p>
</div>
</div>
(Bersambung.... )
-
Sebagaimana kita ketahui, bahwa dalam peradaban "JAWA" banyak kita jumpai aturan-aturan yang bersifat mengikat. Hal ini karena at... -
Mengamankan data yang kita miliki dari Copas user lain itu sangat penting, terlebih jika data tersebut bersifat rahasia. Fasilitas yang ada... -
Berikut ini adalah tutorial Efek Foto Fantasi dengan menggunakan Adobe Photoshop CS5, tutorial ini tidak terlalu panjang, sehingga tidak a...
saya akan ikutin terus tutorialnya bang. ntar kalo saya ada waktu akan saya edit dan secepatnya ngasih khabar deh. txs ya bang. sekalian saya ambil link blog ini untuk dimasukkan kedaftar linklist blog saya. jika tak keberatan, link balik ya bang.again, txs to u.
BalasHapusIni dia yang ditunggu Bos...
BalasHapusakhir nya datang juga posting sambungannya
Thank banget ya
Mau saya coba langsung nich Bos...
BalasHapuswalaupun gw gak belum bisa buat template
tapi gw paleng suka ngotak-ngatik template
Wach kayak cerpen aja nich bersambung...mantap dech
BalasHapusEh..Bos Loedin mau nanya nich...kok asa gw koment disini di email gw selalu tertulis atau muncul Mail Delivery Subsystem
Napa...ya
terus satu ..gimana cara buat photo profil kaya Bos ..bisa kedip2 gitu...tambah ganteng aja..he..he..he..
to Baka Kelana
BalasHapusPertanyaan yg pertama aku bingung jawabnya.
Untuk buat profil kedip2, itu pakai adobe terus disimpan dalam format GIF karena animasi dan ditaruh di Photobucket....
yang ini juga kenapa aku nggak bisa terapin di blog percobaanku ya, kang? katanya error! tulungin dong kang, aku jadi pusing nih, dimana kesalahan yg telah aku perbuat(aduh, lebay nih!)
BalasHapus