Membuat 3 Kolom di Bawah Header Blogspot

Apa teman-teman blogger semua ingin tampilan blognya tambah ramai? Kali ini saya akan menjelaskan sedikit tentang bagaimana cara membuat ramai blog teman-teman semua, salah satunya dengan membuat tiga kolom di bawah header. Widget 3 kolom dibawah header ini sebenarnya bisa Anda tambahkan jika pada bagian sidebar template sudah penuh dan terlalu panjang. Sebagai alternatif untuk meletakkan kode html ataupun javascript yang mungkin andaperlukan. Kurang lebih sama dengan postingan saya yang dulu tentang membuat multi kolom yang diletakkan di bagian bawah blog, namun kali ini saya meletakkannya bagian atas atau tepatnya dibawah header.

Baiklah langsung menuju lokasi pengeditan template-nya.

• Silahkan login ke blogger.
• Tuju Tata Letak.
• Pilih tab Edit HML.
• Jangan di klik Expand Template Widget, karena akan memusingkan anda.
• Letakkan kode css berikut ini diatas kode ]]></b:skin>
  

  /* –- Top --*/

  #top {

  background:#fff;

  margin-top:10px auto;

  width:960px;

  overflow:hidden;

  font-size:12px;

  padding:10px;

  }

  #top h2 {

  background:#000 url(http://lh5.ggpht.com/_7Y9pl24WpQY/Ss37F0ZA9kI/AAAAAAAAB2k/c_ySi8QZg20/header_thumb%5B2%5D.jpg) repeat-x;

  font-size:14pt;

  font-weight:400;

  text-align:center;

  font-style:normal;

  line-height:1.3em;

  color:#fff;

  padding:5px;

  margin-top:-10px;

  margin-left:-10px;

  margin-right:-10px;

  }

  #top ul {

  color:#333;

  margin:0;

  padding:0;

  }

  #top ul li {

  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZrpOonRK4YzjCqZUbc1BHtn6wjHqBvsMCLXYE3rB7tkz0S9apwY-4lARWV9uglQtF-eOtCO-tFitXjAG8d8rIWi0z8YnsJQ6YeYn42UUegkX7Sr1V2UHqbMmSh5nsCR-BhArbKS-pYxSi/s320/b3.gif) no-repeat;

  list-style-type:none;

  border-bottom:1px dashed #CCC;

  margin:0 0 10px;

  padding:0 0 5px 20px;

  }

  #top ul li a:hover {

  margin:0px 0px 5px;

  padding:0px;

  }

  #topcenter {

  width:300px;

  float:left;

  margin-left:10px;

  background:#fff;

  padding:10px

  }

  #topleft {

  width:280px;

  float:left;

  margin-left:10px;

  background:#fff;

  padding:10px;

  }

  #topright {

  width:280px;

  float:right;

  margin-left:10px;

  background:#fff;

  padding:10px;

  }

• Cari kode yang mirip seperti ini, biasanya letaknya dibawah </head>

  <div id='header-wrapper'>

  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

  <b:widget id='Header1' locked='true' title='JUDUL BLOG ANDA (Header)' type='Header'/>

  </b:section>

  </div>

• Kemudian letakkan kode berikut ini tepat setelah kode diatas :

  <div id='top'>

  <b:section class='top' id='topleft' preferred='yes' showaddelement='yes'>

  </b:section>

  <b:section class='topcenter' id='topcenter' preferred='yes' showaddelement='yes'>

  </b:section>

  <b:section class='topright' id='topright' preferred='yes' showaddelement='yes'>

  </b:section>

  </div>

• Simpan Template.

Semoga bermanfaat dan bisa membuat blog anda jadi ramai.

Pasang Banner di Header Blog

Selamat siang teman-teman blogger semua, gimana nih kabarnya? Baik bukan? Nah, kalau teman-teman semua dalam keadaan baik, kali ini saya akan memberikan sebuah turorial bagaimana cara pasang banner di blog kita. Mungkin diantara temen-temen sekalian udah ada yang tahu, tapi ada baiknya kalau saya langsung tulis aja postingannya. Memasang banner merupakan sebuah keinginan yang saya anggap wajar bagi seorang pemilik blog, karena sudah barang tentu merupakan suatu kebahagiaan tersendiri apabila banner yang sangat kita sukai dapat di tempatkan pada blog kebanggan kita. Jika ada pertanyaan lain “apakah kita bisa mengganti atau menambahkan banner sendiri kedalam blog?” jawabannya adalah bisa, akan tetapi tentunya kita harus sedikit bercape ria mengotak-atik kode template.

Lagi-lagi karena template terbagi dua yaitu template klasik dan template baru, maka saya akan membagi dua bahasan tentang bagaimana caranya menambahkan atau mengganti banner yang ada di header. Sebelum menginjak kepada proses editting template, langkah awal tentunya sobat harus mempunyai banner yang akan di pakai. Untuk membuat sebuah banner, sobat bisa menggunakan berbagai program desain grafis yang sobat kuasai, apakah itu photoshop, coreldraw, ataupun program-program yang lainnya yang sejenis yang penting judulnya adalah program yang bisa membuat banner. Karena template bentuknya ratusan atau bahkan mungkin ribuan, tentunya tulisan ini tidak akan bisa mewakili untuk pemakaian template, akan tetapi mungkin akan sedikit memberi gambaran bagaimana cara menambahkan atau merubah banner yang ada di header. Sebagai proyek percontohan (kaya kerjaan saja ya pake proyek segala), saya akan mengambil contoh template Minima yang di desain oleh Douglas Bowman, dan template ini merupakan template asli blogger.  

Untuk Template Klasik

Seperti yang saya sebutkan di awal bahwa langkah pertama yang dilakukan adalah membuat banner, gambar banner terserah kepada sobat, mau gambar pemandangan, laut, atau photo sobat sendiri juga boleh. Langkah kedua adalah meng upload banner tersebut, bisa di upload ke blogger sendiri atau ke hosting lain. Untuk upload gambar atau banner anda bisa diilakukan dengan google sites atau photobucket. Sebagai contoh, saya sudah upload banner di www.photbucket.com dan mempunyai alamat banner seperti ini : http://i162.photobucket.com/albums/t253/kolis212/banner_8.gif dan gambar bannernya seperti ini ((ukuran aslinya 468 x 60)

Untuk cara penempatannya silahkan ikuti langkah-langkah berikut :

1. Sign in di blogger
2. Klik menu Template
3. Klim menu Edit HTML
4. Copy seluruh kode HTML yang ada lalu paste pada notepad kemudian save, ini sebagai backup data apabila kita melakukan kesalahan dalam proses edtitting template
5. Sisipkan kode berikut pada style sheet css sobat. Yang warna hitam adalah kode asli dan yang merah adalah kode yang harus di tambahkan

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

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

#blog-title {
margin:5px 5px 0;
padding:20px 20px .25em;
border:1px solid #eee; <– hapus (delete)
border-width:1px 1px 0; <– hapus (delete)
font-size:200%;
line-height:1.2em;
font-weight:normal;
color:#666;
text-transform:uppercase;
letter-spacing:.2em;
}
#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #eee; <– hapus (delete)
border-width:0 1px 1px; <– hapus (delete)
max-width:700px;
font:78%/1.4em “Trebuchet MS”,Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}

1. Klik tombol Pratinjau untuk melihat perubahan
2. Jika sudah OK, klik tombol Simpan Perubahan Template
3. Selesai.

Untuk template baru

Bagi anda pengguna template baru, bisa menggunakan dua cara.
Cara pertama :

1. Sign in di blogger
2. Klik menu Layout
3. Klik menu Edit HTML
4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data
5. Klik kotak kecil di samping tulisan Expand Template Widget
6. Tunggu beberapa saat sampai proses selesai
7. Tambahkan kode berikut pada style sheet css sobat.Yang warna abu-abu adalah kode asli dan yang merah adalah kode yang harus di tambahkan

/* Header ———————————————–
*/
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;

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

}
}

1. Klik tombol Pratinjau untuk melihat perubahan yang ada
2. Bila sudah OK, klik tombol SIMPAN TEMPLATE
3. Selesai.

Langkahnya diatas sama dengan yang di template klasik.

Cara kedua :

1. Sign in di blogger
2. Klik menu Layout
3. Klik menu Edit HTML
4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data
5. Klik kotak kecil di samping tulisan Expand Template Widget
6. Tunggu beberapa saat sampai proses selesai 
7. cari kode berikut pada template sobat :

<b:section class=’header’ id=’header’ maxwidgets=’1′>

pada kode maxwidgets=’1′. Rubah angka satu menjadi angka 2, sehingga kodenya menjadi seperti ini :

<b:section class=’header’ id=’header’ maxwidgets=’2′>

1. Klik tombol SIMPAN TEMPLATE

Nah itu langkah pertama, langkah selanjutnya adalah :

1. Klik menu Elemen Halaman
2. KLik tulisan Edit yang ada pada elemen Header
3. Tunggu beberapa saat
4. Pilih radio button yang ada di samping tulisan dari komputer Anda
5. Klik tombol Browse…
6. Pilih banner yang telah di buat yang ada pada komputer sobat
7. Tunggu beberapa saat sampai proses selesai.
8. Gambar banner sobat akan di tampilkan
9. Klik tombol SIMPAN PERUBAHAN
10. Selesai.  

Itu tadi sedikit gambaran dari saya tentang cara-cara memasang banner di bawah header blog kita. Semoga bermanfaat.

Memasang Gambar Slideshow Dibawah Header

Jumpa lagi dengan saya, hari ini langit agak mendung, mungkin sebentar lagi hujan. Kali ini saya akan berikan tutorial cara pasang slideshow di bawah header. Saya mengambil kode yang paling sederhana dengan menu slideshow yang juga sangat sederhana. Slideshow sendiri fungsinya sebagai navigasi link yang biasanya diletakkan dibawah header, dan selalu menampilkan gambar sebagai pemanis agar pengunjung tertarik untuk mengklik isi yang dimaksud. Untuk demo saya gunakan template 3pictsel bikinan mas Riki dan meletakkannya di dalam main post, silahkan cek disini.

Kode css yang akan saya berikan tidak mutlak harus sama, karena setiap template pasti berbeda terutama dalam tutorial ini adalah lebar kolom postingan. Untuk demo saya gunakan template yang lebar postingannya kurang lebih 660px. Buat anda yang memiliki lebar kolom post lebih atau kurang dari 660px silahkan disesuaikan saja.

1. Login dulu di blogger.
2. Masuk ke Rancangan >> Edit HTML.
3. Jangan lupa klik Expand Template Widget karena akan membuat anda jadi pusing dengan kode yang panjang.
4. Copy paste kode berikut diatas kode ]]></b:skin>

/* SLIDESHOW */ 
#slider-holder{width:660px;height:200px;overflow:hidden;margin-left:-20px; margin-right:10px; padding:0} #s3slider{width:660px;height:660px;position:relative;overflow:hidden} 
#s3sliderContent{width:660px;position:absolute;top:0;margin-left:0}
.s3sliderImage{float:left;position:relative;display:none} 
.s3sliderImage span{position:absolute;left:0;font-weight:700;font-size:12px;color:#fff;height:45px;width:660px;background-color:#4e4d3c;filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity:0.7;opacity:0.7;display:none;bottom:0;padding:10px} 
.s3sliderImage span a.featured-title:link,.s3sliderImage span a.featured-title:visited{color:#FFF;font-size:14px;padding:0 0 2px} 
.s3sliderImage span a.featured-title:hover{color:#999} 
.s3sliderImage span a:link,.s3sliderImage span a:visited{color:#888} 
.s3sliderImage span a:hover{color:#555}

5. Kemudian copas kode berikut diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
<!--//--><![CDATA[//><!--
(function($){
    $.fn.s3Slider = function(vars) {     
        var element     = this;
        var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
        var current     = null;
        var timeOutFn   = null;
        var faderStat   = true;
        var mOver       = false;
        var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");
        var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");
        items.each(function(i) {
            $(items[i]).mouseover(function() {
               mOver = true;
            });
            $(items[i]).mouseout(function() {
                mOver   = false;
                fadeElement(true);
            });
        });
        var fadeElement = function(isMouseOut) {
            var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
            thisTimeOut = (faderStat) ? 10 : thisTimeOut;
            if(items.length > 0) {
                timeOutFn = setTimeout(makeSlider, thisTimeOut);
            } else {
                console.log("Poof..");
            }
        }
        var makeSlider = function() {
            current = (current != null) ? current : items[(items.length-1)];
            var currNo      = jQuery.inArray(current, items) + 1
            currNo = (currNo == items.length) ? 0 : (currNo - 1);
            var newMargin   = $(element).width() * currNo;
            if(faderStat == true) {
                if(!mOver) {
                    $(items[currNo]).fadeIn((timeOut/6), function() {
                        if($(itemsSpan[currNo]).css('bottom') == 0) {
                            $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                                faderStat = false;
                                current = items[currNo];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        } else {
                            $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                                faderStat = false;
                                current = items[currNo];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        }
                    });
                }
            } else {
                if(!mOver) {
                    if($(itemsSpan[currNo]).css('bottom') == 0) {
                        $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                            $(items[currNo]).fadeOut((timeOut/6), function() {
                                faderStat = true;
                                current = items[(currNo+1)];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        });
                    } else {
                        $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                        $(items[currNo]).fadeOut((timeOut/6), function() {
                                faderStat = true;
                                current = items[(currNo+1)];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        });
                    }
                }
            }
        }
        makeSlider();
    };
})(jQuery);
//--><!]]></script>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#s3slider&#39;).s3Slider({
timeOut: 4000
});
});
</script>
6. Setelah itu siapkan gambar dan url yang akan ditampilkan dalam menu slideshow, jika sudah ada gambar dan url-nya, silahkan anda copas kode berikut setelah kode <div id='main-wrapper'>
<div id='slider-holder'>
<div id='s3slider'>
<ul id='s3sliderContent'>
<li class='s3sliderImage' style='display: list-item;'>
<a href='LETAK LINK DISINI 1'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxhZXYqhiSE6PjSh4bBryillyDiSudLA7ejCL-YV-G5YkJUrL_SqFXOqBCHTm4kOqgPJeVk6HnF4hzSN6wt-J8HTf8EAFz0Xa4pPcIrwCkBwpHCSrHMY3DN7U0rQALMBjsIruCupbIIYc/s1600/NorahJones.jpg' style='width: 660px; height: 200px;'/></a>
<span style='display: block;'>
<a class='featured-title block' href='LETAK LINK DISINI 1'>INI GAMBAR NORAH JONES</a><br/>
Norah Jones adalah seorang musisi jazz yang sudah banyak mendapatkan Grammy Award
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='LETAK LINK DISINI 2'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihx-CaKMD-V6fNfFbo4B0NbBgy_7jSoYsXCL38d5uoqW-SpW50R_q7im6-NIYj0sgKAggQU6zAQosMjTFZPtdS0eowwZ-7bFBSsUUl0Cff8Kx0-_7mWh1wEvsWqS2kuv3lV74bzvqIXqo/s1600/174456_1_f.jpg' style='width: 660px; height: 200px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='LETAK LINK DISINI 2'>FOURPLAY</a><br/>
Nggak usah dijelaskan udah ada tulisanya diatas
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='LETAK LINK DISINI 3'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu7KI5v55KRFpS2m4TjifKm1_58SczCXEg5j_d_UqRnPHB2lgt6N3AvRClZDTIh6_pn7ToRIhp9B_8onqAhh9ljXYQ8FT4jIw_PmlnHhyphenhyphensby5QxCf1zvnL1Lq4HR3BBb0KGXCAIH2My6c/s1600/andien.jpg' style='width: 660px; height: 200px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='LETAK LINK DISINI 3'>MBAK ANDIEN</a><br/>
Ini orangnya yang..............
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='LETAK LINK DISINI 4'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR9NrMt8epkNbOf3XKtOnnPN3PRX9oT_ltOzu2j-_yJSVaIVBFsYs48crAxQY1SVd6dnENl6I_LGnU9kLp0Zd_2s_JwjN3DMkNHNb1XzjDpG07oR_j-4_X7jR9suJHkPqsO8-xxYTChU8/s1600/Alanis-Morissette-2.JPG' style='width: 660px; height: 200px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='LETAK LINK DISINI 4'>ALANIS MORISSETTE</a><br/>
Tampangnya sih biasa, tapi lagunya teman-teman semua harus mendengarkan
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='LETAK LINK DISINI 5'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw-7mvI9uVZYClOnraYgj9Z1Hg0cjhdbKT46rMSAZzhdqocaYAd6VV1oP1j9o5fPIQEXMJmf7-cvD92FLweRj3GMCAzlMUYSrXyl88IlQn5EhUc3BHk3qigPMZE7ckADve3Em3P5dX6Ng/s1600/Anne-Hathaway-02.jpg' style='width: 660px; height: 200px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='LETAK LINK DISINI 5'>WANITA CANTIK</a><br/>
Siapa coba gambar cewek diatas? Kasih jawabannya di kotak komentar ya....
</span>
</li>
<li class='clear s3sliderImage'/>
</ul>
</div>
</div>
7. Simpan Template

Keterangan :

• Perhatikan lebar 660px, silahkan sesuaikan saja dengan lebar post template anda.
• Perhatikan juga angka -20px pada kode css-nya, saya gunakan margin-left:-20px karena menyesuaikan dengan demo template yang saya gunakan. 
• Tulisan yang berwarna merah ganti dengan deskripsi tentang gambar anda.
• Kode yang berwarna biru adalah kode url untuk gambar yang sudah anda upload sebelumnya.

Gimana teman-teman, cukup panjang kan? Jangan khawatir, saya yakin teman-teman semua bisa melakukannya, semoga berhasil ya !

Membuat Menu Drop Down di Blogspot

Kemarin saya ditanya oleh seorang temen, apa itu menu drop down dan bagaimana cara membuatnya. Perlu teman-teman semua ketahui menu drop down adalah menu horisontal yang terdapat di bawah header blog. Dan apabila mouse kita letakkan ke salah satu menu tersebut akan muncul sub menu yang susunannya ke bawah. yang tentunya menu yang berkaitan Ah... pokoknya gitulah menurut pengertian saya. Untuk lebih jelasnya temen-temen semua dapat lihat disini. Bagaimana menarik kan?

Untuk cara membuatnya, saya akan jelaskan satu persatu, perhatikan baik-baik ya..........

1.  Cari kode berikut ]]></b:skin>
2.  Lalu letakkan kode berikut ini.

#navdropdownmenu{

background:#99C9FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZisXjscR7uLJPJFgKjfjVKDXxBkl0qYk-xRsXeq0GYG3kWMFk9-JeTT_G4ePeC1V4Dk3p9epw3BP3HgB6j8OTmTD05EV9CtRxk_pC5q-lMmh6Atq9pz-7-k7Fa1S9mf_RJlWn212vtzwO/s800/navbar.gif) repeat-x top;

width:700px;

height:auto;

margin:0;

padding:0;

border-top: 1px solid #AFAFAF;

border-bottom: 1px solid #FFFFFF;

}

#navdropdownmenu ul{

float:left;

list-style:none;

margin:0;

padding:0;

}

#navdropdownmenu li{

list-style:none;

float:left;

}

#navdropdownmenu li a, #navdropdownmenu li a:link, #navdropdownmenu li a:visited{

color:#000000;

font-weight:bold;

display:block;

text-shadow: 0px 1px 1px #fff;

padding:9px 10px 9px 10px;

font-size: 12px;

font-family: verdana;

text-decoration:none;

}

#navdropdownmenu li a:hover{

background:#9f9f9f;

color:#ffffff;

}

#navdropdownmenu li ul{

z-index:10;

position:absolute;

height:auto;

width:200px;

visibility:hidden;

}

#navdropdownmenu li ul li a, #navdropdownmenu li ul li a:link, #navdropdownmenu li ul li a:visited{

float:none;

background:#99C9FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZisXjscR7uLJPJFgKjfjVKDXxBkl0qYk-xRsXeq0GYG3kWMFk9-JeTT_G4ePeC1V4Dk3p9epw3BP3HgB6j8OTmTD05EV9CtRxk_pC5q-lMmh6Atq9pz-7-k7Fa1S9mf_RJlWn212vtzwO/s800/navbar.gif) repeat-x top;

width:200px;

border-width:1px;

border-style:solid;

border-color:#575757;

}

#navdropdownmenu li ul li a:hover{

background:#000000;

color:#ffffff;

}

#navdropdownmenu li:hover ul{

left:auto;

visibility:visible;
}

Oya,. jika anda telah menggunakan navigasi menu yang biasa, hapuslah semua kode CSS dari navigasi menu tersebut.

3.  Cari kode yang mirip dengan kode dibawah.

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='It's a Hardlife' type='Header'/>

</b:section>

</div>

4.  Dibawahnya, ketikkan kode berikut.

<div id='navdropdownmenu'>

<ul id='navdropdownmenu'>

<li><a href='http://wongsuruh.blogspot.com/search?max-results=1000'>Daftar Isi</a></li>

<li><a href='http://en.wikipedia.org/wiki/Norah_Jones'>Norah Jones</a>

<ul>

<li><a href='#'>Don&#39;t Know Why</a></li>

<li><a href='#'>Feelin The Same Way</a></li>

<li><a href='#'>Come Away With Me</a></li>

</ul>

</li>

<li><a href='http://en.wikipedia.org/wiki/Norah_Jones'>Sting</a>

<ul>

<li><a href='#'>Englishman In Newyork</a></li>

<li><a href='#'>Shape Of My Heart</a></li>

<li><a href='#'>Fields Of Gold</a></li>

<li><a href='#'>If I Ever Lose My Faith In You</a></li>

<li><a href='#'>Fragile</a></li>

<li><a href='#'>Desert Rose</a></li>

</ul>

</li>

<li><a href='http://en.wikipedia.org/wiki/Norah_Jones'>Sade</a>

<ul>

<li><a href='#'>Smooth Operator</a></li>

<li><a href='#'>Kiss Of Life</a></li>

<li><a href='#'>Your Love Is King</a></li>

</ul>

</li>

<li><a href='http://en.wikipedia.org/wiki/Norah_Jones'>Alanis</a>

<ul>

<li><a href='#'>That I Would Be Good</a></li>

<li><a href='#'>Front Row</a></li>

<li><a href='#'>One</a></li>

</ul>

</li>

<li><a href='http://en.wikipedia.org/wiki/Norah_Jones'>Meja</a>

<ul>

<li><a href='#'>Dindi</a></li>

<li><a href='#'>Venus</a></li>

<li><a href='#'>Red Light</a></li>

<li><a href='#'>The One</a></li>

<li><a href='#'>Circle Game</a></li>

<li><a href='#'>Aqua de Beber</a></li>

</ul>

</li>
</ul>
</div>

Gantilah tulisan http://wongsuruh.blogspot.com dengan link yang anda inginkan dengan url yang anda inginkan. Anda bisa menambah atau mengurangi jumlah kode tersebut.

5.  Klik Simpan Template.

6.  Lihat hasilnya.

Gampang bukan, jika ada yang mau ditanyakan isi aja kotak komentar yang ada di bawah, saya akan berusaha menjawabnya.

Semoga bermanfaat......

Membuat Postingan Dua Kolom Di Blogspot

Selamat malam, teman-teman blogger semua. Malam hari ini saya sebenarnya udah ngantuk banget  tapi daripada ditunda sampai besok malah lupa, mending sekarang aja saya nulis ini meski sambil ngatuk.  Memang, sebaiknya saya posting sebelum tidur dan saya harap saat saya bangun ada banyak senyum di komentar karena membaca artikel berikut ini dan mendapatkan manfaat. Jadi langsung saja silahkan ikuti tutorial berikut ini.....

Banyak hal yang terpikirkan untuk mempercantik postingan. Jika sebelumnya telah pernah dibahas tentang membuat Drop Cap (Baca: Buat Drop Cap di Blog), yakni huruf pertama artikel Anda besar seperti di surat kabar atau majalah, kini Anda bisa mempercantik lagi dengan gaya postingan berkolom. Untuk membuatnya Anda bisa gunakan cara pembuatan tablel Untuk contohnya saya ambilkan saja dari catatan saya di blog saya yang lain.

Lepas dari semua itu, aku harus tetap menjalani tangga suram demi cita-cita masa kecilku. Seperti Om Sting (The Police) bilang “A Gentleman will walk but never run....” sampai disini aku kembali melakukan aktivitasku sehari-sehari sebagai anggota civitas akademik. Kuliah seperti biasa, belajar kalau mau ujian aja, bikin tugas dari dosen, presentasi di depan kelas meski kalau ditanya nggak tau jawabannya, bergaul dengan teman-teman, pacaran atau apalah namanya sampai sekarang juga belum ngerti maksud dari hubungan emosional antara manusia pria dan manusia wanita itu. Suatu malam aku terlibat perbincangan dengan beberapa orang teman kostku sambil ngopi. Perbincangan sampai pada filosofi hidup. Filosofi hidup bisa disebut juga dengan prinsip hidup, yaitu prinsip yang kita pilih dalam menjalani kehidupan. Seorang teman punya filosofi hidup time is money. Seorang materialis sejati. Orang ini benar-benar sibuk mencari duit. Apa saja yang bisa dijadikan duit ya di duitin. Baginya, untuk mencapai hidup yang berkualitas harus punya banyak duit. Teman yang lain punya filosofi don't worry be pleased. Orangnya memang selalu terlihat gembira, always smile (bukan gila).

Dia ingin menjalani kehidupan dengan bahagia, maka dia selalu berusaha merasa bahagia dalam berbagai kondisi, kuncinya adalah senantiasa berpikir positif, katanya. Positif thinking make positif feeling.. Teman yang lain punya filosofi be useful. Dalam setiap kesempatan dia ingin bisa berguna bagi orang lain. Orangnya memang pemurah, baik hati dan tidak sombong (mantu idaman). Dia senang berbagi ide, pengetahuan, tenaga maupun materi. Teman yang lain, seorang spiritualis sejati. Filosofinya adalah faith and devotion to God is the first. Baginya kehidupan akhirat jauh lebih penting daripada kehidupan dunia yang penuh dengan sandiwara. Sehingga kesehariannya dipenuh dengan ibadah.Saat ditanya filosofi hidupku, aku hanya bisa senyam senyum. Aku belum pernah punya filosofi hidup. Ini terlalu serius bagiku. Satu persatu mereka menawarkan filosofi hidupnya untuk aku gunakan. Karena tidak enak memilih, aku tanya sama mereka: Apa aku boleh menggunakan filosofi hidup kalian sekaligus? Spontan mereka menjawab, "boleh". Terus aku tanya lagi apa perlunya punya filosofi hidup? Mereka sepakat menjawab, agar kita punya standar perilaku yang kita prioritaskan dalam menjalani hidup. Dengan filosofi hidup kitalah kita akan dikenal. Filosofi hidup kita adalah brand kita.

Nah, bagi Anda yang ingin membuat seperti itu sangatlah mudah. Silahkan buat postingan baru dan gunakan kode berikut ini di mode pengeposan Edit HTML.

<table cellpadding="10" cellspacing="10"><tbody>
<tr> <td align="justify" valign="top" width="240">
artikel di bagian kiri</td><td align="justify" valign="top" width="240">artikel di bagian kanan</td> </tr>
</tbody></table>

Keterangan:

1. cellpadding: atur jarak antara tepi kolom dengan tulisan 
2. cellspacing: atur jarak antara dua kolom 
3. width: ada dua  width, pada kode di atas sama sama menggunakan angka 240. Jika ingin berbeda silahkan ganti saja. 
4. align: perataan teks (justify untuk rata kanan kiri, left untuk rata kiri, right untuk rata kanan dan center untuk rata tengah) 
5. valign: perataan verikal (top untuk rata atas, bottom untuk rata bawah dan middle untuk rata tengah)

Selamat mencoba, semoga mempercantik postingan Anda dan semoga bermanfaat....

Menambah Kolom Dibawah Postingan Blogspot

Teman-teman semua pasti ingin memasang iklan atau kode javascript lainnya dibawah postingan. Karena kalau dipasang di sidebar terlalu ramai maka dibawah ini saya akan memberikan cara-cara bagaimana menambah elemen di bawah postingan untuk pasang iklan atau lainnya. untuk membuatnya anda sedikit menambahkan kode CSS ke dalam tamplate. ikuti langkah-langkah di bawah ini.

• Seperti biasa Log in dulu ke blogger temen.
• Tata letak
• Edit HTML
• Download tamplate anda terlebih dahulu untuk menghindarkan hal-hal yang tidak diinginkan.
• Beri tanda centang di kotak kecil atas
• Kemudian cari kode

  #main-wrapper {
  width: 410px;
  float:$startSide;
  

  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

  overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

  }

• Tambahkan kode berikut di bawah kode tadi

  #mainbottom {
  background:#ffffff;
  border:1px solid #0B610B;
  margin:0 0 0.5em;
  padding:0.5em;
  }

• Sekarang kita membuat id untuk mainbottom tersebut. Cari kode ini:

  <div id='main-wrapper'>
  

  <b:section class='main' id='main' showaddelement='no'>

  <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>

  </b:section>
  </div>

• Sisipkan kode berikut di bawah </b:section>

  <b:section class='main' id='mainbottom' showaddelement='yes'/>

• Sehingga menjadi seperti ini

  <div id='main-wrapper'>
  

  <b:section class='main' id='main' showaddelement='no'>

  <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>

  </b:section>

  <b:section class='main' id='mainbottom' showaddelement='yes'/>

  </div>

• Sekarang simpan tamplate anda dan lihat hasilnya

Selamat mencoba........

Menambah Kolom dibawah Header Blogspot

pa kabar teman-teman blogger semua, pada siang hari yang mendung ini saya akan memberikan  tutorial bagaimana cara menambahkan kolom dibawah header blog. Jika menurut temen-temen menambah kolom di bawah header membuat blog kita kelihatan ramai, ya pasang aja di bawah postingan atau di atas footer. Baik, langsung saja pada inti permasalahannya.

Menambahkan 1 Kolom dibawah Header

Pada umunnya kolom di bawah header di gunakan untuk memasang gambar, navbar, teks, atau teman ingin memasang foto-foto temen yang paling narsis  heeeee. Langkah - langkah yang perlu sobat perhatikan adalah :

1.  Login bloger teman.
2.  Klik tata letak atau layout.
3.  Pilih Edit HTML.

4.  Sebelum memulai pengeditan alangkah baiknya temen sekalian membackup datanya terlebih dahulu, caranya pilih Download Template Lengkap.

5.  Cari kode ]]></b:skin> ,agar lebih mudah anda bisa menekan Ctrl + F, kemudian paste kode tersebut di sebelah tulisan Find.

6.  Paste copy berikutdan paste diatas kode ]]></b:skin>

#satu_kolom{
margin:10px 0;
padding:1%;
width:98%;
}

7.  Copy kode berikut ini

<div id="satu_kolom">
<b:section class='header' id='satukolomajah' preferred='yes'/>
</div>

8.  Paste di bawah kode ini

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidget="1" showaddelement="no">

<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>

</b:section>
</div>

9.    Simpan template
10.  Lihat perubahannya pada tata letak.

Menambah 2 Kolom Dibawah Header

Sebelumnya saya sudah pernah menjelaskan bagaimana caranya menambah widget di bawah kolom header, kali ini saya akan menerangkan sedikit tentang bagaimana caranya menambah 2 kolom widget dibawah header..

1.  Login bloger teman.
2.  Klik tata letak atau layout.
3.  Pilih Edit HTML.
4.  Sebelum memulai pengeditan alahkah baiknya temen sekalian membackup datanya terlebih dahulu, caranya pilih Download Template Lengkap.
5.  Centang Expand Template Widget
6.  Cari kode ]]></b:skin>,agar lebih mudah  anda bisa menekan Ctrl + F, kemudian paste kode tersebut di sebelah tulisan Find.
7.  Paste kode berikut di atas kode ]]></b:skin>;

#dua-kolom-dibawah-header {
clear:both;
}
.dua-kolom {
}

8.  Copy kode berikut ini

</div>

<div id='dua-kolom-dibawah-header'>

<div id='kolom1' style='width: 50%; float: left; margin:0; text-align: left;'>

<b:section class='dua-kolom' id='kolom1' preferred='yes' style='float:left;'/>

</div>

<div id='kolom2' style='width: 50%; float: right; margin:0; text-align: left;'>

<b:section class='dua-kolom' id='kolom2' preferred='yes' style='float:right;'/>

</div>

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

9.   Paste di atas kode ini <div id='main-wrapper'>
10. Simpan tempalte.
11. Lihat perubahannya pada tata letak.

Menambah 3 Kolom Dibawah Header

1.  Login bloger teman.
2.  Klik tata letak atau layout.
3.  Pilih Edit HTML.

4.  Sebelum memulai pengeditan alahkah baiknya temen sekalian membackup datanya terlebih dahulu, caranya pilih Download Template Lengkap.

5.  Centang Expand Template Widget

6.  Cari kode ]]></b:skin>,agar lebih mudah anda bisa menekan Ctrl + F, kemudian paste kode tersebut di sebelah tulisan Find.

7.  Paste kode berikut di atas kode ]]></b:skin>

#tiga-kolom-dibawah-header {
clear:both;
}
.tiga-kolom {
}

8.  Copy kode berikut

<div id='tiga-kolom-dibawah-header'>

<div id='kolom1' style='width: 35%; float: left; margin:0; text-align: left;'>

<b:section class='tiga-kolom' id='kolom1' preferred='yes' style='float:left;'/>

</div>

<div id='kolom2' style='width: 35%; float: center; margin:0; text-align: left;'>

<b:section class='tiga-kolom' id='kolom2' preferred='yes' style='float:center;'/>

</div>

<div id='kolom3' style='width: 30%; float: right; margin:0; text-align: left;'>

<b:section class='tiga-kolom' id='kolom3' preferred='yes' style='float:right;'/>

</div>

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

9.  Paste di atas kode ini <div id='main-wrapper'>

Catatan

Jika sobat awalnya mengikuti dari membuat 2 kolom di bawah header, (sekali lagi hanya bagi yang mengikuti dari cara membuat 2 kolom di bawah header) sobat hanya tinggal mengganti kode berikut :

</div>
<div id='dua-kolom-dibawah-header'>
<div id='kolom1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='dua-kolom' id='kolom1' preferred='yes' style='float:left;'/>
</div>
<div id='kolom2' style='width: 50%; float: right; margin:0; text-align: left;'>
<b:section class='dua-kolom' id='kolom2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

menjadi :

</div>
<div id='dua-kolom-dibawah-header'>
<div id='kolom1' style='width: 35%; float: left; margin:0; text-align: left;'>
<b:section class='dua-kolom' id='kolom1' preferred='yes' style='float:left;'/>
</div>
<div id='kolom2' style='width: 35%; float: right; margin:0; text-align: left;'>
<b:section class='dua-kolom' id='kolom2' preferred='yes' style='float:center;'/>
</div>
<div id='kolom3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='dua-kolom' id='kolom3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

(tempatnya tetap sama di atas kode <div id='main-wrapper'> jangan ditambah tapi di ganti>

10. Simpan tempalte. 

11. Lihat perubahannya pada tata letak.

Itu tadi sedikit  tutorialnya, bagi temen-temen yang punya cara yang lebih bagus, saya mau kok dikasih tahu. Semoga bermanfaat

Menghilangkan Langgan : Entri (Atom) dan Subscribe to : Poskan Komentar (Atom)

Dalam membuat sebuah blog, kita pasti ingin blog kita tampil lebih rapi. Tulisan-tulisan yang mungkin tidak diperlukan atau mengganggu kerapian blog kita, lebih baik kita hilangkan atau digantikan oleh fungsi dari tool lain. Salah satunya adalah Langgan : Entri (Atom) dan Subscribe to : Poskan Komentar (Atom), ada yang merasa kerapian blog kita terganggu dengan adanya tulisan di "Langgan: Entri (Atom)"? Mungkin itu yang pernah kita alami, dengan tulisan itu yang menurut kita tidak penting dan tempatnya juga kurang sesuai, maka kita bisa hilangkan atau kita ganti tempatnya agar lebih rapi. Sesuai dengan namanya Langgan: Entri (Atom) adalah fasilitas untuk berlangganan artikel/posting, sedangkan Subscribe to: Poskan Komentar (Atom) adalah fasilitas berlangganan bagi pengunjung untuk mengetahui komentar-komentar atas posting/artikel dari blog yang bersangkutan.

Namun demikian sebagian blogger tidak menyukai fitur-fitur tersebut, karena selain terlalu sederhana, juga telah tersedia fasilitas berlangganan yang lebih canggih seperti FeedBurner.Com, maka dari itu sebagian blogger lebih suka menghapus/menghilangkan fitur Langgan: Entri (Atom) dan Subscribe to: Poskan Komentar (Atom) dari blog mereka.

Nah jika Anda ingin mengikuti jejak sebagian blogger tersebut, berikut ini cara menghilangkan Langgan: Entri (Atom) dan Subscribe to: Poskan Komentar (Atom) di Blogspot :

A. Cara Menghapus Langgan: Entri (Atom):

1. Login ke Blogspot => klik Rancangan/Design => pilih Edit HTML, kasih centang pada kotak Expand Template Widget dan gunakan tombol Find untuk memudahkan pencarian kode;
2. Cari kode di bawah ini:

   <b:include data='feedLinks' name='feedLinksBody'/>

3. Hapus/delete semua kode di atas, lalu Save Template, selesai.

B. Cara Menghapus Subscribe to: Poskan Komentar (Atom):

1. Login ke Blogspot => klik Rancangan/Design => pilih Edit HTML, kasih centang pada kotak Expand Template Widget dan gunakan tombol Find untuk memudahkan pencarian kode;
2. Cari kode di bawah ini:

   <div class='feed-links'>
   <data:feedLinksMsg/>
   <b:loop values='data:links' var='f'>
   <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
   </b:loop>
   </div>

3. Hapus/delete semua kode di atas, lalu Save Template, selesai.

Demikianlah tutorial sederhana cara hapus/hilangkan Langgan: Entri (Atom) dan Subscribe to: Poskan Komentar (Atom) pada Blogspot ini

Semoga bermanfaat.

Kode-kode dasar HTML

Dalam HTML seperti pemformatan text berupa tebal,miring,garis bawah,membuat tabel,dll,dapat di lakukan dengan kode-kode.Bagi anda yang belum begitu mengerti HTML,bisa baca disini
Di bawah ini ada beberapa kode-kode untuk mewakili pemformatan text maupun mebuat berbagai object dalam halaman anda,meskipun sekarang sudah banyak pembuatan halaman HTML dengan software instant seperti Dreamweaver dll.

---

Membuat Center,gunakan kode : <p align="center">Belajar</p> hasilnya seperti:

Belajar

---

Membuat Posisi kekanan gunakan kode : <p align="right">Belajar</p> hasilnya seperti :

Belajar

---

Membuat Posisi kekiri gunakan kode: <p align="left">Belajar</p> hasilnya seperti :

Belajar

---

Membuat Huruf Tebal gunakan kode: <b>Belajar</b> hasilnya seperti :
Belajar

---

Membuat Huruf Garis Bawah gunakan kode : <u>Belajar</u> hasilnya seperti :
Belajar

---

Membuat Huruf bercetak Miring gunakan kode : <i>Belajar</i> hasilnya seperti :
Belajar

---

Membuat Kombinasi huruf tebal,miring,garisbawah,gunakan kode :
<b><i><u>Belajar</u></i></b> hasilnya seperti :
Belajar

---

Membuat Huruf tebal strong gunakan kode : <srong>Belajar</strong> hasilnya seperti :
Belajar

---

Membuat Huruf Hidden gunakan kode : <span style="visibility: hidden">Belajar</span> hasilnya seperti :

Namanya juga hidden..ya..ga keliatan..

---

Membuat Huruf Besar semua (uppercase) gunakan kode :
<span style="text-transform: uppercase">Belajar</span> hasilnya seperti :
Belajar

---

Membuat Huruf Small caps gunakan kode:
<span style="font-variant: small-caps">Belajar</span> hasilnya seperti ini:
Belajar

---

Membuat Huruf Subscribe / kecil di bawah gunakan kode:
<p>4₂</p>hasilnya seperti ini:
4₂

---

Membuat Huruf Superscribe / pangkat gunakan kode:
<p>4²</p> hasilnya seperti ini:
4²

---

Membuat Huruf bergaris atas gunakan kode:
<span style="text-decoration: overline">Belajar</span> hasilnya seperti ini:
Belajar mengganti huruf

---

Membuat Huruf bergaris tengah gunakan kode:
<strike>Belajar</strike> hasilnya seperti ini:
Belajar

---

Menentukan jenis huruf gunakan kode:
<p><font-family="Arial" >Belajar</font></p> hasilnya seperti ini:
Belajar

---

Menentukan ukuran huruf gunakan kode:
<p><font-size="3" >Belajar</font></p> hasilnya seperti ini:
Belajar

---

Menentukan warna huruf gunakan kode:
<p style="color: green; >Belajar</p> hasilnya seperti ini:
Belajar

---

Membuat bullet dot bolong gunakan kode:
<ul type="circle">
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:

• DOT 1


• DOT 2


• DOT 3

---

Membuat bullet dot kotak gunakan kode:
<ul type="square">
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:

• DOT 1
• DOT 2
• DOT 3

---

Membuat bullet dot bulat gunakan kode:
<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:

• DOT 1
• DOT 2
• DOT 3

---

Mengatur posisi bullet gunakan kode:
<blockquote>
<blockquote>
<blockquote>
<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
</blockquote>
</blockquote>
</blockquote>
hasilnya seperti ini:

• DOT 1
• DOT 2
• DOT 3

---

Menentukan kombinasi warna,jenis,dan ukuran huruf gunakan kode:
<p><font style="color: red; font-family: courier new; font-size: 15px;" >Belajar</font></p>
hasilnya seperti ini:

Belajar

---

Membuat tabel border solid gunakan kode:

<table border="1" width="200">
<tr>
<td style="border-style: solid">Text</td>
</tr>
</table>

hasilnya seperti :

Text

---

Membuat tabel border dot gunakan kode:
<table border="1" width="200"
style="border-style: dotted">
<tr>
<td border="2" style="border-style:
dotted">Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

---

Membuat tabel border dashed gunakan kode:
<table border="1" width="200" style="border-style: dashed">
<tr>
<td style="border-style: dashed">Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

---

Membuat tabel border groove gunakan kode:
<table border="1" width="200" style="border-style: groove">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

---

Membuat tabel border Ridge gunakan kode:
<table border="1" width="200" style="border-style: ridge">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

---

Membuat tabel border Insert gunakan kode:
<table border="1" width="200" style="border-style: inset">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

---

Membuat tabel border Outset gunakan kode:
<table border="1" width="200" style="border-style: outset">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

---

Membuat Tabel Biasa gunakan kode :
<table border="1"width="200"><td>Text</td></table>
hasilnya seperti:

Text

---

Membuat Tabel berwarna gunakan kode :
<table border="1"width="200"bgcolor="green"><td>Text</td></tabel> hasilnya seperti :

Text

---

Membuat Tabel berwarna tak berbingkai gunakan kode :
<table border="0"width="200"bgcolor="blue"><td>Text</td></tabel> hasilnya seperti:

Text

---

Untuk kode-kode HTML yang lain anda bisa mengulik lewat software-software web designer atau situs-situs penyedia layanan HTML.

**Tabel-tabel diatas,akan terlihat sempurna jika dibuka pada browser IE (Internet Explorer)

Apa sich itu Javascript ?

Apa sich itu Javascript ?

Kalau pengertian Javascript menurut Pelajaran Blog,yaitu kode yang mempunyai tugas unruk membedakan suatu variable.keliatanya sich kaya gitu..

Secara umum kode ini akan menjalankan suatu tugas yang mana kode ini sangatlah "sensitive",
Maksudnya? Lain seperti HTML yang tidak terpengaruh adanya tulisan <b> dan </b> (tanda "/" pada kode).

Javascript,tidak mempunyai tolerant dengan kode seperti diatas,contoh lain; penulisan kata "var" tidak bisa ditulis "VAR" maupun "Var".

Jika anda pusing seperti habis kena angin Puting Beliung ,karena baca arttikel ini,

ya dech...di bawah ini hasil pengertian Javascript oleh Bp.Supono,alamatnya di :

http://supono.wordpress.com/2006/09/05/apa-itu-javascript/

---

"JavaScript adalah bahasa pemrograman yang khusus untuk halaman web agar halaman web menjadi lebih hidup. Kalau dilihat dari suku katanya terdiri dari dua suku kata, yaitu Java dan Script. Java adalah Bahasa pemrograman berorientasi objek, sedangkan Script adalah serangkaian instruksi program.
Hal-Hal Yang Harus DiperhatikanAda beberapa hal yang harus diperhatikan dalam pengelolaan pemrograman JavaScript, diantaranya JavaScript adalah “case sensitive”, yang artinya JavaScript membedakan huruf besar dan huruf kecil, Jika Anda pernah belajar bahasa pemrograman seperti Turbo C atau C++, maka sama seperti bahasa pemrograman tersebut, dimana huruf T tidak sama dengan huruf t. Dalam bahasa pemrograman JavaScript juga, sebagai contoh fungsi perintah var tidak boleh ditulis Var dan juga tidak boleh ditulis VAR (huruf besar semua), yang benar adalah var (huruf kecil semua). Perintah lain adalah new Date tidak boleh ditulis new date (huruf kecil semua), dan banyak yang lainnya."

---

Gimana?sudah lebih jelas?

Nah contoh javascript bisa anda lihat seperti hasil postingan dari :

http://www.klik-kanan.com/js/tutorial/javascript3.shtml di bawah ini:

---

Sebagai contoh KLIK DI SINI. Source script-nya DOWNLOAD DI SINI

---

Nah! selain di http://www.klik-kanan.com/js/tutorial/javascript3.shtml,
Anda bisa pelajari Javascript di http://www.angelfire.com/id/dinoclub/javascript.html.

Postingan ga modal,he...
Semoga,penjelasan yang sedikit Njlimet ini bisa diterima,Amin !!

Apa Itu Definisi Server Komputer?

Apa Itu Definisi Server Komputer?

1.TPLMWSN #1.Mengenal Domain,Hosting dan Server

• -TPLMWSN #1a.Mengenal Apa Itu Domain?
• -TPLMWSN #1b.Mengenal Apa Itu Hosting?
• -TPLMWSN #1c.Mengenal Apa Itu Server?

2.TPLMWSN #2.Mengenal 000webhost.com dan Dot Tk (Hosting dan Domain Gratisan)

1. I.TPLMWSN #2a.Mengenal Hosting di 000webhost.com Part 1
2. II.TPLMWSN #2a.Mengenal Hosting di 000webhost.com Part 2
1. TPLMWSN #2b.Mengenal Lebih Dekat Domain Dot Tk

3.TPLMWSN #3.Cara Setting Domain dari sebuah Hosting
4.TPLMWSN #4.Panduan Bahasa Php,Database dan MySql untuk Pemula #1

• Membuat Buku Tamu Bag.1 - Membuat Database
• Membuat Buku Tamu Bag.2 - Mengakses phpMyAdmin

5.TPLMWSN #4b.Panduan Bahasa Php,Database dan MySql untuk Pemula #2

• Membuat Buku Tamu Bag.3 - Membuat Index.php
• Membuat Buku Tamu Bag.4 - Membuat Koneksi.php

6.TPLMWSN #5.Beberapa Script Php untuk Membangun sebuah Website

Bismillah - secara garis besar,definisi server adalah sebuah 'pelayan' yang mana berasal dari kata 'service' yakni 'melayani'.
Jadi dalam kasus ini server adalah sebuah sistem komputer yang menyediakan jenis layanan tertentu dalam sebuah jaringan komputer.

Dari sumber terpercaya kami http://www.mic.ac.id/,dijelaskan bahwa sebuah server didukung dengan prosesor yang bersifat scalable dan RAM yang besar, juga dilengkapi dengan sistem operasi khusus, yang disebut sebagai sistem operasi jaringan atau network operating system.Server juga menjalankan perangkat lunak administratif yang mengontrol akses terhadap jaringan dan sumber daya yang terdapat di dalamnya,seperti halnya berkas atau alat pencetak (printer),dan memberikan akses kepada workstation anggota jaringan.

Macam-Macam Server

Umumnya,diatas system operasi server terdapat aplikasi-aplikasi yang menggunakan arsitektur klien/server.
Contoh dari aplikasi ini adalah DHCP Server,Mail Server,HTTP Server,FTP Server,DNS Server dan lain sebagainya (untuk definisi masing-masing server sobat bisa googling aja ya pent-).Setiap system operasi server umumnya membundel layanan-layanan tersebut atau layanan tersebut juga dapat diperoleh dari pihak ketiga.

Setiap layanan tersebut akan merespons terhadap request dari client.Sebagai contoh, client DHCP akan memberikan request kepada server yang menjalankan server DHCP;

Ketika sebuah klien membutuhkan alamat IP, klien akan memberikan perintah/request kepada server, dengan bahasa yang dipahami oleh server DHCP, yakni protokol DHCP itu sendiri.
Contoh sistem operasi server adalah Windows NT 3.51, dan dilanjutkan dengan Windows NT 4.0. Saat ini sistem yang cukup populer adalah Windows 2000 Server dan Windows Server 2003,kemudian Sun Solaris,Unix, dan GNU/Linux.

Server biasanya terhubung dengan client dengan kabel UTP dan sebuah Network Card. Kartu jaringan ini biasanya berupa kartu PCI atau ISA.Fungsi server sangat banyak, misalnya untuk situs internet,ilmu pengetahuan atau sekedar penyimpanan data.Namun yang paling umum adalah untuk meng-koneksikan komputer client ke Internet.

Sedangkan klien-server atau client-server merupakan sebuah paradigma dalam teknologi informasi yang merujuk kepada cara untuk mendistribusikan aplikasi ke dalam dua pihak: pihak klien dan pihak server.Dalam model klien/server, sebuah aplikasi dibagi menjadi dua bagian yang terpisah, tapi masih merupakan sebuah kesatuan yakni komponen klien dan komponen server.

Komponen klien juga sering disebut sebagai front-end, sementara komponen server disebut sebagai back-end.Komponen klien dari aplikasi tersebut dijalankan dalam sebuah workstation dan menerima masukan data dari pengguna.

Komponen klien tersebut akan menyiapkan data yang dimasukkan oleh pengguna dengan menggunakan teknologi pemrosesan tertentu dan mengirimkannya kepada komponen server yang dijalankan di atas mesin server, umumnya dalam bentuk request terhadap beberapa layanan yang dimiliki oleh server.

Komponen server akan menerima request dari klien, dan langsung memprosesnya dan mengembalikan hasil pemrosesan tersebut kepada klien. Klien pun menerima informasi hasil pemrosesan data yang dilakukan server dan menampilkannya kepada pengguna, dengan menggunakan aplikasi yang berinteraksi dengan pengguna.

Sebuah contoh dari aplikasi client/server sederhana adalah aplikasi web yang didesain dengan menggunakan Active Server Pages (ASP) atau PHP.Skrip PHP atau ASP akan dijalankan di dalam web server (Apache atau Internet Information Services), sementara skrip yang berjalan di pihak klien akan dijalankan oleh web browser pada komputer klien.

Klien-server merupakan penyelesaian masalah pada software yang menggunakan database sehingga setiap komputer tidak perlu diinstall database, dengan metode klien-server database dapat diinstal pada suatu komputer sebagai server dan aplikasinya diinstal pada client.

Mengenal 000webhost.com dan Dot Tk (Hosting dan Domain Gratisan)

Nah,untuk kedepan nanti,kami Pelajaran Blog berusaha untuk mengulas masalah Mengenal 000webhost.com dan Dot Tk (Hosting dan Domain Gratisan) ini murni dari tulisan kami (ga copas seperti artikel ini pent-).Kita akan kupas tuntas sampai kita bisa memiliki website sendiri langkah demi langkah.Insya Allah.