Adsense Indonesia

Rabu, 01 Juli 2015

Cara Membuat Website OpenCart di XAMPP

Hi all, hari ini saya akan membahas cara membuat website OpenCart di XAMPP. Apa itu OpenCart?

OpenCart adalah sistem open source yang berbasiskan bahasa pemograman PHP, yang merupakan
solusi perdagangan elektronik (e-commerce) untuk berdagang melalui internet dengan kemampuan untuk membuat bisnis online sendiri dengan website dan dengan biaya minimal (open source).
Berikut adalah alamat untuk mendownload opencart-2.0.1.1

Jika anda telah memiliki program XAMPP di komputer anda, buka program XAMPP anda, dan nyalakan beberapa fungsi hingga terlihat seperti gambar berikut ini. Jika anda belum memiliki program XAMPP di komputer anda, silahkan lihat disini.


Langkah berikutnya adalah membuat database untuk website kita dengan cara klik tombol "Admin", seperti pada gambar berikut ini.


Kemudian klik tombol "Databases" seperti pada gambar berikut ini.


Selanjutnya, masukkan nama database untuk website anda dan klik tombol "Create" hingga seperti pada gambar berikut ini.


Setelah berhasil membuat database, langkah berikutnya adalah buatlah sebuah folder baru di "C:\xampp\htdocs\" dengan nama website yang diinginkan seperti pada contoh gambar berikut ini. Disini saya akan menggunakan "test" sebagai nama website saya.


Selanjutnya copy file OpenCart v2.0.1.1 ke dalam folder "test" dan extract file tersebut.


Selanjutnya pindahkan file dan folder yang terdapat di dalam folder "C:\xampp\htdocs\test\opencart-2.0.1.1\upload" ke "C:\xampp\htdocs\test". Kemudian hapus folder "C:\xampp\htdocs\test\opencart-2.0.1.1" beserta isinya, hingga terlihat seperti gambar contoh berikut.


Langkah selanjutnya adalah buka program browser anda (Firefox Mozilla / Google Chrome / Internet Explorer), kemudian buka alamat web berikut "http://localhost/test" atau "http://localhost/[nama folder website anda]". Klik tombol "CONTINUE", seperti yang terlihat di gambar berikut ini.


Jika pada halaman 2/4, anda menemui status "Missing" seperti pada gambar berikut ini, maka anda harus merubah nama file "config-dist.php" pada folder "C:\xampp\htdocs\test\admin\" dan "C:\xampp\htdocs\test" menjadi "config.php". Kemudian klik tombol "BACK" hingga kembali ke halaman sebelumnya, kemudian klik tombol "CONTINUE" lagi.


Jika pada halaman 2/4 anda terlihat seperti gambar berikut ini, maka langkah selanjutnya adalah klik tombol "CONTINUE".


Pada halaman 3/4, anda akan diminta untuk memasukkan beberapa data konfigurasi, yaitu :
  1. DB Driver :
  2. Hostname  :
  3. Username  :
  4. Password   :
  5. Database   :
  6. Prefix        :

  1. Username :
  2. Password  :
  3. E-Mail      :
Setelah memasukkan data tersebut, klik tombol "CONTINUE". Berikut adalah gambar contoh halaman 3/4 yang telah diisi.


Jika anda berhasil memasuki halaman 4/4 seperti yang terlihat pada gambar berikut ini, maka anda telah berhasil membuat website OpenCart anda di XAMPP.


Langkah berikutnya adalah menghapus folder "install" yang terletak di "C:\xampp\htdocs\test". Untuk mengetahui apakah website OpenCart anda telah berhasil dibuat, anda dapat mencobanya dengan cara membuka alamat website anda "http://localhost/test" atau "http://localhost/[nama folder website anda]" dan hasilnya akan terlihat seperti gambar berikut ini.


Demikian cara membuat website OpenCart di XAMPP. Selamat mencoba. Semoga bisa membantu.

Selasa, 30 Juni 2015

Cara Instalasi XAMPP di Windows 7

Hi all, hari ini saya akan membahas cara instalasi XAMPP di Windows 7Apa itu XAMPP?

XAMPP adalah perangkat lunak bebas, yang mendukung banyak sistem operasi, merupakan kompilasi dari beberapa program. Fungsinya adalah sebagai server yang berdiri sendiri (localhost), yang terdiri atas program Apache HTTP Server, MySQL database, dan penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl. Nama XAMPP merupakan singkatan dari X (empat sistem operasi apapun), Apache, MySQL, PHP dan Perl. Program ini tersedia dalam GNU General Public License dan bebas, merupakan web server yang mudah digunakan yang dapat melayani tampilan halaman web yang dinamis. Untuk mendapatkanya dapat mendownload langsung dari web resminya.
Berikut adalah link untuk mendownload program xampp-win32-5.5.24-0-VC11-installer.exe

Setelah selesai download program installer XAMPP, buka program installer tersebut dengan cara klik dua kali ataupun dengan cara klik kanan pada program installer tersebut kemudian klik "Open". Jika anda mendapatkan tampilan seperti di bawah ini, silahkan klik "Yes". Tampilan pertanyaan tersebut hanya memberitahukan bahwa antivirus anda sedang nyala dan dalam kasus tertentu akan membuat proses instalasi menjadi lebih lambat.


Jika anda mendapatkan tampilan seperti di bawah ini setelah klik "Yes", acuhkan saja dengan klik tombol "OK" karena itu hanya sebuah peringatan untuk Windows 7 dengan sistem operasi 64-bit (versi x64).


Gambar berikut ini merupakan tampilan awal instalasi program XAMPP. Langkah selanjutnya adalah klik tombol "Next".


Setelah itu, langkah selanjutnya adalah memilih komponen yang ingin diikutsertakan kemudian klik tombol "Next", seperti yang terlihat pada gambar di bawah ini. Pada bagian ini, pilihan komponen akan saya biarkan pada kondisi standar.


Langkah berikutnya adalah menentukan letak folder program XAMPP, kemudian klik tombol "Next", seperti yang terlihat pada gambar di bawah ini. Pada bagian ini, letak folder program XAMPP akan saya biarkan pada kondisi standar.


Jika sebelumnya kita pernah menginstall program XAMPP dan belum menghapus folder tersebut, maka akan muncul peringatan seperti gambar di bawah ini. Klik tombol "OK" jika anda mendapatkan peringatan ini, kemudian hapuslah folder "xampp" tersebut. Setelah itu, klik tombol "Next" seperti pada gambar di atas.


Berikutnya anda akan mendapatkan tampilan seperti gambar di bawah ini. Pada kolom centang, anda diperkenankan untuk tidak mencentang kolom tersebut. Jika anda mencetang kolom tersebut, maka browser anda akan secara otomatis terbuka dan mengunjungi alamat website "https://bitnami.com/xampp". Klik tombol "Next" untuk memasuki langkah berikutnya.


Selanjutnya anda akan mendapatkan tampilan seperti gambar di bawah ini. Pada bagian ini dijelaskan bahwa program XAMPP telah siap untuk diinstall di komputer anda. Klik tombol "Next" untuk menginstall program XAMPP.


Selanjutnya anda akan mendapatkan tampilan seperti gambar di bawah ini. Pada bagian ini, anda harus menunggu hingga proses instalasi selesai dengan sempurna. Jangan klik tombol "Cancel" jika anda tidak ingin membatalkan proses instalasi ini.


Jika proses instalasi telah selesai, maka anda akan mendapatkan tampilan seperti gambar di bawah ini. Jika anda ingin mengatur panel pengaturan XAMPP secepatnya, silahkan centang pada kolom centang. Jika tidak, silahkan kosongkan kolom centang. Langkah terakhir adalah klik tombol "Finish".


Berikut ini adalah tampilan awal dari panel pengaturan XAMPP.


Demikian cara instalasi XAMPP di Windows 7Selamat mencoba. Semoga bisa membantu.

Selasa, 23 Juni 2015

Cara Membuat Tombol Back To Top

Hi all, hari ini saya akan membahas cara membuat tombol back to top di blogger. Untuk membuat tombol back to top tentunya kita harus menguasai CSS dan JavaScript. Disini saya akan membahas cara yang mudahnya, yaitu anda hanya perlu copy dan paste saja. Mau tahu caranya?

Pertama-tama, Login ke akun blogger anda. Masuk ke "Ikhtisar" blog anda. klik "Template", kemudian klik "Edit HTML", seperti yang ada di gambar berikut.


Kemudian cari kode <head> dengan cara tekan CTRL + F, ketik <head>, kemudian tekan Enter. Masukkan kode jQuery berikut ke baris di bawah kode <head>.

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

Gambar di bawah adalah contoh kode jQuery yang telah dimasukkan ke baris di bawah kode <head>.


Setelah memasukkan kode jQuery dan klik tombol "Simpan template", langkah berikutnya adalah klik "Tata Letak" dan klik "Tambahkan Gadget" pada kolom mana saja.


Setelah klik "Tambahkan Gadget", maka akan muncul tampilan berikut ini.


Langkah berikutnya adalah klik "HTML/JavaScript", maka akan muncul tampilan berikut ini.


Kosongkan kolom "Judul" dan masukkan kode di bawah ini ke kolom "Konten". Langkah terakhir adalah klik "Simpan".

<style>
.mbw-back-to-top {
    position: fixed;
    bottom: 2em;
    right: 10px;
    text-decoration: none;
    padding: 1em;
    display: none;
    cursor:pointer;
}
</style>
<img class="mbw-back-to-top" src="http://3.bp.blogspot.com/-OuNomk4vBpo/VYPqI8D6f0I/AAAAAAAAB6c/tayzirrlXIY/s1600/back-to-top-button.png" />
<script type="text/javascript">
/***** hardi-ads.blogspot.com *****/
jQuery(document).ready(function() {
    var offset = 220;
    var duration = 500;
    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('.mbw-back-to-top').fadeIn(duration);
        } else { //www.mybloggersworld.com
            jQuery('.mbw-back-to-top').fadeOut(duration);
        }
    });

    jQuery('.mbw-back-to-top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;
    })
});
</script>

Demikian cara membuat tombol back to top. Semoga bisa membantu.

Senin, 22 Juni 2015

Cara Membuat Dropdown Menu di Blogger

Hi all, hari ini saya akan membahas cara membuat dropdown menu di blogger. Untuk membuat dropdown menu tentunya kita harus menguasai CSS dan HTML, ada juga yang menggunakan JavaScript. Namun semua itu bisa teratasi dengan hanya edit, copy, dan paste. Mudah bukan? Bagaimanakah caranya?

Pertama-tama, Login ke akun blogger anda. Masuk ke "Ikhtisar" blog anda, kemudian klik "Tata Letak" dan klik "Tambahkan Gadget" pada kolom yang berada di bawah kolom "Header", jika kita ingin meletakkan Menu di bawah kolom "Header".


Setelah klik "Tambahkan Gadget", maka akan muncul tampilan berikut ini.


Langkah berikutnya adalah klik "HTML/JavaScript", maka akan muncul tampilan berikut ini.


Kosongkan kolom "Judul" dan masukkan kode di bawah ini ke kolom "Konten". Sebelum memasukkan kode berikut ke kolom "Konten", apabila anda ingin mengubah nama dan link menu, silahkan ubah kode yang diberi warna hijau. Untuk penulisan link, ditulis di dalam tanda petik pada <a href="tulis disini">, sedangkan untuk nama menu, ditulis di dalam <span>tulis disini</span>. Langkah terakhir adalah klik "Simpan" dan Selamat Anda telah berhasil membuat dropdown menu.

<style type="text/css">@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);/* Menu CSS */#cssmenu,#cssmenu > ul{background:url(http://1.bp.blogspot.com/-LdyJq-fpyoo/VYQXmjJp1II/AAAAAAAAB6s/IAM8jmu3-Ec/s1600/highlight-bg.png) repeat;padding-bottom:3px;font-family:'Open Sans',sans-serif;font-weight:600}#cssmenu:before,#cssmenu:after,#cssmenu > ul:before,#cssmenu > ul:after{content:'';display:table}#cssmenu:after,#cssmenu > ul:after{clear:both}#cssmenu{width:auto;zoom:1}#cssmenu > ul{background:url(http://3.bp.blogspot.com/-bo_MND2GBqQ/VYQYHUF0PxI/AAAAAAAAB6w/WUds5iY6XjY/s1600/menu-bg.png) repeat;margin:0;padding:0;position:relative}#cssmenu > ul li{margin:0;padding:0;list-style:none}#cssmenu > ul > li{float:left;position:relative}#cssmenu > ul > li > a{padding:23px 26px;display:block;color:white;font-size:13px;text-decoration:none;text-transform:uppercase;text-shadow:0 -1px 0 #0d0d0d;text-shadow:0 -1px 0 rgba(0,0,0,0.7);line-height:18px}#cssmenu > ul > li:hover > a{background:url(http://1.bp.blogspot.com/-LdyJq-fpyoo/VYQXmjJp1II/AAAAAAAAB6s/IAM8jmu3-Ec/s1600/highlight-bg.png) repeat;text-shadow:0 -1px 0 #97321f;text-shadow:0 -1px 0 rgba(122,42,26,0.64)}#cssmenu > ul > li > a > span{line-height:18px}#cssmenu > ul > li.active > a,#cssmenu > ul > li > a:active{background:url(http://3.bp.blogspot.com/-AMDmo-EeQl0/VYQY1YUNKUI/AAAAAAAAB64/5EmbV7Oz-C8/s1600/hover.png) repeat}/* Childs */#cssmenu > ul ul{opacity:0;visibility:hidden;position:absolute;top:120px;background:url(http://3.bp.blogspot.com/-bo_MND2GBqQ/VYQYHUF0PxI/AAAAAAAAB6w/WUds5iY6XjY/s1600/menu-bg.png) repeat;margin:0;padding:0;z-index:-1}#cssmenu > ul li:hover ul{opacity:1;visibility:visible;margin:0;color:#000;z-index:2;top:64px;left:0}#cssmenu > ul ul:before{content:'';position:absolute;top:-10px;width:100%;height:20px;background:transparent}#cssmenu > ul ul li{list-style:none;padding:0;margin:0;width:100%}#cssmenu > ul ul li a{padding:18px 26px;display:block;color:white;font-size:13px;text-decoration:none;text-transform:uppercase;width:150px;border-left:4px solid transparent;-webkit-transition:all 0.35s ease-in-out;-moz-transition:all 0.35s ease-in-out;-ms-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out}#cssmenu > ul ul li a:hover{border-left:4px solid #d64e34;background:url(http://3.bp.blogspot.com/-AMDmo-EeQl0/VYQY1YUNKUI/AAAAAAAAB64/5EmbV7Oz-C8/s1600/hover.png) repeat}#cssmenu > ul ul li a:active{background:url(http://3.bp.blogspot.com/-bo_MND2GBqQ/VYQYHUF0PxI/AAAAAAAAB6w/WUds5iY6XjY/s1600/menu-bg.png) repeat}</style><a href="http://hardi-ads.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"><img src="http://2.bp.blogspot.com/-_1qDzRElgnI/VYeUxkCe0uI/AAAAAAAAB7M/_xogkbKR3iU/s1600/blank.gif" alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://hardi-ads.blogspot.com/" rel="dofollow" target="_blank" title="CSS Drop Down Menu"><img src="http://2.bp.blogspot.com/-_1qDzRElgnI/VYeUxkCe0uI/AAAAAAAAB7M/_xogkbKR3iU/s1600/blank.gif" alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://hardi-ads.blogspot.com/" rel="dofollow" target="_blank" title="Pure CSS Dropdown Menu"><img src="http://2.bp.blogspot.com/-_1qDzRElgnI/VYeUxkCe0uI/AAAAAAAAB7M/_xogkbKR3iU/s1600/blank.gif" alt="Pure CSS Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><!-- Dont edit this CSS Drop Down Menu code or it will not work -->

<!-- ubah Link menu Anda -->

<div id="cssmenu">
<ul>
<li class="active"><a href="http://hardi-ads.blogspot.com/"><span>Beranda</span></a></li>
<li class="has-sub"><a href="#"><span>Menu 1</span></a>
<ul>
<li><a href="#"><span>Menu 1 1</span></a></li>
<li><a href="#"><span>Menu 1 2</span></a></li>
<li class="last"><a href="#"><span>Menu 1 3</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Menu 2</span></a>
<ul>
<li><a href="#"><span>Sub Menu 1</span></a></li>
<li class="last"><a href="#"><span>Sub Menu 2</span></a></li>
</ul>
</li>
<li class="last"><a href="#"><span>Tentang Saya</span></a></li>
</ul>
</div>

Demikian cara membuat dropdown menu. Semoga bisa membantu.

Kamis, 18 Juni 2015

Cara Membuat Blog di Blogspot

Blog pada dasarnya disebut sebagai Web Blog yang merupakan salah satu aplikasi web yang mana postingan atau artikel yang diposting didalam blog sering sekali berurutan, yaitu dari tulisan terbaru hingga tulisan yang paling lama.

Memiliki sebuah blog merupakan hal menyenangkan, dimana kita dapat berbagi apapun yang kita suka. Apabila kita rajin dan serius merawat blog kita, tidak tertutup kemungkinan bahwa kita dapat berpenghasilan melalui blog kita.

Membuat blog di Blogspot adalah hal yang gratis. Pertama-tama silahkan login menggunakan akun Google. Jika belum memiliki akun Google (akun Gmail), silahkan menuju tutorial ”Cara Membuat Akun Google“. Setelah anda mempunyai akun Google (akun Gmail), silahkan login ke akun anda.

login


Setelah anda login, silahkan kunjungi www.blogger.com, maka anda akan memasuki halaman berikut ini.

create blog

Klik tombol "Blog Baru". Kemudian anda harus mengisi Judul, Alamat, dan memilih Template. Isilah Judul dan Alamat blog sesuai dengan keinginan anda.  Alamat blog yang sudah terisi, akan kemudian diperiksa ketersediaannya. Alamat blog sering kali tidak tersedia karena sudah digunakan oleh orang lain. Oleh karena itu, silahkan isi Alamat blog anda hingga muncul tulisan "Alamat blog ini tersedia". Alamat blog dapat diisi dengan kombinasi antara huruf, angka, dan tanda minus (-). Setelah itu, pilihlah Template yang anda inginkan. Template yang sudah dipilih dapat diubah lagi nanti jika anda menginginkannya.

create blog 1

Langkah terakhir adalah klik tombol "Buat blog!". Dengan begitu, blog anda sudah jadi. Di bawah ini adalah tampilan blog yang baru dibuat.

blog created

Demikian cara membuat blog di blogspot. Semoga dapat membantu.

Rabu, 17 Juni 2015

Cara Membuat Akun Google

Akun Google merupakan salah satu akun yang sangat penting. Mengapa demikian? Karena dengan akun Google, kita dapat menikmati fasilitas-fasilitas yang telah disediakan oleh Google seperti Gmail untuk email, Youtube untuk melihat dan berbagi video, Google Drive untuk menyimpan file dan data, Google Plus sebagai sosial media khusus pengguna Google, dan masih banyak lagi.

Berikut ini adalah cara membuat akun Google:
Pertama-tama kita harus kunjungi www.google.co.id, kemudian klik tombol "Masuk"

google

Kemudian klik "Buat akun" seperti pada gambar di bawah ini.

baru

Setelah itu, kita akan memasuki halaman untuk mengisi data diri seperti gambar di bawah ini.

data 1
data 2

Masukkan data anda :
  • Nama depan : Nama depan anda
  • Nama belakang : Nama belakang anda
  • Pilih nama pengguna anda : Nama yang akan menjadi nama akun Google anda. Nama ini akan diperiksa ketersediaannya, sehingga jika sudah terpakai maka anda harus mengguna nama lain yang masih tersedia. Penulisan nama ini dapat menggunakan kombinasi antara huruf, angka, dan titik. Huruf besar dan huruf kecil tidak berpengaruh dalam penulisan nama ini.
  • Buat sandi : Masukkan kata sandi anda. Kata sandi yang baik dan aman adalah kata sandi yang menggunakan kombinasi antara huruf besar, huruf kecil, angka, dan tanda baca.
  • Konfirmasi sandi anda : Masukkan kembali kata sandi anda
  • Tanggal lahir : Masukkan tanggal lahir anda
  • Gender : Pilihlah jenis kelamin anda
  • Ponsel : Masukkan nomor telepon genggam (nomor handphone) anda
  • Buktikan bahwa anda bukan robot : Masukkan teks sesuai dengan gambar yang muncul. Jika gambar tidak jelas atau anda susah untuk mengidentifikasi teks di gambar, klik tombol yang bergambar panah lingkaran yang terdapat persis di samping kanan kolom teks hingga anda mendapatkan gambar yang anda mudah mengidentifikasi teks-nya.
  • Lokasi : Masukkan lokasi negara keberadaan anda

Berikutnya adalah centang kolom "Saya menyetujui Persyaratan Layanan dan Kebijakan Privasi Google", kemudian klik tombol "Langkah berikutnya".

Berikutnya anda akan diminta untuk menambahkan foto profil anda. Tahap ini dapat kita lewati dengan klik tombol "Langkah berikutnya".

Selanjutnya akan ada pesan bahwa anda telah berhasil. Anda dapat klik "Lanjutkan ke Gmail" jika anda ingin masuk langsung ke inbox.

Demikian cara membuat akun Google. Semoga dapat membantu.