Cara Membuat Menu Horizontal Drop Down

Dengan CSS/Javascript Pada Blog
Pada Kesempatan Kali Ini Saya Akan Membahas Tutorial Blogspot Artikel Tentang Membuat Menu Horizontal Drop down CSS Pada Blog
Cara Membuat Menu Horizontal Drop Down Membuat menu horizontal Drop Down sebenarnya ada banyak alternatif, untuk kali ini kita akan mencoba membuat jenis menu horizontal type professional dropdown, sebagaimana namanya tentunya ini akan membuat blog/site kita menjadi lebih tampak professional.

Kita langsung ke TKP saja biar jelas dan untuk liat demo nya lihat pada menu Blog Ini

• Langkah Pertama
• Login ke akun Blogger kamu.
• Dari halaman dashboard, pilih Edit HTML.
• Pada halaman Edit HTML, centang "Expand Template Widget", cari kode ]]></b:skin> pada script template blog kamu. Tekan Control F atau F3 untuk mencarinya agar lebih mudah
• Lalu Copy Script dibawah ini diatas kode ]]></b:skin> tersebut.

/* ================================================================
This copyright notice must be kept untouched in the stylesheet at
all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.stunicholls.com/menu/pro_dropdown_3.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */

.preload1 {background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0a.gif);}
.preload2 {background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1a.gif);}

#nav {padding:0; margin:0; list-style:none; height:38px; background:transparent url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#FFD700; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0a.gif) no-repeat right top;}

#nav li:hover a.top_link {color:#fff; background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1.gif) no-repeat;}
#nav li:hover a.top_link span {background:url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down {background:url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1a.gif) no-repeat right top; padding-bottom:3px;}

/* Default list styling */

#nav li:hover {position:relative; z-index:200;}

#nav li:hover ul.sub
{left:1px; top:38px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #50b5d0;}
#nav li ul.sub li a.fly
{background:#50b5d0 url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow.gif) 80px 6px no-repeat;}
#nav li:hover ul.sub li a:hover
{background:#3f96a9; color:#fff; border-color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#3f96a9 url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow_over.gif) 80px 6px no-repeat; color:#fff;}

#nav li b {display:block; font-size:11px; height:18px; width:88px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#ff6; border-bottom:1px solid #ff6; cursor:default;}

#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:90px; top:-4px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; z-index:400; height:auto;}

#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#3f96a9 url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;}

#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#50b5d0 url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow.gif) 80px 6px no-repeat; color:#000; border-color:#50b5d0;}

setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="http://lh6.ggpht.com/_wC8_9aR_6uE/S6uJI38TreI/AAAAAAAACbY/QIXMKHei1g0/up.png" style="width:24px; height:24px" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:15, offsety:15}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

• Lalu Simpan Template.
• Kemudian Tambah Gadget HTML Javascript klik button tambah lalu
• Copy dan paste Script dibawah ini

<span class="preload1"></span>
<span class="preload2"></span>

<ul id="nav">
<li class="top"><a href="#" class="top_link"><span>Home</span></a></li>
<li class="top"><a href="#" id="Menu" class="top_link"><span class="down">Menu</span></a>
<ul class="sub">

<li><b>Judul1</b></li>
<li><a href="#" class="fly">Subjudul1</a>
<ul>
<li><a href="#" target="_blank">subitem1.1</a></li>
<li><a href="#" target="_blank">subitem2.1</a></li>
<li><a href="#" target="_blank">subitem3.1</a></li>
</ul>
</li>
<li><a href="#" class="fly">Subjudul2</a>
<ul>
<li><a href="#" target="_blank">subitem1.2</a></li>
<li><a href="#" target="_blank">subitem2.2</a></li>
<li><a href="#" target="_blank">subitem3.2</a></li>
</ul>
</li>
<li><a href="#" class="fly">Subjudul3</a>
<ul>
<li><a href="#" target="_blank">subitem1.3</a></li>
<li><a href="#" target="_blank">subitem2.3</a></li>
<li><a href="#" target="_blank">subitem3.3</a></li>

<li><b>Subjudul3.1</b></li>
<li><a href="#">item1.3.1</a></li>
<li><a href="#">item2.3.1</a></li>
<li><a href="#">item3.3.1</a></li>

<li><b>Subjudul3.2</b></li>
<li><a href="#">item1.3.2</a></li>
<li><a href="#">item2.3.2</a></li>
<li><a href="#">item3.3.2</a></li>
</ul>
</li>


<li><b>Judul2</b></li>
<li><a href="#" target="_blank">subitem1.2</a></li>
<li><a href="#" target="_blank">subitem2.2</a></li>
<li><a href="#" target="_blank">subitem3.2</a></li>
</ul>


</li>
<li class="top"><a href="#" id="services" class="top_link"><span class="down">menu2</span></a>
<ul class="sub">
<li><a href="#" target="_blank">submenu1.2</a></li>
<li><a href="#" target="_blank">submenu2.2</a></li>
<li><a href="#" target="_blank">submenu3.2</a></li>
</ul>
</li>

</li>
<li class="top"><a href="#" id="services" class="top_link"><span class="down">menu3</span></a>
<ul class="sub">
<li><a href="#" target="_blank">submenu1.3</a></li>
<li><a href="#" target="_blank">submenu2.3</a></li>
<li><a href="#" target="_blank">submenu3.3</a></li>
</ul>
</li>

</li>
<li class="top"><a href="#" id="services" class="top_link"><span class="down">menu4</span></a>
<ul class="sub">
<li><a href="#" target="_blank">submenu1.4</a></li>
<li><a href="#" target="_blank">submenu2.4</a></li>
<li><a href="#" target="_blank">submenu3.4</a></li>
</ul>
</li>

<li class="top"><a href="#" id="profil" class="top_link"><span>menu5</span></a></li></li></li></ul>

Lalu Simpan Dan Lihat Hasilnya...

Keterangan:

• Tanda # untuk Tempat Url yang anda inginkan
• Lalu Tulisan Pada Sub Menu Item yaitu Nama Nama Menu Sesuai Dengan Kebutuhan

Saran Dan Kritik Anda Sangat Membantu Saya Dalam Menulis Artikel Selanjutnya Pada Blog Ini...

Pasang Logo Page Feel HTC ( Layar Menggulung Pada Blog Anda, Tidak Berat Saya Yang Jamin Namun Mempercantik Blog ini Juga Memperkuat Rasa Persatuan Dan Persahabatan Antar Bloggers )

Pasang Kodenya Di Bawah ini di atas kode </head> :

<SCRIPT type='text/javascript'>var tujuan ='http://ojelhtc.blogspot.com/'</SCRIPT><SCRIPT src='http://ojel88.googlecode.com/files/fellhtc.js' type='text/javascript'></SCRIPT>

Read more: Cara Membuat Menu Horizontal Drop Down CSS Pada Blog | HTC Community http://ojelhtc.blogspot.com/2011/11/cara-membuat-menu-horizontal-drop-down.html#ixzz1ixRIBcxP
Under Creative Commons License: Attribution Non-Commercial Share Alike

Cara Membuat Judul blog Berjalan

Ini adalah salah satu ilmu yang saya terapkan diblog ini, yaitu membuat judul blog berjalan.

judul blog akan terlihat berjalan pada Title bar browser..

berikut cara membuatnya :

1. Setelah login ke Blogger pilih Tata letak ==> Edit HTML

2. Cari kode berikut

  
    <title><data:blog.pageTitle/></title>

3. Ganti kode diatas dengan kode dibawah ini

    <b:include data='blog' name='all-head-content'/>

    <script language='JavaScript'>
    var txt="<data:blog.pageTitle/>";
    var kecepatan=100;var segarkan=null;function bergerak() { document.title=txt;
    txt=txt.substring(1,txt.length)+txt.charAt(0);
    segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
    </script

4. Klik Pratinjau untuk melihat hasilnya

5. Apabila berhasil Simpan Template

Note : Angka 100 berwarna biru diatas merupakan kecepatan pergerakannya, untuk mempercepat pergerakannya kurangi angka tersebut, untuk memperlambatnya tambah angka tersebut.

Cara membuat Menu Multi Kolom

Cara membuat menu multi kolom pada blog Pada blog tutorial blogtegal kali ini akan membahas tentang membuat menu multi kolom, yang mana walaupun trik ini sudah lama dan sudah banyak bertebaran di maya internet, namun tak ada salahnya kalau blog tutorial blogtegal akan menulisnya kembali. Mungkin saja para newbie belum ada yang tahu  dan kebetulan nemu di blogtegal ini.
Menu Multi Kolom ini banyak fungsinya, yang mana fungsi utama di ciptakannya multi kolom ini yakni memampatkan widget-widget ke dalam 1 menu atau menggabungkan beberapa widget ke dalam 1 widget melalui menu multi kolom.
Biasanya menu ini di ěsi dengan daftar link blog, recent comment, dll sesuai kehendak si pemilik dan pembuat blog. Dan yang pasti menu ini menhemat space (ruang) blog pada sidebar.
Contoh tampilan dari Menu Multi Kolom atau Menu Multi Tab seperti gambar di bawah ini:


Gimana, apa kamu tertarik untuk membuatnya? Jika ya, mari kita lakukan experimen-nya Ikuti tutorialnya yah jangan saling mendahului, kalau mau mendahului lewat lajur kanan

• Login ke dashboard blog kamu.
  
• Pilih Rancangan »» Edit HTML
  
• Download template lengkap dulu untuk berjaga-jaga kalau terjadi kesalahan.
  
• tandai pada Expand widget template.
  
• kemudian tempatkan script berikut sebelum kode ]]></b:skin>
  

  div.TabView div.Tabs { height:24px; overflow:hidden;}
  div.TabView div.Tabs a { float:left; display:block; width:90px; text-align:center; height:24px; padding-top:3px; vertical-align:middle; border:1px solid #ddd; border-bottom-width:0; text-decoration:none; font-family:verdana,arial,sans-serif; font-weight:bold; color:#000;}
  div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color:#fff;}
  div.TabView div.Pages {clear:both; border:1px solid #ddd; overflow:hidden; background-color:#fff;}
  div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden;}
  div.TabView div.Pages div.Page div.Pad {padding:3px 5px;}

  
  Sesuaikan kode warnanya dg blog kamu, untuk melihat kode warna bisa di lihat pada postingan tentang Kode-kode warna HTML
  
• masukan script pemanggil berikut sebelum kode </head>
  

  <script src='http://blogtegal.googlecode.com/files/tabview.js' type='text/javascript'/>

• Terakhir klik SIMPAN

Kemudian langkah berikutnya yakni menambahkan widgetnya pada sidebar blog. Pada Rancangan element klik ''Tambah Gadget'' dan pilih widget ''HTML/Javascript'' dan masukan kode berikut kedalamnya:

<form action="tabview.html" method="get"> <div class="TabView" id="TabView"> <div class="Tabs" style="width:350px;"> <a>Sub judul 1 </a> <a>Sub judul 2 </a> <a>Sub judul 3 </a> </div> <div class="Pages" style="width:350px; height:260px;"> <div class="Page"> <div class="Pad"> Link 1 di menu 1 Link 2 di menu 1 Link 3 di menu 1 </div> </div> <div class="Page"> <div class="Pad"> Link 1 di menu 2 Link 2 di menu 2 Link 3 di menu 2 </div> </div> <div class="Page"> <div class="Pad"> Link 1 di menu 3 Link 2 di menu 3 Link 3 di menu 3 </div> </div> </div> </div> </form> <script type="text/javascript"> tabview_initialize ('TabView'); </script>

Terakhir klik SIMPAN.Selamat berexperimen untuk membuat menu multi kolom atau menu

Tips & Trik Mencegah Virus Masuk Komputer

Salah satu cara pencegahan agar komputer kita tidak terserang virus adalah dengan mencegah terjadinya eksekusi terhadap file virus. Salah satu caranya adalah melakukan pencegahan penularan virus melalui flashdisk. 

Untuk melakukan pencegahan, kita bisa menggunakan salah satu fitur yang ada di Windows XP yaitu Local Security Setting. Adapun cara kerjanya adalah memproteksi komputer dari eksekusi terhadap semua file *.exe. Sehingga bila kita membuka file yang ada di flashdisk dan tanpa sepengetahuan kita ternyata menjalankan file virus, maka proses eksekusi tersebut akan di proteksi atau di batalkan.

Adapun langkah-langkahnya adalah

->
1. Pilih Start >> Control Panel
2. Pilih Administrative Tools >> Local Security Policy
3. Pilih Software Restriction Policies >> Additional Rules
4. Pada Additional Rules klik kanan >> pilih New Path Rule…
5. Pada kolom Path, pilih Browes pilih dimana drive flshdisk berada, misal di I:\
6. Pada kolom Security Level, pilih Disallowed
7. Pilih OK dan Restart komputer
Sekarang coba kita eksekusi salah satu file dari *.exe.
Yapp…!!! Ternyata file *.exe sekarang sudah tidak bisa lagi di eksekusi di flashdisk. Berarti komputer kita sedikit lebih aman dari serangan virus yang ingin menyebar melalui flashdisk. Lalu gimana biar file *.exe bisa di jalankan..??? Caranya ya kita pindah dulu file tersebut ke Drive/Harddisk.
Nb: Jika kita menjalankan file *.exe yang di compress, misal pakai winrar file tersebut tetap bisa di jalankan. Namun misal kita ingin meng-extrak file tersebut tidak bisa dilakukan. (Tertulis The System Cannot Find The Path Specified)
Yang ditakutkan adalah waktu kita meng-compress file *.exe sudah dususupi virus, tapi semoga saja tidak.

Tips Merakit PC

Berikut tips untuk membeli / merakit pc 2007, karna trend nya teknologi tahun ini sudah berbeda dengan teknologi tahun tahun sebelumnya, komponen komputer saat ini sangat cepat mengalami perubahan jadi kalaupun kita membeli motherboard superior untuk komputer rakitan kita di tahun 07 ini, mungkin akan menyesal nanti kalau era multicore akan masuk ke kancah prosesor, dan kita akan kesulitan untuk mengupgrade pc tersebut, kalau zaman dulu, era processor masih menggunakan die yang sama, ngga banyak berubah, soket 370 dan soket A nya AMD masih menjadi hal yang terus terngiang, namun sekarang, soket 745 keluar, baru sebentar keluar lagi soket 933 AMD, begitu juga intel, mengalami perubahan soket dalam kurun waktu yang sangat singkat, mulai dari soket 478, sampai sekarang ke soket LGA 775/Socket M sehingga untuk mengatasi ini kita tidak bisa berkutat untuk berharap dapat mengupgrade processor dalam tingkat generasi yang berbeda dengan soket yang sama, kemungkinanya kecil sekali.

Membeli pc tahun 2007 ini akan lebih memfokuskan ke Komponen pendukung, bukan motherboard lagi, dahulu mungkin kita beli motherboard tercanggih dan harga yang sangat tinggi berharap dapat mengupgrade processor, disk, memory grafis dan lainya di waktu depan, sekarang mungkin sudah tidak bisa seperti itu lagi.

Hal hal yang harus di perhatikan untuk membeli pc di tahun 2007 ini adalah:

1. Pilihlah komponen motherboard yang memiliki kapasitas memory yang besar, 2GB, 6GB atau lainya, dengan jumlah slot yang cukup memadai, hal ini perlu diperhatikan, karna untuk menyokong aplikasi aplikasi multicore, pasti membutuhkan banyak resource memory, sehingga, ketersediaanya slot untuk upgrade memory akan menjadikan jalan yang baik untuk waktu ke depanya.
2. Pilihlah soket processor terkini, baik itu untuk AMD (AM2) atau Intel (775), karna inilah latest soket yang ada disaat ini, dan setidaknya kita memiliki tenggang waktu untuk upgrade ke processor yang masih dalam generasinya.
3. Belilah Media penyimpanan yang lebih besar, 80GB sudah tidak memadai untuk saat ini, mulai lah dari angka 200GB, hal ini sangat penting, karena berbagai macam jenis aplikasi, game, dan file, akan memakan space yang cukup signifikan, disk 200GB tersebut dapat di partial kan, artinya kita memisahkan sistem dan disk data, misanya 80GB dan 120GB, dimana yang 80GB di pecah menjadi 2 harddisk yang akan di set Raid 0 untuk memaksimalkan kecepatan disk nya, atau kita bisa pakai hdd SAS (serial attach SCSI) terbaru,salah satu samplenya ini http://www.dailytech.com/article.aspx?newsid=5098 dan ternyata harddisk cepat yang hanya berukuran 2,5″ ini bisa mencapai 10K Rpm, dan keuntungan lainya SAS ini memiliki backward kompabilitas dengan interface SATA, hayoo, mari menghayal menggunakan disk ini sambil di RAID 0, brr gimana rasanya yah. mengenai SAS nya bisa mampir kesini. http://en.wikipedia.org/wiki/Serial_Attached_SCSI (kalau punya budget lebih)
4. Sudah saatnya untuk dual core, Mulailah untuk memilih processor dual core, Bisa X2 AMD, atau DuoCore Windows, tidak perlu membeli processor yang latest, sesuaikan saja dengan budget.
5. Gunakan LCD, sudah lupakan dengan teknologi CRT, LCD adalah sebuah teknologi hemat, memang kalau dari sisi harga CRT lebih murah dibandingkan LCD, tapi pernah kah kita menghitung cost listrik yang di habiskan tiap bulanya dengan menggunakan CRT dibandingkan LCD ?
6. Sediakan Graphics Card Yang memadai dengan budget, saran saya tidak perlu menggunakan graphic card yang extreme ( kecuali kalau kita seorang gamers ), spesifikasi graphic card yang kita butuhkan hanyalah graphic card yang mendukung directX9C, itu saja, sisanya tergantung kemampuan budget.
7. Prepared for Vista, karna suatu saat, kita pasti akan menggunakan OS ini, baik itu Ori, ataupun Bajakanya.

Cara mengunci Komputer dengan Flash Disk

Predator merupakan sebuah tool yang dapat mengunci komputer kamu saat kamu sedang tidak berada di depan PC, sekalipun operation system PC kamu sedang beroperasi.

Dengan tool gratis ini kamu bisa membuat USB flash drive kamu menjadi kunci yang bisa kamu gunakan untuk me-lock dan meng-unlock PC kamu. Dengan demikian kamu bisa menjaga komputer kamu dari penggunaan tangan-tangan lain.

Cara penggunaan tool ini sangat mudah, cukup dengan menghubungkan flash drive kamu ke PC, kemudian jalankan tool Predator yang ada di PC kamu, dan nantinya kamu akan diminta memasukkan password sebagai kunci untuk mengoperasikan PC yang kamu miliki. Jika tool ini telah berjalan di system Windows kamu, saat kamu memisahkan (Unplug) flash disk dari PC kamu, maka komputer yang kamu gunakan akan terkunci dengan sendirinya, sekalipun OS Windows sedang beroperasi pada komputer tersebut. Untuk menjalankan komputer kembali dalam kondisi normal, kamu cukup menghubungkan Flash Disk yang tadinya kamu gunakan ke PC kamu.

Dengan PEDATOR keamanan PC akan terjaga dengan mudah, semudah menghubungkan dan memisahkan USB Flash Disk dari PC!

Download PREDATOR

Setting Share Internet Via Router

Tips Dan Trik Jaringan Komputer Yaitu Setting Share atau Sharing Internet Dengan atau Via Router atau Tutorial Cara Share Internet Via Router Juga Cara Settingnya Agar Maksimal Baiklah Langsung Saja, cara share dan tutorial Cara Setting internet kabel via router.,

Cara ini diperuntukan untuk pemula dan saya harap dapat membantu untuk share koneksi internet dengan cara yang semudah mungkin. 

Cara share internet dengan router

 ada 2 skema untuk share internet dengan router
1. cable modem + switch + router (semua sudah ada dalam 1 alat)
2. cable modem –> switch + router (modem tidak dilengkapi dengan router + switch)





cara 1:
alat yang di butuhkan
- 1 buah cable modem gateway switch router, contoh : Wireless-G Cable Gateway WCG200
- 4 kabel LAN (RJ45) yang di Straight, panjangnya bisa di sesuaikan dengan jarak modem ke router dan jarak router ke komputer. 

pasang jaringan anda : 
1. Hubungkan kable tv
2. Hubungkan power
3. Sambungkan port ke LAN card yang ada di komputer.
configurasi hampir sama dengan nomor 2  


cara 2: 

alat yang di butuhkan
- 1 buah cable modem (contoh: Cable Modem with USB and Ethernet Connections BEFCMU10)
- 1 buah switch router 4 port (contoh: Wireless-G Broadband Router WRT54G)
- 5 kable LAN (RJ45) yang di Straight, panjangnya bisa di sesuaikan dengan jarak modem ke router dan jarak router ke komputer.

Bagan jaringan 
pasang jaringan anda :
1. Hubungkan kable tv ke cable modem
2. Hubungkan power
3. Hubungkan kabel LAN (RJ45) dari cable modem ke router sesuai gambar
4. Sambungkan port ke LAN card yang ada di komputer.

selesai untuk pasang jaringannya. dengan settingan standar biasanya jaringan internal (jaringan rumah yg tidak konek ke internet) sudah bisa jalan, untuk wirelessnya bisa langsung di detect, biasanya SSID = linksys. ini masih untuk internal di dalam rumah, belum untuk internetnya ya.

Konfigurasi standar tidak bisa langsung konek ke internet, ini karena kebanyakan ISP mendetek MAC tiap LAN card. jadi harus clone MAC LAN card nya dulu baru internetnya bisa jalan.
Berikut ini adalah konfigurasi router, secara keseluruhan ini adalah konfigurasi default dari router. Yang tidak default hanya pada bagian clone MAC address (supaya bisa share internetnya). 

Configurasi router
buka web browser anda (bisa Internet Explorer atau firefox atau browser yang lain) masukan address router http://192.168.1.1 , kalau error, coba masukan http://192.168.0.1 

username: none(kosong), password: admin

A. Setup – MAC Address Clone
Enable -> masukan MAC LAN card/USB komputer pertama yang di pakai untuk internet (pastikan pertama kali anda mengunakan LAN card atau USB). 

Note : untuk mudahnya browse configurasi router ini dengan komputer pertama yang terhubung ke internet. jadi tinggal ‘Clone Your PC MAC’. (hanya bisa dilakukan bila konek ke internet pertama kali melalui LAN card, bila memakai USB anda harus memasukan MAC address USB tersebut secara manual)

kenapa MAC perlu di clone? karena beberapa ISP mencatat MAC LAN card yang di pakai untuk terhubung ke internet. kalau MAC nya tidak di clone maka MAC nya akan lain dengan yang tercatat oleh ISP sehingga tidak akan mendapatkan IP dari DHCP server. karena di anggap berbeda. 

B. Setup – Basic Setup
Internet Setup
pilih yang Automatic Configuration – DHCP,
Network Setup 
Router IP 192.168.1.1
 Network Address Server Settings (DHCP) 

C. Wireless – Basic Wireless Settings
Wireless Network
Wireless Network Mode : mixed
Wireless Network Name (SSID) : network name yang mau di pakai untuk jaringan WLAN(Wireless LAN) anda, contoh SSID: mywlantest
Wireless Channel: channel yang mau dipakai WLAN anda, default saja dulu
Wireless SSID Broadcast : network namenya di sebarkan atau tidak, untuk sementara di enabled saja dulu (recomended :setelah bisa konek dengan sukses sebaiknya di disable agar tetangga anda tidak mendeteksi network anda) 


D. Wireless – Wireless Security
Security Mode : disabled (recomended pake WPA seandainya jaringan anda sudah jalan). 
Konfigurasi Komputer Anda
Start -> Settings -> Control Panels -> Network Connections
Klik kanan -> Properties (pada Local Area Connection)
pada Tab -> general
cari This connection use the following items -> Internet Protocol [TCP/IP]
klik properties -> pada tab general pilih obtain an iP address automaticaly
note : artinya IP didapat dari DHCP server, yaitu router WRT54G.

note: cara setting bisa di lihat di internet atau di buka manual. ini adalah settingan standar supaya jaringan terbentuk dan bisa sharing internet. settingan kebanyakan DHCP. Kalau sudah bisa maka bisa di coba2 settingan yang lain, contohnya static ip, WPA key untuk WLAN, dsb. 

Ringkasan konfigurasi Router :
Semua configurasi/settingan router hampir sama, hanya ada perbedaan sedikit atau perbedaan letak saja.biasanya yang standar
router setting
alamat webnya http://192.168.1.1 atau http://192.168.0.1
username, password tergantung tipe nya
Mac clone : clone MAC komputer yang pernah di pakai ke internet.
Internet Setup : Automatic Configuration – DHCP, 

Network Setup
Router IP 192.168.1.1
Network Address Server Settings (DHCP) 
Wireless Network
default
Wireless Security
default

kenapa saya pakai linksys untuk contoh? karena gambarnya saya dapat dengan mudah ^^, tinggal edit sedikit utk kasih tau letak kabel dan colokan power dan kabel tv nya. untuk modem, biasanya tidak butuh konfigurasi macam2.
untuk konfigurasi router yang agak merepotkan “kalau” belum pernah mencoba, kalau sudah mencoba dijamin mau configurasi router yang manapun pasti bisa (untuk config standarnya loh)

untuk modem saya memakai askey modem yang paket dari indosat m2. untuk wireless router saya memakai linksys dan juga 3com. 

Tambahan – FAQ
1. inti dari cara diatas adalah reset semua router ke settingan default. lalu pergi ke router setting dan clone MAC dari LAN CARD/USB komputer pertama yang konek ke internet.
2. Bila Mac Clone Berhasil maka router akan mendapat IP dari ISP, bisa di lihat dibagian status – router. 
3. Cara liat mac address pada PC
open cmd windows, ketik “ipconfig/all”
pastikan lan card / USB nya di enabled dulu ya.
mac address adalah tulisan berikut
Physical Address …………………………. : 00-xx-xx-xx-xx-xx
silakan di coba 1 1 bila anda tidak mengetahui mac address alat pertama yang konek ke internet.

Memasang Kabel LAN / UTP

Tutorial singkat ini cocok banget buat yang sedang mo bikin jaringan komputer ‘MURAH’ khususnya yang terdiri lebih dari 2 client, yang pake hub (jauh lebih murah ketimbang router :D). To the point! Apa sih kabel UTP itu? Kabel UTP itu adalah kabel khusus buat transmisi data.

UTP, singkatan dari “Unshielded Twisted Pair". Disebut unshielded karena kurang tahan terhadap interferensi elektromagnetik. Dan disebut twisted pair soalnya di dalamnya terdapat pasangan kabel yang disusun spiral alias saling berlilitan. Ada 5 kategori kabel UTP. Dari kategori 1 sampai kategori 5. Untuk jaringan komputer yang terkenal adalah kategori 3 dan kategori 5.

Kategori 3 bisa untuk transmisi data sampai 10 mbps, sedang kategori 5 sampai 100 mbps. Nah klo cuman buat misal bikin jaringan komputer di kantor ato kampus ato warnet, paling ngirit ya pake yang kategori 3. Udah lebih dari cukup.
Setau gue ada banyak merek yang beredar di pasaran, cuman yang terkenal bandel dan relatif murah adalah merek Belden - made in USA. Per meternya berkisar dari Rp. 1500 - 2000,- Kalau mau jatuh murah dan pakenya banyak beli aja yang satu kotak, panjangnya sekitar 150meteran. Jangan lupa beli konektornya. Konektornya tuh bentuknya kayak colokan telepon cuman lebih besar. Bilang aja mo beli konektor RJ-45. Harganya klo ngecer sekitar Rp.2500,- an
Foto RJ45 - Konektor untuk kabel UTP
Foto RJ - 45 yang masih baru, belum di gencet pake tang
Crimp Tool Satu lagi yang sangat penting, kamu kudu punya tang khusus buat masang konektor ke kabel UTP, istilah kerennya “crimp tool". Ini alat gunanya buat ‘ngematiin’ ato ‘nanem’ ato apalah istilahnya itu konektor ke kabel UTP. Jadi sekali udah di ‘tang’ udah ga bisa dicopot lagi itu konektor. Harganya memang agak mahal dibanding tang biasa. Antar Rp.75rb - 150rb. Dan klo mo lebih ok, biar ga nanggung tambah duit lagi sekitar 125rban buat beli lan tester. belinya yang merek dari taiwan aja. lebih murah. bentuknya tuh kayak kotak, dan ada lampu lednya 8 pasang, bisa kedap kedip.

OK sekarang peralatan udah siap, gue mulai aja. Secara umum pemasangan kabel UTP ada 2 tipe, tipe straight dan tipe cross. Disebut tipe straight soalnya masing masing kabel yang jumlahnya 8 itu berkorespondensi 1-1, langsung. Sedangkan disebut cross soalnya ada persilangan pada susunan kabelnya. Bingung?
OK! Untuk tipe straight itu digunakan buat nyambungin dari client ke hub. Sedangkan untuk tipe cross untuk client langsung ke client (cpu to cpu) ato dari hub ke hub.
Kita bahas dulu yang tipe straight
Urutan pin tipe straightTipe ini paling gampang dibuat. Kenapa? Soalnya langsung korespondensinya 1-1. Standar urutannya sih begini (dilihat dari bolongannya konektor, dari kiri ke kanan - lihat foto disamping) : 2 orange - 1 ijo - 2 biru - 1 ijo - 2 coklat . 2 orange disini maksudnya pasangan orange muda sama orange tua, dst. Tapi ga usah ikut standar pewarnaan itu juga sebenarnya tidak masalah. Yang penting urutan kabelnya. Misal ujung sini urutan pin pertamanya orange muda, maka ujung yang lain urutan ping pertamanya juga harus orange muda. jadi antar ujung saling nyambung. Sebenarnya tidak semua pin tersebut digunakan. Yang penting adalah pin nomor 1,2,3 dan 6. Jadi misal yang disambung cuman pin 1,2,3 dan 6 sedangkan pin yang lain tidak dipasang, tidak jadi soal. Buat jelasnya coba lihat foto dibawah, yang gue foto dari sebuah buku (coba tebak! bisa ga, buku apa hayuooo? :D)
Straight Tru dan cross pin
Yang kiri urutan korespondensi buat tipe straigh, yang kanan yang cross
Nah waktu mo pasang kamu potong ujung kabelnya, trus susun kabelnya trus ratain pake piso potong yang ada di crimp tool. Kamu ga perlu repot repot harus ngelepasin isolasi pada bagian ujung kabel, soalnya waktu kamu masukin itu kabel ke konektor trus di gencet pake crimp tool, sebenarnya saat itu pin yang ada di konektor nembus mpe dalem kabel. Perhatikan, agar gencetnya yang keras. soalnya klo ga keras kadang itu pin ga tembus ke dalam isolasi kabelnya. Kalo udah trus kamu tes pake lan tester. Masukin ujung ujung kabel ke alatnya, trus nyalain, klo lampu led yang di lan tester nyala semua, dari nomor 1 mpe 8 berarti kamu sukses. Klo ada salah satu yang ga nyala berarti kemungkinan pada pin nomor tersebut ada masalah. Cara paling mudah yaitu kamu gencet lagi pake tang. Kemungkinan pinnya belum tembus. Kalo udah kamu gencet kok masih ga nyambung, coba periksa korespondensinya antar pin udah 1-1 blon. Klo ternyata udah bener dan masih gagal, berarti memang kamu hari ini sedang tidak beruntung.. kesian deh.. hehe.. ulang lagi aja.. okay!
LAN TESTER
LAN TESTER - alat buat ngecek kabelnya nyambungnya bener ato ga. Untuk tipe straight klo bener ntar dari led 1 mpe 8 berkedip.
Berikut adalah foto dari bawah dari ujung kabel UTP yang udah dipasangi konektor dan berhasil dengan baik (urutan pewarnaan pinnya ikut standar):
Contoh konektor RJ45 yang udah dipasang di kabel UTP dan berhasil dengan baik
urutan pin standar
Dan klo yang ini ga standar, coba perhatiin urutan warna pinnya… ga standar banget. tapi tetep aja bisa, yang penting korespondensinya satu satu (khusus tipe straight):
Contoh konektor RJ45 yang udah dipasang di kabel UTP dan berhasil dengan baik - TIDAK STANDAR
urutan pin TIDAK standar.

Sekarang Tipe Cross
Untuk tipe cross itu dipake buat nyabungin langsung antar 2 pc, ato yang umumnya buat nyambungin antar hub. (misal karena colokan di hubnya kurang). Cara pasangnya juga sebenarnya gampang. sama seperti tipe straight, pin yang dipake juga sebenarnya cuman 4 pin aja, pin 1-2-3 dan 6. Nah yang beda pas pasangnya. Klo di tipe cross, pin 1 nyambung ke pin 3 ujung yang lain. pin 2 ke 6, pin 3 ke 1 dan pin 6 ke 2. Jelasnya coba deh liat “Gambar 5″. Praktisnya gini, di ujung pertama kamu susun pinnya sesuai standar buat yang tipe “straight” nah di ujung yang laen kamu susun pinnya sesuai standar buat tipe “cross".

masih bingung ? gini deh gampangnya:
ujung pertama:
1: orange muda
2: orange tua
3: ijo muda
4: biru muda
5: biru tua
6: ijo tua
7: coklat muda
8: coklat tua
maka diujung yang lain harus begini:
1: ijo muda
2: ijo tua
3: orange muda
4: biru muda
5: biru tua
6: orange tua
7: coklat muda
8: coklat tua
agak ngerti kan? jadi disini posisi nomor 1,2,3 ma 6 yang dituker.. Nah ntar klo pas di tes pake LAN tester ntar led 1,2,3, ma 6 saling bertukar. Klo tipe straight kan nyalanya urutan, nah klo tipe cross ada yang lompat lompat. Tapi yang pasti kudu nyala semua tiap led dari nomor 1 mpe 8.
Ok deh selamat bikin jaringan. Semoga kamu bisa berhasil waktu pasang konektor di kabelnya.. hehe.. Moga ilmu ini berguna buat kamu, soalnya waktu dulu gue pertama bikin jaringan lucu banget deh, buat ngupas kabelnya gue masih pake cutter, padahal kan udah ada tuh di crimp toolnya. Udah gitu ujung ujungnya tiap kabel aku kelupas lagi pake cutter. padahal yang betul ga usah di kupas atu atu, biarin aja rata, soalnya ntar pas di ‘crimp tool’ kan itu pin masing masing tembus ke dalem kabelnya.. bego deh dulu.. moga kamu ga melakukan hal sama kayak dulu

Perangkat Jaringan Komputer

Jaringan komputer (jaringan) adalah sebuah sistem yang terdiri atas komputer-komputer yang didesain untuk dapat berbagi sumber daya (printer, CPU), berkomunikasi (surel, pesan instan), dan dapat mengakses informasi(peramban web).Tujuan dari jaringan komputer adalah
Agar dapat mencapai tujuannya, setiap bagian dari jaringan komputer dapat meminta dan memberikan layanan (service). Pihak yang meminta/menerima layanan disebut klien (client) dan yang memberikan/mengirim layanan disebut peladen (server).Desain ini disebut dengan sistem client-server, dan digunakan pada hampir seluruh aplikasi jaringan komputer.
Dua buah komputer yang masing-masing memiliki sebuah kartu jaringan, kemudian dihubungkan melalui kabel maupun nirkabel sebagai medium transmisi data, dan terdapat perangkat lunak sistem operasi jaringan akan membentuk sebuah jaringan komputer yang sederhana. Apabila ingin membuat jaringan komputer yang lebih luas lagi jangkauannya, maka diperlukan peralatan tambahan seperti Hub, Bridge, Switch, Router, Gateway sebagai peralatan interkoneksinya
HUB
Hub Alat penghubung atar komputer, semua jenis komunikasi hanya dilewatkan oleh hub. hub digunakan untuk sebuah bentuk jaringan yang sederhana (misal hanya untuk menyambungkan beberapa komputer di satu group IP lokal) ketika ada satu paket yang masuk ke satu port di hub, maka akan tersalin ke port lainnya di hub yg sama dan semua komputer yg tersambung di hub yang sama dapat membaca paket tersebut. Saat ini hub sudah banyak ditinggalkan dan diganti dengan switch. Alasan penggantian ini biasanya adalah karena hub mempunyai kecepatan transfer data yang lebih lambat daripada switch. Hub dan switch mempunyai kecepatan transfer data sampai dengan 100 Mbps bahkan switch sudah dikembangkan sampai kecepatan 1 Gbps.

Switch
Switch Sebuah alat yang menyaring/filter dan melewatkan(mengijinkan lewat) paket yang ada di sebuah LAN. switcher bekerja pada layer data link (layer 2) dan terkadang di Network Layer (layer 3) berdasarkan referensi OSI Layer Model. sehingga dapat bekerja untuk paket protokol apapun. LAN yang menggunakan Switch untuk berkomunikasi di jaringan maka disebut dengan Switched LAN atau dalam fisik ethernet jaringan disebut dengan Switched Ethernet LANs.

Router
Router Alat yang bertugas untuk mengantarkan paket data dalam jaringan. router dapat digunakan jika tersambung paling tidak dengan dua jaringan yang berbeda sehingga pengaturan tersebut membutuhkan sebuah router.Router berada di sisi gateway sebuah tempat dimana dua jaringan LAN atau lebih untuk disambungkan. Router menggunakan HEADERS dan daftar tabel pengantar (Forwarding Table) untuk menentukan posisi yang terbaik untuk mengantarkan sebuah paket jaringan dan juga menggunakan protokol seperti ICMP,HTTP untuk berkomunikasi dengan LAN lainnya dengan konfigurasi terbaik untuk jalur antar dua host manapun.

Bridge
Pengertian dari sebuah bridge adalah bekarja pada data link layer pada OSI. bridge adal alat yang digunakan pada suatu jaringan yang berfungsi untuk memisahkan sebuah jaringan yang luas menjadi segment yang lebih kecil. bridge membaca alamat MAC (media access control0 dari setiap paket data yang diterima yang kemudian akan mempelajari dridging table untuk memutuskan apa yang akan dikerjakan bridge selanjutnya pada paket data tersebut, apakah diteruskan atau di abaikan. jika switch menpunyai domein collision sendiri-sendiri disetiap portnya, begitu juga dengan bridge memiliki domain collision ttetepi ia juga dapat membaginya dari sebuah domain collision yang besar menjadi yang lebih kecil, dah bridge hanya akan melewatkan paket data antar segment – segment jika hanya segment itu sangat diperlukan
Terdapat tiga jenis bridge jaringan yang umum dijumpai:
Bridge Lokal : sebuah bridge yang dapat menghubungkan segmen-segmen jaringan lokal.
Bridge Remote : dapat digunakan untuk membuat sebuah sambungan (link) antara LAN untuk membuat sebuah Wide Area Network.
Bridge Nirkabel : sebuah bridge yang dapat menggabungkan jaringan LAN berkabel dan jaringan LAN nirkabel.
Gateway


Gateway adalah sebuah perangkat yang digunakan untuk menghubungkan satu jaringan komputer dengan satu atau lebih jaringan komputer yang menggunakan protokol komunikasi yang berbeda sehingga informasi dari satu jaringan computer dapat diberikan kepada jaringan komputer lain yang protokolnya berbeda. Definisi tersebut adalah definisi gateway yang utama.
Seiring dengan merebaknya internet, definisi gateway seringkali bergeser. Tidak jarang pula pemula menyamakan “gateway” dengan “router” yang sebetulnya tidak benar.
Kadangkala, kata “gateway” digunakan untuk mendeskripkan perangkat yang menghubungkan jaringan komputer besar dengan jaringan komputer besar lainnya. Hal ini muncul karena seringkali perbedaan protokol komunikasi dalam jaringan komputer hanya terjadi di tingkat jaringan komputer yang besar.

Cara Membuat Read More Otomatis

Pertama, silahkan masuk ke halaman EDIT HTML, Cari kode </head> kemudian letakkan Script No. 1, di atas kode </head> Kalo sudah, jangan lupa di simpan terlebih dahulu.

Kedua, masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah :

<data:post.body/>

Kalau sudah, ganti kode <data:post.body/> dengan semua kode Script No. 2, kemudian simpan dan silahkan lihat hasilnya.


Script 1 :

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Script 2 :

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


Catatan : Untuk Anda yang telah membuat read More dengan Metode Manual harus dibersihkan dulu seperti default, hapus pada bagian warna merah, seperti contoh di bawah ini :

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>