28 Januari 2009

Prosedur Modifikasi MINIMA (II)

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 :


&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;000000&#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 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 + &quot;feeds/posts/default&quot;'><img src='http://i288.photobucket.com/albums/ll179/ahnning/rssnatal.gif' 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='http://i288.photobucket.com/albums/ll179/ahnning/rssnatal.gif' style='vertical-align:middle;margin-left:10px;'/></a><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments</a></p>

</div>
</div>

(Bersambung.... )

6 komentar:

CIN_TA mengatakan...

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.

Baka Kelana mengatakan...

Ini dia yang ditunggu Bos...
akhir nya datang juga posting sambungannya
Thank banget ya

Baka Kelana mengatakan...

Mau saya coba langsung nich Bos...
walaupun gw gak belum bisa buat template
tapi gw paleng suka ngotak-ngatik template

Baka Kelana mengatakan...

Wach kayak cerpen aja nich bersambung...mantap dech

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

bcom mengatakan...

to Baka Kelana

Pertanyaan yg pertama aku bingung jawabnya.

Untuk buat profil kedip2, itu pakai adobe terus disimpan dalam format GIF karena animasi dan ditaruh di Photobucket....

dien mengatakan...

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!)

Posting Komentar

 
Foto saya
Ketidaktahuan anda adalah kepedulianku untuk selalu memberikan informasi, meski hanya sekedar hilangkan rasa ingin tahu saja.