Blog Boy

Google kenapa kau hapus .Co.Cc ?

2011-07-01T03:33:00.000-07:00

Kamis pagi saya berkumpul di Shoutmix nya kang rohman (Itu aktivitas biasa saya) ngobrol ngalur-kidul lamanya dengan teman-teman blogger lainnya yang akhir nya salah satu anggota Shoutmix nya kang rohman ada yang memberi info bahwa Google telah menghapus .Co.Cc dari Search Engine nya wah ada apa ya?mengapa si mbah menghapusnya?jadi penuh dengan Teka-Teki dan sedih nya si mbah Google tidak cuma menghapus .Co.Cc dari Search Engine nya saja tetapi juga mem-Banned blogger yang memakai .Co.Cc?ada apa ya?sampai segitu marah nya si mbah?Sedih rasanya mbah Google menghapus .Co.Cc dari Search Engine dan salah satu korban nya adalah blog saya yang ber-alamat disini padahal kan saya sudah punya sub domain disitu hadeuh...

Lama tak berarti selesai

2011-06-30T00:25:00.000-07:00

Hay semua,cukup waktu yang sangat lama untuk saya meng-update blog ini lagi toh karena waktu itu blog ini dilanda masalah bertubi-tubi tapi untung nya enggak kena tsunami (Lho kok Tsunami?) walaupun blog ini lama tak di update tetapi alhamdulillah belum lama blog ini mendapat PR 1 hehe walaupun alexa blog ini turun drastis alias Gembrot yaa enggak masalah lah namanya juga jarang update hehe ,udah ah kebanyakan nulis jadi enek ,Bye-bye

Gerakan Shalat Bermanfaat Untuk Kesehatan

2011-01-22T15:49:00.000-08:00

Shalat ternyata tidak hanya menjadi amalan utama di akhirat nanti, tetapi gerakan-gerakan shalat paling proporsional bagi anatomi tubuh manusia. Bahkan dari sudut medis, shalat adalah gudang obat dari berbagai jenis pnyakit.

Allah, Sang Maha Pencipta, tahu persis apa yang sangat dibutuhkan oleh ciptaanNya, khususnya manusia. Semua perintahNya tidak hanya bernilai ketakwaan, tetapi juga mempunyai manfaat besar bagi tubuh manusia itu sendiri. Misalnya, puasa, perintah Allah di rukun Islam ketiga ini sangat diakui manfaatnya oleh para medis dan ilmuwan dunia barat. Mereka pun serta merta ikut berpuasa untuk kesehatan diri dan pasien mereka.

Begitu pula dengan shalat. Ibadah shalat merupakan ibadah yang paling tepat untuk metabolisme dan tekstur tubuh manusia. Gerakan-gerakan di dalam shalat pun mempunyai manfaat masing-masing. Misalnya:

Takbiratul Ihram

Berdiri tegak, mengangkat kedua tangan sejajar tlinga, lalu melipatnya di depan perut atau dada bagian bawah. Gerakan ini bermanfaat untuk melancarkan aliran darah, getah bening (limfe), dan kekuatan otot lengan. Posisi jantung di bawah otak memungkinkan darah mengalir lancer ke seluruh tubuh. Saat mengangkat kedua tangan, otot bahu meregang sehingga aliran darah kaya oksigen menjadi lancer. Kemudian kedua tangan didekapkan di depan perut atau dada bagian bawah. Sikap ini menghindarkan dari berbagai gangguan persendian, khususnya pada tubuh bagian atas.

Ruku’

Ruku’ yang sempurna ditandai tulang belakang yang lurus sehingga bila diletakkan segelas air di atas punggung tersebut tak akan tumpah. Posisi kepala lurus dengan tulang belakang. Gerakan ini bermanfaat untuk menjaga kesempurnaan posisi serta fungsi tulang belakang (corpus vertebrae) sebagai penyangga tubuh dan pusat saraf. Posisi jantung sejajar dengan otak, maka aliran darah maksimal pada tubuh bagian tengah. Tangan yang bertumpu di lutut berfungsi untuk merelaksasikan otot-otot bahu hingga ke bawah. Selain itu, rukuk adalah sarana latihan bagi kemih sehingga gangguan prostate dapat dicegah.

I’tidal

Bangun dari ruku’, tubuh kembali tegak setelah mengangkat kedua tangan setinggi telinga. I’tidal merupakan variasi dari postur setelah ruku’ dan sebelum sujud. Gerakan ini bermanfaat sebagai latihan yang baik bagi organ-organ pencernaan. Pada saat I’tidal dilakukan, organ-organ pencernaan di dalam perut mengalami pemijatan dan pelonggaran secara bergantian. Tentu memberi efek melancarkan pencernaan.

Sujud

Menungging dengan meletakkan kedua tangan, lutut, ujung kaki, dan dahi pada lantai. Posisi sujud berguna untuk memompa getah bening ke bagian leher dan ketiak. Posis jantung di atas otak menyebabkan daerah kaya oksigen bisa mengalir maksimal ke otak. Aliran ini berpengaruh pada daya pikir seseorang. Oleh karena itu, sebaiknya lakukan sujud dengan tuma’ninah, tidak tergesa-gesa agar darah mencukupi kapasitasnya di otak. Posisi seperti ini menghindarkan seseorang dari gangguan wasir. Khusus bagi wanita, baik ruku’ maupun sujud memiliki manfaat luar biasa bagi kesuburan dan kesehatan organ kewanitaan.

Duduk di antara sujud

Duduk setelah sujud terdiri dari dua macam yaitu iftirosy (tahiyat awal) dan tawarru’ (tahiyat akhir). Perbedaan terletak pada posisi telapak kaki. pada saat iftirosy, tubuh bertumpu pada pangkal paha yang terhubung dengan saraf nervus Ischiadius. Posisi ini mampu menghindarkan nyeri pada pangkal paha yang sering menyebabkan penderitanya tak mampu berjalan. Duduk tawarru’ sangat baik bagi pria sebab tumit menekan aliran kandung kemih (uretra), kelenjar kelamin pria (prostate) dan saluran vas deferens. Jika dilakukan dengan benar, posisi seperti ini mampu mencegah impotensi. Variasi posisi telapak kaki pada iftirosy dan tawarru’ menyebabkan seluruh otot tungkai turut meregang dan kemudian relaks kembali. Gerak dan tekanan harmonis inilah yang menjaga kelenturan dan kekuatan organ-organ gerak kita.

Salam

Gerakan memutar kepala ke kanan dank e kiri secara maksimal. Salam bermanfaat untuk bermanfaat untuk merelaksasikan otot sekitar leher dan kepala menyempurnakan aliran darah di kepala sehingga mencegah sakit kepala serta menjaga kekencangan kulit wajah.

Gerakan sujud tergolong unik. Sujud memiliki falsafah bahwa manusia meneundukkan diri serendah-rendahnya, bahkan lebih rendah dari pantatnya sendiri. Dari sudut pandang ilmu psikoneuroimunologi (ilmu mengenai kekebalan tubuh dari sudut pandang psikologis) yang di dalami Prof. Soleh, gerakan ini mengantarkan manusia pada derajat setinggi-tingginya. Mengapa?

Dengan melakukan gerakan sujud secara rutin, pembuluh darah di otak terlatih untuk menerima banyak pasokan oksigen. Pada saat sujud, posisi jantung berada di atas kepala yang memungkinkan darah mengalir maksimal ke otak. Artinya, otak mendapatkan pasokan darah kaya oksigen yang memacu kerja sel-selnya. Dengan kata lain, sujud yang tuma’ninah dan kontinu dapat memicu peningkatan kecerdasan seseorang.

Setiap inci otak manusia memerlukan darah yang cukup untuk berfungsi secara normal. Darah tidk akan memasuki urat saraf di dalam otak melainkan ketika seseorang sujud dalam shalat. Urat saraf tersebut memerlukan darah untuk beberapa saat tertentu saja. Ini berarti, darah akan memasuki bagian urat tersebut mengikuti waktu shalat, sebagaimana yang telah diwajibkan dalam Islam.

Riset di atas telah mendapat pengakuan dari Harvard University, Amerika Serikat. Bahkan seorang dokter berkebangsaan Amerika yang tak dikenalnya menyatakan diri masuk Islam setelah diamdiam melakukan riset pengembangan khusus mengenai gerakan sujud. Di samping itu, gerakan-gerakan dalam shalat sekilas mirip gerakan yoga ataupun peregangan (stretching). Intinya, berguna untuk melenturkan tubuh dan melancarkan peredaran darah. Keunggulan shalat dibandingkan gerakan lainnya adalah di dalam shalat kita lebih banyak menggerakkan anggota tubuh, termasuk jari-jari kaki dan tangan.

Sujud adalah latihan kekuatan otot tertentu, termasuk otot dada. Saat sujud, beban tubuh bagian atas ditumpukan pada lengan hingga telapak tangan. Saat inilah kontraksi terjadi pada otot dada, bagian tubuh yang menjadi kebanggan wanita. Payudara tak hanya menjadi lebih indah bentuknya tetapi juga memperbaiki fungsi kelenjar air susu di dalamnya.

Masih dalam posisi sujud, manfaat lain yang bisa dinikmati kaum hawa adalah otot-otot perut (rectus abdominis dan obliqus abdominis externus) berkontraksi penuh saat pinggul serta pinggang terangkat melampaui kepala dan dada. Kondisi ini melatih organ di sekitar perut untuk mengejan lebih dalam dan lebih lama yang membantu dalam proses persalinan. Karena di dalam persalinan dibutuhkan pernapasan yang baik dan kemampuan mengejan yang mencukupi. Bila otot perut telah berkembang menjadi lebih besar dan kuat, maka secara alami, otot ini justru menjadi elastis. Kebiasaan sujud menyebabkan tubuh dapat mengembalikan dan mempertahankan organ-organ perut pada tempatnya kembali (fiksasi).

Setelah melakukan sujud, kita melakukan gerakan duduk. Dalam shalat terdapat dua jenis duduk: iftirosy (tahiyat awal) dan tawaru’ (tahiyat akhir). Hal terpenting adalah turut berkontraksinya otot-otot daerah perineum. Bagi wanita, di daerah ini terdapat tiga liang yaitu liang persenggamaan, dubur untuk melepas kotoran, dan saluran kemih. Saat tawarru’, tumit kaki kiri harus menekan daerah perineum. Punggung kaki harus diletakkan di atas telapak kaki kiri dan tumit kaki kanan harus menekan pangkal paha kanan. Pada posisi ini tumit kaki kiri akan memijit dan menekan daerah perineum. Tekanan lembut inilah yang memperbaiki organ reproduksi di daerah perineum.

Pada dasarnya, seluruh gerakan shalat bertujuan meremajakan tubuh. Jika tubuh lentur, kerusakan sel dan kulit sedikit terjadi. Apalagi jika dilakukan secara rutin, maka sel-sel yang rusak dapat segera tergantikan. Regenerasi pun berlangsung dengan lancar. Alhasil, tubuh senantiasa bugar.

Menuru penelitian Prof. Dr. Muhammad Soleh dalam desertasinya yang berjudul “Pengaruh Shalat Tahajud terhadap Peningkatan Perubahan Respon Ketahanan Tubuh Imonologik: Suatu Pendekatan Neuroimunologi” dengan desertasi itu, Soleh berhasil meraih gelar doctor dalam bidang ilmu kedokteran pada program pasca sarjana Universitas Surabaya yang dipertahankannya beberapa waktu lalu.

Shalat tahajud ternyata bukan hanya sekedar shalat tambahan (sunah muakkad), tetapi jika dilakukan secara rutin dan ikhlas akan bisa mengatasi penyakit kanker. Secara medis, shalat tahajud mampu menumbuhkan respons ketahanan tubuh (imunologi) khususnya pada imunoglobin M, G, A, dan limfositnya yang berupa persepsi serta motivasi positif. Selain itu, juga dapat mengefektifkan kemampuan individu untuk menanggulangi masalah yang dihadapi.

Selama ini, ulama melihat ikhlas hanya sebagai persoalan mental psikis. Namun, sebetulnya permasalahan ini dapat dibuktikan dengan teknologi kedokteran. Ikhlas yang selama ini dipandang sebagai misteri dapat dibuktikan secara kuantitatif melalui sekresi hormon kortisol dengan parameter kondisi tubuh. Pada kondisi normal, jumlah kortisol pada pagi hari normalnya antra 38-690 nmol/liter. Sedangkan pada malam hari atau setelah pukul 24.00, jumlah ini meningkat menjadi 69-345 nmol/liter.

“Kalau jumlah hormone kortisolnya normal, dapat diindikasikan bahwa orang tersebut tidak ikhlas karena merasa tertekan. Demikian juga sebaliknya,” ujarnya seraya menegaskan temuannya ini membantah paradigma lama yang menganggap ajaran agama Islam semata-mata dogma atau doktrin.

Menurut Dr. Soleh, orang stress biasanya rentan sekali terhadap penyakit kanker dan infeksi. Dengan melakukan tahajud secara rutin dan disertai perasaan ihklas serta tidak terpaksa, seseorang akan memiliki respon imun yang baik serta besar kemungkinan terhindar dari penyakit infeksi dan kanker. Berdasarkan perhitungan medis, shalat tahajud yang demikian menyebabkan seseorang memiliki ketahanan tubuh yang baik.

Tips Mengganti Background Blog

2010-06-17T18:14:00.000-07:00

Wuih capek juga ya latihan untuk PENSIL(Pentas Seni Islami/acara sekolah),Mhh saya binggung mau posting apa???,Bagaimana kalo kita membahas Tips Mengganti Background Blog,Mau?oke deh,boy akan memberi petunjuknya(tutorialnya)Yuk Mulai:

Mengganti warna background

untuk template minima klasik

Sign in disini
Klik Rancangan(Versi bahasa indonesia dan yang terbaru kalo dulu kan Tata Letak)
Klik menu Edit HTML
Copy seluruh kode Template,lalu paste kan di NOTEPAD dulu dan jangan lupa Backup data
Ubahlah sesuka hati anda mau merah,kuning atau hijau(lampu lalu lintas dong hehe...)(kode yang berwarna merah lah yang harus diganti/dirubah)

body {
background:#fff;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

Misalkan kalau anda ingin mengganti warna background template anda dengan warna PUTIH maka kodenya seperti ini:

body {
background:#ffffff;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

6.Klik tombol Pratinjau untuk melihat berhasil atau tidak
7.Jika berhasil klik tombol Save Template
8.Selamat background anda sudah berubah

Bagaimana warnanya cocok tidak dengan blog anda?mhh kurang cocok?bagaimana kalo kita ganti saja background anda dengan gambar?setuju?oke...

Login ke sini
Klik Rancangan(Versi bahasa indonesia dan yang terbaru kalo dulu kan Tata Letak)
Klik menu Edit HTML
Copy seluruh kode Template,lalu paste kan di NOTEPAD dulu dan jangan lupa Backup data
Lalu tambahkan embend/kode berikut(kode yang berwarna merah anda tambahkan lalu kode yang berwarna biru ganti dengan url tempat nyimpan gambar anda)

body {
background:#fff url('http://t3.gstatic.com/images?q=tbn:TgcPo1wVVrVKBM:http://profile.ak.fbcdn.net/object3/111/112/n64634898937_9732.jpg');
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

6.Klik tombol Pratinjau untuk melihat berhasil atau tidak
7.Jika berhasil klik tombol Save Template
8.Selamat background anda sudah berubah

Kalo saya pribadi tutorial ini tutorial yang mudah,Kalo saya bisa kenapa anda tidak bisa?betul tidak?hehe...

Sampai jumpa di posting berikutnya & Nice to meet you

Selamat Mencoba[Boy-Malik]

Mengatur Perataan Posting Artikel

2010-06-14T21:55:00.000-07:00

Terkadang suka binggung dengan Perataan Artikel/Posting,oke deh langsung ke TKP ajah biar gk banyak cin-cong:

Untuk menu compose

Pada menu compose sebenarnya ini lebih mudah, sebab untuk membuat perataan sudah di sediakan tool (peralatan) yang sama dengan yang ada di Microsoft Word atau Exel, icon tool nya seperti ini :

--> Untuk merubah jenis hurup yang di gunakan

--> Untuk merubah ukuran hurup (heading)

--> Untuk Menebalkan hurup

--> Untuk memiringkan hurup

--> Untuk merubah warna hurup

--> Untuk membuat link

--> Untuk membuat artikel menjadi rata kiri

--> Untuk membuat tulisan menjadi di tengah

--> Untuk membuat artikel menjadi rata kanan

--> Untuk membuat artikel menjadi rata kiri dan rata kanan

--> Untuk membuat sub bahasan oleh angka

--> Untuk membuat sub bahasan oleh bullet

--> Untuk mengecek spelling

--> Untuk memasukan gambar(upload gambar)

--> Untuk membuat artikel dalam kode HTML

--> Untuk membuat artikel dalam mode Compose (biasa)

--> Untuk me review (melihat) artikel

Cara agar artikel bisa rata kanan yaitu Highligh (blok) seluruh artikel yang di buat, lalu klik icon yang untuk rata kanan saja. Bila ingin rata kanan-kiri, rata kiri atau tengah semua, caranya ya sama yaitu tinggal Highligh (blok) seluruh artikel yang di buat, trus ya klik icon yang sobat mau pake, kelar deh. Selanjutnya ya tinggal publish, mudah bukan?

Akan tetapi bagi sobat yang memakai system Read more yang memakai kode <span class="fullpost">, memposting artikel artikel dengan memakai menu Compose sering menemui masalah di akibatkan jika di lihat pada menu Edit HTML akan muncul kode tadi di atas dalam jumlah yang banyak tanpa kita tuliskan sehingga sistem read more menjadi tidak bekerja dengan baik, oleh karena alasan tadi sistem read more yang saya ajarkan di blog ini adalah dengan memakai kode <div class="fullpost"> yang relatif lebih aman.

Untuk menu Edit HTML

Bagi sobat yang terbiasa memakai Edit HTML bisa juga membuat perataan, baik kiri, kanan, kiri-kanan, ataupun tengah semua, yaitu caranya dengan menambahkan kode HTML di awal dan akhir artikel, kodenya seperti ini :

Rata kiri :

<div align="left">

isi artikelnya di sini

</div>

Rata kanan :

<div align="right">

isi artikelnya di sini

</div>

Rata kiri-kanan :

<div align="justify">

isi artikelnya di sini

</div>

Supaya tengah semua :

<div align="center">

isi artikelnya di sini

</div>

Agar hasilnya kelihatan, saya berikan contoh dengan mengutif isi artikel di blog ini.

Contoh cara membuatnya seperti ini :

Untuk yang rata kiri :

<div align="left">
Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para sobat semua, saya menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu sobat untuk hal-hal yang baik,Terima kasih.
</div>

Maka hasilnya akan seperti ini :

Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para sobat semua, saya menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu sobat untuk hal-hal yang baik,Terima kasih.

Untuk yang rata kanan :

<div align="right">
Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para sobat semua, saya menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu sobat untuk hal-hal yang baik,Terima kasih.
</div>

Maka hasilnya akan seperti ini :

Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para sobat semua, saya menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu sobat untuk hal-hal yang baik,Terima kasih.

Untuk yang rata kiri-kanan :

<div align="justify">
Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para sobat semua, saya menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu sobat untuk hal-hal yang baik,Terima kasih.
</div>

Maka hasilnya akan seperti ini :

Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para sobat semua, saya menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu sobat untuk hal-hal yang baik,Terima kasih.

Untuk yang tengah semua :

<div align="center">
Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para sobat semua, saya menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu sobat untuk hal-hal yang baik,Terima kasih.
</div>

Maka hasilnya akan seperti ini :

Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para sobat semua, saya menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu sobat untuk hal-hal yang baik,Terima kasih.

Untuk yang bullet & numbering, ini bisa juga dilakukan :

contohnya seperti ini :

Bullet saja :

<li>Sig in di blogger dengan id sobat </li>
<br/>
<li>Klik menu layout </li>
<br/>
<li>Klik menu Edit HTML </li>

Hasilnya seperti ini :

# Sig in di blogger dengan id sobat

# Klik menu layout

# Klik menu Edit HTML

Bullet yang menjorok ke tengah :

<ul>
<li>Sig in di blogger dengan id sobat </li>
<br/>
<li>Klik menu layout </li>
<br/>
<li>Klik menu Edit HTML </li>
</ul>

Hasilnya seperti ini :

* Sig in di blogger dengan id sobat

* Klik menu layout

* Klik menu Edit HTML

Yang memakai nomor :

<ol>
<li>Sig in di blogger dengan id sobat </li>
<br/>
<li>Klik menu layout </li>
<br/>
<li>Klik menu Edit HTML </li>
</ol>

Hasilnya seperti ini :

1. Sig in di blogger dengan id sobat

2. Klik menu layout

3. Klik menu Edit HTML

Untuk warna :

<span style="color:kode warna">
tulisan yang mau di warnai
</span>

contoh untuk warna merah :

<span style="color:red">
ini contoh merah
</span>

hasilnya seperti ini :

ini contoh merah

atau bisa juga seperti ini :

<span style="color:#FD0303">
ini contoh merah
</span>

Hasilnya tetap sama :

ini contoh merah

untuk mengetahui kode warna sangat gampang, sobat bisa menggunakan bantuan program photosop, sobat tinggal sorot warna yg di kehendaki, nanti kode warnanya akan di tampilkan.

Kode-kode diatas tidak hanya berlaku pada postingan saja, akan tetapi berlaku juga pada edit HTML untuk kode template.

Saya kira cukup sekian dulu, kalau kepanjangan bosen bacanya kan ?

Selamat ngeblog buat semuanya !

Navigasi Dengan Css (2)

2010-06-10T00:33:00.000-07:00

Apa kabar sobat?akhirnya bisa posting juga,Posting pada kali ini saya ambil dari Kang rohman,Saya terdampar di PULAU yang sangat besar loh ngacok hehe...,Menu navigasi yang akan saya buat adalah dengan menggunakan css agar hasil yang di dapat bersifat flexible dan tidak kaku.
Makin Penasaran?oke deh langsung ke KANTOR POLISI:

Untuk membuat menu tersebut silahkan sobat ikuti langkah-langkah berikut ini.

Untuk template minima klasik :

Sig in di blogger

Klik menu Template

Klik menu Edit HTML

Copy seluruh kode template yang ada lalu paste pada notepad kemudian save. ini untuk backup data bila terjadi kesalahan editting

Copy kode berikut lalu paste pada style sheet css sobat, atau bila bingung simpan saja di atas kode </style>

Copy kode berikut lalu paste pada kode template seperti di bawah ini, yang berwarna hitam adalah kode aslidan warna merah adalah kode yang harus di tambahkan :

</div>

Klik tombol Pratinjau untuk melihat hasil perubahan

Jika sudah OK, klik tombol Simpan Perubahan Template

Selesai.

Untuk template minima baru :

Klik menu Layout

Klik menu Edit HTML

Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data

Klik kotak kecil di samping tulisan Expand Template Widget

Tunggu beberapa saat sampai proses selesai

Copy kode berikut lalu paste pada style sheet css sobat, atau bila bingung simpan saja di atas kode ]]></b:skin>

Copy kode berikut lalu paste pada kode template seperti di bawah ini, yang berwarna hitam adalah kode asli dan warna merah adalah kode yang harus di tambahkan :

Klik tombol Pratinjau untuk melihat perubahan

Bila sudah OK, klik tombol SIMPAN TEMPLATE

Selesai.

Agar sobat lebih faham, saya akan sedikit memberi keterangan tentang kode-kode yang saya berikan, silahkan simak :

juleha{
height:25px;
text-align: center;
}

#juleha hanyalah penamaan saja, bisa di ganti dengan apa saja yang penting nyambung dengan kode yang di bawahnya, mau ibro, samson, mau tukul juga boleh kalo sobat penggemarnya.

height:25px; kode ini adalah sebagai pengatur tingginya tombol navigasi, yang saya pakai adalah sebesar 25 pixel, boleh di ganti nilainya dan sesuaikan dengan keinginan sobat.

text-align: center; kode untuk memposisikan tombol-tombol berada di tengah-tengah, jika ingin mepet di sebelah kiri ganti kata Center dengan kata left, jika ingin mepet kanan, ganti dengan right.

#juleha a{
margin:0;
font-size:1.2em;
font-weight:bold;
letter-spacing:-1px;
background-color: #cccccc;
color: #000000;
padding-top:2px;
padding-bottom:2px;
padding-left:4px;
padding-right:4px;
}

#juleha a penamaan agar nyambung dengan kode diatasnya, dan kode-kode di yang di tulis bawahnya adalah yang akan muncul sebelum di sorot oleh mouse pengunjung blog.

font-size:1.2em; ukuran huruf yang di pake sebesar 1.2 . jika ingin lebih besar atau lebih kecil, silahkan ganti saja nilainya.

font-weight:bold; agar link yang di tulis hurufnya di cetak tebal, jika tidak mau ganti saja tulisan bold dengan tulisan normal.

background-color: #cccccc; kode untuk membuat warna latar belakang tombol. kode warna #cccccc adalah kode untuk abu-abu, silahkan sobat ganti dengan warna yang sobat sukai.

color: #000000; kode untuk warna huruf link, #000000 adalah kode warna hitam, silahkan ganti dengan warna yang sobat sukai.

#juleha a:hover{
text-decoration:none;
background-color: #0326FC;
background-repeat: repeat-x;
color:#A7FC03;
padding-top:2px;
padding-bottom:2px;
padding-left:4px;
padding-right:4px;

#juleha a:hover adalah kode yang di harapkan ketika mouse menyorot pada kode tombol yang di definisakan oleh kode-kode yang ada di kode #juleha a.

background-color: #0326FC; kode untuk membuat warna latar belakang tombol ketika mouse menyorot. kode warna #0326FC adalah kode untuk biru, silahkan sobat ganti dengan warna yang sobat sukai.

color:#A7FC03; kode untuk warna huruf link ketika mouse menyorot, #A7FC03 adalah kode warna hijau terang, silahkan ganti dengan warna yang sobat sukai.

kode pembuka juleha. Apa-apa yang di simpan di bawah kode ini, mengacu kepada apa yang di definisikan oleh kode juleha.

Link 1 kode untuk membuat link.

href="#" ganti tanda pagar (#) dengan URL atau link yang ingin sobat tuliskan. contoh : jika saya ingin membuat link ke blog ini, maka tanda pagar tadi saya ganti dengan http://kolom-tutorial.blogspot.com

target"_blank" adalah kode untuk memunculkan jendela baru ketika link di klik oleh pengunjung, bila tidak ingin ada jendela baru, maka hilangkan kode ini.

Link 1 ganti tulisan ini dengan tulisan link yang sobat inginkan. contoh : untuk menuliskan blog ini saya ganti dengan kata Kolom Tutorial

jadi kira-kira link yang tadi akan menjadi seperi ini :

<a href="http://boy-malik.blogspot.com" target="_blank">Blog-Boy</a>

adalah kode penutup buat kode si juleha.

Contoh link yang saya berikan diatas adalah sebanyak lima buah link, ini bisa sobat kurangi atau bisa juga di tambah, akan tetapi jika space yang tersedia penuh maka tombol akan secara otomatis berpindah ke bawah, oleh sebab itu sesuaikanlah dengan space yang ada.

Gimana Coy?ngerti gk?gk ngerti?comment yahh :)

Pasang Iklan

2010-06-09T23:40:00.001-07:00

Pasang iklan di blog ini RELATIF MURAH HARGANYA

Harga Iklan

Harga Satu Bulannya Hanya Rp:15.000
Harga Dua Bulannya Hanya Rp:25.000
Harga Tiga Bulannya Hanya Rp:40.000
Harga Empat Bulannya Hanya Rp:50.000
Harga Enam Bulannya Hanya Rp:70.000
Harga Tujuh Bulannya Hanya Rp:85.000
Harga Delapan Bulannya Hanya Rp:95.000
Harga Sembilan Bulannya Hanya Rp:115.000
Harga Sepuluh Bulannya Hanya Rp:125.000
Harga Sebelas Bulannya Hanya Rp:140.000
Harga Satu Tahun Hanya Rp:150.000

Bonus Iklan Sesuai Harga

Iklan Satu Sampai Dengan Sepuluh Bulan +Bonus 1 Bulan Gratis Sesudah Bayar
Iklan Sebelas Bulan +Bonus 1 Kali Deskripsi Blog Pelanggan Dengan Artikel
Iklan Dua Belas Bulan +Bonus 3 Kali Deskripsi Blog Pelanggan Dengan Artikel Dan +Bonus Satu Bulan Gratis Sesudah Bayar

Syarat-Syarat Iklan

Tidak Boleh Iklan Mengandung Sarah,Porno Dan Penghinaan

Proses Pemasangan

Pelanggan Harus Membayar Dahulu Kepada Admin Dan Mendapat Persetujuan Oleh Admin,Proses Pemasangan Paling Lama 2 Hari Sesudah Bayar Jika Lebih Dari Dua Hari Iklan Belum Dipasang Pelanggan Di Anjurkan Menghubungi Admin Lewat SMS Dan Email

Formulir Pemasangan

1.)Nama Lengkap:
2.)Nama Panggilan:
3.)Tanggal Lahir:
4.)Alamat Tempat Tinggal:
5.)Waktu/Bulan Memasang Iklan:
6.)Script/Kode HTML/Css Banner/Iklan:
7.)No.Hape:
8.)Deskripsikan Singkat Blog/Site:

Kirim Ke Email:boymalik91@gmail.com
Kirim Sms Ke:02192061169

Pembayaran

No Rekening BCA:5800179566
Pembayaran Harus Sesuai Dengan Harga

Tips Menghilangkan Border Image

2010-06-09T01:53:00.000-07:00

Bagi yang suka bangat dengan gambar atau Emoticon pada kali ini saya boy malik menerapkan suatu posting yang menjelaskan menghilangkan border gambar,berikut TRIK dari saya

Contoh gambar yang mempunyai border :

Atau seperti ini :

Bandingkan dengan yang ini :

Atau seperti ini :

Lebih asyik bukan jika gambar yang kita posting tidak mempunyai border/bingkai. Cara untuk menghilangkan border adalah sobat harus membiasakan diri menambahkan kode border="0" pada setiap gambar yang di pasang. Sebagai contoh saya mempunyai alamat gambar seperti ini :

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

Untuk membuat gambar, bisakan menyisipkan kode border="0", contohnya :

<img src="http://amen24.googlepages.com/face5.gif" border="0">

Bagaimana jika sobat sudah menambahkan kode border="0", akan tetapi gambar masih tetap mempunyai border/kotak. Nah untuk kejadian yang satu ini, maka style sheet css sobat ada yang harus di modifikasi. Silahkan ikuti langkah-langkah berikut ini!

Untuk yang memakai template klasik :

Klik menu Template

Klik menu Edit HTML

Copy seluruh kode HTML template sobat, lalu paste pada notepad, kemudian save untuk backup apabila ada kesalahan editting

Cari kode berikut pada css sobat (ini contoh saja):

.post img

Rubah angka 1 (satu) menjadi angka 0 (nol), sehingga kodenya menjadi seperti ini :

klik tombol Simpan Perubahan Template
Selesai.

Untuk yang memakai template baru :

Klik menu Layout

Klik menu Edit HTML

Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data

Klik kotak kecil di samping tulisan Expand Template Widget

Tunggu beberapa saat sampai proses selesai

Cari kode berikut pada css sobat (ini contoh saja):

.post img

Rubah angka 1 (satu) menjadi angka 0 (nol), sehingga kodenya menjadi seperti ini :

Klik tombol SIMPAN TEMPLATE

Selesai.

Bagaimana sobat, mudah-mudahan expresi sobat lebih bebas karena sudah tidak di ganggu lagi dengan adanya border.

Salam buat blogger semua.

Sumber:Di Sini

Pasang Banner di Header Blog

2010-06-07T22:22:00.000-07:00

Beberapa hari yang lalu, sempat ada salah seorang sobat meninggalkan pesan Offline pada YM milik saya yang isinya kira-kira seperti ini :

"Bagaimana caranya menyimpan banner pada header blog"

Sebuah keinginan yang saya anggap wajar bagi seorang pemilik blog, karena sudah barang tentu merupakan suatu kebahagiaan tersendiri apabila banner yang sangat kita sukai dapat di tempatkan pada blog kebanggan kita. Jika ada pertanyaan lain "apakah kita bisa mengganti atau menambahkan banner sendiri kedalam blog?" jawabannya adalah bisa, akan tetapi tentunya kita harus sedikit bercape ria mengotak-atik kode template.

Lagi-lagi karena template terbagi dua yaitu template klasik dan template baru, maka saya akan membagi dua bahasan tentang bagaimana caranya menambahkan atau mengganti banner yang ada di header.

Sebelum menginjak kepada proses editting template, langkah awal tentunya sobat harus mempunyai banner yang akan di pakai. Untuk membuat sebuah banner, sobat bisa menggunakan berbagai program desain grafis yang sobat kuasai, apakah itu photoshop, coreldraw, ataupun program-program yang lainnya yang sejenis yang penting judulnya adalah program yang bisa membuat banner.

Karena template bentuknya ratusan atau bahkan mungkin ribuan, tentunya tulisan ini tidak akan bisa mewakili untuk pemakaian template, akan tetapi mungkin akan sedikit memberi gambaran bagaimana cara menambahkan atau merubah banner yang ada di header. Sebagai proyek percontohan (kaya kerjaan saja ya pake proyek segala), saya akan mengambil contoh template Minima yang di desain oleh Douglas Bowman, dan template ini merupakan template asli blogger.

Untuk Template Klasik

Seperti yang saya sebutkan di awal bahwa langkah pertama yang dilakukan adalah membuat banner, gambar banner terserah kepada sobat, mau gambar pemandangan, laut, atau photo sobat sendiri juga boleh. Langkah kedua adalah meng upload banner tersebut, bisa di upload ke blogger sendiri atau ke hosting lain. Untuk cara upload gambar sudah saya terangkan di sini dan di sini. Sebagai contoh, saya sudah upload banner di www.photbucket.com dan mempunyai alamat banner seperti ini :

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

dan gambar bannernya seperti ini ( gambarnya dalam skala kecil):

Untuk cara penempatannya silahkan ikuti langkah-langkah berikut :

Klik menu Template

Klim menu Edit HTML

Copy seluruh kode HTML yang ada lalu paste pada notepad kemudian save, ini sebagai backup data apabila kita melakukan kesalahan dalam proses edtitting template

Sisipkan kode berikut pada style sheet css sobat. Yang warna hitam adalah kode asli dan yang merah adalah kode yang harus di tambahkan

/* Header ----------------------------------------------- */
@media all {
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
background:url(http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif) no-repeat top center;
}
}

Jika sobat ingin menghapus garis yang berada di tepi banner, sobat harus menghapus kode berikut :

Klik tombol Pratinjau untuk melihat perubahan

Jika sudah OK, klik tombol Simpan Perubahan Template

Selesai.

Untuk template baru

Bagi sobat pengguna template baru, bisa menggunakan dua cara.

Cara pertama :

Klik menu Layout

Klik menu Edit HTML

Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data

Klik kotak kecil di samping tulisan Expand Template Widget

Tunggu beberapa saat sampai proses selesai

Tambahkan kode berikut pada style sheet css sobat.Yang warna hitam adalah kode asli dan yang merah adalah kode yang harus di tambahkan

background:url(http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif)no-repeat top center;

Klik tombol Pratinjau untuk melihat perubahan yang ada

Bila sudah OK, klik tombol SIMPAN TEMPLATE

Selesai.

Langkahnya diatas sama dengan yang di template klasik.

Cara kedua :

Klik menu Layout

Klik menu Edit HTML

Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data

Klik kotak kecil di samping tulisan Expand Template Widget

Tunggu beberapa saat sampai proses selesai

cari kode berikut pada template sobat :

Klik tombol SIMPAN TEMPLATE

Nah itu langkah pertama, langkah selanjutnya adalah :

Klik menu Elemen Halaman

KLik tulisan Edit yang ada pada elemen Header

Tunggu beberapa saat

Pilih radio button yang ada di samping tulisan dari komputer Anda

Klik tombol Browse...

Pilih banner yang telah di buat yang ada pada komputer sobat

Tunggu beberapa saat sampai proses selesai.

Gambar banner sobat akan di tampilkan

Klik tombol SIMPAN PERUBAHAN

Selesai.

Nah silahkan sobat lihat hasilnya!

jika sobat merasa banner tersebut, maka sobat bisa menggantinya lagi, ulangi saja langkah-langkah di atas.

Ok sobat, mungkin pembahasan tentang cara mengganti banner sudah selesai, untuk melihat contoh blog yang sudah saya tambahkan banner silahkan klik di sini. Pembahasan diatas adalah untuk menambahkan hanya satu banner saja, apabila sobat tertarik membuat banner yang bisa berubah-ubah, silahkan baca di sini. Untuk melihat contohnya silahkan klik di sini

Selamat mencoba sobat !

Sumber:Klik Disini

BAGI YANG MAU PESEN BANNER/HEADER DENGAN YANG AHLINYA KLIK GAMBAR DI BAWAH INI

Jasa Pembuatan Header/Banner

2010-06-07T02:16:00.001-07:00

Alhamdulillah,Akhirnya kini boy-malik.blogspot.co m Meluncurkan JASA PEMBUATAN HEADER/BANNER,Tenang kami akan menghargai dengan sangat MURAH & TERJANGKAU,Berikut Harga Pembuatan HEADER Blog:

Harga Pembuatan HEADER Blog
1.)Harganya $1 Atau SENILAI Rp.10.000

Harga Pembuatan BANNER Blog

1.)Harganya $0,5 Atau SENILAI Rp.5.000

Berminat?Silahkan Kontak/Hubungi Kami:
1.)Email Kami: boymalik91@gmail.com (Email)
2.)Sms/Telepon Ke No: 02192061169 (Hape)

Pembayaran Melalui:
1.)No Rekening:5800179566 (Cash)
2.)Kirim Pulsa Ke No:02192061169 (Pulsa)

Pembayaran Harus Sesuai Dengan Harga

Proses Pekerjaan:
1.)Proses bekerja membuat HEADER/BANNER jika kami telah MENDAPAT Uang nya
2.)Proses Bekerja akan Memakan waktu sekitar 1 s/d 2 hari Jika Lebih dari dua hari Silahkan Kontak Kami

MURAH BUKAN?Tunggu Apa Lagi?Cepat PESANNNN !

Berikut Contoh Header Bikinan Saya:

Berikut Contoh BANNER Bikinan Saya:

Tukar Link

2010-06-07T00:28:00.000-07:00

Untuk mempererat TALI SILATURAHMI kita sebagai seorang BLOGGER,Boy Malik(ADMIN BLOG BOY)mengadakan TUKAR LINK,Tukar link ini bersifat UMUM jadi jika kalian mau bertukar LINK dengan blog ini silahkan isi kolom di bawah ini:

Pertama Kalian HARUS Menaruh Banner Kami Di Blog Kalian !

Or

boy malik

Berikut Daftar Link Teman Kami:

Kontak Kami

2010-06-05T12:39:00.001-07:00

Melaporkan perbuatan SPAM,SARAH,Dll Pada SM kami,Email Admin,Keperluan kepada ADMIN,Penyalahgunaan,Sewenang-wenang,Dll SEMUA DILAPORKAN DI KOLOM DIBAWAH INI:

Pasang Link di New Blogger Template

2010-06-05T12:20:00.000-07:00

Memiliki beberapa pertanyaan yang di ajukan beberapa sobat, rupanya masih ada yang berkeinginan lebih dalam hal membuat link walaupun sudah saya posting sampai dua artikel, terutama bagi yang memakai template baru alias new blogger template. Untuk memenuhi hasrat beliau-beliau ini, sengaja saya posting kembali mengenai membuat link dan mudah-mudahan dengan adanya postingan ini dapat menjawab beberapa keinginan yang belum terjawabkan.

Ok, saya mulai dengan membuat link yang bisa memunculkan window baru. saya ambil contoh blog yang ingin saya link sebanyak lima buah, yaitu :

http://rubrik-elektronik.blogspot.com

http://www.rohman24.co.nr

http://jaya-example.blogspot.com

http://user-online.blogspot.com

http://amen24.googlepages.com/koded%27treemenu

Untuk membuat kode link yang arah vertikal seperti ini :

<a href="http://rubrik-elektronik.blogspot.com" target="_blank">Rubrik Elektronik</a>
<br/>
<a href="http://www.rohman24.co.nr" target="_blank">Free blog template</a>
<br/>
<a href="http://jaya-example.blogspot.com" target="_blank">Rotating banner blog</a>
<br/>
<a href="http://user-online.blogspot.com" target="_blank">User Online status</a>
<br/>
<a href="http://amen24.googlepages.com/koded%27treemenu" target="_blank">Kode menu d tree</a>

Hasilnya akan seperti ini :

Rubrik Elektronik
Free blog template
Rotating banner blog
User Online status
Kode menu d tree

kode <br/> yang saya tuliskan di atas merupakan kode atau tag untuk memindahkan link ataupun tulisan berpindah satu line break kebawah. Jika sobat tidak memasang kode/tag tersebut, walaupun di tulis berjauhan ke bawah hasilnya akan berdempetan kepinggir. satu kode/tag <br/> adalah satu kali link berpindah kebawah, jika sobat ingin jaraknya lebih lebar, maka tambahkan tag tersebut beberapa kali, misal <br/><br/>, atau <br/><br/><br/>, dan bila ingin lebih jauh lagi ya tambahkan yang banyak.

Untuk membuat kode link yang arah horizontal seperti ini :

<a href="http://rubrik-elektronik.blogspot.com" target="_blank">Rubrik Elektronik</a>
 
<a href="http://www.rohman24.co.nr" target="_blank">Free blog template</a>
 
<a href="http://jaya-example.blogspot.com" target="_blank">Rotating banner blog</a>
 
<a href="http://user-online.blogspot.com" target="_blank">User Online status</a>
 
<a href="http://amen24.googlepages.com/koded%27treemenu" target="_blank">Kode menu d tree</a>

Maka hasilnya akan seperti ini :

Rubrik Elektronik Free blog template Rotating banner blog User Online status Kode menu d tree

kode yang saya tuliskan di atas merupakan kode untuk memindahkan link ataupun tulisan berpindah satu spasi ke samping. Jika sobat tidak memasang kode tersebut, walaupun di tulis berjauhan ke samping, hasilnya akan tetap berdempetan. satu kode adalah satu kali link berpindah ke samping, jika sobat ingin jaraknya lebih lebar, maka tambahkan kode tersebut beberapa kali, misal , atau , dan bila ingin lebih jauh lagi ya tambahkan yang banyak.

Mudah-mudahan agak sedikit jelas. Ok, kita lanjut. Sempat ada yang menanyakan juga tentang yang memakai variasi abjad supaya terlihat lebih menarik. Kira-kira jawabannya melalui contoh saja.

Ambil contoh blog yang ingin di link adalah seperti berikut ini :

http://sncepuspiritualsciencequantum.blogspot.com --> Abu Amin

http://adry-fx.blogspot.com --> Adryy-fx

http://belati.blogspot.com --> Belati

http://benhardleroy.blogspot.com --> Benhard Journey

http://melileagroup.blogspot.com --> Capunk

http://catatanpojok.blogspot.com --> Catatan pojok

Untuk membuat link yang arah vertikal seperti ini :

<b>:::A:::</b>
<br/>
<a href="http://sncepuspiritualsciencequantum.blogspot.com" target="_blank">Abu Amin</a>
<br/>
<a href="http://adry-fx.blogspot.com" target="_blank">Adryy-fx</a>
<br/><br/>

<b>:::B:::</b>
<br/>
<a href="http://belati.blogspot.com" target="_blank">Belati</a>
<br/>
<a href="http://benhardleroy.blogspot.com" target="_blank">Benhard Journey</a>
<br/><br/>

<b>:::C:::</b>
<br/>
<a href="http://melileagroup.blogspot.com" target="_blank">Capunk</a>
<br/>
<a href="http://catatanpojok.blogspot.com" target="_blank">Catatan pojok</a>

Maka hasilnya akan seperti ini :

:::A:::
Abu Amin
Adryy-fx

:::B:::
Belati
Benhard Journey

:::C:::
Capunk
Catatan pojok

Untuk membuat link yang arah horizontal seperti ini :

<b>:::A:::</b>
  
<a href="http://sncepuspiritualsciencequantum.blogspot.com" target="_blank">Abu Amin</a>
  
<a href="http://adry-fx.blogspot.com" target="_blank">Adryy-fx</a>
  

<b>:::B:::</b>
  
<a href="http://belati.blogspot.com" target="_blank">Belati</a>
  
<a href="http://benhardleroy.blogspot.com" target="_blank">Benhard Journey</a>
  

<b>:::C:::</b>
  
<a href="http://melileagroup.blogspot.com" target="_blank">Capunk</a>
  
<a href="http://catatanpojok.blogspot.com" target="_blank">Catatan pojok</a>

maka hasilnya akan seperti ini :

:::A::: Abu Amin Adryy-fx :::B::: Belati Benhard Journey :::C::: Capunk Catatan pojok

Pemakaian tag <b>...</b> adalah agar karakter yang ada diantara tag tersebut menjadi tebal. Pemakaian tulisan :::A::: adalah karakter biasa yang ada di keyboard, jika ingin berbeda tinggal cari karakter lain yang menurut sobat lebih menarik.

Ada juga variasi lain agar tampak lebih menarik yaitu menambahkan bulatan.

contoh untuk arah vertikal :

<b><< A >></b>
<br/>
• <a href="http://sncepuspiritualsciencequantum.blogspot.com" target="_blank">Abu Amin</a>
<br/>
• <a href="http://adry-fx.blogspot.com" target="_blank">Adryy-fx</a>
<br/><br/>

<b><< B >></b>
<br/>
• <a href="http://belati.blogspot.com" target="_blank">Belati</a>
<br/>
• <a href="http://benhardleroy.blogspot.com" target="_blank">Benhard Journey</a>
<br/><br/>

<b><< C >></b>
<br/>
• <a href="http://melileagroup.blogspot.com" target="_blank">Capunk</a>
<br/>
• <a href="http://catatanpojok.blogspot.com" target="_blank">Catatan pojok</a>

Maka hasilnya akan seperti ini :

<<>>
• Abu Amin
• Adryy-fx

<<>>
• Belati
• Benhard Journey

<<>>
• Capunk
• Catatan pojok

Untuk arah horizontal :

<b><< A >></b>
 
• <a href="http://sncepuspiritualsciencequantum.blogspot.com" target="_blank">Abu Amin</a>
  
• <a href="http://adry-fx.blogspot.com" target="_blank">Adryy-fx</a>
  

<b><< B >></b>
 
• <a href="http://belati.blogspot.com" target="_blank">Belati</a>
  
• <a href="http://benhardleroy.blogspot.com" target="_blank">Benhard Journey</a>
  

<b><< C >></b>
 
• <a href="http://melileagroup.blogspot.com" target="_blank">Capunk</a>
  
• <a href="http://catatanpojok.blogspot.com" target="_blank">Catatan pojok</a>

Hasilnya akan seperti ini :

<<>> • Abu Amin • Adryy-fx <<>> • Belati • Benhard Journey <<>> • Capunk • Catatan pojok

Bagaimana lebih menarik bukan?

Jika sobat mempunyai icon yang berukuran kecil dan ingin di tambahkan di depan link, ini bisa di lakukan dengan hanya mengganti kode • diatas dengan kode gambar yang sobat miliki. Sebagai contoh saya memiliki gambar dalam bentuk bulatan dan mempunyai alamat gambar sebagai berikut :

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

Untuk menampilkan gambar ini tentu dengan kode untuk menampilkan gambar, yaitu :

<img src="http://i162.photobucket.com/albums/t253/rohman24/Changing_colors.gif">

hasilnya akan seperti ini :

Jika melihat dari bentuknya, sepertinya terlalu besar maka saya akan mengakalinya dengan menambahkan kode untuk lebar dan tinggi gambar, maka kodenya misalkan jadi seperti ini :

<img src="http://i162.photobucket.com/albums/t253/rohman24/Changing_colors.gif" width="12" hight="12" border="0">

hasilnya akan seperti ini :

Nah, tugas sobat hanya mengganti kode • diatas dengan kode ini :

misalkan :

<img src="http://i162.photobucket.com/albums/t253/rohman24/Changing_colors.gif" width="10" hight="10" border="0"> <a href="http://sncepuspiritualsciencequantum.blogspot.com" target="_blank">Abu Amin</a>

Maka hasilnya akan seperti ini :

Abu Amin

Untuk membuat gambar serta cara upload sudah saya terangkan pada postingan terdahulu, silahkan baca saja ya.

Ada juga pertanyaan dari mba Ati mengenai cara pembuatan link gambar yang arah horizontal, jawaban saya, mba tinggal buat link untuk gambar dan menaruh kode di antara gambar link tadi. misal saya punya alamat gambar butto seperti ini :

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

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

Nah mba tinggal buat agar link gambar, bisa link ketulisan yang ada di blog mba atau mau link ke blog lain juga bisa, tinggal menuliskan alamat URL yang du ju oleh link tersebut, contoh jika saya ingin menghubungkan gambar button dengan blog milik saya yang lain :

Hasilnya akan seperti ini :

jika ingin gambar buttonnya banyak, tinggal tambahkan saja dan jangan lupa sisipkam kode agar ada jarak antara buttonnya.

Bagaimana sobat, sudah cape bacanya? pasti cape karena panjang banget, apalagi saya yang waktu ngetik postingan ini ampe lima jam depan komputer dan lebih sedihnya lagi kita belum sampe ke topik bahasan utama yakni memasukan kode link-link yang telah saya contohkan diatas ke dalam blog.

Yoi...sobat!!! Sekarang tiba waktunya kita memasukan kode-kode link yang telah kita buat kedalam blog. Dan tentunya seperti judul artikel diatas, langkah-langkah berikut berlaku bagi yang memakai template baru alias new blogger template :

Sig in di blogger dengan id sobat

Klik menu Layout

Klik menu Elemen Halaman

Klik tulisan Tambahkan sebuah Elemen Halaman

Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/javaScript, ingat jangan menggunakan yang untuk membuat daftar link

Beri judul link yang sobat kehendaki. contoh : link temanku :

Copy kode-kode link yang telah sobat buat lalu paste pada kotak yang tersedia

Klik tombol SIMPAN PERUBAHAN

Pindahkan elemen yang baru saja pada tempat yang sobat kehendaki

Klik tombol SIMPAN

Selesai.

Akhirnya selesai juga postingan ini. Mudah-mudahan penjelasan diatas mudah untuk di mengerti.

Selamat mencoba !

Sumber:Disini

Cara membuat kategori (label)

2010-06-01T04:25:00.000-07:00

Menanggapi beberapa pertanyaan dari para sobat yang di ajukan baik melalui shoutbox, kotak komentar dan bahkan ada yang melalui yahoo messenger menyoal tentang bagaimana cara membuat kategori dari artikel-artikel yang telah di posting. Memang betul, tentu dengan adanya pengkategorian atau pengelompokan artikel yang telah di posting oleh pemilik blog dapat lebih mempermudah bagi para pembaca untuk memilih artikel mana yang ingin dibaca.

Di blogger.com fasilitas ini sebenarnya sudah di sediakan, akan tetapi walaupun fasilitas tersebut telah tersedia tentu saja jika kita tidak mengetahui cara menggunakannya akan menjadi tidak berguna. Untuk membuat kategori, di blogger.com di kenal dengan istilah Label. Dengan adanya fasilitas ini kita sebagai pemilik blog hanya tinggal mengisi kotak label yang di sedikan pada setiap posting artikel, sangat simpel dan sederhana.

Agar tidak membingungkan, silahkan sobat lihat pada akhir postingan artikel ini. Disana ada tulisan seperti ini : Labels : Blog tutorial, membuat label. Nah berarti postingan ini termasuk ke dalam dua kategori, yaitu kategori Blog tutorial dan kategori membuat label. Untuk melihat fungsi dari label ini silahkan sobat klik label yang bertuliskan Blog tutorial, maka secara otomatis seluruh postingan yang saya beri label Blog tutorial akan di tampilkan dan siap untuk di baca oleh pengunjung.

Bagaimana cara membuat label?

Untuk membuat sebuah kategori atau label, sobat hanya tinggal mengisi kotak kosong di samping tulisan Label untuk postingan ini : (karena sekarang blogger sudah ada yang berbahasa indonesia) yang berada di bawah kotak tempat membuat artikel. Isi kotak tersebut dengan kategori yang kira-kira cocok untuk postingan yang kita buat. Contoh : liburan musim dingin. Satu postingan tidak hanya terpatok hanya pada satu kategori saja, akan tetapi satu postingan bisa mempunyai beberapa kategori. untuk membuatnya tinggal di pisahkan dengan tanda koma ( , )saja, misal untuk postingan artikel blog ini ada yang ber label Blog tutorial, blog tools, aksesori blog, karena postingan tersebut memang cocok dan masuk kedalam ketiga kategori tersebut.

Apakah kategori (label) bisa di tampilkan di sidebar?

Untuk sobat para pengguna template baru, Label (kategori) bisa di tampilkan di sidebar, dan biasanya element label ini sudah tersedia ketika baru memasang template. Jika element label belum tersidia, sobat bisa membuatnya sendiri, silahkan ikuti langkah - langkah berikut ini :

Sig in di blogger dengan id sobat

Klik menu Layout

Klik menu Elemen Halaman

Klik tulisan Tambahkan sebuah Elemen Halaman

Klik tombol yang bertuliskan TAMBAHKAN KE BLOG yang berada di bawah tulisan Label

Tulisan Labels di samping tulisan Judul bisa sobat rubah menjadi Kategori jika sobat mau merubahnya

Pilih radio button yang sobat inginkan di samping tulisan Menyortir, Alfabetik : jika kategori ingin di tampilkan sesuai dengan abjad alfabetik ( dari A --> Z ), Berdasarkan Frekuensi : jika kategori ingin ditampilkan sesuai dengan banyaknya label (kategori)

Klik tombol yang bertuliskan SIMPAN PERUBAHAN

Selesai.

Sangat mudah bukan?

Sedikit pengumuman, karena blogger sekarang sudah ada yang berbahasa indonesia, maka mulai sekarang dalam memandu mengikuti dengan memakai yang berbahasa indonesia.

Selamat mencoba !

Sumber:Disini

Random Banner Header

2010-05-27T02:30:00.000-07:00

Menjawab pertanyaan Coretan beberapa hari yang lalu yang di ajukan melalui shoutbox mengenai cara membuat random banner header atau gambar banner yang ada di header bisa bergantian atau berubah-berubah. Sepertinya memang lebih menarik apabila banner yang ada di header bisa bergantian sehingga suasana akan lebih fresh karena tidak monoton seperti blog saya ini , tapi tidak apa-apa, mungkin suatu hari nanti blog inipun headernya bisa bergantian .

Untuk membuat random banner ada beberapa langkah yang harus sobat lakukan, yaitu :

Langkah pertama

Langkah pertama yang harus dilakukan tentunya sobat wajib membuat beberapa banner, bisa tiga, empat, lima, dan seterusnya tergantung dari keinginan sobat. Untuk membuatnya sobat bisa menggunakan program-program semisal adobe photoshop atau coreldraw serta kawan-kawannya yang lain. Akan tetapi karena saya tidak terlalu mahir masalah program untuk desain gambar, maka tidak akan saya terangkan cara pembuatannya. Jika sobat ingin berkonsultasi mengenai program adobe photoshop, silahkan kunujungi http://jaloee.blogspot.com miliknya kang jaloee, beliau ini pakarnya kalau masalah photoshop.

langkah kedua

Langkah kedua yang harus dilakukan adalah mengupload banner-banner tersebut pada hosting tempat menyimpan gambar, saya ambil contoh www.photobucket.com untuk cara upload pada situs ini sudah saya terangkan pada postingan terdahulu, jika masih bingung silahkan klik di sini.

Jika proses upload selesai, copy URl address banner-banner tersebut lalu paste pada program notepad guna nanti untuk di masukan kedalam kode/script yang akan saya berikan.

Langkah ketiga

Langkah ketiga yaitu memasukan script kedalam kode template yang sobat miliki. Script dasarnya adalah :

   <script type="text/javascript">
var banner= new Array()
banner[0]="bannerURL0"
banner[1]="bannerURL1"
banner[2]="bannerURL2"
banner[3]="bannerURL3"
banner[4]="bannerURL4"
banner[5]="bannerURL5"
banner[6]="bannerURL6"
banner[7]="bannerURL7"
banner[8]="bannerURL8"
banner[9]="bannerURL9"
var random=Math.floor(10*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat top left;');
document.write(" }");
document.write("</style>");
</script>

Terlihat diatas bahwa jumlah banner yang diberikan adalah 10 buah, akan tetapi jumlah ini tidak mutlak yaitu berapa saja yang sobat inginkan yang penting pada kode var random=Mat. jumlahnya harus sesuai dengan jumlah banner.

Lagi-lagi karena template blogger ada dua yaitu template klasik dan template baru maka untuk menempatkan kode/script akan berbeda, Sehingga pembahasannya pun akan saya bagi menjadi dua bagian. Sebelumnya saya akan memberikan contoh kode yang memuat banner yang sudah saya upload dan masing-masing memiliki URL addres sebagai berikut :

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

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

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

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

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

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

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

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

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

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

dan contoh bannernya adalah sebagai berikut (gambar diperkecil) :

Contoh script dari banner-banner ini adalah :

   <script type="text/javascript">
var banner= new Array()
banner[0]="http://i162.photobucket.com/albums/t253/rohman24/banner_1.gif"
banner[1]="http://i162.photobucket.com/albums/t253/rohman24/banner_2.gif"
banner[2]="http://i162.photobucket.com/albums/t253/rohman24/banner_3.gif"
banner[3]="http://i162.photobucket.com/albums/t253/rohman24/banner_4.gif"
banner[4]="http://i162.photobucket.com/albums/t253/rohman24/banner_5.gif"
banner[5]="http://i162.photobucket.com/albums/t253/rohman24/banner_6.gif"
banner[6]="http://i162.photobucket.com/albums/t253/rohman24/banner_7.gif"
banner[7]="http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif"
banner[8]="http://i162.photobucket.com/albums/t253/rohman24/banner_9.gif"
banner[9]="http://i162.photobucket.com/albums/t253/rohman24/banner_10.gif"
var random=Math.floor(10*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat top left;');
document.write(" }");
document.write("</style>");
</script>

Jika script diatas tulisannya terlalu kecil silahkan klik di sini untuk melihat tulisan yang normal.

Untuk caranya silahkan ikuti langkah-langkah berikut ini.

Untuk Template klasik

Sig in di blogger dengan id sobat

Klik menu Template

Klik menu Edit HTML

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

Copy kode berikut ini lalu paste di bawah kode <div id='header'> (biasanya)

   <script type="text/javascript">
    var banner= new Array()
    banner[0]="http://i162.photobucket.com/albums/t253/rohman24/banner_1.gif"
    banner[1]="http://i162.photobucket.com/albums/t253/rohman24/banner_2.gif"
    banner[2]="http://i162.photobucket.com/albums/t253/rohman24/banner_3.gif"
    banner[3]="http://i162.photobucket.com/albums/t253/rohman24/banner_4.gif"
    banner[4]="http://i162.photobucket.com/albums/t253/rohman24/banner_5.gif"
    banner[5]="http://i162.photobucket.com/albums/t253/rohman24/banner_6.gif"
    banner[6]="http://i162.photobucket.com/albums/t253/rohman24/banner_7.gif"
    banner[7]="http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif"
    banner[8]="http://i162.photobucket.com/albums/t253/rohman24/banner_9.gif"
    banner[9]="http://i162.photobucket.com/albums/t253/rohman24/banner_10.gif"
    var random=Math.floor(10*Math.random());
    document.write("<style>");
    document.write("#header {");
    document.write(' background:url("' + banner[random] + '") no-repeat top left;');
    document.write(" }");
    document.write("</style>");
    </script>

Klik tombol Save Template Changes

Selesai.

Untuk Template baru

Klik menu layout

Klik menu Page Elements

Klik tulisan Add a Page Element

Klik tombol ADD TO BLOG di bawah tulisan HTML/JavaScript

Copy paste kode berikut kedalamnya

   <script type="text/javascript">
    var banner= new Array()
    banner[0]="http://i162.photobucket.com/albums/t253/rohman24/banner_1.gif"
    banner[1]="http://i162.photobucket.com/albums/t253/rohman24/banner_2.gif"
    banner[2]="http://i162.photobucket.com/albums/t253/rohman24/banner_3.gif"
    banner[3]="http://i162.photobucket.com/albums/t253/rohman24/banner_4.gif"
    banner[4]="http://i162.photobucket.com/albums/t253/rohman24/banner_5.gif"
    banner[5]="http://i162.photobucket.com/albums/t253/rohman24/banner_6.gif"
    banner[6]="http://i162.photobucket.com/albums/t253/rohman24/banner_7.gif"
    banner[7]="http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif"
    banner[8]="http://i162.photobucket.com/albums/t253/rohman24/banner_9.gif"
    banner[9]="http://i162.photobucket.com/albums/t253/rohman24/banner_10.gif"
    var random=Math.floor(10*Math.random());
    document.write("<style>");
    document.write("#header {");
    document.write(' background:url("' + banner[random] + '") no-repeat top left;');
    document.write(" }");
    document.write("</style>");
    </script>

Klik tombol SAVE CHANGES

Selesai.

Sekedar tambahan (padahal masih banyak ), kode diatas adalah sekedar contoh, silahkan ganti address bannernya dengan yang di miliki sobat.

Mungkin ada beberapa template yang di pakai sobat saat ini banner headernya tidak sesuai dengan keinginan sobat, sebenarnya ukuran tersebut bisa kita ganti. Contoh untuk template minima sebagai berikut :

 @media all { #header { width:660px; margin:0 auto 10px; border:1px solid #ccc; }

Pada kode diatas terlihat bahwa untuk lebar banner header sebesar 660p(width:660px;), nilai tersebut bisa kita rubah sesuai dengan keinginan. Dan untuk tinggi dari banner header tidak di definisikan, nah agar banner kita sesuai dengan keinginan maka kita harus menyelipkan kode tambahan sebagai definisi, contoh lebar yang di inginkan adalah sebesar 150px, maka kode yang di tambahkan adalah height:150px; sehingga kode di atas menjadi seperti ini :

 @media all {
#header {
width:660px;
height:150px;
margin:0 auto 10px;
border:1px solid #ccc;
}

Untuk masing-masing template tentunya akan sangat berbeda, akan tetapi untuk template milik blogger, biasanya untuk bagian header di beri nama #header.

Untuk melihat contoh nyata dari efek script diatas, saya sudah membuat satu blog sebagai percontohan, blog tersebut sudah di pasang 10 banner seperti yang saya terangkan di atas, untuk melihat perubahannya sobat harus mengklik susuatu agar layar browser menjadi berubah baru, saya beri contoh dengan mengklik judul arsip atau yang lainnya. Untu melihat contoh silahkan lihat di sini

Selamat mencoba !!!!

Sumber:Kolom-Tutorial

Text Berjalan di Bar menu

2010-05-26T02:32:00.000-07:00

Sobat BANG MUSIK 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 :

Klik menu Template

klik menu Edit HTML

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

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>

Klik tombol Save Template Changes

Selesai.

Untuk template baru silahkan ikuti langkah-langkah berikut ini :

Klik menu Layout

Klik menu Edit HTML

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

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

Tunggu beberapa saat sampai proses selesai

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>

Klik tombol SAVE TEMPLATE

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 !!!

Sumber:disini

Pasang Recent Comments

2010-05-25T03:31:00.000-07:00

Kemarin lusa saya iseng-iseng buka email, dan ternyata ada kiriman email dari salah satu sobat saya yaitu sobat Aulia. Sobat Aulia ini menanyakan perihal cara membuat Recent comment atau komentar terbaru untuk new blogger template. Sebenarnya pertanyaan itu sudah saya jawab melalui email juga, akan tetapi saya pikir-pikir ada baiknya kalau topik ini saya bahas di blog ini, barangkali ada di antara sobat sekalian yang sama-sama tertarik ingin memasang Recent comment di sidebar blog sobat.

Untuk membuat recent comment pada new blogger template tidaklah sulit, karena saat ini sudah ada Recent comments widget creator dari hans serta hackosphere yang bekerja secara otomatis, tugas sobat hanya login di blogger.com, pilih blog yang mau dipasang trus add widget, selesai. Sangat gampang tanpa harus bersusah payah menambahkan berbagai kode kedalam template sobat. Untuk membuatnya silahkan sobat klik tombol di bawah ini :

Rasanya kurang seru kalau artikelnya cuma begitu ya.
Ok, setelah sobat klik tombol diatas, maka nanti akan muncul gambar seperti ini :

Agar lebih jelas, silahkan ikuti langkah-langkah berikut ini :

Silahkan klik kotak di atas atau bisa juga klik di sini

Tulis judul Recent Comments dengan yang sobat inginkan. contoh : "komentar terbaru". atau biarkan saja juga boleh

Ganti nama beautifulbeta di samping tulisan http dengan nama blog sobat. contoh : kolom-tutorial

Tulis angka banyaknya komentar yang diinginkan di samping tulisan Number of comments

Beri tanda centang pada kotak di samping tulisan Show comment date jika komentarnya ingin ada tanggalnya

Beri tanda centang pada kotak di samping tulisan Show posttitle jika komentarnya ingin ada judul postingan

Tulis jumlah karakter hurup yang diinginkan di samping tulisan Summary size

Untuk styling silahkan pilih yang mana saja

Klik tombol bertuliskan Customize

Klik tombol bertuliskan Add Widget To My blog

Silahkan sign in dengan id sobat

Pilih blog sobat yang ingin ada Recent comments nya di samping tulisan select a blog

Klik tombol bertuliskan ADD WIDGET

Secara otomatis Recent comment widget sudah di tambahkan ke blog sobat

Pindahkan elements Recent comment yang baru dibuat pada tempat yang sobat suka

Selesai.

Bagaimana sobat, gampangkan? so pasti gampang donk

Tapi ada satu lagi kabar gembira nih buat para sobat. Bagi sobat yang blog nya memakai bahasa indonesia tentu saja akan sedikit janggal, karena recent comment diatas memakai bahasa inggris. Apakah recent comments tersebut bisa menjadi bahasa Indonesia? jawaban nya bisa. Jika sobat tertarik silahkan ikuti langkah-langkah berikut ini :

Klik menu Layout pada blog yang ingin di rubah

Klik menu Page Elements

Klik tulisan Edit pada element Recent Comments yang tadi dibuat

Akan muncul kode-kode seperti ini :

  <script style="text/javascript" src="http://home.planet.nl/~hansoosting/downloads/showrecentcomments2.js">
</script><script style="text/javascript">var numcomments = 5;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script> <script src="http://YourBlogName.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

http://amen24.googlepages.com/showrecentcomments.js

Klik tombol SAVE CHANGES

Selesai.

Untuk melihat contoh Recent comments yang berbahasa indonesia, silahkan klik disini. Jangan lupa klik di sini juga ya

Selamat mencoba !!!!

Sumber:Disini

Cara membuat Favicon (2)

2010-05-24T02:19:00.000-07:00

Pada zaman dahulu kala, Boy Malik pernah membahas bagaimana cara menganti Favicon yang saya posting di sini. Karena zaman selalu berubah, maka postingan tersebut sudah tidak relevan lagi untuk di baca atau dengan kata lain sudah kadaluarsa. Walaupun begitu sebenarnya kang rohman sudah memposting artikel terbaru yang saya posting di sini, namun karena tidak semua orang suka berkunjung ke blog saya yang satu ini, maka artikel tersebut luput untuk di baca. Oleh karenanya, kali ini kang rohman coba posting saja di blog ini.

Bagi anda yang masih bingung apa sih Favicon itu? Favicon (favourite icon) adalah icon kecil yang berada di samping alamat blog atau website anda. Apabila anda membuat blog di Blogger.com alias blogspot, maka favicon yang berada di samping alamat URL anda adalah berupa favicon blogger. Berikut screenshot nya :

Apakah favicon tersebut bisa di ganti dengan favicon milik anda? jawabannya adalah bisa. Berikut adalah contoh favicon blogger yang sudah di ganti :

Untuk mengganti favicon tersebut, anda bisa melakukan langkah-langkah seperti berikut :

Pertama buatlah sebuah gambar yang akan di jadikan sebagai favicon, contoh seperti gambar di bawah ini :
Setelah itu anda harus mengubah gambar tersebut kedalam bentuk gambar icon. Untuk hal tersebut, anda bisa menggunakan tool Favicon Generator, silahkan kunjungi situs http://www.favicongenerator.com
Klik pada tombol Browse...
Masukan gambar yang tadi dibuat untuk di ubah menjadi format icon
Klik pada tombol Generate Favicon.
Setelah proses selesai, klik pada Click Here to Download your favicon.
Save ke komputer anda.
Langkah selanjutnya adalah anda harus meng upload Favicon yang tadi ke tempat hosting gamabar, contoh adalah ke Yahoo! Geocities. Belum tahu bagaimana cara meng upload gambar ke Yahoo! Geocities? heuheuheu... sok atuh di baca dulu postingan kang rohman yang ini!
Sekarang saya asumsikan bahwa anda sudah mempunyai alamat URL dari favicon anda. sebagai contoh, saya mempunyai sebuah alamat URL seperti ini :

http://www.geocities.com/amn_tea/favicon.ico
Anda harus mengubah alamat URL favicon anda menjadi seperti ini :

<link rel="shortcut icon" href="http://www.geocities.com/amn_tea/favicon.ico"/>
Langkah selanjutnya adalah silahkan login ke blogger dengan ID anda.
Klik pada Tata Letak.
Klik Edit HTML.
Silahkan cari kode </head>(posisinya hampir paling atas, jadi jangan jauh-jauh nyari ke bawah dhenk).
Simpan kode favicon yang tadi persis di atas kode </head>. Contoh :

<link rel="shortcut icon" href="http://www.geocities.com/amn_tea/favicon.ico"/>
Klik tombol Simpan Template.
Selesai. Sekarang anda sudah mempunyai favicon di alamat URL blog anda.

Bagi anda yang masih menggunakan browser IE6, favicon anda tidak akan langsung terlihat, coba di bookmark dulu alamatnya. Berbeda jika anda menggunakan browser firefox, opera dan yang lainnya, favicon anda sudah langsung dapat di nikmati.

Kang Rohman

Menu Dropdown dengan JavaScript (2)

2010-05-22T16:20:00.000-07:00

Melanjutkan Postingan kemarin yaitu tentang membuat menu dropdown dengan JavaScript. Pada postingan yang lalu telah di bahas tentang membuat menu dropdown pada template baru, maka pada postingan kali ini akan di bahas mengenai cara pembuatan pada template klasik.

Agar tidak terlalu monoton, pada pembuatan dropdown kali ini akan saya beri sentuhan baru, yaitu pemakaian background yang berbeda. Jika pada postingan yang lalu saya memberikan contoh background banner seperti di bawah ini :

Maka kali ini saya akan memberi contoh banner seperti ini :

Dan contoh menu dropdown yang akan di bahas adalah seperti demo di bawah ini :

Agar tidak terlalu menyita space halaman karena penuh dengan kata-kata yang membingungkan, kita langsung saja pada topik pembahasan. Untuk membuat menu dropdown pada template klasik, silahkan ikuti langkah-langkah berikut ini :

Langkah pertama adalah membuat tiga banner untuk background tulisan, banner ini bisa dibuat dengan program design & grafik semisal Adobe photoshop atau Corel Draw ataupun program-program lainya yang sejenis.

Langkah kedua adalah mengupload banner-banner yang telah sobat buat, salah satu contoh adalah dengan menggunakan jasa situs www.photobucket.com. Untuk cara menguploadnya saya sudah terangkan, jika belum faham silahkan klik di sini. Saya ambil contoh, banner yang telah saya upload mempunyai URL address sebagai berikut :

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

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

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

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

Klik menu Template

Klik menu Edit HTML

Copy seluruh kode template lalu paste pada program notepad, ini untuk berjaga-jaga apabila terjadi kesalahan dalam proses editting kode template

Tambahkan kode berikut di bawah kode <head> dan sebelum kode </head>, atau jika ingin lebih mudah simpan di bawah kode <title><$BlogPageTitle$></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>

Masukan kode berikut diatas kode ]]></b:skin>

   .raden{
background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava6.gif');
text-align:center;
width:175px;
font-family: georgia, Helvetica, sans-serif;
padding-left:5px;
padding-right:5px;
padding-top:5px;
padding-bottom: 5px;
display:block;
text-decoration: none;
color: #F6E151;
}

.ogah{
background-image:url('http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif');
text-align:center;
width:175px;
font-family: georgia, Helvetica, sans-serif;
padding-left:5px;
padding-right:5px;
padding-top:8px;
padding-bottom: 5px;
display:block;
text-decoration: none;
color: ##FAF705;
height: 18px;
}

.ogahniye{
background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava4.gif');
text-align:center;
width:175px;
font-family: georgia, Helvetica, sans-serif;
padding-left:5px;
padding-right:5px;
padding-top:8px;
padding-bottom: 5px;
display:block;
text-decoration: none;
color: #0572FA;
height: 18px;
}

.hide{
display: none;
}

.show{
display: block;
}


a{cursor: hand}

Masukan kode berikut di sidebar blog sobat, dimana saja sesuai dengan keinginan sobat :

  <a class="raden"><font size="5"><b>Navigasi</b></font></a>

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

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

<a href="http://kolom-tutorial.blogspot.com/2007/04/bikin-blog.html" class="ogahniye">Membuat blog</a>

<a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-link-1.html" class="ogahniye">Membuat link</a>

<a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-marquee.html" class="ogahniye">Membuar marquee</a>


<a href="http://kolom-tutorial.blogspot.com/2007/05/pasang-icon-yahoo-messenger.html" class="ogahniye">Icon YM</a>

</div>

<a class="ogah" onclick="showHide('ogahku2')">Aksesori blog</a>

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

<a href="http://kolom-tutorial.blogspot.com/2007/04/yahoo-messenger-emoticons.html" class="ogahniye">Yahoo ! Emoticons</a>

<a href="http://kolom-tutorial.blogspot.com/2007/04/blogger-emoticons.html" class="ogahniye">Blogger Emoticons</a>

<a href="http://kolom-tutorial.blogspot.com/2007/05/pasang-jam-blog-di-sidebar.html" class="ogahniye">Pasang jam</a>

<a href="http://kolom-tutorial.blogspot.com/2007/05/ada-video-di-artikel.html" class="ogahniye">Pasang Video</a>

</div>

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

<div id="ogahku3" 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://contoh-blog.blogspot.com/" class="ogahniye">Blog Menu D'tree</a>

<a href="http://kolom-authorized.blogspot.com/" class="ogahniye">Authorize service</a>

</div>

<a class="ogah" onclick="showHide('ogahku4')">Links Temanku</a>

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

<a href="http://free-7.blogspot.com/" target="_blank" class="ogahniye">Free 7</a>

<a href="http://jaloee.blogspot.com/" target="_blank" class="ogahniye">Jaloee</a>

<a href="http://sundajava.blogspot.com/" target="_blank" class="ogahniye">Liezmaya</a>

<a href="http://anangku.blogspot.com/" target="_blank" class="ogahniye">Anang</a>

</div>

Klik tombol Preview untuk melihat perubahan yang baru di buat

Jika sudah OK, klik tombol Save Changes Template
Selesai.

Keterangan kode-kode diatas :

kode di bawah ini adalah kode untuk mengaktifkan tombol yg di klik, jadi jangan di rubah! kecuali jika obat sudah familier dengan Javascript dan bisa membuat variasi baru dari kode ini :

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

Kode-kode di bawah ini, nilainya harus di sesuaikan dengan kondisi blog sobat :
.raden
--> .raden hanya pendefinisian saja , bisa di ganti dengan apa saja yang penting harus sesuai dengan kode yang di definisikan dan jangan lupa untuk enyertakan dot ( . ) diepan kata yang di buat.

background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava6.gif');
--> ini adalah gambar background untuk tulisan yang saya buat yaitu sebuah ombol.

text-align:center;
--> kode untuk membuat tulisan berada di tengah, bisa diganti dengan kata Left untuk sebelah kiri, dan right untuk sebelah kanan.

width:90%;
--> lebar dari tombol adalah sebesar 90% dari besarnya space sidebar dimana tombol ini di tempatkan, silahkan ganti nilainya dan sesuaikan dengan ukuran blog sobat.

font-family: georgia, Helvetica, sans-serif;
--> Font (jenis hurup) yang dipilih adalah jenis georgia, ini bisa diganti dengan jenis huruf lainnya semisal verdana dan lain-lain.

padding-left:5px;
--> batas (jarak) tulisan sebesar 5px dari tepi kiri tombol,nilai ini bisa di rubah sesuai keinginan sobat.

padding-right:5px;
--> batas (jarak) tulisan sebesar 5px dari tepi kanan tombol,nilai ini bisa di rubah sesuai keinginan sobat.

padding-top:5px;
--> batas (jarak) tulisan sebesar 5px dari tepi atas tombol,nilai ini bisa di rubah sesuai keinginan sobat.

padding-bottom: 5px;
--> batas (jarak) tulisan sebesar 5px dari tepi bawah tombol,nilai ini bisa di rubah sesuai keinginan sobat.

display:block;
--> block berarti ditampilkan,jadi jangan dirubah.

text-decoration: none;
--> Tidak ada tek dekorasi. Sebaiknya jangan di rubah.

color: #F6E151;
--> Pemilihan warna, bisa dirubah kode warnanya sesuai dengan keinginan sobat.

.ogah
--> .ogah hanya pendefinisian saja , bisa di ganti dengan apa saja yang penting harus sesuai dengan kode yang di definisikan dan jangan lupa untuk menyertakan dot ( . ) didepan kata yang di buat.

.ogahniye
--> .ogahniye lagi-lagi hanya pendefinisian saja , bisa di ganti dengan apa saja yang penting harus sesuai dengan kode yang di definisikan dan jangan lupa untuk menyertakan dot ( . ) didepan kata yang di buat.

.hide
display: none;
--> Pendifinisian untuk .hide disembunyikan (tidak tampil).

.show
display: block;
--> Pendifinisian untuk .show ditampilkan.

a{cursor: hand}
Agar gambar mouse berubah jadi gambar tangan ketika berada di atas tombol.
Kode yang saya berikan diatas memuat links yang saya miliki, jadi links tersebuat harus di rubah dengan links milik sobat.

Mudah-mudahan keterangan di atas sudah jelas. Selamat mencoba !

Sumber:Disini

Menu Dropdown dengan JavaScript

2010-05-22T03:29:00.000-07:00

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 klik tombol di bawah untuk melihat demo :

Caranya silahkan arahkan mouse sobat ke deretan menu yang ada pada halaman demo 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 :

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 :

Klik menu LayOut

Klik menu Edit HTML

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

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

Tunggu beberapa saat sampai proses selesai

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>

Masukan kode berikut di dalam stylesheet CSS, atau untuk lebih mudah silahkan cari kode ]]>, 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}

Klik tombol SAVE TEMPLATE

Klik menu Page Elements

Klik tulisan Add a Page Element

Klik tulisan ADD TO BLOG di bawah tulisan HTML/JavaScript

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>

Klik tombol SAVE CHANGES

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

Klik tombol SAVE

Selesai

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

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 !

Sumber:Disini

Membuat Link Untuk Download

2010-05-21T16:23:00.000-07:00

Sobat Saiman beberapa waktu yang lalu mengajukan sebuah pertanyaan yang di tulis pada shoutbox, beliau menanyakan tentang cara memasang artikel atau file exe di blog agar bisa di download orang lain. Sepengetahuan saya yang terbatas ini, di dalam blog tidak bisa untuk menyimpan file exe kemudian bisa di download oleh orang lain, akan tetapi walaupun begitu ada cara lain yang bisa kita tempuh yakni menggunakan jasa situs-situs yang ada di internet yang menyediakan space untuk upload file yang kita punyai dan kemudian bisa di download lagi oleh orang lain.

Secara sederhana saya jabarkan cara kerjanya, pertama tentu saja kita harus mempunyai account pada situs tersebut, kemudian setelah mempunyai account, baru kita upload data yang ingin kita simpan, lalu setelah proses upload berhasil kita akan di beri URL address file yang kita upload. Nah langkah terakhir agar pengunjung dari blog kita bisa mendownload file tersebut adalah memasang tulisan yang mempunyai link terhadap URL address file yang kita upload tadi, jadi tentu saja orang lain bisa mendownload file yang kita pasang melalui blog kita. Kira-kira begitu bos.

Agar tidak terlalu bingung, penyedia layanan ini salah satunya adalah www.SnapDrive.net. dengan menggunakan situs ini kita bisa upload file kemudian file tersebut bisa di download lagi oleh orang lain. Untuk caranya silahkan ikuti langkah-langkah berikut ini :

Silahkan klik di sini untuk menuju http://www.SnapDrive.net

Klik tulisan Register

Isi formulir yang disediakan dengan data diri sobat

Username --> isi dengan nama yang ingin sobat gunakan, boleh apa saja yang penting mudah di ingat. contoh : Unyil

Password --> isi dengan password yang di inginkan. contoh : pakraden

Confirm password --> isi kembali dengan password yang tadi di tuliskan.contoh : pakraden

Email address --> isi dengan alamat email sobat, tentunya yang masih valid. contoh : amn_tea@yahoo.co.id

First name -->isi dengan nama depan sobat

Last name --> isi dengan nama belakang sobat

Country --> pilih nama negara dimana sobat tinggal. contoh : indonesia

Postcode --> isi dengan kode post daerah sobat

Gender --> pilih sesuai dengan jenis kelamin sobat. male(pria), female(wanita)

Date of birth --> pilih tanggal kelahiran sobat

Preferances isi dengan tulisan yang tertera di situ

Klik tombol Register

Ada konfirmasi bahwa account yang baru di buat harus di aktifkan melalui email yang kita tulis tadi

Cek email milik sobat yang tadi ditulis, periksa apakah email dari Snapdrive sudah sampai atau belum

Jika email sudah sampai, silahkan buka email tersebut. Isi di dalam email tersebut ada yang berupa link untuk aktifasi, klik saja link tersebut

Secara otomatis sobat akan dibawa kehalaman yang berisi ucapan terima kasih

Klik tombol OK

Silahkan Login dengan username serta password yang tadi di tuliskan saat register

Setelah berada di halaman account sobat, klik tulisan Upload

Klik tombol Add Files

Pilih file yang ada dikomputer sobat yang mau di upload

Klik tombol Upload. tunggu beberapa saat ketika proses upload file sedang berlangsung

Jika proses upload selesai, sobat akan diperlihatkan file yang di upload tadi. Klik tulisan details yang ada disebelahnya

Klik tulisan HTML Code

Copy kode yang di berikan lalu paste pada program notepad

Klik tulisan Logout untuk keluar dari situs tersebut

Silahkan tutup layar browser sobat

Langkah selanjutnya adalah memasukan kode tadi ke dalam blog kita, saya ambil contoh kode yang sudah di upload seperti ini :

<a href="http://www.snapdrive.net/files/452250/billing%20internet.zip">billing internet.zip</a>

Kode ini merupakan kode link biasa, jadi tentunya tidak mutlak. Kata billing internet.zip, bisa kita ganti dengan kata apa saja sekehendak kita. saya ambil contoh kata billing internet.zip di rubah menjadi kata download, maka kode diatas menjadi seperti di bawah ini :

<a href="http://www.snapdrive.net/files/452250/billing%20internet.zip">download</a>

Bagaimana cara memasukan kode diatas? tentu saja terserah sobat mau di tempatkan dimana saja, mau di sidebar, footer, atau bahkan di dalam postingan pun bisa. Saya ambil contoh didalam postingan isinya seperti ini :

Untuk men download program billing internet, silahkan anda klik link di bawah ini :

 <br/><br/>
<a href="http://www.snapdrive.net/files/452250/billing%20internet.zip">download</a>

Maka nanti di blog kita akan tampil seperti ini :

Untuk men download program billing internet, silahkan anda klik link di bawah ini :

download

Contoh link yang saya buat diatas adalah link yang benar-benar nyata untuk mendownload program billing internet, silahkan sobat klik untuk membuktikannya!

Saya kira sudah cukup pembahasan tentang cara membuat link download, mudah-mudahan dapat di mengerti. Selamat mencoba !

Sumber:Kang Rohman

Membuat Penggalan Artikel

2010-05-19T03:12:00.000-07:00

Menanggapi pertanyaan sobat tanggo yang menanyakan perihal penggalan artikel dari rubrik elektronik yang katanya selalu muncul di atas posting artikel, maka dari itu kali ini saya akan membahas cara pembuatannya, barangkali ada dari sobat-sobat lainnya sama-sama tertarik atau kalau tidak tertarik, ya sekedar pengetahuan saja juga tidak ada ruginya kan.

Sebenarnya penggalan artikel di atas adalah bukanlah suatu tulisan hasil posting, akan tetapi hanya berupa tulisan biasa yang ujung kalimatnya di beri link untuk menuju ke artikel sebenarnya yakni artikel yang terdapat pada blog rubrik elektronik. Maksud pemasangan penggalan kalimat itu sebenarnya untuk membawa para pembaca ke blog saya yang satu lagi yaitu Rubrik Elektronik tadi, soalnya itu blog kan ada iklan google adsense nya, nah barangkali saja ada diantara para sobat sekalian yang mau berbaik hati meng klik iklan google adsense milik saya cuma hiks.... hiks masih dikit yang mau klik iklan aku tapi ga apa-apa berarti belum rezekinya (berarti ga ikhlas donk bikin tutorialnya kalo gitu / weith..... maaf bukan begitu maksud saya, jadi ga enak hati nih ).

Untuk membuat penggalan artikel seperti diatas, langkah pertama adalah mengcopy sebagian kalimat yang mau kita link, yang kedua adalah mencatat address dari artikel tersebut, nah ujung dari kalimat tersebut kita buatkan link. Agar tidak terlalu membingungkan saya beri contoh. Misalkan address dari artikel yang mau saya pasang linknya adalah sebagai berikut :

http://rubrik-elektronik.blogspot.com/2007/04/electronic-shopping.html

Isi dari penggalan kalimatnya adalah sebagai berikut :

Electronic Shopping

Many Indonesians were still believing that products that in marketed overseas his quality was far more better than products that in marketed in the country. Around them many that were deliberate went overseas only a to shop. You some among them?

Maka kode yang kita buat adalah sebagai berikut :

<span style="color:#FD8403"><font size="6">Electronic Shopping</font></span>
<hr width="100%" align="left">
<br/>
Many Indonesians were still believing that products that in marketed overseas his quality was far more better than products that in marketed in the country. Around them many that were deliberate went overseas only a to shop. You some among them? <a href="http://rubrik-elektronik.blogspot.com/2007/04/electronic-shopping.html"><b>...Read more...</b></a>
<hr width="90%" align="left">
<br/>

Kode tersebut hasilnya akan seperti ini :

Electronic Shopping
Many Indonesians were still believing that products that in marketed overseas his quality was far more better than products that in marketed in the country. Around them many that were deliberate went overseas only a to shop. You some among them? ...Read more...

Biar lebih faham, sedikit saya uraikan :

<span style="color:#FD8403"> ..... </span> --> ini adalah kode untuk merubah warna text. #FD8403 merupakan kode warna orange.
<font size="6">.......</font>< --> ini adalah kode untuk menampilkan huruf dalam ukuran font 6 (ukuran besar)
<hr width="100%" align="left"> --> ini adalah kode untuk membuat garis sebesar 100% dari lebarnya halaman blog yang dimulai dari tepi kiri.
<br/> --> kode untuk membuat suatu kalimat pindah ke bawah sebesar satu line break.

Mudah-mudahan keterangan diatas dapat di pahami. Setelah kita membuat kode seperti yang di terangkan diatas, tugas selanjutnya yaitu memasukan kode tersebut kedalam blog. Tentunya ada perbedaan cara memasukan kode antara template klasik dengan template baru. Silahkan ikuti langkah-langkahnya :

Untuk template klasik :

# Sign in di blogger dengan id sobat

# Klik menu Template

# Klik menu Edit HTML

# Copy seluruh kode HTML yang ada, kemudian save di komputer sobat. Ini untuk backup data apabila terjadi kesalahan dalam proses editting template

# Cari kode seperti di bawah ini :

<div class="post"><a name="<$BlogItemNumber$>"></a>
<BlogItemTitle>

Tempatkan kode yang telah kita buat tadi persis diatas kode diatas, sehingga kodenya menjadi :

<span style="color:#FD8403"><font size="6">Electronic Shopping</font></span>
<hr width="100%" align="left">
<br/>
Many Indonesians were still believing that products that in marketed overseas his quality was far more better than products that in marketed in the country. Around them many that were deliberate went overseas only a to shop. You some among them? <a href="http://rubrik-elektronik.blogspot.com/2007/04/electronic-shopping.html"><b>...Read more...</b></a>
<hr width="90%" align="left">
<br/>
<div class="post"><a name="<$BlogItemNumber$>"></a>
<BlogItemTitle>

# Klik tombol Preview untuk melihat perubahan yang baru di lakukan

# Apabila sudah OK, klik tombol save Template Changes

# Selesai.

Catatan : cara di atas tentunya merujuk kepada template asli buatan blogger.com, bagi pengguna template bukan buatan blogger tentu akan lain, yang perlu di ingat yaitu penempatan kode penggalan artikel adalah persis diatas kode untuk Posting artikel.

Untuk template baru :

# Sign In di blogger dengan id sobat

# Klik menu Layout

# Klik menu Page Elements

# Klik Add a Page Element

# Klik tulisan ADD TO BLOG yang berada di bawah tulisan HTML/JavaScript

# Copy paste kode penggalan artikel yang telah kita buat tadi

# Klik tombol SAVE CHANGES

# Klik kotak element yang baru di buat, tahan kemudian pindahkan di atas kotak yang bertuliskan Blog post (di drag & drop)

# Klik tulisan View Blog untuk melihat hasil dari penambahan kode tadi

# Bila sudah OK, klik tombol SAVE

# Selesai.

Bagaimana penjelasannya sobat? mudah-mudahan dapat di pahami. Selamat mencoba !

Sumber:Disini

Template baru VS Template Klasik

2010-05-18T05:06:00.000-07:00

Sudah dua hari ini saya tidak menelorkan tulisan baru ( emangnya ayam pake bertelor segala ) mungkin buat sobat yang rajin datang ke sini merasa bosan karena tulisannya itu-itu melulu. OK, biar ga basi langsung aja.Menanggapi banyaknya pertanyaan yang di ajukan melalui shoutbox beberapa waktu lalu seputar masalah mengganti template, maka kali ini saya akan membahasnya agar bagi sobat yang masih bingung dapat mempunyai gambaran seputar template ini.

Sebenarnya tentang masalah template ini sudah saya posting, jika mau iseng-iseng baca silahkan klik di sini, tapi biar lebih jelas akan saya bahas lebih dalam.

Mungkin ada diantara sobat semua masih bingung dengan yang namanya template klasik sama template baru. Di blogger.com saat ini template yang di gunakan ada dua pilihan yaitu template klasik dan baru. Bagaimana caranya kita membedakan apakah kita menggunakan template klasik atau template baru? Ada beberapa ciri untuk mengenal apakah yang kita pakai template baru atau klasik, diantaranya yaitu :

Template baru :

Pada menu dashboard (menu yang dijumpai pada saat kita baru login) akan terlihat menu seperti ini :

Manage : Posts, Settings, Layout

Jika kita klik menu Layout, akan ada menu seperti ini :

Page Elements | Fonts and Colors | Edit HTML | Pick New Template

Jika kita klik menu Edit HTML maka akan muncul beberapa ciri khas, yaitu :

Tulisan --> download Full Template
Tombol bertuliskan --> Browse..., Upload
Ada kotak kecil di samping tulisan Expand Widget Templates
Tombol bertuliskan ---> CLEAR EDITS, PREVIEW, SAVE TEMPLATE
Dibagian bawah terdapat tulisan :

• Revert to Classic Template
• View Classic Template

Itu tadi sedikit ciri apabila kita memakai template baru.

Apabila memakai template klasik, cirinya adalah :

Pada menu dashboard (menu yang dijumpai pada saat kita baru login) akan terlihat menu seperti ini :

Manage : Posts, Settings, Template

Jika kita klik menu Template, akan ada menu seperti ini :

Edit HTML | Pick New | customize Design | Adsense

Jika klik menu Edit HTML akan muncul beberapa ciri :

terdapat tulisan --> Change the Blogger Navbar

Tombol bertuliskan ---> Save Template Changes, Preview, Clear

Itu tadi beberapa ciri jika kita memakai template klasik.

Dari kedua contoh ciri diatas, tentu saja kita dapat mengetahui template apa yang sekarang kita pakai.

Apa kelebihan atau kekurangan dari kedua template tersebut?

Template baru

Terdapat menu : Page Elements
Dengan menu ini kita dapat dengan mudah menambahkan element tanpa harus mengerti bahasa HTML. Element-element yang bisa ditambahkan bisa berupa Newsreel, Video Bar, List, Links List, Picture, Text, HTML/JavaScript, Feed, Labels, Logo, Profile, Blog Archive, serta Page Header.

Sistem Drag & Drop
Dengan sistem ini kita dapat dengan mudah memindahkan setiap element yang telah kita buat dimana saja yang kita sukai.

Terdapat menu : Fonts and Colors
Dengan menu ini kita dapat dengan mudah merubah warna serta bentuk huruf tanpa harus repot-repot merubah style sheet dan tentunya tidak memerlukan kemampuan berbahasa HTML

Itu tadi beberapa keuntungan memakai template baru, dan kekurangannya yaitu :

bagi sobat yang suka otak-atik kode HTML, pada template ini agak susah tuk di otak-atik (khusus buat pemula seperti saya, lain halnya bila sobat sudah expert).

Sekarang apa kelebihan dari template klasik :

Kode HTML sangat mudah untuk di otak-atik, jadi bagi sobat yg suka bermain dengan HTML sangat cocok memakai template ini.

Kekurangan :

Tidak tersedia menu Page Elements, sehingga bagi sobat yang masih bingung dengan HTML akan menemui kesulitan.

Tidak tersedianya menu : Fonts and Colors, sehingga menyulitkan dalam mengatur Font serta warna hurup.

Nah itu tadi beberapa keunggulan serta kekurangan dari kedua template, silahkan pikirkan mana yang mau sobat pilih.

Cara Migrasi Template

Setelah menimbang-nimbang, tentunya sobat tertarik dengan salah satu diantara keduanya. jika ternyata sobat tertarik untuk bermigrasi(pindah) template dan belum mengtahui caranya silahkan ikuti langkah berikut:

Dari Template baru ke template klasik :

Klik menu Layout

Klik menu Edit HTML

Klik tulisan yang ada di bagian bawah layar yaitu : Revert to Classic Template
Bila muncul kotak dialog, klik OK aja
Selesai, sobat memasuki dunia baru yaitu template klasik.

Dari template klasik ke template baru :

Klik menu Template

Klik menu Customize Design

Klik tombol bertuliskan UPGRADE YOUR TEMPLATE

Pilih template yang di sukai, lalu klik tombol SAVE TEMPLATE

Selesai. sobat sudah memasuki alam baru, yaitu Template Baru.

Cara mengganti Template

Ada dua kemungkinan, yaitu mengganti template dengan buatan blogger dan mengganti template bukan buatan blogger.

Ganti template dengan template buatan blogger

Untuk template Klasik, ikuti langkah-langkah berikut :

Klik menu Template

Klik menu Pick New

Pilih template mana yang paling cocok, lalu klik tombol bertuliskan Use This Template yang berada di bawah gambar template

Selesai. Blog sobat sudah punya wajah baru.

Untuk template baru, ikuti langkah-langkah berikut :

Klik menu Layout

Klik menu Pick New Template

Pilih template mana yang sobat sukai, lalu klik tombol SAVE TEMPLATE

Selesai.Blog sobat sudah mempunyai wajah baru

Ada yang perlu di ketahui yaitu jika kita mengganti template dengan template buatan blogger sendiri, maka data-data semisal link, shoutbox, image dan lain-lain. Data ini tidak akan hilang. Lain halnya apabila kita mengganti dengan template buatan bukan blogger.com, maka semua data-data yang di sebutkan tadi akan menghilang (kecuali postingan artikel tidak akan hilang) dan tentunya harus di input ulang, dan judulnya Caaaaapppppee deeeeehhhhh .....

Ganti template dengan template bukan buatan blogger

Hal pertama yang harus di ingat adalah semua data-data yang ada seperti yang saya sebutkan tadi, maka apabila kita mengganti template dengan template bukan buatan blogger sendiri, kita harus mengcopy dulu seluruh data tersebut, dan kemudian nanti setelah kita sudah mengganti template, data-data tadi kita input ulang.

Template baru

Klik menu Layout

Klik menu page Elements

Klik tulisan Edit pada masing-masing Element, lalu copy seluruh datanya

Jika semua data di pastikan sudah di copy, maka langkah selanjutnya adalah klik menu edit HTML

Klik tulisan --> download Full Template, save dalam komputer. Ini di maksudkan apabila nanti sobat berubah pikiran dan ingin kembali lagi, sobat masih punya data template tersebut

Beri tanda centang dulu pada kotak kecil disamping tulisan Expand Widget Template

Klik tombol Browse..., lalu masukan data Template baru yang ingin di masukan

Klik Tombol Upload

Biasanya keluar peringatan bahwa data-data yang kita punya seperti link, shoutbox dan lain-lain akan ter delete (terhapus)

Klik tombol --> Confirm & Save, dengan asumsi bahwa sobat sudah mengcopy data-data tadi

Selesai. Blog sobat sudah mempunyai wajah baru.

Template Klasik

Klik menu Template

Klik menu Edit HTML

Tandai (highligh/blok) semua data template yang ada, sorot pada tulisan yang sudah di tandai, klik kanan Copy,lalu paste pada program notepad, save dan beri judul dengan nama yg mudah di ingat. Ini dimaksudkan untuk backup data untuk nanti input ulang data-data seperti link,shoutbox dll

Delete semua data template yang lama

Copy seluruh data template yang baru yang mau di masukan, lalu paste pada kotak data template yang sudah di delete tadi

Klik tombol Preview, lihat perubahan yang ada (biasanya preview ini agak berbeda dengan tampilan blog aslinya), Jika sudah cocok, klik tombol Save Template Changes

Selesai. blog sobat sudah mempunyai wajah baru.

Bagaimana sobat? mudah-mudahan keterangan diatas dapat menjawab semua pertanyaan mengenai ganti template.

Selamat mencari dan menemukan template yang sobat suka.

Sumber:Kang Rohman

Menu Navigasi dengan CSS

2010-05-14T03:56:00.000-07:00

Update : Tutorial ini khusus pagi anda yang masih memakai template

klasik Hallo sobat, bagaimana kabarnya hari ini? mudah-mudahan sehat selalu ya, biar baca ni artikel semangat, ga loyo gitoe.

Ok, biar ga terlalu garing sedikit demi sedikit kita mulai memasuki topik bahasan, yoi kali ini saya mau membahas tentang cara membuat menu navigasi menggunakan CSS. Untuk melihat demo Navigasi yang akan saya terangkan, silahkan klik tombol di bawah ini:

Bagaimana sobat, sudah mendapat gambaran apa yang akan saya sampaikan? pasti jawabnya iya. Dengan adanya menu navigasi seperti di atas, tentunya akan lebih menarik perhatian para pengunjung blog kita di banding dengan hanya menu biasa, dan selain itu pula menu ini lebih memperjelas bahwa tulisan atau tombol tersebut merupakan sebuah tombol navigasi yang bisa di klik oleh para pengunjung.

Sekarang timbul pertanyaan bagaimana cara membuatnya? bagi yang belum tahu dan berminat untuk mengetahuinya silahkan sobat terus membaca sampai akhir artikel. Untuk membuat menu seperti yang terlihat di atas tadi, kita perlu menambahkan beberapa kode tambahan pada blog kita.

Seperti pada contoh tadi di atas, ada dua jenis menu navigasi yang akan saya bahas yakni yang tidak menggunakan Image backround serta yang menggunakan Image backround, silahkan simak langkah-langkah berikut ini :

buatlah dua buah tombol navigasi yang bentuknya sama persis, akan tetapi berbeda warna, ini di maksudkan agar ketika tombol mouse menunjuk tombol tersebut tombolnya akan berubah warna. Bagaimana cara membuat tombol? Tentu saja untuk membuat sebuah tombol, kita bisa menggunakan berbagai program komputer semisal adobe photoshop, coreldraw ataupun berbagai program lainnya.

Upload gambar tombol-tombol tersebut pada hosting penyimpan semisal www.photobucket.com untuk cara upload gambar sudah saya terangkan pada pembahasa yang lalu , jika sudah lupa silahkan klik Di sini

.

Agar ada contoh, umpamanya kita mempunyai alamat tombol sebagai berikut :

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

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

Langkah selanjutnya adalah menambahkan kode, ada dua contoh yakni yang tidak memakai gambar tombol dan yang memakai gambar tombol. contoh yang tidak memakai gambar tombol :

Tambahkan kode berikut sesudah kode <style type="text/css"> dan sebelum kode </style>, ya di mana saja asalkan di antara kode tadi.

 .unyil{
text-align:left;
display:block;
width:180px;
height:20px;
background:#f0f0f0;
padding:3px 4px 3px 8px;
margin:7px 10px 7px 0;
}

.unyil:hover{
background:#97A4B9;
text-decoration:none;
}

copy kode di bawah ini, lalu paste di tempat yang sobat inginkan, bisa di sidebar, footer atau dimana saja, kemudian rubahlah dengan link yang sobat punya :

<a class="unyil" href="http://rubrik-elektronik.blogspot.com">Rubrik Elektronik</a><span class="hide"> | </span>

<a class="unyil" href="contoh-blog.blogspot.com">Blog Menu D'Tree</a><span class="hide"> | </span>

<a class="unyil" href="http://rohman-freeblogtemplate.blogspot.com">Free Blog Templates</a><span class="hide"> | </span>

<a class="unyil" href="http://kolom-authorized.blogspot.com">Authorized Service</a><span class="hide"> | </span>

biar tidak telalu bingung, sedikit saya uraikan :

.unyil --> kata .unyil bisa diganti apa saja yang penting harus sesuai dengan kode berikutnya.

text-align:left; --> kata left artinya tulisan akan berada di sebelah kiri, ini bisa di ganti dengan kata center atau right

display:block; --> kata block artinya di tampilkan di layar monitor.

width:180px; --> angka 180px adalah lebar dari tombol navigasi sebesar 180px, nah ini bisa di rubah sesuai dengan kondisi blog sobat masing-masing.

height:20px; --> angka 20px adalah tinggi dari tombol navigasi sebesar 20px, ini bisa di ganti sesuai dengan keinginan sobat.

background:#f0f0f0; --> tulisan #f0f0f0 adalah kode warna dari background, ini bisa di rubah sesuai dengan ke sukaan sobat.

padding:3px 4px 3px 8px; --> nilai padding ini adalah untuk mengatus jarak tulisan pada tombol navigasi, bisa di rubah sesuai kebutuhan.coba-coba aja rubah sendiri.

margin:7px 10px 7px 0; --> margin ini untuk jarak antara satu tombol dengan tombol yang lain, bisa di rubah, coba aja.

.unyil:hover{ --> .unyil:hover artinya yaitu ketika mouse berada pada tombol .unyil akan berubah menjadi seperti yang di definisikan pada kode ini.

background:#97A4B9; --> #97A4B9 adalah kode warna yang dinginkan ketika mouse berada pada tombol .unyil

text-decoration:none; --> text dekorasi jangan di rubah.

Bagaimana sudah jelas? mudah-mudahan jelas.

Contoh yang kedua adalah yang memakai background image, dalam hal ini saya ambil contoh dengan image milik saya dan mempunyai alamat seperti ini :

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

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

prinsipnya kode-kode ini sama dengan diatas, yang membedakan adalah penambahan image doang, coba lakukan langkah berikut ini :

Tambahkan kode berikut sesudah kode

<style type="text/css">

dan sebelum kode </style>, ya di mana saja asalkan di antara kode tadi.

 
.cuplis{
text-align:left;
display:block;
width:180px;
height:20px;
background:#f0f0f0 url(http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif) top right no-repeat;
padding:3px 4px 3px 8px;
margin:7px 10px 7px 0;
}

.cuplis:hover{ background:#97A4B9 url(http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif) top right no-repeat;
text-decoration:none;
}

copy kode di bawah ini, lalu paste di tempat yang sobat inginkan, bisa di sidebar, footer atau dimana saja, kemudian rubahlah dengan link yang sobat punya :

 <a class="cuplis" href="http://rubrik-elektronik.blogspot.com">Rubrik Elektronik</a><span class="hide"> | </span>

<a class="cuplis" href="contoh-blog.blogspot.com">Blog Menu D'Tree</a><span class="hide"> | </span>

<a class="cuplis" href="http://rohman-freeblogtemplate.blogspot.com">Free Blog Templates</a><span class="hide"> | </span>

<a class="cuplis" href="http://kolom-authorized.blogspot.com">Authorized Service</a><span class="hide"> | </span>

Yang membedakan hanya pemasangan URL image saja, yang lainnya sama persis. Kata cuplis adalah untuk membedakan dengan perintah menu navigasi unyil, jadi kalau dua efek ini mau besamaan ada dalam satu blog, ya harus berbeda.

Sumber:Kang Rohman

Daftar Mybloglog

2010-05-12T18:22:00.000-07:00

Bagi para sobat yang baru membuat blog, pada kesempatan kali ini saya mau menambahkan perbendaharaan blog tools nya, yakni pasang MyBloglog.

Apa itu Mybloglog ?

Bingung kalau harus mendifinisikan apa itu mybloglog biar kita tidak sama-sama bingung, silahkan alihkan perhatian sobat ke bagian sidebar sebelah kanan layar monitor, di bawah tulisan Tamu terdapat photo yang ganteng-ganteng serta cantik-cantik. Nah itu bukanlah photo saya ataupun my family, tapi itu merupakan tamu yang pernah berkunjung ke blog ini dan beliau-beliau inipun sama-sama anggota dari mybloglog, atau barangkali photo sobat sudah terpampang disana? selamat kalau iya, karena sobat akan mulai jadi orang terkenal. Ko bisa? Ya iiyya...lah, karena tercatat tak kurang dari lima puluh pengunjung setiap harinya yang mampir kemari dan selalu melihat photo sobat, keren kan! makanya sering-sering main kemari biar cepat terkenal..he..he..(wuyyy...udah dong ngelanturnya ).

Bagaimana sobat sudah dapat gambaran? saya yakin sudah. Atau belum? kalau belum bolehlah saya yang mendefinisikan, tapi tentunya dengan versi saya sendiri. Mybloglog adalah suatu situs yang menyediakan layanan untuk melacak (tracking) para pengunjung blog/website dimana apabila pengunjung tersebut merupakan anggota situs mybloglog maka dapat secara otomatis terdeteksi dan di cantumkan dalam menu Recent Reader nya (pembaca terbaru).

Apa manfaat bergabung di mybloglog?

Ada beberapa manfaat kita bergabung dengan mybloglog yaitu :

Untuk menambah traffic ke blog kita

Dengan adanya photo kita terpampang di blog orang lain, maka ada kemungkinan banyak yang akan berkunjung ke blog milik kita, sekurang-kurangnya dari pemilik blog itu sendiri.

Mengetahui link mana yang banyak di klik

Di mybloglog ada fasilitas tracking untuk memberi peringkat terhadap link-link yang kita pasang, link mana yang banyak di klik pengunjung, maka peringkat link itu semakin baik.

Mempererat tali silaturahmi antar pemilik blog

Tak bisa di pungkiri dengan adanya otomatisasi photo kita terpampang tanpa harus menuliskan pesan seperti halnya buku tamu, ini tentunya akan lebih memungkinkan saling kunjung mengunjungi antar pemilik blog.

Dan tentu saja masih ada manfaat-manfaat yang lainnya yang bisa di dapat, akan tetapi untuk menghemat pembahasan hanya itu saja dulu. Nah sekarang bagaimana cara bergabung dengan mybloglog, silahkan ikuti langkah-langkah berikut ini :

Silahkan buka situs http://www.mybloglog.com

Isi form yang telah di sediakan di bawah tulisan Sign Up Now

Screen name --> Isi dengan nama yang ingin di tampilkan. Contoh : Amen24

Email --> Isi dengan email sobat ( yang valid)

Passwor --> Isi dengan password yang di inginkan. Contoh : ranggalawe

Blog/Site URL --> Isi dengan alamat blog sobat. Contoh : http://rubrik-elektronik.blogspot.com

Klik Tombol Register

Terlihat beberapa form yang harus diisi lagi

Blog/Site Title --> Isi dengan judul blog sobat

Blog platporm --> pilih blogspot.com

Dibagian bawah ada dua radio buttun, silahkan pilih yang sobat sukai

Klik tombol yang bertuliskan Complete Registration

Klik tulisan Go to Your page

Klik tombol yang bertuliskan Edit profile yang berada di sebelah kanan atas

Isi semua data diri sobat (tidak saya sebutkan satu2 karena terlalu banyak)

Jika sudah selesai di isi semua, klik tombol bertuliskan Update my profile

Klik tulisam MY HOME untuk kembali ke home

Klik tombol yang bertuliskan Get Widget

Klik kotak di samping tulisan c_color_heading_bg kemudian pilih warna yg di sukai pada panel warna untuk merubah warna background heading

Klik kotak di samping tulisan c_color_heading kemudian pilih warna yg di sukai pada panel warna untuk merubah warna tulisan heading

Klik kotak di samping tulisan c_color_link_bg kemudian pilih warna yg di sukai pada panel warna untuk merubah warna backround link

Klik kotak di samping tulisan c_color_link kemudian pilih warna yg di sukai pada panel warna untuk merubah warna tulisan link

Klik kotak di samping tulisan c_color_link kemudian pilih warna yg di sukai pada panel warna untuk merubah warna backround bottom

Tulis ukuran lebar yang sesuai dengan sidebar blog sobat (kalau mau di tempatkan di sidebar) contoh : 160

Di samping tulisan Show Screen Names ada dua radio button, sebaiknya pilih yes, pilih No juga boleh

Di samping tulisan Image Size ada dua radio button, sebaiknya pilih Full-Size, pilih half-Size juga boleh

Disamping tulisan Rows, pilih berapa baris yang ingin muncul (terserah)

Disamping tulisan Title, tulis kata yang sobat suka. contoh : pembaca terbaru, yang mampir, tamu blog ini, atau apa saja

Di bagian bawah, ada tulisan Stat Tracking Script, copy kode script yang di berikan lalu paste pada program notepad, silahkan save terlebih dahulu

Kembali ke bagian atas

Klik tombol bertuliskan Preview and Get Code

Copy seluruh kode yang berada di bawah tulisan Recent Readers Widget Display & Code, lalu paste ke dalam notepad

Silahkan klik tulisan Logout yang berada di bagian atas untuk keluar dari account sobat

Silahkan close window situs tersebut.

Langkah selanjutnya adalah memasukan kode yang sudah di copy pada notepad tadi kedalam blog kita, karena kode ini merupakan Java Script, maka cara memasukan kodenya sama dengan memasukan kode HTML, dan ini sudah saya bahas pada postingan terdahulu. Jika sudah lupa silahkan baca lagi di sini. Selesai.

Selamat menikmati photo-photo ganteng dan cantik dari tamu blog sobat.

Sumber:KR

Ada Video di artikel

2010-05-12T18:15:00.000-07:00

Memuat video diantara artikel, selain untuk memperindah artikel itu sendiri, juga video ini bisa berfungsi sebagai media yang efektif dalam menyampaikan sesuatu kepada para pengunjung. Terlebih apabila anda merupakan seorang pebisnis yang dengan video ini dapat lebih memperjelas tujuan anda di banding dengan hanya sebuah tulisan. dibawah ini adalah contoh sederhana dari video , silahkan anda klik tombol icon Play untuk mengaftifkannya.

Untuk membuat sebuah video, kita bisa menggunakan situs layanan pembuatan video, salah satunya adalah http://www.youtube.com. Ikuti langkah-langkah berikut ini :

Untuk daftar silahkan kunjungi http://www.youtube.com
Setelah berada di situs tersebut, klik tulisan Sign Up yang berada pada layar bagian atas
Isi semua data diri anda pada form yang di sediakan, jangan lupa beri tanda tik/cek pada kotak di samping tulisan »» Sign me up for the "Broadcast Yourself" email - I agree to the terms of use and privacy policy. lalu klik tombol Sign Up
Setelah berhasil, anda diminta untuk veryfikasi, silahkan cek email yang anda daftarkan tadi untuk melakukan veryfikasi
Jika email dari youtube.com sudah masuk, silahkan buka lalu klik tulisan Confirm your email addres
Dengan meng klik tulisan tadi, secara otomatis anda sudah masuk kedalam halaman account anda dan siap untuk upload video
Klik tulisan Upload Video yang berada pada layar sebelah atas
Isi form yang di sediakan
Klik tombol bertuliskan Continue Uploading
Klik tombol Browse, masukan file video yang ingin anda masukan
Beri tanda tik/cek pada radio button, public »» jika video anda bisa dilihat oleh umum. Private »» Jika video anda bersifat pribadi yang hanya bisa di lihat oleh orang yang anda tunjuk
Klik tombol Upload Video, tunggu beberapa saat sampai proses upload selesai
Setelah proses upload selesai, anda tinggal mengcopy kode HTML yang di berikan. lalu paste pada Notepad
Silahkan klik Log Out untuk keluar dari situs tersebut
Selesai. anda sudah mempunyai video yang bisa di simpan pada artikel anda

Untuk memasukan kode video yang telah anda copy tadi, caranya yaitu anda tinggal posting artikel seperti biasa lalu sisipkan kode tersebut pada tempat yang anda inginkan. Cuma saat copy n' paste kode tersebut posisi posting harus pada Edit HTML jangan pada posisi Compose. Jika sudah selesai memasukan artikel, Tinggal klik Publish dan video anda siap di lihat oleh para pengunjung blog anda.

Selamat mencoba !

Sumber:Kang Rohman

Pasang Icon Yahoo ! Messenger

2010-05-12T18:06:00.000-07:00

Menanggapi pertanyaan sobat takdir yang di ajukan melalui shoutbox beberapa waktu yang lalu, beliau menanyakan tentang bagaimana cara menampilkan status online Yahoo ! Messenger pada halaman blog. Barangkali ada di antara para sobat juga berkeinginan yang sama namun belum mengetahui caranya,ada baiknya menyimak beberapa penjelasan yang akan saya utarakan.

Sebenarnya jika saya pikir-pikir, kayanya agak merasa malu menerangkan ini, mungkin bagi para sobat yang sudah beberapa kali mengunjungi blog ini hampir atau bahkan belum pernah melihat Icon Yahoo ! Messenger saya menyala tanda sedang online chatting. Memang benar saya sangat jarang sekali ber chatting ria di dunia maya, paling-paling kalau ada perlu dan itupun janjian terlebih dahulu baru saya chatting (lho ko jadi cerita...kelamaan), oh iya lupa

Untuk menampilkan icon status online yahoo ! messenger, kita bisa memilih sebanyak 5 pilihan, yakni style id 1, style id 2, style id 3, style id 4, serta style id 5, Apa perbedaan dari style id ini? perbedaannya adalah ukuran dari icon itu sendiri, untuk melihat perbedaan style id, silahkan sobat perhatikan gambar berikut :

Style ID 1 Style ID 2 Style ID 3 Style ID 4 Style ID 5

masing-masing gambar mempunyai URL adddress sendiri yaitu :

 http://opi.yahoo.com/online?u=YahooID&m=g&t=1 
Untuk Style ID 1

http://opi.yahoo.com/online?u=YahooID&m=g&t=2 
Untuk Style ID 2

http://opi.yahoo.com/online?u=YahooID&m=g&t=3 
Untuk Style ID 3

http://opi.yahoo.com/online?u=YahooID&m=g&t=4 
Untuk Style ID 4

http://opi.yahoo.com/online?u=YahooID&m=g&t=5 
Untuk Style ID 5

itu tadi adalah URL address masing-masing Style ID, maka agar tampil menjadi gambar, kita harus menambah kode yaitu :

<img src="URL address">

Sehingga untuk menampilkan URL address di atas menjadi sebuah gambar, maka kodenya akan seperti ini :

  <img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=1" border="0">

Untuk  Style ID 1

 <img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=2" border="0">

Untuk  Style ID 2

 <img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=3" border="0">

Untuk  Style ID 3

 <img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=4" border="0">

Untuk  Style ID 4

 <img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=5" border="0">

Untuk  Style ID 5

Penambahan kode border="0", agar gambar yang di hasilkan terhindar dari adanya garis tepi atau bingkai. Tapi tentu saja kode diatas adalah hanya untuk menampilkan gambar icon YM nya dan belum bisa bereaksi walaupun sudah di klik oleh para pengunjung.

Ada beberapa pilihan yang bisa kita terapkan ketika pengunjung mengklik icon YM kita, yaitu :

Kirim Instant Messenger.

Kodenya sebagai berikut :

<a href="ymsgr:sendIM?YOURID">Kirim IM</a>

Sehingga untuk kode lengkapnya jadi seperti ini :

 <a href="ymsgr:sendIM?YOURID"><img src="http://opi.yahoo.com/online?u=YourID&m=g&t=StyleID" border="0"></a>

Kirim Instant Messenger dengan pesan

Kodenya sebagai berikut :

<a href="ymsgr:sendIM?YOURID&m=YOUR+MESSAGE">Kirim IM</a>

Sehingga untuk kode lengkapnya jadi seperti ini :

 <a href="ymsgr:sendIM?YOURID&m=YOUR+MESSAGE"><img src="http://opi.yahoo.com/online?u=YourID&m=g&t=StyleID" border="0"></a>

Menambahkan link ke chat room favorit

Kodenya sebagai berikut :

<a href="ymsgr:addfriend?YOURID">Masukan ke daftar teman sobat</a>

Sehingga untuk kode lengkapnya jadi seperti ini :

 <a href="ymsgr:addfriend?YOURID"><img src="http://opi.yahoo.com/online?u=YourID&m=g&t=StyleID" border="0"></a>

Bagaimana jelaskan? biar lebih jelas lagi saya beri contoh.

Karena email saya adalah amn_tea@yahoo.co.id maka id saya adalah amn_tea, Sehingga kode untuk mengirimkan Instan Message dengan pilihan Style ID 2 adalah sebagai berikut :

<a href="ymsgr:sendIM?amn_tea"><img src="http://opi.yahoo.com/online?u=amn_tea&m=g&t=2" border="0"></a>

dan yang akan tampil seperti ini :

Icon di atas benar-benar Live, jadi tentunya icon nya akan menyala apabila saya sedang online di Yahoo ! Messenger .

Mudah-mudahan jelas. Selamat mencoba !

Sumber:Kang Rohman

Pasang Image pada judul Artikel

2010-05-12T17:54:00.000-07:00

Image. Kalau berbicara masalah image/gambar, memang sangat seru dan menyenangkan. Dengan adanya image maka blog kita akan tampil lebih menarik untuk di lihat,walaupun tentusaja apabila berlebihan akan berakibat buruk yaitu blog kita akan susah untuk di aksesoleh para pengunjung karena beban kapasitas data yang berlebihan dan bila itu terjadi maka para pengunjung akan menjadi malas untuk berkunjung. Memang segala sesuatu kalau berlebihan akan berakibat tidak baik, jalan keluarnya ya wajar-wajar saja Re....

Ok sobat, biar ga terlalu banyak berimpropisasi, langsung saja pada topik bahasan. topik yang akan kita bicarakan saat ini yaitu memasang image/gambar pada judul artikel. Artikel ini saya buat bagi yang senang akan pernak-pernik gambar,bagi yang tidak senang, ya sebagai pengetahuan saja lah.

Untuk memasang sebuah image pada judul artikel, ada beberapa tahapan yang harus dilakukan, antara lain :

Langkah pertama

Langkah pertama yang harus dilakukan adalah membuat image ataupun logo yang di inginkan. jika sobat mahir dalam program grafik & design semisal adobe photoshop ataupun coreldraw, ya tinggal buat saja yang nyentrik. Tapi kalau tidak bisa atau males bisa gunakan layanan di internet, ini sudah saya bahas pada artikel terdahulu, silahkan klik disini untuk membacanya kembali.

Langkah kedua

langkah kedua yaitu sobat harus upload image atau logo tersebut, bisa ke blogger ataupun ke hosting lain. Misalkan biasanya saya menyimpan setiap image yang saya punya di www.Photobucket.com untuk masalah upload gambarpun sudah saya bahas pada postingan yang lalu, kalau mau baca-baca lagi silahkan klik di sini.

Langkah ketiga

langkah ketiga adalah mengatur ukuran dari image tersebut agar sesuai dengan yang di inginkan, karena jika terlalu besar atau terlalu kecil maka tentu saja akan tidak enak dipandang mata. Misalkan saya mempunyai URL image seperti ini :

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

Sebagaimana kita ketahui untuk membuat sebuah image bisa online maka kita tambahkan kode :

<img src="URL image">

Sehingga kodenya akan jadi seperti ini :

<img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif">

dan yang akan tampil adalah image dengan ukuran yang sebenarnya. contoh image tersebut adalah seperti ini :

tentu saja bila kita memajang image sesuai ukuran image yang aslinya, ini menjadi kurang enak di lihat jika di padukan dengan tulisan judul posting. Untuk mengakalinya kita bisa menambahkan beberapa atribut kedalam kode image tersebut, antara lain atribut width="..." untuk lebar, height="..." untuk tinggi, dan border="..." untuk bingkai, dan dalam hal ini yang dipakai adalah border dengan nilai 0 (nol) agar terhindar dari setting template yang memakai nilai border. Saya ambil contoh kode image tadi jadi seperti ini :

 <img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0">

sehingga image yang tadi akan berubah jadi seperti ini :

Bagaimana sudah jelaskan cara merubah ukuran gambar? jika sudah, kita beranjak ke langkah selanjutnya.

Langkah keempat

langkah keempat yaitu memasukan kode gambar yang sudah kita modifikasi tadi ke dalam kode template blog milik kita. Silahkan ikuti langkah-langkah berikut ini :

Untuk yang memakai template klasik :

Klik menu Template

Klik menu Edit HTML

Copy 'n paste seluruh kode HTML ke dalam notepad, ini dimaksudkan untuk mengurangi resiko apabila terjadi kesalahan pada saat kita melakukan editting kode template

Cari kode berikut pada kode HTML sobat :

<$BlogItemTitle$>

Edit

Find

<$BlogItemTitle$>

judul postingan

  <img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0">&nbsp;&nbsp;<$BlogItemTitle$>

Klik tombol Preview untuk melihat perubahan yang dilakukan

Jika sudah OK, klik tombol Save Settings

Selesai

Maka setiap sobat posting artikel, secara otomatis image yang kita pasang tadi akan muncul tanpa harus di tuliskan kembali. Untuk contoh nyata silahkan lihat judul postingan ini.

Untuk yang memakai templat baru :

Catatan awal bagi yang memakai template baru yaitu setiap tag yang kita pakai harus selalu di tutup tidak seperti template klasik, contoh kode gambar yang tadi kita pakai adalah :

<img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0">

kode image tersebut tag nya harus ditutup dengan tag penutup :

</img>

Sehingga kode image jadi bertambah menjadi :

  <img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0"></img>

Untuk memasukan kode gambar yang sudah di tambahi tag penutup tadi, silahkan ikuti langkah berikut :

Klik menu Layout

Klik menu Edit HTML

Klik tulisan Download Full Template

Silahkan save dulu template sobat, ini untuk back up data apabila terjadi kesalahan editting

Beri tanda centang pada kotak disamping tulisan Expand Widget Templates. Sekali lagi jangan lupa beri tanda centang, sebab kalau tidak, nanti tidak akan sesuai dengan langkah selanjutnya

Tunggu beberapa saat sampai proses selesai

Cari kode berikut pada template sobat :

<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>

Sisipkan kode gambar yang kita miliki diantara kode :

  <a expr:href='data:post.url'> dan kode <data:post.title/></a>
<b:else/>

  <a expr:href='data:post.url'> <img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0"></img> &nbsp;&nbsp;<data:post.title/></a>
<b:else/>

Klik tombol PREVIEW untuk melihat perubahan

bila sudah OK, klik tombol SAVE TEMPLATE

Selesai

Untuk melihat contoh template baru yang memakai image pada judul postingan, silahkan klik di sini :

Bagaimana sudah di coba? mudah-mudahan saja berhasil. Selamat mencoba !

Sumber:Disini

English Version

How many people is online at your blog? you know that or don't? If you don't know how many people is online at your blog, you can use a free tracker to know it. That is much site provide this service. Once of them is www.histats.com. If you use them tool, you can know how many people online at your blog, how many people was visited to your blog, and any function. This is once of example :

How to get it? please following the steps :

Please visit www.histats.com.

If you was on the histats site, click Register at the top tab.

Content the form with your information, such as email, password, your blog url and etc.

Click Continue button.

Choose the style of histats counter, click Choose a counter from this category.

Please mark the radio button beside the counter style you wanted.

Click Continue button at the bottom of page.

Click at the drop down menu, choose the category which to display at your counter. the choice is : visitor today, Page views today, User online, Total visitors, and total page views. Choose empty if you want not to display them.

Click Continue button.

Wait a moment, your counter is updating.

Until the process is done, copy your counter code and paste to the Notepad or other text editor. Save into your computer.

Logout and close your internet browser.

Done. Now you has have a counter code to add at your blog.

Next step is add your counter code to your blog, please following the steps :

Login to blogger with your ID.
After entering the dasboard page , click Layout.

Click at Page Element tab. See the picture below :

Click at Add a Page element.
After emerging pop up window , Klik add to blog button for the things HTML/JavaScript. See the picture following :

Open your Counter code, copy and then paste into available column.

Click

Done. Please see the result.

Now you have a Counter, and you will know how many people online at your blog.

If you don't like with this counter, you can get at the other site, this is several site provide the same service :

http://www.neoworx.net

http://www.webfooted.net

http://www.fastonlineusers.com

See you next time at my new tips. Happy blogging.

Versi Bahasa Indonesia

Berbicara masalah blog tools, kayanya saya jarang sekali membahasnya. Dari sekian banyak artikel yang telah saya posting, tercatat baru dua artikel yang membahas tentang blog tools. Untuk itu dalam postingan kali ini akan di bahas salah satu blog tools yang banyak di gunakan oleh para blogger yakni tool untuk mengetahui berapa banyak pengguna/user yang sedang online pada blog milik kita.

Disamping berfungsi sebagai blog tools, tool ini berfungsi juga sebagai aksesori blog yaitu untuk menghiasi halaman blog milik kita agar tampak lebih cantik dan menarik untuk dilihat oleh para pengunjung. Oleh karena alasan tadi banyak penyedia tool ini yang menawarkan tampilan-tampilan yang unik serta menarik di samping fungsi utamanya yakni melacak user yang sedang online di blog kita.

Ok, biar ga bosan baca intermezo yang terlalu panjang dan garing, langsung saja pada topik bahasan utama.Untuk mendapat tool user online status, salah satunya kita bisa mendapatkan dari www.Geovisite.com, untuk langkah-langkahnya silahkan ikuti langkah berikut :

Silahkan buka www.geovisite.com

Klik tulisan Register yang berada di bawah gambar Geo counter Flash

Tulis alamat email sobat pada kotak kosong di samping tulisan Email

Tulis address blog milik sobat disamping tulisan URL. Contoh : http://rubrik-elektronik.blogspot.com

Tulis kata untuk login di samping tulisan Login (4/12). Contoh : amen24

Tulis password yang di inginkan disamping tulisan password (4/8). Contoh : kinoy

Pilih waktu yang sesuai dengan daerah sobat disamping tulisan Location. contoh :untuk daerah jakarta adalah Asia/Jakarta (GMT+7)

Pilih kategori yang sesuai dengan blog sobat di samping tulisan Category. Contoh : Internet

Pilih bahasa yang sesuai dengan blog sobat di samping tulisan Language of your site. Contoh : English (soalnya kalo indonesia ga ada, belum di akui bo)

Pilih judul blog sobat disamping tulisan Title. Contoh : Rubrik Elektronik

Tulis deskripsi dari blog milik sobat pada kotak di samping tulisan Descriptioan. Contoh : All about Electronic, tips, maintenance, until how to service the equipment of electronic

Klik tombol yang berlogo disket

Copy salah satu kode HTML yang dinginkan, antara lain : GEOGLOBE, GEOCOUNTER, GEOMAP lalu paste pada program notepad

Silahkan close window browser sobat

langkah selanjutnya adalah memasukan kode HTML tersebut pada kode HTML milik sobat, nah untuk langkah ini sudah saya bahas, silahkan klik di sini untuk membacanya

Selesai.

Agar sobat bisa menentukan pilihan mana yang harus di pilih apakah GEOGLOBE, GEOCOUNTER, atau GEOMAP ? Silahkan klik di sini untuk melihat secara nyata gambar dari ketiga pilihan tadi, tunggu beberapa saat,loadingnya lumayan sedikit lama. Kenapa tidak saya cantumkan di sini,alasannya yaitu agar halaman blog ini tidak terlalu berat untuk di akses makanya sengaja saya pisahkan.

Sebagai tambahan, situs penyedia yang lainnya sobat bisa kunjungi di :

http://www.neoworx.net

http://www.webfooted.net

http://www.fastonlineusers.com

http://www.histats.com

Selamat menikmati tool baru...

Sumber:Kolom Tutorial

Membuat menu D'tree

2010-05-12T17:24:00.000-07:00

Beberapa waktu yang lampau, saya pernah menulis artikel mengenai cara membuat menu yang menyerupai menu yang ada pada Windows explorer yaitu menu dtree, akan tetapi rupanya kemarin lusa ada laporan bahwa menu tersebut mendadak hilang entah kemana, untuk itu tulisan ini adalah sebagai referensi agar kejadian tersebut tidak terulang kembali.

Saran saya, apabila sobat memasang suatu script atau image yang bersumber dari milik orang lain, sebaiknya bersegeralah untuk menyimpannya pada account milik sobat, akan tetapi sebelum mengambilnya tentu sobat harus minta izin terlebih dahulu kepada pemilik script tersebut, etika nya seperti itu. Misalkan seperti ini, apabila saya menyuruh memasang script seperti ini :

pasanglah kode ini di atas kode </head> :

<script type='text/javascript' src='http://amen24.googlepages.com/Readmore.js' />

kode --> http://amen24.googlepages.com/Readmore.js berarti java script ini di simpan pada account milik saya. Tentu apabila sobat memasang kode ini tidak ada masalah, akan tetapi hal itu beresiko apabila saya iseng atau tidak sengaja atau juga terjadi suatu hal sehingga sumber dari script tersebut terhapus, walhasil sobat akan kehilangan fungsi dari script tersebut tanpa bisa berbuat apa-apa. Bagaimana cara mengatasinya? begini caranya : copy kode sumber script ini lalu paste pada address bar browser internet sobat :

http://amen24.googlepages.com/Readmore.js

Jangan lupa untuk klik Go untuk memanggilnya. Setelah itu nanti akan muncul sederetan script java. Langkah selanjutnya adalah klik file pada bar menu yang ada paling atas sebelah kiri, klik Save As lalu simpan di komputer sobat. Apabila kode tersebut sudah tersimpan di komputer sobat, uploadlah kode tersebut pada hosting yang biasa sobat gunakan, misalkan saya sering menyimpannya di Google Page Creator.Setelah di upload, copy alamat dari script yang baru di upload tadi, misalkan script ini mempunyai alamat :

http://juned.googlepages.com/Readmore.js

Nah, langkah terakhir adalah mengganti sumber script yang saya punyai dengan milik sobat, misal kode di atas seperti ini :

<script type='text/javascript' src='http://amen24.googlepages.com/Readmore.js' />

Gantilah sumber script di atas dengan yang sobat miliki, sehingga kodenya jadi seperti ini :

 <script type='text/javascript' src='http://juned.googlepages.com/Readmore.js' />

Apabila sobat melakukan hal yang di atas, maka sobat tidak usah khawatir akan kehilangan dari fungsi script tersebut.

Langkah-langkah di atas merupakan langkah preventif saja bukan bermaksud mengajarkan sobat untuk mencuri kode milik orang lain.

Baiklah kita kembali pada topik pembahasan mengenai cara membuat menu dtree, karena pada pembahasan yang tempo hari agak menyulitkan pembaca, sehingga kali ini saya akan mencoba membahasnya lebih mendalam dengan maksud agar lebih mudah untuk di pahami.

Untuk membuat menu dtree, sobat bisa mendownload pada situs resminya yaitu di http://www.destroydrop.com, silahkan untuk mendownloadnya sendiri. Akan tetapi kode tersebut tidaklah merupakan suatu barang yang sudah jadi, dengan kata lain sobat harus memahaminya, oleh karena alasan tadi maka saya akan mencoba memberi sedikit gambaran agar supaya lebih mudah untuk di pahami.

Contoh dasar dari script menu dtree yang langsung dari situs http://www.destroydrop.com adalah sebagai berikut :

Kode ini di simpan di atas kode </head> :

  <link rel="StyleSheet" href="dtree.css" type="text/css" />
<script type="text/javascript" src="dtree.js"></script>

Kode di bawah ini di simpan di bagian  sidebar :

<h2>Example</h2>

<div class="dtree">

<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>

<script type="text/javascript">
<!--

d = new dTree('d');

d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','example01.html');
d.add(2,0,'Node 2','example01.html');
d.add(3,1,'Node 1.1','example01.html');
d.add(4,0,'Node 3','example01.html');
d.add(5,3,'Node 1.1.1','example01.html');
d.add(6,5,'Node 1.1.1.1','example01.html');
d.add(7,0,'Node 4','example01.html');
d.add(8,1,'Node 1.2','example01.html');
d.add(9,0,'My Pictures','example01.html','Pictures I've taken over the years','','','img/imgfolder.gif');
d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');
d.add(11,9,'Mom's birthday','example01.html');
d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif');

document.write(d);

//-->
</script>

</div>

Apabila sobat mempunyai intelegensi yang cukup lumayan bagus, maka saya yakin tidak usah saya terangkanpun akan memahami bagaimana untuk membuat menu dtree dari kode diatas sehingga link-link milik sobat dapat di pasang pada kode-kode di atas.

Dengan tidak ada maksud saya untuk merendahkan sobat yang masih belum mengerti, maka saya akan mencoba menerangkannya, akan tetapi untuk lebih memudahkan maka saya telah membuat sebuah menu dtree buatan saya yang telah saya sertakan link-link di dalamnya : source code dari menu yang saya buat seperti ini :

Kode ini di simpan di atas kode </head> :

  <link rel="StyleSheet" href="http://amen24.googlepages.com/dtree.css" type="text/css" />
<script type="text/javascript" src="http://amen24.googlepages.com/dtree.js"></script>

Kode di bawah ini di simpan di bagian  sidebar :

<div class="dtree">

<p><a href="javascript: d.openAll();"><img src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://amen24.googlepages.com/minus.gif"><b>Close all</b></a></p>

<script type="text/javascript">
<!--

d = new dTree('d');

d.add(0,-1,'Home','http://kolom-tutorial.blogspot.com');


d.add(1,0,'Free template & navigation')

d.add(3,1,'free template','');
d.add(10,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-xml.html');
d.add(20,3,'Minima 3 ckolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column-xml.html');
d.add(30,3,'1st template unik','http://template-unik.blogspot.com/2007/07/1st-template-unik.html');
d.add(40,3,'Denim 3 kolom','http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html');
d.add(50,3,'Blue lover 3 kolom','http://template-unik.blogspot.com/2007/08/blue-lover-template-xml.html');
d.add(60,3,'Gray lover 3 kolom','http://template-unik.blogspot.com/2007/08/gray-lover-template.html');
d.add(70,3,'UniQue template R 1.1','http://template-unik.blogspot.com/2007/09/unique-template-r-11.html');
d.add(80,3,'UniQue template R 1.2','http://template-unik.blogspot.com/2007/09/unique-template-r-12_16.html');
d.add(90,3,'UniQue template R 1.3','http://template-unik.blogspot.com/2007/09/unique-template-r-13.html');
d.add(100,3,'template klasik');
d.add(110,3,'Minima 3 kolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column.html');
d.add(120,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-classic.html');

d.add(5,1,'Free css menu navigation');
d.add(10,5,'Horizontal blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');
d.add(20,5,'Horizontal blue menu (2)','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html');
d.add(30,5,'Horizontal double line menu','http://css-lybrary.blogspot.com/2007/09/horizontal-double-line-menu.html');
d.add(40,5,'Horizontal flip menu','http://css-lybrary.blogspot.com/2007/09/horizontal-flip-menu.html');
d.add(50,5,'Vertical green menu','http://css-lybrary.blogspot.com/2007/09/vertical-green-menu.html');
d.add(60,5,'Vertical transparent','http://css-lybrary.blogspot.com/2007/09/vertical-transparent-menu.html');
d.add(70,5,'Vertical blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');
d.add(80,5,'Vertical Yellow menu','http://css-lybrary.blogspot.com/2007/09/yellow-vertical-menu.html');
d.add(90,5,'Vertical red menu','http://css-lybrary.blogspot.com/2007/09/red-vertical-menu.html');

d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif','http://amen24.googlepages.com/globe.gif');
d.add(10,2,'UniQue template','http://template-unik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(20,2,'Css Library','http://css-library.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(20,2,'Terune sasaQ','http://terune-sasaq.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(30,2,'Bang dhika','http://bangdhika.blogspot.com/','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(40,2,'Rubrik Elektronik','http://rubrik-elektronik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(50,2,'Tukeran link','http://tukeran-link.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(60,2,'Pasar Info','http://pasar-info.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');

d.add(4,0,'Software super murah disini!','http://www.obralplus.com/?id=rohman','menjual berbagai software serta ebook dengan harga super murah, klik di sini!','','http://amen24.googlepages.com/action_save.gif');
d.add(6,0,'Belajar website di sini!','http://www.resepbisnis.com/?id=rohman','belajar membuat website itu sangatlah mudah, temukan caranya.klik di sini!','','http://amen24.googlepages.com/cd.gif');
d.add(7,0,'My friendster!','http://amn_tea.blogs.friendster.com/my_blog/','my friendster','','http://amen24.googlepages.com/friendsterku.gif');
d.add(8,0,'Recycle Bin','http://kolom-tutorial.blogspot.com/index.html','Recycle bin','','http://amen24.googlepages.com/trash.gif');


document.write(d);

//-->
</script>

</div>

Untuk melihat hasilnya, silahkan klik dulu di sini !

Baiklah, saya akan mencoba mengulasnya agar lebih mudah untuk di pahami :

Jika sobat perhatikan dari kode di atas, akan terlihat beberapa ciri yang mudah untuk di kenali, antara lain :

d.add(1,0
d.add(2,0
d.add(4,0
d.add(6,0
d.add(7,0

Kode angka yang bergandengan dengan angka 0 (nol) akan selalu menjadi induk dari menu dtree, jadi jika sobat menginginkan menu yang di simpan menjadi induk, sobat harus menuliskan angka yang berbeda kemudian di belakang koma harus di susul dengan angka nol.

d.add(3,1
d.add(5,1
Kode angka yang bergandengan dengan angka 1 (satu) akan menjadi cabang dari induk yang pertama. Akan tetapi angka di depan angka 1 (satu) adalah angka penentu bahwa menu ini akan menjadi cabang dari kode --> d.add(1,0

d.add(10,5
d.add(20,5
d.add(30,5
d.add(40,5
d.add(50,5
d.add(60,5

Terlihat bahwa angka yang bergandengan dengan angka 5 (lima) akan menjadi cabang dari menu --> d.add(5,1
begitupun angka yang bergandengan dengan angka 3 (tiga) akan menjadi cabang dari menu --> d.add(3,1

Ciri selanjutnya adalah tulisan yang tertera di samping icon selalu di dalam tanda petik (''), formasinya misal seperti ini :

 d.add(10,3,'','','','','');

Jika di jabarkan denga isi menu, seperti ini :

 d.add(10,3,'isi ke 1','isi ke 2','isi ke 3','isi ke 4','isi ke 5''isi ke 6');

isi ke 1 = adalah tulisan yang akan muncul terlihat langsung
isi ke 2 = adalah alamat yang di tuju apabila di klik tulisan dari isi ke 1
isi ke 3 = adalah judul atau titel atau tulisan yang akan muncul ketika mouse menyorot pada isi ke 1, akan tetapi ini berlaku bagi induk yang tidak mempunyai cabang, misal menu : my frienster.
isi ke 4 = terus terang saya tidak tahu pasti, tapi ada kemungkinan untuk alamat image
isi ke 5 = adalah untuk alamat image icon yang mau di munculkan
isi ke 6 = adalah untuk alamat image icon yang akan menggantikan icon isi ke 5

Misal :

 d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif','http://amen24.googlepages.com/globe.gif');
Blogroll = tulisan yang kan muncul pada menu induk
http://amen24.googlepages.com/globe.gif (isi ke 5) = icon yang mau  dunculkan di samping tulisan Blogroll
http://amen24.googlepages.com/globe.gif (isi ke 6) = icon yang mau  dunculkan ketika tulisan Blogroll di klik (akan tetapi dalam hal ini  alamatnya sama, maka gambar icon seolah tidak mengalami perubahan)

dan masih banyak ciri-ciri lainnya yang dapat memudahkan sobat untuk mengnalinya.

Bagaimana sudah jelaskah? atau masih tetap bingung? biar tidak terlalu bingung mending langsung bikin menu dtree nya, silahkan ikuti langkah-langkah berikut ini, akan tetapi jangan lupa untuk membuat Backup data dari template sobat:

Untuk template Klasik

Klik menu Template

Klik menu Edit HTML

Copy seluruh kode HTML yang ada, lalu save untuk back up

Simpan kode berikut di bawah kode <title><$BlogPageTitle$></title> :

  <link rel="StyleSheet" href="http://amen24.googlepages.com/dtree.css" type="text/css" />
<script type="text/javascript" src="http://amen24.googlepages.com/dtree.js"></script>

Copy kode berikut, lalu paste pada kode sidebar sobat (link nya harus di ganti dengan milik sobat):

<div class="dtree">

<p><a href="javascript: d.openAll();"><img src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://amen24.googlepages.com/minus.gif"><b>Close all</b></a></p>

<script type="text/javascript">
<!--

d = new dTree('d');

d.add(0,-1,'Home','http://kolom-tutorial.blogspot.com');


d.add(1,0,'Free template & navigation')

d.add(3,1,'free template','');
d.add(10,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-xml.html');
d.add(20,3,'Minima 3 ckolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column-xml.html');
d.add(30,3,'1st template unik','http://template-unik.blogspot.com/2007/07/1st-template-unik.html');
d.add(40,3,'Denim 3 kolom','http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html');
d.add(50,3,'Blue lover 3 kolom','http://template-unik.blogspot.com/2007/08/blue-lover-template-xml.html');
d.add(60,3,'Gray lover 3 kolom','http://template-unik.blogspot.com/2007/08/gray-lover-template.html');
d.add(70,3,'UniQue template R 1.1','http://template-unik.blogspot.com/2007/09/unique-template-r-11.html');
d.add(80,3,'UniQue template R 1.2','http://template-unik.blogspot.com/2007/09/unique-template-r-12_16.html');
d.add(90,3,'UniQue template R 1.3','http://template-unik.blogspot.com/2007/09/unique-template-r-13.html');
d.add(100,3,'template klasik');
d.add(110,3,'Minima 3 kolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column.html');
d.add(120,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-classic.html');

d.add(5,1,'Free css menu navigation');
d.add(10,5,'Horizontal blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');
d.add(20,5,'Horizontal blue menu (2)','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html');
d.add(30,5,'Horizontal double line menu','http://css-lybrary.blogspot.com/2007/09/horizontal-double-line-menu.html');
d.add(40,5,'Horizontal flip menu','http://css-lybrary.blogspot.com/2007/09/horizontal-flip-menu.html');
d.add(50,5,'Vertical green menu','http://css-lybrary.blogspot.com/2007/09/vertical-green-menu.html');
d.add(60,5,'Vertical transparent','http://css-lybrary.blogspot.com/2007/09/vertical-transparent-menu.html');
d.add(70,5,'Vertical blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');
d.add(80,5,'Vertical Yellow menu','http://css-lybrary.blogspot.com/2007/09/yellow-vertical-menu.html');
d.add(90,5,'Vertical red menu','http://css-lybrary.blogspot.com/2007/09/red-vertical-menu.html');

d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif','http://amen24.googlepages.com/globe.gif');
d.add(10,2,'UniQue template','http://template-unik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(20,2,'Css Library','http://css-library.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(20,2,'Terune sasaQ','http://terune-sasaq.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(30,2,'Bang dhika','http://bangdhika.blogspot.com/','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(40,2,'Rubrik Elektronik','http://rubrik-elektronik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(50,2,'Tukeran link','http://tukeran-link.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(60,2,'Pasar Info','http://pasar-info.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');

d.add(4,0,'Software super murah disini!','http://www.obralplus.com/?id=rohman','menjual berbagai software serta ebook dengan harga super murah, klik di sini!','','http://amen24.googlepages.com/action_save.gif');
d.add(6,0,'Belajar website di sini!','http://www.resepbisnis.com/?id=rohman','belajar membuat website itu sangatlah mudah, temukan caranya.klik di sini!','','http://amen24.googlepages.com/cd.gif');
d.add(7,0,'My friendster!','http://amn_tea.blogs.friendster.com/my_blog/','my friendster','','http://amen24.googlepages.com/friendsterku.gif');
d.add(8,0,'Recycle Bin','http://kolom-tutorial.blogspot.com/index.html','Recycle bin','','http://amen24.googlepages.com/trash.gif');


document.write(d);

//-->
</script>

</div>

Klik tombol Simpan Perubahan Template

Selesai.

Untuk Template Baru

Klik menu Layout

Klik menu Edit HTML

Klik tulisan Download Template Lengkap, save dulu untuk backup data biar aman

Copy paste kode berikut di atas kode </head>

  <link rel="StyleSheet" href="http://amen24.googlepages.com/dtree.css" type="text/css" />
<script type="text/javascript" src="http://amen24.googlepages.com/dtree.js"></script>

Klik tombol Simpan Template

Klik menu Elemen Halaman yang ada di sebelah atas monitor

Klik tulisan Tambahkan sebuah Elemen Halaman

Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript

Copy paste kode berikut pada kotak yang muncul (ganti link nya dengan milik sobat)<div class="dtree">

<p><a href="javascript: d.openAll();"><img src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://amen24.googlepages.com/minus.gif"><b>Close all</b></a></p>

<script type="text/javascript">

</script>

</div>

Klik tombol Simpan

Klik pada elemen yang barusan di buat, tahan lalu geser pada tempat yang di inginkan (di drag & drop)

Klik tombol Simpan yang berada di sebelah atas

Selesai. Silahkan lihat hasilnya

Huuuuuhhh..... cape uy nulis tutorial ini, dua malem baru deh kelar..... tapi alhamdulillah, akhirnya bisa juga di posting.

Selamat mencoba !

Sumber:Klik Disni

Buat Logo & Image Button

2010-05-12T15:22:00.000-07:00

Bagi para sobat yang sudah mahir menggunakan program desain grafis semisal adobe photoshop ataupun coreldraw serta teman-temannya yang lain, membuat sebuah logo bukanlah sebuah pekerjaan yang sulit, dan mungkin tutorial ini menjadi tidak menarik untuk di baca. But barangkali ada sebagian dari para sobat sekalian yang satu nasib dengan saya, sebenarnya saya pun boleh di katakan tidak awam banget dengan program-program desain grafis tersebut, akan tetapi tak cukup hanya menguasai tentu saja di perlukan suatu daya kreasi atau imajinasi yang tinggi untuk menciptakan sebuah logo.

Nah kalau ada diantara sobat sekalian yang senasib dan sepenanggungan seperti saya (lho ko jadi ngawur ngomongnya)jangan dulu berkecil hati, seperti biasa ada pepatah mengatakan banyak jalan menuju Roma ((irama)kaya postingan dulu...dah basi)untuk membuat logo kita bisa memakai jasa situs di internet, salah satunya yaitu cooltext.com, Silahkan ikuti langkah-langkah berikut ini :

Silahkan buka alamat http://cooltext.com
Lalu klik tulisan Design a Logo
Klik gambar contoh logo yang sobat sukai
Tulis tulisan yang ingin di jadikan logo di sampimg tulisan Logo Text. Misal : Blog Tutorial
Tulis ukuran yang di inginkan di samping Tulisan Text Size. Misal : 50
Klik logo warna-warni disamping kotak yang ada tulisan Text Color untuk memilih warna tulisan (text).silahkan pilih warna yg sobat sukai
Pilih format image disamping tulisan file format. sebaiknya .JPG atau .GIF
Klik tombol yang bertuliskan Render Logo Design
Tunggu beberapa saat ketika proses pembuatan logo berlangsung
Lihat hasil logo, sudah cocok apa belum? bila belum cocok, klik tulisan Edit this logo ulangi langkah diatas, rubah yang sobat inginkan. Jika sudah cocok, klik tulisan Download Image untuk kita simpan di PC kita
Selesai. Sobat sudah mempunyai sebuah logo.

Agar logo yang kita buat tadi bisa tampil di blog, sobat harus upload gambar tersebut ke blogger.com atau melalui situs lain. Tapi saya lebih suka menyimpannya di situs lain misal www.photobucket.com.

Untuk proses upload di photobucket.com, silahkan ikuti langkah-langkah berikut :

Silahkan buka alamat http://www.photobucket.com,
Jika belum terdaftar di situs ini, silahkan daftar dulu (gratis bo) dengan meng klik tombol yang bertuliskan Join Now pada sudut kanan atas layar
Sekarang saya asumsikan sobat sudah terdaftar (pastilah cara daftarnya bisa kan)
Silahkan Sign In dengan Id sobat
Bila sudah berada pada halaman Account sobat, Klik tombol yang bertuliskan Browse... Silahkan pilih logo yang tadi di buat
Klin tombol yang bertuliskan Upload
Tunggu beberapa saat ketika proses upload berlangsung
Setelah upload selesai, akan di perlihatkan gambar logo serta kode HTML nya
Copy kode HTML yang ada di sebelah tulisan URL Link. Paste pada program notepad
Silahkan klik tulisan Log Out untuk keluar dari account sobat. tutup layar browser sobat

Nah sekarang sobat tinggal memasukan kode gambar tadi ke blog ke blog sobat, cuma ada sedikit kode yang harus di tambahkan, karena kode tadi baru berupa Link Image saja. Contoh kode link image : http://i162.photobucket.com/albums/t253/rohman24/logoblogtutorial.jpg. Disini sobat harus menambahkan kode , sehingga kode tadi menjadi seperti ini :

Maka contoh hasilnya akan seperti ini :

Untuk cara memasukan kode HTML kedalam blog sudah sering di bahas, jika lupa silahkan klik di sini.

Sebagai tambahan, kode HTML di atas adalah kode untuk menampilkan image dengan ukuran yang sebenarnya. Apabila sobat ingin memperbesar atau memperkecil image tersebut, sobat bisa menambahkan beberapa atribut ke dalam kode HTML nya. Contoh : image tadi ingin saya tampilkan dalam ukuran 100px X 40px , maka kode tersebut menjadi seperti ini :

sedikit clue, kode width="..." yaitu untuk ukuran lebar image, jadi untuk memperbesar atau memperkecil image, sobat tinggal menambah atau mengurangi nilainya. kode height="..." yaitu untuk ukuran tinggi image, sobat tinggal menambah atau mengurangi nilainya. Untuk alt="..." yaitu untuk menampilkan tulisan ketika mouse berada pada image tersebut.

Sebagai contoh, hasil dari kode diatas adalah sebagai berikut, silahkan sorot image tersebut untuk melihat efek kode alt="..." :

Bagaimana sudah bisa kan? pasti bisa, kan sudah di coba. Sekarang bagaimana cara membuat image button? langkahnya sama saja dengan langkah-langkah di atas, cuma pada saat berada di situs cooltext.com yang sobat klik adalah tulisan Desiggen a Button bukan Design a Logo, contoh image button :

Ok sobat, selamat menikmati hasil karyanya

Sumber:Klik Disni

IE + FireFox dalam satu komputer

2010-05-12T15:18:00.000-07:00

Topik ini saya tulis bermula dari pengalaman saya beberapa bulan yang lalu. Sekarang saya mau flash back sebentar mudah-mudahan tidak membosankan. Ceritanya begini para sobat, di kantor tempat saya bekerja sekarang nih mempunyai beberapa buah komputer, yaitu buat orang-orang bagian akunting, resepsionis, teknisi, serta si bos sendiri. Ya kalo di itung-itung ada 8 buah komputer. Dari dulu, yang namanya browser internet pasti saya selalu memakai Internet Explorer dari Microsoft, tidak pernah browser yang lain.

Saat itu pekerjaan rada dikit, tentunya saya bisa sedikit bersantai ria. Iseng-iseng saya pinjem tuh kompi nya si mba tukang akunting temen saya, mau liat technorati barangkali ada yang nge link baru ke blog saya. setelah di buka ntuh kompi, eh saya lihat ada dua browser dalam ntuh kompi yaitu Internet Explorer plus Mozilla FireFox. Wah nyobain ah pake FireFox, katanya sih lebih cepat dan aman di banding dengan Internet Explorer yakni si FireFox ini lebih kebal terhadap virus-virus semacam Trojan dan teman-temannya.

Aku buka deh langsung ntuh si FireFox, hasilnya lumayan emang rada cepet sih, tapi kayanya rada - rada ada yang beda pada tampilan gambarnya, aku hiraukan saja ga mau mikir panjang-panjang and langsung aja ke www.technorati mau cek yang nge -link ke blog saya. Sesudah di cek, benar saja ada yang pasang link baru tanpa memberi tahu, aku langsung aja di klik ntuh linknya, betapa kagetnya daku saat itu, lho ko gambarnya begini acak-acakan nih blog ada gambarnya yang kepinggir, melorot dan lain sebagai, pokoknya pemandangan yang tidak mengasikan, apa pemilik blog ini ga sadar apa, blognya ancur begitu. Setelah kejadian yang kurang mengenakan tadi, buru-buru deh aku lihat blog ku, takutnya kaya kejadian tadi. Hasilnya sedikit melegakan, wah untung blogku tidak berantakan, cuma ada sedikit perbedaan saja. Karena penasaran, aku tutup tuh si FireFox dan langsung buka browser pake IE, dan aku balik lagi ke blog yang berantakan tadi, dan ternyata hasilnya sungguh mengherankan juga, yang tadinya aku lihat di FireFox sangat berantakan kalo di lihat pake IE sangat tersusun rapi dan menarik.

Itu tadi pengalaman pertama, pengalaman yang kedua, aku pake IE seperti biasa. yah yang namanya blogger musti rajin-rajin blog walking biar banyak temen. ceritanya saya mampir di suatu blog, wah ini blog berantakan banget (menurut saya lho). Trus baca-baca tuh isi blog, eh ada sedikit artikel dari sang pemilik blog itu sendiri, sedikit penggalan isi artikel tersebut kira-kira ada kata-kata begini : Buset deh, kebiasaan pake FireFox pas dilihatdi IE, blog ku ancur begini ya.

Menanggapi dua pengalaman tadi, saya mempunyai kesimpulan bahwa sebaiknya bagi para blogger mempunyai banyak browser internet dalam satu komputer, ini tentunya untuk memaksimalkan hasil dari blog kita, terutama bagi para sobat yang blognya berupa blog untuk bisnis, satu pengunjung ke blog sobat, berati satu peluang untuk mendapatkan keuntungan. Nah jika blog para sobat tidak menarik karena sebab tadi dari perbedaan pemakaian browser, tentunya jangankan mau membaca artikel penawaran bisnis dari sobat baru sampaipun langsung kabur. Ingat, di luar sana ribuan orang atau bahkan jutaan orang memakai browser yang berbeda dengan kita, maka itu tadi sobat harus mempunyai banyak browser pada komputer sobat, minimal dua browser paling terkenal di dunia yakni Internet Explorer dan Mozilla FireFox.

Bagi para sobat pengguna template buatan bukan dari blogger sendiri, coba cek blog sobat, barangkali blog sobat berantakan kalau di lihat di browser lain. Bagi para sobat pecinta program HTML text berjalan , hati-hati karena program ini tidak di mengerti oleh FireFox, jadi jika sobat menyimpan text terlalu banyak dalam marquee, jangan-jangan blog sobat jadi melorot atau melebar kesamping karena kelebihan quota space. Bagi yang suka pake kode untuk mengedipkan hurup buat narik perhatian pengunjung, kode sobat tidak di mengerti oleh IE tapi di mengerti oleh FireFox. Tentunya dari masing-masing Browser ada kelebihan dan kekurangannya, ya pandai-pandailah kita mensiasatinya.

Kalau di baca-baca, kayanya artikel kali ini bukan blog tutorial ya, lebih cenderung ke tips gitu. biarin aja ya, supaya ga bosen baca tutorial terus, cari yang beda gitu. Oke, thanks ya sobat, selamat mendownload FireFox nya.

Sumber:Kang Rohman

Membuat foto animasi

2010-05-11T20:00:00.000-07:00

Lagi-lagi saya berbicara tentang animasi, memang dengan animasi bisa bikin hidup jadi hidup ( kaya iklan aja ). Ya dalam kesempatan kali ini akan coba di bahas tentang bagaimana cara membuat animasi gambar ataupun foto. Bagi para sobat (mulai sekarang saya akan membiasakan diri menyebut anda menjadi sobat, biar lebih familier ya) yang sudah terbiasa menggunakan program animasi semisal MacroMedia Flash Player ataupun teman-temannya sudah barang tentu bukan hal yang wah ataupun aneh, tapi bagi sekelompok orang seperti saya ini, membuat animasi foto adalah suatu hal yang sangat sulit sekali.

Adakah diantara para sobat blogger yang seperti saya? jika jawabannya ada ya kita emang senasib (hiduplah senasib), tapi jangan dulu patah semangat sobat blogger, pepatah bilang banyak jalan menuju rhoma (irama).. dalam hal inipun sama ada jalannya yakni kita bisa menggunakan jasa situs-situs pembuat animasi. Di internet buaanyak sekali situs pembuat animasi foto, jumlahnya ribuan atau bahkan jutaan. Nah sebagai contoh yaitu http://www.slide.com. Untuk membuat sebuah foto animasi di slide.com, silahkan ikuti langkah-langkah berikut :

Silahkan buka situs www.slide.com

Langkah pertama yaitu sobat harus daftar dahulu pada situs tersebut

Klik tulisan Sign Up untuk melakukan pendaftaran (daftar gratis)

Masukan alamat email sobat pada kolom yang disediakan. isi juga password yang diinginkan

Jika sudah, silahkan klik tombol sign Up, dan otomatis sobat sudah masuk ke halaman account sobat

Langkah selanjutnya adalah melakukan pembuatan animasi

Klik style, untuk memilih gaya dari animasi

klik skin, untuk memilih bingkai animasi

klik Size untuk memilih ukuran

Klik Tombol Select Image, lalu masukan foto/image yang ingin sobat masukan

klik tombol Upload untuk melakukan proses upload foto

Jika proses upload selesai, klik tombolSave

Copy kode HTML yang di berikan, lalu paste pada program notepad

Klik tulisan Log Out untuk keluar dari situs tersebut. Silahkan tutup halaman browser

Langkah selanjutnya adalah memasukan kode HTML animasi tersebut ke dalam blog sobat, nah untuk cara memasukan kode HTML sudah sering saya bahas pada postingan terdahulu, jika lupa silahkan klik di sini

Contoh gambar animasi :

Ada pula contoh animasi dari http://www.picturetrail.com :

Get Your Own!

Atau para sobat bisa juga daftar di http://www.flickr.com

Selamat mencoba !

Sumber:Kang Rohman

Download Gratis

2010-05-11T19:56:00.000-07:00

Dalam sesi kali ini, ada kabar baik buat kawan-kawan semua. ya saya mau bagi-bagi software buat anda yang suka akan internet, khususnya bagi yang berminat untuk bisa membuat website sendiri. Untuk produk-produk di bawah ini saya sudah mendapatkan hak Resale Right atau hak jual ulang, tapi buat kawan-kawan semua khusus saya berikan gratis. Beberapa produk merupakan dalam format ZIP, silahkan gunakan winzip untuk mengekstraknya. Untuk membacanya, anda memerlukan Acrobat Reader versi 5.0 ke atas.

Klik di sini jika anda belum memiliki program Winzip.
Klik di sini jika anda belum memiliki program Acrobat Reader

• How to build HTML

Dengan e-book ini kita diajarkan cara menggunakan perintah-perintah HTML dasar dan tingkat lanjut. Di buat dalam format yang mudah untuk di ikuti. untuk mendownload silahkan klik disini atau klik :

Search Engine Optimization Made Easy

Strategi sederhana yang dapat anda pakai untuk optimalisasi website atau blog anda di search engine. Ikuti tipsnya dan dapatkan traficc sebanyak mungkin ke website atau blog anda. Untuk mendownload silahkan klik disini atau klik :

Instant Site Maker

Software ini akan mempermudah anda membuat website dalam waktu yang singkat. Cukup baik bila anda tidak memerlukan website yang kompleks. Untuk mendownload silahkan klik disini atau klik :

Java Buttons

Dengan kumpulan button dan menu yang menggunakan java script ini, bisa mempercantik website ataupun blog milik anda, untuk mendownload silahkan Klik disini atau klik :

Web Template

Kumpulan template web propesional yang dapat anda gunakan untuk mendesain website anda. Untuk mendownload silahkan klik disni atau klik :

Banner

Merupakan kumpulan banner cantik untuk mempromosikan website anda. Untuk mendownload silahkan klik di sini atau klik :

Meta Tag Master

Program untuk membuat meta tags, sehingga mempermudah pencarian website atau blog anda di search engine. Untuk mendownload silahkan klik di sini atau klik :

E-book "Menjadi Jutawan Via Internet"

E-book ini menjelaskan cara dan strategi mendapatkan penghasilan besar dengan memanfaatkan internet. Cara tsb antara lain : menjadi pembuat web professional, membuat "Web Pencetak Uang Otomatis" dengan konsep affiliasi & reseller, dan lain-lain. Dilengkapi pula dengan file-file latihan untuk memperjelas tuntunan praktis kami.

Script Web Affiliasi

Script Web Pencetak Uang Otomatis siap pakai dengan konsep affiliasi. Anda tinggal mengganti teks dan gambar sesuai dengan produk dan layanan anda!

Script Web Reseller

Script Web Pencetak Uang Otomatis siap pakai dengan konsep reseller. Anda tinggal mengganti teks dan gambar sesuai dengan produk dan layanan anda!

FletMail

Software ini memungkinkan anda untuk mengirim e-mail untuk berapapun jumlah penerima dengan sekali klik. Anda dapat menggunakan tags untuk mengganti kata-kata yang sesuai untuk penerima yang berbeda. Dengan demikian, setiap penerima akan merasa mendapat e-mail personal dari anda.

Image Capture

Dengan menggunakan software ini, anda dapat menangkap image dari layar komputer anda.

IP Ad Web Sender

Software ini memungkinkan anda untuk mengirimkan promosi kepada komputer-komputer yang terhubung dengan internet berdasarkan range IP addressnya.

Instant Software Downloads

Software yang bisa anda download adalah : Instant Unzip, HTML Compressor, IP Blocker, Link Evaluator, Site Submitter, Pop Up Zapper, Secret Popup Maker, HTML E-mail Link Encrypter, File Destroyer, Internet Explorer Blaster, MRU Wizard, Java Source Machine I, Java Source Machine II, Traffic Wizard, Password Manager, JavaScript Compressor, HTML Encryptor, Fast HTML Remover, Password Generator, File Splitter, HTML Editor, Picture Gallery Maker, Instant Notification.

The Building of a Better Website

Berisi tips-tips berharga bagaimana membangun sebuah website yang baik. Patut dimiliki untuk mendukung karir anda sebagai webmaster.

Magic Subscriber

Demi meningkatkan penjualan bisnis anda, anda dapat menggunakan software ini. Software ini mudah digunakan untuk menghasilkan prospek dan customer baru! Anda akan memiliki alat khusus yang akan menangkap data e-mail pengunjung tanpa mereka perlu menuliskannya!

Reprint Rights Magic

Bagaimana cara menghasilkan uang tanpa perlu menggunakan produk anda sendiri ? Bagaimana menggunakan rangkaian produk orang lain untuk menciptakan produk anda ? Informasi penting bagi anda yang ingin menghasilkan uang tanpa perlu merancang produk.

Instant eMail Scramble

Apakah anda jengkel dengan banyaknya junk mail yang anda terima setiap hari ? Dengan menggunakan utility ini, alamat e-mail anda di website anda akan terlindungi dari mesin penuai e-mail untuk keperluan spam! Alamat e-mail anda akan tetap terbaca oleh pengunjung website anda, dan juga berfungsi seperti biasa bila pengunjung mengklik link e-mail anda.

Pure Profit Software

Paket produk software yang sangat menarik! Berisi produk-produk pilihan seperti : Affiliate Defender, Instant Affiliate Link Master, Instant Meta Maker, Instant Bookmark, JavaScript Magic, dll.

PopUps Generator

Dengan menggunakan software ini, anda dapat membuat popups window dari website anda. Anda dapat memanfaatkannya untuk meningkatkan rasio penjualan dan pendaftar mailing list anda.

99 Websites You Should Have Bookmarked..But Probably Don't

Internet dipenuhi dengan informasi gratis, sarana penghasil uang dan sumber lainnya. Hanya saja, mungkin anda tidak tahu tempat menemukannya. Informasi dalam e-book ini akan memberikan alamat websitenya untuk anda! The Embarrasingly Simple Way I Grabbed the #1 Position in Google, Yahoo & AOL Search engine merupakan gudangnya traffic. Dapatkan rahasianya bagaimana cara meraih posisi teratas di hasil pencarian pada 3 search engine terpopuler!

Intraday Basic

Bambang Hariyadi membeberkan 2 strategi andalannya dalam membaca "CandleStick" yang terbukti menghasilkan $4500 dalam seminggu !! (Forex market http://www.betonmarkets.com). Anda ingin mendapatkan $4500 minggu depan? Miliki segera e-book ini, dan dapatkan strateginya!

The TrafficJam Formula

Salah satu kunci keberhasilan bisnis di internet adalah jumlah traffic/pengunjung yang dihasilkan oleh suatu website. E-book ini memberikan informasi menarik cara menghasilkan sebanyak mungkin traffic ke website anda dalam waktu singkat! Baca secara detail di websitenya bagaimana sang penulis berani menjamin keberhasilan anda dalam mencari traffic!

The Affiliate Marketing Success Road Map

Jika anda ingin menjadi affiliate/reseller yang sukses, maka e-book ini untuk anda! Anda akan diberi cara mencapai sukses dengan merencanakan dan mendesain sistim yang efektif untuk mendatangkan profit.

Newbie's Guide to Online Fortunes

E-book ini berisi petunjuk mengenai prinsip dasar dan cara sederhana untuk memulai bisnis on-line anda !

How to Write and Publish Your Own eBook in as little as 7 Days

Bagaimana cara membuat dan mempublikasikan sebuah e-book yang sukses ? Anda akan mendapatkan informasinya di sini.

Internet Copycatting

9 Model bisnis internet yang dapat anda tiru. Disertai dengan pembahasan pro dan kontra, detail mengenai setup, serta interview dengan pelaku bisnis untuk masing-masing model. Anda tidak perlu bingung lagi memikirkan model bisnis internet, tinggal tiru, dan mulailah menghasilkan uang !

Download Page Generator

Dengan menggunakan program ini, maka anda tinggal mengisi formulir pertanyaan dengan data-data yang diperlukan, dan secara otomatis halaman download/halaman ucapan terimakasih akan terbentuk untuk anda. Yang biasanya membutuhkan waktu 30 menit sampai satu jam untuk membuatnya, dengan program ini hanya butuh waktu satu menit saja !

Scroll Pops

Paket berisi 10 script yang mudah untuk digunakan. Anda dapat menggunakannya di website anda untuk membuat Confirmation Windows, Subscriber PopUps, Bookmark Windows, Alert Windows, dan lain-lain.

PHP Instant Scripts

Script-script pilihan telah kami sediakan untuk anda. Untuk kepuasan anda, script-script ini telah kami uji sebelumnya!

Terdiri dari script : Affiliasi, Portal, Forum, E-Commerce, Hit Counter, Guest Book, Polling, Image Gallery, Classified Ad, Message Board, Search Engine, Event Calendar, Chat, News Publishing, Greeting Cards, User-Online, Mailing List, Simple Calendar, Calculator, Simple Counter, Unit Converter.

SOFTWARE DAN E-BOOK BERHARGA LAINNYA UNTUK ANDA :

Wholesalers 2000 - Extreme Mega Edition

Website4Sale Secrets

101 Auction Secrets Revealed

Don-Lapre Info Reports

Auction Prophet

Millenium Info Reports

The Cash Flow Deluxe : Info-Software Programs

Using NLP On eBay

Cyber Tactics 101

Internet Traffic Virus 2.0

Internet Success Ladder

Free Advertising System

Yahoo Secrets Revealed

57 Free eBook Articles

WebPage-O-Matic (Personal Edition)

WebPage-O-Matic (Business Edition)

eZine Assistant

Priority Mailer

Internet Marketing Toolbar Pro

Cheap But Good

eBook Gold v3

Web Site and E-zine Promotion Made Easy

Amazing Marketing Tactics

TRAFFIC VIRUS

TYPEITIN SOFTWARE

KILLTIMER v4.9 SOFTWARE

WEB-O-RAMA SOFTWARE

CREATING PROFITABLE CLASSIFIED ADS

CASH FLOW REPORTER HOW TO SERIES

MAIL ORDER SERIES OF REPORTS

eBiz Tips Tricks

INTERNET DETECTIVE 5.0

TAKE THE INTERNET BY STORM

FILLOUT MANAGER

EXPRESS MAIL SERVER

EMS KEY GENERATOR

WEBFORCE

5000+ ADSUBMITTER

DOUBLE YOUR BUSINESS

SEARCH ENGINE TACTICS

TARGETED DIRECT EMAIL GUIDE

OFFSHORE REPORT

000 CLASSIFIEDS

AUCTION TIPS

167 REPORTS

UNLIMITED PROFITS

INTERNET OPTIMIZER

CYBCASH SOFTWARE

LIST MANAGER

ARACHNOPHILIA

INSIDER SECRETS

MAKE YOUR ADS PULL LIKE CRAZY

INTERNET MARKETING PORTFOLIO

EARN A FORTUNE

WEBCELERATOR

CREATE YOUR OWN INFO PRODUCTS

AD/SALES LETTER TIPS

CHECKER SOFTWARE

101 SECRETS

ONE MILLION ITEMS WHOLESALE

INTERNET TIPS REVEALED

Using TV

Legal Forms

Business Reports

Consumer Reports

Reference Reports

Well Known Books

Volume 2 of the E-Business Encyclopedia Set

Volume 3 of the E-Business Encyclopedia Set

Historical Stuff

Anda ingin mendapatkan semua produk diatas? Jika ya silahkan klik disini atau klik Banner di bawah ini :

Sumber:Klik Disini

Pasang Buku Tamu di Sidebar

2010-05-11T18:25:00.000-07:00

Memasang sebuah buku tamu (shoutbox/guestbook) pada sebuah blog adalah hal yang cukup lumayan penting,karena buku tamu ini merupakan salah satu sarana untuk berinteraksi antara yang mpunya blog dengan para pengunjung blog. Dengan di pajangnya buku tamu di dalam blog, maka para pengunjung dapat mengungkapkan isi hatinya tentang blog yang anda buat, yang pasti isi dari sebuah buku tamu ini sangatlah bervariasi bisa merupakan pujian, pertanyaan, sekedar iseng, atau ada juga merupakan kritikan terhadap isi blog anda, dan justru dengan adanya variasi itulah membuat blog kita jadi hidup lebih hidu (kaya iklan aja).

Ok, terlalu lama intermezonya ya, sekarang kita kembali (ke lap...top) ke topikbahasan. Bagaimana caranya mendapatkan sebuah buku tamu. Untuk mendapatkannya sangat mudah, anda tinggal mencarinya pada mesin pencari semisal google ataupun yahoo, silahkan ketikan kata free shoutbox atau free guestbook pada search engine masing-masing situs, maka dalam beberapa detik saja akan muncul berpuluh-puluh situs penyedia buku tamu tadi, anda tinggal klik lalu coba lihat-lihat. Tapi untuk menghemat waktu pencarian anda, maka di sini saya akan langsung memberikan alamat situs penyedia buku tamu yang servernya lumayan bagus dan jarang sekali mengalami down yakni http://www.shoutmix.com. Untuk caranya silahkan anda ikuti langkah-langkah berikut ini :

Seperti biasa anda harus daftar terlebih dahulu dengan cara mengklik tulisan Get One noe, free>>, ataupun dengan mengklik tulisan Sign Up, silahkan anda tulis data-data anda pada form yang telah di sediakan.
Jika sudah tedaftar, dan di terima jadi anggota shoutmix, silahkan anda login dengan id anda
Pada kolom yang berjudul Style, klik menu appearance.
Silahkan klik menu pulldown di samping tulisan Load From Preset untuk mengatur tampilan buku tamu anda, silahkan pilih yang sesuai dengan keinginan anda. Jika sudah selesai klik Save Setting.
Untuk mendapatkan kode HTML dari shoutbox anda, silahkan klik Use Shoutbox yang berada di bawah menu Quick Start
Klik tulisan Place Shoutbox on web page. Isi lebar dan tinggi shoutbox yang di inginkan
Copy seluruh kode HTML yang ada pada text area yang berada di bawah tulisan Generated Codes, lalu simpan di program Notepad anda
Klik Log out yang berada di atas layar anda untuk keluar dari halaman shoutmix anda. Silahkan close situs tersebut.
Selesai

Untuk menempatkan kode HTML shoutbox tadi pada blog anda, silahkan ikuti langkah-langkah berikut ini.

Untuk blogger dengan template klasik :

Log in terlebih dahulu ke blogger.com dengan id anda
Klik menu Template
Klik Edit HTML
Paste kode HTML shoutbox anda yang telah di copy pada notepad tadi di tempat yang anda inginkan
Untuk jelasnya saya ambil contoh dengan shoubox milik saya, untuk menempatkannya tinggal klik Edit pada browser lalu pilih Find (on this page).. trus tuliskan kata buku tamu lalu klik find, maka kita akan langsung di bawa ke tulisan tersebut. Jika sudah ketemu tulisan tadi silahkan paste kode HTML shoutbox nya.
Klik tombol Preview untuk melihat perubahan yang kita buat.
Jika sudah cocok dengan perubahan tadi, klik Save Template Changes
Selesai

Sedikit Clue, agar shoutbox anda sesuai dengan ukuran lebar sidebar , anda bisa merubah ukuran lebar ataupun tinggi dari shoutbox , caranya anda tinggal merubah angka Width (untuk lebar) dan Height (untuk tinggi) dari dalam kode HTML shoutbox tersebut.

Untuk Blogger baru :

Silahkan Login dengan id anda
Klik menu Layout
Klik Page Element
Klik Add a Page Element
Klik tombol Add to Blog yang berada di bawah tulisan HTML/JavaScript
Tuliskan judul shoutbox anda pada form title. Contoh : Buku tamu ku, atau my guestbook atau apa saja yang anda suka
Copy paste kode HTML shoutbox anda di dalam form Content
Klik tombol Save Changes
Drag & Drop element yang telah anda buat tadi di tempat yang di sukai
Tekan tombol Save
Selesai

Selamat mencoba !

Sebagai tambahan, guestbook yang sering dipakai para blogger lainnya :

http://oggix.com

Untuk langkah-langkahnya hampir sama dengan langkah diatas.

Sumber:Kang Rohman

Membuat Banner Animasi

2010-05-11T18:23:00.000-07:00

Agar blog kita tampil dinamis dan lebih atraktif, salah satu caranya adalah dengan memajang banner animasi.karena dengan banner animasi, mata dari pengunjung akan langsung tertuju kepada banner tersebut, terutama apabila anda seorang pebisnis, banner animasi akan lebih efektif untuk iklan yang kita pasang di banding dengan banner biasa. Cara membuat banner animasi sangatlah mudah, mau yang gratisan ada, mau yang bayar juga ada.Tapi tentunya ada kelebihan dan kekurangannya.

bagi anda yang berminat dengan banner animasi gratis, anda bisa kunjungi http://www.addesigner.com Silahkan daftar (gratis), Jika sudah di terima anda tinggal memilih banner yang di sediakan, trus ya tinggal di masukin ke blog, mau di sidebar atau di dalam postingan tentu bisa. Untuk cara pemasangan silahkan anda baca postingan terdahulu bagaimana cara memasukan kode HTML kedalam blog.

Contoh banner animasi :

selamat mencoba.

Sumber:Klik Disini

Pasang Jam di Sidebar

2010-05-11T18:12:00.000-07:00

Agar blog anda tampak cantik dan menarik untuk di lihat, maka anda bisa memasang beberapa aksesori blog, salah satunya adalah dengan cara memasang jam. Jam ini bisa anda dapatkan secara gratis pada situs Clock Link. Salah satu contoh jam yang tersedia adalah sebagai berikut :

Dan bagi anda yang ingin blognya di pasang jamjuga, silahkan ikuti langkah-langkah berikut :

Silahkan kunjungi situs http://www.clocklink.com
Jika sudah berada pada situs tersebut, silahkan klik tulisan Want a clock on your Website ?
Silahkan anda melihat-lihat dulu model dari jam yang tersedia, yaitu mulai dari Analog, Animal, Animation, dll
Jika di rasa sudah menemukan model jam yang anda sukai, klik tulisan View HTML tag yang berada di bawah jam yang anda sukai tadi
Klik tombol yang bertuliskan Accept
Pilih waktu yang sesuai dengan tempat anda di samping tulisan TimeZone. Contoh : untuk indonesia bagian barat pilih GMT +7:00
Set ukuran jam yang anda sukai di samping tulisan size
Copy kode HTML yang di berikan pada notepad
Paste kode HTML yang di copy tadi pada tempat yang anda inginkan
Selesai

Karena kode jam blog ini adalah merupakan suatu kode HTML, maka bagi anda yang masih bingung cara menempatkan kode HTML pada template blog, silahkan baca kembali postingan saya terdahulu di sini

Selamat mencoba.

Blogger Emoticons

2010-05-11T17:57:00.000-07:00

Biar senyum nya makin lebar, and kalo ketawa makin ngakak dikala posting artikel, saya berikan perbendaharaan wajah-wajah kamu...

Blogger Emoticons

<img src="http://photos1.blogger.com/blogger/7678/802/1600/wink.gif">

<img src="http://photos1.blogger.com/blogger/7678/802/1600/biggrin.gif">

<img src="http://photos1.blogger.com/blogger/7678/802/1600/cool.gif">

<img src="http://photos1.blogger.com/blogger/7678/802/1600/mad.gif">

<img src="http://photos1.blogger.com/blogger/7678/802/1600/sad.gif">

<img src="http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif">

<img src="http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif">

<img src="http://photos1.blogger.com/blogger/7678/802/1600/smile.gif">

Selamat menghiasi postingannya...

Sumber:Klik Disini

Yahoo ! Messenger Emoticons

2010-05-11T17:35:00.000-07:00

Buat kawan-kawan yang ingin menghiasi posting-annya dengan berbagai ekspresi dari yahoo, saya berikan source codenya, biar anda bebas ngakak atau cemberut selagi posting. Silahkan copy source code berikut, sisipkan pada kata yang sesuai dengan postingan anda, kalo lagi sedih jangan di pasang yang lagi ngakak, trus kalo lagi patah hati ya nyengir aja ya...

:)happy
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif" width=18 height=18 border=0>

:(sad
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif" width=18 height=18 border=0>

;)winking
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif" width=18 height=18 border=0>

:Dbig grin
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif" width=18 height=18 border=0>

;;)batting eyelashes
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif" width=18 height=18 border=0>

>:D<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/6.gif" width=42 height=18 border=0>

:-/confused
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif" width=20 height=18 border=0>

:xlove struck
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif" width=18 height=18 border=0>

:">blushing
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/9.gif" width=18 height=18 border=0>

:Ptongue

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif" width=18 height=18 border=0>

:-*kiss

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif" width=18 height=18 border=0>

=((broken heart
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif" width=18 height=18 border=0>

:-Osurprise

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif" width=18 height=18 border=0>

X(angry
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif" width=34 height=18 border=0>

:>smug

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif" width=18 height=18 border=0>

B-)cool
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif" width=18 height=18 border=0>

:-Sworried

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif" width=18 height=18 border=0>

#:-Swhew!

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif" width=34 height=18 border=0>

>:)devil

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/19.gif" width=18 height=18 border=0>

:((crying
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif" width=22 height=18 border=0>

:))laughing

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif" width=18 height=18 border=0>

:straight face
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif" width=18 height=18 border=0>

/:)raised eyebrow

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/23.gif" width=18 height=18 border=0>

=))rolling on the floor

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif" width=30 height=18 border=0>

O:-)angel

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/25.gif" width=30 height=18 border=0>

:-Bnerd

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif" width=24 height=18 border=0>

=;talk to the hand
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/27.gif" width=18 height=18 border=0>
Yahoo hidden emoticons

:o3puppy dog eyes - New!
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/108.gif" width=31 height=18 border=0>

:-??I don't know
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/106.gif" width=40 height=18 border=0>

%-(not listening
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/107.gif" width=52 height=18 border=0>

:@)pig

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/49.gif" width=18 height=18 border=0>

3:-Ocow
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/50.gif" width=18 height=18 border=0>

:()monkey
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/51.gif" width=21 height=18 border=0>

~:>chicken
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/52.gif" width=18 height=18 border=0>

@};-rose

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/53.gif" width=18 height=18 border=0>

%%-good luck
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/54.gif" width=18 height=18 border=0>

**==flag

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/55.gif" width=25 height=18 border=0>

(~~)pumpkin

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/56.gif" width=17 height=18 border=0>

~O)coffee

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/57.gif" width=18 height=18 border=0>

*-:)idea
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/58.gif" width=30 height=18 border=0>

8-Xskull

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/59.gif" width=18 height=18 border=0>

=:)bug

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/60.gif" width=20 height=18 border=0>

>-)alien

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/61.gif" width=18 height=18 border=0>

:-Lfrustrated

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif" width=18 height=18 border=0>

[-O<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/63.gif" width=18 height=18 border=0>

$-)money eyes

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/65.gif" width=22 height=18 border=0>

:-"whistling

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif" width=18 height=18 border=0>

b-(feeling beat up
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/67.gif" width=22 height=18 border=0>

:)>-peace sign

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/68.gif" width=22 height=18 border=0>

[-Xshame on you
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/69.gif" width=26 height=18 border=0>

\:D/dancing
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/70.gif" width=23 height=18 border=0>

>:/bring it on
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif" width=18 height=18 border=0>

;))hee hee

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/76.gif" width=36 height=18 border=0>

:-@chatterbox
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/77.gif" width=32 height=18 border=0>

^:)^not worthy
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/78.gif" width=26 height=18 border=0>

:-joh go on

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/79.gif" width=18 height=18 border=0>

(*)star

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/72.gif" width=18 height=18 border=0>

o->hiro

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/73.gif" width=18 height=18 border=0>

o=>billy

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/74.gif" width=18 height=18 border=0>

o-+april
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/75.gif" width=18 height=18 border=0>

(%)yin yang
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/75.gif" width=18 height=18 border=0>

Selamat mempercantik postingan nya...

Sumber:Klik

Masalah Posting Artikel

2010-05-11T16:31:00.000-07:00

Udah tiga hari ini saya tidak update, ma'lum kemarin abis pulang dari kampung halaman, yo'i bandung tercinta, nemuin si kembar and istri terkasih...lho ko jadi curhat...

Ok udahan ah intermezonya..jadi garing kalo lama-lama. langsung aja tadi pas buka email, ada seorang kawan yang bertanya kira-kira isinya begini:

Saya mau tanya nich, saya masih awam dalam blogging dan saya kesulitan untuk mengatur postingan saya, yang saya maksud adalah untuk mengatur paragraph postingan, pada saat saya mengetik pada kolom compose, pada tiap paragraph saya selalu memberikan jarak satu spasi dengan menekan tombol enter, tapi hasilnya publishnya tidak sesuai dengan pengaturan saya pada kolom compose sebelumnya, itu gimana solusinya yach ? Atas perhatian dan bantuannya saya ucapkan terima kasih...Wss

Sebenarnya sudah saya jawabin lewat email, tapi saya pikir-pikir mending di posting aja topik ini barangkali ada manfaatnya buat kawan-kawan yang punya permasalahan yang sama.

Untuk masalah ini, saya sarankan jika setelah mengetik artikel di mode COMPOSE,sebelum di publish, sebaiknya pindah dulu ke mode Edit HTML. Nah pada sela-sela paragrap yang ingin di beri jarak kita sisipkan kode --> <br/>
satu kode <br/> berarti satu line break ke bawah, jadi kalau jarak yang di inginkan jauh ke bawah kita tinggal tambahkan kode <br/> beberapa kali.

Contoh :

Di kabarkan padai awal tahun 2007 kemarin telah di luncurkan suatu produk alarm mobil yang mengklaim dirinya sebagai alarm tercanggih di dunia. Produk tersebut terdiri dari dua item produk dengan kecanggihan yang berbeda.
<br/><br/>
Produk pertama :
<br/><br/>
Alarm dengan menggunakan sim card, yakni alarm yang bisa me report kepada pemilik melalui teknologi GSM. Semisal mobil kita di ganggu orang sehingga bunyi, maka mobil ini akan secara otomatis menelpon kita untuk me report bahwa mobil kita di ganggu, Jangkauannya sampai dengan jangkauan provider dari GSM selularnya.

Maka yang akan muncul di blog kita akan seperti ini :

Di kabarkan padai awal tahun 2007 kemarin telah di luncurkan suatu produk alarm mobil yang mengklaim dirinya sebagai alarm tercanggih di dunia. Produk tersebut terdiri dari dua item produk dengan kecanggihan yang berbeda.

Produk pertama :

Alarm dengan menggunakan sim card, yakni alarm yang bisa me report kepada pemilik melalui teknologi GSM. Semisal mobil kita di ganggu orang sehingga bunyi, maka mobil ini akan secara otomatis menelpon kita untuk me report bahwa mobil kita di ganggu, Jangkauannya sampai dengan jangkauan provider dari GSM selularnya.

atau bisa juga kita menggunakan tag <p> ... <p>, tapi saya lebih menyukai tag <br/> tadi.

Untuk permasalahan tadi saya rasa sudah cukup jelas, nah saya sarankan bila kawan-kawan ingin terbiasa dengan kode HTML, maka ketika posting artikel sebaiknya pada posisi Edit HTML jangan pada posisi Compose, sebab ada peribahasa alah bisa karena biasa.

Mudah-mudahan bermanfaat.

Sumber:Klik Disini

Kode HTML tampil di posting-an

2010-05-11T16:15:00.000-07:00

Ada seorang teman bertanya begini, bang rohman gimana caranya agar kode HTML bisa tampil di posting-an blog? Nah dari situ muncul ide untuk membuat posting-an ini, barangkali ada diantara kawan-kawan semua yang juga mempunyai pertanyaan seperti itu? jawabannya mungkin begini. Agar kode-kode HTML dapat muncul pada posting-an blog kita, ada beberapa cara dan yang saya ketahui saat ini cuma baru dua cara ( barangkali kawan-kawan ada yang lebih tahu ).

Yang pertama yaitu anda harus mengganti karakter-karakter perintah dari program HTML dengan notasi tertentu. Karakter-karakter yang sering di gunakan yaitu seperti yang tertera pada tabel di bawah ini :

Karakter	Notasi	Keterangan
	<	Kurung runcing terbuka
>	>	Kurung runcing tutup
&	&	Tanda Dan
"	"	Tanda petik ganda
±	±	Tanda plus minus
Spasi		Tanda Spasi
©	©	Tanda hak cipta (copyright)
®	®	Tanda terdaftar (Registered)

Nah agar lebih paham akan saya beri contoh, misalkan dalam postingan anda berisi kata-kata seperti ini :

Untuk membuatnya cukup dengan hanya membubuhkan program di bawah ini :

<meta http-equiv="refresh" content="10">

</meta>

Nah (dari tadi perasaan nah nah melulu , pake kata lain nape!... ) di dalam postingan anda, jika ingin tampil seperti itu maka yang di tuliskan tidak persis seperti kode di atas, sebab nanti di postingan tulisan kode tersebut tidak akan muncul, yang ada justru efek dari kode yang anda tuliskan. trus jalan keluarnya gimana? Seperti yang saya tuliskan pada tabel, anda harus mengganti karakter-karakter perintah yang ada dengan notasi penggantinya, jadi yang harus anda tuliskan pada postingan adalah seperti ini :

Untuk membuatnya cukup dengan hanya membubuhkan program di bawah ini :

&ltbr/>


<meta http-equiv="refresh" content="10">


</meta>

Pembubuhan perintah <code> dan </code> adalah untuk menandakan bahwa yang anda tulis adalah sebuah kode HTML, dan nantinya pun tulisan-tulisan yang berada dalam perintah ini akan tanpil beda dengan tulisan-tulisan yang lainnya, sebagai contoh silahkan anda lihat postingan saya yang lainya yang membubuhkan kode-kode HTML. pembubuhan perintah <br/> adalah untuk membuat tulisan berpindah kebawah, jika anda tidak membubuhkan perintah <br/> tadi, walaupun di posting-an anda tulis jauh kebawah, hasilnya akan tetap bersatu.

Huh cape juga ya dari tadi kutak-ketik nih.., itu tadi cara yang pertama. Cara yang kedua adalah dengan menggunakan text area. Cara membuat text area secara lengkap silahkan klik di sini. Sebagai contoh, untuk menuliskan kode-kode di atas, pada posting-an anda harus menuliskan seperti ini :

Untuk membuatnya cukup dengan hanya membubuhkan program di bawah ini :

<br/><br/>
<p align="left"><textarea name="code" rows="6" cols="400"><meta http-equiv="refresh" content="10"> </meta></textarea></p>

Maka yang akan tampil di blog anda adalah seperti ini :

Untuk membuatnya cukup dengan hanya membubuhkan program di bawah ini :

mudah bukan? selamat mencoba dan berkarya.

oupss... saya lupa kawan, untuk memposting seperti yang saya jelaskan dia atas, anda harus pada posisi Edit HTML jangan pada posisi compose.

oke kawan, untuk yang kedua kalinya...selamat mencoba.

Sumber:Kolom Tutorial

Membuat Refresh

2010-05-11T16:07:00.000-07:00

Fungsi refresh di gunakan untuk membuat “penyegaran” kembali halaman blog ataupun website. Fungsi refresh ini sama dengan fungsi refresh yang ada pada browser internet, perbedaannya yaitu fungsi ini di buat bekerja secara otomatis, yakni pengguna tidak perlu menekan tombol refresh yang ada pada tool bar.

Untuk membuatnya cukup dengan hanya membubuhkan kode di bawah ini :

<meta http-equiv="refresh" content="10"/>

Simpan kode di atas antara <head> .... </head>

sedikit uraian kode diatas, content="10" --> angka sepuluh menunjukan bahwa proses refresh akan di lakukan dalam rentang waktu 10 detik. Jadi sebaiknya angka ini di set jangan terlalu cepat karena bisa menimbulkan kejengkelan kepada para pembaca apabila terlalu cepat di refresh.

Fungsi refresh selain untuk menyegarkan kembali halaman-halaman blog, ada fungsi lain yang juga cukup menarik, yakni berfungsi sebagai Redirect dari satu URL addres ke URL addres yang lain. Ini berfungsi jika anda ingin membawa pengunjung blog atau situs anda ke alamat situs yang anda inginkan. Agar lebih jelas, saya ambil salah satu contoh. Ada teman saya sudah lama nge blog, dan setelah sekian lama kemudian dia membuat situs baru. Jadi blog yang lama tidak ingin di aktifkan lagi (di non aktifkan). Nah selain memakai cara meninggalkan pesan bahwa alamat situs atau blog sudah pindah alamat, alangkah baiknya kita memakai fungsi Refresh yang di setting secepat mungkin yakni waktu refresh di set 0 (nol) detik. Jadi apabila ada pengunjung yang mengunjungi alamat blog tersebut akan secara otomatis di bawa langsung ke alamat baru yang di inginkan.

Fungsi Redirect ini bisa di buat dengan kode :

<meta http-equiv="refresh" content="0;URL=tulis alamat URL tujuan di sini"/>

Selamat mencoba.

Sumber:Klik Disini