Blog pribadi, tulisan pengalaman namun sayangnya tidak banyak yang bisa saya tulis disini
Penjernih Air dan Cara Menentukan Air Berkualitas Secara Manual
Mulai tertarik Hidroponik
”Dia-lah, yang telah menurunkan air hujan dari langit untuk kamu, sebahagiannya menjadi minuman dan sebahagiannya (menyuburkan) tumbuh-tumbuhan, yang pada (tempat tumbuhnya) kamu menggembalakan ternakmu. Dia menumbuhkan bagi kamu dengan air hujan itu tanam-tanaman; zaitun, korma, anggur dan segala macam buah-buahan. Sesungguhnya pada yang demikian itu benar-benar ada tanda (kekuasaan Allah) bagi kaum yang memikirkan” (QS. An-Nahl: 10-11)
![]() |
Bayi Pok Choy mulai tumbuh |
Dari sisi kesehatan tanaman, hidroponik lebih unggul dibanding dengan pertanian konvensional, hidroponik biasanya ditanam di green house, dari beberapa orang yang berpengalaman di hidroponik mereka kebanyakan menggunakan pestisida organik serta beberapa teknik yang memungkinkan terhindar dari serangan hama.
Semoga dari catatan kecil tentang hidroponik ini dapat menginspirasi kita semua untuk mulai melakukan hal-hal kecil namun memberi manfaat yang sangat besar bagi anak cucu kita.
Membuat Menu Blog Model Vista
Beberapa penjelasan saya buat agar bisa dilakukan modifikasi sesuai selera.

Model menu ini menggunakan HTML dan CSS, untuk kode CSS akan kita letakkan sebelum tanda </b:skin>.
img{ border: 0pt; } #bottom_div{ width: 520px; height: 150px; background-color: #b9d1ea; clear:both; } #vista_toolbar { float:left; font:normal 12px 'Trebuchet MS','Arial'; margin:0; padding:0; } #vista_toolbar ul { background-image:url(http://i616.photobucket.com/albums/tt248/bahron2000/back.gif); background-repeat:repeat-x; float:left; line-height:32px; list-style:none; margin:0; padding:0 10px 0 10px; width:500px; } #vista_toolbar li { display:inline; padding:0; } #vista_toolbar a { color:#FFF; float:left; padding:0 3px 0 3px; text-decoration:none; } #vista_toolbar a span { display:block; float:none; padding:0 10px 0 7px; } #vista_toolbar a span img { border:none; margin:8px 4px 0 0; } /* tampilkan gambar ketika mouse over link */ #vista_toolbar a:hover{ background: url(http://i616.photobucket.com/albums/tt248/bahron2000/left.png) no-repeat left center; } #vista_toolbar a:hover span { background:url(http://i616.photobucket.com/albums/tt248/bahron2000/right.png) no-repeat right center; } #vista_toolbar a.right { float:right; } } |
dari kode css diatas dapat dijelaskan sebagaiu berikut :
#bottom_div{ width: 520px; height: 150px; background-color: #b9d1ea; clear:both; } | Mendefinisikan lebar bottom =520 piksel dan tinggi=150 piksel dengan warna latar belakang kode heksa #b9d1ea seperti dibawah ini :
|
#vista_toolbar ul { background-image:url(http://i616.photobucket.com/albums/tt248/bahron2000/back.gif); background-repeat:repeat-x; float:left; line-height:32px; list-style:none; margin:0; padding:0 10px 0 10px; width:500px; } | Membuat vista toolbar dengan mengambil gambar dari background image yang sudah ditentukan yaitu bentuk ![]() |
kode HTML dibawah ini kita letakkan pada bagian "Gadget->HTML/Java Script" kemudian digeser letaknya pada bagian posting paling atas atau dibawah header. berikut ini kode HTML
<div id="vista_toolbar"> <ul> <li><a href="#"><span><img src="http://i616.photobucket.com/albums/tt248/bahron2000/add.gif" alt="add new" align="left"/>Add New</span></a></li> <li><a href="#"><span><img alt="check mail" src="http://i616.photobucket.com/albums/tt248/bahron2000/mail.gif" align="left">Check Mail</span></a></li> <li><a href="#"><span><img alt=" " src="http://i616.photobucket.com/albums/tt248/bahron2000/chart.gif" align="left" statistic/>Statistic</span></a></li> <li><a href="#"><span><img alt="my pictures" src=" http://i616.photobucket.com/albums/tt248/bahron2000/mona.gif" align="left"/>My Pictures</a></li> <li><a class="right" href="#"><span><img alt="help" src="http://i616.photobucket.com/albums/tt248/bahron2000/sos.gif" align="left"/>Help</span></a></li> </ul> </div> |
dari kode diatas, jika link akan dibuat sesuai dengan target, maka tanda "#" bisa digantikan dengan url target yang dikehendaki. Sedangkan untuk warna latar belakang toolbar dapat di desain sendiri menggunakan Adobe Photoshop. dan untuk icon bisa diambil dan dipotong-potong sendiri dari "istartedsomething.com"
Contoh beberapa icon vista yang bisa dipakai :
Thank to http://blog.itookia.com
Membuat Toolbar & Tombol Model Vista untuk Menu Blog

Kalau dilihat, trend vista sudah menjamur dan pada beberapa website/blog banyak yang memodifikasi tampilannya menggunakan model baru ini. Artikel kali ini akan menjelaskan step by step cara membuat toolbar dan tombol model Vista. aplikasi yang dipergunakan adalah Adobe Photoshop
1. Toolbar


Perhatikan gambar toolbar diatas, untuk membuatnya :
a. Buat dokumen baru dengan ukuran lebar 100px dan tinggi 40px (atau lebih kecil)
b. Gunakan "Ractangle Tool" untuk menggambar pada semua bidang gambar.
c. Pada bagian "Layers" aktifkan "Blending Options" atau pada menu pilih "Layer > Layer Style > Gradient Overlay", klik no.1 kemudian klik no. 2
d. Teknik menampilkan gambar seperti efek Vista, gunakan warna yang tajam dan untuk warna bagian lainnya gunakan warna yang sama tetapi lebih terang. lihat "Gradient editor" seperti dibawah ini :
e. Pada gambar diatas, gunakan slider (no. 1, 2 dan 3) untuk mengatur posisi warna pada toolbar
Nah.., untuk tempat tombol (toolbar) sudah selesai..., untuk membuat tombolnya gunakan cara yang sama sesuai selera
2. Tombol Lingkaran
Untuk membuat tombol lingkaran caranya hampir sama dengan diatas, tetapi menggunakan object lingkaran dan "Gradient Style" yang dipilih adalah "Radial" sedangkan bentuk persegi adalah "Linear", lihat tutorial dibawah ini.
a. Buat lingkaran seperti dibawah ini :

b. Tambahkan lingkaran baru yang lebih kecil hingga menjadi seperti dibawah ini :

c. Gunakan "Gradient Tool" untuk memberi warna pada lingkaran kedua ini, jangan lupa
gradient style yang dipilih adalah "Linear" dengan pilihan warna atas cenderung putih dan warna bagian bawah usahakan hampir sama persis dengan warna tengah lingkaran yang pertama, setelah itu klik "ok"
d. Aktifkan "Blending options" pada lingkaran pertama kemudian atur "Opacity" untuk memperoleh nilai transparansi, dan sesuaikan sesuai dengan efek yang dipilih.

lihat hasilnya seperti dibawah ini :

Selamat mencoba..., (ngga bakalan bisa kalo ngga dicoba...!!)
ScribeFire Blog Editor

Nah untuk installasi dan penggunaannya sangat mudah dan tidak memerlukan waktu lama, syarat utamanya adalah harus menggunakan browser Mozilla Firefox.
1. Installasi

Buka http://www.scribefire.com
klik menu "Blog Editor"
kemudian klik "Install ScribeFire Now"
Restart Mozilla Firefox
2. Starting
Setelah installasi selesai, ada beberapa cara untuk menjalankan ScribeFire yaitu dengan :
a. tekan F8, atau
b. klik icon "ScribeFire Icon" pada status bar, atau
c. melalui menu "Tools" dan lain-lain

tahap berikutnya adalah melakukan inisialisasi blog yang akan kita edit artikelnya
a. klik tab "Blog" kemudian klik "Add"

b. kemudian masukkan alamat blog yang diminta
c. klik "Next", masukkan user dan password dan ikuti sampai selesai
3. Editing Post
tahap berikutnya silahkan melakukan edit atau membuat artikel baru, cukup mudah dan cepat dibandingkan menggunakan editor blogger yang ada. Bisa dilakukan secara offine dan disimpan di komputer kita.
Sangat beralasan jika kita menggunakan Blogging Tools ini, kekurangan dan kelebihan silahkan Anda pelajari.
Menambah Link Menu Blog
Tutorial kali ini akan menyajikan tombol teks sederhana yang biasanya diletakkan pada bagian header blog dan pada bagian akhir Anda bisa membuat tombol berbasis grafis.
Umpamanya saya akan menambahkan tombol "Home", "About" dan "Contack" pada bagian header blog (sebetulnya kita bisa memindahkan posisi ini dalam blog sesuai selera kita)
1. Siapkan link menu untuk ketiga menu diatas, contoh :
<a href='http://www.namablog.blogspot.com'>Home</a>
<a href='http://www.namablog.blogspot.com/namablog-about-page.html'>About</a>
<a href='http://www.namablog.blogspot.com/namablog-contack-page.html'>Contack</a>
kemudian dari masing-masing link yang sudah disiapkan, tambahkan "Class" menu (tombol menu) untuk setiap link sehingga menjadi
<a href='http://www.namablog.blogspot.com' class='button1' >Home</a>
<a href='http://www.namablog.blogspot.com/namablog-about-page.html' class='button2' >About</a>
<a href='http://www.namablog.blogspot.com/namablog-contack-page.html' class='button3' >Contack</a>
2. Buka blog menggunakan nama 'user' dan 'password'
3. Masuk ke 'Tata Letak > Edit Html'
4. Masukkan kode dibawah ini sebelum kode </b:skin>
a.button1 {
background: #ff0000;
padding: 5px;
color: #ffffff;
}
Maksud Kode CSS diatas adalah : 1. Mendefinisikan Class Button 1 untuk tombol 'Home', 2. #ff0000 = menggunakan warna merah (RGB) dengan kode warna Hex, 3. Padding 5px adalah jarak antar menu (Home dan About) adalah 5 pixel, 4. color:#ffffff = menggunakan warna putih untuk teks pada menu.
untuk tombol berikutnya gunakan id class button seperti berikut ini :
Simpan atau klik "Terbitkan Entri", sampai disini hasilnya sudah bisa dilihat.
a.button2 {
background: #ff0000;
padding: 5px;
color: #ffffff;
}
a.button3 {
background: #ff0000;
padding: 5px;
color: #ffffff;
}
Kalo kita perhatikan, dari menu yang sudah dibuat jika di klik akan menuju ke link yang ditentukan namun ketika mouse mengenai daerah menu tersebut tidak ada efek dari perubahan gambar menu (biasanya pola warna/gambar), hanya icon mouse saja yang berubah menjadi icon mouse "Klik".
"Mouseover" adalah istilah untuk "event" atau kejadian pada saat mouse melintasi area tertentu (dalam hal ini tombol menu) dan area tersebut berubah warna atau berganti gambar. kita bisa memodifikasi warna saat mouse melintasi.
tambahkan kode berikut ini :
a.button1:hover {
background: #cccccc;
color: #ffffff;
}
Kode tersebut menunjukkan bahwa "button1" (yaitu home) akan berubah warna ketika mouse melintas dengan warna latar belakang "#cccccc" dan warna teks "#ffffff"
untuk dua kode berikutnya bisa ditambahkan seperti mendefinisikan button diatas, namun jika ketiga tombol tersebut penampilannya sama bisa dipersingkat menjadi :
a.button1:hover, a.button2:hover, a.button3:hover {
background: #cccccc;
color: #ffffff;
}
Mengganti Header Blog
Sebagai permulaan, akan saya bahas mengganti header blog.
Header bisa dikatakan penting karena gambar yang ada pada header mewakili tema dari blog kita, desain bisa kita siapkan menggunakan Adobe photoshop, Corel Draw, atau GIMP untuk pengguna linux dan lain-lain.
1. Masuk ke Blog anda dengan user dan password anda
2. Buka tab “Template” dan pilih”Edit HTML”
3. Sebelum melakukan eksperiment ini sebaiknya lakukan backup seperti gambar dibawah ini.

4. Setelah melakukan backup, cari kode "#header-wrapper" seperti dibawah ini, dengan catatan bahwa kode ini saya peroleh dengan menggunakan template "Minima Blue", dan mungkin berbeda jika kita menggunakan jenis template lainnya.
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
dari kode CSS diatas bisa kita lihat bahwa lebar gambar untuk header adalah 660 dengan satuan pixel, sedangkan untuk tinggi bisa ditentukan sendiri.
Sebagai contoh, saya telah membuat header seperti gambar dibawah ini dengan lebar 660px dan tinggi 300px.

5. Setelah gambar sudah siap, masuk ke menu "Tata Letak > Element Halaman" kemudian pilih "Edit" disebelah kanan header

6. Yang terakhir, upload gambar dengan memilih "Browse" seperti gambar dibawah, dan lihat hasilnya. Selamat Mencoba..!!!

Kita lihat hasilnya seperti gambar dibawah ini :

Do Verify Your Blog
Stage verification actually very quick (not to 5 minutes).
1. Open the search engine Google http://www.google.com or http://www.google.co.id
2. Enter a user name with gmail
3. - Indonesian language user, select "Serba-serbi Google"
- English language user, select the "Business Solution"
4. - Indonesian language user, select the "Kirim Konten ke Google" and then select "WebMaster Tools"
- English language user, select the "Webmaster Central" and select "Sign in to Webmaster Tools"
After that, check the "Dasboard" there are a list of blogs that are in registration. there are three columns, namely: information sites - site maps - verified. if there are any posts in the "Verify" and not check the blogs have not yet verified
for which has not been verified, click "verify" and then choose "Verify a Site". there are any posts "Verification Status: Not Verified." and underneath there is the "Choose Verification Method" and then click and select "Add Meta Tags."
after that you are given a code meta tags, copy the code.
the next step, you open an account in blogger
a. Sign in as your login
b. Select the tab "Layout"
c. Select "Edit HTML"
d. Search for "" and "Paste" right underneath the verification code and click "save."

back to the verification page on google before, and then click "Verify".
Already completed the verification phase, ... ok, next to the article you will learn sitemap enter your blog in google, hopefully with this simple tutorial that can stimulate your creativity.