Template Blogger Dark Kuuga Super Minimalis

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFE6gu2OR0F0wBj0re3b6bC-Or954RJSm3Yicbjb3Rwb-CoTQoXpikHu1GZ-wyRAQAvoHpkemuEqev1iiPnQtSMZ0Whk_CrH3qlBL1XAFgzySBbOuiiY8Rv234aWIH-3FvuhSLAvojOIVn/s1600/Dark+Kuuga.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Template Blogger Dark Kuuga Super Minimalis" border="0" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFE6gu2OR0F0wBj0re3b6bC-Or954RJSm3Yicbjb3Rwb-CoTQoXpikHu1GZ-wyRAQAvoHpkemuEqev1iiPnQtSMZ0Whk_CrH3qlBL1XAFgzySBbOuiiY8Rv234aWIH-3FvuhSLAvojOIVn/s400/Dark+Kuuga.jpg" title="Template Blogger Dark Kuuga Super Minimalis" width="400" /></a></div><br />Template Blogger Dark Kuuga Super Minimalis | Keturutan juga nih...template 1 kolom yang sangat minimalis ini bertema dark, gold dan transparan. Terinspirasi dari warna kostum Masked Rider Dark Kuuga (Hitam & Emas). Sangat sederhana dan sungguh ringan. Karena 1 kolom, tanpa sidebar. Kenapa namanya Dark Kuuga, tetapi tidak ada unsur dari Kuuga?yaa, terserah akulah mau kasih nama apa. hihi<br /><br />Oya, template ini tidak Valid HTML5 dan tidak responsive. Saya rasa ini sangat cocok untuk orang yang hobi menulis atau bercerita dan dia memiliki selera DARK. Template ini hampir mirip dengan template yang saya pakai. Background, dan warnanya pun sama...<a href="http://www.bocahit.com/2013/07/template-blogger-dark-decade-responsive.html" target="_blank">Dark Decade</a> dan <a href="http://www.bocahit.com/2013/07/template-blogger-dark-decade-responsive.html" target="_blank">Dark Kuuga</a> itu kan satu jenis, Kamen Rider...jadi ga masalah donk kalau sama. Template ini punya :<br /><ol><li>Navigasi Menu</li><li>Navigasi Nomor Halaman</li><li>Ready Share Facebook</li><li>Ready Follow Twitter</li><li>Ready +1 G+</li><li>Ready Facebook Recommend</li><li>Ready Facebook Send Message</li><li>Related Post</li><li>Facebook Comments </li><li>Threaded Comment (tetapi saya disable, saya rasa kebih cocok dengan komentar Facebook)</li><li>Ready Featured Mail</li><li>Ready Save Page As PDF</li><li>Ready To Print</li><li>Style CSS Button </li></ol>Nah, kelihatan sekali kalau saya berkonsentrasi di <i>share </i>dan <i>social bookmarking</i>, cocok jika menulis tentang curahan hati anda.<br /><br /><div style="text-align: center;"><a class="button" href="http://dark-kuuga.blogspot.com/" target="_blank">DEMO</a>             <a class="button" href="https://www.dropbox.com/s/thz99x4q3ki6o8o/Darkuuga.rar" target="_blank">Download</a><br /><br /></div>

Template Blogger Dark Kuuga Super Minimalis

Template Blogger Dark Kuuga Super Minimalis | Keturutan juga nih...template 1 kolom yang sangat minimalis ini bertema dark, gold dan transpa...

Baca selengkapnya »

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 »

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 »

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 »

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 /><!-- Ingat Anda Harus Upload Di Dalam Folder Public_html --> <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 »

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>

Membuat Button Dengan CSS Pseudo Elemen V1

Membuat Button Dengan CSS Pseudo Elemen V1 | Hari sedikit membosankan, apalagi masalah yang ada di template yang belum selesai. Tapi untungn...

Baca selengkapnya »

Teknik Strategi Bermain Age Of Empire III (Pemula)

Teknik Strategi Bermain Age Of Empire III (Pemula)

Baca selengkapnya »

Template Blogger Dark Decade Responsive & HTML5

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwvxgAG7qZ-b99b5kJC14HINrY1S8BtmMXjz-aWyLLqeiGp4UhWIm64zgpK6EqzpdKeo-Vj41vgz4MXjnfdRGKkf9_7HpOHbCnfGbu6EyRQKtDb01KnSKBXl40Se6y59zcnwv64jY5VQlg/s1600/Dark+Decade.jpg" imageanchor="1"><img alt="Template Blogger Dark Decade Responsive & HTML5" border="0" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwvxgAG7qZ-b99b5kJC14HINrY1S8BtmMXjz-aWyLLqeiGp4UhWIm64zgpK6EqzpdKeo-Vj41vgz4MXjnfdRGKkf9_7HpOHbCnfGbu6EyRQKtDb01KnSKBXl40Se6y59zcnwv64jY5VQlg/s400/Dark+Decade.jpg" title="Template Blogger Dark Decade Responsive & HTML5" width="400" /></a></div><br />Template Blogger Dark Decade Responsive & HTML5 | Ganti lagi? ya. Memang selama ini, mencari dan menjelajah template yang cocok dan yang akan memuaskan batin saya. Dan <a href="http://www.bocahit.com/2013/07/template-blogger-dark-decade-responsive.html" target="_blank">Template Blogger Dark Decade Responsive & HTML5</a> ini yang membuat batin saya puas, selain adalah kreasi pribadi, template ini juga memiliki sejarah. Bukan bermaksud pamer, karena saya yakin ada banyak blogger yang bisa membuat template seperti ini bahkan yang lebih. Tapi saya hanya ingin berbagi dan bercerita...<br /><br /><h3>Genap 4 hari</h3>untuk menyelesaikan ini, walau sekarang baru 80% tapi bagi newbie seperti saya, membuat 1 template itu sulitnya minta ampun, apalagi yang bersistem responsive, maklum cuma ada sedikit waktu yang efisien untuk nyekrip. <a href="http://www.bocahit.com/2013/05/keunggulan-template-blog-support.html" target="_blank">Klik Disini</a> kenapa saya suka responsive?. Terlalu semangat? bukan. Kepuasan. Itu adalah alasan yang nyata. Mengejar kepuasan design walau pas - pasan tapi bukan kualitas saja, ketika ini selesai, saya pun tertawa dan puas, tantangan terlewati.<br /><br /><h3>Final SEO</h3>ya selain berkonsentrasi ke bagian eksterior design, saya tetep fokus terhadap SEO, karena anjloknya SEO blog adalah bukti bahwa blog itu hidup atau mati, tentu saja karena SEO berpengaruh dengan kekuatan kita di <a href="http://google.com/" target="_blank">Google</a>.<br /><br /><h3>Dark Decade</h3>nama template karena terinspirasi dengan Kamen Rider Decade. Yang di informasikan bahwa Decade adalah destroyer tetapi decade adalah pembela kebenaran.<br /><br />Template ini memiliki beberapa fitur :<br /><ol><li>Sistem berbalas <a href="http://www.bocahit.com/2012/09/membuat-threaded-comment-sederhana.html" target="_blank">Threaded Comments</a></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. (dari DTE :])</li><li>Float menu header </li><li>Ready ads 728 x 90 di bawah float menu header</li><li>Ready iklan teks di sidebar </li><li>Back to top (dari DTE :])</li><li>Sidebar Accordion (dari template mas kolis jhony wuss)</li><li><a href="http://www.bocahit.com/2012/08/membuat-artikel-terkait-di-bawah-posting.html" target="_blank">Related Post</a> dengan Jquery get ( ) (dari MKR Site)</li><li><a href="http://www.bocahit.com/2012/08/memasang-yahoo-emoticons-di-komentar.html" target="_blank">Emoticon</a> kecil di bagian komentar (dari DTE :])</li><li>Loadmore artikel pada home jadi membuat lebih sederhana dan minimalis </li><li>Script loadmore jQuery get() untuk mendapat artikel pada halaman berikutnya sehingga tidak perlu berpindah kehalaman selanjutnya (dari MKR Site) </li><li><a href="http://www.bocahit.com/2012/11/membuat-breadcrumb-search-engine.html" target="_blank">Breadcrumb</a> pada halaman artikel</li><li>Footer bersama identitas template</li><li> <a href="http://www.bocahit.com/2012/10/cara-cepat-mengetahui-nilai-seo-blog.html" target="_blank">SEO Score</a> dari CHKME adalah 100%</li><li>Support modern browser IE9, Mozilla, Chrome</li></ol>Mungkin hanya itu yang ada di template ini. Maklum, belum mahir masalah membuat template..<br />Tapi saya tidak akan mudah menyerah dan berhenti begitu saja. Masih ada hal yang akan saya tambahkan :<br /><ol><li> Ready ads 728 x 90 di atas footer</li><li><strike>Halaman perkenalan di atas ads 728 x 90 bawah</strike></li></ol>Nah cukup 2 dulu saja. Oiya, template ini bukan semena - mena adalah karya pribadi, bukan. Tapi terinpirasi dari Blog Urang Kurai + MKR Site tapi tetap ada indentitas sendiri sebagai Wammy. Saya tidak tahu apakah ini template terakhir atau tidak. Blog amburadul begini, mau diapakan. Jika terdapat iklan, bukan template yang menyesuaikan iklan tapi iklan yang menyesuaikannya. Kalau begitu saya, mau sahur dulu...<br /><br /><div style="text-align: center;"><a class="button" href="http://dark-decade.blogspot.com/" target="_blank">Demo Dark Decade</a>                 <a class="button" href="http://www.bocahit.com/2011/07/contact.html" target="_blank">Order</a></div><br />

Template Blogger Dark Decade Responsive & HTML5

Template Blogger Dark Decade Responsive & HTML5 | Ganti lagi? ya. Memang selama ini, mencari dan menjelajah template yang cocok dan yang...

Baca selengkapnya »

5 Responsive Joomla! Template

5 Template Joomla! Responsive | Sudah lama, sejak aku pimdah ke appserv. Jarang sekali bermain joomla! di localhost, maklum appserv kurang support dengan CMS. <i>Website </i>yang memakai platfrom Joomla! memang terlihat lebih profesional. Karena Joomla! sendiri selalu di  update. Iya lah!! namanya juga CMS! Kenapa? Baca : <a href="http://www.bocahit.com/2012/09/mengenal-cms-joomla.html" target="_blank">Mengenal CMS Joomla!</a>.<br /><br /><h3>Music</h3><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDGswraWhaGYgQe2kvUWXQYg9aZA_21R-JbPHUhT6Bzz4j9XuH5zmJ2wM1j1528-WPF-Cw7pttCnMCKU2ftVg2i6UIcj2sw4kuoDwOc_VKcUBKT5ZvD85oGCFCIIVGiLjpopWzvEkA11ob/s1600/j1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="5 Responsive Joomla! Template" border="0" height="263" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDGswraWhaGYgQe2kvUWXQYg9aZA_21R-JbPHUhT6Bzz4j9XuH5zmJ2wM1j1528-WPF-Cw7pttCnMCKU2ftVg2i6UIcj2sw4kuoDwOc_VKcUBKT5ZvD85oGCFCIIVGiLjpopWzvEkA11ob/s320/j1.PNG" title="5 Responsive Joomla! Template" width="320" /></a></div><br />Template ini, support untuk Joomla! 2.5 & 3.1.<br /><br /><div style="text-align: center;"> <a class="button" href="http://demo.gavick.com/free/may2012/" target="_blank">ILUSTRASI</a>              <a href="http://www.gavick.com/download/joomla-25-templates/musicfree.html" target="_blank" class="button">DOWNLOAD</a></div><br /><div style="text-align: left;"><h3>JA Elastica</h3></div><div class="separator" style="clear: both; text-align: center;"><a href="http://www.premium-joomlathemes.com/wp-content/uploads/2012/01/JA-Elastica-Free-Joomla-1.7-Template.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="5 Responsive Joomla! Template" border="0" height="240" src="http://www.premium-joomlathemes.com/wp-content/uploads/2012/01/JA-Elastica-Free-Joomla-1.7-Template.jpg" title="5 Responsive Joomla! Template" width="320" /></a></div><br />Template ini, support hanya di Joomla! 2.5.<br /><div style="text-align: center;"><br /><a class="button" href="http://www.joomlart.com/demo/#joomla25-templates.joomlart.com/ja_elastica" target="_blank">ILUSTRASI</a>             <a class="button" href="http://www.joomlart.com/joomla/templates/ja-elastica" target="_blank">DOWNLOAD </a></div><br /><div style="text-align: left;"><h3>JA Puresite</h3></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLR-WRHytAjTfQyoOvAAeamtCnQIIUP55DHaHo1n2MOneXwwLI9AqUEsvQxCZid3-XTb7AGzGo-5YtDsov1uq3rLuRscg3InHGjdKtP2kfhOnJG6mEpowu_QU6eJh2XTZbnk2NXcYFHTnT/s1600/Puresite.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="5 Responsive Joomla! Template" border="0" height="265" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLR-WRHytAjTfQyoOvAAeamtCnQIIUP55DHaHo1n2MOneXwwLI9AqUEsvQxCZid3-XTb7AGzGo-5YtDsov1uq3rLuRscg3InHGjdKtP2kfhOnJG6mEpowu_QU6eJh2XTZbnk2NXcYFHTnT/s320/Puresite.jpg" title="5 Responsive Joomla! Template" width="320" /></a></div><br /><div style="text-align: left;">Template ini, support dengan Joomla! 2.5 & 3.X.</div><br /><div style="text-align: center;"><a class="button" href="http://www.joomlart.com/demo/#joomla25-templates.joomlart.com/ja_puresite" target="_blank">ILUSTRASI</a>       <a class="button" href="http://www.joomlart.com/forums/downloads.php?do=cat&id=437" target="_blank">DOWNLOAD</a></div><br /><h3>Leo Book Restro</h3><div class="separator" style="clear: both; text-align: center;"><a href="http://www.leotheme.com/media/lofshowcase/gallery/470x620-index-clean.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="5 Responsive Joomla! Template" border="0" height="320" src="http://www.leotheme.com/media/lofshowcase/gallery/470x620-index-clean.jpg" title="5 Responsive Joomla! Template" width="242" /></a></div><br />Template ini, support dengan Joomla! 1.7 & 2.5.<br /><br /><div style="text-align: center;"><a class="button" href="http://leotheme.com/demo/?template=leo_restro" target="_blank">ILUSTRASI</a>      <a class="button" href="http://leotheme.com/download/viewcategory/31-leo-restro.html" target="_blank">DOWNLOAD</a> </div><br /><h3>Vertex </h3><div class="separator" style="clear: both; text-align: center;"><a href="http://www.shape5.com/images/products/2012/vertex/club_vertex.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="5 Responsive Joomla! Template" border="0" height="320" src="http://www.shape5.com/images/products/2012/vertex/club_vertex.jpg" title="5 Responsive Joomla! Template" width="279" /></a></div><br />Template ini, support dengan Joomla! 2.5 saja.<br /><br /><div style="text-align: center;"><a class="button" href="http://www.shape5.com/demo/index.php?vertex/" target="_blank">ILUSTRASI</a>                      <a class="button" href="http://www.shape5.com/product_details/free_templates/vertex_-_free_joomla_template.html" target="_blank">DOWNLOAD</a></div>

5 Responsive Joomla! Template

5 Template Joomla! Responsive | Sudah lama, sejak aku pimdah ke appserv. Jarang sekali bermain joomla! di localhost, maklum appserv kurang s...

Baca selengkapnya »

Template Blogger Untuk Profesi Fotografer

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWYzEiBdKqzj2RC2I7L1K6TggFMPGsh8J-bfcm9vuVkCXm6ARiEUiRgvSnbE8FI0VtWoA9GDLHDiXblzAM06FMDH4gSjH9WOpwDKg5RHr4fw6FsQQM3GgyN14Ti2DAv2qbVb_ZHuGipajk/s1600/Jaya+Adi+Art+Gallery.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Template Blogger Untuk Profesi Fotografer" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWYzEiBdKqzj2RC2I7L1K6TggFMPGsh8J-bfcm9vuVkCXm6ARiEUiRgvSnbE8FI0VtWoA9GDLHDiXblzAM06FMDH4gSjH9WOpwDKg5RHr4fw6FsQQM3GgyN14Ti2DAv2qbVb_ZHuGipajk/s320/Jaya+Adi+Art+Gallery.png" title="Template Blogger Untuk Profesi Fotografer" width="292" /></a></div><br />Template Blogger Untuk Profesi Fotografer | Kali ini, share buat yang suka, motret - motret dan yang mau mengoleksi foto prebadinya juga boleh. <b>Template</b> yang elegan & cassual ini, bukan buatan saya. Yups, cuma re-share aja. <b>Template</b> bawaan <b>wordpress</b> ini sangat cocok di pakai oleh <i>blog</i>ger yang mencoba memaparkan hasil karya di bidang gambar.<br /><br /><div style="text-align: center;"><a class="button" href="http://jayaadiart.blogspot.com/" target="_blank">ILUSTRASI</a>              <a class="button" href="https://app.box.com/s/ymyvdt071i0idq8145aa" target="_blank">DOWNLOAD</a></div><br />Akan 2 template XML. Yang pertama adalah, template with  <i>full blog post.</i> Maksudnya akan menampilkan semua artikel dengan gambar dan judul pada homepage. Yang kedua, template with <i>title post only</i>. Maskudnya hanya menampilkan judul artikel saja. Template ini dilengkapi slider, yang jumlah bisa kita tambah karena default hanya 3 slide. Jadi silakan di download.....

Template Blogger Untuk Profesi Fotografer

Template Blogger Untuk Profesi Fotografer | Kali ini, share buat yang suka, motret - motret dan yang mau mengoleksi foto prebadinya juga bol...

Baca selengkapnya »

Tertembak Oleh Tentara Google

Tertembak Oleh Tentara Google | Artikel curhat ini, memang bener - bener curhat masalah blog ini. Ga tau mengapa, udah 1,5 bulan blog <a href="http://www.bocahit.com/" target="_blank">ini</a> makin hari makin merosot aja visitornya. Apa yang terjadi dengan <a href="http://www.google.com/" target="_blank">Google</a> ? Yang dari 1500 per-hari sekarang malah jadi 500 per-harinya. Ini udah masuk kategori terjun bebas tanpa parasut. Yah, memang saya anggap jika visitor di bawah angka 800 itu menurut saya masuk di kategori blog mati. Jadi sekarang Wammy's Blog untuk saat ini adalah <i>mati</i>. <a href="http://www.google.com/" target="_blank">Google</a> punya banyak tentara yang beralgoritma. Yah, itu bisa dimaklumi makin hari <a href="http://www.google.com/" target="_blank">Google</a> pasti melakukan riset tentang keamanan sistemnya, jadi wajar saja, kalau para webmaster (blogger) berkeringat menghadapi tentara - tentara <a href="http://www.google.com/" target="_blank">google</a>.<br /><br />Visitor, Pageview, Unique Visitor adalah hal yang penting kita menurutkan berat badan alexa rank. Tapi kalau yang terjadi adalah terjun bebas, hasil dari alexa rank juga terjun bebas. Dari saya mendapat rank 200 sekarang naik ke 400, krisis BBM terasa juga disini. Pernah juga blog ini, di banned oleh <a href="http://www.google.com/" target="_blank">Google</a> sampai 2 kali. Skakmat lah, tapi seiring waktunya, akhirnya terindex kembali. Padahal, artikel 95% adalah buatan saya sendiri, ya..memang ada beberapa artikel yang re-share dari web lain, itu pun sudah saya beri sumbernya, komentar yang bebas spam, dan rata - rata tiap artikel juga ada komentar, itu kan bukti bahwa artikelnya bermanfaat, lalu kenapa hampir 15 artikel masuk di <a href="http://www.google.com/" target="_blank">Google</a> Sandbox. Saya, ga tau apa yang terjadi dengan raja informasi saat ini.<br /><br />Lain masalah ada di iklan <a href="http://www.google.com/" target="_blank">Google</a> Adsense. Padahal email saya udah terdaftar dan disetujui pula oleh <a href="http://www.google.com/" target="_blank">Google</a>, tapi iklan <a href="http://www.google.com/" target="_blank">Google</a> Adsense ga mau muncul di sini, padahal di blog saya yang memakai email ini, <a href="http://www.google.com/" target="_blank">Google</a> Adsense lancar - lancar saja. Dafuq...<br /><br />Sebenarnya, bukan saya saja yang merasakan peluru Tentara <a href="http://www.google.com/" target="_blank">Google</a>. Banyak juga yang PV dan AR terjun bebas, merasa senang pula kalau ada teman yang bernasib sama. Ada pula yang benar - benar tertembak mati, sampai blognya di banned dari <a href="http://www.google.com/" target="_blank">Google</a>, dan di dapus dari <a href="http://blogger.com/" target="_blank">Blogger</a>. Udah tamatlah riwayatnya....<br /><br /><br />Di Bulan Ramadhan ini, orang bilang bulan yang penuh berkah, saya harap begitu pula kepada blog ini,, karena saya juga membuat artikel yang baik, dan halal di konsumsi. Mungkin ini, pertanda baik bagi saya dan blog ini, untuk menjadi dan membuat informasi yang halal, dan lebih bermanfaat bagi <a href="http://www.google.com/" target="_blank">Google</a> dan semua orang. Jika artikelnya baik, pasti uang yang di dapatkan dari blog juga akan baik..itu yang saya yakini, selama ngeblog.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHQJHY4g0U901oGc7WoQoRE1r_6h_IFFw6yXGtSG2MrnxFJhGetZh78cV1yaeJoBxDWP23ySkLU8meqZOUJBhbss1_PelKUuYqgls9SuVxhhZCYiIWFr_3LG17JtauyrcqC2Kr8UWJBYNt/s1600/Alat+Webmaster+-+Kesalahan+Perayapan.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tertembak Oleh Tentara Google" border="0" height="265" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHQJHY4g0U901oGc7WoQoRE1r_6h_IFFw6yXGtSG2MrnxFJhGetZh78cV1yaeJoBxDWP23ySkLU8meqZOUJBhbss1_PelKUuYqgls9SuVxhhZCYiIWFr_3LG17JtauyrcqC2Kr8UWJBYNt/s400/Alat+Webmaster+-+Kesalahan+Perayapan.png" title="Tertembak Oleh Tentara Google" width="400" /></a></div>Kesalahannya juga sedikit, bahkan nyaris tanpa kesalahan, lalu kenapa.......<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFpDQH-dDmliLg27P-xazDIyKNX-al6yF-i8erhvKbn8ugEL9ABOwx8xI-peIi0cvAH4ee-B11DAiGKYf51ZGSZ3GZ1ey0Wz_w_WEQxuDfnv-OWDqEINRkFfblnxK4FF7Ixpk3XOLJDnBk/s1600/Alat+Webmaster+-+Peta+Situs.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tertembak Oleh Tentara Google" border="0" height="260" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFpDQH-dDmliLg27P-xazDIyKNX-al6yF-i8erhvKbn8ugEL9ABOwx8xI-peIi0cvAH4ee-B11DAiGKYf51ZGSZ3GZ1ey0Wz_w_WEQxuDfnv-OWDqEINRkFfblnxK4FF7Ixpk3XOLJDnBk/s400/Alat+Webmaster+-+Peta+Situs.png" title="Tertembak Oleh Tentara Google" width="400" /></a> </div><br />Terindex dan aman terkendali..Bingung...

Tertembak Oleh Tentara Google

Tertembak Oleh Tentara Google | Artikel curhat ini, memang bener - bener curhat masalah blog ini. Ga tau mengapa, udah 1,5 bulan blog ini m...

Baca selengkapnya »

Template Blogger HTML 5 Putih Cantik

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZO6N3mxTIBHWwlsBppzpqTAXaGe59jO-Gfz8xg4NmVmncn6YzkPR9fWxUGfnSnOOvNQw0ZR7CbpUVweAoWitGbzL1wH1MHEamqQIUG8CZ4MDwl9oyqMKYkNcQ6pPKrlgrI7MBtBBjRB_h/s1600/Putih+Cantik.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Template Blogger HTML 5 Putih Cantik" border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZO6N3mxTIBHWwlsBppzpqTAXaGe59jO-Gfz8xg4NmVmncn6YzkPR9fWxUGfnSnOOvNQw0ZR7CbpUVweAoWitGbzL1wH1MHEamqQIUG8CZ4MDwl9oyqMKYkNcQ6pPKrlgrI7MBtBBjRB_h/s400/Putih+Cantik.png" title="Template Blogger HTML 5 Putih Cantik" width="171" /></a></div><br />Template Blogger HTML 5 Putih Cantik | Template benuansa batik dan putih ini, terlihat cantik dengan sendirinya. <i>Template Blogger </i>Gratis ini, sangat cocok untuk  <b>blog  </b>yang bertema personal, cerita, curhat, atau yang bercita - cita jadi penulis.<br /><br /><h3 style="background-attachment: scroll; background-color: transparent; background-image: url(https://sites.google.com/site/republicofnote/image/RON+PostTitle1.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Trebuchet MS', sans-serif; font-size: 20px; line-height: 1; margin: 15px 3px; padding: 3px 10px 3px 30px; text-align: left; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;"><span style="color: white;">Putih Cantik Disertai</span></h3><ol><li>Threaded Comment Ala Artistuorial yang mampu sampai 4 level balasan.</li><li>1 Kolom.</li><li>HTML 5. </li><li>3 Footer Bar. </li><li>Fast Loading.</li><li>Page List, sangat minimalis dan cocok untuk personal.</li><li>Emotikon dengan Jquery, tidak terlalu berat dari DTE:].</li><li>Space Pembuka.</li><li>Auto Readmore Dari DTE:] </li><li>Bingkai Gambar.</li><li>Optimasi Meta Tag Dari Maskolis. </li></ol><h3 style="background-attachment: scroll; background-color: transparent; background-image: url(https://sites.google.com/site/republicofnote/image/RON+PostTitle1.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Trebuchet MS', sans-serif; font-size: 20px; line-height: 1; margin: 15px 3px; padding: 3px 10px 3px 30px; text-align: left; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;"><span style="color: white;">Putih Cantik, Tidak Disertai</span></h3><ol><li>Breadcrumb.</li><li>Menu navigasi. </li></ol><h3 style="background-attachment: scroll; background-color: transparent; background-image: url(https://sites.google.com/site/republicofnote/image/RON+PostTitle1.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Trebuchet MS', sans-serif; font-size: 20px; line-height: 1; margin: 15px 3px; padding: 3px 10px 3px 30px; text-align: left; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;"><span style="color: white;">Cara Memakai Template Putih Cantik</span></h3><ol><li>Pada Edit HTML cari BLOG ID ANDA, kemudian ganti dengan Blog ID Anda yang ada di address bar browser.</li><li>Masuk di halaman Page / Laman, buat laman baru.</li><li>Pada Edit HTML, Klik Jump  to widget, pilih Header. Lihat <div id='sitename'>......</div>, ganti kata - kata  Wammy&#39;s Blog.....~ Putih Cantik, Template Minimalis 1 kolom putih dan cassual ~  </li></ol><div style="text-align: center;"><a class="button" href="http://putih-cantiku.blogspot.com/" target="_blank">ILUSTRASI</a>       <a class="button" href="https://www.dropbox.com/s/22e4kvsh69ab1pc/PutihCantik.xml" target="_blank">Download Via Dropbox</a></div><ol></ol>

Template Blogger HTML 5 Putih Cantik

Template Blogger HTML 5 Putih Cantik | Template benuansa batik dan putih ini, terlihat cantik dengan sendirinya. Template Blogger Gratis ini...

Baca selengkapnya »

Saya : Cosplayer Cantik Kelas Dunia

Cosplayer Cantik Kelas Dunia | Waw, Cosplayer ini banyak di bahas di forum - forum cosplay, makanya aku share disini. <span class="" id="result_box" lang="id"><span class="hps">SAYA</span> <span class="hps">adalah</span> <span class="hps">cosplaying</span> <span class="hps">sebagai</span> <span class="hps">Rinoa</span> <span class="hps">Heartilly</span> <span class="hps">dari</span><a href="http://www.bocahit.com/2013/05/cosplayer-keren-final-fantasy-vii.html" target="_blank"> <span class="hps">FINAL FANTASY</span> <span class="hps">VIII</span>.</a> <span class="hps">Rinoa</span> <span class="hps">Heartilly</span> <span class="hps">adalah</span> <span class="hps">perempuan</span> </span><span class="" id="result_box" lang="id"><span class="" id="result_box" lang="id"><span class="hps">protagonis </span></span> <span class="hps">utama</span>. <span class="hps">Dia adalah putri</span> <span class="hps">tujuh belas</span> <span class="hps">tahun</span> <span class="hps">Jenderal</span> <span class="hps">Caraway</span><span class="">, seorang</span> <span class="hps">perwira tinggi</span> <span class="hps">di tentara</span> <span class="hps">Galbadia</span>, <span class="hps">dan Julia</span> <span class="hps">Heartilly</span>, <span class="hps">seorang pianis</span> <span class="hps">dan penyanyi</span> <span class="hps">sukses</span>.</span><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv5cBjkOHyAhXwoas_3AkqFPhl1BJjiGHFl_bGREgot0gMTFtHmatX7jXqRfSszW-pxBx1Got-Orvrg-cUTAsm4Fn9VfcT_alA_nPOyYU9EoKfrp0BtobJNYNWwkQ7wL4tRqwqBvJ7kYSz/s1600/1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Saya : Cosplayer Cantik Kelas Dunia" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv5cBjkOHyAhXwoas_3AkqFPhl1BJjiGHFl_bGREgot0gMTFtHmatX7jXqRfSszW-pxBx1Got-Orvrg-cUTAsm4Fn9VfcT_alA_nPOyYU9EoKfrp0BtobJNYNWwkQ7wL4tRqwqBvJ7kYSz/s320/1.jpg" title="Saya : Cosplayer Cantik Kelas Dunia" width="213" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdWgXeN3C2A4gGxb1Zjm2FujXyRgoJ5Qaq31LeZHe9PYZYYAb9l1K85sbNux_5CE86R-Nbv49Riyt3bo6i6Rc5M_OEUUWn3c_Yy1KQmF9ElxIXekTlF5J_A-khgNzc3OtQHHutha5yEjOM/s1600/2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Saya : Cosplayer Cantik Kelas Dunia" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdWgXeN3C2A4gGxb1Zjm2FujXyRgoJ5Qaq31LeZHe9PYZYYAb9l1K85sbNux_5CE86R-Nbv49Riyt3bo6i6Rc5M_OEUUWn3c_Yy1KQmF9ElxIXekTlF5J_A-khgNzc3OtQHHutha5yEjOM/s320/2.jpg" title="Saya : Cosplayer Cantik Kelas Dunia" width="225" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO3wVnPegIhVHWUBbmSkgZvfsbPH8yGlyzWoVimfZj2GzvMX7xoLlvz7l6i7KFDU1KYiW9IJ_MrjQSFIXc9UQkksv4EEEDLMz5lBql-SLWPG8UV5xJlG8Jfut5s6u2oJ_WDg38Zzp_IQ-z/s1600/3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Saya : Cosplayer Cantik Kelas Dunia" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO3wVnPegIhVHWUBbmSkgZvfsbPH8yGlyzWoVimfZj2GzvMX7xoLlvz7l6i7KFDU1KYiW9IJ_MrjQSFIXc9UQkksv4EEEDLMz5lBql-SLWPG8UV5xJlG8Jfut5s6u2oJ_WDg38Zzp_IQ-z/s320/3.jpg" title="Saya : Cosplayer Cantik Kelas Dunia" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiASDH7hu1krBM1-XtNRJB6E2MjWWQY7IlG9ECKBJFw1HPZ7oetSmJPpRvNHCnlFIEYeKr9WF7y1-AR7otTY3bT55jUGf6TzHHe_oDWW6u___sdu_mUYfE6hq3IuMTkcI9XThRlbnpIgq0H/s1600/4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Saya : Cosplayer Cantik Kelas Dunia" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiASDH7hu1krBM1-XtNRJB6E2MjWWQY7IlG9ECKBJFw1HPZ7oetSmJPpRvNHCnlFIEYeKr9WF7y1-AR7otTY3bT55jUGf6TzHHe_oDWW6u___sdu_mUYfE6hq3IuMTkcI9XThRlbnpIgq0H/s320/4.jpg" title="Saya : Cosplayer Cantik Kelas Dunia" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIm8taE4eD2yr_uztT7xS04q217IWp-btgmCSEk4IGUt4ODIxnHLithcBRQMHguWzd5vdUoYHMv7pC98wYL_cNsh5PnRF4cAWXVvPciZpVW8-FjA7AlaNW5AISU8SnzdOCMtXtki_lTUZo/s1600/5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Saya : Cosplayer Cantik Kelas Dunia" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIm8taE4eD2yr_uztT7xS04q217IWp-btgmCSEk4IGUt4ODIxnHLithcBRQMHguWzd5vdUoYHMv7pC98wYL_cNsh5PnRF4cAWXVvPciZpVW8-FjA7AlaNW5AISU8SnzdOCMtXtki_lTUZo/s320/5.jpg" title="Saya : Cosplayer Cantik Kelas Dunia" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdZ1QzQFb0RGLn5TRt58NyZX2H5SuBENwwY_wuneNDJ9aUIzO6AlbDZF9vWjj6qbRJMkVNwIviY_MB-QNA-h53JM0iHQNnECQtvcNR7_MMrAUmQc6OJGmWJ43fJxzeqc2mMXEtpMpcjziv/s1600/6.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Saya : Cosplayer Cantik Kelas Dunia" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdZ1QzQFb0RGLn5TRt58NyZX2H5SuBENwwY_wuneNDJ9aUIzO6AlbDZF9vWjj6qbRJMkVNwIviY_MB-QNA-h53JM0iHQNnECQtvcNR7_MMrAUmQc6OJGmWJ43fJxzeqc2mMXEtpMpcjziv/s320/6.jpg" title="Saya : Cosplayer Cantik Kelas Dunia" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik8htTe47vk3Z2qJHxWBL5NQkZGa5ITvalB9ewhEN0ycg12tbsj41yP4IVGaOcLnr6Qphk8bJGnwWYxB_H3msBzvBYdSyMPj1048Q2sj7vUTTOzo7KMKzeLjM-CmpC4dNTamAz8h1z66MS/s1600/7.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Saya : Cosplayer Cantik Kelas Dunia" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik8htTe47vk3Z2qJHxWBL5NQkZGa5ITvalB9ewhEN0ycg12tbsj41yP4IVGaOcLnr6Qphk8bJGnwWYxB_H3msBzvBYdSyMPj1048Q2sj7vUTTOzo7KMKzeLjM-CmpC4dNTamAz8h1z66MS/s320/7.jpg" title="Saya : Cosplayer Cantik Kelas Dunia" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaY-Em3VICxkFkw-lTnzhvbBc4mhGm7Tgs1BwRbS387I1KQs10osNzxCCCDtHk-XstJtQvYIL9AbmoeAA2nhGJlJbhgM8T44zqkdHQdTWfTE_irbRd2Yz_6F4DqD6BONnJ-6CknYXfkvo2/s1600/8.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Saya : Cosplayer Cantik Kelas Dunia" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaY-Em3VICxkFkw-lTnzhvbBc4mhGm7Tgs1BwRbS387I1KQs10osNzxCCCDtHk-XstJtQvYIL9AbmoeAA2nhGJlJbhgM8T44zqkdHQdTWfTE_irbRd2Yz_6F4DqD6BONnJ-6CknYXfkvo2/s320/8.jpg" title="Saya : Cosplayer Cantik Kelas Dunia" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhLvPyLpaMhLOqT15yr_DINkriN2UfRiDZKlXe9JBhtEjmULBJuvc6qMhT4bGszrw3gQJLnUIxTiBAOFfHuf8B-EaZZ1Z3-8FBxt9FEh62ODIjM2wt-h6yHKoFP6g7PA-a8x29KdnBRB_4/s1600/9.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Saya : Cosplayer Cantik Kelas Dunia" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhLvPyLpaMhLOqT15yr_DINkriN2UfRiDZKlXe9JBhtEjmULBJuvc6qMhT4bGszrw3gQJLnUIxTiBAOFfHuf8B-EaZZ1Z3-8FBxt9FEh62ODIjM2wt-h6yHKoFP6g7PA-a8x29KdnBRB_4/s320/9.jpg" title="Saya : Cosplayer Cantik Kelas Dunia" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZwN9C1DuUxfkpsRGjr5duzRV-fWGjNMSOB1DW_7atZgdMK6r4dRY35KcyEHqUhVQKcxQm3Y-w6hDDRWyDlAv7PHnUmiG14FzEoUt1e-puFz-k3dmyELe2OMtgGI1V2fJgnPJ1U_vTXw81/s1600/10.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Saya : Cosplayer Cantik Kelas Dunia" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZwN9C1DuUxfkpsRGjr5duzRV-fWGjNMSOB1DW_7atZgdMK6r4dRY35KcyEHqUhVQKcxQm3Y-w6hDDRWyDlAv7PHnUmiG14FzEoUt1e-puFz-k3dmyELe2OMtgGI1V2fJgnPJ1U_vTXw81/s320/10.jpg" title="Saya : Cosplayer Cantik Kelas Dunia" /></a></div><br />Nah, 10 Foto Saya yang menjadi Cosplay Rinoa. Cantik dan terlihat genius. Kapan dapet pacar serupa nih?<br /><br />

Saya : Cosplayer Cantik Kelas Dunia

Cosplayer Cantik Kelas Dunia | Waw, Cosplayer ini banyak di bahas di forum - forum cosplay, makanya aku share disini. SAYA adalah cosplayi...

Baca selengkapnya »

Elegan Image Accordion Dengan CSS3 & Jquery

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinDhbuQ00aDPNF3-tMvKGHTZiooiqTjBDAKtHIl_EPi5uyzLiX8D56KNJ75FzKchUIfBr4L0y7215hvDV3CrCl7f-q2tkYus018HJ-VueVAmYCE92TdtfnVW3Goq26Um-Xzey5xCoPHeqn/s666/Capture.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Elegan Image Accordion Dengan CSS3 & Jquery" border="0" height="239" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinDhbuQ00aDPNF3-tMvKGHTZiooiqTjBDAKtHIl_EPi5uyzLiX8D56KNJ75FzKchUIfBr4L0y7215hvDV3CrCl7f-q2tkYus018HJ-VueVAmYCE92TdtfnVW3Goq26Um-Xzey5xCoPHeqn/s320/Capture.PNG" title="Elegan Image Accordion Dengan CSS3 & Jquery" width="320" /></a></div><div style="text-align: left;">Elegan Image Accordion Dengan CSS3 & Jquery | Image Accordion ini, sebagian codenya ada dari template jhony wuss dari mas kolis. Sedikit menggunakan JS dan CSS, kalau ini di pasang di blog, tidak terlalu menambah berat badan blog alias loading enteng. <br /><h3>CSS, Image Accordion</h3><pre class="brush:js;"><style type="text/css"><br />ul.accordion{<br />    list-style:none;   <br />    position:relative;<br />    right:80px;<br />    top:0px;<br />    font-family: Cambria, serif;<br />    font-size: 16px;<br />    font-style: italic;<br />    line-height: 1.5em;<br />}<br />ul.accordion li{<br />    float:right;<br />    width:115px;<br />    height:480px;<br />    display:block;<br />    border-right:2px solid #fff;<br />    border-bottom:2px solid #fff;<br />    background-color:#fff;<br />    background-repeat:no-repeat;<br />    background-position:center center;<br />    position:relative;<br />    overflow:hidden;<br />    cursor:pointer;<br />    -moz-box-shadow:1px 3px 15px #555;<br />    -webkit-box-shadow:1px 3px 15px #555;<br />    box-shadow:1px 3px 15px #555;<br />}<br />ul.accordion li.bg1{<br />    background-image:url(https://sphotos-b.xx.fbcdn.net/hphotos-prn2/p480x480/972359_657990040884651_1321185070_n.png);} /*URL GAMBAR*/<br />ul.accordion li.bg2{<br />    background-image:url(https://sphotos-b.xx.fbcdn.net/hphotos-prn2/p480x480/972359_657990040884651_1321185070_n.png); /*URL GAMBAR*/<br />}<br />ul.accordion li.bg3{<br />    background-image:url(https://sphotos-b.xx.fbcdn.net/hphotos-prn2/p480x480/972359_657990040884651_1321185070_n.png); /*URL GAMBAR*/<br />}<br />ul.accordion li.bg4{<br />    background-image:url(https://sphotos-b.xx.fbcdn.net/hphotos-prn2/p480x480/972359_657990040884651_1321185070_n.png); /*URL GAMBAR*/<br />}<br />ul.accordion li.bleft{<br />    border-left:2px solid #fff;<br />}<br />ul.accordion li .heading{<br />    background-color:#fff;<br />    padding:10px;<br />    margin-top:60px;<br />    opacity:0.9;<br />    text-transform:uppercase;<br />    font-style:normal;<br />    font-weight:bold;<br />    letter-spacing:1px;<br />    font-size:14px;<br />    color:#444;<br />    text-align:center;<br />    text-shadow:-1px -1px 1px #ccc;<br />}<br />ul.accordion li .description{<br />    position:absolute;<br />    width:480px;<br />    height:175px;<br />    bottom:0px;<br />    left:0px;<br />    display:none;<br />}<br />ul.accordion li .description h2{<br />    text-transform:uppercase;<br />    font-style:normal;<br />    font-weight:bold;<br />    letter-spacing:1px;<br />    font-size:45px;<br />    color:#444;<br />    text-align:left;<br />    margin:0px 0px 15px 20px;<br />    text-shadow:-1px -1px 1px #ccc;<br />}<br />ul.accordion li .description p{<br />    line-height:14px;<br />    font-color:#000;<br />    margin:10px 22px;<br />    font-family: "Trebuchet MS", sans-serif;<br />    font-size: 12px;<br />    font-style: italic;<br />    font-weight: normal;<br />    text-transform: none;<br />    letter-spacing: normal;<br />    line-height: 1.6em;<br />}<br />ul.accordion li .description a{<br />    position:absolute;<br />    bottom:5px;<br />    left:20px;<br />    text-transform:uppercase;<br />    font-style:normal;<br />    font-size:11px;<br />    text-decoration:none;<br />    color:#888;<br />}<br />ul.accordion li .description a:hover{<br />    color:#333;<br />    text-decoration:underline;<br />}<br /><br />ul.accordion li .bgDescription{<br />    background:transparent url(http://s20.postimg.org/h4kckk0m5/bg_Description.png) repeat-x top left;<br />    height:340px;<br />    position:absolute;<br />    bottom:0px;<br />    left:0px;<br />    width:100%;<br />    display:none;<br />}<br /><br /></style></pre><h3>HTML, Image Accordion</h3><pre class="brush:js;"><ul class="accordion" id="accordion"><br /><li class="bg1"><br /><div class="heading"><br />Delete</div><br /><div class="bgDescription"><br /></div><br /><div class="description"><br /><h2>Delete</h2><br /><p>Tulisan Anda</p><br /><br /><a href="http://www.blogger.com/">more →</a><br /></div><br /></li><br /><li class="bg2"><br /><div class="heading"><br />Write</div><br /><div class="bgDescription"><br /></div><br /><div class="description"><br /><h2>Write</h2><br /><p>Tulisan Anda</p><br /><br /><a href="http://www.blogger.com/">more →</a><br /></div><br /></li><br /><li class="bg3"><br /><div class="heading"><br />Wammy</div><br /><div class="bgDescription"><br /></div><br /><div class="description"><br /><h2>Wammy</h2><br /><p>Tulisan Anda</p><br /><br /><a href="http://www.blogger.com/">more →</a><br /></div><br /></li><br /><li class="bg4 bleft"><br /><div class="heading">Admin</div><br /><div class="bgDescription"><br /></div><br /><div class="description"><br /><h2>Admin</h2><br /><p>Tulisan Anda</p><br /><br /><a href="http://www.blogger.com/">more →</a><br /></div><br /></li><br /></ul></pre><h3>JS, Image Accordion</h3><pre class="brush:js;"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script><br />        <script type="text/javascript"><br />            $(function() {<br />                $('#accordion > li').hover(<br />                    function () {<br />                        var $this = $(this);<br />                        $this.stop().animate({'width':'480px'},500);<br />                        $('.heading',$this).stop(true,true).fadeOut();<br />                        $('.bgDescription',$this).stop(true,true).slideDown(500);<br />                        $('.description',$this).stop(true,true).fadeIn();<br />                    },<br />                    function () {<br />                        var $this = $(this);<br />                        $this.stop().animate({'width':'115px'},1000);<br />                        $('.heading',$this).stop(true,true).fadeIn();<br />                        $('.description',$this).stop(true,true).fadeOut(500);<br />                        $('.bgDescription',$this).stop(true,true).slideUp(700);<br />                    }<br />                );<br />            });<br />        </script></pre><br />Percobaan ini, dilakukan pada Dreamweaver, jadi belum tau apakah bisa valid di blogger.<br /><br /></div><div style="text-align: center;"><a class="button" href="http://iframe-wammy.blogspot.com/2013/07/ul.html" target="_blank">ISLUSTRASI</a></div>

Elegan Image Accordion Dengan CSS3 & Jquery

Elegan Image Accordion Dengan CSS3 & Jquery | Image Accordion ini, sebagian codenya ada dari template jhony wuss dari mas kolis. Sedikit...

Baca selengkapnya »

Membuat Quick Search Dengan JSON Blogger

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG0sY82KF9iXAzcSCdYPyGWGxBNo2i5Z2pxgzmjOhQ1VNiWh9_fiLMH49jmAyJYxB7NrTs3-Sfg3B7CasHPocqwpXj273-rY-Bl1BPb3ESBhsTMUGjB69B5h8SZ9qQifKTwnWvJOorptMf/s465/Capture.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Quick Search Dengan JSON Blogger" border="0" height="273" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG0sY82KF9iXAzcSCdYPyGWGxBNo2i5Z2pxgzmjOhQ1VNiWh9_fiLMH49jmAyJYxB7NrTs3-Sfg3B7CasHPocqwpXj273-rY-Bl1BPb3ESBhsTMUGjB69B5h8SZ9qQifKTwnWvJOorptMf/s320/Capture.PNG" title="Membuat Quick Search Dengan JSON Blogger" width="320" /></a></div><br />Membuat Quick Search Dengan JSON Blogger | Kali ini, saya ingin berbagidari tutorial sahabat saya, Mas Taufik. Masalah Quick Search, dimana blogger mengijinkan untuk mencari query di dalam feed dengan kata kunci secara acak. Ini tentu memudahkan visitor ketika mencari artikel kita.<br /><br />1. Letakkan Kode CSS di atas ]]></b:skin> <br /><h3 style="background-attachment: scroll; background-color: transparent; background-image: url(https://sites.google.com/site/republicofnote/image/RON+PostTitle1.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Trebuchet MS', sans-serif; font-size: 20px; line-height: 1; margin: 15px 3px; padding: 3px 10px 3px 30px; text-align: left; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;"><span style="color: red;">CSS, Quick Search JSON Blogger</span></h3><pre class="brush:js;">#search-form-feed {<br /> width:200px; /* lebar kotak penelusuran */<br /> position:relative;<br /> margin:0 0 10px;<br /> padding:0 0;<br /> font:normal normal 11px Arial,Sans-Serif;<br /> color:#333;<br />}<br /><br />#feed-q-input {<br /> display:block;<br /> width:100%;<br /> border:2px solid #bbb;<br /> background-color:white;<br /> padding:5px 5px;<br /> font:normal bold 13px Tahoma,Arial,Sans-Serif;<br /> color:#ccc;<br /> margin:0 0;<br /> -webkit-border-radius:4px;<br /> -moz-border-radius:4px;<br /> border-radius:4px;<br /> -webkit-box-shadow:inset 0 1px 5px rgba(0,0,0,.2);<br /> -moz-box-shadow:inset 0 1px 5px rgba(0,0,0,.2);<br /> box-shadow:inset 0 1px 5px rgba(0,0,0,.2);<br /> -webkit-box-sizing:border-box;<br /> -moz-box-sizing:border-box;<br /> box-sizing:border-box;<br />}<br /><br />#feed-q-input:focus {<br /> border-color:#0D6786;<br /> color:#333;<br /> outline:none;<br /> -webkit-box-shadow:0 0 5px #153E95,0 0 7px #153E95;<br /> -moz-box-shadow:0 0 5px #153E95,0 0 7px #153E95;<br /> box-shadow:0 0 5px #153E95,0 0 7px #153E95;<br />}<br /><br />#search-result-container {<br /> width:400px;<br /> height:300px;<br /> overflow:auto;<br /> position:absolute;<br /> top:100%;<br /> right:0;<br /> z-index:999;<br /> background-color:#E5EDF7;<br /> border:2px solid white;<br /> padding:10px 10px 0;<br /> margin:10px 0 0;<br /> -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);<br /> -moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);<br /> box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);<br /> -webkit-border-radius:5px;<br /> -moz-border-radius:5px;<br /> border-radius:5px;<br /> display:none;<br />}<br /><br />#search-result-container mark {<br /> background-color:yellow;<br /> color:black;<br />}<br /><br />#search-result-container a {<br /> text-decoration:none;<br /> color:#0D3E71;<br /> font-weight:bold;<br /> font-size:12px;<br /> display:block;<br />}<br /><br />#search-result-container a:hover {<br /> color:#052748;<br />}<br /><br />#search-result-container h4 {<br /> margin:0 0 10px;<br /> font:normal bold 12px 'Trebuchet MS',Arial,Sans-Serif;<br /> color:#B50001;<br />}<br /><br />#search-result-container ol {<br /> background:transparent;<br /> border:none;<br /> margin:0 0 10px;<br /> padding:0 0;<br />}<br /><br />#search-result-container li {<br /> margin:0 0 1px;<br /> padding:7px 8px;<br /> list-style:none;<br /> border:1px solid #B7C1CE;<br /> background-color:white;<br /> overflow:hidden;<br /> word-wrap:break-word;<br />}<br /><br />#search-result-container li img {<br /> display:block;<br /> float:left;<br /> margin:0 10px 4px 0;<br /> border:1px solid #B7C1CE;<br /> background-color:#F5F5F5;<br /> padding:2px 2px;<br />}<br /><br />#search-result-loader {<br /> position:absolute;<br /> top:100%;<br /> left:5px;<br /> z-index:999;<br /> background-color:#0D6786;<br /> color:white;<br /> padding:3px 5px;<br /> margin:-2px 0 0;<br /> font:normal bold 10px Arial,Sans-Serif;<br /> -webkit-border-radius:0 0 3px 3px;<br /> -moz-border-radius:0 0 3px 3px;<br /> border-radius:0 0 3px 3px;<br /> display:none;<br />}<br /></pre>2. Letakkan kode HTML & JS di dalam widget blog.<br /><h3 style="background-attachment: scroll; background-color: transparent; background-image: url(https://sites.google.com/site/republicofnote/image/RON+PostTitle1.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Trebuchet MS', sans-serif; font-size: 20px; line-height: 1; margin: 15px 3px; padding: 3px 10px 3px 30px; text-align: left; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;"><span style="color: red;">HTML & Javascript, Quick Search JSON Blogger</span></h3><pre class="brush:js;"><div id="search-form-feed"><br />    <form action="/search" onsubmit="return updateScript();"><br />        <input name="q" type="text" value="Telusuri..." id="feed-q-input" onkeyup="resetField();" onfocus="this.value='';"/><br />    </form><br />    <div id="search-result-container"></div><br />    <div id="search-result-loader">Loading...</div><br /></div><br /><script type="text/javascript"><br />//<![CDATA[<br />var searchFormConfig = {<br />    url: "http://nama_blog.blogspot.com", // URL Blog<br />    numPost: 9999, // Jumlah maksimal temuan<br />    summaryPost: true, // 'true' jika ingin menampilkan deskripsi posting<br />    summaryLength: 400, // Jumlah karakter ringkasan posting<br />    resultTitle: "Hasil penelusuran untuk kata kunci", // Judul hasil pencarian<br />    noResult: "No result", // Deskripsi 'tak ditemukan'<br />    resultThumbnail: true, // 'true' untuk menampilkan thumbnail posting<br />    thumbSize: 40, // Ukuran & resolusi thumbnail<br />    fallbackThumb: "http://reader-download.googlecode.com/svn/trunk/images/no-image-72x72.png" // Fallback thumbnail untuk posting tak bergambar<br />};<br />//]]><br /></script><br /><script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/blogger-quick-search.js"></script></pre><br /><div style="text-align: center;"><a alt="demo" class="button" href="http://iframe-wammy.blogspot.com/2013/07/json-quick-search.html" target="_blank" title="Ilustrasi">Ilustrasi</a></div>

Membuat Quick Search Dengan JSON Blogger

Membuat Quick Search Dengan JSON Blogger | Kali ini, saya ingin berbagidari tutorial sahabat saya, Mas Taufik. Masalah Quick Search, dimana ...

Baca selengkapnya »

Membuat Form Login Cantik Dan Simple

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4ptOnDNG1StBZECmVM0bMar6_4uxvR6qI4tD2VtnSw7kSBSvDEr_yGk_H8E_S9tfcgheHFy20k_-Uj8VBe5npNIe_UXgpp5MoHorkU7WdQ7c2M8BFlbpSi5Qu-JBxCjZlfLimtRmz2A88/s312/Capture.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Form Login Cantik Dan Simple" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4ptOnDNG1StBZECmVM0bMar6_4uxvR6qI4tD2VtnSw7kSBSvDEr_yGk_H8E_S9tfcgheHFy20k_-Uj8VBe5npNIe_UXgpp5MoHorkU7WdQ7c2M8BFlbpSi5Qu-JBxCjZlfLimtRmz2A88/s312/Capture.PNG" title="Membuat Form Login Cantik Dan Simple" /></a></div><br />Membuat Form Login Cantik Dan Simple | Kalau di artikel sebelumnya, adalah form login, kali ini juga form login.hehe..Dengan Javascript yang sama, dan sebernarnya HTMLnya pun sama. Ini bisa di pakai di Form Login atau Form Signup, tergantung pemakaian.<br /><br /><h3 style="background-attachment: scroll; background-color: transparent; background-image: url(https://sites.google.com/site/republicofnote/image/RON+PostTitle1.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Trebuchet MS', sans-serif; font-size: 20px; line-height: 1; margin: 15px 3px; padding: 3px 10px 3px 30px; text-align: left; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;"><span style="color: red;">JS, Form Login Cantik Dan Simple</span></h3>Anda bisa download dan lihat script via Dropbox. Atau sama seperti punya saya. (Upload Via Yourjavascript.com).<br /><pre><script type="text/javascript" src="http://yourjavascript.com/232147282/modernizr-custom-63321.js"></script></pre><br /><div style="text-align: center;"> <a alt="js" class="button" href="https://www.dropbox.com/s/s85gd77xln8a1ys/modernizr.custom.63321.js" title="JSnya">Download JS Via Dropbox</a></div><h3 style="background-attachment: scroll; background-color: transparent; background-image: url(https://sites.google.com/site/republicofnote/image/RON+PostTitle1.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Trebuchet MS', sans-serif; font-size: 20px; line-height: 1; margin: 15px 3px; padding: 3px 10px 3px 30px; text-align: left; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;"><span style="color: red;">CSS3, Form Login Cantik Dan Simple</span></h3><pre class="brush:js;"><style type="text/css"><br />*,<br />*:after,<br />*:before {<br />    -webkit-box-sizing: border-box;<br />    -moz-box-sizing: border-box;<br />    -ms-box-sizing: border-box;<br />    -o-box-sizing: border-box;<br />    box-sizing: border-box;<br />    padding: 0;<br />    margin: 0;<br />}<br /><br />.clearfix:after {<br />    content: "";<br />    display: table;<br />    clear: both;<br />}<br /><br />.bocahitform {<br />    /* Size and position */<br />    width: 300px;<br />    margin: 60px auto 30px;<br />    padding: 10px;<br />    position: relative;<br /><br />    /* Font styles */<br />    font-family: 'Raleway', 'Lato', Arial, sans-serif;<br />    color: white;<br />    text-shadow: 0 2px 1px rgba(0,0,0,0.3);<br />}<br /><br />.bocahitform, #open {<br />    font-size: 22px;<br />    padding-bottom: 20px;<br />}<br /><br />.bocahitform input[type=text],<br />.bocahitform input[type=password] {<br />    /* Size and position */<br />    width: 100%;<br />    padding: 8px 4px 8px 10px;<br />    margin-bottom: 15px;<br /><br />    /* Styles */<br />    border: 1px solid #4e3043; /* Fallback */<br />    border: 1px solid rgba(78,48,67, 0.8);<br />    background: rgba(0,0,0,0.15);<br />    border-radius: 2px;<br />    box-shadow: <br />        0 1px 0 rgba(255,255,255,0.2), <br />        inset 0 1px 1px rgba(0,0,0,0.1);<br />    -webkit-transition: all 0.3s ease-out;<br />    -moz-transition: all 0.3s ease-out;<br />    -ms-transition: all 0.3s ease-out;<br />    -o-transition: all 0.3s ease-out;<br />    transition: all 0.3s ease-out;<br /><br />    /* Font styles */<br />    font-family: 'Raleway', 'Lato', Arial, sans-serif;<br />    color: #fff;<br />    font-size: 13px;<br />}<br /><br />/* Placeholder style (from http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css) */<br /><br />.bocahitform input::-webkit-input-placeholder {<br />    color: rgba(37,21,26,0.5);<br />    text-shadow: 0 1px 0 rgba(255,255,255,0.15);<br />}<br /><br />.bocahitform input:-moz-placeholder {<br />    color: rgba(37,21,26,0.5);<br />    text-shadow: 0 1px 0 rgba(255,255,255,0.15);<br />}<br /><br />.bocahitform input:-ms-input-placeholder {<br />    color: rgba(37,21,26,0.5);<br />    text-shadow: 0 1px 0 rgba(255,255,255,0.15);<br />}<br /><br />.bocahitform input[type=text]:hover,<br />.bocahitform input[type=password]:hover {<br />    border-color: #333;<br />}<br /><br />.bocahitform input[type=text]:focus,<br />.bocahitform input[type=password]:focus,<br />.bocahitform input[type=submit]:focus {<br />    box-shadow: <br />        0 1px 0 rgba(255,255,255,0.2), <br />        inset 0 1px 1px rgba(0,0,0,0.1),<br />        0 0 0 3px rgba(255,255,255,0.15);<br />    outline: none;<br />}<br /><br />/* Fallback */<br />.no-boxshadow .bocahitform input[type=text]:focus,<br />.no-boxshadow .bocahitform input[type=password]:focus {<br />    outline: 1px solid white;<br />}<br /><br />.bocahitform input[type=submit] {<br />    /* Size and position */<br />    width: 100%;<br />    padding: 8px 5px;<br />   <br />    /* Styles */<br />    background: #634056;<br />    background: -moz-linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));<br />    background: -ms-linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));<br />    background: -o-linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));<br />    background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(99,64,86,0.5)), to(rgba(76,49,65,0.7)));<br />    background: -webkit-linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));<br />    background: linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));   <br />    border-radius: 5px;<br />    border: 1px solid #4e3043;<br />    box-shadow: inset 0 1px rgba(255,255,255,0.4), 0 2px 1px rgba(0,0,0,0.1);<br />    cursor: pointer;<br />    -webkit-transition: all 0.3s ease-out;<br />    -moz-transition: all 0.3s ease-out;<br />    -ms-transition: all 0.3s ease-out;<br />    -o-transition: all 0.3s ease-out;<br />    transition: all 0.3s ease-out;<br /><br />    /* Font styles */<br />    color: white;<br />    text-shadow: 0 1px 0 rgba(0,0,0,0.3);<br />    font-size: 16px;<br />    font-weight: bold;<br />    font-family: 'Raleway', 'Lato', Arial, sans-serif;<br />}<br /><br />.bocahitform input[type=submit]:hover {<br />    box-shadow: <br />        inset 0 1px rgba(255,255,255,0.2), <br />        inset 0 20px 30px rgba(99,64,86,0.5);<br />}<br /><br />/* Fallback */<br />.no-boxshadow .bocahitform input[type=submit]:hover {<br />    background: #594642;<br />}<br /><br />.bocahitform label {<br />    display: none;<br />    padding: 0 0 5px 2px;<br />    cursor: pointer;<br />}<br /><br />.bocahitform label:hover ~ input {<br />    border-color: #333;<br />}<br /><br />.no-placeholder .bocahitform label {<br />    display: block;<br />}<br /><br /></style> </pre><blockquote class="tr_bq">Anda bisa mengganti #open, dengan tag <H1>, bentuknya menjadi .bocahitform h1 {</blockquote><h3 style="background-attachment: scroll; background-color: transparent; background-image: url(https://sites.google.com/site/republicofnote/image/RON+PostTitle1.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Trebuchet MS', sans-serif; font-size: 20px; line-height: 1; margin: 15px 3px; padding: 3px 10px 3px 30px; text-align: left; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;"><span style="color: red;">HTML, Form Login Cantik Dan Simple</span></h3><pre class="brush:js;"><section class="main"><br />                <form class="bocahitform"><br />                    <div id="open">Login or Register</div><br />                    <p><br />                        <label for="login">Username or email</label><br />                        <input type="text" name="login" placeholder="Username or email" required><br />                    </p><br />                    <p><br />                        <label for="password">Password</label><br />                        <input type="password" name='password' placeholder="Password" required> <br />                    </p><br /><br />                    <p><br />                        <input type="submit" name="submit" value="Continue"><br />                    </p>      <br />                </form>​<br />            </section></pre><br /><div style="text-align: center;"><a alt="demo" class="button" href="http://iframe-wammy.blogspot.com/2013/07/cantik-dan-simple.html" title="DEMO">ISLUSTRASI</a></div>

Membuat Form Login Cantik Dan Simple

Membuat Form Login Cantik Dan Simple | Kalau di artikel sebelumnya, adalah form login, kali ini juga form login.hehe..Dengan Javascript yang...

Baca selengkapnya »

Modifikasi Form Login Dengan CSS3 Dan Javascript

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPXMSXNYR1BAYNM6J2Q6oNB9lzAy7entYNasdZ6HnQNXRpepg0g2LAQXAk9sYg5N0_Ev_QotdFDduG8eovm-zSmFFi4dGKmxpd3jXdXfnf70yH5bMoaHQuWan4ZhvkSeNOH0UvHNUEG5c-/s324/Capture.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Modifikasi Form Login Dengan CSS3 Dan Javascript" border="0" height="167" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPXMSXNYR1BAYNM6J2Q6oNB9lzAy7entYNasdZ6HnQNXRpepg0g2LAQXAk9sYg5N0_Ev_QotdFDduG8eovm-zSmFFi4dGKmxpd3jXdXfnf70yH5bMoaHQuWan4ZhvkSeNOH0UvHNUEG5c-/s320/Capture.PNG" title="Modifikasi Form Login Dengan CSS3 Dan Javascript" width="320" /></a></div><br />Modifikasi Form Login Dengan CSS3 Dan Javascript | Form login biasa muncul di web dinamis. Yang awalnya hanya kumpulan dari <table> dan <input>, kali ini hanya <input> yang di modifikasi dengan CSS3 dan JS. Hanya sedikit dan tidak terlalu rumit. Pemakaian yang hemat tempat.<br /><br /><h3 style="background-attachment: scroll; background-color: transparent; background-image: url(https://sites.google.com/site/republicofnote/image/RON+PostTitle1.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Trebuchet MS', sans-serif; font-size: 20px; line-height: 1; margin: 15px 3px; padding: 3px 10px 3px 30px; text-align: left; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;"><span style="color: red;">JS, Form Login</span></h3>Anda bisa download dan lihat script via Dropbox. Atau sama seperti punya saya. (Upload Via Yourjavascript.com).<br /><pre><script type="text/javascript" src="http://yourjavascript.com/232147282/modernizr-custom-63321.js"></script></pre><br /><div style="text-align: center;"> <a alt="js" class="button" href="https://www.dropbox.com/s/s85gd77xln8a1ys/modernizr.custom.63321.js" title="JSnya">Download JS Via Dropbox</a></div><h3 style="background-attachment: scroll; background-color: transparent; background-image: url(https://sites.google.com/site/republicofnote/image/RON+PostTitle1.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Trebuchet MS', sans-serif; font-size: 20px; line-height: 1; margin: 15px 3px; padding: 3px 10px 3px 30px; text-align: left; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;"><span style="color: red;">CSS3, Form Login</span></h3><pre class="brush:js;"><style type="text/css"><br />*,<br />*:after,<br />*:before {<br />    -webkit-box-sizing: border-box;<br />    -moz-box-sizing: border-box;<br />    -ms-box-sizing: border-box;<br />    -o-box-sizing: border-box;<br />    box-sizing: border-box;<br />    padding: 0;<br />    margin: 0;<br />}<br /><br />.clearfix:after {<br />    content: "";<br />    display: table;<br />    clear: both;<br />}<br /><br />.bocahform {<br />    font-family: 'Coda';<br />    font-weight: 400;<br />    /* Size and position */<br />    width: 300px;<br />    position: relative;<br />    margin: 60px auto 30px;<br />    padding: 10px;<br />    overflow: hidden;<br /><br />    /* Styles */<br />    background: #111; <br />    border-radius: 0.4em;<br />    border: 1px solid #191919;<br />    box-shadow: <br />        inset 0 0 2px 1px rgba(255,255,255,0.08), <br />        0 16px 10px -8px rgba(0, 0, 0, 0.6);<br />}<br /><br />.bocahform label {<br />    /* Size and position */<br />    width: 50%;<br />    float: left;<br />    padding-top: 9px;<br /><br />    /* Styles */<br />    color: #ddd;<br />    font-size: 12px;<br />    text-transform: uppercase;<br />    letter-spacing: 1px;<br />    text-shadow: 0 1px 0 #000;<br />    text-indent: 10px;<br />    font-weight: 700;<br />    cursor: pointer;<br />}<br /><br />.bocahform input[type=text],<br />.bocahform input[type=password] {<br />    /* Size and position */<br />    width: 50%;<br />    float: left;<br />    padding: 8px 5px;<br />    margin-bottom: 10px;<br />    font-size: 12px;<br /><br />    /* Styles */<br />    background: #1f2124; /* Fallback */<br />    background: -moz-linear-gradient(#1f2124, #27292c);<br />    background: -ms-linear-gradient(#1f2124, #27292c);<br />    background: -o-linear-gradient(#1f2124, #27292c);<br />    background: -webkit-gradient(linear, 0 0, 0 100%, from(#1f2124), to(#27292c));<br />    background: -webkit-linear-gradient(#1f2124, #27292c);<br />    background: linear-gradient(#1f2124, #27292c);   <br />    border: 1px solid #000;<br />    box-shadow:<br />        0 1px 0 rgba(255,255,255,0.1);<br />    border-radius: 3px;<br /><br />    /* Font styles */<br />    font-family: 'Ubuntu', 'Lato', sans-serif;<br />    color: #fff;<br /><br />}<br /><br />.bocahform input[type=text]:hover,<br />.bocahform input[type=password]:hover,<br />.bocahform label:hover ~ input[type=text],<br />.bocahform label:hover ~ input[type=password] {<br />    background: #27292c;<br />}<br /><br />.bocahform input[type=text]:focus, <br />.bocahform input[type=password]:focus {<br />    box-shadow: inset 0 0 2px #000;<br />    background: #494d54;<br />    border-color: #51cbee;<br />    outline: none; /* Remove Chrome outline */<br />}<br /><br />.bocahform p:nth-child(3),<br />.bocahform p:nth-child(4) {<br />    float: left;<br />    width: 50%;<br />}<br /><br />.bocahform label[for=remember] {<br />    width: auto;<br />    float: none;<br />    display: inline-block;<br />    text-transform: capitalize;<br />    font-size: 11px;<br />    font-weight: 400;<br />    letter-spacing: 0px;<br />    text-indent: 2px;<br />}<br /><br />.bocahform input[type=checkbox] {<br />    margin-left: 10px;<br />    vertical-align: middle;<br />}<br /><br />.bocahform input[type=submit] {<br />    /* Width and position */<br />    width: 100%;<br />    padding: 8px 5px;<br />  <br />    /* Styles */<br />    border: 1px solid #0273dd; /* Fallback */<br />    border: 1px solid rgba(0,0,0,0.4);<br />    box-shadow:<br />        inset 0 1px 0 rgba(255,255,255,0.3),<br />        inset 0 10px 10px rgba(255,255,255,0.1);<br />    border-radius: 3px;<br />    background: #38a6f0;<br />    cursor:pointer;<br />  <br />    /* Font styles */<br />    font-family: 'Ubuntu', 'Lato', sans-serif;<br />    color: white;<br />    font-weight: 700;<br />    font-size: 15px;<br />    text-shadow: 0 -1px 0 rgba(0,0,0,0.8);<br />}<br /><br />.bocahform input[type=submit]:hover { <br />    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);<br />}<br /><br />.bocahform input[type=submit]:active { <br />    background: #287db5;<br />    box-shadow: inset 0 0 3px rgba(0,0,0,0.6);<br />    border-color: #000; /* Fallback */<br />    border-color: rgba(0,0,0,0.9);<br />}<br /><br />.no-boxshadow .bocahform input[type=submit]:hover {<br />    background: #2a92d8;<br />}<br /><br />.bocahform:after {<br />    /* Size and position */<br />    content: "";<br />    height: 1px;<br />    width: 33%;<br />    position: absolute;<br />    left: 20%;<br />    top: 0;<br /><br />    /* Styles */<br />    background: -moz-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);<br />    background: -ms-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);<br />    background: -o-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);<br />    background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), color-stop(0.25, #444), color-stop(0.5, #b6b6b8), color-stop(0.75, #444), to(transparent));<br />    background: -webkit-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);<br />    background: linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);<br />}<br /><br />.bocahform:before {<br />    /* Size and position */<br />    content: "";<br />    width: 8px;<br />    height: 5px;<br />    position: absolute;<br />    left: 34%;<br />    top: -7px;<br />    <br />    /* Styles */<br />    border-radius: 50%;<br />    box-shadow: 0 0 6px 4px #fff;<br />}<br /><br />.bocahform p:nth-child(1):before{<br />    /* Size and position */<br />    content:"";<br />    width:250px;<br />    height:100px;<br />    position:absolute;<br />    top:0;<br />    left:45px;<br /><br />    /* Styles */<br />    -webkit-transform: rotate(75deg);<br />    -moz-transform: rotate(75deg);<br />    -ms-transform: rotate(75deg);<br />    -o-transform: rotate(75deg);<br />    transform: rotate(75deg);<br />    background: -moz-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));<br />    background: -ms-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));<br />    background: -o-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));<br />    background: -webkit-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));<br />    background: linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));<br />    pointer-events:none;<br />}<br /><br />.no-pointerevents .bocahform p:nth-child(1):before {<br />    display: none;<br />}<br /></style> </pre><br /><h3 style="background-attachment: scroll; background-color: transparent; background-image: url(https://sites.google.com/site/republicofnote/image/RON+PostTitle1.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Trebuchet MS', sans-serif; font-size: 20px; line-height: 1; margin: 15px 3px; padding: 3px 10px 3px 30px; text-align: left; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;"><span style="color: red;">HTML, Form Login</span></h3><pre class="brush:js;"><section class="main"><br />                <form class="bocahform"><br />                    <p class="clearfix"><br />                        <label for="login">Username</label><br />                        <input type="text" name="login" id="login" placeholder="Username"><br />                    </p><br />                    <p class="clearfix"><br />                        <label for="password">Password</label><br />                        <input type="password" name="password" id="password" placeholder="Password"> <br />                    </p><br />                    <p class="clearfix"><br />                        <input type="checkbox" name="remember" id="remember"><br />                        <label for="remember">Remember me</label><br />                    </p><br />                    <p class="clearfix"><br />                        <input type="submit" name="submit" value="Sign in"><br />                    </p>      <br />                </form>​<br />            </section></pre><br /><div style="text-align: center;"><a alt="demo" class="button" href="http://iframe-wammy.blogspot.com/2013/06/afterbefore-webkit-box-sizing-border.html" target="_blank" title="ILUSTRASI">ILUSTRASI</a></div>

Modifikasi Form Login Dengan CSS3 Dan Javascript

Modifikasi Form Login Dengan CSS3 Dan Javascript | Form login biasa muncul di web dinamis. Yang awalnya hanya kumpulan dari <table> da...

Baca selengkapnya »