Elegan Image Accordion Dengan CSS3 & Jquery

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

Elegan Image Accordion Dengan CSS3 & Jquery

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

Baca selengkapnya »

Membuat Quick Search Dengan JSON Blogger

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

Membuat Quick Search Dengan JSON Blogger

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

Baca selengkapnya »

Membuat Form Login Cantik Dan Simple

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

Membuat Form Login Cantik Dan Simple

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

Baca selengkapnya »

Modifikasi Form Login Dengan CSS3 Dan Javascript

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

Modifikasi Form Login Dengan CSS3 Dan Javascript

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

Baca selengkapnya »

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 ...

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 ten...

Baca selengkapnya »