Tips dan Trik Blog

Membuat Anu Supaya Selalu Berada Di pojok

Sumber : http://trik-tips.blogspot.com/2008/01/membuat-anu-supaya-selalu-berada-di_22.html

Pasti pada bingung nih, apa maksudnya dan kenapa judulnya begitu, sebenarnya aku
sendiri juga bingung mau ngasih judul apa untuk trik yang berikut ini. Setelah aku pikir-
pikir :t eee.. nggak nemu-nemu juga judul yang cocok, ya udah deh aku asal aja kasih
judul gitu. Trus apa maksudnya dari judul tersebut dan trik apa yang akan dibahas?
Gini, untunya itu gini :D trik nyoba ngebahas gimana cara membuat "ANU" itu selalu
berada di pojok (bisa atas, bawah, kiri, kanan) meskipun "scroll bar" ditarik kemana-
mana. "Scroll bar" itu apa sih? itu lho kotak kecil panjang yang ada disamping itu, yg
biasanya ditarik kebawah dan keatas supaya bisa ngelihat isi blog yang kepanjangan. Trus
maksudnya "ANU" itu apa? "ANU" itu maksudnya bisa gambar atau photo kamu,
animasi, Jam, Hit Counter, Shoutbox, Kalender, Adsense, Iklan, Widget-widget dan lain-
lain. Kalo untuk di blog ini aku pasang gambar sonic yg sedang lari-lari (pojok kiri
bawah). Nha udah tahu kan maksudnya. Kalo dah tahu dan pingin mencobanya mari ikuti
trik 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 tebal adalah posisinya, kalo pingin ganti di posisi pojok kanan
bawah tinggal text "left" diganti dengan "right". Begitu juga tulisan "buttom", 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://trik-tips.blogspot.com">
<img src="http://kendhin.890m.com/soniclari.gif" border="0" /></a>
</div>

"http://trik-tips.blogspot.com" adalah link. ganti dengan link kamu.

"http://kendhin.890m.com/soniclari.gif" adalh lokasi gambarmu. ganti dengan lokasi

http://ai-kom.blogspot.com
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.

Berapa Harga Blog Kamu?

Sumber : http://trik-tips.blogspot.com/2007/12/berapa-harga-blog-kamu.html

Pernahkah kamu bertanya, kira-kira berapa harga blog yang kamu miliki setelah
membanting keringat dan memeras tulang untuk membuatnya? Nha, sekarang ini ada
sebuah layanan di internet yang bisa memperkirakan berapa kira-kira harga blog yang
kamu miliki. Caranya sangat mudah tidak perlu bayar ataupun mendaftar, cukup dengan
memasukkan alamat Blogmu trus tinggal pencet jerawat kamu, eh salah, maksudnya
pencet tombol Submit gak pake lama, hasilnya akan langsung keluar. Selain itu kalo
kamu mo pamer, kamu juga bisa memasang hasilnya di blogmu seperti ini nih hasilnya :

Tapi bagi kamu yang blognya masih sepi peziarahnya jangan coba-coba masang karena
hasilnya pasti cuman bikin hati gatal, alias harganya masih $0.00. Tapi kalo cuman mo
nyoba ngecek sih gak papa dan gak mama, toh ga dosa kok. Kamu mo nyoba? aku punya
alamatnya nih, tapi nomor HP-nya gak punya lho . Tapi apa emang bener kalo itu
bener-bener harga yang sesuai untuk blog kita? Tau deh. Tapi kamu perlu mencobanya
dengan memasukkan alamat blog-blog yang sudah mapan, pasti harganya akan tinggi
sekali, jika dirupiahin nih ya mungkin orang yang punya blog itu akan menjadi mendadak
dangdut alias kaya mendadak. Nha kamu tertarik mau mencobanya? Silahkan Monggo..
Oh ya aku belum ngasih alamatnya ya? nih alamatnya
http://www.business-opportunities.biz/projects/how-much-is-your-blog-worth/

Code untuk http://appgratis.blogspot.com

<div style="border: 1px solid #cccccc; background-color: white; width: 115px; text-
align: center; padding: 0 0 10px 0;"><p style="margin: 0"><a

http://ai-kom.blogspot.com
href="http://www.business-opportunities.biz/"><img src="http://images.business-
opportunities.biz/blogworth/gw.jpg" style="border:0;"></a><br /> <span
style="font-size: 11px;">My <a href="http://appgratis.blogspot.com">blog</a> is worth
<b>$5,080.86</b>.</span><br /><span style="font-size: 10px;"><a
href="http://www.business-opportunities.biz/projects/how-much-is-your-blog-
worth/">How much is your blog worth?</a></span></p><p><a
href="http://www.technorati.com/" style="border: 0px;"><img
src="http://technorati.com/pix/tech-logo-embed.gif" style="border:
0px;"></a></p></div>

Cara Menuliskan Script/Kode Dalam Artikel Blog

Sumber : http://trik-tips.blogspot.com/2008/02/cara-menuliskan-scriptkode-dalam.html

Untuk menuliskan script/kode kedalam artikel blog memang ada tekniknya sendiri,
karena jika kita menuliskannya dengan cara yang biasa maka yang akan muncul
kemudian di blog tidaklah seperti dengan apa yang kita tuliskan. Misalnya gini, jika kita
menuliskan kode <head> dengan cara yang biasa maka hasilnya tidak akan muncul
dalam postingan karena kode tersebut langsung diterjemahkan kedalam bahasa HTML.
Jadi untuk menuliskan kode <head>, maka yang seharusnya dituliskan supaya bisa
muncul kode tersebut adalah ini &lt;head&gt;. Nah terus bagaimana kalau ada banyak
kode yang harus kita posting?
Mau tahu bagaimana caranya menuliskan kode2/script2 tersebut ke dalam blog?

Ada beberapa cara untuk menuliskan kode-kode tersebut kedalam blog, diantaranya
yaitu:

Cara Pertama :
- Gunakan software-software web design, misalnya Macromedia Dreamwaver, Microsoft
Frontpage, Namao Web Editor. Atau bisa juga dengan software-software blogtools seperti
post2blog dll.
- Trus tuliskan semua kode pada area design, kemudian copy kode-kode tersebut dari area
HTML Code. Nha kode-kode dalam area HTML Code tersebut lah yang harus diposting.

Cara Kedua :
- Tuliskan semua kode/script ke dalam notepad
- Kemudian ganti/replace kode-kode berikut

Kode Kode Pengganti

< &lt;
> &gt;
" &quot;

- Udah tahu kan caranya mereplace di notepad? itu lho dengan memilih menu edit -->
replace kemudian pada kotak yang muncul masukkan kode yg akan direplace pada
kolom "Find what" trus masukkan kode pengantinya pada kolom "Replace with"trus
tekan tombol Replace All.

http://ai-kom.blogspot.com
- Nha kalo udah semua baru kamu copy semua kode yang udah direplace all tadi, trus
kamu masukkan kedalam postingan kamu.

Cara Ketiga :
- Buka situs ini http://centricle.com/tools/html-entities, trus isikan kode-kode kamu
kedalam kotak yang disediakan, nha kalo sudah tekan tombol "Encode", nha maka kamu
akan mendapatkan script baru untuk diposting di blog kamu.

Piye? Gampang to? gitu aja kok repot.....

Membuat Menu Horizontal

Sumber : http://trik-tips.blogspot.com/2008/01/membuat-menu-horizontal.html

Ada yang pingin buat menu horizontal tapi nggak tahu caranya?
Gini nih caranya, eh tapi tunggu dulu, apasih menu horizontal itu? Menu horizontal
adalah menu-menu yang disusun secara horizontal (menyamping). Kayak gini ini lho:

Contohnya bisa kamu lihat disini .Nha pingin nggak? kalo pingin ikuti cara berikut ini:

pertama-tama kamu harus punya gambar kayak gini nih:

dan

kalo nggak punya gimana? kalo nggak punya pake gambar yang aku sediain ini aja deh.

blackleft.gif blackright.gif

greenleft.gif greenright.gif

http://ai-kom.blogspot.com
 redleft.gif redright.gif

unguleft.gif unguright.gif

yellowleft.gif yellowright.gif

blueleft.gif blueright.gif

whiteleft.gif whiteright.gif

Ok, bahan-bahannya sudha ada, mari kita mulai maraciknya:

1. Login ke blogger terus pilih Layout --> Edit HTML, jangan lupa template di backup
dulu.
2. Cari script seperti ini ]]></b:skin>, kalo udah ketemu copy script dibawah ini dan taruh
diatasnya

/*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;
}
http://ai-kom.blogspot.com
#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 yang dicetak tebal bisa kamu ganti dengan gambar-gambar (text dibawah
gambar) diatas tadi. Misalnya, jika kamu pilih yang warna merah maka scriptnya menjadi
seperti ini;

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

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

Mudeng nggak loe :D

Kalo sudah selesai mari kita lanjutkan, sampai angka berapa tadi? oh ya sampai angka
ketiga ya.
3. Copy script berikut ini

<div id="tabshori">
<ul>
<li><a href="http://trik-tips.blogspot.com"><span>Home</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Trik-Tips</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Kamus</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Profile</span></a></li>
</ul>
http://ai-kom.blogspot.com
</div >

4. Ganti http://trik-tips.blogspot.com dengan link yang kamu tuju. Kemudian text yang
dicetak tebal bisa kamu ganti dengan text yang kamu suka.
5. Cara memasangnya ada beberapa macam tergantung dari template yang digunakan,
salah satu contoh memasangnya yaitu begini
cari kode berikut ini :

<div id="content-wrapper">

caranya nyari biar gampang, copy script diatas lalu tekan Ctrl-f kemudian paste di kotak
find, nha langsung ketemu kan. Kalo udah ketemu copy script yang tadi diatasnya

6. Simpan hasil pengeditan.

7. Lihat hasilnya.
8. kalo hasilnya kurang bagus/acak-acakan coba script tadi dipindah tempatnya, misalnya
pindah keatasnya yaitu diatas kode </div>. kalao nggak cocok juga tempatnya dicoba lagi
yang diatasnya atau juga dibawahnya, begitu terus sampai ketemu tempat yang cocok.
9. Kalo masih belum berhasil juga coba cara ini:
- Cari kode berikut ini :

<b:section class='header' id='header'

maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='your blog title (Header)' type='Header'/>
</b:section>

teru ganti text yang berwarna hijau sihingga menjadi seperti ini:

<b:section class='header' id='header'

maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false'
title='your blog title (Header)' type='Header'/>
</b:section>

terus di Save

Klik tab Page Elements, kemudian di daerah header klik Add a page element lalu pilih
HTML/JavaScript paste script link tadi di dalam kotak content terus simpan, nha itu
kan tempatnya diatas, coba drag kebawah dikit, nha gitu, terus simpan dan lihat hasilnya.

hasilnya pasti akan berbeda-beda di setiap template.

kalo berhasil berarti kamu pinter, kalo gagal berarti kamu kurang pinter :r coba diteliti
lagi langkah-langkahnya dan dipahami maksudnya, jangan cuma di plototin. OK BOZ,
Good luck.....

Cara Membuat Dropdown Menu

Sumber : http://trik-tips.blogspot.com/2008/04/cara-membuat-dropdown-menu.html

http://ai-kom.blogspot.com
Apa sih dropdown menu itu?
Dropdown menu yang seperti ini itu lho :

Nha udah tahu kan? Dengan dropdown menu kita bisa mnghemat space/ruang di blog
kita, karena dengan ukuran yang kecil seperti itu bisa menyimpan link dan text yang
banyak. Itu bisa diisi dengan arsip, blogroll dll.
Gimana? Mau mencobanya?
Gini nih caranya :

Login ke blogger, trus masuk ke menu "Page Element" trus pilih Add page elements --
> HTML/JavaScript. Kemudian masukkan script berikut ini di kocat "Content"

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="Links 1">Text 1</option>
<option value="Links 2">Text 2</option>
</select>

Text yang berwarna merah adalah link. ganti text2 tersebut dengan link2 kamu.
Text yang berwarna biru adalah tulisan yang ditampilkan. Itu juga harus km ganti.

Contohnya seperti ini :

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="http://trik-tips.blogspot.com/2008/01/membuat-menu-horizontal.html">
Cara Membuat Menu Horizontal </option>
<option value="http://trik-tips.blogspot.com/2007/12/cara-membuat-search-
engine.html"> Cara Membuat Search Engine </option>
</select>

maka hasilnya akan seperti ini :

untuk menambahkan menu lagi, tambahkan kode seperti ini :

<option value="Links 2">Text 2</option>

sebelum kode </select>

Link dalam dropdown menu di atas jika di klik akan membuka link di halaman yang
sama. Ini cocok untuk Arsip dan link-link yang masih berhubungan dengan blog tsb.
http://ai-kom.blogspot.com
Ada satu tipe lagi yang jika diklik linknya maka akan membuka window baru tanpa
menutup blog kamu. Yang ini cocok untu Blogroll atau Friend link.
Cara mambuatnya seperti diatas tapi ganti kode berikut

<select onChange="document.location.href=this.options[this.selectedIndex].value;">

ganti dengan kode ini :

<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">

hasilnya akan seperti ini :

Gimana? Bisa nggak?

Trik dan tips yang berhubungan :

• Dasar-Dasar HTML
• Membuat Kotak Blogroll

Jangan Lupa Baca Juga Yang Ini :

Menu-Menu

• Cara Membuat Menu DTree

• Membuat Menu Horizontal

Cara Membuat Menu DTree

Apa itu menu Dtree (D-Tree) ? itu lho menu yang memiliki struktur seperti pohon, yang
punya cabang-cabang itu lho, Seperti kalo kita membuka Windows Explorer. Menu yang
seperti gambar dibawah ini atau seperti contoh ini.

Sumber : http://trik-tips.blogspot.com/2008/02/cara-membuat-menu-dtree.html

http://ai-kom.blogspot.com
Menu Dtree ini sangat berguna jika kamu memiliki postingan yang buanyak, karena
dengan menggunakan menu Dtree maka akan bisa menghemat space/ruang yang ada di
blogmu. Nah kamu pingin tahu cara membuatnya?

Beginilah cara membuatnya :

1. Login to Blogger, trus pilih "Layout --> Edit HTML"

2. Taruh kode berikut ini diatas kode <head>

<link rel="StyleSheet" href="http://www.geocities.com/uddin_81/dtree.css"

type="text/css" />
<script type="text/javascript"
src="http://www.geocities.com/uddin_81/dtree.js"></script>

3. Trus Klik Tombol "Save

4. Setelah itu copy kode berikut ini dan pasang di sidebar kamu, udah tahu tho cara
pasangnya? itu lho di menu "Page Element" trus klik "add a page element -->
HTML/Javascript". Inolah script yang harus kamu copy di sidebar kamu.

<div class="dtree">
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','link.html');
d.add(2,1,'Node 1.1','link.html');
d.add(3,2,'Node 1.1.1','link.html');
d.add(4,3,'Node 1.1.1.1','link.html');
d.add(5,0,'Node 2','link.html');
d.add(6,5,'Node 2.1','link.html');
d.add(7,5,'Node 2.2','link.html');
d.add(8,0,'Node 3','link.html');
d.add(9,0,'Node 5','link.html');
document.write(d);
//-->

http://ai-kom.blogspot.com
</script>
</div>

berikut ini keteranganya:

- Ganti tulisan "link.html" dengan link kamu (judul posting kamu).
- Angka yang pertama harus unik tidak boleh ada yang sama (d.add(1,0,’Node
1’,’link.html’);
- Angka yang kedua merupakan cabang dari angka pertama (perhatikan angka-angka
yang memiliki warna sama).

- Kamu bisa mengganti icon-iconnya dengan icon kamu sendiri, contoh scriptnya akan
seperti ini:

d.add(10,0,’Profile’,’link.html’,’’,’’,’http://kendhin.890m.com/dtree/trash.gif’);

Cara Mengganti Tanggal Posting dg Icon Calender

Sumber : http://trik-tips.blogspot.com/2008/01/mengganti-tanggal-icon-calender.html

Akhirnya jadi juga, setelah beberapa hari nyari-nyari artikel tentang "cara mengganti
tanggal dengan icon kalender" dan mengotak-atik template akhirnya berhasil juga aku
membuatnya, fiuuhh dengan menghabiskan dana ber M-M (maksudnya Maribu,
Mablas ribu) untuk melakukan penelitian dan dengan membanting keringat dan memeras
tulang . tidak sia-sia pengorbananku, hasilnya itu tuh tanggal icon kalender yang
cantik mejeng disamping judul. Mau tahu cara membuatnya? jangan khawatir aku akan
membagi-bagikan tutorial ini pada kalian dengan geratis (kalo ada yang mo bayar sih
boleh aja ) yak mari kita mulai trik dan tipsnya.

Yang pertama harus kita lakukan yaitu mengganti setting tanggal dulu, caranya seperti
biasa Login dulu ke blogger terus pilih Settings --> Formatting, ganti "date header
format" atau "format tanggal menjadi (mm.dd.yyyy) nha yang masih pemula pasti
bingung maksudnya kan? itu lho disebelah tulisan "date header format" kan ada kotak
yang ada tanggalnya, trus kamu klik dan pilih yang formatnya bulan.tangal.tahun
contohnya 1.13.2008 terus simpan

Langkah yang kedua pilih menu Layout --> Edit HTML . Trus beri tanda centang pada
kotak Expand Widget Templates, Oh ya, jangan lupa di back-up dulu template kamu.
Yang nggak tahu caranya memback-template silahkan lihat dulu artikel ini. udah? kalo
udah mari kita mulai ke jeroannya.

1. Cari kode ini <TITLE><data:blog.pageTitle/></TITLE> (tempatnya dibagian atas)

kalo dah ketemu taruh script berikut ini dibawahnya persis

<SCRIPT type='text/javascript'>
http://ai-kom.blogspot.com
//<![CDATA[
/*********************************/
/* http://trik-tips.blogspot.com */
/*********************************/
function date_replace(date) {
var da = date.split('.');
var day = da[1], mon = da[0], year = da[2];
var month =
['0','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
document.write("<div class='month'>"+month[mon]+"</div> <div
class='day'>"+day+"</div>");
}
//]]>
</SCRIPT>

2. kalo udah cari kode ini:

.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}

kalo ggak ada coba cari yang ini

h2.date-header {
margin:1.5em 0 .5em;
}

3. Kalo dah ketemu taruh script berikut dibawahnya

.dateblock {
background: url("http://kendhin.890m.com/kalender/bluecalend.gif")
no-repeat;
width: 55px;
margin: 0;
font-weight: bold;
height: 50px;
/*position: absolute;
top: 0;
left: 0;*/
float: left;
text-align: center;
http://ai-kom.blogspot.com
}

.month {
font-size: 11px;
width: 37px;
margin: 0 5px;
text-transform: uppercase;
color: #fff;
}

.day {
color:#3366CC;
font-size: 19px;
width: 37px;
margin: 0 5px;

Kode http://kendhin.890m.com/kalender/bluecalend.gif
adalah gambar icon kalender. kamu bisa menggantinya mengantinya
dengan gambar-gambar dibawah ini caranya ganti hurus yang dicetak tebal dengan
kode gambar berikut ini, misalnya kamu pingin kelender yang berwarna merah,
caranya kamu ganti text bluecalend.gif
dengan redcalend.gif.

blackcalend.gif blue2calend.gif bluecalend.gif

greencalend.gif orangecalend.gif pinkcalend.gif

redcalend.gif ungucalend.gif yellowcalend.gif

Trus kode color:#3366CC; adalah kode warna

tanggal, kamu bisa menggantinya dengan warna yang lain. Kamu bisa lihat kode2
warnanya DISINI.

4. langkah selanjutnya yaitu kamu cari kode ini

<data:post.dateHeader/>, cara nyarinya biar gampang copy kode tersebut,
terus tekan Ctrl-f dan paste di dalam kotak yang disediakan, nha langsung
ketemu kan. kalo udah ketemu ganti kode tersebut dengan script dibawah ini.

<DIV class='dateblock'>

http://ai-kom.blogspot.com
<SCRIPT>date_replace('<data:post.dateHeader/>');</SCRIPT></DIV>

5. Simpan Template kamu dan lihat hasilnya. Berhasil nggak ya?

Kalo misalnya tulisan bulan dan tanggalnya terlalu keatas coba tambahkan kode ini
padding: 4px 0px 0px 0px; dibawah kode .month { dan juga dibawah kode .day {

NB: Kalo Tanggalnya berubah menjadi tulisan "Undefine" itu pasti kamu tidak
memperhatikan tutorial ini dari awal. Coba lihat lagi tutorial ini dari awal dan baca baik-
baik perintahnya.

Selamat mencobaaaaaaaaaa!!!!!!!........

Cara Menghilangkan Navbar (Navigation Bar)

Sumber : http://trik-tips.blogspot.com/2007/12/cara-menghilangkan-navbar-navigation.html

Navbar adalah fasilitas standar yang dimiliki oleh Blogger.com yang letaknya berada di
bagian paling atas dari blog yang fungsinya antara lain untuk mulai melakukan Sign In
atau bisa juga membuat Blog baru. Navigation Bar juga bisa digunakan untuk
melaporkan kecurangan atau tindak kejahatan weblog yang dilakukan oleh seorang
blogger, misalnya kontent blognya yang melanggar TOS Blogger.Com atau hal lain yang
dapat dianggap merugikan dunia internet.

Namun ada beberapa blogger yang merasa akan lebih enak jika melihat tampilan blognya
dalam keadaan bersih tanpa harus ada bagian mencolok di bagian atas blognya sendiri
(NavBar). Karena itu, kadang para blogger menghapus NavBar tersebut. Pertanyaannya
adalah: Apa tidak melanggar Term of Service (TOS) dari Blogger.com?
Sejauh ini, banyak blogger yang telah menghilangkan Navbar mereka dan tidak juga
mendapat teguran dari blogger. Artinya, bisa dilakukan. Toh di TOS Blogger sendiri juga
tidak ada aturan yang cukup detail tentang hal ini.

Nah, bagaimana menghilangkan Navigation Bar?

Ada beberapa penyedia template (beta dan classic) yang memang sudah tidak ada
NavBar-nya. Namun bagi kamu yang memakai template yang masih ada NavBarnya dan
ingin menghilangkannya maka inilah caranya.

1. Kamu harus Login dulu di Blogger.com / Blogspot.com

2. Trus Pilih Layout --> Edit HTML
3. Copy script berikut ke dalam tag head

#navbar-iframe {
display: none !important;
}

contohnya sebagai berikut :

-----------------------------------------------
Blogger Template Style
Name: Son of Moto (Mean Green Blogging Machine variation)
http://ai-kom.blogspot.com
Designer: Jeffrey Zeldman
URL: www.zeldman.com
Date: 23 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

#navbar-iframe {
display: none !important;
}

/* Variable definitions
====================

4. Kemudian simpan.

Selamat Mencoba.....!!

Cara Membuat Kotak Link Exchange

Sumber : http://trik-tips.blogspot.com/2007/12/cara-membuat-kotak-link-exchange.html

Kamu belum bisa masang banner link exchange? masa' sih? hari gini belum bisa masang
banner, capeee'' deeh
Kalo kita mau tukeran link biasanya ada kotak seperti ini :

Nha trus gimana cara buat kotak tersebut?

gini lho,
pertama Login ke blogger trus pilih Layout --> Page Elements
trus klik Add Page Element lalup pilih HTML/Java Script
trus kopi kode berikut ini di tempat yang disediakan.

<textarea name="textarea" cols="20"><a href="http://trik-tips.blogspot.com"><img

src="http://www.geocities.com/kendhin_x/banner/ka01.gif" width="90" height="17"
border="0" /></a></textarea>

text yang berwarna hijau menunjukkan labar kotak, text warna biru adalah link, ganti text
tersebut dengan alamat blogmu sedangkan text warna merah adalah alamat gambar
beserta ukurannya, ganti text tsb dengan alamat gambar km.
terus simpan templatenya.
Hasilnya akan seperti kotak diatas, trus gambarnya mana?, gini didalam kotak tersebut
kan ada textnya tuh, nha kalo textnya itu dicopy terus di paste di blog, maka hasilnya
akan menjadi gambar dan juga ada linknya.

http://ai-kom.blogspot.com
Cara membuat Form "Email Subscriber" / "Berlangganan Lewat Email"
Sumber : http://trik-tips.blogspot.com/2008/03/cara-membuat-form-email-subscriber.html

Seperti yang kamu lihat, disebelah kanan blog ini ada sebuah kotak yang berisi kotak
untuk mengisikan alamat email dan sebuah tombol yang ada tulisan "Berlangganan Trik
Baru". Nha dalam trik dan tips kali ini kita akan belajar kelompok tentang bagaimana
membuat kotak tersebut. Oh ya, perlu dijelasin dulu nih apa fungsi dari form tersebut.
Form tersebut fungsinya adalah untuk mempermudah para pembaca blog kita agar bisa
berlangganan atau mendapatkan info terbari postingan kita melalui email mereka. Jadi
jika memposting artikel baru maka para pelanggan/pembaca yang sudah memasukkan
email mereka melalui form tersebut akan secara otomatis mendapatkan kiriman email
yang berisi postingan terbaru kita. Mudeng ra? wes pokoke ngono lah.
Beginilah cara membuat form "Email Subscriber" tersebut :

1. Kunjungi situs ini : http://www.feedburner.com

2. Saat pertama kali datang kamu akan langsung disodori kotak untuk mengisikan alamat
feed blogmu yang akan dibakar :D
3. Biasanya alamat feed blog kamu seperti ini
http://NAMABLOGMU.blogspot.com/feeds/posts/default , ganti tulisan
NAMABLOGMU dengan nama alamat blogmu.
3. Isikan nama feed blogmu tadi dalam kotak yang disodorkan tersebut, jika blogmu itu
isinya hanya video2 maka beri tanda centang pada kotak "I am a podcaster", jika tidak ya
gak usah dicentang. Kemudian klik tombol "next"
4. Setelah itu kamu akan disodori lagi dengan form pendaftaran, isikan data2 yg
diperlukan disana, trus klik tombol "Activate Feed"
5. Nha kalo berhasil nanti akan ada informasi "Congrats! your ......".
6. Dibawahnya akan ada tombol "Next" dan link "Skip directly to feed management"
kali ini pilih yang link "Skip directly to feed management", sebenarnya lewat tombol
"next" bisa sih tapi biar seru kita lewat jalan lain aja.
7 Kemudian nanti akan ada beberapa menu, kali ini pilih menu "Publicize"
8. Setelah itu disebelah kiri akan muncul beberapa menu. PIlih menu "Email
Subscriptions".
9. Kemudian klik tombol "Activate"
10. Nha setelah itu nanti akan ada beberapa kotak yang berisi kode2. Nha kalo km
pinginnya yang berbentuk form maka pilih kode yang ada di kotak "Subsciption Form
Code".
11. Copy kode yang ada dalam kotak tadi, trus klik tombol "Save" untuk mengaktifkan
layanan tersebut.
12. Cara pasangnya, Login ke blogger, pilih "layout --> Addpage elements--
HTMl/Java Script" nha paste kode yang sudah kamu copu tadi disana.

Sekarang coba dilihat blogmu, udah ada kan form untuk "Email Subscriber".

Trus kalo mo nampilin jumlah reder yang berlanganan gini caranya :

- Login ke feedburner kemudian pilih feed blogmu
- Trus masuk ke menu "Publicize --> FeedCount" nha disitu scriptnya yang harus km
copy dan pasang di blogmu.

http://ai-kom.blogspot.com
Cara Membuat Kotak Blogroll dan Marquee
Sumber : http://trik-tips.blogspot.com/2008/03/cara-membuat-kotak-blogroll-dan-marquee.html

Kali ini aku mau ngejelasin trik kali dengan gaya puisi, biar nggak bosen, tapi jangan
diketawain ya, soalnya lom pernah buat puisi nih.

Tatkala link-link jumlahnya sudah berjuta-juta

Maka semakin sesaklah dada blog ini
Jikalau hal ini tidak diatasi dengan bijaksana
Maka blognya dikau akan penuh sesak dengan link-link itu

Udah bagus nggak puisinya? ancur ya? :r Ok lanjuuut.

Oleh karena itulah

hamba memberanikan diri untuk menawarkan obat sesak tersebut
Melalui secuil ilmu berikut
Daku berharap dapat membantu kisanak supaya blognya tidak sesak

Kira-kira pada mudeng nggak ya penjelasan tadi, ah biarin deh :z

:r udah ah, udah mual2 nih pake gaya puici, sekarang ganti gaya biasa aja.

Untuk trik kali ini, ada dua macam kotak blogroll yang akan kita buat, terserah kamu mo
pilih yang mana. Kotak blogroll-nya yaitu:

1. Kotak Blogroll Model Textarea

Contohnya seperti kotak blog roll seperti punyaku itu, itu lho yg atasnya ada tulisanya
"Friend links"
Nha begini cara membuatnya :
Pasang code berikut ini di kedalam element kamu (Page Element --> Add Page Element
--> HTML /Javascript)

<div style="border: 1px solid rgb(153, 153, 153);

overflow: auto;
width: 200px;
height: 200px;
text-align: center; ">

#link1 <br />

#link2 <br />
#link3 <br />
#link...

</div>

keterangan:
- Kode width: 200px; dan height: 200px; adalah ukuran lebar dan panjang kotak, kamu
http://ai-kom.blogspot.com
bisa merubahnya dan menyesuaikanya dengan ukuran yg kamu suka.
- Ganti tulisan "#link1,#link2, #link3 dst" dengan daftar link-link kamu, oh ya itu juga
bisa diisi dengan banner link.
- Jika kamu pingin daftar link-linknya berjajar kayak punyaku, maka hilangkan kode <br
/>

2. Kotak Blogroll Model Marquee

Kotak ini juga mampu menampung banyak link dalam tempat yang sempit. Namun kotak
blog roll ini berbeda dengan kotak yg diatas, karena kotak yang ini tidak memiliki rollbar
(yg biasanya disebelah kanan trus ditarik keatas kebawah itu lho). Link-link ato isi
didalam kotak ini akan bergerak/berjalan, bisa vertikal ato horizontal. Nah gini nih cara
buatnya:
Pasang code berikut ini di kedalam element kamu (Page Element --> Add Page Element
--> HTML /Javascript)

<MARQUEE align="center" direction="up" height="100" scrollamount= "2"

onmouseover='this.stop()' onmouseout='this.start()' width="95%" >

#link1 <br />

#link2 <br />
#link3 <br />
#link...<br />

</marquee>

Keterangan :
- Kode "up" itu menunjukan arah pergerakan, kamu bisa menggantinya dengan down,
left, right (udah mudeng to artinya, gak usah dijelasin ya).
- Jika kamu menggantinya dengan pergerakan horizontal (left ato right) maka hilangkan
kode <br />.
- Angka "100" menunjukkan tinggi dari kotak blogroll kamu. Semakin banyak angkanya
maka semakin tinggi pula ukuran blogroll.

OK SELAMAT MENCOBA......

Cara Menampilkan Status Off/Online Yahoo Messenger

Sumber : http://trik-tips.blogspot.com/2008/02/cara-menampilkan-status-offonline-yahoo.html

Dalam trik kali ini kita akan coba membahas tentang "Bagaimana Caranya Menampilkan
Status Offline/Online Yahoo Messenger". Trus fungsinya apa nih? gini, kalo ada misalnya
ada penandanya seperti itu kan nanti pengunjung blogmu akan bisa langsung berinteraksi
langsung denganmu, nha kalo gitu kan nanti pengunjung blogmu jadi tambah sayang ma
kamu :p

http://ai-kom.blogspot.com
Ok Langsung aja, Contohnya akan seperti ini, jika status kamu offline maka gambarnya
akan seperti ini :

trus jika kamu online maka iconya akan berubah seperti ini:

Cara buatnya sangat gampang kamu tinggal copy script berikut ini trus kamu pasang di
sidebar kamu, udah tahu kan cara pasanganya, itu lho seperti kalo km masang "page
element", Masuk ke "Page Element" trus "Add page elements --> HTML/Javascript".

<a href="ymsgr:sendIM?kendhin_x"> <img

src="http://opi.yahoo.com/online?u=kendhin_x&amp;m=g&amp;t=2&amp;l=us"/>
</a>

Ganti text yang warna merah (kendhin_x) dengan id YM kamu.

perhatikan angka "2", itu bisa kamu ganti dengan angka yang lain dan hasilnya gambar
yang ditampilkan akan berbeda-beda.

Piye? gampang to?

Cara Membuat Search Engine

Sumber : http://trik-tips.blogspot.com/2007/12/cara-membuat-search-engine.html

Tentu kita semua sudah tahu apa itu Search Engine (hari gini gak tahu apa itu search
engine? cape' deeh...). Search Engine adalah ... bla.. bla..bla.. dst.
Saat ini Search Engine tidak bisa dipisahkan dalam dunia internet. Dengan Search Engine
kita bisa mencari tahu tentang suatu hal yang kita inginkan sesuai dengan keyword yang
kita ketikkan dan juga bla.bla..bla..... udah ah penjelasannya, yang mau dibahas disini
adalah bagaimana caranya membuat search engine di blogger . Caranya sangat
mudah, yaitu:

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

http://ai-kom.blogspot.com
Ganti nama-blogmu dengan nama blog kamu. Aangka 30 menunjukkan panjang kotak
(text box) semakin banyak angkanya maka semakin panjang textbox-nya

Cara Membuat Commments Box (Kotak Komentar)

Sumber : http://trik-tips.blogspot.com/2007/12/cara-membuat-commments-box-kotak.html

Comments Box atau Kotak Komentar adalah suatu kotak yang berfungsi untuk
memberikan komentar terhadap isi dari suatu artikel dalam sebuah weblog. Jika di
Wordpress.com kotak komentar tersebut akan langsung muncul tepat di bawah artikel.
Namun tidak halnya di Blogspot/Blogger, kotak komentar dilayanan blog ini hanya
berupa link yang kemudian baru akan muncul kotak komentar bagi pengunjung yang mau
memberikan komentar terhadap artikel tersebut, hal ini menyebabkan para komentator
sedikit enggan untuk melakukannya karena merasa malas untuk membuka window baru
yang tentu saja akan memerlukan sedikit waktu untuk membukanya. Sehingga para
pengguna layanan Blogspot lebih sedikit menerima komentar dibanding dengan para
pengguna layanan Wordpress.

WARNING : KARENA BANYAK BLOGGER YANG GAGAL MENGGUNAKAN

TRIK INI DAN JUGA ADA YANG KEHILANGAN POSTINGNYA, JADI ANDA
HARUS MEMBACKUP DULU TEMPLATE ANDA. YANG GAGAL MEMAKAI INI
MUNGKIN KARENA ADANYA KETIDAKCOCOKAN DENGAN TEMPLATE
YANG DIGUNAKAN. JIKA TERJADI HAL-HAL YANG TIDAK DIINGIINGINKAN
SEGERA KEMBALIKAN TEMPLATE ANDA YANG LAMA. TAPI BANYAK JUGA
KOK YANG BERHASIL, SEMOGA BERUNTUNG

Tapi bagi kamu yang memakai layanan Blogspot tidakperlu khawatir lagi karena trik
berikut ini akan mengulas bagaimana caranya menambahkan kotak komentar atau
comments box sehingga menjadi kotak komentar yang ada di Wordpress yaitu persis
berada dibawah artikel caranya adalah dengan menggunakan layanan di
http://www.haloscan.com. Satu hal yang perlu diperhatikan sebelum kamu menggunakan
layanan ini yaitu "komentar-komentar terdahulu akan hilang", jadi pikirkanlah dulu
sebelum kamu memakai layanan ini. Kalau kamu sudah yakin mau menerapkannya maka
berikut ini dalah caranya:

1. Buka website http://www.haloscan.com.

2. Daftarkan diri kamu di website tersebut.

3. Setelah selesai lalu Login dengan username dan password yang sama dengan
pada saat mendaftar.

http://ai-kom.blogspot.com
 4. Setelah login berhasil maka akan muncul beberapa menu. Pertama-tama pilih
menu setting. Didalam menu Setting ada beberapa pengaturan yang harus disi
silahkan atur sesuai dengan keinginanmu. Supaya kotak komentarnya muncul
dibawah postingan, ganti status "open in popup window" menjadi "off". kamudian
simpan.

5. Langkah selanjutnya yaitu pilih menu Template. Silahkan pilih mana yang kamu
sukai, sebaiknya sesuaikan dengan warna blog kamu kemudian simpan.

6. Langkah berikutnya yaitu pilih menu Install

7. Beri tanda pada radio button di samping tulisan Blogger or Blogspot lalu klik
Tombol Next

8. Klik Tombol Brows , silahkan pilih file template yang sudah dibackup. Kalau
belum silahkan backup dulu. Jika belum tahuh caranya backup klik disini

9. Klik tombol Upload Blogger Template.

10. Jika sudah berhasil klik tombol Download New Template kemudian di save.

11. Login ke Blogger/Blogspot

12. Pilih Template kemudian klik menu Edit HTML

13. Untuk Upload template klik tombol Brows. Masukkan template yang sudah
didownload dari haloscan tadi lalu Upload kemudian simpan setting.

14. Coba buka buka web blog kamu dan lihat hasilnya. Sekarang kamu sudah
mempunya kotak komentar seperti yang ada di wordpress.

http://ai-kom.blogspot.com
 15. Trus gimana caranya nampilin komen-komen terbaru biar bisa kelihatan di
sidebar? caranya gampang, yiatu kembali ke haloscan trus pilih dashbord nha
disitu kan ada recent comments trus dibawahnya ada link tulisannya gini "put
this widget on your site" nha kamu klik link tersebut, setelah itu dibawahnya
akan muncul kotak yang berisi kode. Copy kode tersebut dan pasang di blog
kamu, gampang to?

16. Selamat Mencoba... SEMOGA BERHASIIIIILLLLLL :y

Cara Mengganti Icon Pada Address Bar

Sumber : http://trik-tips.blogspot.com/2007/12/cara-mengganti-icon-pada-address-bar.html

Jika kita membuka suatu website atau blog maka seringkali kita menjumpai ada sebuah
gambar atau icon pada address bar (kotak untuk mengetikkan alamat web). Dan jika kita
punya blog di Blogspot maka icon default yang akan tampil adalah gambar seperti ini :
Bagi kamu yang tidak puas dengan icon/gambar tersebut, kamu bisa menggantinya
dengan gambar sesuai dengan keinginanmu. caranya sangat mudah, yaitu dengan
membuat gambar (gif, jpg, ico, dan lain2) dengan ukuran kira2 24x42 pixel sampai 32x32
pixel (sebenarnya ukurannya bebas sih, tapi biar filenya kecil dan proses membukanya
cepat). Setelah itu .....
masuk ke "Layout --> Edit HTML" trus tempatkan script berikut kedalam tag <head>
atau tepat dibawah script <head>

<link href='http://kendhin.890m.com/sonictrik.gif' rel='SHORTCUT ICON'/>

ganti huruf yang dicetak tebal dengan lokasi gambar dimana kamu menyimpannya. Kamu
bisa menyimpan gambarmu di 000webhost atau bisa juga di photobucket dan juga di
imageshack atau kalo kamu tidak mau pusing dibawah ini ada beberapa contoh
icon/gambar beserta dengan linknya.

http://img87.imageshack.us/img87/5862/image1an1.gif
http://img110.imageshack.us/img110/6218/image2ie0.gif
http://img98.imageshack.us/img98/9617/image3cr0.gif
http://img134.imageshack.us/img134/633/image4hx4.gif
http://img139.imageshack.us/img139/83/image5oa7.gif

http://img509.imageshack.us/img509/6449/image6fu0.gif

http://img527.imageshack.us/img527/6543/image7go9.gif

http://img507.imageshack.us/img507/5774/image8wn8.gif

http://img150.imageshack.us/img150/5784/image9qo1.gif
http://ai-kom.blogspot.com
 http://img404.imageshack.us/img404/1214/image10vr1.gif

http://img412.imageshack.us/img412/3808/image11pc0.gif

http://img100.imageshack.us/img100/4658/image12du2.gif

http://img132.imageshack.us/img132/4733/image13lj1.gif

http://img145.imageshack.us/img145/7793/image14zg9.gif

http://img412.imageshack.us/img412/4403/image15jc7.gif

http://img264.imageshack.us/img264/7575/image16kn8.gif

Mengganti Tulisan "Older Post / Newer Post" atau "Posting Lama /

Posting Baru"
Sumber : http://trik-tips.blogspot.com/2008/01/mengganti-older-newer-post-posting-lama.html.

Biasanya dibagian paling bawah artikel kamu terdapat tulisan seperti ini "Older Post /
Newer Post" atau "Posting Lama / Posting Baru". Nah mungkin awal-awalnya kamu
nggak tahu maksudnya apa tulisan tersebut dan setelah tahu oooo ternyata itu link menuju
ke artikel-artikel sebelumnya dan juga artikel-artikel yang baru. Nah mungkin kamu ingin
mengganti tulisan tersebut dengan tulisan yang lain, misalnya dengan tulisan "Artikelku
Sebelumnya" atau "Coretanku Yang dulu2" atau bahkan dengan sebuah gambar. Nha
pingin tahu caranya? mari kita mulai Pelajaranya...

1. Seperti biasanya kita login dulu ke blogger trus pilih "Template --> Edit HTML".
2. Beri tanda centang pada kotak "Expand Widget Template"
3. Cari kode berikut ini, cara nyarinya biar mudah copy kode berikut ini lalu tekan "Ctr +
F " dan paste kedalam kotak yg disediakan.

<data:newerPageTitle/>

4 . Ganti kode tersebut dengan tulisan yg kamu inginkan. Tapi jika kamu pingin ganti
dengan gambar panah misalnya, ganti dengan kode seperti ini <img
src="http://www.geocities.com/kendhin_x/arrow/newblue.gif"/>. text yg dicetak tebal
adalah lokasi dari gambar, kamu bisa menggantinya dengan gambar yang kamu inginka
atau bisa diganti dengan gambar yang aku sediain dibawah.
5. Yang diatas untuk mengganti tulisan "Newest Post" atau "Posting Baru".
6. Terus untuk tulisan "Older Post" atau "Posting Lama" coba cari kode berikut ini,
lokasinya tidak jauh dari kode diatas atau dibawahnya sedikit.

<data:olderPageTitle/>

7. Kalo sudah ketemu ganti lagi dengan tulisan yang kamu inginkan. Jika pingin diganti
menjadi gambar coba ganti dengan kode seperti ini <img
src="http://www.geocities.com/kendhin_x/arrow/oldblue.gif"/>
http://ai-kom.blogspot.com
8. Jika kamu pingin ganti warna biru jadi warna merah, tinggal ganti "newblue.gif"
dengan "newred.gif" dan "oldblue.gif" ganti dengan "oldred.gif"

Berikut ini gambar panah dan kodenya

olblue.gif newblue.gif

oldblack.gif newblack.gif

oldgreen.gif newgreen.gif

oldpink.gif newpink.gif

oldred.gif newred.gif

oldyellow.gif newyellow.gif

Membuat Artikel yg Berhubungan (Related Post)

Sumber : http://trik-tips.blogspot.com/2008/06/membuat-artikel-yg-berhubungan-related.html

Keuntungan menampilkan "Artikel yang berhubungan" atau "Related Post", "Related

Article" adalah para pembaca blog bisa dengan mudah menemukan informasi lain yang
masih ada hubungannya dengan artikel yg sedang mereka baca. Contohnya seperti yang
ada dibagian akhir dari artikel ini, disitu ada link-link dari artikel yang berhubungan yang
berdasarkan pada kategori ato label yang sama. Nha mau tahu cara membuatnya?

Caranya cukup mudah, ikuti langkah2 berikut ini:

1. Login ke blogger Blogger
2. Pilih menu "Layout-->Edit HTML"
3. Beri tanda centang pada kotak "Expand Widgets Template".
4. Kemudian download "SCRIPT INI"
5. Buka file tersebut kemudian copy semua script yang ada didalamnya.
6. Setelah itu cari kode ini <data:post.body/> dan letakkan script tadi dibawahnya. Untuk
blog yang ada "readmore"nya biasanya akan terdata 2 kode. nha km taruhnya dabawah
kode yang pertama.
7. Kalo sudah simpan template km dan lihat hasilnya.

Tambahan:
Setelah jadi, jika kamu ingin merubah tulisan "Related Posts by Categories" maka cari
kode tersebut di HTML, trus ganti dengan text/tulisan yg kamu suka.

http://ai-kom.blogspot.com
http://ai-kom.blogspot.com