D2D :]

Membuat Float Menu Dengan Logo

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpa_QQ0RhQ9b9DDvEs7JQMyv4FEkLiyZ0s06o7DsEx4L80K7UpcH1yJB9yw14IU7wLjsbz8OY6UdyVQf905cmc6GaIFmtLtQ2FOGB35Vx6xWABML-bx34giLUBGdGMtRPQYF1-U_32ahJU/s1600/Fixed+Menu.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Float Menu Dengan Logo" border="0" height="202" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpa_QQ0RhQ9b9DDvEs7JQMyv4FEkLiyZ0s06o7DsEx4L80K7UpcH1yJB9yw14IU7wLjsbz8OY6UdyVQf905cmc6GaIFmtLtQ2FOGB35Vx6xWABML-bx34giLUBGdGMtRPQYF1-U_32ahJU/s320/Fixed+Menu.jpg" title="Membuat Float Menu Dengan Logo" width="320" /></a></div>Membuat Float Menu Dengan Logo | Dari iseng - lihat koleksi template, suka juga deh dengan template yang namanya Dazzling dari templateism, tapi cuma suka bagian menunya, karen itu, sebisa mungkin aku cloning. Dan akhirnya berhasil. Dan yang anda lihat di menu float di template ini adalah cloning dari menu float Dazzling. Hanya saya ubah bagian warna dengan rgba bertransparan.<br /><br /><h3>HTML</h3><pre><div id='float-menuwrapper'><br /><div id='float-menuwrap'><br /><div id='float-menu'><br /><div class='logo'><br />  <a href='/'><img alt='Home' border='0' src='url logo' style='padding:0px;'/></a><br /></div><br /><ul><br /><li><a href='url anda' rel='nofollow' target='_blank'>Ads</a></li><br />  <li><a href='url anda' rel='nofollow' target='_blank'>About</a></li><br />  <li><a href='url anda' rel='nofollow' target='_blank'>Contact</a></li><br /><li><a href='url anda' rel='nofollow' target='_blank'>Sitemap</a></li><br /><li><a href='url anda' rel='nofollow' target='_blank'>Home</a></li><br /></ul><br /></div><br /></div><br /></div></pre><h3>CSS</h3><pre>#float-menuwrapper{background-color: rgba(0, 0, 0, 0.6);box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.9) inset;width:auto;margin-bottom:0px;padding:0 auto;vertical-align: baseline;border-width: 1px;border-style: solid;border-right: 1px solid rgb(17, 17, 17);border-left: 1px solid rgb(17, 17, 17);-moz-border-top-colors: none;-moz-border-right-colors: none;-moz-border-bottom-colors: none;-moz-border-left-colors: none;border-image: none;border-color: rgba(255, 255, 255, 0.08) rgb(17, 17, 17) rgba(255, 255, 255, 0.05);box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.9), 0px 0px 20px rgba(0, 0, 0, 0.7) inset;<br />height: 70px;width:100%;position:fixed;top:0;left:0;z-index:999;overflow:hidden;}<br />#float-menuwrap{width:1100px;margin:0 auto;}<br />#float-menu{width:100%}<br />#float-menu ul{list-style: none;margin-right:250px}<br />#float-menu ul li{float:right}<br />#float-menu ul li a{line-height:34px;padding:5px 0;margin-left:25px;color:#999;font-size:18px;text-transform:uppercase;display:block;text-decoration:none;font-family:'Coda';font-weight:bold;}<br />#float-menu ul li a:hover{background: none repeat scroll 0% 0% transparent; color: rgb(198, 235, 4);<br />text-shadow: 0px 0px 20px rgb(198, 235, 4), 0px 0px 30px rgb(198, 235, 4), 0px 0px 40px rgb(198, 235, 4);}<br />.logo{float:left;background:none;}<br />.logo img{margin-top:-18px;}</pre><br /><h3>Cara Memasang</h3><ol><li>Letakkan kode HTML dibawah </head></li><li>Letakkan kode CSS di atas ]]></b:skin> </li></ol><blockquote class="tr_bq">Atur letaknya di  #float-menuwrap{margin:0 auto;} ganti sesuai template anda.</blockquote>Selamat Mencoba :D

Membuat Float Menu Dengan Logo

Membuat Float Menu Dengan Logo | Dari iseng - lihat koleksi template, suka juga deh dengan template yang namanya Dazzling dari templateism, ...

Baca selengkapnya »

20.16

Template Blogger Transparan Aja HTML5 & Responsive

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdCZGuvSda54Yc_Y8RvB9iHzimX0oNgydQM7sKFdVhOw4bHdbSTMouSwovga2TPEMuiu6RTmKRHhLyXo76bniieWi1y0fRS5JNu4TiLbn6sBx8jAGHU3m4YgJfb1jLUw16K1UT1m3jsnc-/s1600/Transparan+Aja.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="181" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdCZGuvSda54Yc_Y8RvB9iHzimX0oNgydQM7sKFdVhOw4bHdbSTMouSwovga2TPEMuiu6RTmKRHhLyXo76bniieWi1y0fRS5JNu4TiLbn6sBx8jAGHU3m4YgJfb1jLUw16K1UT1m3jsnc-/s320/Transparan+Aja.jpg" width="320" /></a></div><br />Template Blogger Transparan Aja HTML5 & Responsive | Alhamdulillah jadi juga. Template 3 kolom yang aneh dan tembus pandang. Butuh 3 hari yang panjang......lama sekali,,maklum masih belajar. <i>Template </i><b>blog </b>aneh ini, banyak sekali fiturnya :<br /><ol><li>Menu 3 level</li><li><a href="http://validator.w3.org/check?uri=wampress.blogspot.com&charset=%28detect+automatically%29&doctype=Inline&group=0" target="_blank">HTML5</a> & <a href="http://responsinator.com/?url=wampress.blogspot.com%2F" target="_blank">Responsive </a></li><li>SEO Ready </li><li>Ready 2 Ads 728 x 90 & Ads 468 x 90</li><li>Readmore dengan pseudo elemen, akan lebih terasa menjadi tombol</li><li>Bergaya transparan</li><li>Threaded Comment</li><li>Quick Search dengan <a href="http://www.bocahit.com/2013/07/membuat-quick-search-dengan-json-blogger.html" target="_blank">JSON Blogger</a>, sehingga tidak terlalu berat / lama</li><li>Back to top</li><li><a href="http://www.bocahit.com/2012/08/membuat-artikel-terkait-di-bawah-posting.html" target="_blank">Related Post</a> dengan Jquery  </li><li><a href="http://www.bocahit.com/2012/08/memasang-yahoo-emoticons-di-komentar.html" target="_blank">Emoticon</a> kecil di bagian komentar</li><li><a href="http://www.bocahit.com/2012/11/membuat-breadcrumb-search-engine.html" target="_blank">Breadcrumb</a>  </li><li> Bagus dibuka dengan Mozilla</li><li>Ready Style Button memakai class='button' </li></ol>Nah sekian dari template aneh ini. Jika tertarik silakan di pakai.<br /><br /><div style="text-align: center;"><a class="button" href="http://wampress.blogspot.com/" target="_blank">DEMO</a>                     <a class="button" href="https://www.dropbox.com/s/nrxh9z6y0y8q0mo/Transparan%20Aja.rar" target="_blank">Download</a></div>

Template Blogger Transparan Aja HTML5 & Responsive

Template Blogger Transparan Aja HTML5 & Responsive | Alhamdulillah jadi juga. Template 3 kolom yang aneh dan tembus pandang. Butuh 3 har...

Baca selengkapnya »

22.44

Top 7 Template Wordpress Responsive

Top 7 Template Wordpress Responsive & HTML5 | Salah satu CMS ini, yang paling banyak di gemari para blogger yang suka bermain - main dengan CMS. Selain gratis dan mudah penggunaan, wordpress juga dilengkapi dnegan plugin pendukung SEO. Bukan hanya plugin tetapi juga template (theme) yang berkekuatan responsive pun sekarang menjadi buronan utama. Silakan lihat template wordpress responsive ini...<br /><br /><h3>Ajeeban</h3><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBeHvd_4RBBFRwlM9Ju1yaukp3TWBF66TJXBbNLQuFqnxDPkApQytxLq34zXIQsw22O7WQo2WBkXjqpIvwE4qMWke4N28vs8CVXtVewz0b55Ks3f8C8OfcVtsNm9ohGcEJWtVr1i_S_LPU/s1600/ajeeban-wordpress-template.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Top 7 Template Wordpress Responsive" border="0" height="307" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBeHvd_4RBBFRwlM9Ju1yaukp3TWBF66TJXBbNLQuFqnxDPkApQytxLq34zXIQsw22O7WQo2WBkXjqpIvwE4qMWke4N28vs8CVXtVewz0b55Ks3f8C8OfcVtsNm9ohGcEJWtVr1i_S_LPU/s320/ajeeban-wordpress-template.jpg" title="Top 7 Template Wordpress Responsive" width="320" /></a></div><span id="goog_870593378"></span><span id="goog_870593379"></span><br /><div style="text-align: center;"><span id="goog_870593378"><a class="button" href="http://www.designcart.org/?url=https://www.box.com/s/21krv0ep9lsr70lnnv1n" target="_blank">Download</a>        <a class="button" href="http://www.designcart.org/?url=http://ablethemes.com/aj/" target="_blank">Ilustrasi</a></span></div><br /><h3>Skeleton</h3><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7nLmgZERmVvRwvMHL8JuzN_PjpNzRJozPlcw9uvAhZcn8aVRQMkNzA78ApftruGLjqOj8iCQOb7nXITdI8pTuJ8AtJwvDE697N4lZQ23Z0xRAtgIYlYanpT0CjONCQ_UNEQ8aMnVlWbXa/s1600/skeleton-responsive-wordpress-theme.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Top 7 Template Wordpress Responsive" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7nLmgZERmVvRwvMHL8JuzN_PjpNzRJozPlcw9uvAhZcn8aVRQMkNzA78ApftruGLjqOj8iCQOb7nXITdI8pTuJ8AtJwvDE697N4lZQ23Z0xRAtgIYlYanpT0CjONCQ_UNEQ8aMnVlWbXa/s320/skeleton-responsive-wordpress-theme.jpg" title="Top 7 Template Wordpress Responsive" /></a></div><br /><div style="text-align: center;"><a class="button" href="http://www.designcart.org/?url=https://www.box.com/s/4xl7cd3w17jw51i4tn0u" target="_blank">Download</a>             <a class="button" href="http://www.designcart.org/?url=http://themes.simplethemes.com/skeleton/" target="_blank">Ilustrasi</a></div><br /><h3>Eden Fresh</h3><div class="separator" style="clear: both; text-align: center;"><a href="http://webdesigntunes.com/wp-content/uploads/2013/05/eden-fresh-wp-theme.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Top 7 Template Wordpress Responsive" border="0" height="282" src="http://webdesigntunes.com/wp-content/uploads/2013/05/eden-fresh-wp-theme.png" title="Top 7 Template Wordpress Responsive" width="320" /></a></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><a class="button" href="http://www.designcart.org/?url=https://www.box.com/s/70ae0wgowpuy7x2fua51" target="_blank">Download</a>              <a class="button" href="http://www.designcart.org/?url=http://themes.wpeden.com/eden-fresh/" target="_blank">Ilustrasi</a></div><br /><h3>Heavenly</h3><div class="separator" style="clear: both; text-align: center;"><a href="http://webdesigntunes.com/wp-content/uploads/2013/05/heavenly-wp-theme.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Top 7 Template Wordpress Responsive" border="0" height="320" src="http://webdesigntunes.com/wp-content/uploads/2013/05/heavenly-wp-theme.png" title="Top 7 Template Wordpress Responsive" width="243" /></a></div><br /><div style="text-align: center;"><a class="button" href="http://wpeden.com/product/heavenly-multipurpose-wordpress-theme/" target="_blank">Download</a>               <a class="button" href="http://themes.wpeden.com/heavenly/" target="_blank">Ilustrasi</a></div><br /><h3>Pinbin</h3><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsOssh7IKUDuive0CjkhyphenhyphenJ5VX6qq8DuL_mTTh4seH1_2rco4oRVLmbS-uaorIJ6iFgfphxDcoeHQei8Mee4_vDEia1116Jo2nE2xO8czvAQ3SN4lQkB5r99O8E63MRFqdgOcEgFTrbXkv8/s1600/pinbin-responsive-wordpress-theme.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Top 7 Template Wordpress Responsive" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsOssh7IKUDuive0CjkhyphenhyphenJ5VX6qq8DuL_mTTh4seH1_2rco4oRVLmbS-uaorIJ6iFgfphxDcoeHQei8Mee4_vDEia1116Jo2nE2xO8czvAQ3SN4lQkB5r99O8E63MRFqdgOcEgFTrbXkv8/s320/pinbin-responsive-wordpress-theme.jpg" title="Top 7 Template Wordpress Responsive" /></a></div><br /><div style="text-align: center;"><a class="button" href="http://www.designcart.org/?url=https://www.box.com/s/ycilyeb768n2u6liw8od" target="_blank">Download</a>              <a class="button" href="http://www.designcart.org/?url=http://colorawesomeness.com/pinbin/" target="_blank">Ilustrasi</a></div><br /><h3>Corpo</h3><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDN13q7035s6vq5iQbsqL4YnU1DGnUkDPW0AY37cwgfTgrTP8DV2W0TpDsLzznhgz9eAfi6cEJjQjTPjgQiBz1ascu0CtGzwGdHFgMob3N1_idMAY-rw7-AbME1aaiOPghavTQcwor20Ps/s1600/corpo-wordpress-theme.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Top 7 Template Wordpress Responsive" border="0" height="299" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDN13q7035s6vq5iQbsqL4YnU1DGnUkDPW0AY37cwgfTgrTP8DV2W0TpDsLzznhgz9eAfi6cEJjQjTPjgQiBz1ascu0CtGzwGdHFgMob3N1_idMAY-rw7-AbME1aaiOPghavTQcwor20Ps/s320/corpo-wordpress-theme.jpg" title="Top 7 Template Wordpress Responsive" width="320" /></a></div><br /><div style="text-align: center;"><a class="button" href="http://www.designcart.org/?url=https://www.box.com/s/65j4ts2bv3ogpgaiz9xk" target="_blank">Download</a>                <a class="button" href="http://www.designcart.org/?url=http://webtuts.pl/test/corpo/" target="_blank">Ilustrasi</a></div><br /><h3>Snaps</h3><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIVC7iDvduBmt1jEdj_z8GmxokfTqu96J4P3f3ZdPwl5GhCGIiGUdSjX4MWd9AHGRJq65Ja0qmbV83nvDntNpQtCm67omHoAcv5bsB05Aln9Lsys3ksD3vOrK289zPWNuW0l7NGPRTZV9-/s1600/snaps-gallery-wordpress-theme.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Top 7 Template Wordpress Responsive" border="0" height="252" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIVC7iDvduBmt1jEdj_z8GmxokfTqu96J4P3f3ZdPwl5GhCGIiGUdSjX4MWd9AHGRJq65Ja0qmbV83nvDntNpQtCm67omHoAcv5bsB05Aln9Lsys3ksD3vOrK289zPWNuW0l7NGPRTZV9-/s320/snaps-gallery-wordpress-theme.jpg" title="Top 7 Template Wordpress Responsive" width="320" /></a></div><br /><div style="text-align: center;"><a class="button" href="http://www.designcart.org/?url=https://www.box.com/s/2e713vhkukmpf6s1h6s6" target="_blank">Donwload</a>                <a class="button" href="http://www.designcart.org/?url=http://demo.graphpaperpress.com/snaps/" target="_blank">Ilustrasi</a></div><br />Happy Blogging !!

Top 7 Template Wordpress Responsive

Top 7 Template Wordpress Responsive & HTML5 | Salah satu CMS ini, yang paling banyak di gemari para blogger yang suka bermain - main den...

Baca selengkapnya »

22.39

Cara Upload Website Dari Localhost Ke Id Hostinger (Update + Database)

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBFMVLXfQHvbo1igBm0ZyMShzhDwGLVT5IKVrFuKUcSl-FmzbwkrML-ix-TRDkHEsykX5D5EGaamdT0iFcUSl4qemnu9WytPVX_MIGaLu4By7Okcj6ENL-1TcA3KaaF9z7Zd0ER_ezkKh8/s1600/Upload+Idhostinger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBFMVLXfQHvbo1igBm0ZyMShzhDwGLVT5IKVrFuKUcSl-FmzbwkrML-ix-TRDkHEsykX5D5EGaamdT0iFcUSl4qemnu9WytPVX_MIGaLu4By7Okcj6ENL-1TcA3KaaF9z7Zd0ER_ezkKh8/s320/Upload+Idhostinger.jpg" width="320" /></a></div><br />Cara Upload Website Dari Localhost Ke Id Hostinger (Update + Database) | Kalau minggu lalu aku share, bagaimana kita mengupload atau memindahkan web yang sudah kita bengun di localhost ke penyedia layanan hosting. <a href="http://www.bocahit.com/2013/06/cara-valid-upload-website-ke-hosting.html" target="_blank">Klik Disini</a>, untuk anda yang memakai 000webshost.<br /><br />Giliran Id Hostinger... apa yang mereka miliki ? Sebelumnya memang ini diperuntukkan bagi kamu yang sedang ada tugas, khususnya bidang Pemrograman Web.<br /><br /><h3>New Generation</h3><br />Lupakanlah semua stereotip tentang layanan web hosting gratis. Hostinger berbeda, kami memberikan banyak fitur, layanan web hosting yang handal serta tim support yang fantastis. Uptime server kami adalah 99,9% dan kami berterimakasih kepada teknologi cloud computing yang kami gunakan. (sumber : idhostinger.com)<br /><br /><h3>No Ads, No Banner</h3><br />Tidak ada iklan teks, pop-ups maupun banner yang sangat mengganggu. Website Anda 100 persen bebas dari iklan kami selamanya!(sumber : idhostinger.com)<br /><br /><h3>Easy Website Builder</h3><br />Anda dapat membuat website dengan sangat mudah. Bahkan seorang pemula pun dapat membuat website yang bagus dengan menggunakan website builder kami. Silahkan pilih satu dari 100 template profesional kami.(sumber : idhostinger.com)<br /><br /><h3>Support PHP & Mysql</h3><br />Kami mendukung PHP dan MySQL tanpa batasan. PHP kami hadir dengan semua fungsi dan fitur diaktifkan. Anda dapat mengubah versi PHP Anda dengan satu klik dan mengelola database dengan tool PhpMyAdmin.(sumber : idhostinger.com)<br /><br /><h3>Script Auto Installer</h3><br />Hanya dengan melakukan beberapa klik, Anda dapat menginstall Wordpress, Joomla, PrestaShop, phpBB, Drupal, and script-script lainnya. Sebuah website profesional pun dapat Anda buat hanya dalam beberapa menit saja!  (sumber : idhostinger.com)<br /><br /> Sedikit penjelasan tentang Idhostinger, mari mulai membangun website.<br /><br /><h3>Langkah 1 | Signup</h3><br />Tentu anda harus terdaftar menjadi afiliasi idhostinger terlebih dulu. (Recomendasi saya : gunakan password yang sama untuk pendaftaran berikutnya)<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh92aDSYB_ithWXaCQCpFrxan3zEgzx7B-tfEm39ySktThq11Zt3nrKSU4uIpNFZeUnCjT-NSYxary8sw7ZQEn1lGs-6db3lRsRsgdf1l3SQ58nkjG7ChaLGVu-WkCA1IsVWh4KVyn0RZOk/s1600/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Upload Website Dari Localhost Ke Id Hostinger (Update + Database)" border="0" height="282" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh92aDSYB_ithWXaCQCpFrxan3zEgzx7B-tfEm39ySktThq11Zt3nrKSU4uIpNFZeUnCjT-NSYxary8sw7ZQEn1lGs-6db3lRsRsgdf1l3SQ58nkjG7ChaLGVu-WkCA1IsVWh4KVyn0RZOk/s320/1.PNG" title="Cara Upload Website Dari Localhost Ke Id Hostinger (Update + Database)" width="320" /></a></div><br /><h3>Langkah 2 | Verfikasi Akun</h3><br />Tidak ada auto verifi, jadi anda harus melakukan verikasi dengan masuk ke email yang anda pakai ketika mendaftar lalu klik link yang di berikan.<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFiBlg8_g1Fhun57en_z5BH14h5vOHsMH-VdsL5n8aji2vNwrU4qhfbIN37Pmqvop_GFUiEBxjTEJSE0Zh3DHXOFl9rVzcny6VI4DN8VBulJZTBs8g3ERNsvHkbrPSCtTDpzYqoab9fzWB/s1600/2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Upload Website Dari Localhost Ke Id Hostinger (Update + Database)" border="0" height="78" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFiBlg8_g1Fhun57en_z5BH14h5vOHsMH-VdsL5n8aji2vNwrU4qhfbIN37Pmqvop_GFUiEBxjTEJSE0Zh3DHXOFl9rVzcny6VI4DN8VBulJZTBs8g3ERNsvHkbrPSCtTDpzYqoab9fzWB/s400/2.PNG" title="Cara Upload Website Dari Localhost Ke Id Hostinger (Update + Database)" width="400" /></a></div><br /><h3>Langkah 3 | Pilih Layanan</h3><br />Setelah terverikasi, pilih layanan yang akan anda pakai, gratis atau berbayar. Di tutorial ini saya pakai layanan gratis.<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaZJxE-qSEForXexNTWzyyEe3b5jQPZepp8PNk0qIA7ZslDG8-hd9Qj1aTY4_PM3Yswn8_A-ei3s6p7DPJWYJXTbo8bWnGylmPhDPKOn61l7qkA6wB9mHBv0dDM0A88JkZSgLrtCTg2jlH/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Upload Website Dari Localhost Ke Id Hostinger (Update + Database)" border="0" height="378" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaZJxE-qSEForXexNTWzyyEe3b5jQPZepp8PNk0qIA7ZslDG8-hd9Qj1aTY4_PM3Yswn8_A-ei3s6p7DPJWYJXTbo8bWnGylmPhDPKOn61l7qkA6wB9mHBv0dDM0A88JkZSgLrtCTg2jlH/s400/3.png" title="Cara Upload Website Dari Localhost Ke Id Hostinger (Update + Database)" width="400" /></a></div><br /><h3>Langkah 4 | Membuat Akun Web</h3><br />Setelah memilih anda akan di arahkan ke halaman sebelumnya, klik "Buar Akun Baru", lalu anda akan dibawa ke formulir akun website anda. Jika anda belum memiliki domain, pilih saja subdomain default dari idhostinger.<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnXPMsO5uhzXahcinLD_C0LpYWRfibW9akrZE2iTSgs4ke_uQaoYKAdVxLvWYoeHQpvWzXzJwkVHyWJJIJYpvKzxXTYIDrdk9qgIr64ycp9gAuk1Y7fpgnnzT5aOfaEjsUiauIQDWuy5z5/s1600/4.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Upload Website Dari Localhost Ke Id Hostinger (Update + Database)" border="0" height="142" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnXPMsO5uhzXahcinLD_C0LpYWRfibW9akrZE2iTSgs4ke_uQaoYKAdVxLvWYoeHQpvWzXzJwkVHyWJJIJYpvKzxXTYIDrdk9qgIr64ycp9gAuk1Y7fpgnnzT5aOfaEjsUiauIQDWuy5z5/s400/4.PNG" title="Cara Upload Website Dari Localhost Ke Id Hostinger (Update + Database)" width="400" /></a></div><br /><h3>Langkah 5 | Builder</h3><br />Sebenarnya membutuhkan 24jam untuk memverifikasi akun anda, tapi anda bisa tekan tombol F5 (refresh) agar akun website anda aktif.<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1tBmYMcFFz3w_QHD6Y7AiMPoAngMIhBCk56nLJKODltHfCbCHnwZNTlTOptO9dqm7tj3sTFPmCOWcz0S7xZ9PHFpbGf_Vt5vypYe26Bar1GYQablPSJVCuq2P_Bjb20bLSJcAsT8c3ZGl/s1600/5.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Upload Website Dari Localhost Ke Id Hostinger (Update + Database)" border="0" height="83" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1tBmYMcFFz3w_QHD6Y7AiMPoAngMIhBCk56nLJKODltHfCbCHnwZNTlTOptO9dqm7tj3sTFPmCOWcz0S7xZ9PHFpbGf_Vt5vypYe26Bar1GYQablPSJVCuq2P_Bjb20bLSJcAsT8c3ZGl/s400/5.PNG" title="Cara Upload Website Dari Localhost Ke Id Hostinger (Update + Database)" width="400" /></a></div><br /><h3>Langkah 6 | Kelola Mysql</h3><br />Database tidak akan lepas di Mysql, jadi kita buat akun mysql. Di Datasbase MYSQL.<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0AXA7r_GaQrldz6Jik_YW8UL4cYOnmQgTNL2ceJ0S-LyPxUBh_e-alagOWx2ujPlyNxH3F-PsVGQd8F9fiAR8DzvoKpdohO1FqJw3ZUgfVtlAdw8v1dJmosdMw-2v4Y92QmX7h-RMdgUz/s1600/tools.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Upload Website Dari Localhost Ke Id Hostinger (Update + Database)" border="0" height="172" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0AXA7r_GaQrldz6Jik_YW8UL4cYOnmQgTNL2ceJ0S-LyPxUBh_e-alagOWx2ujPlyNxH3F-PsVGQd8F9fiAR8DzvoKpdohO1FqJw3ZUgfVtlAdw8v1dJmosdMw-2v4Y92QmX7h-RMdgUz/s400/tools.PNG" title="Cara Upload Website Dari Localhost Ke Id Hostinger (Update + Database)" width="400" /></a></div><br /><h3>Langkah 7 | Mysql</h3><br />Isi formulirnya dengan cermat.  (Recomendasi saya : gunakan password yang sama dengan sebelumnya)<br />Langkah 8 | Setelah selesai. Silakan masuk di PHP My Admin.<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj10_FOImJAlKM8-mvPmUMj6uqV_prlGmrqYY-wLoVEIz4J75AC9zyHKIfSwlkBuiY1WSPSy2QsI3cGsOI_-DV_REcNsrlf5GTBYC8kwajKwohom0P-Gq-2cu8BsFK9WN3DaAm14YIodxJO/s1600/6.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Upload Website Dari Localhost Ke Id Hostinger (Update + Database)" border="0" height="162" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj10_FOImJAlKM8-mvPmUMj6uqV_prlGmrqYY-wLoVEIz4J75AC9zyHKIfSwlkBuiY1WSPSy2QsI3cGsOI_-DV_REcNsrlf5GTBYC8kwajKwohom0P-Gq-2cu8BsFK9WN3DaAm14YIodxJO/s400/6.PNG" title="Cara Upload Website Dari Localhost Ke Id Hostinger (Update + Database)" width="400" /></a></div><br /><h3>Langkah 9 | Import Database</h3><br />Tampilan PHPMyAdmin adalah XAMPP, jadi bagi anda yang memakai AppServ sedikit asing dengan tampilan ini....<a href="http://www.bocahit.com/2012/10/cara-export-database-dari-localhost-60.html" target="_blank">Klik Disini</a> jika anda belum paham dengan Import Database.<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyx2zJu6eqZ7YeKHflKgSu0Jjtba7THy3Zajcd8K5f77n3528iOaxtf8Cgv2Ifl6arCXYV6QOscxeaPjz3VST9xAeGaIznrbUX7IfhbzPgv0RN7NQT_YAaho6nuf_yQ8nAPlk7TgpMxIXs/s1600/8.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Upload Website Dari Localhost Ke Id Hostinger (Update + Database)" border="0" height="276" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyx2zJu6eqZ7YeKHflKgSu0Jjtba7THy3Zajcd8K5f77n3528iOaxtf8Cgv2Ifl6arCXYV6QOscxeaPjz3VST9xAeGaIznrbUX7IfhbzPgv0RN7NQT_YAaho6nuf_yQ8nAPlk7TgpMxIXs/s400/8.PNG" title="Cara Upload Website Dari Localhost Ke Id Hostinger (Update + Database)" width="400" /></a></div><br /><h3>Langkah 10 | Import Script</h3><br />Sukses mengimpor database, waktunya kita import script yang sudah kita bangun dengan builder (Dreamweaver). Silakan anda klik File Manager 3, kemudian klik upload...sebelum anda browse pastikan folder script yang di htdocs(xampp) atau www(appserv) telah di compress ke format.zip.<br /> <br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW_w0gbZO8VG9rNKvIRCKbLsOCiAKbb0DYW-OsiUjBvs-j2iCJlpCxWcLqAOrsgFuvf2nIImsfT5z3qO1sq3qY3oekrEs_ByJe2gGj3bv6QL8rO-Kl6ch49g1FC-mNSKB7NIOBa8s9Ugx4/s1600/upload+fm3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Upload Website Dari Localhost Ke Id Hostinger (Update + Database)" border="0" height="163" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW_w0gbZO8VG9rNKvIRCKbLsOCiAKbb0DYW-OsiUjBvs-j2iCJlpCxWcLqAOrsgFuvf2nIImsfT5z3qO1sq3qY3oekrEs_ByJe2gGj3bv6QL8rO-Kl6ch49g1FC-mNSKB7NIOBa8s9Ugx4/s400/upload+fm3.PNG" title="Cara Upload Website Dari Localhost Ke Id Hostinger (Update + Database)" width="400" /></a></div><br /><h3>Langkah 11 | Replace Server, User, Password</h3><br />Setelah anda berhasil mengimpor , waktunya kita mengganti Server name, Username, Password yang dulunya adalah default dari Localhost, sekarang anda ubah ke idhostinger. Ketika anda tadi mendaftar akun My SQL anda akan melihat Mysql username dan MySQL Database. Dengan klik, file script lalu pilih tools edit, silakan ubah yang anda perlu.<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4XymKGUpmmLi2IF4uCgTYu1okNYucq0RmGKQgz43x9lfcTMhCShyphenhyphenBtPxbHbmFKCgM73l6MXIcCT5N9iEGfcz2KX_N0q6v-AC4N5y-E3mpVL1KqV0YM4nAfR_QAxrulApJjjLS3YS9t2uS/s1600/fm3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Upload Website Dari Localhost Ke Id Hostinger (Update + Database)" border="0" height="220" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4XymKGUpmmLi2IF4uCgTYu1okNYucq0RmGKQgz43x9lfcTMhCShyphenhyphenBtPxbHbmFKCgM73l6MXIcCT5N9iEGfcz2KX_N0q6v-AC4N5y-E3mpVL1KqV0YM4nAfR_QAxrulApJjjLS3YS9t2uS/s400/fm3.PNG" title="Cara Upload Website Dari Localhost Ke Id Hostinger (Update + Database)" width="400" /></a></div><br /><h3>Langkah Terakhir | Cek</h3><br />Cek apakah domain dan web anda telah tampil di browser. <br />Nah cukup itu yang bisa saya sampaikan. Semoga Website anda berhasil di publikasi kan...Silakan 2 web yang sudah saya upload, untuk yang bertabase adalah dari <a href="http://www.bocahit.com/2013/06/cara-valid-upload-website-ke-hosting.html" target="_blank">000webhost</a> dan yang no database dari idhostinger.<br /><br /><div style="text-align: center;"><a class="button" href="http://www.bocahit.com/2013/08/cara-mengatur-script-menghubungkan.html" target="_blank">Sync Database</a></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><a class="button" href="http://herlambang.net78.net/" target="_blank">WEB DATABASE</a>             <a class="button" href="http://herlambang.p.ht/" target="_blank">WEB NO DATABASE</a> </div><br />Okey, saya yakin database anda akan mengalami kegagalan dan bahkan benar2 gagal. Jadi saya Herlambang Aka Wammy, jika tugas anda mengalami kegagalan, itu bukan dari artikel ini. Tergantung dengan amal kebaikan anda. Wekk..<br /><h3><b><span style="color: red;">UPDATE</span></b></h3>Web No Database | Tidak bisa di akses karena masa trial-nya telah habis. herlambang.p.ht menggunakan Idhostinger.<br />Web Database | Menggunakan 000webhost. Silakan sesuaikan dengan tugas anda.

Cara Upload Website Dari Localhost Ke Id Hostinger (Update + Database)

Cara Upload Website Dari Localhost Ke Id Hostinger (Update + Database) | Kalau minggu lalu aku share, bagaimana kita mengupload atau meminda...

Baca selengkapnya »

23.28

Membuat Button Dengan CSS Pseudo Elemen V1

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhNNQwswx3yLDhiCudOrFQ9tLaE9WOVqcVvXQb44LnfDNw_-IwLHalIpinF7TdbClaTDSKZNMG9M7nMSIFZUea2t6EzMi8v0pE-q5y-xqogpQEiD6Ft0Ufdy8DYubEwNeOiunKqAosm31q/s1600/Button+Pseudo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Button Dengan CSS Pseudo Elemen V1" border="0" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhNNQwswx3yLDhiCudOrFQ9tLaE9WOVqcVvXQb44LnfDNw_-IwLHalIpinF7TdbClaTDSKZNMG9M7nMSIFZUea2t6EzMi8v0pE-q5y-xqogpQEiD6Ft0Ufdy8DYubEwNeOiunKqAosm31q/s320/Button+Pseudo.jpg" title="Membuat Button Dengan CSS Pseudo Elemen V1" width="320" /></a></div><br />Membuat Button Dengan CSS Pseudo Elemen V1 | Hari sedikit membosankan, apalagi masalah yang ada di template yang belum selesai. Tapi untungnya masih sempet juga berkreasi bersama Dreamweaver tercinta. Pseudo Elemen, bisa anda baca lebih lengkapnya di W3.org. Karena disana semua perngertian masalah pemrograman disediakan.<br /><br />Pseudo Element dalam CSS bisa diartikan sebagai Elemen/Tag “palsu”.  Karena dengan menambahkan pseudo elemen seolah olah kita menambahkan  elemen atau suatu tag baru di dalam tag yang kita beri style.<br /><br />Ada sedikit perubahan dalam spesifikasi CSS3, yakni setiap pseudo  element harus menggunakan double colon atau titik duanya ditulis dua  kali seperti <i>::before ,::after.</i> (Sumber:<a href="http://www.w3.org/TR/selectors/#pseudo-elements" target="_blank" title="CSS3 Pseudo-Element Specs">http://www.w3.org/TR/selectors/#pseudo-elements</a>) <br /><h3>CSS</h3><br /><pre>.button {<br />    background-color:#3bb3e0;<br />    padding:10px;<br />    position:relative;<br />    font-family: 'Open Sans', sans-serif;<br />    font-size:12px;<br />    text-decoration:none;<br />    color:#fff;<br />    background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);<br />    background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);<br />    background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);<br />    background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);<br />    background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);<br />    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(44,160,202)),color-stop(1, rgb(62,184,229)));<br />    -webkit-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785;<br />    -moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785;<br />    -o-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785;<br />    box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785;<br />    -webkit-border-radius: 5px;<br />    -moz-border-radius: 5px;<br />    -o-border-radius: 5px;<br />    border-radius: 5px;<br />}<br /><br />.button::before {<br />    background-color:#072239;<br />    content:"";<br />    display:block;<br />    position:absolute;<br />    width:100%;<br />    height:100%;<br />    padding-left:2px;<br />    padding-right:2px;<br />    padding-bottom:4px;<br />    left:-2px;<br />    top:5px;<br />    z-index:-1;<br />    -webkit-border-radius: 6px;<br />    -moz-border-radius: 6px;<br />    -o-border-radius: 6px;<br />    border-radius: 6px;<br />    -webkit-box-shadow: 0px 1px 0px #fff;<br />    -moz-box-shadow: 0px 1px 0px #fff;<br />    -o-box-shadow: 0px 1px 0px #fff;<br />    box-shadow: 0px 1px 0px #fff;<br />}<br /><br />.button:active {<br />    color:#156785;<br />    text-shadow: 0px 1px 1px rgba(255,255,255,0.3);<br />    background:rgb(44,160,202);<br />    -webkit-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;<br />    -moz-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;<br />    -o-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;<br />    box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;<br />    top:7px;<br />}<br /><br />.button:active::before {<br />    top:-2px;<br />}</pre><h3>HTML</h3><pre class="brush:js;"><a href="#" class="button"> Click me!</a><br /></pre><div style="text-align: center;"><br /></div><div style="text-align: center;"><a class="button" href="http://iframe-wammy.blogspot.com/2013/07/blog-post.html">ILUSTRASI</a></div>