MY DATA

Tuesday, December 22, 2009

Create navbar

How to create a navbar that are in the navbar footerApa it? to avoid confusion, try to switch the view buddies to the top of this blog! there seen one of his frames to facilitate our bloggers on bloggers sigin, well something like that ... navbar yang saya maksud.

Untuk membuat gambar seperti itu, ada beberapa langkah yang harus sobat lakukan, di antaranya :

1. Jika sobat menginginkan dalam navbar tersebut terpampang foto atau logo ataupun tanda tangan seperti miliknya mas anang, maka buatlah terlebih dahulu foto/logo atau gambar berbentuk tanda tangan, tapi tentunya dalam ukuran yang kecil. Contoh seperti gambar berikut ini :

atau gambar tanda tangan seperti ini

2. jika foto/logo atau gambar tanda tangan sudah selesai di buat, maka langkah selanjut adalah meng upload foto tersebut ke hosting untuk menyimpan gambar, bisa ke blogger ataupun hosting lain. setelah di upload, catatlah alamat gambar tersebut untuk keperluan nanti di simpan di dalam navbar. Contoh alamat foto dan tanda tangan di atas seperti ini :

http://favatar.myfavatar.com/amen24.png

http://amen24.googlepages.com/TandaTangan_03.gif

3. Langkah selanjutnya adalah memasukan kode CSS untuk navbar yang di buat, contoh kodenya seperti ini :

/* kode untuk navbar
--------------------------------------- */

#navbar-bawah img {
/* margin: 0px 0px -8px 0px; */
vertical-align: middle;
}

#navbar-bawah p.info {
float: right;
padding-right:40px;
line-height: 1.5;
height: 100%;
vertical-align: bottom;
}

#navbar-bawah p {
float: left;
margin: 0px;
padding-top:4px;
padding-left:40px;
line-height: 1.2;
vertical-align: bottom;
}

#navbar-bawah a {
color:#00CCFF;
text-decoration:none;
}
#navbar-bawah a:hover{
color: #00FFFF;
}
#navbar-bawah {
align: center;
position: fixed;
border-top: 1px solid #ddd;
border-bottom: 5px solid #003366;
background-color: #114477;
width: 100%;
left: 0px;
text-align: left;
color: #ffffff;
font-family: verdana;
font-size: 12px;
z-index:10000;
bottom:0;
}

# Langkah berikutnya adalah memasukan kode navbar pada body template, contoh kodenya seperti ini :
<br/><br/>
<div id="navbar-bawah">
<p><img border="0" src="http://favatar.myfavatar.com/amen24.png"/>   
<a href="http://template-unik.blogspot.com"><b>Template Unik</b>
</a>  © 2007 |
Design by <a href="http://sibatman.blogspot.com" target="_blank">batman</a>
   <img border="0" src="http://amen24.googlepages.com/TandaTangan_03.gif"/></p>
<p class="info">Powered by <a href="http://www.blogger.com">Blogger</a> |
thanks to <a href="http://www.feedburner.com" target="_blank">Feed burner</a><br/>
Best viewed in Firefox 1.5+ at 1024x768 or higher resolution</p>
</div>

Untuk cara pemasangan kode di atas, silahkan ikuti langkah berikut ini :

Untuk Template Klasik

1. Sign in di blogger

2. Klik menu Template

3. Klik menu Edit HTML

4. Copy seluruh kode template sobat, paste di notepad kemudian save di komputer sobat sebagai backup data

5. Copy paste kode berikut ! simpan antara kode <style type="text/css"> dan kode </style>. atau jika bingung, simpan saja persis di atas kode </style>

/* kode untuk navbar
--------------------------------------- */

#navbar-bawah img {
/* margin: 0px 0px -8px 0px; */
vertical-align: middle;
}

#navbar-bawah p.info {
float: right;
padding-right:40px;
line-height: 1.5;
height: 100%;
vertical-align: bottom;
}

#navbar-bawah p {
float: left;
margin: 0px;
padding-top:4px;
padding-left:40px;
line-height: 1.2;
vertical-align: bottom;
}

#navbar-bawah a {
color:#00CCFF;
text-decoration:none;
}
#navbar-bawah a:hover{
color: #00FFFF;
}
#navbar-bawah {
align: center;
position: fixed;
border-top: 1px solid #ddd;
border-bottom: 5px solid #003366;
background-color: #114477;
width: 100%;
left: 0px;
text-align: left;
color: #ffffff;
font-family: verdana;
font-size: 12px;
z-index:10000;
bottom:0;
}

6. Copy paste kode berikut persis di atas kode </body> (ganti yang tercetak merah dengan milik sobat) :

<br/><br/>
<div id="navbar-bawah">
<p><img border="0" src="http://favatar.myfavatar.com/amen24.png"/>   
<a href="http://sibatman.blogspot.com"><b>Template Unik</b>
</a>  © 2007 |
Design by <a href="http://kolom-tutorial.blogspot.com" target="_blank">batman</a>
   <img border="0" src="http://amen24.googlepages.com/TandaTangan_03.gif"/></p>
<p class="info">Powered by <a href="http://www.blogger.com">Blogger</a> |
thanks to <a href="http://www.feedburner.com" target="_blank">Feed burner</a><br/>
Best viewed in Firefox 1.5+ at 1024x768 or higher resolution</p>
</div>

7. Klik tombol Simpan Perubahan Template

8. Selesai.

Untuk Template baru (new blogger template)

1. Sign in di blogger

2. Klik menu layout

3. Klik menu Edit HTML

4. Klik tulisan Download Full Template, lalu save data tersebut. Ini untuk berjaga-jaga apabila terjadi kesalahan dalam mengedit kode template

5. Copy paste kode berikut ! simpan di atas kode ]]></b:skin>

/* kode untuk navbar
--------------------------------------- */

#navbar-bawah img {
/* margin: 0px 0px -8px 0px; */
vertical-align: middle;
}

#navbar-bawah p.info {
float: right;
padding-right:40px;
line-height: 1.5;
height: 100%;
vertical-align: bottom;
}

#navbar-bawah p {
float: left;
margin: 0px;
padding-top:4px;
padding-left:40px;
line-height: 1.2;
vertical-align: bottom;
}

#navbar-bawah a {
color:#00CCFF;
text-decoration:none;
}
#navbar-bawah a:hover{
color: #00FFFF;
}
#navbar-bawah {
align: center;
position: fixed;
border-top: 1px solid #ddd;
border-bottom: 5px solid #003366;
background-color: #114477;
width: 100%;
left: 0px;
text-align: left;
color: #ffffff;
font-family: verdana;
font-size: 12px;
z-index:10000;
bottom:0;

6. Copy paste kode berikut persis di atas kode </body> (ganti yang tercetak merah dengan milik sobat) :

<br/><br/>
<div id="navbar-bawah">
<p><img border="0" src="http://favatar.myfavatar.com/amen24.png"/>   
<a href="http://template-unik.blogspot.com"><b>Template Unik</b>
</a>  © 2007 |
Design by <a href="http://kolom-tutorial.blogspot.com" target="_blank">Rohman Abdul Manap</a>
   <img border="0" src="http://amen24.googlepages.com/TandaTangan_03.gif"/></p>
<p class="info">Powered by <a href="http://www.blogger.com">Blogger</a> |
thanks to <a href="http://www.feedburner.com" target="_blank">Feed burner</a><br/>
Best viewed in Firefox 1.5+ at 1024x768 or higher resolution</p>
</div>

7. Klik tombol Simpan Template

8. Selesai.

ok selamat mencoba by KR

Create marquee effects

What is a marquee? Marquee is a program HTML to create text to move or walk. Marquee program is much in demand and in use by the bloggers on the blog because of the nature of this program is dynamic and interesting to see disamping untuk menghemat tempat pada halaman blog.

Marquee ini bisa di buat dengan menggunakan tag ....

Atribut yang sering di gunakan adalah :

BGCOLOR="warna" --> Untuk mengatur warna background (latar belakang) teks

DIRECTION="left/right/up/down" --> Mengatur arah gerakan teks

BEHAVIOR="scroll/slide/alternate" --> Untuk mengatur perilaku gerakan

Scroll --> teks bergerak berputar
Slide--> teks bergerak sekali lalu berhenti
Alternate --> teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik bo)

TITLE='pesan" --> Pesan akan muncul saat mouse berada di atas teks

SCROLLMOUNT="angka" --> mengatur kecepatan gerakan dalam pixel, semakin besar angka semajin cepat gerakannya.

SCROLLDELAY="angka" --> Untuk mengatur waktu tunda gerakan dalam mili detik

LOOP="angka|-1|infinite" --> Mengatur jumlah loop

WIDTH="lebar" --> Mengatur lebar blok teks dalam pixel atau persen

Agar lebih jelas akan saya sertakan contohnya :

Contoh marquee dari gerakan :

<MARQUEE align="center" direction="right" height="200" scrollamount="2" width="30%">

marquee dari kanan ke kiri

</MARQUEE>

hasilnya :

marquee dari kanan ke kiri
ganti kata "left" dengan keinginan anda yaitu bisa : left, up, down .

Contoh marquee dari perilaku gerakan :

<MARQUEE align="center" direction="left" height="200" scrollamount="3" width="70%" behavior="alternate">

marquee menurut perilaku

</MARQUEE>

marquee menurut perilaku

Contoh marquee dengan variasi hurup dan warna latar belakang :

<div align="left">&ltFONT FACE="georgia" color="White"><B><MARQUEE BGCOLOR="RED" width="70%" scrollamount="3" behavior="alternate">

</MARQUEE></b></FONT></div>

hasilnya :

marquee dengan variasi hurup

Ada variasi lain dari marquee ini, yakni ketika mouse sedang berada di area marquee teks akan berhenti dan ketika mouse di geser kembali ketempat lain maka teks akan bergerak kembali, ini hanya di tambahkan sedikit program pada kolom marquee.

Contoh, silahkan arahkan mouse anda ke area marquee di bawah ini :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="50%" height="200" align="center">

silahkan tunjuk ke sini

</marquee>

hasilnya :

silahkan tunjuk ke sini

Contoh marquee yang di dalam nya terdapat link :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center">

<a href="http://rubrik-elektronik.blogspot.com" target="new">Rubrik Elektronik</a><br/>

<a href="http://electronic-rubric.blogspot.com" target="new">Electronic Rubric </a><br/>

<a href="http://kolom-iklan.blogspot.com" target="new">Kolom iklan </a><br/>

</marquee>

hasilnya : Free Template

Kolom iklan

Kang Rohman

Mungkin itu saja beberapa contoh yang bisa di berikan, silahkan anda otak-atik sendiri agar tercipta variasi-variasi dari marquee ini.

ok selamat mencobanya by KR

Create animation banner

Practical way to offer our advertising through banner animation ini.kenapa karna penggunjung eyes will soon see on our banner karna other form of another, Banner is a free and anyone pay each have advantages and kekurangannya

bagi anda yang berminat dengan banner animasi gratis, anda bisa kunjungi http://www.addesigner.com Silahkan daftar (gratis), Jika sudah di terima anda tinggal memilih banner yang di sediakan, trus ya tinggal di masukin ke blog, mau di sidebar atau di dalam postingan tentu bisa.

contoh banner animasi

ok selamat mencoba by KR

Monday, December 21, 2009

Changing Icon Yahoo Messenge

You are bored with your IM icon display is used?, Can kok replaced with a new look following
how
* Log in to your blogger account
Tambah Gadget> HTML / Javascript">* Go to: Layout> Add a Gadget> HTML / Javascript
* Then, copy & paste the script below:

<a target="_blank" href="http://ymgen.com/chat.php?idne=YOUR YM ID">
<img style="" src="http://ymgen.com/ym.php?id2=YOUR YM ID&s2=1" border="0" />

* Rubahlah: YM ID ANDA dengan YM ID Anda sendiri
* Rubahlah: Angka 1 dengan ikon pilihan Anda. Seperti yang anda lihat bellow (mengubah dengan no: 1-28)

dengan pilihan berikut ini

1 2

3 4

Dan masih banyak lagi sesuai dengan nomer nya 1 sampai 28 seperti yang saya terangkan di atas by aladin

Changing the view with the banner Readmore

You have to do is

1. Please login to blogger with your ID.
2. Click Layout.
3. Click the Edit HTML tab.
4. Pd Tick the little box next to "Expand Widget Templates"
5. Find similar code like this:

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> 
</div>

6. Silahkan ganti kode di atas dengan
Contoh seperti ini :

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIzt5sRqc_ZLTXuInGYBkkd07G1phRWaAo9Wy6pojfLmg8TIv1fb3ex7qSdkCEj_SlY-r6ZBvT-5dAmcVDmUFG9LJbm7c7hmVthRh9stQ4msSHh1ym_oSM9UlBMZVXxYLyDzPbKIja0t4/[1].png' alt='read more'/></a>

</div>
</b:if>

7. Klik tombol SIMPAN TEMPLATE
8. Selesai.

Tampilan readmore anda akan menjadi baru by aladin

How to remove the shoutbox / comments mix full

How:
1. Log In Admin in the Shoutbox.
2. Click the General Settings Locate the click prune messages.
3. Select reserving 10 posts (for all) or delete all,
Examples of such choices:
Messages pruning

1. Keep latest 10 posts and delete the rest
2. Keep latest 30 posts and delete the rest
3. Keep latest 60 posts and delete the rest
4. Keep latest 100 posts and delete the rest
5. Keep latest 200 posts and delete the rest
6. Keep latest 300 posts and delete the rest
7. Delete all messages in my shoutbox

Confirmation

# Enter account password:
4. Klik Aplly Settings.
5. Selesai.
ok anda tinggal restart blog anda dan akan ada tampilan baru shoutmik anda by aladin

Sunday, December 20, 2009

Displaying the comment box disappears

You find a problem in your comment box, if you are still the original template easy aja

1. you login to blogger
2. click on the settings tab
3. click the comment tab and then navigate to the placement krusor your comments on the form put a hook in the entry below.
4. click save settings.
5. done.

But what if still does not appear on your blog!
easy to change the data you live in it alone html

Caranya anda masuk kembali ke tata letak kemudian akan tampil ruangan edit htmlnya
sebelum anda mulai otak-atik template anda harus klik pada tab download template lengkap untuk sekedar berjaga2 apabila kode yang anda masukan salah kemudian ada kotak kecil expand template widget kemudian anda centang pada kotak kecil tersebut tunggu beberapa saat sampai proses selesai.
kemudian anda cari kode seperti ini di kotak HTML

<p class='comment-footer'>

<b:if cond='data:post.allowComments'>

<a expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

</b:if>

</p>

hapus kode di atas terus diganti degan kode dibawah ini

<p class='comment-footer'>

<b:if cond='data:post.embedCommentForm'>

<b:include data='post' name='comment-form'/>

<b:else/>

<b:if cond='data:post.allowComments'>

<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

</b:if>

</b:if>

</p>

Selesai tapi jangan lupa untuk menyimpannya ok

MY DATA

Tuesday, December 22, 2009

Create navbar

Create marquee effects

Create animation banner

Monday, December 21, 2009

Changing Icon Yahoo Messenge

Changing the view with the banner Readmore

How to remove the shoutbox / comments mix full

Sunday, December 20, 2009

Displaying the comment box disappears

Your translate

About Me

Labels

Blog Archive

My site info

Followers