CONTOH THREADED COMMENT

Tadi malam disalah satu rumah sakit telah terjadi kebakaran..

»»  read more

Cara Membuat Nomor Halaman Posting Pada Blogspot

Setiap kali kita menulis posting baru pada blogspot, maka posting terbaru akan muncul di atas atau di depan posting yang lama secara otomatis, meskipun sebenarnya kita bisa mengganti urutan tersebut dengan cara mengganti waktu pembuatan dari posting tersebut. Kita juga bisa mengatur jumlah postingan yang akan mucul per halaman pada blogspot. Cara mengatur jumlah posting per halaman pada blogspot pernah disinggung di panduan menggunakan blogspot yang bisa pembaca download dari blog ini. Untuk mengaturnya silahkan buka tab menu Pengaturan pada dasbor blogspot Anda, kemudian pilih sub tab menu Format. Silahkan atur jumlah posting per halaman pada bagian Tampilkan. Nah, untuk melihat postingan yang lama, pada template blogspot sudah tersedia link dibagian bawah posting yang bertuliskan biasanya "Posting Lama" dan link "Posting Lebih Baru" jika ingin kembali pada halaman postingan yang lebih baru. Yang membuat sedikit repot adalah ketika kita ingin membuka postingan yang jauh lebih lama. Dengan kondisi seperti itu, kita harus membuka satu persatu halaman-halaman postingan blogspot untuk sampai pada postingan lama yang ingin kita tuju. Namun, ada cara untuk mengatasinya, yaitu dengan membuat link tiap halaman postingan, sehingga kita bisa melompat ke halaman yang lebih lama atau lebih baru tanpa melewati halaman-halaman diantaranya. Kita akan membuat nomor halaman posting pada blogspot. Nomor-nomor tersebutlah sebagai link untuk menuju halaman yang dituju. Langkah-langkahnya adalah sebagai berikut:

1. Login terlebih dahulu pada akun blogspot Anda
2. Klik link menu Tata Letak, kemudian pilih sub tab menu Edit HTML
3. Backup terlebih dahulu template pembaca. Hal ini bertujuan agar pembaca bisa mengembalikan ke kondisi semula jika terjadi kesalahan pengeditan. Klik tulisan yang bertuliskan Download Template Lengkap
4. Jangan beri centang pada kotak kecil yang ada disamping tulisan Expand Template Widget
5. Cari kode ]]></b:skin> pada template tersebut
6. Copy paste struktur CSS berikut tepat diatas kode ]]></b:skin>
7. Cari lagi struktur seperti berikut pada template pembaca
   <b:section class='main' id='main' showaddelement='no'>
   <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
   </b:section>
   
8. Kemudian copy paste struktur berikut tepat di bawah struktur yang Anda temukan pada langkah 7
<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';


var pageCount=5;
var displayPageNum=3;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';



var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
   
9. Klik tombol menu SIMPAN TEMPLATE
10. Contoh pembuatan nomor halaman posting tersebut bisa pembaca lihat pada bagian bawah halaman blog saya ini.

»»  read more

Cara Membuat Nomor Halaman Posting Pada Blogspot

Setiap kali kita menulis posting baru pada blogspot, maka posting terbaru akan muncul di atas atau di depan posting yang lama secara otomatis, meskipun sebenarnya kita bisa mengganti urutan tersebut dengan cara mengganti waktu pembuatan dari posting tersebut. Kita juga bisa mengatur jumlah postingan yang akan mucul per halaman pada blogspot. Cara mengatur jumlah posting per halaman pada blogspot pernah disinggung di panduan menggunakan blogspot yang bisa pembaca download dari blog ini. Untuk mengaturnya silahkan buka tab menu Pengaturan pada dasbor blogspot Anda, kemudian pilih sub tab menu Format. Silahkan atur jumlah posting per halaman pada bagian Tampilkan. Nah, untuk melihat postingan yang lama, pada template blogspot sudah tersedia link dibagian bawah posting yang bertuliskan biasanya "Posting Lama" dan link "Posting Lebih Baru" jika ingin kembali pada halaman postingan yang lebih baru. Yang membuat sedikit repot adalah ketika kita ingin membuka postingan yang jauh lebih lama. Dengan kondisi seperti itu, kita harus membuka satu persatu halaman-halaman postingan blogspot untuk sampai pada postingan lama yang ingin kita tuju. Namun, ada cara untuk mengatasinya, yaitu dengan membuat link tiap halaman postingan, sehingga kita bisa melompat ke halaman yang lebih lama atau lebih baru tanpa melewati halaman-halaman diantaranya. Kita akan membuat nomor halaman posting pada blogspot. Nomor-nomor tersebutlah sebagai link untuk menuju halaman yang dituju. Langkah-langkahnya adalah sebagai berikut:

1. Login terlebih dahulu pada akun blogspot Anda
2. Klik link menu Tata Letak, kemudian pilih sub tab menu Edit HTML
3. Backup terlebih dahulu template pembaca. Hal ini bertujuan agar pembaca bisa mengembalikan ke kondisi semula jika terjadi kesalahan pengeditan. Klik tulisan yang bertuliskan Download Template Lengkap
4. Jangan beri centang pada kotak kecil yang ada disamping tulisan Expand Template Widget
5. Cari kode ]]></b:skin> pada template tersebut
6. Copy paste struktur CSS berikut tepat diatas kode ]]></b:skin>
7. Cari lagi struktur seperti berikut pada template pembaca
   <b:section class='main' id='main' showaddelement='no'>
   <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
   </b:section>
   
8. Kemudian copy paste struktur berikut tepat di bawah struktur yang Anda temukan pada langkah 7
<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';


var pageCount=5;
var displayPageNum=3;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';



var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
   
9. Klik tombol menu SIMPAN TEMPLATE
10. Contoh pembuatan nomor halaman posting tersebut bisa pembaca lihat pada bagian bawah halaman blog saya ini.

»»  read more

Cara Membuat Menu Drop Down Dengan CSS

Kali ini kita akan membuat satu lagi tutorial pembuatan menu pada sebuah web. Seperti yang pernah saya katakan bahwa banyak cara mendesain sebuah menu pada web termasuk pada sebuah blog. Jika postingan sebelumnya membahas pembuatan menu drop down horizontal dengan menggunakan JavaScript, maka kali ini saya akan memberikan tutorial web tentang bagaimana membuat menu drop down dengan CSS.

Menu drop down dengan JavaScript maupun CSS sebenarnya sama saja jika dilihat dari segi fungsi atau kegunaan. Namun, jika memanfaatkan JavaScript biasanya menu yang dibuat lebih keren dan menarik dilihat karena mungkin animasi menu yang dihasilkan lebih bagus. Namun, JavaScript biasanya membuat halaman kita menjadi lebih berat. Sebaliknya jika menggunakan CSS, biasanya menu yang dihasilkan memang terlihat lebih kaku namun lebih ringan. Tampilannya juga bisa kita desain lebih menarik sesuai dengan kreasi kita memanfaatkan CSS dalam membuat menu tersebut. Berikut cara membuat sebuah menu drop down:

Saya akan menjelaskan steb by step bagaimana mendesain menu drop down tersebut.

1. Buatlah terlebih dahulu struktur drop down menu tersebut. Pembuatan struktur ini menggunakan tag yang berfungsi untuk membuat list, sebab menu-menu tersebut bisa dikatakan sebuah list dari item-item. Item-item itulah yang kita fungsikan sebagai menu. Tag tersebut adalah <ul></ul> sebagai level utama dan <li></li> sebagai sub level. Saya berikan sebuah contoh struktur HTML dari menu drop down:
   <ul>
<li><a href="URL 1">MENU 1</a></li>
<li><a href="URL 2">MENU 2</a></li>
<li><a href="URL 3">MENU 3</a></li>
</ul>
   Perhatikan bahwa keseluruhan struktur dibungkus oleh tag <ul></ul>, artinya bahwa terdapat sebuah bagan list dimana item-item yang menjadi isi dari bagan tersebut (yang menjadi list) adalah "Menu 1", "Menu 2", dan "Menu 3" yang masing-masing dibungkus oleh tag <li></li>.
2. Struktur tersebut akan menjadi sebuah menu horizontal biasa, sama seperti tutorial menu horizontal yang pernah saya buat pada postingan yang sebelumnya. Silahkan baca disini. Nah, kita akan membuat agar menu-menu tersebut mempunyai sub menu lagi yang mana sub menu tersebut muncul ketika menu utamanya di sorot (sehingga disebut drop down menu). Dengan demikian, kita akan membuat sebuah bagan list lagi dimana bagan ini akan berada di dalam bagan list menu utama. Dengan kata lain di dalam list akan ada list. Bingung ya?he3x. Strukturnya akan seperti ini:
   <ul>
<li><a href="URL 1">MENU 1</a>
<ul>
<li><a href="URL sub 1">Sub menu 1</a></li>
<li><a href="URL sub 2">Sub menu 2</a></li>
<li><a href="URL sub 3">Sub menu 3</a></li>
</ul>
</li>
<li><a href="URL 2">MENU 2</a></li>
<li><a href="URL 3">MENU 3</a></li>
</ul>
   Prinsip list tersebut sama dengan penjelasan pada langkah 1, hanya saja tag </li></li> tidak lagi hanya membungkus struktur "Menu 1", tetapi sudah ikut membungkus sub menu dari "Menu 1" juga (perhatikan end tag </li> yang berwarna merah). Pada browser, struktur tersebut akan terlihat seperti gambar berikut:
   
3. Karena kita ingin membuat sebuah menu drop down yang tampil secara horizontal, maka kita akan mengatur tampilannya dengan menggunakan CSS. Postingan yang lalu hanya membahas pembuatan menu horizontal yang biasa, sehingga pembuatan CSS kali ini juga akan sedikit berbeda. Untuk CSS menu drop down tersebut, kita buat seperti ini:
   
   • Untuk menghilangkan list style pada menu drop down (seperti yang terlihat pada gambar dilangkah 2:
     #menuku ul {
list-style: none;
}
     #menu ul --> artinya kita mengatur bagan list (ul) yang ada didalam elemen yang kita beri atribut ID dengan nama "menuku". Elemen itu akan kita buat selanjutnya, apakah sebuah div, span, dan lain-lain.
     list-style: none --> berfungsi untuk menghilangkan style dari list tersebut (style itu berupa bullet).
     padding:0 dan margin:0 --> berfungsi agar jarak dari semua sisi pada bagan tersebut sebesar 0 sehingga tidak merusak layout dari bagan list menu tersebut.
     
   • Untuk membuat menu-menu tersebut tampil secara horizontal:
     #menu li {
float: left;
}
     #menu li --> artinya hampir sama dengan #menu ul, hanya saja ini digunakan untuk mengatur list-list menu itu sendiri, yaitu Menu 1, Menu 2, dan Menu 3 (yang kita buat pada langkah 1).
     float: left --> artinya kita membuat menu-menu tersebut berjejer horizontal dari kiri
   • Karena kita ingin sub menu muncul hanya ketika pointer berada diatas menu utama, maka kita perlu menyembunyikan bagan list dari sub menu tersebut.
     #menu ul ul {
visibility:hidden;
width:149px;
}
     #menu ul ul --> artinya hampir sama dengan #menu ul namun struktur ini berfungsi untuk mengatur bagan list sub menu yang berada didalam bagan list menu utama.
     visibility:hidden --> berfungsi untuk menghilangkan bagan list sub menu (ul yang kedua)
     width:149px --> berfungsi untuk membuat lebar bagan list sub menu tersebut sebesar 149px.
   • Agar sub menu tersebut muncul ketika menu utama disorot, maka kita buat struktur CSS seperti berikut:
     #menu ul li:hover ul,
#menu ul a:hover ul{
visibility:visible;
}
     CSS tersebut berfungsi agar bagan list sub menu akan terlihat ketika pointer berada di atas menu utama serta di atas link yang ada pada bagan list sub menu tersebut.
   • Kita akan mengatur sedikit tampilan dari menu-menu tersebut agar terlihat lebih menarik
     #menu li a {
background-color:#000000;
height: 2em;
width: 149px;
display: block;
border: 0.1em solid #dcdce9;
color: #ffffff;
text-decoration: none;
text-align: center;
}
     Karena menu tersebut akan menjadi berupa link, maka kita akan mengatur tampilannya sebagai sebuah link.
     background-color:#000000 -->warna backgroundnya adalah #000000
     height: 2em --> tinggi dari menu tersebut sebesar 2em
     width: 149px --> lebar menu sebesar 149px
     display: block --> menu tersebut akan tampil dalam bentuk block
     border: 0.1em solid #999999 --> border menu sebesar 0.1em, berbentuk solid, dan memiliki warna dengan kode #999999. Untuk mengetahui kode warna CSS yang lain silahkan buka disini.
     color: #FFFFFF --> tulisan menu akan berwarna #FFFFFF
     text-decoration: none --> link menu tidak akan mempunyai garis bawah
     text-align: center --> letak tulisan menu akan berada ditengah-tengah
4. Setelah membuat CSS dari drop down menu tersebut, maka selanjutnya adalah memasangkan atribut CSS pada bagan list menu tersebut. Kita akan memasukkan bagan list menu tersebut terlebih dahulu kedalam sebuah div, sehingga pada div tersebut atribut "menuku" akan dipasang. Ganti struktur pada langkah 2 menjadi seperi berikut:
   <div id="menuku">
<ul>
<li><a href="URL 1">MENU 1</a>
<ul>
<li><a href="URL sub 1">Sub menu 1</a></li>
<li><a href="URL sub 2">Sub menu 2</a></li>
<li><a href="URL sub 3">Sub menu 3</a></li>
</ul>
</li>
<li><a href="URL 2">MENU 2</a></li>
<li><a href="URL 3">MENU 3</a></li>
</ul>
</div>
5. Hasilnya akan seperti ini:
   

Selanjutnya kita akan mempejalari tutorial memasang menu drop down dengan CSS pada sebuah blog. So, jangan kemana-mana ya. Datang lagi dan beri komentar.. :D

»»  read more

Cara Membuat Album Foto Pada Blogspot Memakai Gadget

Tips cara membuat album foto pada blogspot ini sebenarnya sudah pernah saya berikan beberapa waktu yang lalu disini. Hanya saja posting yang pertama tersebut membahas bagaimana cara membuat slideshow album foto pada blogspot dengan memanfaatkan situs gallery foto yaitu www.slide.com. Untuk mengetahui trik pembuatan album foto di blog tersebut, pembaca boleh membukanya kembali disini. Blogspot sebenarnya menyediakan gadget yang berfungsi untuk membuat slide album foto pada blog kita. Namun, menurut saya gadget ini lebih sederhana jika dibandingkan dengan slideshow yang kita buat dari www.slide.com, sebab tampilan slide foto yang kita dapatkan dari situs www.slide.com tersebut bisa kita customize sesuai kehendak kita mulai dari tipe slide, ukuran, animasi, dan lain-lain. Meskipun demikian, tidak ada salahnya jika kita mencoba gadget slide album foto blogspot ini, sebab kesederhanaan biasanya indentik dengan kemudahan dalam pengaplikasiannya. Berikut langkah-langkah menambah album foto pada blogger:

1. Login pada akun Blogspot Anda
2. Klik link menu Tata Letak pada halaman dasbor. Pastikan Anda berada pada sub tab menu Elemen Halaman
   
3. Klik link Tambah Gadget pada bagian dimana pembaca ingin memasang slide album foto tersebut
4. Akan muncul window Tambahkan Gadget yang berisi daftar gadget yang bisa kita tambah. Silahkan cari dan pilih gadget Tampilan Slide
   
   
5. Berikut pengaturannya:
   Judul :
   Isi dengan nama slide foto Anda.
   Sumber :
   
   • Album Web Picasa. Album ini merupakan album gambar yang telah Anda masukkan pada pada blogspot pembaca misalnya ketika menulis posting. Silahkan klik http://picasaweb.google.com untuk melihat album Anda.
     
   • Flickr. Flickr merupakan situs yang menyediakan tempat menyimpan foto dan video. Untuk mendapatkan layanan ini, silahkan daftar atau login menggunakan Yahoo ID Anda di www.flickr.com.
   • Photobucket. Ini hampir sama dengan flickr dimana kita bisa menyimpan foto dan video secara online pada situs tersebut. Untuk mendapatkan layanan ini silahkan register di www.photobucket.com
   • Lainnya. Sumber selain yang 3 diatas.
     
   Pilihan :
   Memilih apakah berdasarkan kata kunci atau berdasarkan album
   Buka link di jendela baru:
   Centang jika ingin foto dibuka pada jendela baru ketika diklik
6. Sebagai contoh kita menambah slide foto menggunakan Album Web Picasa
   Judul: beri judul slide album
   Sumber : pilih "Album Web Picasa".
   Pilihan : pilih "Album"
   Nama Pengguna : masukkan ID akun Google pembaca. Misalkan akun Google pembaca adalah kampanye@gmail.com, maka isikan "kampanye"
   Album : pilih album yang terdapat pada Album Web Picasa Anda. Perlu diperhatikan bahwa album yang muncul pada list tersebut adalah album yang diperuntukkan untuk "Public". Untuk melakukan pengaturan tersebut, silahkan masuk terlebih dahulu pada http://picasaweb.google.com (masuk menggunakan akun Google Anda). Klik tab "My Photos", setelah itu klik album yang ingin Anda atur parameternya.
   Klik menu "Edit" kemudian pilih sub menu "Album Properties" sehingga akan muncul jendela "Edit album information".
   Lihat dibagian paling bawah, akan ada pilihan "Visibility for this album". Silahkan pilih "Public". Kemudian klik tombol Save changes
   
7. Pratinjau album akan terlihat pada jendela tambah gadget tersebut.
   
8. Klik tombol SIMPAN

Untuk melihat contoh hasilnya bisa pembaca lihat disini (tapi maaf, gambarnya hanya 2 dan sama pula, jadinya gak kelihatan deh pergantian slidenya)

Selamat mencoba dan jangan lupa meninggalkan komentar ya

»»  read more

Cara Membuat Menu Drop Down Horizontal Dengan JavaScript

2 hari yang lalu kita telah belajar membuat menu horizontal pada blogspot. Pada postingan ini, saya akan memaparkan bagaimana membuat menu drop down horizontal pada blogspot. Menu drop down merupakan menu yang mempunyai sub-sub menu didalamnya. Prisipnya adalah ketika pointer menyorot sebuah main menu, maka akan muncul sub menu dari main menu tersebut. Kode-kode ini saya dapat dari www.dynamicdrive.com. Klik disini untuk melihat contohnya.
Bagaimana cara menambahkan menu drop down pada blog kita? Berikut langkah-langkahnya:

1. Silahkan login terlebih dahulu pada akun Blogspot pembaca
2. Klik link menu Tata Letak dan pilih sub menu Edit HTML dan beri tanda centang pada kotak kecil disamping tulisan Expand Template Widget
   
3. Jangan lupa untuk membackup terlebih dahulu template pembaca agar jika terjadi kesalahan bisa dikembalikan lagi pada kondisi semula. Klik link Download Template Lengkap
4. Copy paste kode berikut di atas tag </head>
   <script type="text/javascript"
src="http://nestoriko.googlepages.com/chrome.js">
</script>
   
5. Cari kode ]]></b:skin> kemudian tambahkan struktur CSS dibawah ini dengan mengcopy paste diatas kode ]]></b:skin>
   
.chromestyle{
width: 100%;
font-weight: bold;
}

.chromestyle:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.chromestyle ul{
border: 1px solid #BBB;
width: 100%;
background: url(http://nestoriko.googlepages.com/chromebg2.gif) center center repeat-x;
padding: 4px 0;
margin: 0;
text-align: center;
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #494949;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #B5E2FE;
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{
background: url(http://nestoriko.googlepages.com/chromebg2-over.gif) center center repeat-x;
}

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #B5E2FE;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA
,direction=135,strength=4);
}

.dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid #B5E2FE;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

.dropmenudiv a:hover{
background-color: #EBF7FF;
}
   
6. Cari struktur seperti dibawah ini pada template pembaca
   <b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
   
7. Jika sudah ketemu, copy paste struktur berikut ini tepat dibawah struktur yang Anda temukan pada langkah 6
   <div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://tutorial-website.blogspot.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Menu1</a></li>
<li><a href="#" rel="dropmenu2">Menu2</a></li>
</ul>
</div>

<!--menu drop down pertama -->
<div id="dropmenu1" class="dropmenudiv">
<a href="URL sub menu1">Sub Menu1</a>
<a href="URL sub menu2">Sub Menu2</a>
<a href="URL sub menu3">Sub Menu3</a>
</div>


<!--menu drop down kedua -->
<div id="dropmenu2" class="dropmenudiv">
<a href="URL sub menu1">Sub Menu1</a>
<a href="URL sub menu2">Sub Menu2</a>
<a href="URL sub menu3">Sub Menu3</a>
</div>

<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>
8. Coba perhatikan tulisan yang berwarna merah struktur tersebut. Tulisan "dropmenu1" dan "dropmenu2" tersebut merupakan atribut rel dari parent menu drop down yang kita buat. Pada bagian tersebut terlihat bahwa terdapat 2 menu drop down, yaitu "Menu1" dan "Menu2" (warna biru). Jika pembaca ingin menambah menu drop down lagi misalnya "Menu3", maka buatlah juga atribut rel untuk "Menu3" tersebut misalnya "dropmenu3", setelah itu tambahkan struktur menu drop down untuk "Menu3" setelah menu drop down kedua". Sehingga strukturnya akan menjadi:
   <div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://tutorial-website.blogspot.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Menu1</a></li>
<li><a href="#" rel="dropmenu2">Menu2</a></li>
<li><a href="#" rel="dropmenu3">Menu3</a></li>
</ul>
</div>

<!--menu drop down pertama -->
<div id="dropmenu1" class="dropmenudiv">
<a href="URL sub menu1">Sub Menu1</a>
<a href="URL sub menu2">Sub Menu2</a>
<a href="URL sub menu3">Sub Menu3</a>
</div>


<!--menu drop down kedua -->
<div id="dropmenu2" class="dropmenudiv">
<a href="URL sub menu1">Sub Menu1</a>
<a href="URL sub menu2">Sub Menu2</a>
<a href="URL sub menu3">Sub Menu3</a>
</div>

<!--menu drop down ketiga-->
<div id="dropmenu3" class="dropmenudiv">
<a href="URL sub menu1">Sub Menu1</a>
<a href="URL sub menu2">Sub Menu2</a>
<a href="URL sub menu3">Sub Menu3</a>
</div>

<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>
9. Perhatikan bahwa nama atribut ID untuk menu drop down ketiga harus sama dengan nama atribut rel untuk "Menu3" yaitu "dropmenu3". Begitu pula jika pembaca ingin menambah menu drop down keempat, kelima, dan seterusnya.
10. "URL sub menu1" merupakan URL halaman yang akan dituju jika "Sub Menu1" diklik, dan seterusnya. Silahkan pembaca ganti nama menu, sub menu, dan juga URL dari menu drop down tersebut.
11. Bagi pembaca yang membuat web dengan menggunakan menggunakan software web design seperti dreamweaver, langkahnya hampir sama dengan yang diatas. Hanya saja struktur yang ada pada langkah 7 diletakkan pada bagian halaman web dimana pembaca ingin menambahkan menu drop down tersebut.
    

Selamat mencoba dan jangan lupa meninggalkan komentar ya

»»  read more

Cara Membuat Menu Horizontal Pada Blogspot

Menu yang terdapat pada sebuah web selain berguna untuk memudahkan pengunjung membuka halaman-halaman tertentu, juga bisa menambah estetika. Begitu pula dengan menu horizontal yang bisa membuat web kita menjadi lebih ergonimis dan keren. Nah, bagaimana dengan blogspot? Harus diakui bahwa pada template blogspot standart, fasilitas menu horizontal tidak ada didalamnya. Namun, kita tidak perlu berkecil hati sebab seperti yang telah saya katakan pada postingan sebelumnya bahwa kita bisa membuat menu termasuk menu horizontal pada blogspot. Berikut saya ulas langkah-langkah membuat menu horizontal pada Blogspot. Sebagai contoh kita akan membuat menu horizontal dibawah header

1. Login ke akun Blogspot pembaca
2. Klik link menu Tata Letak, kemudian pilih Edit HTML.
3. Back up terlebih dahulu template pembaca dengan mengklik link Download Template Lengkap agar jika terjadi kesalahan saat mengedit, pembaca bisa mengembalikannya dengan menguploadnya kembali.
   
4. Silahkan beri tanda centang pada kotak kecil disamping tulisan Expand Template Widget
5. Cari kode seperti dibawah ini pada template pembaca:
   <b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
6. Jika sudah ketemu, silahkan copy struktur berikut tepat dibawah kode-kode pada langkah 5
   <ul>
<li><a href='URL 1'>Home</a></li>
<li><a href='URL 1'>About Me</a></li>
<li><a href='URL 3'>Tutorial Website</a></li>
</ul>
7. Setelah itu klik tombol SIMPAN TEMPLATE, lalu lihat hasilnya
8. Pembaca akan melihat bahwa menu-menu tersebut muncul sebagai list vertikal, bukan horizontal. Oleh karena itu, kita perlu mengatur tampilannya agar muncul berjejer secara horizontal dengan menggunakan CSS. Selain itu, kita juga bisa mengatur tampilan dari menu tersebut agar terlihat lebih menarik dengan CSS.
9. Buka kembali bagian Edit HTML pada blogspot pembaca, kemudian cari kode ]]></b:skin>.
10. Silahkan copy struktur berikut diatas kode ]]></b:skin>
    /*CSS untuk menu horizontal*/

.menuhor ul{
font: bold 13px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
}

.menuhor ul li{
list-style: none;
display: inline;
}

.menuhor ul li a{
padding: 2px 0.5em;
text-decoration: none;
float: left;
color: black;
background-color: #33FFCC;
border: 2px solid #33FFCC;
}

.menuhor ul li a:hover{
background-color: #33CCFF;
border-style: outset;
}
    .menuhor ul merupakan atribut class yang berfungsi untuk mengatur tampilan parent dari list menu horizontal tersebut.
    .menuhor ul li berfungsi untuk mengatur tampilan anak menu horizontal yang kita buat.
    .menuhor ul li a berfungsi untuk mengatur tampilan link dari anak menu tersebut.
    .menuhor ul li a:hover berfungsi untuk mengatur tampilan link anak menu ketika pointer digerakkan diatasnya.
    
11. Kemudian ubah struktur yang Anda copy pada langkah 6 diatas sehingga menjadi seperti berikut:
    <div class="menuhor">
<ul>
<li><a href='URL 1'>Home</a></li>
<li><a href='URL 2'>Tutorial Website</a></li>
<li><a href='URL 3'>About Me</a></li>
</ul>
</div>
12. Silahkan ganti URL 1 dengan URL halaman yang akan dituju jika menu "Home" diklik. URL 2 diganti dengan URL halaman yang akan dituju jika menu "Tutorial Website" diklik, dan seterusnya.
    
13. Klik tombol SIMPAN TEMPLATE.

Untuk melihat hasilnya silahkan buka disini. Seperti yang telah saya katakan, bahwa CSS tersebut berfungsi untuk mengatur tampilan menu yang kita buat tadi. Silahkan pembaca menambah atau merubah atribut CSS tersebut untuk memodifikasi tampilannya, misalnya warna tulisan, background, lebar menu, dan lain-lain. Jika pembaca ingin mengerti cara memodifikasi atau membuat CSS tersebut, silahkan klik disini. Saya yakin pembaca akan lebih mengerti bagaimana CSS tersebut bekerja. Dengan adanya menu horizontal tersebut blog pembaca pasti menjadi lebih keren dan ergonomis.

Selamat mencoba dan jangan lupa meninggalkan komentar ya

»»  read more

Cara Membuat Menu Pada Blogspot

Pada umumnya, setiap website memiliki menu yang berfungsi untuk mengarahkan pengunjung ke halaman tertentu. Menu memang dijadikan sebagai alat untuk berpindah dari halaman yang satu menuju halaman yang lain. Menu-menu tersebut biasanya diletakkan secara vertikal maupun sebagai menu horizontal. Nah, bagaimana pula kita membuat menu pada blogspot?

Blogspot memang tidak menyediakan bagian pengaturan khusus pada halaman admin (dashboard) untuk menambah atau mengedit menu-menu dari halaman-halaman tertentu seperti pada Wordpress atau CMS Joomla. Hal ini mungkin dikarenakan blogspot tidak memungkinkan kita membuat halaman-halaman terpisah (independen), tetapi merupakan halaman posting yang ditampilkan secara berurutan, dimana posting terbaru akan ditampilkan dihalaman depan, sedangkan posting yang lama akan semakin terbelakang. Menurut saya hal ini menjadi kurang ergonomis. Sebab, sebuah web sebaiknya memberikan kemudahan pada pengunjung untuk menjelajahi halaman-halaman yang ada di dalam web tersebut. Jika suatu posting berada pada urutan paling belakang kita bisa memudahkan pengunjung untuk membukanya kembali dengan menggunakan menu atau sebuah link sehingga mereka tidak perlu membuka satu persatu halaman posting kita untuk sampai pada halaman posting yang ingin dituju.

Gambar: contoh menu yang dipasang pada blogspot

Untuk membuat menu pada blogspot bisa kita lakukan dengan mengotak-atik struktur templatenya. Sangat banyak bentuk-bentuk menu yang bisa kita tambahkan antara lain menu horizontal, menu vertikal, dropdown menu, dtree menu, dan lain-lain. Selanjutnya kita akan mempelajari tips-tips menambah menu pada blogspot satu demi satu.

»»  read more

Mengenal Dasar Pembuatan Halaman Website (2)

Masih ingatkan dengan postingan yang membahas tentang dasar pembuatan website bagian pertama? Kalau sudah lupa boleh dibuka lagi kok disini. Blog ini akan memberikan lanjutan tutorial mengenai hal yang serupa, yaitu mengenal dasar-dasar pembuatan web. Saya akan menjelaskan secara umum bagaimana cara menambahkan elemen-elemen yang akan dimasukkan ke dalam halaman web yang kita desain. Tentu penambahan ini akan diterangkan dengan bekerja secara langsung pada bagian kode-kode yang melibatkan bagian head dan body yang telah kita kenal pada postingan yang lalu. Sebagai cacatan, saya akan memberikan contoh dengan menggunakan Dreamweaver. Namun, bagi pembaca yang tidak menginstal sorftware web design misalnya Macromedia Dreamweaver atau yang lainnya, bisa menggunakan notepad atau wordpad sebagai alat praktek. Hanya saja software web design seperti Dreamweaver tersebut bisa menampilkan tag-tag HTML yang bisa kita pakai sehingga kita menjadi lebih terbantu. Pembaca bisa membaca tutorial Dreamweaver tersebut pada blog ini. Mari kita bahas satu persatu:

1. Bagi pembaca yang sudah menginstal Dreamweaver, silahkan buka program tersebut, dan buat dokumen baru dengan memilih File --> New. Pilih dokumen HTML, kemudian pilih layar Code atau Split. Sekali lagi, bagi pembaca yang belum menginstal Dreamweaver tersebut, silahkan buka Notepad atau Wordpad, kemudian tulis kode berikut:(jika menggunakan Dreamweaver, kode-kode ini akan langsung muncul)
   
   
2. Pertama-tama kita akan menambahkan elemen pada halaman web tersebut misalnya sebuah tulisan dan mengatur tampilannya secara langsung alias tanpa memakai CSS. Elemen-elemen yang akan kita tambahkan tersebut diletakkan pada bagian body (diantara tag <body> dan </body>) agar elemen-elemen tersebut muncul dan terlihat pada browser internet. Misalkan kita ingin menampilkan tulisan "SELAMAT DATANG" pada web kita ketika orang lain membukanya, maka ketikkan tulisan "SELAMAT DATANG" tersebut pada body seperti dibawah ini:
   <body>
SELAMAT DATANG
</body>
3. Simpan dokumen HTML tersebut dengan nama index.html. Setelah tersimpan, silahkan buka file tersebut pada browser (cukup double click), maka akan tampak seperti gambar berikut:
   
4. Sekarang kita akan memberi atribut pada tulisan tersebut untuk mengatur tampilannya. Misalkan kita ingin membuat tulisan tersebut berwarna merah, maka tulisan kode seperti berikut ini:
   <body>
<font color="#FF0000">SELAMAT DATANG</font>
</body>
   Tag <font color="#FF0000"></font> tersebut berfungsi untuk membuat tulisan SEMALAT DATANG sebagai huruf (font) yang berwarna merah (FF0000). Kita tentu ingat bahwa setiap jenis warna mempunyai kode-kode tertentu. Hal ini sudah kita bahas pada tutorial membuat CSS. Kita bisa mendapatkan kode-kode tersebut dari software-software grafis atau web design, atau jika ingin mendapatkan secara onlibe, pembaca juga bisa membuka situs yang menyediakan kode warna CSS untuk web tersebut. Klik disini untuk melihat kembali posting yang membahasnya dan mengetahui situs penyedia kode warna CSS untuk web. Misalkan kita ingin pula membuat tulisan tersebut bergaris bawah, maka strukturnya menjadi:
   <body>
<u><font color="#FF0000">SELAMAT DATANG</font></u>
</body>
5. Simpan hasil editing Anda, kemudian buka file index.html tersebut, maka hasilnya akan seperti gambar berikut:
   
6. Pengaturan tampilan elemen misalnya tulisan pada langkah 4 & 5 merupakan fungsi HTML untuk Presentational. Fungsi HTML ini sudah tergantingan oleh peranan Cascading Stylesheet (CSS). Nah, langkah selanjutnya dalam mempelajari dasar pembuatan halaman website adalah bagaimana penggunaan CSS itu sendiri didalam mendesain website. Bagaimana bentuk dan cara penulisan CSS mungkin sudah kita pelajari pada postingan yang ini. Sekarang saatnya melihat bagaimana peletakannya.
7. Ada 2 cara dalam penggunaan CSS. Yang pertama menuliskan secara langsung pada halaman-halaman website, dan yang kedua membuat file yang khusus berisi struktur CSS yang kemudian diinjectkan/ disisipkan/ ditanamkan/ dilinkkan pada halaman-halaman website.
   
8. Untuk cara yang pertama (menulis secara langsung pada halaman website):
   Strutur CSS dituliskan pada bagian <head> karena pada bagian tersebutlah deklarasi/informasi yang digunakan untuk mengatur website kita termasuk salah satunya CSS. Nah, karena kita menuliskan secara langsung pada halaman web yang ingin diatur, maka kita perlu mendefenisikan tersebih dahulu struktur-struktur tersebut sebagai sebuah bahasa/struktur CSS. Bagaimana cara mendeklarasikannya? Misalkan kita buat sebuah struktur CSS seperti dibawah ini:
   #tulisanku {
color:#FF0000;
text-decoration:underline;
}
   Pembaca pasti mengertikan maksud struktur tersebut? Artinya kita mendefenisikan sebuah atribut yang kita beri nama "tulisanku" kemudian memberi pengaturan terhadap atribut itu antara lain warna dengan nilai FF0000 (color:#FF0000), kemudian memberi garis bawah pada teks (text-decoration:underline). Sekarang pindahkan struktur tersebut diantara <head> dan </head> sehingga menjadi:
   
   <head>
#tulisanku {
color:#FF0000;
text-decoration:underline;
}

</head>
<body>
   Seperti yang telah saya paparkan tadi bahwa kita perlu mendeklarasikan struktur tersebut sebagai struktur/bahasa CSS. Maka bentuk penulisannya menjadi:
<head>
<style>
#tulisanku {
color:#FF0000;
text-decoration:underline;
}
</style>

</head>
<body>
   Tag <style></style> yang membungkus struktur tersebutlah yang akan mendeklarasikan bahwa struktur tersebut adalah bahasa/struktur CSS.
9. Sekarang pada bagian <body>, ganti strukturnya menjadi:
   <body>
<span id="tulisanku">SELAMAT DATANG</span>
</body>
   Artinya bahwa kita memberikan ID "tulisanku" pada kalimat SELAMAT DATANG sehingga tampilan kalimat tersebut akan seperti "tulisanku", yaitu warnanya menjadi FF0000 dan bergaris bawah.
   Struktur lengkap halamannya akan seperti gambar dibawah ini:
   
10. Simpan hasil editing file index.html tersebut, kemudian buka pada browser Anda.
11. Untuk cara yang kedua (membuat file khusus CSS kemudian melinkkan ke halaman web):
    Buka program Dreamweaver pembaca. Pilih menu File --> New, kemudian pilih category basic page, dan pilih jenis CSS. Pembaca juga bisa menggunakan notapad atau wordpad. Karena kita akan membuat file khusus CSS, maka kita tidak perlu mendeklarasikan strukturnya terlebih dahulu, tetapi langsung menulis struktur CSS yang kita inginkan. Silahkan tulis struktur berikut pada file tersebut:
    
#tulisanku {
color:#FF0000;
text-decoration:underline;
}
    Setelah itu simpan file tersebut dengan nama misalnya "tampilan.css". Usahakan menyimpannya pada folder yang sama dengan file index.html yang ingin kita desain, misalkan pembaca menyimpan di "D:\webku\".
    
12. Hapus struktur dibawah ini dari bagian <head> yang telah kita tambahkan pada langkah 8 (atau pembaca boleh membuat file HTML baru sebagai bahan latihan untuk cara kedua ini).
    <style>
#tulisanku {
color:#FF0000;
text-decoration:underline;
}
</style>
    
13. Tambahkan pula struktur berikut pada diantara <head></head>:
    
    <link rel="stylesheet" type="text/css" href="D:\webku\tampilan.css" />
    Struktur tersebutlah yang berfungsi untuk melinkkan file CSS (sebagai CSS Linker) yang kita simpan pada D:\webku dengan nama "tampilan.css" sehingga bisa digunakan untuk mengatur tampilan elemen pada halaman website kita. "D:\webku\tampilan.css" merupakan URL dari file CSS kita. Karena kita menyimpan pada komputer, maka bentuknya seperti itu. Jika kita menyimpan secara online, maka bentuknya menjadi misalnya "http://www.webku.com/tampilan.css".
14. Bagian <body> biarkan seperti pada langkah 9, karena kita sama-sama mendeklarasikan atribut dengan nama "tulisanku".
15. Tampilan struktur lengkapnya seperti gambar berikut:
    
16. Simpan hasil editing file index.html tersebut,kemudian buka pada browser.

Seperti itulah dasar pembuatan web dengan menggunakan HTML dan CSS. Sekarang tinggal membuatnya lebih kompleks sesuai dengan kebutuhan kita.
Selamat mencoba, dan jangan lupa komentar yach :D

»»  read more

Award Pertama Di Hari Pertama

Beberapa hari ini saya sangat jarang membuka internet dan menyebabkan postingan di blog ini menjadi tertunda. Harus diakui jadwal saya memang sangat padat belakangan ini (halah, kayak orang penting aj :D). Tapi benar kok, mulai dari tugas kuliah yang banyak, belum lagi laporan praktikum dan responsi, bahkan ditambah pula tugas saya sebagai Kadiv Seni dan Budaya MBP yang sedang mempersiapkan Pagelaran Seni dan Budaya. Apalagi minggu kemarin saya harus mempersiapkan acara syukuran buat abang dan kakak MBP yang baru di wisuda. Tapi nih ya, semua rasa lelah itu rasanya tidak terasa lagi. Sungguh tidak disangka kalau hari Senin ini saya mendapatkan AWARD PERTAMA setelah saya bermasyarakat di jagat blogsphore ini. Fabulous Blog Award, begitulah namanya, yang diberikan oleh sahabat yang menjadi pengunjung blog ini, Buah Pikiran Ihsan, Padahal saya sendiri merasa blog ini tidak ada apa-apanya dari segi interface (agak merendah nih..kwkwkwkwkw).
Hmm, sebagai wujud rasa senang, saya juga mau bagi-bagi award nih buat teman-teman yang terpilih:

1. Home of RIA
2. Siloam Room
3. ponggi~La
4. Ratu de Blog
5. Anti Kemapanan
6. Gadis Rantau
7. Madhysta.com
8. Agusramadhani
9. A byte for a soul
10. Message from the Green Side

Tapi nih, ada sedikit pe er buat sahabat-sahabat diatas, gak rumit kok..hehehehe...

1. Put the logo on your blog or post
2. Nominate at least 7 blogs which you think are FABULOUS
3. Be sure to link to your nominees within your post
4. Let them know that they have received this award by commenting on their blog
5. Share the love and link to this post and to the person from whom you received your award

(NB: dapetnya inggrisan, jadi ngasinya inggrisan juga ya, biar lebih original gtu.kwkwkwkwkw)

Dan ini adalah logi untuk poin 1:

»»  read more

Membuat Web Menggunakan Macromedia Dreamweaver (4)

Sebelum masuk lebih dalam lagi ke alam tidur (kayak hipnotis aja :D) membaca postingan ini, saya menyarankan Anda untuk membaca 3 postingan sebelumnya yang berhubungan dengan postingan ini agar lebih mudah dalam memahaminya. Tenang saja, semua tutorial dreamweaver ini gratis buat pembaca sekalian, tanpa mengenal batas usia dan apalah....halah...^^

1. Membuat Web Menggunakan Macromedia Dreamweaver (1)
2. Membuat Web Menggunakan Macromedia Dreamweaver (2)
3. Membuat Web Menggunakan Macromedia Dreamweaver (3)

Postingan ini sebenarnya ingin saya tulis pada bagian yang ke-3, namun saya berpikir untuk membaginya agar lebih enak mempelajarinya. Masih pada cara membuat web dengan dreamweaver, berikut langkah-langkahnya:

1. Saya asumsikan pembaca telah melakukan pengaturan Site yang ingin Anda buat. Jika belum melakukannya tidak masalah, kita bisa melanjutkan ke langkah selanjutnya.
2. Buka program Dreamweaver pada komputer Anda.
3. Pilih menu File --> New (Ctrl + N), maka akan muncul sebuah kotak dialog New Document.
   
4. Pilih tab General. Pada kotak Category pilih Basic Page, sedangkan pada kotak Basic Page, pilih HTML. Kemudian klik tombol Create.
   
5. Simpan terlebih dahulu dokumen baru tersebut ke dalam folder gud_webku yang telah kita buat pada postingan Membuat Web Menggunakan Macromedia Dreamweaver (3). Jika pembaca tidak melakukan langkah-langkah pada postingan tersebut, silahkan simpan di sembarang folder. Simpan dengan nama index.html.
6. Di dalam Panel Files pada bagian Local view, akan muncul sebuah file baru di dalam folder gud_webku bernama index.html. Double klik file index.html untuk membuka halaman index.html dan melakukan editing pada file tersebut.
   
7. Sekarang coba pembaca menulis sebuah kalimat : "Ini Halaman Utama" pada file tersebut. Silahkan berkreasi dengan Properties untuk mengatur warna, jenis, dan ukuran tulisan. Misalkan kita memberi warna Merah.
   
8. Pilih File --> Save untuk meyimpan perubahan yang telah kita lakukan.
9. Kembali ke bagian Panel Files. Sekarang pilih Remote View. Pembaca akan melihat folder rem_webku namun belum terdapat file didalamnya karena belum kita masukkan file apapun.
   
10. Pada Dreamweaver, terdapat fasilitas Put dan Get. Fasilitas ini diperlukan untuk melakukan pemindahan file web dari komputer ke server atau sebaliknya. Jika kita ingin memasukkan file web ke server atau biasa disebut sebagai upload, maka kita pilih site pada bagian Local view, kemudian melakukan Put (artinya kita memindahkan file dari local ke server). Sedangkan jika kita ingin melakukan perubahan atau modifikasi file yang ada pada server, maka kita bisa mendownloadnya ke local dengan memilih server view dan melakukan Get (artinya kita mengambil file dari server ke local). Untuk memindahkan file index.html yang telah kita simpan pada folder local (gud_webku) ke dalam folder remote (rem_webku), masuk ke bagian Local view lalu klik tombol Put berupa tanda panah ke atas yang berwana biru.
11. Setelah melakukan langkah 10, masuk kembali pada bagian Remote view. Pembaca akan melihat file index.html telah ter-copy pada folder rem_webku.
    
12. Sekarang kembali lagi pada Local view (aduh..capek nih bolak balik..hihhiihi). Buatlah sebuah halaman baru seperti pada langkah 4. Isi halaman baru tersebut dengan tulisan :"Ini Profile Saya". Kemudian simpan dengan nama "profile.html". Sekarang akan ada file profile.html pada folder gud_webku.
    
13. Double klik kembali file index.html, sehingga kita akan masuk pada halaman editing index.html tersebut. Buatlah sebuah tulisan lagi misalnya :"Profile". Pada bagian ini kita akan mencoba membuat sebuah link dimana ketika kita mengklik tulisan Profile tersebut pada halaman utama, maka akan menuju ke halaman profile.html yang telah kita buat.
14. Drag tulisan "Profile" tersebut. Setelah itu, pada bagian Properties, perhatikan sebuah kotak dengan tulisan Link. Kotak itu berfungsi untuk menuliskan URL halaman yang akan dituju jika kita mengklik link.
    Karena kita ingin menuju file profile.html tadi, klik tombol gambar folder yang ada disamping kanan kotak tersebut. Maka akan muncul kotak dialog memilih file yang akan dituju. Pilih file profile.html pada folder gud_webku yang telah kita buat pada langkah 12.
    
15. Pilih menu File --> Save untuk menyimpan perubahan yang telah kita lakukan.
16. Lakukan Put File(s) seperti langkah 10 untuk memasukkan file tersebut kedalam folder remote.
17. Pembaca juga boleh melihat kode-kode HTML yang telah tercipta pada halaman web yang Anda buat tersebut dengan memilih layar Code.
    
18. Untuk melihat hasilnya, silahkan buka kembali file index.html (double klik dari bagian Panel Files) lalu tekan tombol F12 pada keyboard Anda, atau dapat langsung mengklik file index.html dari folder rem_webku.
    

Oke, itu merupakan langkah-langkah dasar yang bisa kita lakukan dalam membuat web dengan Dreamweaver. Saya harap pembaca sudah sedikit memahami bagaimana sebuah software web design seperti Dreamweaver digunakan dalam membuat web. Sebenarnya masih banyak lagi fungsi-fungsi lain yang bisa kita dapatkan dari Dreamweaver. Tapi paling tidak, pembahasan yang telah saya postingkan tersebut bisa memberikan pencerahan dasar bagi pembaca yang memang ingin mendesain website sederhana atau mengerti apa dan bagaimana sebenarnya website itu. Artinya, kita tidak perlu mengetahui terlalu dalam jika memang tidak membutuhkannya. Apalagi sekarang kita bisa memanfaatkan blog dan CMS yang serba gratis dan mudah digunakan. Yach, paling tidak bisa dimanfaatkanlah jika ingin mempermak blog, atau bisa mengerti apa yang sedang kita gunakan dan kita edit :D.

Selamat Mencoba...

»»  read more

Membuat Web Menggunakan Macromedia Dreamweaver (3)

Akhirnya sampai juga kita dibagian ketiga posting berkelanjutan mengenari cara membuat web menggunakan Macromedia Dreamweaver. Setelah di bagian pertama kita membahas sepatah dua kata mengenai apa itu Dreamweaver, kemudian di bagian kedua saya memaparkan beberapa bagian penting dari software web design tersebut, maka di bagian ini saya akan langsung memberi contoh penggunaan Dreamweaver dalam membuat sebuah halaman website. Berhubung karena salah satu keunggulan utama Dreamweaver ini sebagai sebuah software web design adalah memberikan kemudahan bagi kita dalam membuat website, maka kita akan mencoba bekerja membuat halaman-halaman website melalui layar design dimana kita bisa menggunakan menu-menu pilihan dalam memasukkan isi web dan mengatur tampilannya tanpa harus pusing mengotak-atik kode-kode struktur HTML-nya. Berikut langkah-langkahnya:

1. Buatlah folder terlebih dahulu sebagai tempat penyimpanan file-file website Anda. Buatlah 2 buah folder, yang pertama sebagai tempat penyimpanan utama dimana file-file dari folder inilah yang akan Anda edit seterusnya. Sebagai contoh buatlah folder di drive D:\, F:\, atau yang lainnya dengan nama terserah pembaca, misalkan "gud_webku". Folder kedua berfungsi sebagai tempat menjalankan halaman-halaman website yang akan Anda buat. Sebenarnya file-file yang akan ada di folder kedua ini adalah file-file yang sama yang ada di folder pertama (folder "gud_webku"). Namun, ketika kita ingin menjalankan halaman web yang telah kita buat, kita akan "meng-copy paste" halaman-halaman tersebut beserta seluruh file-file yang kita gunakan dalam mendesain halaman-halaman tersebut, misalnya gambar-gambar, kemudian menjalankannya dari folder kedua tersebut. Hmm, pasti pembaca berpikir bahwa tidak ada gunanya ya alias percuma? Kenapa tidak dijalankan saja dari folder pertama? Prinsipnya seperti ini, ketika kita membuat sebuah website tentu tujuan kita selanjutnya adalah menyimpan halaman-halaman web tersebut ke internet, atau yang biasa disebut hosting. Nah, karena kita ingin bekerja secara offline alias tidak langsung terhubung ke internet supaya hebat biaya dan waktu, maka kita anggap seolah-olah kita "menghostingkan" halaman website tersebut ke folder yang kedua. Tentu halaman-halaman yang dihostingkan tersebut yang akan dibuka di browser. Jadi, folder pertama berfungsi sebagai tempat kita menyimpan dokumen-dokumen web yang kita buat (halaman web beserta file-file lain yang digunakan untuk mendesain halaman web) dimana file-file itulah yang akan kita tambah, edit, dan lain-lain. Sedangkan folder kedua berfungsi sebagai "hosting" atau lebih tepatnya disebut sebagai localhosting dimana website kita akan dijalankan/atau ditesting. Sebenarnya prinsip ini akan lebih jelas ketika kita belajar mengenai server local di komputer sehingga fungsinya akan lebih kelihatan. Mengenai hal itu, kita akan mempelajarinya saat memulai membuat web CMS.
   Setelah itu, buatlah folder kedua misalnya di drive C:\ dengan nama terserah Anda, misalkan "root_webku". Jika pembaca sudah paham mengenai server local di komputer,, misalnya IIS, PWS, dan lain-lain, buatlah folder tersebut di dalam folder htdocs, public_html, wwwroot, atau www. Namun, jika belum paham, buat saja disembarang tempat di drive Anda.
   Nah, bagaimana pula dengan aktivitas "copy paste" yang saya sebut tadi? Apakah kita melakukannya secara manual. Disinilah salah satu fungsi Dreamweaver. Kita akan melakukannya melalui Dreamweaver sehingga setiap kita melakukan penambahan, pengeditan, dan lain-lain terhadap halaman web yang sedang kita desain (yang ada pada folder "gud_webku"), maka Dreamweaver mampu melakukan update pada file-file yang sama yang ada di folder "rem_webku". Sistem seperti ini juga berguna sebagai back up website kita karena kita sudah punya 2 folder yang berisi website kita. Untuk itu, kita perlu melakukan pengaturan sebelum membuat website. Bagaimana pengaturannya? Ada dilangkah selanjutnya :D
   
2. Buka program Dreamweaver
   
3. Pada menu utama, pilih Site -> New Site, akan muncul sebuah kotak dialog wizard yang berisi 2 buah tab. Pilih tab Advance dimana akan ada beberapa kategori yang akan kita atur.
   Pada kategori Local Info:
   Site name : tulis nama projek website Anda. Misalkan "webku"
   Local root folder : pilih folder gud_webku yang telah kita buat pada langkah 1. Kemudian beri tanda centang pada kotak Refresh local file list automatically. Pilihan ini berguna untuk melakukan update secara otomatis jika kita melakukan perubahan pada file web yang kita buat.
   Pilihan lainnya untuk sementara dibiarkan saja.
   Pada kategori Remote Info:
   Access : pada bagian ini kita diminta untuk memilih dimana akan melakukan pengetesan (tempat menjalankan) web kita, apakah secara online atau offline. Karena kita untuk sementara melakukannya secara offline yaitu pada komputer kita, maka pilih Local/Network.
   Remote folder : pilih folder rem_webku yang kita buat pada langkah 1. Jangan lupa juga memberi tanda centang pada kotak Refresh local file list automatically.
   Pada kategori Testing Server:
   Pada bagian ini kita diminta untuk memilih model server yang akan kita gunakan untuk melakukan pengetesan atau menjalankan website kita. Untuk sementara lakukan pengaturan sebagai berikut:
   Server mode : none
   Access : Local/Network
   Testing Server Folder: secara otomatis, folder yang terpilih adalah folder "rem_webku" yang merupakan tempat file web kita yang akan dijalankan.
   Kategori lainnya untuk sementara dibiarkan saja. Setelah itu klik tombol OK. Jika ingin melakukan perubahan pengaturan pada SITE yang telah kita buat tersebut, pembaca bisa melakukannya dengan memilih menu Site --> Manage Sites, maka akan muncul kotak dialog Manage Site.
4. Jika pengaturan sudah berhasil, pembaca akan melihat di bagian panel Dreamweaver telah muncul bagian yang berisi site Anda seperti gambar ini:
   
5. Coba kita perhatikan panel tersebut. Terlihat bahwa kita sedang berada pada bagian Local view sehingga yang muncul adalah folder gud_webku. Jika pembaca menggantinya dengan Remote view, maka folder yang terlihat adalah rem_webku
   

NB: Jangan kemana-mana dulu ya..tunggu postingan lanjutan berikutnya, karena kita akan semakin mengerti kegunaan dan kelebihan Dreamweaver :D

»»  read more