™DeDi™SiNaGa™: 30 Trik menarik CSS3

Admin Login.....

:: DanielVSirait ::
Hacked by DanielVSirait. Visit My Site http://danielvsirait.blogspot.com

© DanielVSirait

<br> --></style> <style id='template-skin-1' type='text/css'></style> <link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=6537061223945563011&zx=638dc538-a21a-4f95-a1d9-45fa2679d231' media='none' onload='if(media!='all')media='all'' rel='stylesheet'/><noscript><link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=6537061223945563011&zx=638dc538-a21a-4f95-a1d9-45fa2679d231' rel='stylesheet'/></noscript> <meta name='google-adsense-platform-account' content='ca-host-pub-1556223355139109'/> <meta name='google-adsense-platform-domain' content='blogspot.com'/> </head> <body class='loading'> <div class='body-fauxcolumns'> <div class='fauxcolumn-outer body-fauxcolumn-outer'> <div class='cap-top'> <div class='cap-left'></div> <div class='cap-right'></div> </div> <div class='fauxborder-left'> <div class='fauxborder-right'></div> <div class='fauxcolumn-inner'> </div> </div> <div class='cap-bottom'> <div class='cap-left'></div> <div class='cap-right'></div> </div> </div> </div> <div class='content'> <div class='content-fauxcolumns'> <div class='fauxcolumn-outer content-fauxcolumn-outer'> <div class='cap-top'> <div class='cap-left'></div> <div class='cap-right'></div> </div> <div class='fauxborder-left'> <div class='fauxborder-right'></div> <div class='fauxcolumn-inner'> </div> </div> <div class='cap-bottom'> <div class='cap-left'></div> <div class='cap-right'></div> </div> </div> </div> <div class='content-outer'> <div class='content-cap-top cap-top'> <div class='cap-left'></div> <div class='cap-right'></div> </div> <div class='fauxborder-left content-fauxborder-left'> <div class='fauxborder-right content-fauxborder-right'></div> <div class='content-inner'> <header> <div class='header-outer'> <div class='header-cap-top cap-top'> <div class='cap-left'></div> <div class='cap-right'></div> </div> <div class='fauxborder-left header-fauxborder-left'> <div class='fauxborder-right header-fauxborder-right'></div> <div class='region-inner header-inner'> <div class='header section' id='header'><div class='widget Header' data-version='1' id='Header1'> <div id='header-inner'> <div class='titlewrapper'> <h1 class='title'> <a href='https://dedisinag4.blogspot.com/'> ™DeDi™SiNaGa™ </a> </h1> </div> <div class='descriptionwrapper'> <p class='description'><span> </span></p> </div> </div> </div></div> </div> </div> <div class='header-cap-bottom cap-bottom'> <div class='cap-left'></div> <div class='cap-right'></div> </div> </div> </header> <div class='tabs-outer'> <div class='tabs-cap-top cap-top'> <div class='cap-left'></div> <div class='cap-right'></div> </div> <div class='fauxborder-left tabs-fauxborder-left'> <div class='fauxborder-right tabs-fauxborder-right'></div> <div class='region-inner tabs-inner'> <div class='tabs section' id='crosscol'><div class='widget Text' data-version='1' id='Text1'> <h2 class='title'>Welcome To PeterJepiMars Blog</h2> <div class='widget-content'> </div> <div class='clear'></div> </div></div> <div class='tabs no-items section' id='crosscol-overflow'></div> </div> </div> <div class='tabs-cap-bottom cap-bottom'> <div class='cap-left'></div> <div class='cap-right'></div> </div> </div> <div class='main-outer'> <div class='main-cap-top cap-top'> <div class='cap-left'></div> <div class='cap-right'></div> </div> <div class='fauxborder-left main-fauxborder-left'> <div class='fauxborder-right main-fauxborder-right'></div> <div class='region-inner main-inner'> <div class='columns fauxcolumns'> <div class='fauxcolumn-outer fauxcolumn-center-outer'> <div class='cap-top'> <div class='cap-left'></div> <div class='cap-right'></div> </div> <div class='fauxborder-left'> <div class='fauxborder-right'></div> <div class='fauxcolumn-inner'> </div> </div> <div class='cap-bottom'> <div class='cap-left'></div> <div class='cap-right'></div> </div> </div> <div class='fauxcolumn-outer fauxcolumn-left-outer'> <div class='cap-top'> <div class='cap-left'></div> <div class='cap-right'></div> </div> <div class='fauxborder-left'> <div class='fauxborder-right'></div> <div class='fauxcolumn-inner'> </div> </div> <div class='cap-bottom'> <div class='cap-left'></div> <div class='cap-right'></div> </div> </div> <div class='fauxcolumn-outer fauxcolumn-right-outer'> <div class='cap-top'> <div class='cap-left'></div> <div class='cap-right'></div> </div> <div class='fauxborder-left'> <div class='fauxborder-right'></div> <div class='fauxcolumn-inner'> </div> </div> <div class='cap-bottom'> <div class='cap-left'></div> <div class='cap-right'></div> </div> </div> <div class='columns-inner'> <div class='column-center-outer'> <div class='column-center-inner'> <div class='main section' id='main'><div class='widget Blog' data-version='1' id='Blog1'> <div class='blog-posts hfeed'>  <div class="date-outer"> <h2 class='date-header'><span>Minggu, 02 Desember 2012</span></h2> <div class="date-posts"> <div class='post-outer'> <div class='post hentry'> <a name='7234006273924917210'></a> <h3 class='post-title entry-title'> 30 Trik menarik CSS3 </h3> <div class='post-header'> <div class='post-header-line-1'></div> </div> <div class='post-body entry-content' id='post-body-7234006273924917210'> <div dir="ltr" style="text-align: left;" trbidi="on"> <a href="http://djogzs.blogspot.com/2010/12/30-trik-menarik-css3.html"><img alt="30 Trik menarik CSS3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQFykyrft0fChrRBwxZ1sl7DNgndpobYNRel8jZXPYH8oejHKpecIOsYAfsnADxBCnKyBGyAhZZoBUDeMBavIXw0-Cz-9w42QV_-G-v3hegXclcJQICVNqDB1IwVtIPYDJEtQegpFQY2I/s1600/Untitled-1.jpg" /></a><br /> ini dia kehebatan CSS3,effect'a yang keren dan mirip dengan effect jquery dan flash.menggunakan css3 tidak akan memberatkan blog sobat tergantung banyak'a pemakaian css pada blog sobat<br /> <a href="//www.blogger.com/blogger.g?blogID=6537061223945563011" name="more"></a>,nah..kali ini saya akan share 30 Kreasi css3 dari saya yang unik2 n_n<br />  ,terdiri dari jenis CSS3 border radius atau corner,CSS3 gradient,dan CSS3 animation.untuk menikmati CSS3 ini,disarankan sobat menggunakan browser versi terbaru,dan mendukung CSS3 agar tidak ralat dalam menampilkan CSS3 ini sperti google chrome,safari,dan mozilla firefox,tetapi mozilla firefox saat ini belum mendukung 100% CSS3 animation.<br /> <br /> <br /> <br /> <br /> <br /> <br /> <blockquote> <b>Kode HTML</b><br /> <br /> masukan kode html ini di elemen halaman sobat,tapi ganti class name pada kode html di bawah ini<br /> <br /> <div class="ganti dengan nama css/kotak"></div><br /> <br /> <br /> Contoh:<br /> <div class="kotak2"></div><br /> <div class="lingkaran"></div></blockquote> <br /> <b>CSS3 Border radius</b><br /> <br /> <blockquote> <div class="kotak1"> kotak1</div> .kotak1 {<br /> -webkit-border-radius: 8px;<br /> -moz-border-radius: 8px;<br /> border-radius: 8px;<br /> background:#00C4FD;<br /> width: 200px;<br /> height: 50px;<br /> line-height: 50px;<br /> text-align: center;<br /> }</blockquote> <br /> <blockquote> <div class="kotak2"> Kotak2</div> .kotak2 {<br /> -moz-border-radius-topleft: 15px;<br /> -moz-border-radius-bottomright: 15px;<br /> -webkit-border-top-left-radius: 15px;<br /> -webkit-border-bottom-right-radius: 15px;<br /> background:#00C4FD;<br /> width: 200px;<br /> height: 50px;<br /> line-height: 50px;<br /> text-align: center;<br /> }</blockquote> <br /> <blockquote> Segitiga atas<br /> <br /> segitiga bawah<br /> <br /> segitigakanan<br /> <br /> segitigakiri<br /> <br /> .segitigabawah {<br /> border-color:#333333 transparent transparent;<br /> border-style:solid;<br /> border-width:20px 20px 0;<br /> float:left;<br /> height:0;<br /> margin:0 10px;<br /> width:0;<br /> }<br /> .segitigaatas {<br /> border-color:transparent transparent #333333;<br /> border-style:solid;<br /> border-width:0 20px 20px;<br /> float:left;<br /> height:0;<br /> margin:0 10px;<br /> width:0;<br /> }<br /> .segitigakanan {<br /> border-color: transparent transparent transparent #333333;<br /> border-style:solid;<br /> border-width:20px 20px 0;<br /> float:left;<br /> height:0;<br /> margin:0 10px;<br /> width:0;<br /> }<br /> .segitigakiri {<br /> border-color:transparent #333333 transparent transparent;<br /> border-style:solid;<br /> border-width:20px 20px 0;<br /> float:left;<br /> height:0;<br /> margin:0 10px;<br /> width:0;<br /> }</blockquote> <br /> <blockquote> <div class="lingkaran"> Lingkaran</div> .lingkaran {<br /> -moz-border-radius: 50px;<br /> -webkit-border-radius: 50px;<br /> border-radius: 50px;<br /> background:#00C4FD;<br /> width: 80px;<br /> height: 80px;<br /> line-height: 70px;<br /> text-align: center;<br /> }</blockquote> <br /> <blockquote> <div class="kotak3"> Kotak3</div> .kotak3 {<br /> -webkit-box-shadow: 1px 1px 20px #781081, -1px -1px 20px #FFFF55;<br /> -moz-box-shadow: 1px 1px 20px #781081,-1px -1px 20px #FFFF55;<br /> box-shadow: 1px 1px 20px #781081, -1px -1px 20px #FFFF55;<br /> background:#00C4FD;<br /> width: 200px;<br /> height: 50px;<br /> line-height: 50px;<br /> text-align: center;}</blockquote> <br /> <blockquote> <div class="kotak4"> Kotak4</div> .kotak4 {<br /> background:-moz-linear-gradient(-90deg, #00C4FD, #FFFF55) repeat scroll 0 0 transparent;<br /> background:-webkit-gradient(linear, left top, left bottom, from(#00C4FD), to(#FFFF55));<br /> width: 200px;<br /> height: 50px;<br /> line-height: 50px;<br /> text-align: center;}</blockquote> <br /> <b>CSS3 Gradient</b><br /> <br /> <blockquote> <div class="kotak5"> Kotak5</div> .kotak5 {<br /> background: -webkit-gradient(<br /> radial, 500 25%, 20, 500 25%, 40, from(blue), to(#eee)<br /> ) yellow;<br /> background: -moz-radial-gradient(<br /> 500px 25%, 20px, 500px 25%, 40px, from(blue), to(#eee)<br /> ) yellow no-repeat;<br /> width: 500px;<br /> height: 200px;<br /> line-height: 50px;<br /> text-align: center;}</blockquote> <br /> <blockquote> <div class="kotak6"> Kotak6</div> .kotak6 {<br /> background: -webkit-gradient(<br /> radial, 480 25%, 20, 500 25%, 40, from(blue), to(#eee)<br /> ) yellow;<br /> background: -moz-radial-gradient(<br /> 480px 25%, 20px, 500px 25%, 40px, from(blue), to(#eee)<br /> ) yellow no-repeat;<br /> width: 500px;<br /> height: 200px;<br /> line-height: 50px;<br /> text-align: center;}</blockquote> <br /> <blockquote> <div class="kotak7"> Kotak7</div> .kotak7 {<br /> background: -webkit-gradient(<br /> radial, 450 25%, 40, 500 25%, 20, from(blue), to(#eee)<br /> ) yellow;<br /> background: -moz-radial-gradient(<br /> 450px 25%, 40px, 500px 25%, 20px, from(blue), to(#eee)<br /> ) yellow no-repeat;<br /> width: 500px;<br /> height: 200px;<br /> line-height: 50px;<br /> text-align: center;}</blockquote> <br /> <blockquote> <div class="kotak8"> Kotak8</div> .kotak8 {<br /> background: -webkit-gradient(<br /> radial, 500 50%, 10, 500 50%, 80, from(orange), color-stop(0.6, #fff), to(lightblue)<br /> );<br /> background: -moz-radial-gradient(<br /> 500px 50%, 10px, 500px 50%, 80px, from(orange), color-stop(0.6, #fff), to(lightblue)<br /> ) no-repeat;<br /> width: 500px;<br /> height: 200px;<br /> line-height: 50px;<br /> text-align: center;}</blockquote> <br /> <blockquote> <div class="kotak9"> Kotak9</div> .kotak9 {<br /> background: -webkit-gradient(<br /> radial, 500 50%, 20, 500 50%, 100, from(red), color-stop(0.2, orange), color-stop(0.4, yellow), color-stop(0.6, green), color-stop(0.8, blue), to(#fff)<br /> );<br /> background: -moz-radial-gradient(<br /> 500px 50%, 20px, 500px 50%, 100px, from(red), color-stop(0.2, orange), color-stop(0.4, yellow), color-stop(0.6, green), color-stop(0.8, blue), to(#fff)<br /> ) no-repeat;<br /> width: 500px;<br /> height: 200px;<br /> line-height: 50px;<br /> text-align: center;}</blockquote> <br /> <blockquote> <div class="kotak10"> Kotak10</div> .kotak10 {<br /> background: -moz-linear-gradient(top, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);<br /> background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4f5fc), color-stop(50%,#bfe8f9), color-stop(51%,#9fd8ef), color-stop(100%,#2ab0ed));<br /> width: 500px;<br /> height: 200px;<br /> line-height: 50px;<br /> text-align: center;}</blockquote> <br /> <blockquote> <div class="kotak11"> Kotak10</div> .kotak11 {<br /> background: -moz-linear-gradient(top, #f3e2c7 0%, #c19e67 50%, #b68d4c 51%, #e9d4b3 100%);<br /> background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3e2c7), color-stop(50%,#c19e67), color-stop(51%,#b68d4c), color-stop(100%,#e9d4b3));<br /> width: 500px;<br /> height: 200px;<br /> line-height: 50px;<br /> text-align: center;}</blockquote> <br /> <b>CSS3 Animation</b><br /> <br /> <blockquote> <div class="kotak1animasi"> horizontal</div> .kotak1animasi {<br /> border-radius: 8px;<br /> background:#00C4FD;<br /> width: 200px;<br /> height: 50px;<br /> line-height: 50px;<br /> text-align: center;<br /> -webkit-transition: all 0.6s ease-in-out;<br /> }<br /> .kotak1animasi:hover {-moz-transform:translate(4em, 0pt);<br /> -webkit-transform:translate(4em, 0pt);}</blockquote> <br /> <blockquote> <div class="kotak2animasi"> berputar</div> .kotak2animasi {<br /> border-radius: 8px;<br /> background:#00C4FD;<br /> width: 200px;<br /> height: 50px;<br /> line-height: 50px;<br /> text-align: center;<br /> -webkit-transition: all 0.6s ease-in-out;<br /> }<br /> .kotak2animasi:hover {<br /> -moz-transform:rotate(30deg);<br /> -webkit-transform:rotate(30deg);}</blockquote> <br /> <blockquote> <div class="kotak3animasi"> horizontal+vertikal</div> .kotak3animasi {<br /> border-radius: 8px;<br /> background:#00C4FD;<br /> width: 200px;<br /> height: 50px;<br /> line-height: 50px;<br /> text-align: center;<br /> -webkit-transition: all 0.6s ease-in-out;<br /> }<br /> .kotak3animasi:hover {<br /> -moz-transform:translate(-3em, 1em);<br /> -webkit-transform:translate(-3em, 1em);}</blockquote> <br /> <blockquote> <div class="kotak4animasi"> Ukuran</div> .kotak4animasi {<br /> border-radius: 8px;<br /> background:#00C4FD;<br /> width: 200px;<br /> height: 50px;<br /> line-height: 50px;<br /> text-align: center;<br /> -webkit-transition: all 0.6s ease-in-out;<br /> }<br /> .kotak4animasi:hover {<br /> -moz-transform:scale(1.3);<br /> -webkit-transform:scale(1.3);}</blockquote> <br /> <blockquote> <div class="kotak5animasi"> border</div> .kotak5animasi {<br /> background:#00C4FD;<br /> width: 200px;<br /> height: 50px;<br /> line-height: 50px;<br /> text-align: center;<br /> -webkit-transition: all 0.6s ease-in-out;<br /> }<br /> .kotak5animasi:hover {<br /> -moz-border-radius-topleft: 20px;<br /> -moz-border-radius-bottomright: 20px;<br /> -webkit-border-top-left-radius: 20px;<br /> -webkit-border-bottom-right-radius: 20px;}</blockquote> <br /> <blockquote> <div class="kotak6animasi"> Lingkaran</div> .kotak6animasi {<br /> background:#00C4FD;<br /> width: 100px;<br /> height: 100px;<br /> line-height: 50px;<br /> text-align: center;<br /> -webkit-transition: all 0.6s ease-in-out;<br /> }<br /> .kotak6animasi:hover {<br /> -webkit-border-radius: 50px;<br /> -moz-border-radius: 50px;<br /> border-radius: 50px;}</blockquote> <br /> <blockquote> <div class="kotak7animasi"> ukuran box</div> .kotak7animasi {<br /> background:#00C4FD;<br /> width: 100px;<br /> height: 100px;<br /> line-height: 50px;<br /> text-align: center;<br /> -webkit-transition: all 0.6s ease-in-out;<br /> }<br /> .kotak7animasi:hover {<br /> width: 300px;}</blockquote> <br /> <blockquote> <div class="kotak8animasi"> Warna</div> .kotak8animasi {<br /> background:#00C4FD;<br /> width: 100px;<br /> height: 100px;<br /> line-height: 50px;<br /> text-align: center;<br /> -webkit-transition: all 0.6s ease-in-out;<br /> }<br /> .kotak8animasi:hover {<br /> background:#D2506C;}</blockquote> <br /> <blockquote> <div class="kotak9animasi"> shadow+background trasparant</div> .kotak9animasi {<br /> background:#00C4FD;<br /> width: 100px;<br /> height: 100px;<br /> line-height: 50px;<br /> text-align: center;<br /> -webkit-transition: all 0.6s ease-in-out;<br /> }<br /> .kotak9animasi:hover {<br /> -moz-box-shadow:0 0 20px #D2506C;<br /> -webkit-box-shadow:0 0 20px #D2506C;<br /> background-color:rgba(255, 255, 255, 0.8);}</blockquote> <br /> <blockquote> <div class="kotak10animasi"> Shadow 2 warna</div> .kotak10animasi {<br /> background:#00C4FD;<br /> width: 100px;<br /> height: 100px;<br /> line-height: 50px;<br /> text-align: center;<br /> -webkit-transition: all 0.6s ease-in-out;<br /> }<br /> .kotak10animasi:hover {<br /> -webkit-box-shadow: 1px 1px 20px #781081, -1px -1px 20px #FFFF55;<br /> -moz-box-shadow: 1px 1px 20px #781081,-1px -1px 20px #FFFF55;<br /> box-shadow: 1px 1px 20px #781081, -1px -1px 20px #FFFF55;<br /> }</blockquote> <br /> <blockquote> <div class="kotak11animasi"> multi animasi</div> .kotak11animasi {<br /> background:#00C4FD;<br /> width: 100px;<br /> height: 100px;<br /> line-height: 50px;<br /> text-align: center;<br /> -webkit-transition: all 0.6s ease-in-out;<br /> }<br /> .kotak11animasi:hover {<br /> -webkit-animation-name: pulsate;<br /> -webkit-animation-duration: 3s;<br /> -webkit-animation-timing-function: ease-in-out;<br /> }<br /> @-webkit-keyframes pulsate {<br /> 0% { width:100px; }<br /> 5% { width:150px; left:-25px; }<br /> 10% { width:100px; left:0px; }<br /> 15% { width:150px; left:-35px; }<br /> 20% { width:100px; left:0px; }<br /> 40% { width:100px; background-color:#38374A; }<br /> 45% { width:150px; left:-25px; background-color:#FFFF55; }<br /> 50% { width:100px; left:0px; background-color:#FFFF55; }<br /> 55% { width:150px; left:-25px; background-color:#FFFF55; }<br /> 60% { width:100px; left:0px; background-color:#3FFFF55; }<br /> 80% { width:100px; background-color:#45002D; }<br /> 100% { width:100px; background-color:#00C4FD; }<br /> }</blockquote> <br /> <blockquote> <div class="kotak12animasi"> Bounce effect</div> .kotak12animasi {<br /> background:#00C4FD;<br /> width: 100px;<br /> height: 100px;<br /> line-height: 50px;<br /> text-align: center;<br /> -webkit-transition: all 0.6s ease-in-out;<br /> }<br /> .kotak12animasi:hover {<br /> -webkit-animation-name: bounce;<br /> -webkit-animation-duration: 1s;<br /> -webkit-animation-iteration-count: 2;<br /> -webkit-animation-direction: alternate;<br /> }<br /> @-webkit-keyframes bounce {<br /> from {<br /> margin-left: 0px;<br /> }<br /> to {<br /> margin-left: 250px;<br /> }<br /> }</blockquote> <br /> <blockquote> <div class="kotak13animasi"> Fade effect</div> .kotak13animasi {<br /> background:#00C4FD;<br /> width: 100px;<br /> height: 100px;<br /> line-height: 50px;<br /> text-align: center;<br /> -webkit-transition: all 0.6s ease-in-out;<br /> }<br /> .kotak13animasi:hover {<br /> -webkit-animation-name: fade;<br /> -webkit-animation-duration: 3s;<br /> }<br /> @-webkit-keyframes fade {<br /> 0% {<br /> opacity: 1.0;<br /> }<br /> 50% {<br /> opacity: 0.5;<br /> }<br /> 100% {<br /> opacity: 1.0;<br /> }<br /> }</blockquote> <br /> <blockquote> <div class="kotak14animasi"> infinity Bounce effect</div> .kotak14animasi {<br /> background:#00C4FD;<br /> width: 100px;<br /> height: 100px;<br /> line-height: 50px;<br /> text-align: center;<br /> -webkit-transition: all 0.6s ease-in-out;<br /> }<br /> .kotak14animasi:hover {<br /> -webkit-animation-name: scale;<br /> -webkit-animation-duration: 0.5s;<br /> -webkit-animation-iteration-count: infinite;<br /> }<br /> @-webkit-keyframes scale {<br /> from{<br /> -webkit-transform: scale(1);<br /> }<br /> 50%{<br /> -webkit-transform: scale(0.85);<br /> animation-timing-function: ease-out;<br /> }<br /> to{<br /> -webkit-transform: scale(1);<br /> animation-timing-function: ease-out;<br /> }<br /> }</blockquote> <br /> <blockquote> <div class="kotak15animasi"> rotate</div> .kotak15animasi {<br /> background:#00C4FD;<br /> width: 100px;<br /> height: 100px;<br /> line-height: 50px;<br /> text-align: center;<br /> -webkit-transition: all 1.0s ease-in-out;<br /> }<br /> .kotak15animasi:hover {<br /> -moz-transform:rotate(360deg);<br /> -webkit-transform:rotate(360deg);<br /> }</blockquote> <br /> <blockquote> <div class="kotak16animasi"> <div> Hello</div> <div> apa kabar n_n </div> </div> .kotak16animasi {<br /> background: #e3e3e3;<br /> border: 1px dashed #666;<br /> margin: auto;<br /> width: 400px;<br /> height: 200px;<br /> cursor: pointer;<br /> position: relative;<br /> -webkit-transition: all 1s;<br /> -moz-transition: all 1s;<br /> transition: all 1s;<br /> }<br /> .kotak16animasi::after {<br /> content: '';<br /> position: absolute;<br /> width: 70%;<br /> height: 10px;<br /> bottom: 0;<br /> left: 15%;<br /> z-index: -1;<br /> -webkit-box-shadow: 0 9px 20px rgba(0,0,0,.4);<br /> -moz-box-shadow: 0 9px 20px rgba(0,0,0,.4);<br /> box-shadow: 0 9px 20px rgba(0,0,0,.4);<br /> }<br /> .kotak16animasi > div {<br /> position: absolute;<br /> width: 100%; height: 100%;<br /> top: 0; left: 0;<br /> background: #e3e3e3;<br /> -webkit-transition: all .5s ease-in-out;<br /> -moz-transition: all .5s ease-in-out;<br /> transition: all .5s ease-in-out;<br /> font: 45px/200px bold helvetica, arial, sans-serif;<br /> text-align: center;<br /> text-shadow: 0 1px 0 white;<br /> }<br /> .kotak16animasi > div:first-child {<br /> position: relative;<br /> z-index: 2;<br /> }<br /> .kotak16animasi:hover {<br /> -webkit-transform: rotateY(180deg);<br /> -moz-transform: rotateY(180deg);<br /> transform: rotateY(180deg);<br /> }<br /> .kotak16animasi:hover > div:first-child {<br /> opacity: 0;<br /> }<br /> .kotak16animasi:hover div:last-child {<br /> -webkit-transform: rotateY(180deg);<br /> -moz-transform: rotateY(180deg);<br /> transform: rotateY(180deg);<br /> }<br /> <br /> <blockquote> Khusus untuk trik ini,kode html'a seperti dibawah ini<br /> <div class="kotak16animasi"><br /> <div><br /> Hello</div><br /> <div><br /> apa kabar n_n </div><br /> </div></blockquote> </blockquote> <blockquote> <div class="kotak17animasi"> moving</div> .kotak17animasi {<br /> background:#00C4FD;<br /> width: 100px;<br /> height: 100px;<br /> line-height: 50px;<br /> text-align: center;<br /> -webkit-transition: all 1.0s ease-in-out;<br /> }<br /> .kotak17animasi:hover {<br /> -webkit-transform: translate(540px,-200px);<br /> }</blockquote> <br /> <br /> <b>Keterangan:</b><br /> <blockquote> -webkit-transition: all 0.6s ease-in-out; *waktu effect animasi*<br /> -moz-transform:translate(3em, 0pt); *moving effect/berpindah tempat/horizontal*<br /> -moz-transform:rotate(30deg); *rotate effect/berputar*<br /> -webkit-transform:translate(-3em, 1em); *moving effect/berpindah tempat/horizontal+vertikal*<br /> -webkit-transform:scale(1.3); *scale effect/mengubah ukuran*<br /> -webkit-box-shadow: 0 9px 20px rgba(0,0,0,.4); *effect shadow/bayangan*<br /> background:-moz-linear-gradient(-90deg, #00C4FD, #FFFF55) repeat scroll 0 0 transparent; *effect gradient*<br /> <br /> <br /> Webkit :Google Chrome<br /> <br /> Moz : Mozzila firefox<br /> <br /> </blockquote> <br /> <br /> <br /> <br /> <br /> Selamat mencoba,semoga bermanfaat dan jangan lupa tinggalkan komentar'a ya n_n <div style="background-color: white; border: medium none; color: black; overflow: hidden; text-align: left; text-decoration: none;"> <br />sertakan Sumbernya bila anda mau mengcopy paste artikel ini. <a href="http://djogzs.blogspot.com/#ixzz2DyAZdrMi" style="color: #003399;">30 Trik menarik CSS3</a> <a href="http://djogzs.blogspot.com/#ixzz2DyAZdrMi" style="color: #003399;">http://djogzs.blogspot.com/#ixzz2DyAZdrMi</a> <br />Under Creative Commons License: <a href="http://creativecommons.org/licenses/by/3.0" style="color: #003399;">Attribution</a></div> </div> <div style='clear: both;'></div> </div> <div class='post-footer'> <div class='post-footer-line post-footer-line-1'><span class='post-author vcard'> Diposting oleh <span class='fn'> <a href='https://www.blogger.com/profile/13970310584299542338' rel='author' title='author profile'> dedi sinaga </a> </span> </span> <span class='post-timestamp'> di <a class='timestamp-link' href='https://dedisinag4.blogspot.com/2012/12/30-trik-menarik-css3.html' rel='bookmark' title='permanent link'><abbr class='published' title='2012-12-02T22:55:00-08:00'>22.55</abbr></a> </span> <span class='post-comment-link'> </span> <span class='post-icons'> <span class='item-control blog-admin pid-363035575'> <a href='https://www.blogger.com/post-edit.g?blogID=6537061223945563011&postID=7234006273924917210&from=pencil' title='Edit Entri'> <img alt="" class="icon-action" height="18" src="//img2.blogblog.com/img/icon18_edit_allbkg.gif" width="18"> </a> </span> </span> <div class='post-share-buttons goog-inline-block'> <a class='goog-inline-block share-button sb-email' href='https://www.blogger.com/share-post.g?blogID=6537061223945563011&postID=7234006273924917210&target=email' target='_blank' title='Kirimkan Ini lewat Email'><span class='share-button-link-text'>Kirimkan Ini lewat Email</span></a><a class='goog-inline-block share-button sb-blog' href='https://www.blogger.com/share-post.g?blogID=6537061223945563011&postID=7234006273924917210&target=blog' onclick='window.open(this.href, "_blank", "height=270,width=475"); return false;' target='_blank' title='BlogThis!'><span class='share-button-link-text'>BlogThis!</span></a><a class='goog-inline-block share-button sb-twitter' href='https://www.blogger.com/share-post.g?blogID=6537061223945563011&postID=7234006273924917210&target=twitter' target='_blank' title='Bagikan ke X'><span class='share-button-link-text'>Bagikan ke X</span></a><a class='goog-inline-block share-button sb-facebook' href='https://www.blogger.com/share-post.g?blogID=6537061223945563011&postID=7234006273924917210&target=facebook' onclick='window.open(this.href, "_blank", "height=430,width=640"); return false;' target='_blank' title='Berbagi ke Facebook'><span class='share-button-link-text'>Berbagi ke Facebook</span></a> </div> </div> <div class='post-footer-line post-footer-line-2'><span class='post-labels'> Label: <a href='https://dedisinag4.blogspot.com/search/label/HTML' rel='tag'>HTML</a> </span> </div> <div class='post-footer-line post-footer-line-3'><span class='post-location'> </span> </div> </div> </div> <div class='comments' id='comments'> <a name='comments'></a> <h4> 0 komentar: </h4> <div id='Blog1_comments-block-wrapper'> <dl class='avatar-comment-indent' id='comments-block'> </dl> </div> <p class='comment-footer'> <div class='comment-form'> <a name='comment-form'></a> <h4 id='comment-post-message'>Posting Komentar</h4> <p> </p> <a href='https://www.blogger.com/comment/frame/6537061223945563011?po=7234006273924917210&hl=id&saa=85391&origin=https://dedisinag4.blogspot.com' id='comment-editor-src'></a> <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'></iframe>  <script src='https://www.blogger.com/static/v1/jsbin/2830521187-comment_from_post_iframe.js' type='text/javascript'></script> <script type='text/javascript'> BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html', '0'); </script> </div> </p> <div id='backlinks-container'> <div id='Blog1_backlinks-container'> </div> </div> </div> </div> </div></div>  </div> <div class='blog-pager' id='blog-pager'> <span id='blog-pager-newer-link'> <a class='blog-pager-newer-link' href='https://dedisinag4.blogspot.com/2012/12/cara-menggunakan-google-font-di-blogger.html' id='Blog1_blog-pager-newer-link' title='Posting Lebih Baru'>Posting Lebih Baru</a> </span> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' href='https://dedisinag4.blogspot.com/2012/12/trik-merubah-tampilan-homepage-dan.html' id='Blog1_blog-pager-older-link' title='Posting Lama'>Posting Lama</a> </span> <a class='home-link' href='https://dedisinag4.blogspot.com/'>Beranda</a> </div> <div class='clear'></div> <div class='post-feeds'> <div class='feed-links'> Langganan: <a class='feed-link' href='https://dedisinag4.blogspot.com/feeds/7234006273924917210/comments/default' target='_blank' type='application/atom+xml'>Posting Komentar (Atom)</a> </div> </div> </div><div class='widget HTML' data-version='1' id='HTML14'> <h2 class='title'>Headline News</h2> <div class='widget-content'> <center> <a href="http://Heric-ajha.blogspot.com/" target="_blank"><img src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_t-vB-mgPEYXLXQYeQQr1tEHxoYRdit3hW6HnMdCMuF_BB6Ym1yke5lp5T5UAR8n6YXwitvG-5rZL6LEfDTsdXNq9lKNE_OpMyIsqHn0eC0VP-mRsVNPbOltqyYvENkyNdAukuFzg=s0-d" alt="" border="0" width="468" height="60" title="Heric-Ajha"></a></center> </div> <div class='clear'></div> </div><div class='widget Stats' data-version='1' id='Stats1'> <h2>Jumlah Pengunjung</h2> <div class='widget-content'> <div id='Stats1_content' style='display: none;'> <span class='counter-wrapper graph-counter-wrapper' id='Stats1_totalCount'> </span> <div class='clear'></div> </div> </div> </div><div class='widget Attribution' data-version='1' id='Attribution1'> <div class='widget-content' style='text-align: center;'> Diberdayakan oleh <a href='https://www.blogger.com' target='_blank'>Blogger</a>. </div> <div class='clear'></div> </div><div class='widget HTML' data-version='1' id='HTML102'> <h2 class='title'>Radio Prambors</h2> <div class='widget-content'> </div> <div class='clear'></div> </div><div class='widget Followers' data-version='1' id='Followers1'> <h2 class='title'>Followers</h2> <div class='widget-content'> <div id='Followers1-wrapper'> <div style='margin-right:2px;'> <div><script type="text/javascript" src="https://apis.google.com/js/platform.js"></script> <div id="followers-iframe-container"></div> <script type="text/javascript"> window.followersIframe = null; function followersIframeOpen(url) { gapi.load("gapi.iframes", function() { if (gapi.iframes && gapi.iframes.getContext) { window.followersIframe = gapi.iframes.getContext().openChild({ url: url, where: document.getElementById("followers-iframe-container"), messageHandlersFilter: gapi.iframes.CROSS_ORIGIN_IFRAMES_FILTER, messageHandlers: { '_ready': function(obj) { window.followersIframe.getIframeEl().height = obj.height; }, 'reset': function() { window.followersIframe.close(); followersIframeOpen("https://www.blogger.com/followers/frame/6537061223945563011?colors\x3dCgt0cmFuc3BhcmVudBILdHJhbnNwYXJlbnQaByMwMDAwMDAiByMwMDAwMDAqByNGRkZGRkYyByMwMDAwMDA6ByMwMDAwMDBCByMwMDAwMDBKByMwMDAwMDBSByNGRkZGRkZaC3RyYW5zcGFyZW50\x26pageSize\x3d21\x26hl\x3did\x26origin\x3dhttps://dedisinag4.blogspot.com"); }, 'open': function(url) { window.followersIframe.close(); followersIframeOpen(url); } } }); } }); } followersIframeOpen("https://www.blogger.com/followers/frame/6537061223945563011?colors\x3dCgt0cmFuc3BhcmVudBILdHJhbnNwYXJlbnQaByMwMDAwMDAiByMwMDAwMDAqByNGRkZGRkYyByMwMDAwMDA6ByMwMDAwMDBCByMwMDAwMDBKByMwMDAwMDBSByNGRkZGRkZaC3RyYW5zcGFyZW50\x26pageSize\x3d21\x26hl\x3did\x26origin\x3dhttps://dedisinag4.blogspot.com"); </script></div> </div> </div> <div class='clear'></div> </div> </div><div class='widget HTML' data-version='1' id='HTML5'> <div class='widget-content'> <script type='text/javascript'> //Edit tema dibawah ini, isi Dark untuk background bertema gelap, dan Light untuk background berwarna terang. var DADrightclicktheme = 'Dark'; var DADrightclickimage = 'http://i1285.photobucket.com/albums/a598/Dedi_Sinaga/cats.jpg'; </script> <script type="text/javascript" src="//dickeymaru.googlecode.com/files/dmantirightclickv2.js"> </script> </div> <div class='clear'></div> </div><div class='widget HTML' data-version='1' id='HTML8'> <h2 class='title'>Alexa Stats</h2> <div class='widget-content'> <a href="http://www.alexa.com/siteinfo/http://dedi-sinag4.blogspot.com/"><script type="text/javascript" src="//xslt.alexa.com/site_stats/js/s/a?url=http://dedi-sinag4.blogspot.com/"></script></a> </div> <div class='clear'></div> </div><div class='widget HTML' data-version='1' id='HTML17'> <h2 class='title'>Fans Page</h2> <div class='widget-content'> </div> <div class='clear'></div> </div><div class='widget HTML' data-version='1' id='HTML16'> <h2 class='title'>Page Rank</h2> <div class='widget-content'> <a href="http://www.cheatermaninjau.net/" target="_blank" title=""><img alt="" border="0" height="31" src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tb0AwZzfOyniU11pCMruwbX_8Z49lG0jf8vBeIRmFp_HGlBLlZ_jtyHeUNdUwegRuOnKiILWu9d5NmGS0Zhw=s0-d" width="88"></a> </div> <div class='clear'></div> </div><div class='widget HTML' data-version='1' id='HTML101'> <h2 class='title'>Link My Friend</h2> <div class='widget-content'> </div> <div class='clear'></div> </div></div> </div> </div> <div class='column-left-outer'> <div class='column-left-inner'> <aside> </aside> </div> </div> <div class='column-right-outer'> <div class='column-right-inner'> <aside> </aside> </div> </div> </div> <div style='clear: both'></div> </div> </div> </div> <div class='main-cap-bottom cap-bottom'> <div class='cap-left'></div> <div class='cap-right'></div> </div> </div> <footer> <div class='footer-outer'> <div class='footer-cap-top cap-top'> <div class='cap-left'></div> <div class='cap-right'></div> </div> <div class='fauxborder-left footer-fauxborder-left'> <div class='fauxborder-right footer-fauxborder-right'></div> <div class='region-inner footer-inner'> <div class='foot section' id='footer-1'> <div class='widget Label' data-version='1' id='Label1'> <h2>Categories</h2> <div class='widget-content list-label-widget-content'> <ul> <li> <a dir='ltr' href='https://dedisinag4.blogspot.com/search/label/Antivirus' title='View all posts filed under Antivirus'>Antivirus</a> <span dir='ltr'>(4)</span> </li> <li> <a dir='ltr' href='https://dedisinag4.blogspot.com/search/label/Blogger' title='View all posts filed under Blogger'>Blogger</a> <span dir='ltr'>(14)</span> </li> <li> <a dir='ltr' href='https://dedisinag4.blogspot.com/search/label/CHEAT%20GAMES' title='View all posts filed under CHEAT GAMES'>CHEAT GAMES</a> <span dir='ltr'>(4)</span> </li> <li> <a dir='ltr' href='https://dedisinag4.blogspot.com/search/label/Cheater' title='View all posts filed under Cheater'>Cheater</a> <span dir='ltr'>(11)</span> </li> <li> <a dir='ltr' href='https://dedisinag4.blogspot.com/search/label/Code%20Warna' title='View all posts filed under Code Warna'>Code Warna</a> <span dir='ltr'>(1)</span> </li> <li> <a dir='ltr' href='https://dedisinag4.blogspot.com/search/label/CSS' title='View all posts filed under CSS'>CSS</a> <span dir='ltr'>(1)</span> </li> <li> <a dir='ltr' href='https://dedisinag4.blogspot.com/search/label/Editing' title='View all posts filed under Editing'>Editing</a> <span dir='ltr'>(10)</span> </li> <li> <a dir='ltr' href='https://dedisinag4.blogspot.com/search/label/Games' title='View all posts filed under Games'>Games</a> <span dir='ltr'>(1)</span> </li> <li> <a dir='ltr' href='https://dedisinag4.blogspot.com/search/label/Games%20PC' title='View all posts filed under Games PC'>Games PC</a> <span dir='ltr'>(5)</span> </li> <li> <a dir='ltr' href='https://dedisinag4.blogspot.com/search/label/Guestbook' title='View all posts filed under Guestbook'>Guestbook</a> <span dir='ltr'>(1)</span> </li> <li> <a dir='ltr' href='https://dedisinag4.blogspot.com/search/label/Hacker' title='View all posts filed under Hacker'>Hacker</a> <span dir='ltr'>(17)</span> </li> <li> <a dir='ltr' href='https://dedisinag4.blogspot.com/search/label/HTML' title='View all posts filed under HTML'>HTML</a> <span dir='ltr'>(7)</span> </li> <li> <a dir='ltr' href='https://dedisinag4.blogspot.com/search/label/Informasi' title='View all posts filed under Informasi'>Informasi</a> <span dir='ltr'>(1)</span> </li> <li> <a dir='ltr' href='https://dedisinag4.blogspot.com/search/label/Jquery' title='View all posts filed under Jquery'>Jquery</a> <span dir='ltr'>(9)</span> </li> <li> <a dir='ltr' href='https://dedisinag4.blogspot.com/search/label/Link%20Exchange' title='View all posts filed under Link Exchange'>Link Exchange</a> <span dir='ltr'>(2)</span> </li> <li> <a dir='ltr' href='https://dedisinag4.blogspot.com/search/label/Photoshop' title='View all posts filed under Photoshop'>Photoshop</a> <span dir='ltr'>(1)</span> </li> <li> <a dir='ltr' href='https://dedisinag4.blogspot.com/search/label/Sitemap' title='View all posts filed under Sitemap'>Sitemap</a> <span dir='ltr'>(2)</span> </li> <li> <a dir='ltr' href='https://dedisinag4.blogspot.com/search/label/Software' title='View all posts filed under Software'>Software</a> <span dir='ltr'>(11)</span> </li> <li> <a dir='ltr' href='https://dedisinag4.blogspot.com/search/label/Template' title='View all posts filed under Template'>Template</a> <span dir='ltr'>(62)</span> </li> <li> <a dir='ltr' href='https://dedisinag4.blogspot.com/search/label/Template%20Anime' title='View all posts filed under Template Anime'>Template Anime</a> <span dir='ltr'>(13)</span> </li> <li> <a dir='ltr' href='https://dedisinag4.blogspot.com/search/label/Tips%20And%20Trick' title='View all posts filed under Tips And Trick'>Tips And Trick</a> <span dir='ltr'>(44)</span> </li> <li> <a dir='ltr' href='https://dedisinag4.blogspot.com/search/label/Tips%20SEO' title='View all posts filed under Tips SEO'>Tips SEO</a> <span dir='ltr'>(2)</span> </li> <li> <a dir='ltr' href='https://dedisinag4.blogspot.com/search/label/TV%20ONLINE' title='View all posts filed under TV ONLINE'>TV ONLINE</a> <span dir='ltr'>(1)</span> </li> <li> <a dir='ltr' href='https://dedisinag4.blogspot.com/search/label/Video%20You%20tube' title='View all posts filed under Video You tube'>Video You tube</a> <span dir='ltr'>(1)</span> </li> </ul> <div class='clear'></div> </div> </div><div class='widget HTML' data-version='1' id='HTML2'> <h2 class='title'>Blogroll</h2> <div class='widget-content'> <script src="//kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-biru.js" type="text/javascript"></script> </div> <div class='clear'></div> </div><div class='widget BlogArchive' data-version='1' id='BlogArchive1'> <h2>Archives</h2> <div class='widget-content'> <div id='ArchiveList'> <div id='BlogArchive1_ArchiveList'> <ul class='hierarchy'> <li class='archivedate expanded'> <a class='toggle' href='javascript:void(0)'> <span class='zippy toggle-open'> ▼  </span> </a> <a class='post-count-link' href='https://dedisinag4.blogspot.com/2012/' title='2012'>2012</a> <span class='post-count' dir='ltr'>(234)</span> <ul class='hierarchy'> <li class='archivedate expanded'> <a class='toggle' href='javascript:void(0)'> <span class='zippy toggle-open'> ▼  </span> </a> <a class='post-count-link' href='https://dedisinag4.blogspot.com/2012/12/' title='Desember'>Desember</a> <span class='post-count' dir='ltr'>(83)</span> <ul class='posts'> <li><a href='https://dedisinag4.blogspot.com/2012/12/skin-windows-xp-naruto.html' title='Skin Windows XP Naruto'>Skin Windows XP Naruto</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/template-blue-obito-versi-2.html' title='Template Blue Obito Versi 2'>Template Blue Obito Versi 2</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/sitemap.html' title='Sitemap'>Sitemap</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/kumpulan-template-naruto.html' title='Kumpulan Template Naruto'>Kumpulan Template Naruto</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/rvmalice-dark-edition-template.html' title='RVMALICE Dark Edition Template'>RVMALICE Dark Edition Template</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/5th-hatsune-miku-odds-ends.html' title='5th Hatsune Miku -ODDS & ENDS'>5th Hatsune Miku -ODDS & ENDS</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/berusaiyu-blogger-template.html' title='Berusaiyu Blogger Template'>Berusaiyu Blogger Template</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/rv-green-template.html' title='RV Green Template'>RV Green Template</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/rv-simple-choco-template.html' title='RV Simple Choco Template'>RV Simple Choco Template</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/rvgreen-tempate-v2.html' title='RVgreen Tempate V2'>RVgreen Tempate V2</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/elegant-color-template-blog.html' title='Elegant Color Template Blog'>Elegant Color Template Blog</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/cbox.html' title='Guestbook'>Guestbook</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/unique-black-tranparent-template.html' title='Unique Black Tranparent Template'>Unique Black Tranparent Template</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/download-red-and-purple-ne-gen-blog.html' title='Download Red And Purple NE-Gen Blog Template'>Download Red And Purple NE-Gen Blog Template</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/about-template-ne-gen-blog-update.html' title='About Template NE-Gen Blog (Update)'>About Template NE-Gen Blog (Update)</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/deep-sky-blue-template.html' title='Deep Sky Blue Template'>Deep Sky Blue Template</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/orange-template-transparent.html' title='Orange Template Transparent'>Orange Template Transparent</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/new-template-blue-and-black-simple.html' title='New Template - Blue And Black Simple'>New Template - Blue And Black Simple</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/template-elegant-blue-seo-v3.html' title='Template Elegant Blue Seo V3'>Template Elegant Blue Seo V3</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/template-brs-ala-andi-novian.html' title='Template BRS Ala Andi Novian'>Template BRS Ala Andi Novian</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/cara-instal-windows-7-menggunakan.html' title='Cara Instal Windows 7 Menggunakan FlashDisk'>Cara Instal Windows 7 Menggunakan FlashDisk</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/cara-menginstal-windows-7.html' title='Cara Menginstal Windows 7'>Cara Menginstal Windows 7</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/atm-exp-ninja-saga-desember-2012.html' title='ATM Exp Ninja Saga Desember 2012'>ATM Exp Ninja Saga Desember 2012</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/disclaimer.html' title='Disclaimer'>Disclaimer</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/cara-membuat-posting-blog-menjadi.html' title='Cara Membuat Posting Blog Menjadi Thumbnail'>Cara Membuat Posting Blog Menjadi Thumbnail</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/template-naruto-v1.html' title='Template Naruto V.1'>Template Naruto V.1</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/kumpulan-cursor-keren-untuk-blog.html' title='kumpulan cursor keren untuk blog'>kumpulan cursor keren untuk blog</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/template-mask-shooter-v2-by-kuntoro.html' title='Template Mask Shooter V2 By Kuntoro Cyber'>Template Mask Shooter V2 By Kuntoro Cyber</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/back-to-top-dengan-sentuhan-jquery.html' title='Back to top dengan sentuhan jquery'>Back to top dengan sentuhan jquery</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/effect-asap-dengan-jquery.html' title='Effect Asap dengan jquery'>Effect Asap dengan jquery</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/memasang-accordion-dengan-jquery-dan-css.html' title='Memasang Accordion Dengan Jquery dan Css'>Memasang Accordion Dengan Jquery dan Css</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/membuat-menu-melayang-dengan-sentuhan.html' title='Membuat menu melayang dengan sentuhan Jquery dan C...'>Membuat menu melayang dengan sentuhan Jquery dan C...</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/membuat-menu-bubbles-dengan-jquery-dan.html' title='Membuat Menu Bubbles Dengan Jquery Dan CSS3'>Membuat Menu Bubbles Dengan Jquery Dan CSS3</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/animated-text-dan-icon-menu-dengan.html' title='Animated Text dan Icon Menu Dengan jQuery'>Animated Text dan Icon Menu Dengan jQuery</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/animasi-dengan-jquery-firefly-plugin.html' title='Animasi Dengan Jquery Firefly Plugin'>Animasi Dengan Jquery Firefly Plugin</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/content-accordion-dengan-jquery.html' title='Content Accordion dengan jquery'>Content Accordion dengan jquery</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/splash-effects-dengan-css3-dan-curtain.html' title='Splash Effects dengan CSS3 dan Curtain opening den...'>Splash Effects dengan CSS3 dan Curtain opening den...</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/5-kode-html-untuk-mengatur-tampilan-blog.html' title='5 kode HTML untuk Mengatur tampilan blog'>5 kode HTML untuk Mengatur tampilan blog</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/cara-menggunakan-google-font-di-blogger.html' title='Cara menggunakan Google font di blogger'>Cara menggunakan Google font di blogger</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/30-trik-menarik-css3.html' title='30 Trik menarik CSS3'>30 Trik menarik CSS3</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/trik-merubah-tampilan-homepage-dan.html' title='Trik merubah tampilan homepage dan halaman posting'>Trik merubah tampilan homepage dan halaman posting</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/simple-navbar-dengan-efek-blur.html' title='Simple Navbar dengan Efek Blur'>Simple Navbar dengan Efek Blur</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/trik-memasang-avatar-penulis-blog.html' title='Trik Memasang Avatar penulis blog'>Trik Memasang Avatar penulis blog</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/banner-slider-dengan-css3.html' title='Banner Slider dengan CSS3'>Banner Slider dengan CSS3</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/black-rock-shooter-blogger-templates.html' title='Black Rock Shooter Blogger Templates'>Black Rock Shooter Blogger Templates</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/another-blogger-templates.html' title='Another Blogger Templates'>Another Blogger Templates</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/guilty-crown-blogger-template.html' title='Guilty Crown Blogger template'>Guilty Crown Blogger template</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/hatsune-miku-blogger-templates.html' title='Hatsune Miku Blogger Templates'>Hatsune Miku Blogger Templates</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/red-minimalist-blogger-templates.html' title='Red Minimalist Blogger Templates'>Red Minimalist Blogger Templates</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/accel-world-blogger-templates.html' title='Accel World Blogger Templates'>Accel World Blogger Templates</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/naruto-vs-sasuke-v2-blogger-template.html' title='Naruto VS Sasuke V2 Blogger Template'>Naruto VS Sasuke V2 Blogger Template</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/sankarea-blogger-template.html' title='Sankarea blogger Template'>Sankarea blogger Template</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/hatsune-miku-magazine-style.html' title='Hatsune Miku magazine style'>Hatsune Miku magazine style</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/eucliwood-hellscythe-blogger-templates.html' title='Eucliwood Hellscythe Blogger Templates'>Eucliwood Hellscythe Blogger Templates</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/haiyore-nyaruko-san-blogger-template.html' title='Haiyore! Nyaruko-san Blogger template'>Haiyore! Nyaruko-san Blogger template</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/sora-no-otoshimono-blogger-template.html' title='Sora no otoshimono Blogger template'>Sora no otoshimono Blogger template</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/shinobu-oshino-blogger-template.html' title='Shinobu Oshino Blogger template'>Shinobu Oshino Blogger template</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/green-minimalist-blogger-templates.html' title='Green Minimalist Blogger Templates'>Green Minimalist Blogger Templates</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/fairy-tail-blogger-template.html' title='Fairy Tail Blogger Template'>Fairy Tail Blogger Template</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/blue-minimalist-blogger-template.html' title='Blue Minimalist blogger template'>Blue Minimalist blogger template</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/hyouka-blogger-templates.html' title='Hyouka blogger templates'>Hyouka blogger templates</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/mirai-suenaga-blogger-template.html' title='Mirai Suenaga Blogger Template'>Mirai Suenaga Blogger Template</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/sword-art-online-blogger-template.html' title='Sword Art Online Blogger Template'>Sword Art Online Blogger Template</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/rikka-takanashi-blogger-templates.html' title='Rikka Takanashi Blogger Templates'>Rikka Takanashi Blogger Templates</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/banner.html' title='banner'>banner</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/cara-membuat-efek-sensor.html' title='Cara Membuat Efek Sensor'>Cara Membuat Efek Sensor</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/membuat-pinggiran-foto-jadi-tumpul.html' title='Membuat Pinggiran Foto jadi Tumpul'>Membuat Pinggiran Foto jadi Tumpul</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/tulisan-transparant.html' title='Tulisan Transparant'>Tulisan Transparant</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/efek-2-warna-pada-font.html' title='Efek 2 Warna Pada Font'>Efek 2 Warna Pada Font</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/membuat-swirl-yang-keren-chain-version.html' title='Membuat Swirl Yang Keren (Chain Version)'>Membuat Swirl Yang Keren (Chain Version)</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/efek-hujan.html' title='Efek Hujan'>Efek Hujan</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/efek-box.html' title='Efek Box'>Efek Box</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/buat-animasi-sederhana.html' title='Buat Animasi Sederhana'>Buat Animasi Sederhana</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/cara-membuat-animasi-text.html' title='Cara Membuat Animasi Text'>Cara Membuat Animasi Text</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/cara-membuat-banner.html' title='Cara Membuat Banner'>Cara Membuat Banner</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/download-naruto-anime-lover-template.html' title='Download Naruto Anime Lover Template'>Download Naruto Anime Lover Template</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/css-uchiha-itachi-template.html' title='CSS Uchiha Itachi Template'>CSS Uchiha Itachi Template</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/template-transparent-design-by-rizkyw.html' title='Template Transparent Design by Rizky.W'>Template Transparent Design by Rizky.W</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/template-orange-design-djohanes-dj.html' title='Template Orange design Djohanes DJ'>Template Orange design Djohanes DJ</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/dark-shaded-blogger-template.html' title='Dark Shaded Blogger Template'>Dark Shaded Blogger Template</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/sporty-magazine-template-v3.html' title='Sporty Magazine Template v.3'>Sporty Magazine Template v.3</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/master-download-photoshop.html' title='Master Download Photoshop CS,CS2,CS3,CS4,CS5 Portable'>Master Download Photoshop CS,CS2,CS3,CS4,CS5 Portable</a></li> <li><a href='https://dedisinag4.blogspot.com/2012/12/blue-simple-template.html' title='Blue Simple Template.'>Blue Simple Template.</a></li> </ul> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <a class='toggle' href='javascript:void(0)'> <span class='zippy'> ►  </span> </a> <a class='post-count-link' href='https://dedisinag4.blogspot.com/2012/11/' title='November'>November</a> <span class='post-count' dir='ltr'>(151)</span> </li> </ul> </li> </ul> </div> </div> <div class='clear'></div> </div> </div><div class='widget HTML' data-version='1' id='HTML1'> <h2 class='title'>About</h2> <div class='widget-content'> <a href="http://dedi-sinaga.blogspot.com/" title="dedi-sinaga Blog" target="_blank"><img src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_v6itpHeJN9Nh-mUIk6Wthky-adscs3brGv33NHinN_cLNfP6vT3L2VO6t7RwxrtUdWel_Rq56v0Hlafo80tMs79RUvARgA8IhMByRC-GLrb5DN-HsFeZ81Ufy1QaxSPzREwCFL0Q6qpLk=s0-d"></a> <center> <a href="http://Heric-ajha.blogspot.com/" target="_blank"><img src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_t-vB-mgPEYXLXQYeQQr1tEHxoYRdit3hW6HnMdCMuF_BB6Ym1yke5lp5T5UAR8n6YXwitvG-5rZL6LEfDTsdXNq9lKNE_OpMyIsqHn0eC0VP-mRsVNPbOltqyYvENkyNdAukuFzg=s0-d" alt="" border="0" width="468" height="60" title="Heric-Ajha"></a></center> <a href='http://erikofujiwara.blogspot.com/' title='Share The Best Information, Games , Template , Software , Cheat , Tips Dan Trick Dan Lain Lain'><img alt="PeterJepiMars" src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uW29bc9vtb3-KwzYkOqELGYltFlfPi9F0cUG_0IeUijYyy-sEpPephcuCouw63Qc0gKD7YcufIpC0bsIDaoOnqAvPk1WURVgANCX2fxaIQQpeRJ4lVXdEoNbxzhEt3=s0-d" style="border:0px;width:468px;height:60px;margin:0px auto;overflow:hidden;"></a> </div> <div class='clear'></div> </div><div class='widget HTML' data-version='1' id='HTML4'> <h2 class='title'>Blogger templates</h2> <div class='widget-content'> <a href="http://www.dmca.com/" title="DMCA"> <img src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sYjrmZ43SMMSi9s8lEKghVRfNhoCT_EaJSM-XHEHQdRKFsmv-dKr9j8pPNl_Ze_G1JZ-MuNQWG89TbvKmJCk7X5qpq5eaDPzlm7DzhHJACwXST2XRD0wOzYYpS=s0-d" alt="DMCA.com"></a>  <a href="http://www.counters4u.com" target="_blank"><img src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tu8BAmvfGySX91XoF6pfbQM-H8z_Q6pLPUrCClm4IpNzHHyfVwKsxj8NBKXLn4r01y8I0CFgPNSkdePjGfWXSH7Gw8HoqFRipeyqlY8vZ4TTEYwHoiNUqdx6frN2AfoA9f34nqO9lvEIg29feXpsQo0pHB4fAXVZ7ppNVTvJqE6NPbarb5_K92muNziRKXtuBcjy4pLFwmv70tWTl1hJ--=s0-d" title="free BackLink by Counters 4 U" border="0"> <noscript><a href="http://www.counters4u.com" alt="free backlinks creator for your blog or site ">free backlinks creator for your blog or site</a><a href="http://searchengineinfo.net/" alt="search engine info">search engine info</a></noscript></a>  <a href="http://info.flagcounter.com/Y1l2"><img src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_u-i8H95fV2T1sZXc4FuR-vUOHTskLu9gIsWsgwcZ3KdbUk0sgdz27vrZuHT9WkwEFX2IbDZIhwj75376bnWt84IQJwb9UGQc7d1OfCTfU3k8RCbdlQw31cicje_4LqryvDAq1cMNvfc54n_tYogSY2Lp7hZtOQxjYQ08xduwydiSLqcim-sHqIzlHHRfNaUeiVVQEydIS6DXRiGLYxQTG9HgMIlasE9s2HCQ=s0-d" alt="Flag Counter" border="0"></a> </div> <div class='clear'></div> </div><div class='widget HTML' data-version='1' id='HTML3'> <h2 class='title'>Blogger news</h2> <div class='widget-content'> <a href="//goo.gl/lRn2y" onmouseover="window.location=this.href"><img src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tP62EOyARldLzkGntXY_7H4IWmfGOOI0R68CPRl51G04P5V4J8OyZF5RdhNES1B-PXUM0tKzazLgXvXsVDdkY=s0-d" height="31" width="88" title="ßéšť Čħëàťēř"></a> <a href="http://cyber-creavity.blogspot.com/"><img src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_t4VAo0u9SuVDM6knODHNrsypsvmqi4yY_w4xGPTqQo0ud1jDAjd_oiK6_p9nLDp9czdkoS682Do9dY3uyRyVuiBptMgH43AD4upa0JU-7caY4nxlDZjlSjEyZMq215ZUS69brI=s0-d" width="88" height="31" alt="Cyber-Unity"></a> <a href="http://dark-48.blogspot.com/" onmouseover="window.location=this.href"><img src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_s6B4hxpfdv_OAQIxXbsnDOkkd4fToz1D1U8zHwcOE7M2Hs69T8_Nn9jsEh2iPb_vlkg_LY4IYmHeUTH4SqHIRnzWRBSsjN1EdDs_b2Hab7zQMCn3ODuG3kcsQYsypYy7K5mp0=s0-d" height="31" width="88" title="Dark Magic 48 | Share Trick N Tips"></a> <a href="http://zone-uchiha.blogspot.com/" onmouseover="window.location=this.href" title='Click here to visit ™ Uchiha Community ™' alt='http://zone-uchiha.blogspot.com | ™ Uchiha Community ™ | The Clan Uchiha | ZUClanS | Uchiha Melvin'><img src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tOhslUcvRqypC7x5gAV_wer9uPy8IBKdW-8f4QYpSUTHmdQoFUSk7Vb8TtuPGzHcKgRdCN0kot3GDOSlEOabMMQfpZrAMRWcjn_FfhbFQcvwPJYTpBqDIjTZ0sVdwzROnGcjQFeh5BRBNseco=s0-d" title="Click here to visit ™ Uchiha Community ™" alt="http://zone-uchiha.blogspot.com | ™ Uchiha Community ™ | The Clan Uchiha | ZUClanS | Uchiha Melvin"></a> <a href="http://itcxgresida.blogspot.com/" onmouseover="window.location=this.href"><img src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tJ71llrxvipB0SFT77CK81qNclVX_dDZXgI-IxinCnGUS1_K5QD6dZxa_E1Va_L1Pm5-TSfm5Rqn26FVfby5hfJeSeLQ=s0-d" height="31" width="88" title="ITCxGresida | Creative Destruction"></a> <a href="http://www.aregalank.blogspot.com/" target="_blank"><img alt="" border="0" height="31" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxRDRkRLAQNBNgOt7J5MUGrMvT5dZf9YATUdnKPIWU8A9gQLQ3jaASJqhAWAyVYPksyyVBPcJe9ertjUv-Ong0jIk2ZPaZ-SJRgsH9VlH-9bOBStMXKNwhxvtXxioK816CwsgBztC418PW/s91/Banner+av.gif" title="AreGalank Comunity" width="88" /></a> <script src="//goo.gl/sbqMM"></script> <a href="http://vierination.blogspot.com/" target="new"><img src="//3.bp.blogspot.com/-bdiqJ0It0DE/UJ3BX-OsGcI/AAAAAAAABp4/iQdBv5GD-ys/s1600/banner+88x31.png" alt="vierination - Share All Knowledge" border="0"></a> </div> <div class='clear'></div> </div><div class='widget Profile' data-version='1' id='Profile1'> <h2>Mengenai Saya</h2> <div class='widget-content'> <dl class='profile-datablock'> <dt class='profile-data'> <a class='profile-name-link g-profile' href='https://www.blogger.com/profile/13970310584299542338' rel='author' style='background-image: url(//www.blogger.com/img/logo-16.png);'> dedi sinaga </a> </dt> </dl> <a class='profile-link' href='https://www.blogger.com/profile/13970310584299542338' rel='author'>Lihat profil lengkapku</a> <div class='clear'></div> </div> </div></div> <table border='0' cellpadding='0' cellspacing='0' class='section-columns columns-2'> <tbody> <tr> <td class='first columns-cell'> <div class='foot no-items section' id='footer-2-1'></div> </td> <td class='columns-cell'> <div class='foot no-items section' id='footer-2-2'></div> </td> <td class='columns-cell'> <div class='foot no-items section' id='footer-2-4'></div> </td> </tr> </tbody> </table> <div class='foot no-items section' id='footer-0'></div> </div> </div> <div class='footer-cap-bottom cap-bottom'> </div> </div> </footer> </div> </div> <div class='content-cap-bottom cap-bottom'> </div> </div> </div> <script type='text/javascript'> window.setTimeout(function() { document.body.className = document.body.className.replace('loading', ''); }, 10); </script> <script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/344097953-widgets.js"></script> <script type='text/javascript'> window['__wavt'] = 'AAVkm1tiWlnRyJHaiw8DJq_hdBz-:1777418064054';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d6537061223945563011','//dedisinag4.blogspot.com/2012/12/30-trik-menarik-css3.html','6537061223945563011'); _WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '6537061223945563011', 'title': '\u2122DeDi\u2122SiNaGa\u2122', 'url': 'https://dedisinag4.blogspot.com/2012/12/30-trik-menarik-css3.html', 'canonicalUrl': 'http://dedisinag4.blogspot.com/2012/12/30-trik-menarik-css3.html', 'homepageUrl': 'https://dedisinag4.blogspot.com/', 'searchUrl': 'https://dedisinag4.blogspot.com/search', 'canonicalHomepageUrl': 'http://dedisinag4.blogspot.com/', 'blogspotFaviconUrl': 'https://dedisinag4.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'id', 'localeUnderscoreDelimited': 'id', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22\u2122DeDi\u2122SiNaGa\u2122 - Atom\x22 href\x3d\x22https://dedisinag4.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22\u2122DeDi\u2122SiNaGa\u2122 - RSS\x22 href\x3d\x22https://dedisinag4.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22\u2122DeDi\u2122SiNaGa\u2122 - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/6537061223945563011/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22\u2122DeDi\u2122SiNaGa\u2122 - Atom\x22 href\x3d\x22https://dedisinag4.blogspot.com/feeds/7234006273924917210/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/1d38d69c812f94fa', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Dapatkan link', 'key': 'link', 'shareMessage': 'Dapatkan link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Bagikan ke Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Bagikan ke X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Bagikan ke Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27id\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Baca selengkapnya', 'pageType': 'item', 'postId': '7234006273924917210', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQFykyrft0fChrRBwxZ1sl7DNgndpobYNRel8jZXPYH8oejHKpecIOsYAfsnADxBCnKyBGyAhZZoBUDeMBavIXw0-Cz-9w42QV_-G-v3hegXclcJQICVNqDB1IwVtIPYDJEtQegpFQY2I/s72-c/Untitled-1.jpg', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQFykyrft0fChrRBwxZ1sl7DNgndpobYNRel8jZXPYH8oejHKpecIOsYAfsnADxBCnKyBGyAhZZoBUDeMBavIXw0-Cz-9w42QV_-G-v3hegXclcJQICVNqDB1IwVtIPYDJEtQegpFQY2I/s1600/Untitled-1.jpg', 'pageName': '30 Trik menarik CSS3', 'pageTitle': '\u2122DeDi\u2122SiNaGa\u2122: 30 Trik menarik CSS3'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Tautan disalin ke papan klip!', 'ok': 'Oke', 'postLink': 'Tautan Pos'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Khusus', 'isResponsive': false, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': '30 Trik menarik CSS3', 'description': ' ini dia kehebatan CSS3,effect\x27a yang keren dan mirip dengan effect jquery dan flash.menggunakan css3 tidak akan memberatkan blog sobat t...', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQFykyrft0fChrRBwxZ1sl7DNgndpobYNRel8jZXPYH8oejHKpecIOsYAfsnADxBCnKyBGyAhZZoBUDeMBavIXw0-Cz-9w42QV_-G-v3hegXclcJQICVNqDB1IwVtIPYDJEtQegpFQY2I/s1600/Untitled-1.jpg', 'url': 'https://dedisinag4.blogspot.com/2012/12/30-trik-menarik-css3.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 7234006273924917210}}]); _WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_TextView', new _WidgetInfo('Text1', 'crosscol', document.getElementById('Text1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/1827932055-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/828616780-lightbox_bundle.css'}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML14', 'main', document.getElementById('HTML14'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_StatsView', new _WidgetInfo('Stats1', 'main', document.getElementById('Stats1'), {'title': 'Jumlah Pengunjung', 'showGraphicalCounter': true, 'showAnimatedCounter': true, 'showSparkline': false, 'statsUrl': '//dedisinag4.blogspot.com/b/stats?style\x3dBLACK_TRANSPARENT\x26timeRange\x3dALL_TIME\x26token\x3dAAfhxX3DH4qjr5HAnF25pTVa58MNExoVRzmxuwtWzwzZjPufR0cLrbMQS2qsCTqEpzlCTJnbt1sg46DcHYQ4Zy0'}, 'displayModeFull')); _WidgetManager._RegisterWidget('_AttributionView', new _WidgetInfo('Attribution1', 'main', document.getElementById('Attribution1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML102', 'main', document.getElementById('HTML102'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_FollowersView', new _WidgetInfo('Followers1', 'main', document.getElementById('Followers1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML5', 'main', document.getElementById('HTML5'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML8', 'main', document.getElementById('HTML8'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML17', 'main', document.getElementById('HTML17'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML16', 'main', document.getElementById('HTML16'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML101', 'main', document.getElementById('HTML101'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label1', 'footer-1', document.getElementById('Label1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML2', 'footer-1', document.getElementById('HTML2'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_BlogArchiveView', new _WidgetInfo('BlogArchive1', 'footer-1', document.getElementById('BlogArchive1'), {'languageDirection': 'ltr', 'loadingMessage': 'Memuat\x26hellip;'}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'footer-1', document.getElementById('HTML1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML4', 'footer-1', document.getElementById('HTML4'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML3', 'footer-1', document.getElementById('HTML3'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_ProfileView', new _WidgetInfo('Profile1', 'footer-1', document.getElementById('Profile1'), {}, 'displayModeFull')); </script> </body> </html>