Situs Penyedia Template Blog Gratis

Butuh desain dan beberapa tampilan baru untuk Blog anda?, gunakan template yang dapat anda download gratis di beberapa situs ini. Beberapa situs ini menyediakan template Blog yang beragam mulai dari yang simple sampai yang mendetail tersedia gratis dan bisa anda download.

baca selengkapnya di : ilmuti.com

Cara Belajar Desain Blog Dengan Efektif

Ada satu pertanyaan mendasar yang sering muncul dibenak para blogger pemula ketika sedang asiknya blog walking menjelajah blogosphere. Melihat desain blog milik teman atau orang lain yang tampak keren dan tidak standar memang bisa bikin hati iri

Jadi sebenarnya ada gak sih cara yang cepat, mudah dan efektif untuk belajar mendesain blog sendiri? jawabannya TIDAK ADA. Semua butuh proses. Tapi ada tips jitu dari para desainer web tentang cara belajar desain web yang efektif, mereka sudah mempraktekkannya dan berhasil.


baca selengkapnya di : ilmuti.com

Membuat menu multi kolom disini maksudnya membuat lebih dari satu menu dalam satu kolom, ini berguna sekali untuk menghemat space blog anda yang sudah memiliki menu yang banyak seperti pada contoh screenshot berikut:

baca selengkapnya di : ilmuti.com

Belajar Membuat Blog

Blogger.Com

Domain User : http://user.blogspot.com

Keuntungan :

~ Bisa membuat lebih dari 1 blog dengan 1 acount.

~ Layout bisa diganti.

~ Acount di GMAIL ( jika diaktifkan ).

~ Otomatis akan masuk dalam Search Engine GOOGLE.


baca selengkapnya di : ilmuti.com

Cara Membuat Kotak Link Exchange

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

<a href="http://trik-tips.blogspot.com"><img src="http://http://kendhin.890m.com/banner-trik.gif" width="90" height="17" border="0" /></a>

Nha trus gimana cara buat kotak tersebut?
gini lho,
pertama Login ke blogger trus pilih Layout --> Page Elements
trus klik Add a Gadget 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://http://kendhin.890m.com/banner-trik.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. Kisi kotak diatas kalo dicopy dan paste jadinya akan seperti ini:



piye? wes mudeng rung?
Guampang tho?

Membuat Menu Vertikal (Vertical)

menu horizontal, nha sekarang mari kita mencoba membuat menu vertikal. Menu vertikal ini cocok kalau dipasang di sidebar karena bentuknya berjajar sevara vertikal (ya iyalah). Contohnya seperti gambar disamping itu. Beginilah cara membuatnya :

1. Login ke blogger trus pilih "Layout-->Edit HTML"
2. Masukkan kode berikut sebelum kode ]]></b:skin> atau sebelum kode </style> . Pokoknya ditaruh di dalam Barisan kode CSS deh.

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/blue2.gif');
}

* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }

Untuk memilih warna menu, perhatikan kode2 yang berwarna merah (blue1.gif dan blue2.gif). Ganti kode tersebut dengan pilihan warna dibawah ini. Misal jika kamu ingin memilih menu warna merah maka kodenya menjadi seperti ini :

.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/red1.gif') repeat-x bottom left;

dan

.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/red1.gif');

Pilihan Warna menu vertikal :

	blue1.gif blue2.gif
	green1.gif green2.gif
	red1.gif red2.gif
	pink1.gif pink2.gif
	black1.gif black2.gif

3. Kemudian di save.
4. Lalu pergi ke menu "Page Elements"
5. Pilih "Add a Gadget -->HTML/JavaScript" kemudian masukkan kode berikut kedalamnya:

<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://trik-tips.blogspot.com">Trik Blog</a></li>
<li><a href="http://x-template.blogspot.com" >Free Template</a></li>
<li><a href="http://getebook.co.cc">Free Ebook</a></li>
</li>
</ul>

Kode yang berwarna merah adalah linknya dan yg warna biru adalah teks yang ditampilkan. Kalau mau menambahkan menu tingal buat lagi kode seperti yg berkedip2 dibawahnya.

Dah gitu aja. Gampang kan???? :D

Pasang Foto di Profile Blogger/Blogspot

Banyak blogger yg nanya tentang bagaimana cara memasukkan fotonya yg ganteng dan cantik di profile blognya. Berbeda dg di blog gratis lain, di blogger/blogspot, prosesnya agak sedikit rumit bagi yg masih baru di dunia internet.

Ada dua cara memasukkan foto :
Cara Pertama:

Upload foto Anda di postingan blog. Caranya:

(a) Setelah login, klik link blog Anda.

(b) Klik menu “posting” atau “Create”

(c) Di toolbar posting ada tombol bergambar panorama warna biru. Klik
di situ, dan akan muncul pop-up window untuk “upload images”

(d) Klik browse ke file foto Anda yg sudah tersimpan di komputer

(e) Klik Upload Image warna biru (tunggu beberapa saat sampai proses
upload selesai)

(f) Klik Done

(g) Sekarang foto Anda sudah masuk ke posting. Klik menu “Edit HTML”
di toolbar posting bagian atas sebelah kanan.

(h) Akan tampak sejumlah kode HTML di situ. Copy/paste kode yg berada
setelah tulisan [src="] yaitu link yg dimulai dg [http://] dan
berakhir dg [.jpg] atau [.jpeg]

(i) Simpan link tsb. di notepad atau ditulis di kertas.

(j) Jangan lupa, klik publish.

(k) Setelah itu, klik menu “Dashboard”

(l) Klik menu “Edit Profile”

(m) Di sini ada menu “Photo URL”, paste link foto Anda tadi di kotak
yg tersedia.

(n) Klik “Save Profile” di bagian paling bawah.

(o) Selesai.CARA KEDUA

———————Cara kedua adalah dg meng-upload (memasukkan/menyimpan) foto Anda di hosting lain, dan baru kemudian link URL foto tsb. di copy/paste ke profile blogger/blogspot.

Yg paling mudah, simpan/upload foto Anda di http://geocities.com karena hosting ini milik yahoo.com. Jadi, siapa saja yg memiliki email yahoo dapat langsung log-in ke geocities.com dg memakai id yahoo Anda.

Misalkan file foto Anda adalah jenggot.jpg dan email id Anda mukhliszamzami. Maka, nantinya setelah foto itu diupload ke geocities, link url Anda akan menjadi sebagai berikut: http://geocities.com/mukhliszamzami/jenggot.jpg. Nah, copy/paste link
tsb. ke profile blogger.com di kolom yg tersedia dan setelah itu SAVE
CHANGES dan REPUBLISH.

Sumber: www.smathomasaquino.blogspot.com

Cara Buat Text Area

Di sidebar sebelah kanan blog ini, saya mengajak teman-teman blogger untuk bertukar link dengan fatihsyuhud.com yang bertujuan selain untuk saling kenal antar sesama blogrollers, juga berfungsi sebagai saling promosi blog. Saya memakai format Text Area–yang berisi link dan chicklet/image kecil– supaya yang berminat tukar link dapat langsung meng-copy/paste kodenya dengan mudah. Berikut kode Text Area di sidebar tsb yang dapat diganti dg link dan chiklet Anda sendiri:


Copy code below, insert into your blog

<a href="http://fatihsyuhud.com/" title="Blogger Indonesia" target="_blank"> <img src="http://fatihsyuhud.com/blog-indonesia.gif" border="0" alt="Blogger Indonesia"> </a>

Untuk wordpress.com

Khusus untuk yg pake wordpress.com dan gagal memakai kode di atas, pakai kode berikut dan taruh di teks widget sidebar blog Anda:


<img src="http://fatihsyuhud.com/blog-indonesia.gif" border="0"></a>
<br>
Copy code below, insert into your blog </font>
<br>
<textarea name="code" rows="4" cols="25"> <a href="http://fatihsyuhud.com/" title="Blogger Indonesia" target="_blank"> <img src="http://fatihsyuhud.com/blog-indonesia.gif" border="0" alt="Blogger Indonesia"> </a> </textarea>

Catatan:

1. rows=.. adalah ukuran ke atas, sedangkan cols=… adalah ukuran ke samping. Apabila setelah dipasang di blog ternyata kelebaran atau kepanjangan, maka dirubah angka di rows atau di cols sesuai kebutuhan yg sesuai dg sidebar blog Anda.

2. Cara pasang di wordpress / wordpress.com: (a) klik Desain -> Widgets -> Teks -> Tambah -> Simpan. (b) Klik Sunting Widget Teks tadi -> Pasang kode Text Area -> Simpan

3. Cara pasang di blogger.com / blogspot, klik Tambah Gadget –> text html/javascript –> pasang kode Text Area -> Simpan

Selesai...

Membuat Link Kembali ke atas

Beberapa hari yang lalu ada teman yang baru aja belajar ngeblog bertanya, bagaimana cara membuat link kembali ke atas atau back to top. Nah akhirnya kepikiran ingin membuat tomblo yang saat ini bila para reader (sok bahasa inggris dikit hehe,, reader=pembaca) lihat di blog ini di bagian pojok kiri bawah monitor ada sebuah icon berbentuk panah ke atas. Nah coba anda klik, maka akan kembali ke bagian atas bukan, saya meletakkan nya disitu karena terinspirasi pernah membaca artikel milik kendhin di blog nya trik-tips.
Untuk membuat link kembali ke awal, kembali ke atas atau back to top kita memerlukan dua buah kode yaitu :

1. <A NAME=”Awal”>awal</A> , kode ini sebagai check poin, hasil nya seperti ini awal.
2. <a href=”URL_link#Awal”>kembali ke awal </a> , kode ini berfungsi sebagai link yang apabila kita klik maka akan kembali ke posisi di mana link yang pertama (check point) diletakkan. Ganti url_link dengan link postingan kamu. misalnya:

<a href=”http://love-my-computer.blogspot.com/2008/08/kamus-blogger-dan-it.html#Awal”>kembali ke awal </a>

Kode diatas bisanya digunakan untuk postingan yang panjang, pernah membaca artikel di wikipedia di kolom content nya? dengan kode diatas kita dapat membuat model seperti itu, tidak hanya kembali keatas, bisa juga digunakan menjadi link ke bawah.

Kode diatas dapat anda modifikasi sesuai keinginan anda, bila ada yang masih bingung dapat ditanyakan melalui kolom komentar atau via email / YM.

Di postingan berikutnya saya akan menulis cara membuat button link kembali keatas, misalnya seperti tombol ini , yang saya adopsi dari artikel kendhin.

Selamat mencoba .

Baca juga: bagaimana membuat button link kembali ke atas.

Tips Halaman Blog Tampil Profesional

17 tips agar halaman blog terlihat lebih Profesional :

1. Lakukan pengecekan halaman pada beberapa web browser yang berbeda: Tampilan halaman anda begitu cantik di browser firefox tetapi belum tentu bagus di browser IE atau Opera atau browser yang lain. Ingat pengunjung blog anda tidak hanya menggunakan satu browser saja. untuk itu anda coba lakukan pengecekan dengan browser yang berbeda, misalkan : Firefox, Flock, Mozilla, IE, Opera, Safari.

2. Pilihan warna pada blog : Pemilihan warna memang susah-susah gampang semuanya tergantung selera pemilik blog. Jangan terlalu egois, pilih warna sesuai dengan tema blog anda. coba anda pikir jika blog anda tentang agama dengan pilihan warna hitam, terlihat janggal bukan! kebanyakan warna hitam lebih cenderung ke situs yang bertemakan underground.

3. Hindari Memasang Jam : Tanyakan pada diri anda sendiri apa gunanya memasang jam di blog anda, jika hanya sebagai pengingat waktu atau untuk mempercantik halaman sebaiknya tidak usah digunakan, apa gunanya jam pada taksbar windows. yang jelas bakal bikin load page anda semakin berat.

4. Hindari pasang kalender : Apa gunanya kalender windows? orang butuh informasi dari blog anda bukan ingin melihat kalender. sekedar informasi kalender yang saya maksud adalah kalender umum, beda dengan kalender yang menampilkan sebuah posting (biasanya banyak digunakan pengguna wordpress)

5. Hindari pasang jumlah pengunjung tetap: jika blog anda baru jangan gunakan jumlah pengunjung (counter), ini akan berakibat penilaian yang buruk terhadap blog anda. walaupun untuk beberapa penyedia layanan counter menyediakan fasilitas untuk memanipulasi dan menambah jumlah pengunjung secara manual, coba anda pikir blog yang baru dibuat sudah mencapai 100.000 pengunjung apa itu mungkin?.

6. Jangan memelas untuk meminta mengklik iklan : hindari kata "klik iklan dibawah ini" atau bahasa apapun yang meminta pengunjung anda untuk mengklik iklan. sampai saat ini ada beberapa blog yang melakukan hal tersebut (maaf jika blog anda termasuk dalam hal ini) siapa sih didunia ini yang suka diperintah, Tanpa anda menyuruhpun pengunjung bakal mengklik iklan tersebut jika dirasa berguna gai mereka.

7. Jangan memasang iklan yang berserakan : Iklan yang banyak memang sangat menguntungkan, namun jangan sampai isi halaman anda hanya iklan dan iklan. Pasang iklan sewajarnya saja dan tahukah anda pengunjung sangat risih dengan adanya iklan yang telihat melebihi kapasitas dari isi halaman blog anda.

8. Hindari memasang lagu pada blog : Selain bikin halaman berat blog yang menampilkan lagu agak terkesan tidak profesional dan maaf agak terkesan jaman dulu (jadul). Tidak masalah jika blog anda tentang musik atau blog personal tapi untuk blok bisnis kayanya kurang cocok.

9. Menampilkan status IP pengunjung : Blog anda bukan program spy khan?, jadi lebih baik tidak usah dipasang agar pengunjung tidak merasa dimata-matai.

10. Memasang widgets yang tidak ada hubunganganya dengan blog : Menambahkan widgets memang menyenangkan tapi jika tidak ada hubungannya malah blog anda terkesan aneh. pasanglah widget sesuai dengan kebutuhan saja.

11. Jangan hanya Copy-Paste : Saya tidak melarang anda untuk melakukan Copy-Paste, jika memang dilakukan sebaiknya perbaiki juga code scriptnya, hargai jerih payah penulis sebenarnya karna jika hanya copy-paste tulisannya tidak bakal terlihat rapi dan kemungkinan gambar yang diikutsertakan tidak bakal muncul.

12. Perhatikan tanda baca : Perhatikan tulisan anda apakah sudah benar tanda bacanya. Kesalahan dalam titik koma saja akan berakibat mempunyai arti yang berbeda.

13. Jangan gunakan gambar yang besar : Gambar memang mempercantik halaman anda, gambar yang besar justru jadi bumerang buat loading page anda. yang jelas blog anda pasti akan diabaikan untuk sementara waktu ketika loading page sedang berjalan.

14. Periksa Dead link : Link yang telah mati bakal tidak disukai pembaca, jangan kan pembaca search engine pun tidak menyukai hal ini. Lakukan pengecekan dead link sesering mungkin, banyak tools di internet yang bisa melakukan tugas ini.

15. Jangan terlalu banyak memposting artikel orang lain : Ini akan mendapat respon buruk dari pembaca, karna pembaca akan lebih berpikir lebih baik membaca kesumbernya secara langsung.

16. Selalu pasang nama sumber artikel : Blog yang profesional selalu menghargai jerih payah orang lain, yang jelas memasang nama sumber tidak merugikan anda sedikitpun sebaliknya penghargaan atas jerih payah orang lain itulah yang membuat anda terlihat lebih profesional.

17. Cara merespon komentar yang baik : Jangan pernah bersikap menggurui, hargai semua komentar dengan bijak walau pun ada beberapa komentar yang menyebalkan. Ingat! blog tempat orang menuangkan semua ide dan pemikiran jadi semua orang pasti mempunyai pendapat yang berbeda.
Sebagian tulisan diatas saya dapatkan dari beberapa sumber terpercaya dan sebagian lagi adalah pemikiran saya pribadi berdasarkan pengalaman saya. Terima kasih pada Cosa Aranda tentang sebagian tips terbaiknya.

Jika tidak sependapat dengan saya dan anda mempunyai pemikiran yang berbeda dapat menuangkannya pada halaman komentar. Terima Kasih (oom)

Menu Dropdown dengan JavaScript

Bagi sobat yang suka akan pernak-pernik blog, ada kabar baik nih. Pada kesempatan kali ini saya akan membahas tentang cara membuat menu Dropdown menggunakan JavaScript.



Biar agak seru, silahkan perhatikan contoh menu dropdown dibawah. Caranya silahkan arahkan mouse sobat ke deretan menu dibawah lalu klik untuk membuka submenu yang ada di dalamnya dan untuk menutupnya kembali sobat klik sekali lagi ke menu yang ingin di tutup, silahkan mencoba :





Menu utama 1

Link 1 di sini
Link 2 di sini

Link 3 di sini
Link 4 di sini

Menu utama 2

Link 1 di sini
Link 2 di sini

Link 3 di sini
Link 4 di sini

Menu utama 3

Link 1 di sini
Link 2 di sini

Link 3 di sini
Link 4 di sini

Menu utama 4

Link 1 di sini
Link 2 di sini

Link 3 di sini
Link 4 di sini

Bagaimana sudah di coba belum? kalau belum, coba dulu deh biar agak seru pembahasannya! Nah kalau sudah, bagaimana tanggapannya, seru tidak? kalau seru silahkan sobat baca artikel ini sampai tuntas (kaya adu banteng aja pake acara seru apa kagak), nah kalau sekiranya tidak seru, ya mending cari topik lain biar semangat bacanya.



Oke biar tidak terlalu ngelantur, kita langsung ke topik bahasan. Untuk membuat menu
seperti di atas, kita perlu memasang kode JavaScript serta stylesheet CSS pada template blog kita, akan tetapi karena di blogger terdapat dua pemakaian template yaitu template klasik dan template baru, maka tentu saja dalam membuat menu dropdown tersebut caranya berbeda pula. Oleh karena itu, pembahasannya pun akan saya bagi dua juga yaitu untuk template klasik serta untuk template baru. Akan tetapi karena pembahasannya terlalu panjang, maka kali ini akan saya bahas untuk template baru saja, dan untuk template klasik akan saya bahas pada postingan berikutnya.



Untuk membuatnya silahkan ikuti langkah-langkah berikut ini :

Langkah pertama yaitu membuat dua buah tombol untuk background dari tulisan menu, sebaiknya warna ataupun style nya di bedakan, ini dimaksudkan agar antara menu utama dengan sub menu akan terlihat perbedaannya.
sebagai contoh lihat gambar tombol di bawah ini :

Langkah kedua adalah menyimpan file gambar tombol tersebut pada hosting untuk menyimpan gambar, bisa di blogger sendiri atau dengan hosting lain. Agar lebih terarah, saya ambil contoh menggunakan hosting lain yaitu www.photobucket.com.
Untuk cara upload gambar ke situs ini sudah saya terangkan pada postingan terdahulu, jika ingin baca -
baca lagi silahkan klik di sini.
Saya ambil contoh kedua tombol tadi sudah saya upload dan mempunyai URL address sebagai berikut :




http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif



http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif

Langkah ketiga adalah memasukan kode JavaScript serta stylesheet CSS pada kode template blog,
silahkan ikuti langkah-langkahnya :

1. Sign in di blogger.com dengan id sobat




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. Klik kotak kecil di samping tulisan Expand Widget Templates untuk memberi tanda centang.
   Sekali lagi jangan lupa klik kotak kecil di samping tulisan Expand Widget Templates




6. Tunggu beberapa saat sampai proses selesai




7. Simpan kode berikut di bawah kode <title><data:blog.pageTitle/></title>








<script>


var last_expanded = '';


function showHide(id)


{


var obj = document.getElementById(id);


var status = obj.className;


if (status == 'hide') {



if (last_expanded != '') {


var last_obj = document.getElementById(last_expanded);


last_obj.className = 'hide';


}


obj.className = 'show';


last_expanded = id;

} else {

obj.className = 'hide';


}

}




</script>







8. Masukan kode berikut di dalam stylesheet CSS, atau untuk lebih mudah silahkan cari kode * Footer, lalu simpan kode berkut di atasnya








.ogah{

background-image:url('http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif');

text-align:center;

width:90%;

font-family: georgia, Helvetica, sans-serif;

padding-left:20px;

padding-right:20px;


padding-top:10px;

padding-bottom: 10px;

display:block;

text-decoration: none;

color: #000000;

height: 20px;

}



.ogahniye{


background-image: url('http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif');

text-align:center;

width:90%;

font-family: georgia, Helvetica, sans-serif;

padding-left:20px;

padding-right:20px;

padding-top:13px;

padding-bottom: 10px;


display:block;

text-decoration: none;

color: #000000;

height: 20px;

}



.hide{

display: none;

}




.show{

display: block;

}





a{cursor: hand}








9. Klik tombol SAVE TEMPLATE





Sedikit unek-unek, kode-kode diatas tentunya tidak seratus persen mutlak harus begitu, tapi bisa di sesuaikan dengan kondisi blog sobat.Contoh : width:90%; --> angka "90" artinya lebar dari gambar yang akan tampil sebesar 90%, nilai ini bisa diganti dan di sesuaikan dengan blog sobat, misal di ganti menjadi "80" atau berapa saja.





10. Klik menu Page Elements




11. Klik tulisan Add a Page Element





12. Klik tulisan ADD TO BLOG di bawah tulisan HTML/JavaScript





13. Masukan kode berikut :






<a class="ogah" onclick="showHide('ogahku1')">Menu utama 1</a>

<div id="ogahku1" class="hide">

<a href="#" class="ogahniye">Link 1 di sini</a>>


<a href="#" class="ogahniye">Link 2 di sini</a>

<a href="#" class="ogahniye">Link 3 di sini</a>

<a href="#" class="ogahniye">Link 4 di sini</a>

</div>


<a class="ogah" onclick="showHide('ogahku2')">Menu utama 2 </a>

<div id="ogahku2" class="hide">

<a href="#" class="ogahniye">Link 1 di sini</a>

<a href="#" class="ogahniye">Link 2 di sini</a>


<a href="#" class="ogahniye">Link 3 di sini</a>

<a href="#" class="ogahniye">Link 4 di sini</a>

</div>

<a class="ogah" onclick="showHide('ogahku3')">Menu utama 3 </a>


<div id="ogahku3" class="hide">

<a href="#" class="ogahniye">Link 1 di sini</a>

<a href="#" class="ogahniye">Link 2 di sini</a>

<a href="#" class="ogahniye">Link 3 di sini</a>


<a href="#" class="ogahniye">Link 4 di sini</a>

</div>

<a class="ogah" onclick="showHide('ogahku4')">Menu utama 4 </a>

<div id="ogahku4" class="hide">

<a href="#" class="ogahniye">Link 1 di sini</a>


<a href="#" class="ogahniye">Link 2 di sini</a>

<a href="#" class="ogahniye">Link 3 di sini</a>

<a href="#" class="ogahniye">Link 4 di sini</a>

</div>








14. Klik tombol SAVE CHANGES




15. Klik pada element yang baru di buat, tahan lalu pindahkan di tempat yang di sukai ( di drag & drop )




16. Klik tombol SAVE





17. Selesai

Keterangan : pada kode diatas ada tanda pagar (#), tanda itu harus di ganti dengan URL yang mau di pasang.
Contoh :





<a class="ogah" onclick="showHide('ogahku1')">My Other Blog</a>

<div id="ogahku1" class="hide">

<a href="http://rubrik-elektronik.blogspot.com" class="ogahniye">Rubrik elektronik</a>>


<a href="http://rohman-freeblogtemplate.blogspot.com" class="ogahniye">Free Blog Template</a>

<a href="http://user-online.blogspot.com" class="ogahniye">User Online blog</a>

<a href="http://contoh-blog.blogspot.com" class="ogahniye">D'Tree Menu</a>

</div>






Maka contoh hasilnya akan seperti ini, silahkan klik pada tombol menu untuk melihat reaksi yang di timbulkan :




My Other Blog

Rubrik elektronik
Free Blog Template
User Online blog
D'Tree Menu

Jika di lihat dari reaksi menu ini yang bersifat membuka dan menekan isi yang ada di bawahnya, maka menu ini hanya cocok di simpan pada sidebar dan tidak cocok apabila di simpan pada header.




Mudah-mudahan dapat di mengerti. Selamat mencoba !

Membuat Daftar Isi Blog (2)

Pada kesempatan tedahulu saya pernah mengulas bagaimana cara membuat daftar isi pada blog saya posting di sini, namun karena daftar isi tersebut menggunakan javascript, sehingga agak sedikit membebani loading blog sehingga yang saya sendiri tidak memasangnya di blog ini dengan alasan tidak mau blog ini terlalu berat ketika di akses oleh para pengunjung. Untuk mencari alternatif lain, kita bisa menggunakan engine pencari blogger sendiri. Namun untuk melakukan ini, tentu saja harus sedikit memodifikasi kode template. Sudah tidak sabar untuk membuat daftar isi di blog? caranya seperti ini :

Langkah #1

1. Sign in di blogger dengan ID anda

2. Bilsa sudah berada di halaman dashboard, klik Layout.

3. Klik tab Edit HTML

4. Klik link bertuliskan Download Template Lengkap. Silahkan di save dulu untuk backup (penting).

5. Beri tanda tik/cek pada kotak kecil di samping tulisan Expand Widget Template. Tunggu beberapa saat.

expand widget template

6. Lihat ke bagian body template, lalu cari kode seperti ini :



7. Delete / hapus kode tersebut, lalu ganti dengan kode berikut ini :

8. Klik tombol Simpan Template.

9. Selesai. Langkah pertama sudah selesai.

Langkah #2

1. Klik tab Elemen Halaman.

2. Klik tulisan Tambahkan sebuah Elemen Halaman.

3. Setelah muncul window baru, klik tombol TAMBAHKAN KE BLOG untuk yang HTML/JavaScript.

4. Copy lalu paste kode berikut :

Daftar isi»

5. Ganti NamaBlogAnda nama blog anda sendiri. Contoh : nama blog saya adalah kolom-tutorial. ganti angka 200 dengan nomor yang lainnya (kalau mau). Nomor ini adalah jumlah posting yang ingin di munculkan ketika link daftar isi di klik.

6. Klik tombol Simpan Perubahan.

7. Selesai.

Keterangan tambahan :

Jika anda sedikit mengerti tentang CSS, anda bisa memodifikasi bentuk dari daftar isi ini, apakah mau di kasih backround gambar, bentuk huruf yang berbeda atau apa saja dengan mengubah kode yang di sini (ini adalah kode yg ada pada Langkah #1 di atas) :

Untuk melihat contoh seperti apa daftar isi ini? silahkan klik → Daftar isi »

Artikel ini dapat juga di jumpai pada blog teman saya OOM (sorry om ga ngelink ke artikelnya, saya cari-cari ga ketemu, apa dah di hapus ya?)

Selamat berkreasi !

Cara Pasang Musik Pada Blog

Cara Pasang Musik Pada Blog
Rupanya ada salah seorang sobat kita yang tertarik memasang musik pada blog dan
belum mengetahui caranya. Oleh karena itu dalam kesempatan kali ini, saya akan coba membahas tentang bagaimana cara memasukan musik ke dalam blog.

Untuk memasang musik di blog, kita bisa memanfaatkan situs penyedia musik gratisan yang banyak bertebaran
di internet, yang penting kita jeli untuk mencarinya. Pada intinya ada tiga jenis situs penyedia musik yaitu :

1. Situs tersebut menyediakan berbagai pilihan lagu yang bisa kita pilih sesuai dengan selera kita

2. Situs tersebut tidak menyediakan lagu, tapi kita harus upload lagu dari komputer kita

3. Situs tersebut menyediakan berbagai pilihan lagu, atau bisa juga kita upload lagu dari komputer

Tentu diantara ketiganya ada kelebihan dan kekurangannya. Keuntungan menggunakan jasa situs yang pertama yaitu kita tidak perlu mempunyai lagu sendiri, kita tinggal pilih lagu yang di sukai lalu ambil kode HTML nya kemudian masukan ke blog kita, prosesnya sangat cepat dan praktis. Tapi kekurangan nya yaitu terkadang lagu yang kita sukai tidak tersedia di situs tersebut.

Untuk situs kedua, keuntungannya yaitu kita bisa memasukan lagu yang kita sukai tanpa harus tergantung dari situs tersebut jadi apapun lagunya pasti bisa yang penting ya kita harus mempunyai file lagu yang harus di upload. kekurangannya yaitu karena kita harus upload lagu ke situs tersebut maka dalam proses upload biasanya memerlukan waktu yang cukup lumayan lama, sehingga sedikit membosankan ketika melakukan proses upload juga tentunya biaya berinternet kita jadi semakin bengkak.

Untuk situs ketiga, untuk saat ini saya baru mengetahui satu situs saja, tolong kepada para sobat yang mengetahui situs-situs yang masuk kategori ini untuk menginformasikan pada kotak komentar agar di ketahui oleh para sobat lainnya. Nah untuk situs ini kelebihannya ya kita lebih bisa memilih, mau pake lagu yang tersedia atau mau upload juga bisa. tapi ada kekurangannya yaitu tidak di sediakannya panel kontrol untuk para pengunjung, jadi lagu yang kita pasang tidak bisa di apa-apakan oleh para pengunjung sehingga akan jalan dengan sendirinya, yang perlu kita pikirkan adalah lagu yang kita sukai belum tentu di sukai oleh para pengunjung, sehingga ini akan mengganggu kenyamanan bagi para pembaca blog ita.

Yo'i sobat, kayanya terlalu lama dengan fendefinisian ya, agak basi jadi membosankan...sorry bos. Kita kembali ke (laptop) topik bahasan semula yakni memasang lagu pada blog. Contoh yang pertama adalah memanfaatkan situs yang telah menyediakan berbagai lagu tanpa harus upload terlebih dahulu, saya ambil contoh www.song2play.com. silahkan ikuti langkah-langkah berikut :

1. Silahkan klik di sini untuk menuju www.song2play.com

2. Masukan judul lagu yang anda inginkan pada search engine yang tersedia. Contoh : Hotel California. Atau menuliskan nama penyanyi atau grup bandnya. Contoh the Eagle

3. Jika judul lagu belum muncul, biasanya ada tulisan Click here to get more Result. klik aja tulisan tersebut

4. Setelah terlihat beberapa judul lagu, klik pada judul lagu yang sedang sobat cari, secara otomatis akan ditampilkan kontrol navigasi dan lagu yang dipilih tadi akan di perdengarkan

5. Di pojok kiri bagian bawah ada kotak yang sudah di beri tanda centang, yaitu AutoStart, Show song Title. AutoStart artinya ketika pengunjung mengunjungi blog sobat, maka lagu akan langsung play. Nah jika tidak mau langsung play alias memberi kesempatan kepada pengunjung untuk memilih sendiri apakah mau mendengarkan lagu atau tidak, sobat hilangkan tanda centang tadi dengan cara mengkliknya

6. Show Song Title artinya pada panel navigasi akan di munculkan judul lagu yang di muat. Jika tidak mau muncul ya hilangkan saja tanda centangnya

7. Copy seluruh kode HTML yang di sediakan pada text area, paste pada notepad. Silahkan close window situs tersebut

8. Langkah selanjutnya yaitu sobat tinggal masukan kode HTML yang diberikan tadi ke dalam blog, nah untuk memasukan kode HTML ke dalam blog sudah sering saya bahas pada postingan terdahulu, jika sobat lupa silahkan klik di sini

Untuk contoh silahkan klik tombol play pada panel navigasi di bawah, ini sengaja saya setting tidak Auto Start :

Song: The Eagles - Hotel California

Song provided by song2play.com

Sedikit tambahan, jika sobat ingin menyesuaikan lebar panel navigasi agar sesuai dengan sidebar blog sobat, sobat bisa merubah nilai yang ada pada kode HTML lagu tersebut yaitu nilai width=...px.
Contoh : didalam kode tersebut ada kode width=310px, untuk memperkecilnya kita tinggal perkecil nilai px nya. Contoh : width=200px.

Situs yang serupa dengan ini adalah www.songhere.com. Mungkin pemiliknya memang sama. Nah langkah-langkah mendapatkan kode HTML dari situs ini mirip dengan langkah-langkah diatas,

Contoh panel navigasi dari www.songhere, silahkan klik tombol play nya :

Song: White Lion - When the children cry

Tambahan lagi, untuk yang di situs www.songhere ini tidak di sediakan pasilitas untuk memilih fasilitas AutoStar atau tidak, jadi kalau kita memakainya akan langsung play tanpa harus di klik oleh pengunjung, untuk mengakalinya
kita harus mengganti sendiri kode nya, silahhkan sobat cari di dalam kode lagu tersebut yang bertuliskan autostart=true, ganti tulisan true menjadi false sehingga kode tadi akan menjadi seperti ini autostart=false, contoh hasil kode yang sudah saya rubah adalah lagu dari white lion di atas, yang untuk menjalankannya harus di klik dulu tombol play nya.

Nah itu tadi contoh situs yang menyediakan berbagai lagu yang bisa kita pilih, sekarang contoh situs yang harus meng upload lagu dari komputer kita salah satunya adalah www.tunefeed.com

Untuk langkah-langkahnya, silahkan ikuti seperti di bawah ini :

1. Klik di sini untuk menuju situs www.tunefeed.com

2. Klik kotak di sebelah tulisan widget Color, pilih warna panel navigasi yang sobat sukai

3. Klik tombol yang ada tulisan Click here to share your music

4. Klik tombol yang bertuliskan Add Music or Photos

5. Masukan file foto atau pun lagu yang sobat milik

6. Klik tombol upload

7. Sambil menunggu proses upload, sobat isi data-data diri sobat pada kolom yang di sediakan

8. Tunggu sampai proses upload selesai

9. jika proses upload selesai, sobat akan di minta untuk mngecek email di berikan tadi

10. silahkan buka email dari www.tunefeed.com bila sudah sampai

11. Klik link ntuk melakukan aktivasi keanggotaan, nah dengan mengklik link tadi otomatis sobat sudah berada pada halaman acount sobat

12. Klik tulisan Share This Tunefeed

13. Pilih volume yang diinginkan pada menu dropdown di samping tulisan Select Volume

14. Pilih mode player, mau autoplay atau tidak pada menu dropdown di samping tulisan auto-play, sebaiknya pilih No

15. Copy seluruh kode yang di berikan pada text area kemudian paste di notepad

16. Klik tulisan Log Out untuk keluar dari halaman account sobat

17. Silahkan close window browser sobat

18. Tugas selanjutnya yaitu memasukan kode HTML yang sudah diberikan ke dalam blog. Untuk caranya sudah saya bahas pada tulisan di atas

19. Selesai

Contoh panelnya yaitu seperti di bawah ini, silahkan klik tombol play untuk mengaktifkan nya, tunggu beberapa saat, loadingnya agak sedikit lama :

Untuk contoh kategori yang ketiga, sobat bisa kunjungi www.iwebmusic.com, caranya hampir mirip dengan cara-cara diatas, disini sobat bisa pilih lagu yang di sediakan atau bisa juga meng upload lagu dari komputer. Cuma sayang untuk yang satu ini tidak mempunyai panel kontrol buat pengunjung yang ada hanya berupa banner biasa dan bekerja auto start sehingga saya tidak bisa memberi contoh panelnya.

Ok para sobat, saya rasa sudah cukup. Selamat mencoba ya...salam hangat buat semuanya.

Text Berjalan di Bar menu

Sobat Ochim beberapa hari yang lalu mengirimkan email kepada saya yang isinya menanyakan tentang cara membuat text berjalan yang ada pada bar menu bawah seperti halnya pada blog milik saya ini. Pertanyaan tersebut sudah saya jawab langsung melalui email juga dan sekarangpun pada saat artikel ini di buat, sobat Ochim sudah berhasil membuat bar menu blognya ada tulisan berjalan.


Seperti biasanya, jika ada pertanyaan melalui email maka jawaban dari pertanyaan tersebut akan saya posting melalui blog ini. Nah jika sobat sama-sama tertarik ingin membuat text berjalan tersebut, silahkan baca artikel ini sampai tuntas.


Karena template blogger terbagi menjadi dua yaitu template klasik dan template baru, maka untuk cara membuat text berjalan tersebutpun akan berbeda, oleh karenanya pembahasannya pun akan saya bagi menjadi dua bagian. Akan tetapi perlu saya sampaikan, contoh yang akan saya berikan kali ini hasilnya tidak persis
seperti pada blog ini yaitu text berjalan dari arah kanan kekiri, akan tetapi saya akan memberi contoh text berjalan dari kiri ke arah kanan serta ada jeda waktu antara tulisan yang petama dengan yang kedua dan juga tulisan berikutnya.



Untuk template klasik silahkan ikuti langkah-langkah berikut ini :

1. Sign in di blogger dengan id sobat


2. Klik menu Template


3. klik menu Edit HTML


4. Copy seluruh kode HTMl lalu paste pada program notepad kemudian save. Ini di maksudkan untuk berjaga-jaga apabila terjadi kesalahan dalam proses editting template, sobat masih mempunyai data untuk mengembalikannya ke semula


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







<script language='javascript'>


message = "Tulis text pertama yang ingin muncul disini ^" +

"Tulis text kedua disini ^" +

"Tulis text ketiga disini ^" +

"Tulis text keempat disini ^"



scrollSpeed = 130

lineDelay = 0


// Do not change the text below //


txt = ""


function scrollText(pos) {

if (message.charAt(pos) != '^') {

txt = txt + message.charAt(pos)


status = txt

pauze = scrollSpeed

}

else {

pauze = lineDelay

txt = ""

if (pos == message.length-1) pos = -1

}

pos++


setTimeout("scrollText('"+pos+"')",pauze)

}

scrollText(0)

</script>






6. Klik tombol Save Template Changes




7. Selesai.

Untuk template baru silahkan ikuti langkah-langkah berikut ini :

1. Sign in di blogger dengan id sobat




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. Klik kotak kecil di samping tulisan Expand Widget Templates untuk memberi tanda centang. Sekali lagi jangan lupa klik kotak kecil di samping tulisan Expand Widget Templates




6. Tunggu beberapa saat sampai proses selesai




7. Simpan kode berikut di bawah kode </body> ,
   kode ini letaknya berada paling bawah sebelum kode </html>








<script language='javascript'>

message = "Tulis text pertama yang ingin muncul disini ^" +

"Tulis text kedua disini ^" +

"Tulis text ketiga disini ^" +


"Tulis text keempat disini ^"


scrollSpeed = 130

lineDelay = 0


// Do not change the text below //


txt = ""


function scrollText(pos) {


if (message.charAt(pos) != '^') {

txt = txt + message.charAt(pos)

status = txt

pauze = scrollSpeed

}

else {

pauze = lineDelay

txt = ""

if (pos == message.length-1) pos = -1


}

pos++

setTimeout("scrollText('"+pos+"')",pauze)

}

scrollText(0)

</script>






8. Klik tombol SAVE TEMPLATE





9. Selesai

sedikit clue, pada kode diatas ada tulisan yang saya buat merah, nah tulisan tersebut
harus sobat ganti dengan tulisan yang sobat inginkan. contoh : selamat datang di blog saya. atau apa saja yang menurut sobat layak untuk di tulis di situ. contoh yang saya berikan diatas memuat pesan atau text sebanyak empat tulisan, jika sobat ingin lebih banyak itu bisa dilakukan dengan menambah baris tulisan seperti kode sebelumnya.Untuk kode --> scrollSpeed = 130 . angka "130" merupakan kecepatan dari text berjalan, semakin kecil nilainya semakin cepat text berjalan, dan semakin
besar nilainya maka text akan semakin lambat. Silahkan sesuaikan dengan keinginan sobat.




Seperti yang saya katakan di awal artikel bahwa kode yang saya berikan di atas hasil efeknya tidak sama dengan yang ada di blog ini, untuk melihat hasil nyatanya, silahkan sobat klik di sini.



Selamat mencoba !!!

Cara Menampilkan Status Yahoo Messenger

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
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 a Gadget --> HTML/Javascript".

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

Ganti text yang warna merah (paijo) dengan id YM kamu.
perhatikan angka "2", itu bisa kamu ganti dengan angka yang lain dan hasilnya gambar yang ditampilkan akan berbeda-beda.

Cara Membuat Template di Blogger

Yak akhirnya jadi juga, seperti yang aku janjikan kemarin yaitu "Cara Membuat Template Blogger". Mulai dari mana ya? nnnngg.. ohya, tak jelasin dulu deh tentang artikel ini. Gini, dalam trik berikut, kita akan mencoba membuat template yang paling sederhana dan paling mudah. Sebenarnya dalam mebuat template di blogger harus mengerti tentang CSS dan HTML, tapi untuk kali ini kita hanya memerlukan sedikit kemampuan tersebut karena kita akan membuat template yang paling sederhana, tapi jangan salah walaupun caranya sederhana tapi hasilnya bisa sangat luar biasa, tergantung dari desainernya. Ok deh mulai aja deh ya, kayaknya udah pada nggak sabar nih.

Gini, cara termudah dalam membuat template blogger yaitu dengan mendownload sebuah template kemudian kita otak-atik sendiri, jadi kita tidak perlu membuat dari awal. Untuk bahan praktek kali ini kita coba memakai template yang aku dah pernah aku buat, downlad disini bahannya. Sebelum kita mulai gue saranin lo buat blog baru aja biar gak ngerusak blog asli kamu.

Tahap Desain

Template yang akan kita buat disini memiliki empat komponen utama yaitu Background, Header, Main dan Footer. seperti yang ada dalam gambar berikut:



Jadi kamu harus membuat keempat komponen tersebut. Cara buatnya gimana? kamu harus bisa menggunakan software image editor seperti Photoshop, Corel, Paint dll. Cara pembuatan desainya lebih jelasnya seperti ini:
1. Buat desain seperti gambar diatas
2. Pada bagian background usahakan bersifat "Tile / Pattern" (kecil dan berulang-ulang).
3. Untuk Main dibagi lagi menjadi beberapa kolom, boleh 2 kolom, 3 kolom atau terserah deh. Dan biasanya terdiri dari bagian utama (posting) dan sidebar.
4. Kemudian potong-potong perbagian.
5. Untuk bagian Header motongnya harus full.
6. Bagian background, main dan footer motongnya sedikit aja karena bersifat "tile"
7. Desain diatas kalo dipotong-potong akan menjadi seperti ini :

background
header
main
footer

8. Upload potongan-potongan tersebut pada sebuah webhosting atau layanan penyimpanan file lainya. Contohnya di geocities atau Photobucket dll.

Nha modeng po ra?

Sekarang kita memasuki ke tahap penyusunan di blogger. gini langkah-langkahnya. Ohya udah di download belum tadi bahanya, kalo belum download dulu diatas itu. Ok kita mulai:
1. Kembali ke blogger dan ke menu "Edit HTML".
2. Trus klik tombol "Brows" untuk mengupload template yg udah kamu donwload tadi.
3. Kemudian Cari kode seperti ini:

body { margin: 0px; padding: 0px; text-align: left; font:$bodyfont; color:$textcolor; background: #323232 url('http://kendhin.890m.com/template/bg.jpg') repeat-x top left; }

4. Ganti text yang dicetak tebal dengan lokasi gambar background yang kamu buat.
5. Cari kode seperti ini :

#center {background: #ffffff url('http://kendhin.890m.com/template/main.jpg') repeat-y top center;}

6. Ganti text yang dicetak tebal dengan lokasi gambar main kamu.
7. Cari kode seperti ini:

#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://kendhin.890m.com/template/head.jpg') no-repeat top center; }

8. Ganti text yang dicetak tebal dengan gambar header.
9. Cari kode seperti ini:

#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://kendhin.890m.com/template/foot.jpg') repeat-y top center; }

10. Ganti text yang dicetak tebal dengan gambara foter.
11. Masih ada beberapa hal yang harus kamu perhatikan. coba cari kode-kode berikut:

#outer-wrapper { width: 898px; margin: 0px auto 0; text-align: justify; }

kode width: 898px menunjukkan lebar dari blog kamu, kamu bisa mengubahnya sesuai keinginanmu, tapi harus disesuaikan dengan lebar desain gambar yang kamu buat.

#main { float: left; width: 445px; margin: 5px; padding: 0px 0px 0px 10px; line-height: 1.5em; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; }

kode width: 445px; adalah lebar daerah main yang berisi posting, kamu bisa merubahnya.

#sidebar { float: right; width: 153px; padding-right: 50px; font-size: 83%; color: $sidebartextcolor; line-height: 1.4em; word-wrap: break-word; overflow: hidden; }
#ads-wrapper {float: left; width: 195px; padding-left: 10px; word-wrap: break-word; overflow: hidden; }

kode width: 153px; adalah lebar sidebar bagian kanan. Dan kode width: 195px; adalah lebar sidebar bagian kiri. Terus kode padding-right: 50px; jarak antara tulisan atau isi sidebar sebelah kanan dengan garis batas kanan. Dan kode padding-left: 10px; adalah jarak antara isi sidebar kiri dengan garis batas kiri.

#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://kendhin.890m.com/template/head.jpg') no-repeat top center; }

kode height:196px; width:898; adalah ukuran tinggi dan lebar bagian header, kamu bisa menyesuaikannya dengan ukuran header kamu.

#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://kendhin.890m.com/template/foot.jpg') no-repeat top center; }

kode width: 898px; height:80px; adalah ukuran lebar dan tinggi bagian footer.

12. Nah kalo udah selesai coba di preview template kamu, sudah sesuai kah? atau hancur?
13. Kalo sudah di Save.

:f akhirnya selesai juga aku buat artikel tentang pembuatan template, capek ya? tapi ingat sekali lagi ini adalah metode membuat template yang mudah dan sederhana, jadi sebenrnya isi dari template lebih rumit lagi, munkin kapan-kapan akan kita bahas detail dari bagian-bagina template tersebut.
OK SELAMAT BERJUANG......

Cara Membuat Kotak Link Exchange

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 a Gadget lalup pilih HTML/Java Script
trus kopi kode berikut ini di tempat yang disediakan.

<a href="http://trik-tips.blogspot.com"><img src="http://http://kendhin.890m.com/banner-trik.gif" width="90" height="17" border="0" /></a>

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. Kisi kotak diatas kalo dicopy dan paste jadinya akan seperti ini:

piye? wes mudeng rung?
Guampang tho?

Cara Menghilangkan Navigation Bar

Navbar adalah fasilitas yang dimiliki oleh Blogger/blogspot, bentuknya berupa kotak kecil memanjang kesamping yang letaknya berada di bagian paling atas dari blog yang fungsinya antara lain untuk mulai melakukan Sign In/out 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 atau hal-hal yang dianggap merugikan orang lain.

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 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)
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 Menampilkan Postingan Terbaru

Kamu pingin nampilin postingan terbaru (Recent Post) kamu di side bar?
Kalo pingin, beginilah caranya :

1. Login to Blogger kemuduan pilih "Layout"
2. Klik pada "Page Element" trus pilih "Add a Gadget --> HTML/Javascript" (Tempatnya terserah kamu).
3. Copy kode berikut ini dan taruh dalam kotak "content".

<script src="http://www.geocities.com/uddin_81/recent-post.js"></script>
<script>var numposts = 10; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://YOURBLOGNAME.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">
</script>

4. Ganti YOURBLOGNAME dengan nama blog kamu.
5. Angka "10" menunjukkan jumlah "Recent Post" yang ditampilkan, kamu bisa menggantinya
6. Terus Simpan.

Nha coba lihat blog kamu, udah nongol kan "Recent Post" kamu...
Good..good..good

Cara Menampilkan Post yang berkaitan

Sebagian besar blog atau website sudah malah wajib memasang widget ini, yaitu widget post yang berkaitan, yaitu sebuah bagian diblog yang menampilkan post lain yang masih dalam satu kategori yang sama. Jadi dapat mempermudah pembaca untuk mencari post yang diinginkan.

Untuk mempermudahnya, letakkan dibawah posting atau kotak komentar dibawah post. Jadi selesai membaca, komentar, baca lagi. Dan bisa memanjakan pengunjung blog anda.

Tidak lupa dengan tutorialnya kan ? OK, daripada membuat anda penasaran, langsung saja ke TKP :

Langkah 1
Widget ini membutuhkan pengeditan template, jadi langsung saja ke Edit HTML di tab layout. Jangan lupa beri tanda cek pada expand my template widget. Lalu cari kode </head> dan pasang kode dibawah ini diatas kode </head> :

<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

Jangan lupa disimpan.

Langkah 2
Eitz .... :p jangan beranjak dari sini, masih di Edit HTML anda, lalu cari kode ini :

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

Nah cari yang tidak dicetak tebal, lalu tambahkan kode yang dicetak tebal, cari kode yang semirip mungkin ya .... :D dan disimpan lagi ....


Langkah 3
Nah sekarang membuat teks HTML untuk menempatkan link - link post yang berkaitan tersebut. Tambah elemen halaman - HTML, dan beri judul misal 'Artikel yang berkaitan' lalu isi dengan teks berikut ini :

<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>

Langkah 4
Balik lagi di EDIT HTML kali ini untuk mencari widget 'Artikel yang berkaitan'. Jangan lupa beri tanda cek pada expand my template widget. Lalu cari kode berikut : ( kalau bingung cari titlenya saja pasti ketemu ! )

<b:widget id='HTML...' locked='false' title='Artikel yang berkaitan' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Tambahkan kode yang dicetak tebal, persis seperti teks diatas. Ini berguna agar widgetnya tidak muncul dihalaman utama. dan disimpan

Langkah 5
Berdoalah semoga berhasil .... :D dan happy blogging !