Membuat Info Panel Slide (Tersembunyi)

Kang Fiqih | Assalamu'alaikum wr.wb., baru kali ini saya merasakan yang selalu dirasakan kebanyakan orang di bulan ramadhan, apalagi namanya kalau bukan "mudik". Memang, setelah melakukan mudik, ada suka dan ada duka yang saya rasakan pada saat itu. Sudah ceritanya sampai disana..hehe .. Sekarang kita masuk ke pembahasan saja, pertemuan kali ini saya akan sedikit membahas tentang Membuat Info Panel Slide (Tersembunyi) di blog Anda semuanya dan bisa dicoba setelah mengikuti tutorial ini. 

Info Panel Slide adalah dimana kita menyembunyikan info panel yang kita pasang ini tersembunyi dan bisa dilihat dengan menekan sebuah tombol. Yang disembunyikan di sini berupa informasi mengenai blog yang kita miliki dan juga si adminnya itu sendiri, contohnya bisa Anda lihat sendiri pada gambar di atas. Bagaimana cara membuatnya? Langsung saja ikuti tutorial di bawah ini

1. Login ke Akun blog Anda.

2. Klik Template.

3. Pilih Edit HTML.

4. Pada kolom script, carilah kode ]]></b:skin> dengan menggunakan Ctrl+F untuk mempercepat pencarian. Letakkan kode di bawah ini tepat di atas kode ]]></b:skin>

.panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
.panel p{color:#ccc;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.active.trigger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
.colleft{float:left;width:130px;line-height:22px}
.colright{float:right;width:130px;line-height:22px}
a:focus{outline:none}
.panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
.panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}

5. Kemudian cari kode </head> dengan cara yang sama seperti langkah no 4 dan letakkan kode di bawah ini diatasnya

<script  src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'  type='text/javascript'/>  

keterangan :

• Jika script jquery di atas sudah ada maka tidak perlu ditambahkan ke blog Anda, langsung ke langkah selanjutnya saja.

6. Masukkan kode di bawah ini dibawah kode jquery tadi

    

<script type="text/javascript"> 
$(document).ready(function(){ 
$(".trigger").click(function(){ 
$(".panel").toggle("fast"); 
$(this).toggleClass("active"); 
return false; 
}); 
}); 
</script>

7. Langkah pamungkas adalah mencari satu kode lagi yakni </body>, setelah itu copy kode di bawah ini tepat di atasnya

<div class='panel'>
<h3>Selamat Datang di Kangfiqih</h3>
<p style='text-align:justify'>Selamat datang di blog kangfiqih, blog yang difungsikan untuk membantu Anda dalam memecahkan masalah yang Anda alami. Saya berharap blog ini dapat menyenangkan Anda dan saya berharap Anda berkenan untuk datang kembali di lain waktu. Silahkan Anda mencari hal-hal baru di blog ini. Selamat beraktifitas dan sampai jumpa. <a href='http://kangfiqih.blogspot.com/' title='creating website'>Selengkapnya tentang blog ini</a></p>

<h3>Sekilas tentang kangfiqih</h3>
<img height='73px' src='http://i984.photobucket.com/albums/ae322/fiqihpunya/946388_592291774123619_159164671_n_zps64218e9e.jpg' width='73px'/>
<p>Kangfiqih, dia masih berusia 17 tahun. Dia mengawali dunia blogger pada saat memasuki kelas 12 di SMA, sampai sekarang dia sudah menjadi mahasiswa di salah satu perguruan tinggi negeri di Indonesia. Belajar menjadi blogger didasari dari hobinya yang selalu menekuni dunia komputer. Semoga kedepannya dia menjadi lebih baik dan lebih baik lagi.</p>

<div style='clear:both;'/>

<div class='columns'>
<div class='colleft'>
<h3>Navigasi</h3>
<ul>
<li><a href='#' title='home'>Home</a></li>
<li><a href='#' title='about'>About</a></li>
<li><a href='#' title='portfolio'>Portfolio</a></li>
<li><a href='#' title='contact'>Contact</a></li>
<li><a href='#' title='blog'>Blog</a></li>
</ul>
</div>

<div class='colright'>
<h3>Social Stuff</h3>
<ul>
<li><a href='http://twitter.com/fiqihpunya' title='Twitter'>Twitter</a></li>
<li><a href='http://www.facebook.com/fiqih21' title='Facebook Me'>Facebook Me</a></li>
<li><a href='mailto:abcdef@gmail.com' title='Gmail'>Gmail</a></li>
</ul>
</div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>Info</a>

keterangan :

• Untuk keterangannya bisa Anda lihat gambar di atas dan sesuaikan dengan yang kalian inginkan.
• Khusus untuk yang berwarna hijau ganti dengan url gambar yang akan Anda tampilkan nanti.

8. Klik Simpan Template.


Selamat beraktifitas dan sampai jumpa ...

Membuat Info Panel Slide (Tersembunyi)

Posted by Muhammad Fiqih No comments

Kang Fiqih | Assalamu'alaikum wr.wb., baru kali ini saya merasakan yang selalu dirasakan kebanyakan orang di bulan ramadhan, apalagi namanya kalau bukan "mudik". Memang, setelah melakukan mudik, ada suka dan ada duka yang saya rasakan pada saat itu. Sudah ceritanya sampai disana..hehe .. Sekarang kita masuk ke pembahasan saja, pertemuan kali ini saya akan sedikit membahas tentang Membuat Info Panel Slide (Tersembunyi) di blog Anda semuanya dan bisa dicoba setelah mengikuti tutorial ini. 

Info Panel Slide adalah dimana kita menyembunyikan info panel yang kita pasang ini tersembunyi dan bisa dilihat dengan menekan sebuah tombol. Yang disembunyikan di sini berupa informasi mengenai blog yang kita miliki dan juga si adminnya itu sendiri, contohnya bisa Anda lihat sendiri pada gambar di atas. Bagaimana cara membuatnya? Langsung saja ikuti tutorial di bawah ini

1. Login ke Akun blog Anda.

2. Klik Template.

3. Pilih Edit HTML.

4. Pada kolom script, carilah kode ]]></b:skin> dengan menggunakan Ctrl+F untuk mempercepat pencarian. Letakkan kode di bawah ini tepat di atas kode ]]></b:skin>

.panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
.panel p{color:#ccc;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.active.trigger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
.colleft{float:left;width:130px;line-height:22px}
.colright{float:right;width:130px;line-height:22px}
a:focus{outline:none}
.panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
.panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}

5. Kemudian cari kode </head> dengan cara yang sama seperti langkah no 4 dan letakkan kode di bawah ini diatasnya

<script  src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'  type='text/javascript'/>  

keterangan :

• Jika script jquery di atas sudah ada maka tidak perlu ditambahkan ke blog Anda, langsung ke langkah selanjutnya saja.

6. Masukkan kode di bawah ini dibawah kode jquery tadi

    

<script type="text/javascript"> 
$(document).ready(function(){ 
$(".trigger").click(function(){ 
$(".panel").toggle("fast"); 
$(this).toggleClass("active"); 
return false; 
}); 
}); 
</script>

7. Langkah pamungkas adalah mencari satu kode lagi yakni </body>, setelah itu copy kode di bawah ini tepat di atasnya

<div class='panel'>
<h3>Selamat Datang di Kangfiqih</h3>
<p style='text-align:justify'>Selamat datang di blog kangfiqih, blog yang difungsikan untuk membantu Anda dalam memecahkan masalah yang Anda alami. Saya berharap blog ini dapat menyenangkan Anda dan saya berharap Anda berkenan untuk datang kembali di lain waktu. Silahkan Anda mencari hal-hal baru di blog ini. Selamat beraktifitas dan sampai jumpa. <a href='http://kangfiqih.blogspot.com/' title='creating website'>Selengkapnya tentang blog ini</a></p>

<h3>Sekilas tentang kangfiqih</h3>
<img height='73px' src='http://i984.photobucket.com/albums/ae322/fiqihpunya/946388_592291774123619_159164671_n_zps64218e9e.jpg' width='73px'/>
<p>Kangfiqih, dia masih berusia 17 tahun. Dia mengawali dunia blogger pada saat memasuki kelas 12 di SMA, sampai sekarang dia sudah menjadi mahasiswa di salah satu perguruan tinggi negeri di Indonesia. Belajar menjadi blogger didasari dari hobinya yang selalu menekuni dunia komputer. Semoga kedepannya dia menjadi lebih baik dan lebih baik lagi.</p>

<div style='clear:both;'/>

<div class='columns'>
<div class='colleft'>
<h3>Navigasi</h3>
<ul>
<li><a href='#' title='home'>Home</a></li>
<li><a href='#' title='about'>About</a></li>
<li><a href='#' title='portfolio'>Portfolio</a></li>
<li><a href='#' title='contact'>Contact</a></li>
<li><a href='#' title='blog'>Blog</a></li>
</ul>
</div>

<div class='colright'>
<h3>Social Stuff</h3>
<ul>
<li><a href='http://twitter.com/fiqihpunya' title='Twitter'>Twitter</a></li>
<li><a href='http://www.facebook.com/fiqih21' title='Facebook Me'>Facebook Me</a></li>
<li><a href='mailto:abcdef@gmail.com' title='Gmail'>Gmail</a></li>
</ul>
</div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>Info</a>

keterangan :

• Untuk keterangannya bisa Anda lihat gambar di atas dan sesuaikan dengan yang kalian inginkan.
• Khusus untuk yang berwarna hijau ganti dengan url gambar yang akan Anda tampilkan nanti.

8. Klik Simpan Template.


Selamat beraktifitas dan sampai jumpa ...

Pengertian dan Awal Mula Jaringan Internet

Proses koneksi jaringan internet

Teknologi berkembang pesat sehingga ada sebuah slogan yang mengatakan "Dunia di Gemgaman Tangan Anda", salah satu teknologi yang sungguh fenomenal adalah Internet, sebuah Jaringan yang begitu kompleks namun sungguh mengagumkan maka kita sebut sebagai Jaringan Internet. Internet adalah jaringan komputer yang bisa dikategorikan sebagai WAN, menghubungkan berjuta komputer diseluruh dunia, tanpa batas negara, dimana setiap orang yang memiliki komputer dapat bergabung ke dalamaringan ini hanya dengan melakukan koneksi ke penyedia layanan internet (internet service provider / ISP) seperti Telkom Speedy, atau IndosatNet. Internet dapat diterjemahkan sebagai international networking (jaringan internasional), karena menghubungkan komputer secara internasional, atau sebagai internetworking (jaringan antar jaringan) karena menghubungkan berjuta jaringan diseluruh dunia.

Internet dimulai ketika Departemen Pertahanan Amerika Serikat (Department of Defense USA) membangun sebuah jaringan komputer di tahun 1969, yang diberi nama ARPANET (Advanced Research Project Agency NETwork) dengan tujuan untuk menghubungkan beberapa komputer yang berada dibeberapa universitas melakukan riset militer, terutama untuk membangun jaringan komunikasi komputer yang mampu bertahan terhadap serangan nuklir. Jaringan ini berkembang terus, semakin banyak komputer yang terlibat, dan riset disisi pengembangan perangkat lunak juga berkembang. Pada bulan Mei tahun 1974, Vinton G.Cerf dari Stanford University dan Robert E.Kahn dari Departemen Pertahanan USA, mempublikasi sebuah paper di IEEE Transaction on Communication berjudul “A Protocol for Packet Network Intercommunication”, konsep ini kemudian populer sebagai protokol TCP/IP, ketika ARPANET meng-adopsi protokol menjadi protokol standard untuk ARPANET pada tahun 1983. Pihak universitas terutama University of California at Berkeley kemudian membangun sistem operasi Berkeley Software Distribution Unix) atau BSD UNIX (dikenal dengan nama Free BSD Unix) dan pihak departemen pertahanan membiayai Bolt Baranek dan Newman (BBN) untuk meng-implementasi protokol TCP/IP pada BSD Unix untuk diterapkan pada ARPANET, dengan demikian cikal-bakal internet terbentuk.

Pada penghujung tahun 1983, jaringan ARPANET dibagi dua menjadi DARPANET (Defence ARPANET) dan MILNET (MILitary NETwork). Pada tahun 1985 dibentuklah jaringan NFSNET (National Science Foundation NETwork) untuk menghubungkan supercomputer yang ada diberbagai universitas di Amerika dan disambungkan dengan ARPANET. Jaringan NSFNET dikembangkan terus oleh periset perguruan tinggi. Pada tahun 1988 jaringan backbone internet ini hanya berkapasitas 56 Kbps. Walaupun pada tahun 1990 secara resmi ARPANET ditutup, namun jaringan internet yang telah terbentuk diteruskan oleh pihak universitas di Amerika dan memasukkan jaringan universitas di benua Amerika (Kanada dan Amerika Selatan) serta jaringan di Eropa menjadi bagian dari internet. Pada tahun 1992 jaringan backbone ditingkatkan ke T3 dengan kecepatan 45 Mbps, dan disekitar tahun 1995 ditingkatkan lagi menjadi OC-3 pada kecepatan 155 Mbps. Kini backbone internet berkecepatan tinggi dalam order Gbps.

Topologi internet pada dasarnya adalah mesh-topology, menghubungkan banyak jenis jaringan melalui sistem packet-switching, kalaupun bisa dikatakan yang menjadi pusat-nya adalah beberapa NAP (Network Access Point) yang ada di San Fransisco (Pacific Bell), di Chicago (Ameritech), New Jersey (Sprint), dan Merit Access Exchange (MAE) di San Fransisco (MAE West) dan Washington, D.C (MAE East) yang ditangani oleh MFS Datanet.

Walaupun tidak ada organisasi yang memiliki internet, namun ada banyak organisasi yang memelihara jaringan ini melalui penetapan standarisasi protokol, aturan-aturan, serta metoda akses. Internet Engineering Task Force (IETF) menangani masalah-masalah teknis yang timbul di internet,  seperti masalah pada protokol, arsitektur dan pengoperasian internet. Internet Research Task Force (IRTF) menangani riset teknis, seperti sistem pengalamatan dan rekayasa lainnya. Internet Assigned Numbers Authority (IANA) mengatur pembagian alamat IP (IP#) ke berbagai negara dan organisasi. Internet Society (ISOC) menangani masalah administrasi dan struktur organisasi internet.

Badan usaha komersil kemudian menyediakan layanan akses dengan menyediakan koneksi dari komputer pengguna ke internet, dan badan ini disebut sebagai penyedia akses internet atau ISP. Beberapa ISP terkenal di dunia adalah America On Line (AOL), Australia OnLine, CompuServe, GEnie, dan Prodigy. Di Indonesia ada TelkomNet, IndosatNet, Wasantara Net, InterNux, dan sebagainya. ISP menyediakan koneksi dial-up melalui modem-telepon, koneksi wireless melalui antena WLAN, atau koneksi ADSL melalui telepon. Protokol koneksi yang digunakan adalah SLIP (Serial Line Interface Protocol) atau PPP (Point-to-Point Protocol), dimana koneksi SLIP biasanya lebih lambat dari PPP.

Secara logis jaringan internet dibagi kedalam beberapa domain, yang menurut standar IPv4 (Internet Protocol version 4) di-identifikasi melalui nomer IP 32 bit atau 4 angka biner yang dipisahkan dengan titik (seperti 192.168.10.25). Tipe domain standar antara lain:

.com = organisasi komersil
.edu  = institusi pendidikan di Amerika
.ac    = institusi akademik
.gov  = institusi pemerintah
.mil   = organisasi militer
.net   = penyedia akses jaringan
.org   = organisasi non-profit

Disamping itu domain juga dibagi berdasarkan negara, misalnya:

.au    =  Australia
.ca    =  Kanada
.id     =  Indonesia
.jp     =  Jepang
.my   =  Malaysia
.sw   =   Swedia
.th     =  Thailand

sumber

Selamat beraktivitas dan sampai jumpa ...

Pengertian dan Awal Mula Jaringan Internet

Posted by Muhammad Fiqih No comments

Proses koneksi jaringan internet

Teknologi berkembang pesat sehingga ada sebuah slogan yang mengatakan "Dunia di Gemgaman Tangan Anda", salah satu teknologi yang sungguh fenomenal adalah Internet, sebuah Jaringan yang begitu kompleks namun sungguh mengagumkan maka kita sebut sebagai Jaringan Internet. Internet adalah jaringan komputer yang bisa dikategorikan sebagai WAN, menghubungkan berjuta komputer diseluruh dunia, tanpa batas negara, dimana setiap orang yang memiliki komputer dapat bergabung ke dalamaringan ini hanya dengan melakukan koneksi ke penyedia layanan internet (internet service provider / ISP) seperti Telkom Speedy, atau IndosatNet. Internet dapat diterjemahkan sebagai international networking (jaringan internasional), karena menghubungkan komputer secara internasional, atau sebagai internetworking (jaringan antar jaringan) karena menghubungkan berjuta jaringan diseluruh dunia.

Internet dimulai ketika Departemen Pertahanan Amerika Serikat (Department of Defense USA) membangun sebuah jaringan komputer di tahun 1969, yang diberi nama ARPANET (Advanced Research Project Agency NETwork) dengan tujuan untuk menghubungkan beberapa komputer yang berada dibeberapa universitas melakukan riset militer, terutama untuk membangun jaringan komunikasi komputer yang mampu bertahan terhadap serangan nuklir. Jaringan ini berkembang terus, semakin banyak komputer yang terlibat, dan riset disisi pengembangan perangkat lunak juga berkembang. Pada bulan Mei tahun 1974, Vinton G.Cerf dari Stanford University dan Robert E.Kahn dari Departemen Pertahanan USA, mempublikasi sebuah paper di IEEE Transaction on Communication berjudul “A Protocol for Packet Network Intercommunication”, konsep ini kemudian populer sebagai protokol TCP/IP, ketika ARPANET meng-adopsi protokol menjadi protokol standard untuk ARPANET pada tahun 1983. Pihak universitas terutama University of California at Berkeley kemudian membangun sistem operasi Berkeley Software Distribution Unix) atau BSD UNIX (dikenal dengan nama Free BSD Unix) dan pihak departemen pertahanan membiayai Bolt Baranek dan Newman (BBN) untuk meng-implementasi protokol TCP/IP pada BSD Unix untuk diterapkan pada ARPANET, dengan demikian cikal-bakal internet terbentuk.

Pada penghujung tahun 1983, jaringan ARPANET dibagi dua menjadi DARPANET (Defence ARPANET) dan MILNET (MILitary NETwork). Pada tahun 1985 dibentuklah jaringan NFSNET (National Science Foundation NETwork) untuk menghubungkan supercomputer yang ada diberbagai universitas di Amerika dan disambungkan dengan ARPANET. Jaringan NSFNET dikembangkan terus oleh periset perguruan tinggi. Pada tahun 1988 jaringan backbone internet ini hanya berkapasitas 56 Kbps. Walaupun pada tahun 1990 secara resmi ARPANET ditutup, namun jaringan internet yang telah terbentuk diteruskan oleh pihak universitas di Amerika dan memasukkan jaringan universitas di benua Amerika (Kanada dan Amerika Selatan) serta jaringan di Eropa menjadi bagian dari internet. Pada tahun 1992 jaringan backbone ditingkatkan ke T3 dengan kecepatan 45 Mbps, dan disekitar tahun 1995 ditingkatkan lagi menjadi OC-3 pada kecepatan 155 Mbps. Kini backbone internet berkecepatan tinggi dalam order Gbps.

Topologi internet pada dasarnya adalah mesh-topology, menghubungkan banyak jenis jaringan melalui sistem packet-switching, kalaupun bisa dikatakan yang menjadi pusat-nya adalah beberapa NAP (Network Access Point) yang ada di San Fransisco (Pacific Bell), di Chicago (Ameritech), New Jersey (Sprint), dan Merit Access Exchange (MAE) di San Fransisco (MAE West) dan Washington, D.C (MAE East) yang ditangani oleh MFS Datanet.

Walaupun tidak ada organisasi yang memiliki internet, namun ada banyak organisasi yang memelihara jaringan ini melalui penetapan standarisasi protokol, aturan-aturan, serta metoda akses. Internet Engineering Task Force (IETF) menangani masalah-masalah teknis yang timbul di internet,  seperti masalah pada protokol, arsitektur dan pengoperasian internet. Internet Research Task Force (IRTF) menangani riset teknis, seperti sistem pengalamatan dan rekayasa lainnya. Internet Assigned Numbers Authority (IANA) mengatur pembagian alamat IP (IP#) ke berbagai negara dan organisasi. Internet Society (ISOC) menangani masalah administrasi dan struktur organisasi internet.

Badan usaha komersil kemudian menyediakan layanan akses dengan menyediakan koneksi dari komputer pengguna ke internet, dan badan ini disebut sebagai penyedia akses internet atau ISP. Beberapa ISP terkenal di dunia adalah America On Line (AOL), Australia OnLine, CompuServe, GEnie, dan Prodigy. Di Indonesia ada TelkomNet, IndosatNet, Wasantara Net, InterNux, dan sebagainya. ISP menyediakan koneksi dial-up melalui modem-telepon, koneksi wireless melalui antena WLAN, atau koneksi ADSL melalui telepon. Protokol koneksi yang digunakan adalah SLIP (Serial Line Interface Protocol) atau PPP (Point-to-Point Protocol), dimana koneksi SLIP biasanya lebih lambat dari PPP.

Secara logis jaringan internet dibagi kedalam beberapa domain, yang menurut standar IPv4 (Internet Protocol version 4) di-identifikasi melalui nomer IP 32 bit atau 4 angka biner yang dipisahkan dengan titik (seperti 192.168.10.25). Tipe domain standar antara lain:

.com = organisasi komersil
.edu  = institusi pendidikan di Amerika
.ac    = institusi akademik
.gov  = institusi pemerintah
.mil   = organisasi militer
.net   = penyedia akses jaringan
.org   = organisasi non-profit

Disamping itu domain juga dibagi berdasarkan negara, misalnya:

.au    =  Australia
.ca    =  Kanada
.id     =  Indonesia
.jp     =  Jepang
.my   =  Malaysia
.sw   =   Swedia
.th     =  Thailand

sumber

Selamat beraktivitas dan sampai jumpa ...

Membuat Laptop Menjadi Hotspot Area

Kang Fiqih | Assalamu'alaikum wr.wb, haduuuhhh,,cape banget nih baru pulang dari kampus, tapi gak bakalan cape jika saya menemani Anda semua untuk memberikan wawasan baru. Seiring dengan berkembangnya waktu dan zaman, maka sedikit demi sedikit pasti mayoritas orang sudah mengetahui yang namanya "Teknologi". Di dalam cakupan teknologi ini biasanya kita sering mendengar yang namanya internet, pasti sudah pada tahu lah yang namanya internet itu apa ..

Nah, kita tidak secara bebas menggunakan si internet ini. Fasilitas internet didapat dari sebuah jaringan komputer. Biasanya di daerah perkotaan, khususnya di tempat-tempat yang banyak dikunjungi oleh banyak orang, seperti Mall, Restoran, Hotel, Kantor, dan bahkan di warung-warung kecilpun sekarang sudah ada sebuah fasilitas internet. Fasilitas internet disini disebut Hotspot.

Apa ada yang sudah kenal hotspot? Hotspot adalah area dimana seorang client dapat terhubung dengan jaringan internet secara wireless (nirkabel/tanpa kabel) dari PC, note book atau gadget seperti Handphone dalam jangkauan radius kurang lebih beberapa ratus meteran atau tergantung dari kekuatan frekuensi/signal.

Nah, disini saya akan sharing sedikit, bagaimana caranya agar kita dapat Membuat Laptop Menjadi Hotspot Area. Ada beberapa jenis cara yang bisa Anda lakukan untuk ini, namun saya pilihkan satu cara simple untuk Anda.

1. Terlebih dahulu Anda harus mendownload software yang namanya Connectify Hotspot. Anda bisa mendownload-nya disini.

2. Setelah software terinstall di laptop Anda, maka Anda harus mengisi form seperti gambar di bawah ini

keterangan :

• Ganti Hotspot Name dengan nama yang Anda inginkan untuk Hotspot Area Anda.
• Isi Password dengan password yang Anda inginkan. (jika perlu)
• Ganti Internet to Share dari yang tadinya Wi-Fi menjadi Automatic.

3. Klik Start Hotspot.

Sekarang laptop Anda sudah menjadi Hotspot Area seperti yang ada di mall-mall.. he .. Silahkan dicoba.

Selamat beraktivitas dan sampai jumpa ...

 

Membuat Laptop Menjadi Hotspot Area

Posted by Muhammad Fiqih No comments

Kang Fiqih | Assalamu'alaikum wr.wb, haduuuhhh,,cape banget nih baru pulang dari kampus, tapi gak bakalan cape jika saya menemani Anda semua untuk memberikan wawasan baru. Seiring dengan berkembangnya waktu dan zaman, maka sedikit demi sedikit pasti mayoritas orang sudah mengetahui yang namanya "Teknologi". Di dalam cakupan teknologi ini biasanya kita sering mendengar yang namanya internet, pasti sudah pada tahu lah yang namanya internet itu apa ..

Nah, kita tidak secara bebas menggunakan si internet ini. Fasilitas internet didapat dari sebuah jaringan komputer. Biasanya di daerah perkotaan, khususnya di tempat-tempat yang banyak dikunjungi oleh banyak orang, seperti Mall, Restoran, Hotel, Kantor, dan bahkan di warung-warung kecilpun sekarang sudah ada sebuah fasilitas internet. Fasilitas internet disini disebut Hotspot.

Apa ada yang sudah kenal hotspot? Hotspot adalah area dimana seorang client dapat terhubung dengan jaringan internet secara wireless (nirkabel/tanpa kabel) dari PC, note book atau gadget seperti Handphone dalam jangkauan radius kurang lebih beberapa ratus meteran atau tergantung dari kekuatan frekuensi/signal.

Nah, disini saya akan sharing sedikit, bagaimana caranya agar kita dapat Membuat Laptop Menjadi Hotspot Area. Ada beberapa jenis cara yang bisa Anda lakukan untuk ini, namun saya pilihkan satu cara simple untuk Anda.

1. Terlebih dahulu Anda harus mendownload software yang namanya Connectify Hotspot. Anda bisa mendownload-nya disini.

2. Setelah software terinstall di laptop Anda, maka Anda harus mengisi form seperti gambar di bawah ini

keterangan :

• Ganti Hotspot Name dengan nama yang Anda inginkan untuk Hotspot Area Anda.
• Isi Password dengan password yang Anda inginkan. (jika perlu)
• Ganti Internet to Share dari yang tadinya Wi-Fi menjadi Automatic.

3. Klik Start Hotspot.

Sekarang laptop Anda sudah menjadi Hotspot Area seperti yang ada di mall-mall.. he .. Silahkan dicoba.

Selamat beraktivitas dan sampai jumpa ...

 

Membuat Author Box (Kotak Author) di Bawah Postingan Blog

Kang Fiqih | Assalamu'alaikum wr.wb., Author Box. Disunggung mengenai Author Box, apakah ada yang sudah mengenal widget ini? Kalau belum please comment..he.. Author Box  menurut bahasa terbagi menjadi dua kata yakni Author yang artinya Penulis, jadi disini maksudnya adalah admin sebuah blog yang mempunyai peranan penuh terhadap blog tersebut dan yang kedua adalah Box yang artinya kotak. Jadi Author Box dapat didefinisikan sebagai kotak yang didalamnya terdapat seorang penulis beserta deskripsi penulis(biasanya).

Di dalam Author Box ini juga terdapat permalink, permalink adalah sebuah link yang nantinya merujuk ke suatu blog atau forum tertentu masuk setelah berlalu dari halaman depan ke arsip. Hal ini bertujuan supaya pengguna atau pembaca blog mengetahui permalink dari postingan yang sedang dibacanya. 

Dan di dalam permalink ini sudah ada script atau kode html yang berisi permalink dari artikel yang sedang dibacanya. Biasanya para blogger selalu menambahkan permalink ini di bawah postingan blog mereka,

Nah, sekarang mungpung saya memiliki waktu yang luang untuk ngeblog, saya ingin memberikan sedikit ilmunya kepada Anda semua mengenai bagaimana caranya Membuat Author Box (Kotak Author) di Bawah Postingan Blog. Seperti biasa pasti selalu ada kode/script di dalamnya, langsung saja :

1. Login ke Akun Blog Anda.

2. Klik Template -->Edit HTML.

3. Carilah kode ]]></b:skin> dengan menggunakan Ctrl+F.

4. Setelah kode tersebut ditemukan, maka letakkan kode di bawah ini tepat di atas kode ]]></b:skin>

admin-tulisan{width:auto;background:#333;border:2px solid #aaa;margin:30px 0 10px 0;display:block;font-family:"julee";
color:#aaa;}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{background:#000000;border:none;border-bottom:1px solid #000000;color:#fff;font-family:"julee";text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);padding:5px 10px;margin:0 0 0 0;display:block;}.admin-tulisan h4 a{color:#000000;}
.admin-tulisan img{background:#000000;width:80px;height:85px;border:1px solid #000000;margin:3px 10px 0 0;float:left;padding:2px;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;}

keterangan :

• kode yang berwarna biru adalah lebar dari permalink.
• kode yang berwarna merah adalah tinggi dari permalink. 

5. Selanjutnya cari kode <data:post.body/>.

6.  Jika Anda menggunakan auto readmore pada blog maka kemungkinan kode di langkah no. 5 ada dua, letakkan saja kode di bawah ini di bawah kode <data:post.body/> yang KEDUA.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='admin-tulisan'>
<h4>Ditulis Oleh : <b><data:post.author/></b>  ,Be The Best</h4>
<div class='kontainer'>
<img alt='Muhammad Fiqih' src='http://lh3.googleusercontent.com/-0o3cJfWH_lo/AAAAAAAAAAI/AAAAAAAAAEs/uUfYHAZhj9k/s512-c/photo.jpg'/>
Anda sedang membaca artikel tentang <b><a expr:href='data:post.url'><data:post.title/></a></b>.  Oleh Admin, Anda diperbolehkan mengcopy-paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya
<textarea cols='50' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='2'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea>
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'>
<a href='http://kangfiqih.blogspot.com/' target='_blank'>:: Pasang Widget Ini ::</a></span></p><div style='clear:both;'/></div></div>
</b:if>

keterangan : 

• kode yang berwarna merah adalah url gambar yang akan Anda pasang.
• kode yang berwarna hijau bisa Anda ganti dengan kata-kata yang Anda inginkan.

Selamat beraktivitas dan sampai jumpa ...

Membuat Author Box (Kotak Author) di Bawah Postingan Blog

Posted by Muhammad Fiqih 3 comments

Kang Fiqih | Assalamu'alaikum wr.wb., Author Box. Disunggung mengenai Author Box, apakah ada yang sudah mengenal widget ini? Kalau belum please comment..he.. Author Box  menurut bahasa terbagi menjadi dua kata yakni Author yang artinya Penulis, jadi disini maksudnya adalah admin sebuah blog yang mempunyai peranan penuh terhadap blog tersebut dan yang kedua adalah Box yang artinya kotak. Jadi Author Box dapat didefinisikan sebagai kotak yang didalamnya terdapat seorang penulis beserta deskripsi penulis(biasanya).

Di dalam Author Box ini juga terdapat permalink, permalink adalah sebuah link yang nantinya merujuk ke suatu blog atau forum tertentu masuk setelah berlalu dari halaman depan ke arsip. Hal ini bertujuan supaya pengguna atau pembaca blog mengetahui permalink dari postingan yang sedang dibacanya. 

Dan di dalam permalink ini sudah ada script atau kode html yang berisi permalink dari artikel yang sedang dibacanya. Biasanya para blogger selalu menambahkan permalink ini di bawah postingan blog mereka,

Nah, sekarang mungpung saya memiliki waktu yang luang untuk ngeblog, saya ingin memberikan sedikit ilmunya kepada Anda semua mengenai bagaimana caranya Membuat Author Box (Kotak Author) di Bawah Postingan Blog. Seperti biasa pasti selalu ada kode/script di dalamnya, langsung saja :

1. Login ke Akun Blog Anda.

2. Klik Template -->Edit HTML.

3. Carilah kode ]]></b:skin> dengan menggunakan Ctrl+F.

4. Setelah kode tersebut ditemukan, maka letakkan kode di bawah ini tepat di atas kode ]]></b:skin>

admin-tulisan{width:auto;background:#333;border:2px solid #aaa;margin:30px 0 10px 0;display:block;font-family:"julee";
color:#aaa;}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{background:#000000;border:none;border-bottom:1px solid #000000;color:#fff;font-family:"julee";text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);padding:5px 10px;margin:0 0 0 0;display:block;}.admin-tulisan h4 a{color:#000000;}
.admin-tulisan img{background:#000000;width:80px;height:85px;border:1px solid #000000;margin:3px 10px 0 0;float:left;padding:2px;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;}

keterangan :

• kode yang berwarna biru adalah lebar dari permalink.
• kode yang berwarna merah adalah tinggi dari permalink. 

5. Selanjutnya cari kode <data:post.body/>.

6.  Jika Anda menggunakan auto readmore pada blog maka kemungkinan kode di langkah no. 5 ada dua, letakkan saja kode di bawah ini di bawah kode <data:post.body/> yang KEDUA.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='admin-tulisan'>
<h4>Ditulis Oleh : <b><data:post.author/></b>  ,Be The Best</h4>
<div class='kontainer'>
<img alt='Muhammad Fiqih' src='http://lh3.googleusercontent.com/-0o3cJfWH_lo/AAAAAAAAAAI/AAAAAAAAAEs/uUfYHAZhj9k/s512-c/photo.jpg'/>
Anda sedang membaca artikel tentang <b><a expr:href='data:post.url'><data:post.title/></a></b>.  Oleh Admin, Anda diperbolehkan mengcopy-paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya
<textarea cols='50' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='2'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea>
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'>
<a href='http://kangfiqih.blogspot.com/' target='_blank'>:: Pasang Widget Ini ::</a></span></p><div style='clear:both;'/></div></div>
</b:if>

keterangan : 

• kode yang berwarna merah adalah url gambar yang akan Anda pasang.
• kode yang berwarna hijau bisa Anda ganti dengan kata-kata yang Anda inginkan.

Selamat beraktivitas dan sampai jumpa ...

Membuat Scroll pada Blog Archive (Arsip Blog)

Kang Fiqih | Assalamu'alaikum wr.wb, pada mulanya saya memasang template blog ini dengan pengaturan tata letak yang sangat berantakan. Di situ juga ada sebuah Blog Archive (Arsip Blog) yang menjadi salah satunya. 

Saya atur satu demi satu widget-widget yang tidak diperlukan untuk blog saya ini. Saya berfikir sudah selesai untuk mengatur tata letak di blog saya. Namun setelah saya memposting beberapa artikel, terlihat blog archive ini makin lama makin panjang, dan itu menurut saya sangatlah menggangu tampilan di blog ini.

Setelah itu, terpikirlah saya untuk bagaimana caranya agar blog archive ini bisa di perpendek. Dan mungkin cara satu-satunya adalah memakai scroll disini. Memang fingsi scroll di blog adalah jika terdapat banyak postingan di blog tidak akan memakan tempat yang banyak.

Dan saya telah menemukan cara untuk Membuat Scroll pada Blog Archive (Arsip Blog). Berikut adalah langkah-langkahnya :

1. Login ke Akun Blog Anda.

2. Klik menu Template --> Edit HTML.

3. Cari kode di bawah ini dengan menggunakan Ctrl+F

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>..................... </b:widget>

keterangan : 

• jika Anda tidak menemukan kode di atas maka Anda cari dengan kata kunci "BlogArchive". (carilah kode yang serupa dengan kode di atas)

4. Ganti kode tersebut dengan kode di bawah ini

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:200px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>

<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>\
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='flat' var='data'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<ul>
<li expr:class='&quot;archivedate &quot; + data:i.expclass'>
<b:include data='i' name='toggle'/>
<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
<span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</li>
</ul>
</b:loop>
</b:includable>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
<b:if cond='data:interval.expclass == &quot;expanded&quot;'>
<a class='toggle' expr:href='data:widget.actionUrl + &quot;&amp;action=toggle&quot; + &quot;&amp;dir=close&amp;toggle=&quot; + data:interval.toggleId + &quot;&amp;toggleopen=&quot; + data:toggleopen'>
<span class='zippy toggle-open'>&#9660; </span>
</a>
<b:else/>
<a class='toggle' expr:href='data:widget.actionUrl + &quot;&amp;action=toggle&quot; + &quot;&amp;dir=open&amp;toggle=&quot; + data:interval.toggleId + &quot;&amp;toggleopen=&quot; + data:toggleopen'>
<span class='zippy'>
<b:if cond='data:blog.languageDirection == &quot;rtl&quot;'>
&#9668;
<b:else/>
&#9658;
</b:if>
</span>
</a>
</b:if>
</b:if>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
</b:widget>

keterangan :

• kode yang berwarna merah adalah tinggi yang diinginkan untuk widget blog archive ini.
• ganti kode yang berwarna merah sesuai dengan yang Anda kehendaki.

Selamat beraktivitas dan sampai jumpa ...
 

 

Membuat Scroll pada Blog Archive (Arsip Blog)

Posted by Muhammad Fiqih No comments

Kang Fiqih | Assalamu'alaikum wr.wb, pada mulanya saya memasang template blog ini dengan pengaturan tata letak yang sangat berantakan. Di situ juga ada sebuah Blog Archive (Arsip Blog) yang menjadi salah satunya. 

Saya atur satu demi satu widget-widget yang tidak diperlukan untuk blog saya ini. Saya berfikir sudah selesai untuk mengatur tata letak di blog saya. Namun setelah saya memposting beberapa artikel, terlihat blog archive ini makin lama makin panjang, dan itu menurut saya sangatlah menggangu tampilan di blog ini.

Setelah itu, terpikirlah saya untuk bagaimana caranya agar blog archive ini bisa di perpendek. Dan mungkin cara satu-satunya adalah memakai scroll disini. Memang fingsi scroll di blog adalah jika terdapat banyak postingan di blog tidak akan memakan tempat yang banyak.

Dan saya telah menemukan cara untuk Membuat Scroll pada Blog Archive (Arsip Blog). Berikut adalah langkah-langkahnya :

1. Login ke Akun Blog Anda.

2. Klik menu Template --> Edit HTML.

3. Cari kode di bawah ini dengan menggunakan Ctrl+F

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>..................... </b:widget>

keterangan : 

• jika Anda tidak menemukan kode di atas maka Anda cari dengan kata kunci "BlogArchive". (carilah kode yang serupa dengan kode di atas)

4. Ganti kode tersebut dengan kode di bawah ini

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:200px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>

<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>\
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='flat' var='data'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<ul>
<li expr:class='&quot;archivedate &quot; + data:i.expclass'>
<b:include data='i' name='toggle'/>
<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
<span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</li>
</ul>
</b:loop>
</b:includable>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
<b:if cond='data:interval.expclass == &quot;expanded&quot;'>
<a class='toggle' expr:href='data:widget.actionUrl + &quot;&amp;action=toggle&quot; + &quot;&amp;dir=close&amp;toggle=&quot; + data:interval.toggleId + &quot;&amp;toggleopen=&quot; + data:toggleopen'>
<span class='zippy toggle-open'>&#9660; </span>
</a>
<b:else/>
<a class='toggle' expr:href='data:widget.actionUrl + &quot;&amp;action=toggle&quot; + &quot;&amp;dir=open&amp;toggle=&quot; + data:interval.toggleId + &quot;&amp;toggleopen=&quot; + data:toggleopen'>
<span class='zippy'>
<b:if cond='data:blog.languageDirection == &quot;rtl&quot;'>
&#9668;
<b:else/>
&#9658;
</b:if>
</span>
</a>
</b:if>
</b:if>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
</b:widget>

keterangan :

• kode yang berwarna merah adalah tinggi yang diinginkan untuk widget blog archive ini.
• ganti kode yang berwarna merah sesuai dengan yang Anda kehendaki.

Selamat beraktivitas dan sampai jumpa ...