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

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

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

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

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

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

Baca selengkapnya »