Category Archives: Tips

Cara Membuat Footer 3 Kolom di WordPress

Kalau pada tulisan sebelumnya kita telah membahas bagaimana cara membuat footer 3 kolom di website statik, kali ini kita akan mencoba membuatnya di WordPress.

Cek it dot!!

untuk percobaan praktek, kita akan mencobanya di themes default,  asumsinya anda sudah menginstall local server dan wp offline!

berikut langkah-langkahnya:
* masuk ke wp-content/themes/default
* edit style.css
* lalu tambahkan style berikut di style.css theme anda.

 

#pembentuk-footernya{
clear:both;
width:100%;
/*anda bisa menambahkan beberapa property lagi seperti
background-color:blue;
border:1px solid;
dan lain sebagainya
*/
}
.bagian-dalam-footernya{
float:left;/*menekan kekiri*/
width:31%;/*lebar*/
min-height:300px;/*tinggi minimal*/
border-bottom:1px dotted black;/*border bawah*/
margin:1% 1% 1% 1%;/*ini adalah jarak bagian dalam footer(kiri-kanan-tengah) anda bisa menggantinya dangan lengh(px)*/
font:normal 17px times;/*font*/
/*
sobat bisa menambah peropety lain, seperti
background-color:red;
color:white;
margin:0;
padding:0;
serta beberapa property lainya;
*/
}

.bagian-dalam-footernya h2{/*ini untuk judul*/
border-bottom:2px dotted silver;
text-transform: capitalize;/*huruf awal kapital*/
font:normal 22px 'times new roman';/*font*/
margin:5px 0;/*jarak luar atas-bawah 5px, kiri kanan 0*/
padding:0 0 0 5px;/*jarak dalam kiri 5px*/
}
.bagian-dalam-footernya .isiwidgetnya{/*ini untuk isi widget, sobat bisa menambah beberapa properti lain seperi backgroun-color: dan lain-lain*/
margin-left:10px;/**/
margin-top:10px;
}

* save
* buka lagi footer.php
* lalu tambahkan script dan markup berikut pada bagian atas

 

<div id="pembentuk-footernya">
<!-- // -->
<!-- // -->
<div class="bagian-dalam-footernya">
<h2>judul footer</h2>
<div class="isiwidgetnya">
<?php
// ini adalah isi widget kiri, bisa diganti dengan widget lain
//contoh widget dibawah adalah popolar tag
wp_tag_cloud('');
?>
</div>
</div>
<!-- // -->
<div class="bagian-dalam-footernya">
<h2>judul footer</h2>
<div class="isiwidgetnya">
<?php
// ini adalah isi widget kiri, bisa diganti dengan widget lain
//contoh widget dibawah adalah archives
wp_get_archives('type=monthly');
?>
</div>
</div>
<!-- // -->
<div class="bagian-dalam-footernya">
<h2>judul footer</h2>
<div class="isiwidgetnya">
<?php
// ini adalah isi widget kiri, bisa diganti dengan widget lain
//contoh widget dibawah adalah search form
get_search_form();
?>
</div>
</div>
<!-- // -->
<?php /*
anda bisa menambah beberapa lagi widget dibawah, seperti di atas!
contohnya ini!
<div class="bagian-dalam-footernya">
<h2>judul footer</h2>
<div class="isiwidgetnya">
<?php
// ini adalah isi widget kiri, bisa diganti dengan widget lain
//contoh widget dibawah adalah popolar tag
?>
</div>
</div> */
?>
<!-- // -->
<!-- // -->
<div style="clear:both;"></div>
<!-- // -->
<!-- // -->
</div>

* save
* login di dasbord
* klik appereance
* themes
* activete themes default (yang sudah di edit barusan)
* lihat blog!

keterangan

* untuk merubah tampilanya, edit style. css yang ditambahkan tadi
* sedangkan untuk menganti widgetnya edit footer.php, kemudian baca komentar yang saya tambahkan
* untuk menambah/membuat footer 3 kolom ini di themes lain, lakukan hal yang sama seperti langka diatas.
* namun, struktur themes wp itu berbeda-beda, jadi sobat harus berpikir sedikit.
* pada perinsipnya cara kerja themes itu sama semua!

Membuat Footer 3 Kolom

Mungkin kalian pernah bingung dan bertanya tanya seperti saya sebelumnya, gimana caranya membuat footer 3 kolom?, ternyata itu tidak sesulit yang dibayangkan!.

Tanpa panjang lebar lagi dibawah ini saya akan berikan cara membuatnya berikut dengan kode HTML dan CSSnya, tapi yang ini versi staticnya!!

perhatikan kode dibawah:

Kode untuk CSS

<style type="text/css">
#pembentuk-footernya{ /*namakan dengan id yang anda inginkan (mis. #footer)*/
clear:both;
width:100%;
/*disini bisa ditambahkan beberapa property lagi seperti
background-color:blue;
border:1px solid;
dan lain sebagainya
*/
}
/**/
.bagian-dalam-footernya{
float:left;
width:31%;
min-height:300px;
border-bottom:1px dotted black;
margin:1% 1% 1% 1%;/*ini adalah jarak bagian dalam footer(kiri-kanan-tengah) sobat bisa menggantinya dangan lengh(px)*/
font:normal 17px times;
/*
sobat bisa menambah peropety lain, seperti
background-color:red;
color:white;
margin:0;
padding:0;
serta beberapa property lainya;
*/
}
/**/
.bagian-dalam-footernya h2{
border-bottom:2px dotted silver;
text-transform: capitalize;
font:normal 22px 'times new roman';
margin:5px 0;
padding:0 0 0 5px;
}
/**/
.bagian-dalam-footernya .isiwidgetnya{
margin-left:10px;
margin-top:10px;
}
</style>

 

Kode untuk HTML:

<div id="pembentuk-footernya">
<!-- // -->
<!-- // -->
<div class="bagian-dalam-footernya">
<h2>judul footer kiri</h2>
<div class="isiwidgetnya">
<!-- masukkan kode widget disini -->
</div>
</div>
<!-- // -->
<div class="bagian-dalam-footernya">
<h2>judul footer tengah</h2>
<div class="isiwidgetnya">
<!-- masukkan kode widget disini -->
</div>
</div>
<!-- // -->
<div class="bagian-dalam-footernya">
<h2>judul footer kanan</h2>
<div class="isiwidgetnya">
<!-- masukkan kode widget disini -->
</div>
</div>
<!-- // -->
<!-- // -->
<!-- // -->
<div style="clear: both;"></div>
<!-- // -->
<!-- // -->
</div>

untuk melihat hasilnya

* copy markup style diatas
* paste ke notepad
* save as (pilih all types) dengan nama contohfooter3kolom.htm
* jalankan(double click), atau
* open with (firefox, ie, opera, safari, chrome)

Nah itu tadi cara membuat footer 3 kolom versi Static!, selanjutnya kita akan coba bagaimana membuat 3 kolom di WordPress….

Membuat Top Dropdown Menu di WordPress

Drop down menu adalah tampilan menu yang memiliki tingkatan di bawahnya ketika pointer mouse kita letakkan atau kita arahkan di atas tulisan menu yang kita pilih. Dapat juga disebut dengan multi-leverl-navigation. Jadi, ketika mouse diarahkan di atasnya maka akan muncul sub dari menu utama tadi.

Untuk awal buka file header.php
copy dan paste kode berikut :

 <div id="menu">
 <ul> 
 <li><a href="<?php bloginfo('url');?>">Home</a></li> 
 <?php wp_list_categories('title_li='); ?>
 </ul>
 </div>
   
"<li><a href="<?php bloginfo('url');?>">Home</a></li>"  
ini untuk menampilkan halaman default blog kamu
"<?php wp_list_categories('title_li='); ?>" 
ini untuk menampilkan halaman berdasarkan Kategori blog kamuz

Selanjutnya buka file style.css
copy dan paste kode dibawah ini :
#menu {
 margin-top:2px;
 /*background:#000 url(images/img04.jpg) left repeat*/;
 border-bottom: #ff3b97 solid 5px;
 border-top: #ccc solid 1px;
 height:30px; 
 text-shadow: 3px 3px 6px #aaa; 
 width: 100%; 

}

#menu ul { 
 margin: 0; 
 list-style: none; 
 display: block; 
}

#menu li , #menu li a{ 
 float: left; 
 position: relative; 
 margin-right:10px;
 color:#000; 
 text-decoration: none; 
 display: block;
} 

#menu .menu-header, 
div.menu { 
 width: 100%; 
}

#menu .menu-header ul, 
div.menu ul { 
 list-style: none; 
 margin: 0; 
}

#menu .menu-header li, 
div.menu li { 
 float: left; 
 position: relative; 
}

#menu a { 
 color: #000; 
 display: block; 
 line-height: 30px; 
 padding:0 5px 0 5px; 
 text-decoration: none;
}

#menu ul ul { 
 display: none; 
 position: absolute;
 margin-top:30px;
 left: 0; 
 float: left; 
 width: auto; 
 z-index: 99999; 
}

#menu ul ul li { 
 min-width: 180px; 
}

#menu ul ul ul { 
 left: 30px; 
 top: 35px; 
}

#menu ul ul a { 
 background: #000000; 
 line-height: 1em; 
 padding: 10px; 
 width:auto; 
 height: auto; 
}

#menu li:hover > a, 
#menu ul ul :hover > a { 
 background: #ff3b97; 
 color: #fff;
 text-shadow: 3px 3px 6px #000; 
}

#menu ul li:hover > ul { 
 display: block; 
}


Maka hasilnya akan terlihat seperti dibawah ini :

Membuat Top Dropdown Menu di WordPress

Setting Custom Domain di Blogspot

Memiliki blog dengan nama domain top level domain (tanpa embel-embel blogspot, wordpress, multiply dll) tentunya akan membuat blog kita terlihat lebih elit dan berkelas, dan juga akan membuat nama blog kita akan lebih mudah diingat orang. Jika kamu belum memiliki domain, kamu bisa membelinya di webdevelopmentbali.co.cc dengan harga yang cukup murah (he.he.. promosi). Jika kita sudah membeli domain maka ada beberapa hal yang harus kita lakukan supaya domain kita tertuju pada web/blog yg kita punya, diantaranya yaitu setting DNS, Name Server dll. Mari kita mulai saja langkah-langkah untuk customisasi domain ini.

* SETTING DNS (DOMAIN NAME SERVER)
Langkah awal kita yaitu melakukan setting DNS. Biasanya jika kita membeli domain akan ada biaya tambahan (sekitar Rp 3000,-) untuk menambahkan layanan “DNS Managed”. Tapi jika kamu tidak ingin mengeluarkan biaya ada layanan gratis supaya kita bisa melakukan setting DNS, seperti di dnspark.net. Nha berikut ini adalah tutorial jika kam menggunakan layanan dari dnspark ini :

1. Jika kamu belum memiliki account di dnspark km bisa daftar di https://www.dnspark.net/register.
2. Jika sudah daftar silahkan login.
3. Pilih menu “DNS Hosting” (disebelah kiri). Kemudian pilih “Add Domains”
4.Beri tanda centang kotak “DNS Hosting – Free” lalu Isikan nama domain yang sudah km beli di kolom “Enter new domain” (tanpa www).
5. Kemudian Klik tombol “Add Now”
6. Jika berhasil maka nama domainmu akan muncul di “Domain List” (pojok kiri bawah)
7. Klik domain km untuk melakukan pengaturan selanjutnya.
8. Pada Dropdown “Type” pilih “CNAME”.
9. Pada Kolom “Alias Name” isikan www (sebenarnya itu bisa diisi apa saja, tp untuk domain utam sebaiknya diisi “www”).
10. Kemudian untuk destination name isikan ghs.google.com (untuk blogspot).
11. Jika sudah klik tombol “Update All”

Untuk proses setting DNS sudah selesai.

Bagi yang sudah punya “DNS Managed” sendiri di domainnya, cara settingnya seperti ini:
– Masuk ke “Managed DNS” Trus Pilih “CNAME Records”
– Kemudina klik tombol “Add CNAME Records”
– Untuk kolom “Host Name” diisi dengan “www”
– Untuk Kolom “Value” pilih yg bagian bawah kemudian isi dengan “ghs.google.com”
– Kemudian Klik tombol “Add record”

Selesai deh…

* SETTING NS (NAME SERVER)
Bagi yang sudah memiliki “Mange DNS Service” sendiri di domainnnya maka langkah berikut ini tidak perlu dilakukan. Tapi jika kamu menggunakan layanan DNS Manger dari dnspark.net, maka kamu harus merubah “Name Server” di domain manager kamu. Bagi yang membeli domain dari dodoldomain.net maka langkah-langkahnya adalah seperti berikut ini, (bagi yang beli ditempat lain saya rasa hampir sama langkah2nya)

1. Login di dodoldomain.net kemudian pilih “My Account”
2. Jika sudah maka kamu akan berada dalam kawasan “admin area” domainmu.
3. Pilih menu “Domain –> List Last 10”
4. Domain kamu akan terlihat di “List of Domain”
5. Klik link “Domain Name –> Click to Manage”

6 Kemudian klik tombol “Modify Name Server”.

7 Isikan name server berikut kedalam kolom “Name Server1, Name Server2, Name Server3, Name Server4, Name Server5” kemudian klik tombol “Submit”

ns1.dnspark.net
ns2.dnspark.net
ns3.dnspark.net
ns4.dnspark.net
ns5.dnspark.net

Nah urusan dengan si “Name Server” Sudah Selesai

* SETTING PUBLISHING DI BLOGGER
Nha sekarang tinggal langkah terakhir. gini langkahnya :

1. Login di blogger. Pilih menu “Setting –> Publishing”
2. Kemudian klik link Switch to : Custom Domain
3. Kemudian klik lagi link Already own a domain? Switch to advanced settings
4. Kemudian isikan nama blog kamu di kolom “Your Domain” (pake www ya, contoh www.kendhin.com)
5. Lalu Klik tombol “Save Setting”

Yak Semua sudah selesai. Jika semua settingan tadi dilakukan dengan benar maka domain kamu yang baru akan aktif sekitar 1-24 jam bahkan bisa nyampe 48 jam.. Jadi sabar aja.

Cara membuat Virtualhost pada XAMPP Windows

Sudah lama saya ingin membuat virtualhost di xampp yang sudah terinstall di komputer saya, akhirnya setelah browsing di mbah google saya menemukan tutorialnya, dan sekarang saya ingin membaginya.

Pengertiannya, Virtualhost adalah : Host buatan atau simulasi host pada server apache atau localhost. Contoh anda harus mengakses website anda dengan http://localhost/webdevelopmentbali.com dengan Virtualhost alamat website anda menjadi http://webdevelopmentbali.com mudah bukan ??
Tentu ini akan memudahkan anda bagi yang mempunyai banyak pekerjaan dalam membuat website, terlebih Webdeveloper.

Baiklah langsung saja bagaimana kita akan membahas Cara membuat Virtualhost pada XAMPP Windows

1.Instal XAMPP
2.Buka file host (C:\WINDOWS\system32\drivers\etc)

Copyright (c) 1993-1999 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a ‘#’ symbol.
#
# For example:
#
# 102.54.94.97 rhino.acme.com # source server
# 38.25.63.10 x.acme.com # x client host

127.0.0.1 localhost

3.Lalu tambahkan virtual host IP 127.0.0.1 webdevelopmentbali.com di dalam file tersebut (seperti terlihat dibawah ini)

# Copyright (c) 1993-1999 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a ‘#’ symbol.
#
# For example:
#
# 102.54.94.97 rhino.acme.com # source server
# 38.25.63.10 x.acme.com # x client host

127.0.0.1 localhost
127.0.0.1 webdevelopmentbali.com

Kalian juga bisa menambahkan virtualhost lebih dari satu, ulangi langkah ke tiga jika ingin menambahkan virtualhost lagi.

 

4. Buka file httpd.conf (C:\xampp\apache\conf), lalu setting directory permission supaya bisa diakses oleh siapapun.(lihat bagian bawah ini)

Cari kode dibawah:


Options FollowSymLinks
AllowOverride None
Order deny,allow
Deny from all

Lalu ganti dengan kode dibawah:


Options Indexes FollowSymLinks Includes ExecCGI
AllowOverride All
Order allow,deny
Allow from all

Save file tersebut.

5. Lalu buka lagi file httpd-vhosts.conf (C:\xampp\apache\conf\extra), tambahkan ServerName dan DocumentRoot pada file tersebut. (lihat dibawah)
Cari ##NameVirtualHost,  seperti dibawah:

##NameVirtualHost *:80

Hilangkan tanda ## sehingga akan terlihat seperti dibawah ini::

NameVirtualHost *:80

Tambahkan virtualhost Anda yang terdiri dari ServerName dan DocumentRoot.



#VirtualHost Anda 

DocumentRoot C:/xampp/htdocs/belajar-web.com
ServerName belajar-web.com

 

#Untuk membedakan localhost dengan virtualHost Anda:

DocumentRoot C:/xampp/htdocs
ServerName localhost

Jangan lupa untuk save

6. Langkah terakhir yaitu, membuat folder dengan nama file webdevelopmentbali.com di C:\xampp\htdocs