Monday 31 October 2011

Belajar HTML Menggunakan Notepad

Belajar HTML Menggunakan Notepad - Setelah memahami dasar-dasar HTML (Baca : Pengenalan HTML) maka lanjut ke langkah selanjutnya yaitu Belajar Membuat HTML menggunakan Notepad. Cara ini sangat efektif dilakukan untuk seorang pemula agar dapat dengan mudah mempelajari HTML.

Tools yang digunakan : 
  • Browser (Mozilla Firefox, Google Chrome, Internet Explorer)
  • Notepad
Pada percobaan kali ini, kita akan menggunakan Mozilla Firefox sebagai browser dalam pembelajaran HTML.

1. Buka Notepad terlebih dahulu
2. Masukkan kode HTML didalam Notepad
3. Jika sudah selesai, simpan file dengan menambahkan format .html diakhir nama file yang akan disimpan (Contoh : belajar.html)

4. Jika sudah, silahkan buka file yang disimpan tadi. Maka akan muncul tampilan browser seperti dibawah ini.

Selamat Mencoba :)

Pengenalan HTML


Apa itu HTML?
HTML adalah bahasa untuk mendeskripsikan halaman web. HTML merupakan salah satu bagian terpenting web yang tidak dapat ditinggalkan. Dengan adanya HTML, maka sebuah blog dapat terlihat lebih rapi dibandingkan blog yang tidak menggunakan HTML.
  • HTML berarti Hyper Text Markup Language
  • HTML bukan bahasa pemrograman, tetapi bahasa markup
  • Bahasa markup terdiri dari tag markup
  • HTML menggunakan tag markup untuk mendeskripsikan halaman web

Tag HTML
Tag markup HTML biasa dipanggil tag HTML
  • Tag HTML adalah kata kunci yang dikelilingi oleh tanda <>
  • Tag HTML biasanya berpasangan seperti dan (kita akan mempelajarinya nanti)
  • Tag pertama (yang ) adalah tag awal, tag kedua (yang ) adalah tag akhir
  • Tag awal dan akhir disebut juga dengan tag pembuka dan tag penutup 

Dokumen HTML = Halaman Web
  • Dokumen HTML mendeskripsikan halaman web
  • Dokumen HTML mengandung tag HTML dan teks biasa
  • Dokumen HTML disebut juga dengan halaman web
Maksud dari browser (seperti Opera dan Firefox) adalah untuk membaca dokumen HTML dan menampilkannya sebagai halaman web. Browsernya tidak menampilkan tag HTML, tetapi menggunakan tagnya untuk mengartikan isi dari halaman:

Heading pertamaku

Paragraf pertamaku

Penjelasan dari contoh di atas:
  • Teks diantara dan mendeskripsikan halaman web
  • Teks diantara dan adalah isi halaman yang akan ditampakkan
  • Teks diantara

    dan

    akan ditampilkan sebagai heading
  • Teks diantara dan
    akan ditampilkan sebagai paragraf
Sekian dulu untuk postingan kali ini. Tunggu lah postingan selanjutnya karena kita akan membahas tentang dasar HTML.

Download Templates Ala Blog Juragan

Download Templates Ala Blog Juragan - Ini merupakan postingan pertama ku tentang templates. Templates merupakan salah satu faktor penunjung keberhasilan sebuah blog. Dengan adanya templates, maka tampilan pada blog lebih bagus dan enak dilihat. Sekaligus membuat para pengunjung nyaman dengan blog kita dan ingin berlama-lama disana. Okey, aku kan bagi Templates ala blog juragan. Sebagai contoh silahkan lihat gambar templates berikut ini :



Templates Detail : 
  • Full Seo Templates
  • Auto Readmore
  • Right Sidebar, Right Header 468x90
  • Menu Navigasi Horizontal
  • Menu Navigasi Breadcumb
  • Blockquote
  • Related Post di akhir postingan
  • Yahoo Emoticons Comments  



Password : 4-jie.blogspot.com

Mencari File Menggunakan Teknik Googling

Mencari File Menggunakan Teknik Googling

Mencari File Menggunakan Teknik Googling - Punya masalah karena sering mencari sebuah file tetapi file yang dicari tidak ditemukan ? Kita akan berikan tips keren Mencari File Menggunakan Teknik Googling. Teknik ini bisa dibilang teknik paling jitu dalam mencari file. Jadi, gak perlu repot-repot otak atik mesin pencariannya. Cukup ikuti teknik berikut ini dan kamu akan mendapatkan file yang kamu mau.


Cara I
1. Klik www.google.com 
2. Pada kotak pencarian, ketik  site:linkdownload "(file dan versinya), sebagai contoh : site:mediafire.com "WINAMP2"
 
3. Maka hasil yang didapat setelah memasukkan file yang akan dicari

4. Pilih satu diantara ratusan link diatas, lalu download filenya

Cara II 
Ketik pada kotak pencarian : (Nama File) (Site:Situs Hosting)
Contoh : idm site:mediafire.com

*hilangkan tanda kurung sewaktu ingin melakukan teknik googling ini

Saturday 29 October 2011

Membuat Author Post Detail Secara Otomatis

Membuat Author Post Detail Secara Otomatis - Kita akan membuat sebuah widget keren. Dimana dengan menggunakan wdget ini pengunjung dapat mengenali kita lebih dekat, dan pastinya kita juga bakalan terkenal. Author Post Detail merupakan sebuah widget yang sifatnya menampilkan pemilik/penulis sebuah blog. Adapun format yang ada pada widget ini adalah, Nama Penulis, Tanggal Postingan, Label Postingan, dan tweet menu yang dapat digunakan untuk menyebarluaskan artikel ke twitter tanpa ribet.

Author Post Detail
Selain itu, widget ini akan otomatis muncul dimasing-masing postingan kamu. Umumnya widget ini terletak dibawah judul postingan. Jadi buat yang mau mencoba silahkan ikuti langkah-langkah nya seperti berikut ini :

1. Login Blogger
2. Tuju ke Rancangan -> Edit HTML
3. Centang expand template widget, Cari ]]></b:skin>
4. Letakan CSS berikut diatasnya
.tweetmeme{ margin-left:10px; padding-top:17px; font-size:11px; float:left; }
4. Cari <data:post.body/>
5. Letkan kode di bawah ini di atas <data:post.body/>

<br/>
<div class='line-border'>
<div style='float: left; padding-top: 0px;'>
<img alt='i-om' height='48' src='http://img10.imageshack.us/img10/7945/tesym.jpg' title='4JIE' width='48'/>
</div>
<div class='profile-name'>
<a href='http://4-jie.blogspot.com' rel='dofollow' target='_blank' title='4JIE'><b>By 4JIE</b></a>
</div>
<div class='tags-name'>
Date
<span class='post-timestamp'>
&#8594;
<data:post.dateHeader/>

</span>
<br/>

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

</b:loop></b:if>
</div>

</div>
<div class='tweetmeme'>
<script type='text/javascript'>
tweetmeme_style = &#39;compact&#39;;
tweetmeme_url = &#39;<data:post.url/>&#39;;
tweetmeme_source = &#39;freedown4u&#39;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'>
</script>
</div>
<div class='spacer'/></div><br/>

Keterangan !
Teks Biru : Link gambar author post detail
Teks Orange : Ganti dengan alamat blog kamu
Teks Pink : Ubah menjadi nama author kamu

Membuat Footer 3 Kolom ala OOM

Lama 4JIE gak update blog. Hal itu dikarenakan kesibukan admin yang begitu padat sehingga tidak dapat lebih lama memanjakan blog ini. Kalau sebelumnya admin udah pernah singgung tentang cara membuat Menu Navigasi Dropdwon al OOM dot com, maka kali ini gantian. Admin akan share cara membuat footer 3 kolom ala OOM. Untuk melihat demo, silahkan liat bagian footer blog ini. Footer yang satu ini sedikit berbeda, karena footer memiliki background. Pasti menambah daya tarik blog kamu.

Footer 3 Kolom dengan Background


Cara-Cara Membuat Footer 3 Kolom ala OOM

1. Login ke blogger.com
2. Tuju ke Rancangan -> Edit HTML Ba,Jangan beri centang expand template widget 
3. Cari kode ]]></b:skin> dan letakkan kode berikut diatasnya :

#bottom{background:#444 url(http://4.bp.blogspot.com/_C6KkooKXCEw/TICgrtGXyRI/AAAAAAAAGzU/enOVeXD63p0/s1600/buttommenu-c.png) no-repeat; width:900px; position:relative; clear:both; margin:0 auto; float:left; padding:5px 0 10px 0; color:#fff}
#bottom a:link{color:#fff; text-decoration:none}
#bottom a:hover{color:#C0C0C0; text-decoration:underline}
#bottom a:visited{color:#C0C0C0; text-decoration:none}
#bottom h2{padding:15px 0 0 10px; margin:0 0 10px 0; font-weight:bold; line-height:1.4em; text-transform:uppercase; border-bottom:0px dotted #fff}
#bottom ul{padding:0; margin:0; color:#F93}
#bottom ul li{list-style-type:square; border-bottom:0px solid #626200; padding-left:5px; margin:3px 0 0 22px}
#left-bottom{width:210px; float:left; padding-left:22px}
#center-bottom{width:280px; float:left; padding-left:0px}
#right-bottom{width:330px; float:left; padding:0 5px 0 50px}
#left-bottom2{width:30px; padding-top:16px; float:left; padding-left:20px}
#center-bottom2{width:760px; font-size:90%; padding-top:16px; float:left; padding-left:30px}
#right-bottom2{width:30px; padding-top:16px; float:left; padding-left:20px}
#category{width:860px; float:left; padding:0px 0 20px 20px}

#upper-footer{width:860px; margin:0 auto; padding:0px; clear:both; line-height:1.3em; letter-spacing:.0em; font-size:95%; border-top:1px solid #c0c0c0; padding-top:10px}

4. Cari <!-- end content-wrapper --> atau lebih umumnya </div> <!-- end content-wrapper-->

5. Letakkan kode berikut diatasnya kode </div> <!-- end content-wrapper-->

<div id='bottom'>

<b:section class='category' id='category'/>

<b:section class='left-bottom' id='left-bottom' preferred='yes' showaddelement='yes'/>
<b:section class='center-bottom' id='center-bottom' preferred='yes' showaddelement='yes'/>
<b:section class='right-bottom' id='right-bottom' preferred='yes' showaddelement='yes'/>

</div>

6. Simpan

Keterangan !
Teks berwarna biru : Link gambar untuk background footer
Teks bercetak tebal : Lebar footer yang akan dibuat, silahkan disesuaikan dengan lebar footer blog kamu :)

Friday 28 October 2011

Ebook Gratis Tentang Android

Ebook Gratis Tentang Android - Siapa yang tidak mengenal Operating System Mobile yang satu ini yaitu Android. Android merupakan satu operating system mobile yang saat ini sedang naik daun. Si robot hijau ini memberikan fasilitas gratis bagi penggunanya dengan memberikan akses free download di Android Market. Meskipun tidak semua aplikasi gratis, tetapi bisa menutupi keinginan akan pengguna nya yang haus akan aplikasi. Pasti tidak semua orang tau dan dapat mengendalikan Android. Namun kali ini saya akan bagikan ebook gratis tentang "Mengenal Android". Semoga dengan adanya Ebook ini dapat membantu teman-teman memudahkan dalam penggunaan si robot ijo ini.

E-Book Mengenal Android:
Judul E-Book:
"Mengenal Android"
 | Download