Simple HTML

How to Make Navbar with CSS and HTML codes.

2009-10-19T04:00:00.001-07:00

How to make a navbar in blogspot is a question that asked by my friend Jimmy. He need some Navigation bar html codes, and a horizontal navigation bar CSS codes. So many question is cross in his mind but this question is a very complicated how to explain. So now i try to make it simple in this blog and i hope he can apply to his own blog. This answer comes to you more than simple that you think before, Jimmy.

First of all, this is about CSS codes, then we will combine with a simple HTML codes. How to make a navbar is how to reorder CSS inside resource. I guest i right becouse that is the way i used to do, and offcourse, its work. All we need is A simple CSS codes and HTML codes.

Here we go. Now please:

Hide your defauld navbar

#navbar {
display: none;
}

Hide your default header.

display: none;

Make a space for new "DIV"

Make a value for your new "div"

#navgue {
width:660px;
float:$startSide;
word-wrap:break-word;
overflow:hidden;
}

Thats it, now save your html codes
then click "Lay Out" and see now that you have a new space to insert your navbar.

Make a New Navbar

So now we can make a navbar with html codes.
Click "Layout" and choose widget of Java/script, and then, so you can combine table and div at ones. Some thing like below codes:

<div style="background:#133 url('http://i552.photobucket.com/albums/jj355/Maurice_Avrahm/Nav.jpg') left; padding:0; width:100%;">
<table border=0 cellpadding=0>
<tr>
<td align="center">
<a href="http://ayamgoreng.com">Home</a>
</td></tr></table>
</div>

Thats it, you can modify your own navbar style as you want. Have a nice try Jimmy. Enjoy your navbar codes and please dont search with google again with this keyword: how to make navbar to blogspot. :p

Cara Menghapus feedburner Badge.

2009-10-01T02:38:00.000-07:00

Pengalaman googling: how to hide feedburner badge headline by feedburner banner.
Menghapus feedburner badge / banner kadang dibutuhkan untuk tujuan tertentu. Cara menghilangkan tampilan headlines by feedburner atau subscribe to feedburner adalah cara mengetahui resource nya. Cara menghilangkan headline by feedburner banner tidak berarti menghapus feedburner badge / banner sama sekali, tetapi menyembunyikan tampilan headine by feedburner dari pojok bawah javascript feedburner.

Tadinya saya menebak cara menghilangkan tampilan subsribe by feedburner banner menggunakan tool yang ada di webmaster, beberapa kali di coba tetapi tidak berhasil juga. Mungkin saja, tetapi sejauh ini saya tidak tahu cara menghilangkan feedburner badge / banner dengan tutorial webmaster sampai sejauh ini.

Lalu saya coba searh dengan how to hide feedburner badge headlines by feedburner banner, dan masuk ke halaman seseorang yang catatanya sangat panjang. Di ujung tulisan baru ia sebut, .. hide feedburner badge, arrange the font color and background with the same color.
Cara menghilangkan feedburner badge menseragamkan warna feedburner badge / banner headlines by feedburner dengan warna background halaman, ah yang benar saja! Jika demikian adanya warna background halaman yang akan menjadi korbannya.

Saya lalu menebak nebak cara menghapus headline by feedburner banner dengan memakai kode display:none, tapi tidak tahu kata ajaib id feedburner itu apa. Bahkan bongkar bongkar tool feedburner dan contoh kode yang bisa di pakai, tidak jua berhasil, tetapi keyakinan bahwa menghilangkan atau menghapus tampilan feedburner badge headline by feedburner banner adalah mungkin dilakukan karena banyak teman teman blogger yang bisa menghilangkan feedburner badge di halaman web mereka.

Jika itu sederet CSS kode yang rumit pasti saya akan menyerah,
tapi akhirnya saya tahu cara menghilangkan feedburner badge dengan googling how to hide feedburner badge dari blog anak muda timur tengah. Dan cara menghilangkanya ternyata sangat mudah sekali.

Ternyata anak muda timur tengah tidak hanya tahu cara membuat Pyramid, tetapi juga tahu cara menghilangkan badge
headlie by feedburner. ;)

Badge headlines by feedburner adalah link yang mengarah pada subscribe rss dari feedburner. Seperti ini:

Benar, hanya dengan menggunakan display:none, maka badge itu akan hilang.. Seperti ini:

.feedburnerFeedBlock #creditfooter {
display:none;
}

Feedburner sebagai daftar item, tentulah kapasitasnya adalah list item. Jadi kode ul li keniscayaan.

Dengan mengelola sumber daya itulah seorang webmaster bisa menampilkan feed dalam berbagai wujud yang indah.

Kode tersebut di atas bisa disematkan di antara CSS dan bisa juga langsung ditempel persis dibelakang kode script html

<script type="text/javascript" src="http://feeds.feedburner.com/domainanda?format=sigpro"></script>

Tapi sebaiknya dikurung di dalam div, atau table, misalnya seperti ini:

<div><style>div.feedburnerFeedBlock #creditfooter {
display:none;
} </style?
<script src="http://feeds.feedburner.com/domainanda?format=sigpro" type="text/javascript"?
</script?
</div?

Jika mau kode itu ditampilkan di CSS tempatnya adalah di dalam skin, hanya saja akan memodifikasi tampilan java script secara keseluruhan dengan seragam. Misalnya anda memiliki beberapa javascript dalam satu halaman, maka semuanya tidak bisa berbeda lagi dan feedburner badge banner akan hilang di semua tempat, apalagi jika hendak membuat border, background dan font, maka semuanya akan seragam, jika kode feedburner banner itu disemat di dalam kode html.

Contoh penggunaan kode CSS untuk menghilangkan feedburner badge banner:

.feedburnerFeedBlock {
border:2px solid gray;
font-size:100%;
}
.feedburnerFeedBlock .FeedTitle {
background:#668844;
padding:4px;
}
.feedburnerFeedBlock .feedTitle img {
vertical-align:middle;
margin:2px;
}
.feedburnerFeedBlock .feedTitle a {
margin:2;
font-size:100%;
color:$fontColor;
}
.feedburnerFeedBlock ul {
list style:none;
}
.feedburnerFeedBlock ul li {
border:#668844;
padding:1px;
}
.feedburnerFeedBlock ul li span a {
vertical-align:middle;
text-decoration:none;
color:&35;ffffff;
}
.feedburnerFeedBlock ul li p {
vertical-align:middle;
}
.feedburnerFeedBlock #creditfooter {
display:none;
}

Anda melihat display:none di garis bawahi, dan itu adalah kode untuk menghilangkan badge feedburner headline by feedburner banner. Dan kode CSS di atasnya adalah skin buat tabel list feed burner. Tentu saja nilainya bisa anda dirubah.

Buat saya, kode itu telah membantu halaman yang sederhana ini lebih bagus.
Tuntas pencarian cara menghilangkan feedburner badge headlines by feedburner, selesai pencarian panjang di google, how to hide feedburner badge headlines by feedburner.

Wisencare©Copyright | Bogor | Indonesia..

Tab Drop OnClick

2009-09-20T00:16:00.000-07:00

Table Drop Menu OnClick is a box contained by several anchors. Because some of them are hidden inside the box so we can minimize of the page.

Table drop menu onclick we can insert to our web by several way. Some of them we have to insert between line of CSS, but not really that complicated to blogspot.

All we have to do is type or copy and paste the codes to sidebar of the page. Go to blogger, click edid layout, add widged and choose javascript. Now this is the code:

<form name="maurice">
<p align="center">
<select name="avrh">
<option value="http://www.yahoo.com">1. Yahoo</option>
<option value="http://mail.google.com">2. Google Mail</option>
<option value="http://www.blogspot.com">3. Blogspot.com</option>
</select>
<input type="button" onClick="location=document.maurice.avrh.options[document.maurice.avrh.selectIndex].value;" value="Go"/>
</p>
</form>

Now you may try this result.

If we want two or more table drop in one page, we must change form name="maurice" to another name. And also change select name="menu to another word.

Thats it, enjoy the codes. If you need some trouble to put this code, you may also give comment to Belajar HTML.

Baiklah, sedikit pake bhs indo, sekedar coba2 apakah bisa muncul di gugel.

Belajar html untuk web akan lebih sempurna jika kita mengenal tab drop menu onClick. Mengerti html ini maka kita harus belajar html nya, karena kode html untuk tab menu onclick tidak boleh lepas dan pecah. Belajar html untuk tab drop menu onclick maka ada trik husus agar kode itu tidak pecah. Belajar html nya seperti ini. Buat p di awal html dan p penutup di akhirnya. Atau pake unbr di awal dan unbr di akhir.

Belajar html buat pemula seperti kebanyakan orang adalah belajar hyperText Markup Language. Itu adalah kepanjangan dari HTML. Maksud saya, tidak perlu anda teruskan baca sampai kebawah, karena inti belajar html sudah ada di atas.

Belajar html sampai kebawah hanya text biasa agar mesin gugel nyangkut saja. Jadi belajar htmlnya sudah cukup di atas, jika anda mau belajar html di blog ini sebagai belajar html, maka silahkan klik link yang ada di samping halaman belajar html.

Itu lebih baik karena belajar html untuk menu tab onclick sudah jelas di cantumkan di atas. Belajar html adalah cara gugel gugel blog orang. Saya ingat pertama kali belajar html, begitu melihat blog orang kita, belajar html dan belajar membuat website, cukup modal kemauan dan bisa membaca. Jadi mudah mudahan anda yang sedang belajar html memiliki keahlian membaca dan punya kemauan.

Memang belajar html hanya cukup dengan dua syarat itu. Tetapi tentu saja, belajar html tidak cukup sehari atau dua hari, mungkin enam bulan, jika anda serius belajar html, maka anda akan mengerti sedikit demi sedikit.

Belajar html, kita seperti memasuki rimba yang tidak dikenal. Dunia yang gelap. Tetapi jika belajar html di fahami sedikit dan perlahan, mudah mudahan mengerti. Saya yakin itu.

Yang tidak saya yakin adalah, apakah mata anda mengawasi tulisan ini hingga kata terakhir ini;)

Html Codes For Menu Tab Drop.

2009-09-16T22:52:00.000-07:00

In this session, we are trying to make sidebar tab drop. Perhaps it is not a big deal for webmaster to make an ordinary menu tab drop set. But this is more eazier than else. We dont need a specific software, neither any complicated CSS line codes.

Here, i try to explain how quite simple the html codes for menu tab are.

The First step.

Let us arrange to set up a table. It will be better if we combine with script of "div".

For example:
<div style="background-color=#cccccc; border;1px solid gray; padding:4px; width:13em;">
<table border=0 cellpadding=0>
<tr>
<th align="center" valign="top">
<div style="background-color:purple; border:1px solid gray; padding:4px; width:13em;">Menu</div></th>
</tr>
<tr>
<td align="center">
<div style="background-color:blue; border:1px solid gray; padding:4px; width:13em;">Maurice Blog</div>
</td>
</tr>
<tr>
<td align="center">
<div style="background-color:blue; border:1px solid gray; padding: 4 px; width:18em;">Wisencare</div>
</td>
</tr>
</table>
</div>

Please take a look at the result of the tab drop code:

Main Menu
Wisencare
Your Blog

Second Step

Now please insert a set of anchor to every single of row. Then you will see that every row and name inside of it becomes a clickable drop menu.

For example.

<a href="http://htmlcodes-originallyhtml.blogspot.com">
<div style="background-color:blue; padding:4px; width:12em">Wisencare</div></a>

Thats it. Now you have a new style of sidebar table.

Yahoo Messenger Status Online Indicator

2009-06-12T02:33:00.001-07:00

Yahoo Messenger Online Indicator is a line of html behind a pic we put to our blog or web page. That pic will indicate to visitor do we online or offline in Yahoo Messenger.

If we go in cyber is to share, to make a networking and also to make a widely relationship, then we must let to know people where to contact us. That is the reason why Yahoo Messenger online status indicator is so important to our blog or web page.

Let me show you my status in Yahoo Messenger on time right now:

Actually there are another style of pics of Yahoo Messenger indicator we can choose to our web or blog.

t=1

t=2

t=3

t=4

t=5

t=6

t=7

t=8

t=9

t=10

t=11

t=12

t=13

t=14

t=15

t=16

All that yahoo messengger image default to offline if My ym is ofline. But you can see my real status is online while i am online in YM that i have show you above. That is because my Yahoo Messenger ID is true..

Now let me show you how to make that widget to yours.
See below codes:

<a href="http://edit.yahoo.com/config/send_webmesg?target=Your ID@yahoo.com&.src=pg">
<img src="http://opi.yahoo.com/online?u=Your ID&m=g&t=16"/></a>

Type that code to where you want in your blog. Before you done, please change Your IDto your own ID, example, i type my id as "Mandheilink" because my YM ID is Mandheilink(et)yahoo(dot)co(dot)id. I type "Mandheilink" without "@yahoo.com", then its work. And then, please change t=16 to what image code image style you want.

Now save your html code, that simple. Have a nice try.

Wisencare | Bogor | Indonesia | Postmiyaibisme | tag: Yahoo Messenger Online Indicator.

Google Search Box Codes

2009-05-24T05:04:00.000-07:00

Wisencare, Bogor,24 May 2009

Do we need search box to our page? Is it necessary? Offcourse we do. With this google search box we can go any where in world wide web from our page. And more, if we have a searh box page, anyone who are visiting on our blog can searh they want in content of our web.

Means, we need a couple google search and also web page searc box.
We can put Google searh box to a different position in our blog as we want. It depend on where is the place would be good in looking it self.

If you want just a simple web page search box, we have an eazy way to put a google searh box to your blogspot, go to lay out and click add gadged on sidebar then choose Search box widget. Then save your gadged. And its done. That simple.

But sometime, that style is not the way we want. We need something better. Or we need them both.

Now try this below codes:

<form method="get" action="http://www.google.com/search">
<input type="text" name="q" size="31" maxlength="255" value=" "/>

<input type="submit" value="Google Search"/>
<input type="radio" name="site search" value=" ">
The Web
<input type="radio" name="site search" value="http://wisencare.blogspot.com" checked/> Searh This Site.
</form>

We do have another of Google search box style if its not good enouh for you. I promise you, this is better, a nice google search box. This one i recomend to you. Type this below code:

<form method="get" action="http://www.google.com/search" target="new">
<div style="border:1px solid black; padding:4px; width:20em;">
<table border="0" cellpadding="0">
<tr>
<td>
<input type="text" name="mj" size="25" maxlength="250" value=" "/>
<input type="submit" value="Google Search"/>
</td>
</tr>
<tr>
<td align="center" style="font-size:75%">
<input type="checkbox" name="sitesearch" value="http://wisencare.blogspot.com" checked/> Only Search This Blog.<br/>
</td>
</tr>
</table>
</form>

You have to go to sign in, click layout, click add gaddet, and choose javascrip. Then type all that codes. I think you know better what i mean, do you?
Thats it. Now You have a new google searh box.

If you want to see this blog twice or many time as you want. You may copy and paste this code:

<a href="http://htmlcodes-originallyhtml.blogspot.com">Make Google Search Box</a>

That above codes will be like this in your web.
Google Search Box

If you have what that you wanna, you may please share it to the world. Becouse, we are being online is to share.
Have a nice day.

How To Make Double Sidebars And Multiple Navbars on Blogger.

2009-05-15T22:56:00.001-07:00

Wisencare | Bogor | tag: belajar html

Blogspot page element originally is made with one standard navbar, one header lay out, one sidebar lay out, one space for posting and one lay out for footer.

I think, it would be nice if we have two sidebars in our blog. One for left sidebar and the other is for right sidebar and our post there betwent that two sidebars. Can we arrange that?

How if we have an editable navbar right on top of our post? Can we make it?

This is below table pic explain what we are talking about.

Navbar
Header
add gadget

add gadget

post

add gadget

this is

your right

editable sidebar

Footer

Well. We can make it eazily. All we have to do is to put some codes line on css set of our blogger.

Lets sign in into the blogger, and choose which post to edited. Then go to lay out and click edit html.

Now, lets find this codes:

<div id=´croscol-wrapper´ style=´text-align:center´>
<b:section class=´croscol´ id=´crosscol´ showaddelement=´no´/>

Okay, now put the codes below right after that.

First. This is the codes for navbar widget.

<div id=´navbar1-wrapper´>
<section class=´navbar1´ id=´navbar1´ preferred=´yes´>
</div>

And then this below is the codes to make second sidebar. Lets put right after top navbar codes.

<div id=´left-sidebar´>
<b:section class=´left-sidebar´ id=´left-sidebar´ preferred=´yes´/>
</div>

Now please save your html, and find out what result. The boxes for add gadged was allready appear. Perhaps slipt one each other, but dont mind, it just need to fixed of the width. We must go to edit html and fix that measure of width. Easy to fix it. Lets say, outer wrapper:950px, sidebar:220px, mainpost:420px, and footer:950px. Thats it. One again save your html codes

Now try your lay out. Click lay out box and try to add gadget with your new left sidebar or navbar1.

Ofcourse, it does not work yet. We must fill the value of navbar1 and left-sidebar it self. Try to figure it out what and where to put.

You are right, we must type some codes like this:

#left-sidebar {
width:__
border:__
Lets put to your html code between <body> and </body> Then it would be working.

Okay, try this below codes:

#left-sidebar {
width: 210px;
float: $startSide;
word-wrap: break-word;
overflow: hidden;
}

This below codes are for navbar:

#navbar1-wrapper {
width: 930px;
float: $startSide;
word-wrap: break-word;
overflow: hidden;
}
Thats it. Save your html and see what wonderfull blog are you now.

If you need a second or acouple time to read this blog, the simple way to you is copy and paste this below codes:
<a href="http://htmlcodes-originallyhtml.blogspot.com"></a>
And if you have any trouble to fix the codes into your blog, you are always wellcome to contack us.