Template Blogger W#1 HTML5 Untuk Blog Guru

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDDinz7aRZbcNhA_bFNR01BZal74f1GAABgYCgDrt_gnTfsJ80nZTigd6h-6nMASPEWC-GiJpGGnjEe47rwl22ufctRuFmy5bZmZoTCk4QAsx1Ce0qFgGmDej8887DxuxGTorAy1hid0oY/s1460/W%231.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Template Blogger W#1 HTML5 Untuk Blog Guru" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDDinz7aRZbcNhA_bFNR01BZal74f1GAABgYCgDrt_gnTfsJ80nZTigd6h-6nMASPEWC-GiJpGGnjEe47rwl22ufctRuFmy5bZmZoTCk4QAsx1Ce0qFgGmDej8887DxuxGTorAy1hid0oY/s320/W%231.png" title="Template Blogger W#1 HTML5 Untuk Blog Guru" width="295" /></a></div><br />Template Blogger W1 HTML5 Untuk Blog Guru | Alhamdulillah, kejadian juga. Dari dulu pengen banget yang namanya Design Template Blogger. Ini adalah template perdana. Karna itu namanya W1 alias Wammy #1. Template ini, dibuat dengan HTML5. Kenapa harus HTML5? jawaban <a href="http://www.bocahit.com/2013/01/kenapa-wammy-san-pilih-html5.html" target="_blank">disini</a>. Blog ini, saya tujukan ke pada guru - guru yang memiliki blog untuk kepentingan mengajar. Kenapa harus guru? saya sendiri juga tidak tahu kenapa. Template yang sangat sederhana, dan memiliki :<br /><ol><li>Fast Loading</li><li>Auto Readmore</li><li>Search JSON</li><li>Recent Post JSON</li><li>Recent Comment JSON</li><li>Threaded Comment</li><li>Related Post</li><li>Breadcrumb</li><li>SEO <a href="http://chkme.com/seo-my-dang.blogspot.com" title="SEO Reports for my-dang.blogspot.com"><img alt="SEO Reports for my-dang.blogspot.com" src="http://chkme.com/seo-my-dang.blogspot.com.png" title="SEO Reports for my-dang.blogspot.com" /></a></li></ol><br />Juga memakai model Search JSON Blogger. Sehingga pencarian jauh lebih cepat. Ditambah dengan 3 level menu dropdown.<br /><br /><div style="text-align: center;"><a class="button" href="http://template-blog-guru.blogspot.com/" target="_blank">DEMO W#1</a>                <a class="button" href="http://www.mediafire.com/download/n5z5t3lhvvd30lu/W%231_Blog_Guru.zip" target="_blank">Download W#1</a></div><br />Biar jelek yang penting karya sendiri. : D

Template Blogger W#1 HTML5 Untuk Blog Guru

Template Blogger W1 HTML5 Untuk Blog Guru | Alhamdulillah, kejadian juga. Dari dulu pengen banget yang namanya Design Template Blogger. Ini adalah template perdana. Karna itu namanya W1 alias Wammy #1. Template ini, dibuat dengan HTML5. Kenapa harus HTML5? jawaban disini. Blog ini, saya tujukan ke p…

Baca selengkapnya »

Membuat Waktu Pemberitahuan Konyol Dengan CSS3 & Modernizr

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTLiABIZ0a2oZiz5hAwe2gAOhYWFvmZvJ1Ndc5-zIUikNXOPzMaaf-_pWnpOw__p6ZDMhtXcgmFrmmVsF23-4O3bUJGTIV46P1d5qFTLschFvzZrafeAQ-26N9u8aQzhqk1IYJiNTbBtDp/s419/Capture.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Waktu Pemberitahuan Konyol Dengan CSS3 & Modernizr" border="0" height="224" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTLiABIZ0a2oZiz5hAwe2gAOhYWFvmZvJ1Ndc5-zIUikNXOPzMaaf-_pWnpOw__p6ZDMhtXcgmFrmmVsF23-4O3bUJGTIV46P1d5qFTLschFvzZrafeAQ-26N9u8aQzhqk1IYJiNTbBtDp/s320/Capture.PNG" title="Membuat Waktu Pemberitahuan Konyol Dengan CSS3 & Modernizr" width="320" /></a></div>Membuat Waktu Pemberitahuan Dengan CSS3 & Modernizr | Masih di kategori <a href="http://www.bocahit.com/search/label/Kreasiku" target="_blank">Kreasiku</a>. Dan masih di CSS. Sekarang apa yang anda pikirkan tentang judul diatas? aku sendiri juga tidak paham. Pokoknya Waktu Pemberitahuan Dengan CSS3 dan Javascript. Asal mula javascript dari Modernizr, jadi bukan dari Wammy yang masih bodoh ini. Kalau tidak percaya, lihat <a href="http://modernizr.com/">modernizr.com</a>.<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;">MODERNIZR, Waktu Pemberitahuan Konyol</span></h3><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigCzVbIaGgkZNcHNyN0LocTtOuDmJrAVTTvREPxQurh5KW8CnaBP7rnUPyd0v1pxqjbrVnEo8GrGAOQFBjSW-tuk0Bg4MCUyqM6P5lE5qBeCEygShGdhn6qlgY0mSoB-NEWhEL4FoL-6FO/s1100/js.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Waktu Pemberitahuan Konyol Dengan CSS3 & Modernizr" border="0" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigCzVbIaGgkZNcHNyN0LocTtOuDmJrAVTTvREPxQurh5KW8CnaBP7rnUPyd0v1pxqjbrVnEo8GrGAOQFBjSW-tuk0Bg4MCUyqM6P5lE5qBeCEygShGdhn6qlgY0mSoB-NEWhEL4FoL-6FO/s400/js.PNG" title="Membuat Waktu Pemberitahuan Konyol Dengan CSS3 & Modernizr" width="400" /></a></div><br />Kelihatan tidak? kalau ingin yang simple<br /><pre><script type="text/javascript" src="<a href="http://yourjavascript.com/21189526931/modernizr-custom-39460.js" target="_blank">http://yourjavascript.<wbr></wbr>com/21189526931/modernizr-<wbr></wbr>custom-39460.js</a>"></script></pre><br />Tapi kalau mau download.<br /><div style="text-align: center;"><a href="http://www.mediafire.com/download/ej6sncw74zcnh4s/modernizr.custom.39460.js" target="_blank">DOWNLOAD MODERNIZR</a> </div><div style="text-align: center;"><br /></div><div style="text-align: center;"><a class="button" href="http://iframe-wammy.blogspot.com/2013/06/check-this-hai-there-im-herlambang.html" target="_blank">ILUSTRASI 1</a>                   <a class="button" href="http://herlambang.net78.net/?menu=profil" target="_blank">ILUSTRASI 2</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;">CSS, Waktu Pemberitahuan Konyol</span></h3><pre class="brush:js;"><style type="text/css"><br />.wammy-box {<br />    width: 360px;<br />    position: relative;<br />    margin: 0 auto 20px auto;<br />    padding: 25px 15px;<br />    text-align: left;<br />    border-radius: 5px;<br />        box-shadow: 0 1px 1px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.6);  <br />    opacity: 0;<br />    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";<br />    filter: alpha(opacity=0);    <br />    cursor: default;<br />    display: none;<br />}<br /><br />.wammy-box p {<br />    font-weight: bold;<br />    font-size: 16px;<br />    margin: 0;<br />    padding: 0 10px 0 60px;<br />    text-shadow: 0 1px 1px rgba(255,255,255,0.6);<br />}<br />.wammy-box p:before{<br />    text-align: center;<br />    border: 3px solid rgba(255, 255, 255, 1);<br />    margin-top: -17px;<br />    top: 50%;<br />    left: 20px;<br />    width: 30px;<br />    content: 'i';<br />    font-size: 30px;<br />    color: rgba(255, 255, 255, 1);<br />    position: absolute;<br />    height: 30px;<br />    line-height: 30px;<br />    border-radius: 50%;<br />    text-shadow: 1px 1px 1px rgba(0,0,0,0.1);<br />    box-shadow: 1px 1px 1px rgba(0,0,0,0.1);<br />}<br /><br />.wammy-progress {<br />    width: 0;<br />    height: 4px;<br />    background: rgba(255,255,255,0.3);<br />    position: absolute;<br />    bottom: 5px;<br />    left: 2%;<br />    border-radius: 3px;<br />    box-shadow: <br />        inset 0 1px 1px rgba(0,0,0,0.05), <br />        0 -1px 0 rgba(255,255,255,0.6);<br />}<br /><br />/* Warna Kotak */<br /><br />.wammy-box-color-1{<br />    background: #ff00b6;<br />    border: 1px solid #ff00b6;<br />}<br />.wammy-box-color-1 p {<br />    color: #7d5912;<br />}<br /><br />.wammy-box-color-2{<br />    background: #99ffb1;<br />    border: 1px solid #7ce294;<br />}<br />.wammy-box-color-2 p {<br />    color: #2d8241;<br />}<br /><br />.wammy-box-color-3{<br />    background: #a6fdbf;<br />    border: 1px solid #a6fdbf;<br />}<br />.wammy-box-color-3 p {<br />    color: #69288b;<br />}<br /><br /><br />input.klo-check:checked ~ section .wammy-box {<br />    display: block;<br />    -webkit-animation: fadeOut 5s linear forwards;<br />    -moz-animation: fadeOut 5s linear forwards;<br />    -o-animation: fadeOut 5s linear forwards;<br />    -ms-animation: fadeOut 5s linear forwards;<br />    animation: fadeOut 5s linear forwards;<br />}<br /><br />input.klo-check:checked ~ section .wammy-box .wammy-progress {<br />    -webkit-animation: runProgress 4s linear forwards 0.5s;<br />    -moz-animation: runProgress 4s linear forwards 0.5s;<br />    -o-animation: runProgress 4s linear forwards 0.5s;<br />    -ms-animation: runProgress 4s linear forwards 0.5s;<br />    animation: runProgress 4s linear forwards 0.5s;<br />}<br /><br />/* <span class="" id="result_box" lang="id"><span class="hps">Jika menggunakan</span> <span class="hps">JavaScript</span> <span class="hps">anda bisa</span> <span class="hps">menambahkan class</span><span class="hps"></span></span>: */<br /><br />.wammy-box.wammy-box-active {<br />    display: block;<br />    -webkit-animation: fadeOut 5s linear forwards;<br />    -moz-animation: fadeOut 5s linear forwards;<br />    -o-animation: fadeOut 5s linear forwards;<br />    -ms-animation: fadeOut 5s linear forwards;<br />    animation: fadeOut 5s linear forwards;<br />}<br /><br />.wammy-box.wammy-box-active .wammy-progress {<br />    -webkit-animation: runProgress 4s linear forwards 0.5s;<br />    -moz-animation: runProgress 4s linear forwards 0.5s;<br />    -o-animation: runProgress 4s linear forwards 0.5s;<br />    -ms-animation: runProgress 4s linear forwards 0.5s;<br />    animation: runProgress 4s linear forwards 0.5s;<br />}<br /><br /><br />@-webkit-keyframes fadeOut {<br />    0% { opacity: 0; }<br />    10% { opacity: 1; }<br />    90% { opacity: 1; -webkit-transform: translateY(0px);}<br />    99% { opacity: 0; -webkit-transform: translateY(-30px);}<br />    100% { opacity: 0; }<br />}<br /><br />@-moz-keyframes fadeOut {<br />    0% { opacity: 0; }<br />    10% { opacity: 1; }<br />    90% { opacity: 1; -moz-transform: translateY(0px);}<br />    99% { opacity: 0; -moz-transform: translateY(-30px);}<br />    100% { opacity: 0; }<br />}<br /><br />@-o-keyframes fadeOut {<br />    0% { opacity: 0; }<br />    10% { opacity: 1; }<br />    90% { opacity: 1; -o-transform: translateY(0px);}<br />    99% { opacity: 0; -o-transform: translateY(-30px);}<br />    100% { opacity: 0; }<br />}<br /><br />@-ms-keyframes fadeOut {<br />    0% { opacity: 0; }<br />    10% { opacity: 1; }<br />    90% { opacity: 1; -ms-transform: translateY(0px);}<br />    99% { opacity: 0; -ms-transform: translateY(-30px);}<br />    100% { opacity: 0; }<br />}<br /><br />@keyframes fadeOut {<br />    0% { opacity: 0; }<br />    10% { opacity: 1; }<br />    90% { opacity: 1; transform: translateY(0px);}<br />    99% { opacity: 0; transform: translateY(-30px);}<br />    100% { opacity: 0; }<br />}<br /><br />@-webkit-keyframes runProgress {<br />    0%{ width: 0%; background: rgba(255,255,255,0.3); }<br />    100%{ width: 96%; background: rgba(255,255,255,1); }<br />}<br /><br />@-moz-keyframes runProgress {<br />    0%{ width: 0%; background: rgba(255,255,255,0.3); }<br />    100%{ width: 96%; background: rgba(255,255,255,1); }<br />}<br /><br />@-o-keyframes runProgress {<br />    0%{ width: 0%; background: rgba(255,255,255,0.3); }<br />    100%{ width: 96%; background: rgba(255,255,255,1); }<br />}<br /><br />@-ms-keyframes runProgress {<br />    0%{ width: 0%; background: rgba(255,255,255,0.3); }<br />    100%{ width: 96%; background: rgba(255,255,255,1); }<br />}<br /><br />@keyframes runProgress {<br />    0%{ width: 0%; background: rgba(255,255,255,0.3); }<br />    100%{ width: 96%; background: rgba(255,255,255,1); }<br />}<br /><br /><br />/*Membedakan durasi*/<br /><br />input.klo-check:checked ~ section .wammy-box:nth-child(2) {<br />    -webkit-animation-duration: 6s;<br />    -moz-animation-duration: 6s;<br />    -o-animation-duration: 6s;<br />    -ms-animation-duration: 6s;<br />    animation-duration: 6s;<br />    <br />    -webkit-animation-delay: 0.2s;<br />    -moz-animation-delay: 0.2s;<br />    -o-animation-delay: 0.2s;<br />    -ms-animation-delay: 0.2s;<br />    animation-delay: 0.2s;<br />}<br /><br />input.klo-check:checked ~ section .wammy-box:nth-child(2) .wammy-progress {<br />    -webkit-animation-duration: 5s;<br />    -moz-animation-duration: 5s;<br />    -o-animation-duration: 5s;<br />    -ms-animation-duration: 5s;<br />    animation-duration: 5s;<br />    <br />    -webkit-animation-delay: 0.7s;<br />    -moz-animation-delay: 0.7s;<br />    -o-animation-delay: 0.7s;<br />    -ms-animation-delay: 0.7s;<br />    animation-delay: 0.7s;<br />}<br /><br />input.klo-check:checked ~ section .wammy-box:nth-child(3) {<br />    -webkit-animation-duration: 9s;<br />    -moz-animation-duration: 9s;<br />    -o-animation-duration: 9s;<br />    -ms-animation-duration: 9s;<br />    animation-duration: 9s;<br />    <br />    -webkit-animation-delay: 0.4s;<br />    -moz-animation-delay: 0.4s;<br />    -o-animation-delay: 0.4s;<br />    -ms-animation-delay: 0.4s;<br />    animation-delay: 0.4s;<br />}<br /><br />input.klo-check:checked ~ section .wammy-box:nth-child(3) .wammy-progress {<br />    -webkit-animation-duration: 7.5s;<br />    -moz-animation-duration: 7.5s;<br />    -o-animation-duration: 7.5s;<br />    -ms-animation-duration: 7.5s;<br />    animation-duration: 7.5s;<br />    <br />    -webkit-animation-delay: 0.9s;<br />    -moz-animation-delay: 0.9s;<br />    -o-animation-delay: 0.9s;<br />    -ms-animation-delay: 0.9s;<br />    animation-delay: 0.9s;<br />}<br /><br />/* hover mengatasi masalah browser */<br /><br />.wammy-box.wammy-box-hoverpause:hover, <br />.wammy-box.wammy-box-hoverpause:hover .wammy-progress{<br />    -webkit-animation-play-state: paused;<br />    -moz-animation-play-state: paused;<br />    -o-animation-play-state: paused;<br />    -ms-animation-play-state: paused;<br />    animation-play-state: paused;<br />}</pre><pre class="brush:js;"></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, Waktu Pemberitahuan Konyol</span></h3><pre class="brush:js;"><section><br />            <br />                <div class="wammy-box wammy-box-color-1"><br />                    <p>Hai, There! I'm Herlambang!</p><br />                    <div class="wammy-progress"></div><br />                </div><br />                <br />                <div class="wammy-box wammy-box-color-2"><br />                    <p>Wammy! Just my nick! I'm Developer!</</p><br />                    <div class="wammy-progress"></div><br />                </div><br />                <br />                <div class="wammy-box wammy-box-color-3"><br />                    <p>Visit, www.bocahit.com<p><br />                    <div class="wammy-progress"></div><br />                </div><br />                <br />            </section></pre><br />Hauf, sering - sering klik back to top ya.<br /><div style="text-align: center;"><a class="button" href="http://iframe-wammy.blogspot.com/2013/06/check-this-hai-there-im-herlambang.html" target="_blank">ILUSTRASI</a> </div>

Membuat Waktu Pemberitahuan Konyol Dengan CSS3 & Modernizr

Membuat Waktu Pemberitahuan Dengan CSS3 & Modernizr | Masih di kategori Kreasiku. Dan masih di CSS. Sekarang apa yang anda pikirkan tentang judul diatas? aku sendiri juga tidak paham. Pokoknya Waktu Pemberitahuan Dengan CSS3 dan Javascript. Asal mula javascript dari Modernizr, jadi bukan dari Wammy …

Baca selengkapnya »

Membuat Pure Slider Dengan CSS3

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoeQ5yHyB_XPQ3l_ehKYXA7e8qNtOgrovzPzvTcluhyCJXZasL-niIlM3YCc_5TpbetCwIBCmDM2d4h-dhjjzJngirhFYGXiqZrfUuVVFHlAPslczMPCE-RLScK11kti3YCtAeaEjLjN6U/s612/Pure.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Pure Slider Dengan CSS3 " border="0" height="173" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoeQ5yHyB_XPQ3l_ehKYXA7e8qNtOgrovzPzvTcluhyCJXZasL-niIlM3YCc_5TpbetCwIBCmDM2d4h-dhjjzJngirhFYGXiqZrfUuVVFHlAPslczMPCE-RLScK11kti3YCtAeaEjLjN6U/s320/Pure.PNG" title="Membuat Pure Slider Dengan CSS3 " width="320" /></a></div><br />Membuat Pure Slider Dengan CSS3 | Seperti janji ku kemarin, kalau akan share tentang slider. Nah seperti kemarin menggunakan CSS3 tanpa JS atau jquery. Jadi mudah ketika mengatur ini dan itu. Slider ini pantas di letakkan pada homepage saja, memang karena ukuran yang relatif membuat sesak blog. Jadi silakan bagi anda yang ingin memakai slider ini.<br /><br /><div style="text-align: center;"><a class="button" href="http://iframe-wammy.blogspot.com/2013/06/layout.html" target="_blank">ILUSTRASI</a> </div><br />Kalau ada link download kan itu terlalu mainstream, sekarang anda ambil saja code di bawah ini.<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, CSS3 PURE SLIDER</span></h3><pre class="brush:js;"><style type="text/css"><br />/* LAYOUT */<br />.bocahit {<br />margin:0 auto;<br />overflow:hidden;<br />width:960px;<br />}<br /><br />/* CONTENT SLIDER */<br />#content-slider {<br />width:100%;<br />height:360px;<br />margin:10px auto 0;<br />}<br />/* SLIDER */<br />#slider {<br />background:#000;<br />border:5px solid #eaeaea;<br />box-shadow:1px 1px 5px rgba(0,0,0,0.7);<br />height:320px;<br />width:600px;<br />overflow:visible;<br />position:relative;<br />}<br />#wammy {<br />overflow:hidden;<br />height:320px;<br />}<br />#slider ul {<br />margin:0;<br />padding:0;<br />position:relative;<br />}<br />#slider li {<br />width:680px;<br />height:320px;<br />position:absolute;<br />top:-325px;<br />list-style:none;<br />}<br /><br />#slider li.firstanimation {<br />-moz-animation:cycle 25s linear infinite;<br />-webkit-animation:cycle 25s linear infinite;<br />}<br />#slider li.secondanimation {<br />-moz-animation:cycletwo 25s linear infinite;<br />-webkit-animation:cycletwo 25s linear infinite;<br />}<br />#slider li.thirdanimation {<br />-moz-animation:cyclethree 25s linear infinite;<br />-webkit-animation:cyclethree 25s linear infinite;<br />}<br />#slider li.fourthanimation {<br />-moz-animation:cyclefour 25s linear infinite;<br />-webkit-animation:cyclefour 25s linear infinite;<br />}<br />#slider li.fifthanimation {<br />-moz-animation:cyclefive 25s linear infinite;<br />-webkit-animation:cyclefive 25s linear infinite;<br />}<br /><br />#slider .tooltip {<br />background:rgba(0,0,0,0.7);<br />width:300px;<br />height:60px;<br />position:relative;<br />bottom:75px;<br />left:-320px;<br />-moz-transition:all 0.3s ease-in-out;<br />-webkit-transition:all 0.3s ease-in-out;<br />}<br />#slider .tooltip p {<br />color:#fff;<br />font:"Coda";<br />font-size:24px;<br />font-weight:300;<br />line-height:60px;<br />padding:0 0 0 20px;<br />}<br />#slider li#first:hover .tooltip,<br />#slider li#second:hover .tooltip,<br />#slider li#third:hover .tooltip,<br />#slider li#fourth:hover .tooltip,<br />#slider li#fifth:hover .tooltip {<br />left:0px;<br />}<br />#slider:hover li,<br />#slider:hover .progress-bar {<br />-moz-animation-play-state:paused;<br />-webkit-animation-play-state:paused;<br />}<br /><br />/* PROGRESS BAR */<br />.progress-bar {<br />position:relative;<br />top:-5px;<br />width:680px;<br />height:5px;<br />background:#000;<br />-moz-animation:fullexpand 25s ease-out infinite;<br />-webkit-animation:fullexpand 25s ease-out infinite;<br />}<br />/* ANIMATION */<br />@-moz-keyframes cycle {<br />0% { top:0px; }<br />4% { top:0px; }<br />16% { top:0px; opacity:1; z-index:0; }<br />20% { top:325px; opacity:0; z-index:0; }<br />21% { top:-325px; opacity:0; z-index:-1; }<br />92% { top:-325px; opacity:0; z-index:0; }<br />96% { top:-325px; opacity:0; }<br />100%{ top:0px; opacity:1; }<br /><br />}<br />@-moz-keyframes cycletwo {<br />0% { top:-325px; opacity:0; }<br />16% { top:-325px; opacity:0; }<br />20% { top:0px; opacity:1; }<br />24% { top:0px; opacity:1; }<br />36% { top:0px; opacity:1; z-index:0; }<br />40% { top:325px; opacity:0; z-index:0; }<br />41% { top:-325px; opacity:0; z-index:-1; }<br />100%{ top:-325px; opacity:0; z-index:-1; }<br />}<br />@-moz-keyframes cyclethree {<br />0% { top:-325px; opacity:0; }<br />36% { top:-325px; opacity:0; }<br />40% { top:0px; opacity:1; }<br />44% { top:0px; opacity:1; }<br />56% { top:0px; opacity:1; }<br />60% { top:325px; opacity:0; z-index:0; }<br />61% { top:-325px; opacity:0; z-index:-1; }<br />100%{ top:-325px; opacity:0; z-index:-1; }<br />}<br />@-moz-keyframes cyclefour {<br />0% { top:-325px; opacity:0; }<br />56% { top:-325px; opacity:0; }<br />60% { top:0px; opacity:1; }<br />64% { top:0px; opacity:1; }<br />76% { top:0px; opacity:1; z-index:0; }<br />80% { top:325px; opacity:0; z-index:0; }<br />81% { top:-325px; opacity:0; z-index:-1; }<br />100%{ top:-325px; opacity:0; z-index:-1; }<br />}<br />@-moz-keyframes cyclefive {<br />0% { top:-325px; opacity:0; }<br />76% { top:-325px; opacity:0; }<br />80% { top:0px; opacity:1; }<br />84% { top:0px; opacity:1; }<br />96% { top:0px; opacity:1; z-index:0; }<br />100%{ top:325px; opacity:0; z-index:0; }<br />}<br /><br />@-webkit-keyframes cycle {<br />0% { top:0px; }<br />4% { top:0px; }<br />16% { top:0px; opacity:1; z-index:0; }<br />20% { top:325px; opacity:0; z-index:0; }<br />21% { top:-325px; opacity:0; z-index:-1; }<br />50% { top:-325px; opacity:0; z-index:-1; }<br />92% { top:-325px; opacity:0; z-index:0; }<br />96% { top:-325px; opacity:0; }<br />100%{ top:0px; opacity:1; }<br /><br />}<br />@-webkit-keyframes cycletwo {<br />0% { top:-325px; opacity:0; }<br />16% { top:-325px; opacity:0; }<br />20% { top:0px; opacity:1; }<br />24% { top:0px; opacity:1; }<br />36% { top:0px; opacity:1; z-index:0; }<br />40% { top:325px; opacity:0; z-index:0; }<br />41% { top:-325px; opacity:0; z-index:-1; }<br />100%{ top:-325px; opacity:0; z-index:-1; }<br />}<br />@-webkit-keyframes cyclethree {<br />0% { top:-325px; opacity:0; }<br />36% { top:-325px; opacity:0; }<br />40% { top:0px; opacity:1; }<br />44% { top:0px; opacity:1; }<br />56% { top:0px; opacity:1; z-index:0; }<br />60% { top:325px; opacity:0; z-index:0; }<br />61% { top:-325px; opacity:0; z-index:-1; }<br />100%{ top:-325px; opacity:0; z-index:-1; }<br />}<br />@-webkit-keyframes cyclefour {<br />0% { top:-325px; opacity:0; }<br />56% { top:-325px; opacity:0; }<br />60% { top:0px; opacity:1; }<br />64% { top:0px; opacity:1; }<br />76% { top:0px; opacity:1; z-index:0; }<br />80% { top:325px; opacity:0; z-index:0; }<br />81% { top:-325px; opacity:0; z-index:-1; }<br />100%{ top:-325px; opacity:0; z-index:-1; }<br />}<br />@-webkit-keyframes cyclefive {<br />0% { top:-325px; opacity:0; }<br />76% { top:-325px; opacity:0; }<br />80% { top:0px; opacity:1; }<br />84% { top:0px; opacity:1; }<br />96% { top:0px; opacity:1; z-index:0; }<br />100%{ top:325px; opacity:0; z-index:0; }<br />}<br /><br />/* ANIMATION BAR */<br />@-moz-keyframes fullexpand {<br />0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }<br />4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }<br />16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }<br />17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }<br />18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }<br />}<br />@-webkit-keyframes fullexpand {<br />0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }<br />4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }<br />16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }<br />17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }<br />18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }<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, CSS3 PURE SLIDER </span></h3><pre class="brush:js;"><div class="bocahit"><br /><div id="content-slider"><br /><div id="slider"><br /><div id="wammy"><br /><ul><br /><li id="first" class="firstanimation"><br /><a href="http://www.bocahit.com/search/label/Pemrograman"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3iFEXFHk6Uz61UFh3PIxy3ANZjosKmt2kTnz-od6fYmGsmWqmnsOJ10I72Mi_PCFoeC-ibk-Albtd8owmJpLKC9AMKPvzxyg7KMNdWzwuVOB8-VWEVsE2gU9LatKf4v-wojJx-WGLXBmv/s680/C.png" alt="Pemrograman Bahasa C"/><br /></a><br /><div class="tooltip"><br /><p>Pemrograman C</p><br /></div><br /></li><br /><br /><li id="second" class="secondanimation"><br /><a href="http://www.bocahit.com/search/label/Cosplay"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJcYHZcAgze_SKmULrmsKRi3mYsxgJcAg0SDUfXNRiWvqsrSjG5vF_oRdKSvQZH902i7HQZGgjyfwwnW6e5yZWWRjHMMV-KJRyOJYoTxSgVeXlpXMpiL5FDMTzXmrMZk4EqzO7qLtdur9f/s680/CZ.png" alt="Tips Jitu Cosplayer"/><br /></a><br /><div class="tooltip"><br /><p>Tips Jitu Cosplayer</p><br /></div><br /></li><br /><br /><li id="third" class="thirdanimation"><br /><a href="#"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg56CpbT0egHIjh0BBMcGkNXTvhVNyFz1dLKOTG8Fx5J0SrnM9NMfx3pNepp42Y3awvUe7LjIzWIguoc03SbJ8lQUwfAhtF_lm4oOni9TUNQfPgGIeae_2fvJLk2uIKCP1qrlZ99BE6KC44/s680/City%2520Hunter.png" alt="Info Figure"/><br /></a><br /><div class="tooltip"><br /><p>Info Figure</p><br /></div><br /></li><br /><br /><li id="fourth" class="fourthanimation"><br /><a href="http://www.bocahit.com/search/label/SEO"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfWVhoo-H5ht0LlZJ9ix4LmjEE_Yy3V8K3i15RE8jMw7S8rGui0VWbgY6wPAzPo0nVCSl3qFGa4nGbJDOZrJE5woAaOP0tHVL8tVYRbFPlX2TAy-EB0lQPVC3_ISK9BMyJQwToUohyphenhyphenoizP/s680/SEO.png" alt="Tips SEO"/><br /></a><br /><div class="tooltip"><br /><p>Tips SEO</p><br /></div><br /></li><br /><br /><li id="fifth" class="fifthanimation"><br /><a href="http://www.bocahit.com/search/label/Blogger"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBJaUC2yrwfvMOu8C9LTFJTIr-CefDuX2ElBFZMwUGXK4Cv6ybZTBsdWiJmUtltkKTUolztWPshvHPD-hPzMlLPIr8zRMKZNVfLvi8eLljFfac6rTP6RvUwOHOBSTLTFTLCtDP7xH-fjDf/s680/blog.png" alt="Tutorial Blog"/><br /></a><br /><div class="tooltip"><br /><p>Tutorial Blogger</p><br /></div><br /></li><br /></ul><br /></div><br /><div class="progress-bar"></div><br /></div><br /></div><br /></div></pre><br />Panjangkah?semakin panjang semakin asik aja,,Selamat Mencoba :D

Membuat Pure Slider Dengan CSS3

Membuat Pure Slider Dengan CSS3 | Seperti janji ku kemarin, kalau akan share tentang slider. Nah seperti kemarin menggunakan CSS3 tanpa JS atau jquery. Jadi mudah ketika mengatur ini dan itu. Slider ini pantas di letakkan pada homepage saja, memang karena ukuran yang relatif membuat sesak blog. Jadi…

Baca selengkapnya »

Membuat Sliding Image Panel Dengan CSS3 Tapi Gagal

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9QLukeWsvWVrmE7gEBnLnH5uPyQJdMVouOS_JYmH_bsFwupwyqsk-IzMVTyoB7AcBvZduc6iR40D_ehwIgkIuz1WPdmwTmY0nJg1dNHp8ipbRZVosCxIZfm4pGdLGF9h7AyLJgjsxHb-C/s643/sliding.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Sliding Image Panel Dengan CSS3 Tapi Gagal" border="0" height="219" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9QLukeWsvWVrmE7gEBnLnH5uPyQJdMVouOS_JYmH_bsFwupwyqsk-IzMVTyoB7AcBvZduc6iR40D_ehwIgkIuz1WPdmwTmY0nJg1dNHp8ipbRZVosCxIZfm4pGdLGF9h7AyLJgjsxHb-C/s320/sliding.PNG" title="Membuat Sliding Image Panel Dengan CSS3 Tapi Gagal" width="320" /></a></div><br />Membuat Sliding Image Panel Dengan CSS3 Tapi Gagal | Sliding image panel bukan Slideshow. Sebelum tidur, aku share nich..Image Panel..Tanpa Javascript, Jquery hanya menggunakan CSS3 tentu juga HTML. Nah, ini gagal total...karena itu judulnya Sliding Image Panel Dengan CSS3 Tapi Gagal. Kalau berhasil, pasti saya share juga codingnya...<br /><br />Nah kegagalan saya ada di bagian yang konyol. Masih ada slider lain yang masih saya rahasiakan. Jika ada kesempatan akan saya coba share.<br /><br /><div style="text-align: center;"><a class="button" href="http://iframe-wammy.blogspot.com/2013/06/lis-i-1-displayrotmenu-linth-childi.html" target="_blank">ILUSTRASI KEGAGALAN</a></div>

Membuat Sliding Image Panel Dengan CSS3 Tapi Gagal

Membuat Sliding Image Panel Dengan CSS3 Tapi Gagal | Sliding image panel bukan Slideshow. Sebelum tidur, aku share nich..Image Panel..Tanpa Javascript, Jquery hanya menggunakan CSS3 tentu juga HTML. Nah, ini gagal total...karena itu judulnya Sliding Image Panel Dengan CSS3 Tapi Gagal. Kalau berhasil…

Baca selengkapnya »

Membuat Banner Keren Dengan CSS

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlD6DVTRIYT8gH-NjkyvNYJnqAXUBBaSvi228oI4M6qA-4N4WQQRnZT7oHS9oLs4dhW_GluY8KaKU_RFQf9anBoaR94eYmanPCtN0MHVH0xZZb7pul_uYNHjar4Lpeq0JKrjH-_lBGIyEx/s575/css3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Banner Keren Dengan CSS" border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlD6DVTRIYT8gH-NjkyvNYJnqAXUBBaSvi228oI4M6qA-4N4WQQRnZT7oHS9oLs4dhW_GluY8KaKU_RFQf9anBoaR94eYmanPCtN0MHVH0xZZb7pul_uYNHjar4Lpeq0JKrjH-_lBGIyEx/s320/css3.jpg" title="Membuat Banner Keren Dengan CSS" width="320" /></a></div>Membuat Banner Keren Dengan CSS | Siapa sangka, CSS bisa dipakai untuk membuat banner. Nah, baru saja dari asisten saya, Dreamweaver CS6. "Design di Corel atau Photoshop, upload di images hosting, dah selesai, permasalahan"...Ya. CSS untuk Style, berarti anda bisa merubah bentuk dan ukuran dengan mudah dan tidak ada yang salah. Itu menurut saya...Jadi silakan yang mau pakai.<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;">CSS, Cool Banner With CSS</span></h3><pre class="brush:js;"> <style type="text/css">   <br />            .pesan{<br />                padding-top: 10px;<br />                font-size: 36px;<br />                padding:0px;<br />                margin: 0px;<br />                line-height:100px;<br />                text-shadow: 0 -1px 1px rgba(0,0,0,0.25);<br />                width:310px;<br />                float:left;<br />            }<br />            .slogan{<br />                float: right;<br />                margin:75px 20px 0px 0px;<br />                font-size: 20px;<br />            }<br />            .wammy{<br />                width:620px;<br />                height: 100px;<br />                margin:7px auto;<br />                -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);<br />                -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);<br />                -moz-border-radius: 15px;<br />                -webkit-border-radius: 15px;<br />                padding-left:190px;<br />            }<br />           .banner0{<br />                color:#6e9cf9;<br />                background: #FF0 url(http://s20.postimg.org/58r4plwk9/ban1.png) no-repeat center left;<br />                 font-family:"Coda"; <br />                font-style: italic;<br />            }<br />            .banner1{<br />                color:#FFF;<br />                background: #000 url(http://s20.postimg.org/lesj9d82h/image.png) no-repeat center left;<br />                font-family: "Coda"; <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, Cool Banner With CSS</span></h3><pre class="brush:js;"><div class="wammy banner0"><br />            <div class="pesan">Tralala Trilili</div><br />            <div class="slogan">Wammy's Blog</div><br />        </div><br />        <div class="wammy banner1"><br />            <div class="pesan">Sleketep tep</div><br />            <div class="slogan">www.bocahit.com</div><br />        </div></pre><br /><blockquote class="tr_bq">width : lebar banner, atur banner sesuai kebutuhaan <br />height : tinggi banner</blockquote><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;">Menambah Banner, Cool Banner With CSS</span></h3><h3>Anda tinggal menambah kode CSS</h3><pre>.banner5{<br />                color:#37535B;<br />                background: #C6CC10 url(url banner) no-repeat center left;<br />                font-family: "Trebuchet MS";<br />            } <br /><br /></pre><h3>Dan HTML</h3><pre> <div class="wammy banner5"><br />            <div class="pesan">Pesan</div><br />            <div class="slogan">Slogan</div><br />        </div><br /></pre><br /><h3>Jika anda ingin memberi link :</h3><pre><div class="wammy banner1"><br />            <div class="pesan"><span style="color: red;"><a href="http://www.bocahit.com/"></span>Wammy San<span style="color: red;"></a></span></div><br />            <div class="slogan">www.bocahit.com</div><br />        </div></pre><br /><div style="text-align: center;"><a alt="demo" class="button" href="http://iframe-wammy.blogspot.com/2013/06/h1-padding-top-10px-font-size-36px.html" target="_blank" title="demo">ILUSTRASI</a></div>

Membuat Banner Keren Dengan CSS

Membuat Banner Keren Dengan CSS | Siapa sangka, CSS bisa dipakai untuk membuat banner. Nah, baru saja dari asisten saya, Dreamweaver CS6. "Design di Corel atau Photoshop, upload di images hosting, dah selesai, permasalahan"...Ya. CSS untuk Style, berarti anda bisa merubah bentuk dan ukuran dengan mu…

Baca selengkapnya »

Membuat Bingkai Catatan Dengan CSS

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgepIOK1CPdRlhWdiaWTCC7lPGlKZlkjJ2dUDoEnCQ1DcdsT2F2MiWBJ3vfo5X8dbad8Pq0Agx3dMGxM3IBZ6hX7QBliL68FDuMpA7hXwxJSOgH2r9VHQDz9A3mZMlUiOyoHZaCq5lAYHxQ/s563/Capture.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Bingkai Catatan Dengan CSS" border="0" height="161" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgepIOK1CPdRlhWdiaWTCC7lPGlKZlkjJ2dUDoEnCQ1DcdsT2F2MiWBJ3vfo5X8dbad8Pq0Agx3dMGxM3IBZ6hX7QBliL68FDuMpA7hXwxJSOgH2r9VHQDz9A3mZMlUiOyoHZaCq5lAYHxQ/s320/Capture.PNG" title="Membuat Bingkai Catatan Dengan CSS" width="320" /></a></div><br />Membuat Bingkai Catatan Dengan CSS | Ini adalah kreasi pertama saya bersama CSS. Note Box, mungkin itu namanya, tapi entahlah. Anda bisa memakai ini, untuk :<br /><ol><li>Memberikan pengumuman kepada pengunjung</li><li>Membuat puisi / kata mutiara di dalam web</li><li>Menampilkan foto</li></ol><div style="text-align: center;"><a alt="DEMO" class="button" href="http://iframe-wammy.blogspot.com/2013/06/blog-post_28.html" title="DEMO">DEMO BOX NOTE</a></div><br />Ini bukanlah serta merta ide saya, ini adalah berawal dari tutorial membuat link list dari mas zhinto. Saya berfikir gimana caranya bisa diubah ke dalam teks dengan porsi yang hampir mirip. Nah, akhirnya dengan asisten saya, dreamweaver cs6, jadilah.<br /><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;">CSS, Box Note With CSS</span></h3><pre class="brush:js;"><style type="text/css"><br />.boxnotew {<br />    width: 40%; /*Ukuran kotak*/<br />    padding: 5px;<br />    background-color: rgba(215, 40, 40, 0.9);;<br />    border-bottom: 1px solid rgb(51, 51, 51);<br />    border-top: 1px solid rgb(51, 51, 51);<br />    box-shadow: 0px 1px rgb(0, 0, 0), 0px 2px 1px rgba(0, 0, 0, 0.4);<br />    margin: 5px auto;<br />    border: 1px solid rgba(0, 0, 0, 0.4);<br />    -webkit-border-radius: 5px;<br />    -moz-border-radius: 5px;<br />    border-radius: 5px;<br />    -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.4);<br />    -moz-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.4);<br />    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.4);<br />    }<br />.boxnotew .judul {<br />    text-align: center;<br />    font-size: 1.5em;<br />    background: none repeat scroll 0% 0% rgba(64, 68, 203, 1);<br />    border-bottom: 1px solid rgb(51, 51, 51);<br />    border-top: 1px solid rgb(51, 51, 51);<br />    box-shadow: 0px 1px rgb(0, 0, 0), 0px 2px 1px rgba(0, 0, 0, 0.4);<br />    padding:5px;<br />    color: #FFF;<br />    font-family: Coda;<br />    -webkit-border-radius: 5px;<br />    -moz-border-radius: 5px;<br />    border-radius: 5px<br />    }<br />.boxnotew .isi {<br />    background: none repeat scroll 0% 0% rgba(64, 68, 203, 1);<br />    margin-top:5px;<br />    height: 220px; /*tinggi kotak dalam*/<br />    overflow: auto;<br />    border: 1px solid #000;<br />    -webkit-border-radius: 5px;<br />    -moz-border-radius: 5px;<br />    border-radius: 5px<br />    }<br />.boxnotew p {<br />    list-style: none;<br />    color: #FFF;<br />    margin:0px;<br />    text-decoration: none;<br />    background: none repeat scroll 0% 0% rgba(64, 68, 203, 1);<br />    padding: 5px; /*jarak teks dari garis*/<br />    color: #BBB; /*warna huruf*/<br />    text-transform: capitalize; /*bentuk huruf (besar semua, normal, kapital*/<br />    font-size: 12px; /*ukuran huruf*/<br />    font-weight: bold; /*kondisi huruf*/<br />    font-family: Coda; /*jenis huruf*/<br />    -webkit-transition: all 0.5s ease 0s;<br />    -moz-transition: all 0.5s ease 0s;<br />    -o-transition: all 0.5s ease 0s;<br />    transition: all 0.5s ease 0s;<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, Box Note With CSS</span></h3><pre class="brush:js;"><div class="boxnotew"><br /><br /><div class="judul">Kebijakan Admin Wammy</div><br /><br /><div class="isi"><br /><br /><p>Teks / foto anda disini</p><br /><br /><p>Saya paham rasanya jadi blogger. Sebagaimana anda begitu, tapi bagaimana pun juga tetap saling mengharagai di bidang apapun dan dengan alasan apapun. <br /><br />Salam Admin Wammy</p><br /><br /></div><br /><br /><small><div style='font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;'><a href="http://www.bocahit.com/2013/06/membuat-bingkai-catatan-dengan-css.html" target="_blank" title='Box Note With CSS'>+ Get This Widget Here</a></div></small><br /><br /></div></pre><br /><br />Gunakan <p> sebagai pembuka kalimat dan </p> sebagai penutup. Jika anda ingin memasukkan foto, berikan action <b>widht</b> dan <b>height</b>. Sebagai contoh berikan <img src="URL GAMBAR" width="300" height="250". Selamat mencoba..

Membuat Bingkai Catatan Dengan CSS

Membuat Bingkai Catatan Dengan CSS | Ini adalah kreasi pertama saya bersama CSS. Note Box, mungkin itu namanya, tapi entahlah. Anda bisa memakai ini, untuk :Memberikan pengumuman kepada pengunjungMembuat puisi / kata mutiara di dalam webMenampilkan fotoDEMO BOX NOTEIni bukanlah serta merta ide saya,…

Baca selengkapnya »

Cara Membuat Efek Seperti Preview Blog

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFZDnzNfdlHgTgA0mKqgJGTo75LSW9ZxTMizpM-w6EE-Wr3nKZIsYlTbLsZOl7Zm8lk6020TF8t-Ja0PSB745lcA-2LsJVz5AbiGhOh-3ucqwEhrWL2I1QUxnsasMWEu1Q_hUrXD0BNqQX/s1366/2013-06-28+08-55-25.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Efek Seperti Preview Blog" border="0" height="158" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFZDnzNfdlHgTgA0mKqgJGTo75LSW9ZxTMizpM-w6EE-Wr3nKZIsYlTbLsZOl7Zm8lk6020TF8t-Ja0PSB745lcA-2LsJVz5AbiGhOh-3ucqwEhrWL2I1QUxnsasMWEu1Q_hUrXD0BNqQX/s320/2013-06-28+08-55-25.png" title="Cara Membuat Efek Seperti Preview Blog" width="320" /></a></div><br />Cara Membuat Efek Seperti Preview Blog | Bermain CSS lagi. Kali ini, sederhana banget. Efek Preview yang aku maksud itu seperti garis yang di kiri blog ketika kita klik preview pada artikel. Sekarang bisa di tempatkan di semua halaman.<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;">CSS, Letakkan di atas </body></span></h3><pre><div style="-moz-transform-origin: 50% 0px; -moz-transform: rotate(-45deg); -o-transform-origin: 50% 0px; -o-transform: rotate(-45deg); -webkit-transform-origin: 50% 0px; -webkit-transform: rotate(-45deg); background-color: black; border: 1px solid rgb(170, 170, 170); color: white; font-family: 'trebuchet ms', verdana, arial, sans-serif; font-size: 24px; left: -225px; opacity: 0.5; padding: 10px; position: fixed; text-align: center; top: 75px; transform-origin: 50% 0px; transform: rotate(-45deg); width: 600px; z-index: 9999;"><br />Demo Efek Pratinjau<br />    </div></pre><br /><br /><div style="text-align: center;"><a alt="Demo" class="button" href="http://iframe-wammy.blogspot.com/2013/06/blog-post.html" title="Demo">DEMO</a></div><br /><br />Nah saya rasa hanya ini. Mudahkan...

Cara Membuat Efek Seperti Preview Blog

Cara Membuat Efek Seperti Preview Blog | Bermain CSS lagi. Kali ini, sederhana banget. Efek Preview yang aku maksud itu seperti garis yang di kiri blog ketika kita klik preview pada artikel. Sekarang bisa di tempatkan di semua halaman.CSS, Letakkan di atas Demo Efek Pratinjau    DEMONah saya rasa ha…

Baca selengkapnya »

Cara Membuat Pure CSS3 Tooltips Di Blog

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpMKBwdhucOXRr_QJT87a0Xce2SFpKUmtucIFptaT3FBqQdxSG87S016VHzckvoqwxlOnxnFGKswi48tT8F4gtwwqBhxiUeinGkZFX0I2MN7peQSaebCh6NJsgpceaoWkR4v3JDAgR1RHs/s1600/css3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Pure CSS3 Tooltips Di Blog" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpMKBwdhucOXRr_QJT87a0Xce2SFpKUmtucIFptaT3FBqQdxSG87S016VHzckvoqwxlOnxnFGKswi48tT8F4gtwwqBhxiUeinGkZFX0I2MN7peQSaebCh6NJsgpceaoWkR4v3JDAgR1RHs/s320/css3.jpg" title="Cara Membuat Pure CSS3 Tooltips Di Blog" width="320" /></a></div>Cara Membuat Pure CSS3 Tooltips Di Blog | Tooltips memang jarang dipakai, karena penggunannya yang cukup rumit, tapi tooltips bisa di pakai di blog untuk membuat blog lebih tampak indah. Apalagi yang sudah tersentuh CSS, semua akan jauh lebih indah.<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;">CSS, Pure CSS3 Tooltips</span></h3><br /><pre class="brush:js;">a.tooltip {<br />    position: relative;<br />    display: inline;<br />}<br /><br />a.tooltip span {<br />    position: absolute;<br />    left: 50%;<br />    width:140px;<br />    padding: 6px;<br />    margin-left: -76px;<br />    background: #000; /*warna latar*/<br />    color: #fff; /*warna huruf*/<br />    text-align: center;<br />    visibility: hidden;<br />    border-radius: 5px;<br />} <br />        <br />a.tooltip span:after {<br />    content: '';<br />    position: absolute;<br />    top: 100%;<br />    left: 50%;<br />    margin-left: -8px;<br />    width: 0; height: 0;<br />    border-top: 8px solid black;<br />    border-right: 8px solid transparent;<br />    border-left: 8px solid transparent;<br />}<br />        <br />a:hover.tooltip span {<br />    visibility: visible;<br />    opacity: 0.8;<br />    bottom: 30px;<br />    z-index: 999;<br />}<br /></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, Pure CSS3 Tooltips</span></h3><br /><pre class="brush:js;"><a class="tooltip" href="#">Teks Link<span>Teks Tooltips</span></a></pre><br /><br /><div style="text-align: center;"><a alt="demo" class="button" href="http://herlambang.net78.net/" target="_blank" title="Demo Tooltips">DEMO</a></div>

Cara Membuat Pure CSS3 Tooltips Di Blog

Cara Membuat Pure CSS3 Tooltips Di Blog | Tooltips memang jarang dipakai, karena penggunannya yang cukup rumit, tapi tooltips bisa di pakai di blog untuk membuat blog lebih tampak indah. Apalagi yang sudah tersentuh CSS, semua akan jauh lebih indah.CSS, Pure CSS3 Tooltipsa.tooltip {    position: rel…

Baca selengkapnya »

Cara Membuat Kotak Pemberitahuan Dengan CSS3

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFhULygGZCbDtSuDMW24ezJMQPWcNM0dW56QirkdMmmKYRQTxu5QXdE65lm5DDpPatYzYf_ezsRwqUz43nshJh0MDHbOBIB2XQZ3lpOumnE-uonbAzKxvD6pliIo_cPXWfO8x3s6crjRI5/s1600/notif.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="123" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFhULygGZCbDtSuDMW24ezJMQPWcNM0dW56QirkdMmmKYRQTxu5QXdE65lm5DDpPatYzYf_ezsRwqUz43nshJh0MDHbOBIB2XQZ3lpOumnE-uonbAzKxvD6pliIo_cPXWfO8x3s6crjRI5/s400/notif.PNG" width="400" /></a></div>Cara Membuat Kotak Pemberitahuan Dengan CSS3 | Waw,,capek juga, setelah sepedaan ke Solo - Boyolali, sebelum tidur sempatkan dulu, buat artikel. Tadi di jalan, ga sengaja lihat papan..Coution...ga jauh dari situ juga ada papan, Pemberitahuan, sedang ada perbaikan jalan. Langsung dari otak kanan ke otak kiri terus turun ke dengkul munculah ide ini. Menurut saya, ini penting ga penting, penting jika kita ingin menyampaikan sesuatu kepada visitor yang jelas dan langsung terbaca. Tapi ga penting juga kalau buat main - main. Nah, bagi yang butuh bisa deh, pakai ini :<br /><br /><h3>Langkah 1. CSS3, Notification Box</h3><pre>.alert-box {<br />    color:#555;<br />    border-radius:10px;<br />    font-family:Tahoma,Geneva,Arial,sans-serif;font-size:11px;<br />    padding:10px 10px 10px 36px;<br />    margin:10px;<br />}</pre><br />Sekarang lihat ini:<br /><ul><li><span class="code">color : #555;</span> – warna teks</li><li><span class="code">border-radius:10px;</span> – jarak border radius</li><li><span class="code">font-family:…</span> – jenis huruf, kesukaan anda</li><li><span class="code">padding:10px 10px 10px 36px;</span> – padding untuk atas bawah kanan kiri</li><li><span class="code">margin:10px;</span> – jarak sekeliling</li></ul><br /><pre>.alert-box span {<br />    font-weight:bold;<br />    text-transform:uppercase;<br />}</pre><br />Diatas, kenapa?karena kita gunakan span.<br /><br /><h3>Langkah 2, CSS3 Alert</h3><pre>.error {<br />    background:#ffecec url('images/error.png') no-repeat 10px 50%;<br />    border:1px solid #f5aca6;<br />}<br />.success {<br />    background:#e9ffd9 url('images/success.png') no-repeat 10px 50%;<br />    border:1px solid #a6ca8a;<br />}<br />.warning {<br />    background:#fff8c4 url('images/warning.png') no-repeat 10px 50%;<br />    border:1px solid #f2c779;<br />}<br />.notice {<br />    background:#e3f7fc url('images/notice.png') no-repeat 10px 50%;<br />    border:1px solid #8ed9f6;<br />}<br /></pre><br />Masalah url gambar bisa anda cari di google yang anda suka.<br /><h3>Langkah 3, CSS3 Alert</h3><pre><div class="alert-box error"><span>error: </span>Pesan Salah Anda.</div><br /><div class="alert-box success"><span>success: </span>Pesan Sukses Anda.</div><br /><div class="alert-box warning"><span>warning: </span>Pesan Larangan Anda.</div><br /><div class="alert-box notice"><span>notice: </span>Pesan Pemberitahuan Anda.</div></pre><br />Okey, langsung donwload gambarnya... <br /><div style="text-align: center;"><a class="button" href="http://adf.ly/QpTl7" target="_blank">Download Image</a></div>

Cara Membuat Kotak Pemberitahuan Dengan CSS3

Cara Membuat Kotak Pemberitahuan Dengan CSS3 | Waw,,capek juga, setelah sepedaan ke Solo - Boyolali, sebelum tidur sempatkan dulu, buat artikel. Tadi di jalan, ga sengaja lihat papan..Coution...ga jauh dari situ juga ada papan, Pemberitahuan, sedang ada perbaikan jalan. Langsung dari otak kanan ke o…

Baca selengkapnya »

Free Web Template | Angle Theme

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYW7QqHIl4uMi1Hp2y2RxBmkjoGLo-qa6L-sL5lly8u20dtvIQO9Yb1jklAWZi2yOD_nCIQb93cGzKqjNhPPaoco1JiFln_PQuMrI8lY9k7m4RWrhft4jctckPHgxzSwcD9sBcP5ypKWYc/s1600/Angled+Theme+by+FCT+2013-06-24+11-29-41.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Free Web Template | Angle Theme" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYW7QqHIl4uMi1Hp2y2RxBmkjoGLo-qa6L-sL5lly8u20dtvIQO9Yb1jklAWZi2yOD_nCIQb93cGzKqjNhPPaoco1JiFln_PQuMrI8lY9k7m4RWrhft4jctckPHgxzSwcD9sBcP5ypKWYc/s320/Angled+Theme+by+FCT+2013-06-24+11-29-41.png" title="Free Web Template | Angle Theme" width="306" /></a></div><br />Free Web Template | Angle Theme | This is Angled Theme , a free, fully standards-compliant CSS template designed by FreeCSSTemplates.org. The photos in this template are from Fotogrph. This free template is released under a Creative Commons Attributions 3.0 license, so you are pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :)<br /><br /><br /><div style="text-align: center;"><a class="button" href="http://www.freecsstemplates.org/preview/angledtheme/" target="_blank" title="Angle Theme">D E M O</a>           <a class="button" href="http://www.freecsstemplates.org/preview/angledtheme/" target="_blank" title="Angle Theme">Download</a></div>

Free Web Template | Angle Theme

Free Web Template | Angle Theme | This is Angled Theme , a free, fully standards-compliant CSS template designed by FreeCSSTemplates.org. The photos in this template are from Fotogrph. This free template is released under a Creative Commons Attributions 3.0 license, so you are pretty much free to do…

Baca selengkapnya »

Cara Valid Upload Website Ke Hosting 000Webhost

<div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAvc5WejGge00iyYlqSPSg8R0um_sbmJxiFaHUbVyJY3fw_92XmNJpsjhabS1msQvfCN3uwtRxyNmZjtGkgnbZrjK6nlKP9MsGNkBk1zDlauwrlp2DVg2joDiBrrJnMK-fhwooNAJc7a8G/s1600/Upload+000webhost.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Valid Upload Website Ke Hosting 000Webhost" border="0" height="262" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAvc5WejGge00iyYlqSPSg8R0um_sbmJxiFaHUbVyJY3fw_92XmNJpsjhabS1msQvfCN3uwtRxyNmZjtGkgnbZrjK6nlKP9MsGNkBk1zDlauwrlp2DVg2joDiBrrJnMK-fhwooNAJc7a8G/s320/Upload+000webhost.jpg" title="Cara Valid Upload Website Ke Hosting 000Webhost" width="320" /></a></div><br />Cara Valid Upload Website Ke Hosting 000Webhost | Sudah lama, jika hosting gratis ini, memberikan pelayanan yang sangat mudah dan baik (menurut saya). Upload web dari builder kita di PC sebut saja dengan Dreamweaver tambah dengan databasenya. Kali ini, saya berbagi penagalaman tentang upload dan setup web di hosting. Cara ini umumnya dilakukan oleh para developer. Sebagai contoh web yang sudah saya upload...<br /><div style="text-align: center;"><a class="button" href="http://herlambang.net78.net/" target="_blank" title="Amburadul Web">Web 1</a>                   <a class="button" href="http://adib92.freeiz.com/" target="_blank" title="Adib's Web">Web 2</a></div><br />Kita akan langsung, masuk di bagian cpanel, saya anggap anda sudah mendaftar di http://000webhost.com/<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;">Langkah 1, Domain Actived</span></h3>Jika anda sedah memverikasi akun anda di link yang masuk ke email, maka domain anda akan otomatis aktif, jika tidak (status : building) silakan klik <b>Refresh Status</b><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_mdXcz2ax9tGeh9ZZCkRV5dGtSDrxo7xcDbsZX_vSpOIcmG3oftpbutCPJPl2Jl5UsUg6qKaXAhS_8aAMIW99bGimDOFooLSLQi0v4L8vONi2MuVIFT2HugKZEqLxCfx_4lA6qt9q7ZHg/s1600/go+to+cpanel.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Valid Upload Website Ke Hosting 000Webhost" border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_mdXcz2ax9tGeh9ZZCkRV5dGtSDrxo7xcDbsZX_vSpOIcmG3oftpbutCPJPl2Jl5UsUg6qKaXAhS_8aAMIW99bGimDOFooLSLQi0v4L8vONi2MuVIFT2HugKZEqLxCfx_4lA6qt9q7ZHg/s400/go+to+cpanel.PNG" title="Cara Valid Upload Website Ke Hosting 000Webhost" width="400" /></a></div><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;">Langkah 2, View Account Details</span></h3>Masuk di View Account Details.<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjledoIeSc5za8lgVCyyHcDxYVlIqJ_YiUzxcsA4R9KtXhGZLkH_hDoWovC95odVA6c-1cfX2aEYIBqRXOzsq-fOUi183aPcs0qv_GTkdNc51hehz26uGzR_mE_lF2xXWKqXcjmZnLVXV3Y/s1600/cpanel.PNG" imageanchor="1"><img alt="Cara Valid Upload Website Ke Hosting 000Webhost" border="0" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjledoIeSc5za8lgVCyyHcDxYVlIqJ_YiUzxcsA4R9KtXhGZLkH_hDoWovC95odVA6c-1cfX2aEYIBqRXOzsq-fOUi183aPcs0qv_GTkdNc51hehz26uGzR_mE_lF2xXWKqXcjmZnLVXV3Y/s400/cpanel.PNG" title="Cara Valid Upload Website Ke Hosting 000Webhost" width="400" /></a></div><br />Langkah ini, dilakukan sebagai panduan, kita memakai Filezilla. Jadi perhatikan baik - baik.<br />Informasi di bawah ini, yang akan menjadi panduan di filezilla.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3JJ1vB-M2Z24MsIapYUO87j3rM6TQlVYJ793MMrcqgfi6UWdMgET9z7NPY7vZFQcqFSEq9735Z21LCzuNwlTT65S3vjqjMQUtFEsLQ6ZcCb44MZQaAfuMzhsuOwV6e88DiHZYJ9qwpek4/s1600/info.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Valid Upload Website Ke Hosting 000Webhost" border="0" height="362" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3JJ1vB-M2Z24MsIapYUO87j3rM6TQlVYJ793MMrcqgfi6UWdMgET9z7NPY7vZFQcqFSEq9735Z21LCzuNwlTT65S3vjqjMQUtFEsLQ6ZcCb44MZQaAfuMzhsuOwV6e88DiHZYJ9qwpek4/s400/info.PNG" title="Cara Valid Upload Website Ke Hosting 000Webhost" width="400" /></a></div><div class="separator" style="clear: both; text-align: center;"></div><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;">Langkah 3, MySQL</span></h3>Bagian ini, yang memang sedikit rumit. Buat database..<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWmPO7893s12r5moikDrmLRO07ZzARHWfzqljAiHefp8Uk0Kq0Y-m4CJJfubZDTnMo94pP81GftY2_na3w-KYji5SRLF-CTj4rDYlZ2SOsFx9WO74-DPbWFBAqWxPL-hFdgJlk1oMAxBGV/s1600/cpanel2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Valid Upload Website Ke Hosting 000Webhost" border="0" height="265" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWmPO7893s12r5moikDrmLRO07ZzARHWfzqljAiHefp8Uk0Kq0Y-m4CJJfubZDTnMo94pP81GftY2_na3w-KYji5SRLF-CTj4rDYlZ2SOsFx9WO74-DPbWFBAqWxPL-hFdgJlk1oMAxBGV/s400/cpanel2.PNG" title="Cara Valid Upload Website Ke Hosting 000Webhost" width="400" /></a></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMuiR73mAK5lEoPt98trTd2Daqguu4YMI3WeiibC3kNp3frUvP6PNOt_4e3x5Msbdfs5cJYMiprgAO2OMR5sBEnevizhyphenhyphen1JGaiyRvtQc31y3sQuy0Kcru8vDYBBq0iEXqJ4rv3gFXt4hzk/s1600/mysql.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Valid Upload Website Ke Hosting 000Webhost" border="0" height="198" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMuiR73mAK5lEoPt98trTd2Daqguu4YMI3WeiibC3kNp3frUvP6PNOt_4e3x5Msbdfs5cJYMiprgAO2OMR5sBEnevizhyphenhyphen1JGaiyRvtQc31y3sQuy0Kcru8vDYBBq0iEXqJ4rv3gFXt4hzk/s400/mysql.PNG" title="Cara Valid Upload Website Ke Hosting 000Webhost" width="400" /></a></div><br />Isi Database Name, dan MySQL user. Jika saya, membuat keduanya dengan nama yang sama...dan password yang sama dengan password ketika register.<br /><br /><blockquote class="tr_bq">MySQL Database Name : dipakai ketika mengkoneksikan database ke server hosting<br />MySQL User Name : dipakai ketika mengkoneksikan user server lama ke user server hosting<br />Password MySQL : dipakai ketika mengkoneksikan ke server hosting</blockquote> Kemudian catat, hasilnya...<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-sFBpEzTct68qCzcTfzNP3p3ij5msM5iZcybkVvE2ByXiiFdlqmp59-eqqYjL2Q__6EnBux8LOFVLsWbHfS4_eXiLpdTbENcf3H2LUDtpEV8aSICndTS3m1QT3s4LT7MTdp9x_en3t-dw/s1600/info2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Valid Upload Website Ke Hosting 000Webhost" border="0" height="205" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-sFBpEzTct68qCzcTfzNP3p3ij5msM5iZcybkVvE2ByXiiFdlqmp59-eqqYjL2Q__6EnBux8LOFVLsWbHfS4_eXiLpdTbENcf3H2LUDtpEV8aSICndTS3m1QT3s4LT7MTdp9x_en3t-dw/s320/info2.PNG" title="Cara Valid Upload Website Ke Hosting 000Webhost" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcSUWOpvofEpJkvbK01lGP90-1Cu1bUZ3977Lm1xFmXXYOBfM4__UkE4XVnjPuPKSepEmk3NlvO024JVcrwVv41JRE8qeGOuDCL7QXoghAznkfr1WKPdUryabUvjZbG7E7MyJd6DLareAO/s1600/info2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><br /></a></div><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;">Langkah 4, PHP MyAdmin</span></h3>Sekarang, masuk di PHP MyAdmin.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNXo8P1qGOfb2U2bqGqYB4e1etHu3Pd7kovnYekK2qnTw2lj2atRaKqwUpJjw9OrkyB69iqy17myILgNmsa9FN3U8p4MUaKfnxS1ZzrBP-BsxaE2XGdiUOxvuaQDHSCWuMrEzE2FBSqXcV/s1600/go+to+phpmyadmin.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Valid Upload Website Ke Hosting 000Webhost" border="0" height="82" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNXo8P1qGOfb2U2bqGqYB4e1etHu3Pd7kovnYekK2qnTw2lj2atRaKqwUpJjw9OrkyB69iqy17myILgNmsa9FN3U8p4MUaKfnxS1ZzrBP-BsxaE2XGdiUOxvuaQDHSCWuMrEzE2FBSqXcV/s400/go+to+phpmyadmin.PNG" title="Cara Valid Upload Website Ke Hosting 000Webhost" width="400" /></a></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP6x56q8yW2P7MUnayXL-0Km1aS-hTIn0Escl-2-EnS7YUM4nflLkLPPu9ec7LHodkB_kz8X-TDLELWB-ZQROi0A4oJ76fUiUmyKZU6h5YOGB7Ng_erNfNFEtX8FuAT3tI22xdk8h8bPsf/s1600/phpmyadmin.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Valid Upload Website Ke Hosting 000Webhost" border="0" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP6x56q8yW2P7MUnayXL-0Km1aS-hTIn0Escl-2-EnS7YUM4nflLkLPPu9ec7LHodkB_kz8X-TDLELWB-ZQROi0A4oJ76fUiUmyKZU6h5YOGB7Ng_erNfNFEtX8FuAT3tI22xdk8h8bPsf/s400/phpmyadmin.PNG" title="Cara Valid Upload Website Ke Hosting 000Webhost" width="400" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_yhPSc9VKMUlXacLJO0CCEUcHuUwRxxiZz9INCxYleCpgRCuKHcon-nF4DexkYrrLkdHFqJTr8QKvk9g3vc1mspgIyMd4cRrz9YoCQw88xpi2OCPR6y69PyjeSnaDNTZiPADlimVqoxyd/s1600/table.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="131" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_yhPSc9VKMUlXacLJO0CCEUcHuUwRxxiZz9INCxYleCpgRCuKHcon-nF4DexkYrrLkdHFqJTr8QKvk9g3vc1mspgIyMd4cRrz9YoCQw88xpi2OCPR6y69PyjeSnaDNTZiPADlimVqoxyd/s400/table.PNG" width="400" /></a></div>Ini gunakan untuk melakukan import database dari localhost yang sudah kita export sebelumnya. Masuk <a href="http://www.bocahit.com/2012/10/cara-export-database-dari-localhost-60.html" target="_blank">disini</a>, jika anda belum mengeksport database.<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;">Langkah 5, Config Server Hosting </span></h3><pre class="brush:js;"><?PHP<br /><br />$koneksi=mysql_connect("localhost","root","bocahit");<br /><br />//untuk membuat koneksi ke server<br /><br />//mysql_connect("localhost","user","password")<br /><br />if($koneksi){<br /><br />    echo" ";<br /><br />}else{<br /><br />    echo"Cek Database!!";<br /><br />}<br /><br />?><br /><br /></pre><br />Diatas adalah script awal ketika kita mengkoneksikan ke localhost. Setelah Import kita juga kembali mengaturnya, karena server yang ada di hosting sekarang masih dalam server localhost.<br /><br /><div class="alert-box notice">notice: Lihat kembali konfigurasi yang anda catat tadi.</div><blockquote><h5 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: blue;">Ganti localhost menjadi server MySQL Host Anda</span></h5>Misal : mysql9.000webhost.com<br /><h5 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: blue;">Ganti root menjadi server MySQL Username Anda</span></h5>Misal : a1093615_bocahit,<br /><h5 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: blue;">Ganti password menjadi password MySQL Anda </span></h5></blockquote><div class="alert-box warning">Warning: Jangan sampai tanda("") terhapus</div><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;">Langkah 6, Upload Script</span></h3><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht-9P0MNhJN2Cw2TIXwjsxHOlyKhgvGXiQS6bhXs9fBIFgUvZY5094_R-P2olN7-kXgY8az1evO5mgJRpqkkOkXbzRwbHEz8_HlZ0fYp29lx1oN7mPEX1i07iyMkj0tbBiVyfNZLYQZO5f/s1600/file.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Valid Upload Website Ke Hosting 000Webhost" border="0" height="58" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht-9P0MNhJN2Cw2TIXwjsxHOlyKhgvGXiQS6bhXs9fBIFgUvZY5094_R-P2olN7-kXgY8az1evO5mgJRpqkkOkXbzRwbHEz8_HlZ0fYp29lx1oN7mPEX1i07iyMkj0tbBiVyfNZLYQZO5f/s400/file.PNG" title="Cara Valid Upload Website Ke Hosting 000Webhost" width="400" /></a></div><br />Masukkan, dengan yang tertulis di View Account Details.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGz7leBvqiFaNUYBh5wszGRpG_j3DuYzqoj9Lkf5qoYpoV2G02f-uWnN88J4dWGXEs4CECV0Z7moihoLZNUw2HlGAX06VmiVITH2XyaXexzPC9N7fXlU09jpqyeEJOvljaBET3fXab6Vad/s1600/upload.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Valid Upload Website Ke Hosting 000Webhost" border="0" height="80" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGz7leBvqiFaNUYBh5wszGRpG_j3DuYzqoj9Lkf5qoYpoV2G02f-uWnN88J4dWGXEs4CECV0Z7moihoLZNUw2HlGAX06VmiVITH2XyaXexzPC9N7fXlU09jpqyeEJOvljaBET3fXab6Vad/s400/upload.PNG" title="Cara Valid Upload Website Ke Hosting 000Webhost" width="400" /></a></div><br />Lalu upload file ke dalam public_html. Kemudian tunggu sampai proses selesai. Anda bisa mengubah hak akses folder menjadi 777 dengan Klik kanan folder pilih yang paling bawah (Hak Akses Berkas).<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><br /><div class="alert-box success">Sukses : Cek Url Web Anda.</div><br />

Cara Valid Upload Website Ke Hosting 000Webhost

Cara Valid Upload Website Ke Hosting 000Webhost | Sudah lama, jika hosting gratis ini, memberikan pelayanan yang sangat mudah dan baik (menurut saya). Upload web dari builder kita di PC sebut saja dengan Dreamweaver tambah dengan databasenya. Kali ini, saya berbagi penagalaman tentang upload dan set…

Baca selengkapnya »

Cara Menghapus Data Di Database Dengan PHP

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPO5TLZ3J1GF7ZY0DGa_ggGp6Cua9nNkDtlEO1S_VF4fgm4oWrlODixiy9o4EL0kdQNhpqB2jUEiJJwpyRmqRvcJPHbAA-0zur6QF0Oe1H5C_HuYFxdRDm1wJLV6e_mtkj8wQ3fIQIwsdr/s1600/Capture.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Mengahapus Data Di Database Dengan PHP" border="0" height="85" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPO5TLZ3J1GF7ZY0DGa_ggGp6Cua9nNkDtlEO1S_VF4fgm4oWrlODixiy9o4EL0kdQNhpqB2jUEiJJwpyRmqRvcJPHbAA-0zur6QF0Oe1H5C_HuYFxdRDm1wJLV6e_mtkj8wQ3fIQIwsdr/s320/Capture.PNG" title="Cara Mengahapus Data Di Database Dengan PHP" width="320" /></a></div>Cara Menghapus Data Di Database Dengan PHP | Hai, ketemu dengan Wammy San di <a href="http://www.bocahit.com/search/label/PHP" target="_blank">PHP</a>. Lihat apa saja yang sudah yang ku tulis tentang <a href="http://www.bocahit.com/search/label/PHP" target="_blank">PHP</a>. Kali ini tentang Delete Cascade...kalau dulu saya pernah nulis <a href="http://www.bocahit.com/2013/04/menghubungkan-form-ke-database.html" target="_blank">Insert Data</a>, <a href="http://www.bocahit.com/2013/05/cara-menampilkan-data-dari-database.html" target="_blank">View Data</a>, <a href="http://www.bocahit.com/2013/05/cara-mengubah-data-dengan-php-dan-mysql.html" target="_blank">Edit Data</a>, jadi kali ini tetep Delete Data. Waw, ternyata udah sampai sini.<br /><br />Okey, pertama anda buat file yang bernama form-delete.php, kemudian isi dengan script php di bawah ini...<br /><br /><pre class="brush:js;"><table width="30%" class="akutabel"><br /> <tr><br /> <td align="center" bgcolor="#FF0000">NAMA</td><br /> <td align="center" bgcolor="#FF0000">NIM</td><br /> <td align="center" bgcolor="#FF0000">HAPUS</td><br /> </tr><br /> <?php<br /> include("uji.php");<br /> mysql_select_db("amburadul");<br /> $sql="select * from biodata order by no";<br /> $hasil=mysql_query($sql);<br /> <br /> while($data=mysql_fetch_row($hasil)){<br /> echo"<br /> <tr><br /> <td>$data[1]</td><br /> <td>$data[2]</td><br /> <td><a href="proses-hapus.php?no=$data[0]">Hapus</a></td><br /> </tr>";<br /> }<br /> ?><br /></table></pre><br />Penjelasan, silakan tanya pada dosen, atau tanya di google...selanjutnya buat file baru lagi dengan nama proses-delete.php, kemudian isi dengan script php di bawah ini..<br /><br />Pastikan, anda telah <a href="http://www.bocahit.com/2013/03/melakukan-koneksi-ke-database.html" target="_blank">terhubung</a> dengan database...<br /><br /><pre class="brush:js;"><?PHP<br />include("uji.php");<br />mysql_select_db("amburadul");<br />$sql="SELECT * FROM biodata WHERE no='$no'";<br />$hasil=mysql_query($sql);<br />$data=mysql_fetch_row($hasil);<br />?><br /><br /><table width="30%" class="akutabel"><br /><tr><br /><td> FORM HAPUS DATA</td><br /></tr><br /><table width="30%" class="akutabel"><br /> <tr><br /> <td>Labels</td><br /> <td>Isi</td><br /> </tr><br /> <tr><br /> <form id="form1" name="form1" method="post" action=""><br /> <tr><br /> <td width="31%">NAMA</td><br /> <td width="69%"><label for="nama"></label><br /> <input name="nama" type="text" id="nama" value="<?php echo"$data[1]"?>" /></td><br /> </tr><br /> <tr><br /> <td bgcolor="#006600">NIM</td><br /> <td><label for="nim"></label><br /> <input name="nim" type="text" id="nim" value="<?php echo"$data[2]"?>" /></td><br /> </tr><br /> <tr><br /> <td bgcolor="#006600">&nbsp;</td><br /> <td><label> <br /> <div align="center"><strong>Anda Yakin Ingin Menghapus?</strong> <br /> <br /> <input type="submit" id="proses" name="Submit" value="YA" /><br /> <input type="submit" id="proses" name="Submit2" value="BATAL" /><br /> <input name="no" type="hidden" id="proses" value="<? echo"$data[0]"?>" /><br /> </div><br /> </label></td><br /> <br /> <br /> </form> <br /> <br /></table></table><br /><?<br />if($Submit){<br /> $hapus="DELETE FROM biodata WHERE no='$no'";<br /> $hasil=mysql_query($hapus);<br /> if($hasil){<br /> echo"<br>Data sukses di hapus";<br /> <br /> }else{<br /> echo"<br>Data Gagal Di hapus";<br /> }<br />}<br />?></pre><br />Selamat Mencoba!!

Cara Menghapus Data Di Database Dengan PHP

Cara Menghapus Data Di Database Dengan PHP | Hai, ketemu dengan Wammy San di PHP. Lihat apa saja yang sudah yang ku tulis tentang PHP. Kali ini tentang Delete Cascade...kalau dulu saya pernah nulis Insert Data, View Data, Edit Data, jadi kali ini tetep Delete Data. Waw, ternyata udah sampai sini.Oke…

Baca selengkapnya »

Pembaca Berita Cantik Dan Seksi : Aviani Malik

Presenter Cantik Dan Seksi : Aviani Malik | Hai balik lagi,,ga sengaja tadi lihat salah satu acara berita di Metro TV, lupa apa namanya. Yang ku perhatikan cuma pembaca beritanya aja, selain cantik juga pinter (kelihatannya). Nah kalau anda belajar di jurasan jurnalistik atau broadcester, mungkin wanita bisa dijadikan semangat.. Waktu itu aku, belum tahu siapa namanya...terpaksa dech nonton sampai selesai, kan di akhir acara, pasti ada kata "Saya bla bla bla bla...". Aviani Malik, langsung dech cari di eyang google. Sapa tahu ada berita baru. Akhirnya dapet yang beginian....Asik dapet, ide buat artikel nich. Bosan juga masalah sekrip...<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRZGDJ7SG18leWYXvv93OkaYupEfttUte3ZJzspVHN-7-ULT7RwKfGHK6EysEUv1zJRpwJRebdIN52QFQYg3ValVgJXojersABDFRtRuG3mwqyqXcat-ZGTXgJBwXKfHcfbFj-KHhQz8cu/s1600/aviani2.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRZGDJ7SG18leWYXvv93OkaYupEfttUte3ZJzspVHN-7-ULT7RwKfGHK6EysEUv1zJRpwJRebdIN52QFQYg3ValVgJXojersABDFRtRuG3mwqyqXcat-ZGTXgJBwXKfHcfbFj-KHhQz8cu/s400/aviani2.JPG" width="400" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihAZ0dPkb_walNburRV6ZpMC6UHvM-_rIPFS18FaZYmQBY09o3SxHHEleW3mEGFWEvwTQx5YvRswYfbfaiEayBNhFdwTYLTDuyHB5kPLFiNMk7vUIoaa-fCdZJsrJeIuIsZVZZQYCGqvbp/s1600/aviani5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="375" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihAZ0dPkb_walNburRV6ZpMC6UHvM-_rIPFS18FaZYmQBY09o3SxHHEleW3mEGFWEvwTQx5YvRswYfbfaiEayBNhFdwTYLTDuyHB5kPLFiNMk7vUIoaa-fCdZJsrJeIuIsZVZZQYCGqvbp/s400/aviani5.jpg" width="400" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy_WBjgOOBzGCxJdnK68cvYbtUFpfKbldhipwOErQq0M-wlFl0JhHazGtrReSxadh6OaTv33Q2gnl5pyGc9TTKbmSEavzisjsyqgM3VInW_fOIZATstIltv8Tv3q6ZklEbpmZMaooN9Oem/s1600/aviani6.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy_WBjgOOBzGCxJdnK68cvYbtUFpfKbldhipwOErQq0M-wlFl0JhHazGtrReSxadh6OaTv33Q2gnl5pyGc9TTKbmSEavzisjsyqgM3VInW_fOIZATstIltv8Tv3q6ZklEbpmZMaooN9Oem/s400/aviani6.jpg" width="300" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiyJpA-dCjRUQRKTpQmr_hiN5SDZpLcoK00D3S0xo96kbEl3hyphenhyphenKUYmkRHQaPBR2WP5OgzeSxTYWz3WeESdhEwMV08_v5O2bjzHXZKVAw2tUyohybN9ayR2vFTwFeYCZuku0_BErjQpdoux/s1600/aviani1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="299" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiyJpA-dCjRUQRKTpQmr_hiN5SDZpLcoK00D3S0xo96kbEl3hyphenhyphenKUYmkRHQaPBR2WP5OgzeSxTYWz3WeESdhEwMV08_v5O2bjzHXZKVAw2tUyohybN9ayR2vFTwFeYCZuku0_BErjQpdoux/s400/aviani1.jpg" width="400" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ369109JU2-jDZfn0we6j7J_v1GUPZReexbvDavflHz037Iai0Uat-OrwRcC5V7Io6KrJRgw_bBHMY5_2sHO1-OXsc-MQ0T_AnnHjcKdcsG0UUkWvdAkrAY5Uim73hMkK9fEHec9dGsZ-/s1600/aviani4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ369109JU2-jDZfn0we6j7J_v1GUPZReexbvDavflHz037Iai0Uat-OrwRcC5V7Io6KrJRgw_bBHMY5_2sHO1-OXsc-MQ0T_AnnHjcKdcsG0UUkWvdAkrAY5Uim73hMkK9fEHec9dGsZ-/s400/aviani4.jpg" width="387" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZwELDunB18OFCMZTcOpwSHWetndnv09wpQn05LvEJAuy7lAjqIKb1TgO0WwYagSREYTnyZCt4VlSLyXGonqj6dB6oY6uFBS_tC0a_DMfD3GBiGzoeMPEfQzPB4sbUfLdsmGlAsWN0Xyln/s1600/Aviani+malik.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZwELDunB18OFCMZTcOpwSHWetndnv09wpQn05LvEJAuy7lAjqIKb1TgO0WwYagSREYTnyZCt4VlSLyXGonqj6dB6oY6uFBS_tC0a_DMfD3GBiGzoeMPEfQzPB4sbUfLdsmGlAsWN0Xyln/s400/Aviani+malik.jpg" width="332" /> </a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCskLt7DvNTd6DoGh_XOmiB6UHAjZqSaICMvQUYF59hLdtIrV7biF8oyDR06_0XTEaSNTvOLpulYXg2l8CPiadXkcuWRbaB1pm2L9uuTYVtHD_vyKmcEHc5527Emu4SZik_jK86t4Fw56U/s1600/aviani3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="512" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCskLt7DvNTd6DoGh_XOmiB6UHAjZqSaICMvQUYF59hLdtIrV7biF8oyDR06_0XTEaSNTvOLpulYXg2l8CPiadXkcuWRbaB1pm2L9uuTYVtHD_vyKmcEHc5527Emu4SZik_jK86t4Fw56U/s640/aviani3.jpg" width="640" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg34VOMyRKl0Ha4dgLC3lLVyMQNsxrIaqljA4uH5JsqQ0OKIAiJ30RKfjeaSkOKT-N5NkG-DYULj_1trfZCHBO2QZQFOiLkd_p0RsfST5l0ic2yR3VDWb7QeQmVQ-1QKPQFCxDw_lInuujw/s1600/aviani7.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="299" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg34VOMyRKl0Ha4dgLC3lLVyMQNsxrIaqljA4uH5JsqQ0OKIAiJ30RKfjeaSkOKT-N5NkG-DYULj_1trfZCHBO2QZQFOiLkd_p0RsfST5l0ic2yR3VDWb7QeQmVQ-1QKPQFCxDw_lInuujw/s400/aviani7.jpg" width="400" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVDvcBM2oGrmTs-o1vWVOqpRREB6GWkqRlABlwSWqmAog-QlGstedTrWfHgxkVEUMlFGtt2-A8oHUWXkWQk-SFxmqHR3V6gONdv3qckYByClw-2spLYs5a859lC8ilMThg3wq-2PXc8w4w/s1600/aviani8.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVDvcBM2oGrmTs-o1vWVOqpRREB6GWkqRlABlwSWqmAog-QlGstedTrWfHgxkVEUMlFGtt2-A8oHUWXkWQk-SFxmqHR3V6gONdv3qckYByClw-2spLYs5a859lC8ilMThg3wq-2PXc8w4w/s400/aviani8.jpg" width="390" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidTZj0reIwB4zK68J6xMjrI6dEbJm-77p14tnDmUkaHSQ9VclRqPzOmnzphTugwIXSjZuYRxiNpzrGuLvT6AKs-nCeijxkrvLLwxf4Dcm66IiMA4yCtuk4EMDYShyphenhyphenPUQzlLl2qu4s6WT2M/s1600/aviani9.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="512" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidTZj0reIwB4zK68J6xMjrI6dEbJm-77p14tnDmUkaHSQ9VclRqPzOmnzphTugwIXSjZuYRxiNpzrGuLvT6AKs-nCeijxkrvLLwxf4Dcm66IiMA4yCtuk4EMDYShyphenhyphenPUQzlLl2qu4s6WT2M/s640/aviani9.jpg" width="640" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_y4-R4VyvML2c_06Jncryw6gAj3uGiNYFafvIsXDPSTB11y1-hsoSEFjFglUKI0rby6Si1a0rpTYSrfgQ-ghBXMG_OWfpzC3otz68NYzv1qvd2CcDhfwPeYFCnz2bgfxpGuJaefBzPWg_/s1600/aviani10.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="479" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_y4-R4VyvML2c_06Jncryw6gAj3uGiNYFafvIsXDPSTB11y1-hsoSEFjFglUKI0rby6Si1a0rpTYSrfgQ-ghBXMG_OWfpzC3otz68NYzv1qvd2CcDhfwPeYFCnz2bgfxpGuJaefBzPWg_/s640/aviani10.jpg" width="640" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0NYWr77sUgw_7ewyzFfH6Mppbd5DDbjp8Jw5dzWq3hhCLzzU6e4Utx0cMkSXgmZyx_oaq6fwQBISV9Ue4-IivVaPlfo-sevq05NZpNvkMwWqHsrpTg4li9Hc8vqpr2JWSZP5S80uHxj-m/s1600/malik1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0NYWr77sUgw_7ewyzFfH6Mppbd5DDbjp8Jw5dzWq3hhCLzzU6e4Utx0cMkSXgmZyx_oaq6fwQBISV9Ue4-IivVaPlfo-sevq05NZpNvkMwWqHsrpTg4li9Hc8vqpr2JWSZP5S80uHxj-m/s640/malik1.jpg" width="426" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghYcCD1RaUtUvLG4by6XCE33gyRw1niBozaonvrH8-FQgsDF14E4vTmcZyOBRK8JPTPP0PxA6QZHxYxkd4wKDdR4huFLOaWu-_PTm734zcVmhXNoMAxJLCM-VITZSAVbynHHQYgaCrzA7M/s1600/malik2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="512" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghYcCD1RaUtUvLG4by6XCE33gyRw1niBozaonvrH8-FQgsDF14E4vTmcZyOBRK8JPTPP0PxA6QZHxYxkd4wKDdR4huFLOaWu-_PTm734zcVmhXNoMAxJLCM-VITZSAVbynHHQYgaCrzA7M/s640/malik2.jpg" width="640" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg41MG-hzCTJsdrwH2isv2fq8EiqiPIOZzF-0qSHfJVxvp7R1hhh1dxQEYWtfwFgtgKJ4xw9Aa4vv5RCBFyjY39AxiRgZw_4JZxe7U6Ukoz3DitWchS_Aem8QmAZjSZauys-8PcPsYHDvCF/s1600/malik3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg41MG-hzCTJsdrwH2isv2fq8EiqiPIOZzF-0qSHfJVxvp7R1hhh1dxQEYWtfwFgtgKJ4xw9Aa4vv5RCBFyjY39AxiRgZw_4JZxe7U6Ukoz3DitWchS_Aem8QmAZjSZauys-8PcPsYHDvCF/s640/malik3.jpg" width="480" /></a></div><br />

Pembaca Berita Cantik Dan Seksi : Aviani Malik

Presenter Cantik Dan Seksi : Aviani Malik | Hai balik lagi,,ga sengaja tadi lihat salah satu acara berita di Metro TV, lupa apa namanya. Yang ku perhatikan cuma pembaca beritanya aja, selain cantik juga pinter (kelihatannya). Nah kalau anda belajar di jurasan jurnalistik atau broadcester, mungkin wa…

Baca selengkapnya »

Cara Membuat Form Login Admin Dengan Javascript & CSS3

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeFuDZos93Go45IQs6equhNsgrYmGk2dogttaHIU_L6slVVaBEbIrrAi21dlFLgQsI3gsWESV3YyOASXDxxk4_-pLAnB_yPkXcq9PlNxl3SG1U3ByxYg8ocwPzl7ZvsSKelGP_EIBcZ694/s1600/Capture.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Form Login Admin Dengan Javascript & CSS3" border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeFuDZos93Go45IQs6equhNsgrYmGk2dogttaHIU_L6slVVaBEbIrrAi21dlFLgQsI3gsWESV3YyOASXDxxk4_-pLAnB_yPkXcq9PlNxl3SG1U3ByxYg8ocwPzl7ZvsSKelGP_EIBcZ694/s320/Capture.PNG" title="Cara Membuat Form Login Admin Dengan Javascript & CSS3" width="320" /></a></div>Cara Membuat Form Login Admin Dengan Javascript & CSS3 | Hai, ketemu saya lagi. Kali ini, kita oprek masalah login. Yang pasti ini digunakan untuk web dinamis yang kita bangun. Emmm, jika kemarin adalah form signup yang bisa di ubah ke form kontak, form login ini, juga bisa di sulap jadi form kontak sesuai dengan kreatifitas anda.<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;">Javascript, Form Login</span></h3><pre class="brush:js;">$(function(){<br /><br /> // Mengecek dukungan CSS3 3D<br /> $.support.css3d = supportsCSS3D();<br /><br /> var formContainer = $('#formContainer');<br /><br /> $('.flipLink').click(function(e){<br /><br /> <br /> formContainer.toggleClass('flipped');<br /><br /> // Pilihan jika tidak support<br /> if(!$.support.css3d){<br /> $('#login').toggle();<br /> }<br /> e.preventDefault();<br /> });<br /><br /> formContainer.find('form').submit(function(e){<br /><br /> e.preventDefault();<br /> });<br /><br /> function supportsCSS3D() {<br /> var props = [<br /> 'perspectiveProperty', 'WebkitPerspective', 'MozPerspective'<br /> ], testDom = document.createElement('a');<br /><br /> for(var i=0; i<props.length; i++){<br /> if(props[i] in testDom.style){<br /> return true;<br /> }<br /> }<br /><br /> return false;<br /> }<br />});<br /></pre><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, Style Form</span></h3><pre class="brush:js;">#formContainer{<br /> width:288px;<br /> height:321px;<br /> margin:0 auto;<br /> position:relative;<br /> z-index:1;<br /> <br /> -moz-perspective: 800px;<br /> -webkit-perspective: 800px;<br /> perspective: 800px;<br />}<br /><br />#formContainer form{<br /> width:100%;<br /> height:100%;<br /> position:absolute;<br /> top:0;<br /> left:0;<br /> <br /> -moz-transform-style: preserve-3d;<br /> -webkit-transform-style: preserve-3d;<br /> transform-style: preserve-3d;<br /> <br /> -moz-backface-visibility: hidden;<br /> -webkit-backface-visibility: hidden;<br /> backface-visibility: hidden;<br /> <br /> -moz-transition:0.8s;<br /> -webkit-transition:0.8s;<br /> transition:0.8s;<br /> <br /> -moz-animation: pulse 2s infinite;<br /> <br /> -webkit-animation: pulse 2s infinite;<br />}<br /><br /><br />/* Firefox Keyframe Animation */<br />@-moz-keyframes pulse{<br /> 0%{ box-shadow:0 0 1px #008aff;}<br /> 50%{ box-shadow:0 0 8px #008aff;}<br /> 100%{ box-shadow:0 0 1px #008aff;}<br />}<br /><br />/* Webkit keyframe animation */<br />@-webkit-keyframes pulse{<br /> 0%{ box-shadow:0 0 1px #008aff;}<br /> 50%{ box-shadow:0 0 10px #008aff;}<br /> 100%{ box-shadow:0 0 1px #008aff;}<br />}<br /><br />#login{<br /> background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2LBuKjRkvutwCz8LL3ebqtuG-N6pLYiPn4LgjxZxNjgs_GfMtxfI8pSQuMzoTE92xVbICzsUK2apqk_l0ibfoBZFKeRoQorJFJT6b9_mKPqsragHYUIwd-nAM30unotsCRHMNqY3y2lOH/s321/login_form_bg.jpg) no-repeat;<br /> z-index:100;<br />}<br /><br />#recover{<br /> background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaJHOY_XO7QqYOdARKXwoLLeKkUy86GVwYz7o5uMkfReCjd3iBy_z3piOys7Wib5CV2dfZfWih-0GIjoNNCNbnOW4aQ2CJK8tZro0S4gEhtCqSG0weT2NMR2YcQUgQRqqZ2M0gJkyyqZKj/s321/recover_form_bg.jpg) no-repeat;<br /> z-index:1;<br /> opacity:0;<br /> <br /> -moz-transform:rotateY(180deg);<br /> -webkit-transform:rotateY(180deg);<br /> transform:rotateY(180deg);<br />}<br /><br />#formContainer.flipped #login{<br /> <br /> opacity:0;<br /> <br /> <br /> -moz-transform:rotateY(-180deg);<br /> -webkit-transform:rotateY(-180deg);<br /> transform:rotateY(-180deg);<br />}<br /><br />#formContainer.flipped #recover{<br /> <br /> opacity:1;<br /> <br /> -moz-transform:rotateY(0deg);<br /> -webkit-transform:rotateY(0deg);<br /> transform:rotateY(0deg);<br />}<br /></pre><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, Untuk Input, Links & Button</span></h3><pre class="brush:js;">#login .flipLink,<br />#recover .flipLink{ <br /> height: 65px;<br /> overflow: hidden;<br /> position: absolute;<br /> right: 0;<br /> text-indent: -9999px;<br /> top: 0;<br /> width: 65px;<br />}<br /><br />#recover .flipLink{<br /> right:auto;<br /> left:0;<br />}<br /><br />#login:after{<br /> /* "Click here" tooltip */<br /> width:98px;<br /> height:16px;<br /> content:'';<br /> background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiklwSjcW-mCsqXnes9nM3FNlBa2niHU9T1GgXreCERbAP-C-XpXzuqG6VmFKkgGxqQ0NU0o3yXhTCWHqdwiJaNHiMqCC1doQe-SpS_s_mz0s4Ipr-m76uGYFjsR0dKpY39FYdv2o9tL_hr/s98/click_here.png) no-repeat;<br /> position:absolute;<br /> right:-120px;<br /> top:22px;<br />}<br /><br />input[type=text],input[type=password]{<br /> /* text fields */<br /> font: 15px 'Segoe UI',Arial,sans-serif;<br /> border: none;<br /> background:none;<br /> height: 36px;<br /> left: 26px;<br /> position: absolute;<br /> top: 176px;<br /> width: 234px;<br /> text-indent: 8px;<br /> text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);<br /> color:#eee;<br /> outline:none;<br />}<br /><br />#loginPass{<br /> top: 215px;<br />}<br /><br />#recoverEmail{<br /> top:215px;<br />}<br /><br />input[type=submit]{<br /> <br /> /* Submit button */<br /> <br /> opacity:0.9;<br /> position:absolute;<br /> top:262px;<br /> left:25px;<br /> width: 239px;<br /> height:36px;<br /> cursor:pointer;<br /> border-radius:6px;<br /> box-shadow:0 1px 1px #888;<br /> border:none;<br /> color:#fff;<br /> font:14px/36px 'Segoe UI Light','Segoe UI',Arial,sans-serif;<br /> <br /> /* CSS3 Gradients */<br /> <br /> background-image: linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%);<br /> background-image: -o-linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%);<br /> background-image: -moz-linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%);<br /> background-image: -webkit-linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%);<br /> background-image: -ms-linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%);<br /> <br /> background-image: -webkit-gradient(<br /> linear,<br /> left bottom,<br /> left top,<br /> color-stop(0.5, rgb(80,102,127)),<br /> color-stop(0.5, rgb(87,109,136)),<br /> color-stop(1, rgb(106,129,155))<br /> );<br />}<br /><br />input[type=submit]:hover{<br /> opacity:1;<br />}<br /><br />input::-webkit-input-placeholder {<br /> color:#eee;<br />}<br /></pre><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;"><div id="formContainer"><br /><form action="./" id="login" method="post"><br /><a class="flipLink" href="./" id="flipToRecover">Forgot?</a><br /> <input id="loginEmail" name="loginEmail" placeholder="Email" type="text" /><br /> <input id="loginPass" name="loginPass" placeholder="Password" type="password" /><br /> <input name="submit" type="submit" value="Login" /><br /> </form><br /><form action="./" id="recover" method="post"><br /><a class="flipLink" href="./" id="flipToLogin">Forgot?</a><br /> <input id="recoverEmail" name="recoverEmail" placeholder="Your Email" type="text" /><br /> <input name="submit" type="submit" value="Recover" /><br /> </form><br /></div><br /></pre>Lihat, demo yang ada di bawah ini...<br /><br /><div style="text-align: center;"><a class="button" href="http://adf.ly/MRX5F" target="_blank" title="Download Gambar"> Download Gambar</a>                <a class="button" href="http://iframe-wammy.blogspot.com/2013/06/form-login.html" target="_blank" title="Form Login">D E M O</a></div>

Cara Membuat Form Login Admin Dengan Javascript & CSS3

Cara Membuat Form Login Admin Dengan Javascript & CSS3 | Hai, ketemu saya lagi. Kali ini, kita oprek masalah login. Yang pasti ini digunakan untuk web dinamis yang kita bangun. Emmm, jika kemarin adalah form signup yang bisa di ubah ke form kontak, form login ini, juga bisa di sulap jadi form konta…

Baca selengkapnya »