Jumat, 29 Mei 2009

Cara Menghilangkan Navbar Blogger

Masih bersikeras untuk menghilangkan navbar blogger? jika masih akan saya beritahu, akan tetapi resiko di tanggung masing-masing, saya tidak bertanggung jawab jika di kemudian hari terjadi sesuatu dengan blog sobat.

Untuk menghilangkan navbar blogger, sobat tinggal menambahkan kode di bawah ini pada style sheet CSS :

/* hilangkan navbar
----------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}


Atau bisa juga menaruh kode berikut persis di bawah kode <body>

<style type='text/css'>
#navbar-iframe {display:none;}
</style>

# Untuk template klasik


1. Sign in di blogger


2. Klik menu Template


3. Klik menu Edit HTML


4. Copy seluruh kode yang ada lalu save di komputer sobat sebagai backup data agar aman


5. Copy kode berikut lalu paste di atas kode </style>

/* hilangkan navbar
----------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}


# Klik tombol Simpan Perubahan Template


# Selesai.

# Untuk template baru


1. Sign in di blogger


2. Klik menu Layout


3. Klik menu Edit HTML


4. Klik link bertuliskan Download Template Seluruhnya, silahkan save dulu untuk backup data


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

/* hilangkan navbar
----------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}


6. Klik tombol Simpan Template


7. Selesai.



Selamat menikmati blog tanpa navbar !

Senin, 25 Mei 2009

Membuat menu Horizontal

MENU HORIZONTAL

ini adalah salah satu caranya, tapi sebelumnya apasih menu horizontal itu? Menu horizontal adalah menu-menu yang disusun secara horizontal (menyamping).

Untuk membuatnya ikuti cara berikut ini:

1. Login ke blogger terus pilih Layout --> Edit HTML, jangan lupa template di backup dulu atau centang pada Expand Template Widget.

2. kemudian Cari script seperti ini ]]></b:skin>, kalo belum ketemu Ctrl+F lalu ketik  ]]></b:skin> trs tekan enter,kalo udah ketemu copy script dibawah ini

/*credits : http://trik-tips.blogspot.com */

#tabshori {

float:left;

width:100%;

font-size:13px;

border-bottom:1px solid #2763A5;

line-height:normal;

}

#tabshori ul {

margin:0;

padding:10px 10px 0 50px;

list-style:none;

}

#tabshori li {

display:inline;

margin:0;

padding:0;

}

#tabshori a {

float:left;

background: url("http://kendhin.890m.com/menu/blackleft.gif") no-repeat left top;

margin:0;

padding:0 0 0 4px;

text-decoration:none;

}

#tabshori a span {

float:left;

display:block;

background: url("http://kendhin.890m.com/menu/blackright.gif") no-repeat right top;

padding:5px 14px 4px 4px;

color:#fff;

}

/* Commented Backslash Hack hides rule from IE5-Mac \*/

#tabshori a span {float:none;}

/* End IE5-Mac hack */

#tabshori a:hover {

background-position:0% -42px;

}

#tabshori a:hover span {

background-position:100% -42px;

}


Tulisan blackleft.gif (tulisan warna merah) bisa kamu ganti dengan yang lain
Misalnya, jika kamu pilih yang warna ungu maka scriptnya menjadi seperti ini;




background: url("http://kendhin.890m.com/menu/unguright.gif") no-repeat left top;



background: url("http://kendhin.890m.com/menu/unguright.gif") no-repeat right top;

atau dengan macam-macam warna seperti di bawah ini

blackright.gif adalah warna hitam

greenright.gif adalah warna hijau

redright.gif adalah warna merah

unguright.gif adalah warna ungu

yellowright.gif adalah warna kuning

blueright.gif adalah warna biru


3. kalau sudah paste di sebelum script ]]></b:skin>, trus simpan

4. kalau sudah  Copy script berikut ini

<div id="tabshori">

<ul>

<li><a href="http://tutorial-buditkj.blogspot.com"><span>Home</span></a></li>

<li><a href="http://tutorial-buditkj.blogspot.com"><span>Tutorial</span></a></li>

<li><a href="http://buditkj.blogspot.com"><span>Free tugas tkj </span></a></li>

</ul>

</div >

5. Ganti http://tutorial-buditkj.blogspot.com dengan link yang kamu tuju. Link tersebut bisa berupa alamat blog lain atau link postingan km. Untuk mendapatkan link postingan caranya klik kanan pada judul postingannya trus pilih "copy link location" (untuk mozilla firefox).


6.setelah itu pilih tata letak pilih tambah gadget kemudian beri judul dan pastekan script tadi
 Simpan hasil pengeditan.

7. Lihat hasilnya.

Rabu, 20 Mei 2009

Efek Daun Dan Bintang Berjatuhan

Pada postingan sebelumnya saya telah membuat artikel tentang efek salju yang berterbangan di halaman blog. Sekarang saya akan coba lagi membuat postingan yang intinya tidak jauh-jauh dari efek salju tersebut untuk memperindah halaman blog anda.
Jika anda tertarik untuk menambah efek tersebut pada halaman site anda, silahkan ikuti langkah-langkah berikut ini :

1. Masuk ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Elemen Halaman
4. Klik Tambah Gadget
5. Klik pilihan HTML/JavaScript
6. Pastekan salah satu script di bawah ini ke kolom Konten

Efek daun berguguran, dengan jumlah 20 buah daun kering

<script src="http://h1.ripway.com/pinginbelajar/daunberguguran/20.js" type="text/javascript"></script>

Efek daun berguguran, dengan jumlah 30 buah daun kering

<script src="http://h1.ripway.com/pinginbelajar/daunberguguran/30.js" type="text/javascript"></script>

Efek bintang berjatuhan, dengan jumlah 20 buah bintang

<script src="http://h1.ripway.com/pinginbelajar/bintangberjatuhan/20.js" type="text/javascript"></script>

Efek bintang berjatuhan, dengan jumlah 30 buah bintang

<script src="http://h1.ripway.com/pinginbelajar/bintangberjatuhan/30.js" type="text/javascript"></script>


7. Klik Simpan
8. Selesai

Membuat Efek Salju di Blog

Membuat efek salju adalah salah satu hiasan blog yang paling digemari saat ini, karena efek ini sungguh sangat bagus bagi para peblogger yang ingin menghiasi blognya dengan fariasi yang bagus. Langsung saja ke cara pembuatan efek salju.

Langkah pertama :
* Masuk ke blogger

* Klik Tata Letak

* Dalam menu elemen halaman, silahkan tambahkan sebuah elemen Html/Javascript

* Silahkan tambahkan kode html ini ke dalam elemen halaman tersebut

Kode ini untuk efek salju dengan jumlah 20 buah salju berjatuhan

<script src=" http://h1.ripway.com/syarung/epek salju.txt " type="text/javascript"></script>

dan Kode ini untuk efek salju dengan jumlah 30 buah salju berjatuhan

<script src=" http://h1.ripway.com/syarung/epek salju2.txt " type="text/javascript"></script>

setelah selesai simpan deh!!
mudah kan ???

Minggu, 17 Mei 2009

bintang bertaburan pada cursor

Pernah lihat tongkatnya Peri yang bertaburan bintang-bintang dalam cerita komik. Kamu juga dapat membuat/meniru taburan bintang tersebut kedalam blog kamu. Untukmembuatnya kamu hanya perlu menambahkan kode html/javascript.

ikuti langkah berikut ini:

Log in ke blogger
Klik menu Tata Letak
Pada Elemen Halaman tambahkan sebuah elemen halaman html/javascript
Lalu masukkan kode di bawah ini:

<script src=" http://h1.ripway.com/syarung/biru.txt " type="text/javascript"></script>

Tulisan biru bisa diganti dengan warna yang sobat suka yang ada di bawah ini

abu2 ==> untuk menjadikan bintangnya berwarna abu-abu

biru ==> untuk menjadikan bintangnya berwarna biru

hijau ==> untuk menjadikan bintangnya berwarna hijau

item ==> untuk menjadikan bintangnya berwarna hitam

merah ==> untuk menjadikan bintangnya berwarna merah

orens ==> untuk menjadikan bintangnya berwarna oranye

putih ==> untuk menjadikan bintangnya berwarna putih

ungu ==> untuk menjadikan bintangnya berwarna ungu

Jika sudah, klik Simpan >> Lalu lihat apakah sudah cocok dengan keinginan kamu

Cara Membuat Search Engine

Login ke blogger terus klik Layout terus pilih page elements nha disitu kan banyak tulisan Add a page elements klik link tersebut dan sesuaikan dimana tempatnya menaruh search engine
2. kemudian pada layar baru yang muncul pilih HTML/Javascript kemudian copy/paste script/kode berikut ini di dalam kolom content.

<form action="http://nama-blogmu.blogspot.com/search"
method="get"> <input class="textinput" name="q" size="30" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

Ganti nama-blogmu dengan nama blog kamu. Aangka 30 menunjukkan panjang kotak (text box) semakin banyak angkanya maka semakin panjang textbox-nya
kemudian simpan

Minggu, 03 Mei 2009

Cara Mengganti Icon Pada Address Bar


 ingin mengganti gambar pada pada address bar
anda dengan gambar animasi yang anda inginkan
caranya mudah kok,ikuti langkah berikut ini


1. masuk ke blogger anda
2. kemudian masuk ke "Layout" kemudian pilih "Edit HTML" lalu cari kode </head> kalo     belum ketemu klik Ctrl+F lalu akan muncul Find,pada kolom Find ketik </head> kemudian tekan enter pasti akan muncul </head>,
3. nah,setelah ketemu script </head> tadi, copy script dibawah ini:
<link href='http://www.gifs.net/Animation11/Creatures_and_Cartoons/Anime/Anime_runner_2.gif' rel='SHORTCUT ICON'/>
4.dan paste sebelum code </head>
5. setelah itu dimpan dan lihat hasilnya

jika ingin gambar yang yg lain ganti link "http://www.gifs.net/Animation11/Creatures_and_Cartoons/Anime/Anime_runner_2.gif" dengan gambar yang kamu suka

cukup jelas kan???
selamat mencoba....semoga berhasil........

Membuat gambar animasi di pojok

ingin memberi animasi pada blog anda
caranya sangat mudah???
ikuti langkah berikut ini....

1. Login ke blogger trus klik "Layout -->> Edit HTML
2. Cari kode ini ]]></b:skin> kalo dah ketemu taru kode berikut ini di atasnya.

#trik_pojok {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

3. Text yang dicetak miring adalah posisinya, kalo pingin ganti di posisi pojok kanan bawah tinggal text "left" diganti dengan "right". Begitu juga tulisan "bottom", jika pingin di posisi atas bisa diganti dengan "top".
4. Langkah selanjutnya yaitu letekkan script berikut ini sebelum kode </body>


<div id="trik_pojok">
<a href="http://buditkj.blogspot.com">
<img src="http://kendhin.890m.com/soniclari.gif" border="0" /></a>
</div>



"http://buditkj.blogspot.com" adalah link. ganti dengan link kamu.
"http://kendhin.890m.com/soniclari.gif" adalh lokasi gambarmu. ganti dengan lokasi gambar kamu.

5. Jika kamu pingin yang ada disitu bukan gambar tetapi jam/kalender/hit counter/widget-widget yg lain, maka ganti text yang berwarna merah dengan script widget-widget tersebut.
6. Simpan hasil kerja kamu dan lihat hasilnya.

Jumat, 01 Mei 2009

Membuat Label Menjadi Flash Animasi

Caranya Gimana y??
masa ga tau??
gampang cuy? ikuti saya ya???
Pertama, pilih Tata Letak > Edit HTML
Kedua, centang Expand Template Widget
Ketiga, cari kode di bawah ini:

<b:section class='sidebar' id='sidebar' preferred='yes'>


Kalau sudah ketemu pake cara keempat
taruh script berikut ini di bawah kode yang tadi:

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blog by <a href='http://www.buditkj.blogspot.com/'>cah tkj </a> and <a href='http://www.tutorial-buditkj.blogspot.com'>smk3 tegal</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;220&quot;, &quot;200&quot;, &quot;7&quot;, &quot;#666666&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>


Nah sekarang kamu bisa ubah ukuranya
220 adalah lebar flash animasi
200 adalah tinggi flash animasi

kalo sudah selesai jangan lupa disimpan ya?
semoga berhasil!!!!

Membuat judul berjalan

1.masuk ke account blogger anda

2.setelah sampai di Dasbor klik tab [layout] kemudian pilih [Edit Html] untuk memulai pengeditan.

3.copy script berikut ini :

<script type='text/javascript'>
//<![CDATA[

msg = " ---ALAMAT BLOG ANDA--- ";
msg = "JUDUL BLOG ANDA" + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
//]]>
</script>


4.kemudian pastekan kode tadi diatas kode <head> yang ada dikotak Edit Html.kemudian tukar tulisan yang berwarna merah diatas dengan URL blog dan Judul blog anda ( boleh juga dengan tulisan lainnya yang anda mau )

5.simpan perubahan yang telah anda lakukan tadi dengan mengklik tombol [save template] yang ada, kemudian untuk melihat hasilnya refresh jendela blog anda atau buka ditab baru dengan mengklik link View Blog yang ada.

6.Selamat Mencoba