Mengenal Transformasi 2D di CSS3

<div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; word-wrap: break-word;"> <em style="margin: 0px; padding: 0px;">M-S Blog || Artikel ini akan membahas <strong style="margin: 0px; padding: 0px;">CSS3 2D Transformation</strong>, merupakan lanjutan artikel sebelumnya dengan judul <strong style="margin: 0px; padding: 0px;">Mengenal Transformasi di CSS3</strong>.</em></div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; word-wrap: break-word;"> Continue from our last catch up tentang basic css transformation. Sekarang kita akan bahas properti transformasi 2D dengan css3. Tujuannya untuk dapat merubah baik posisi, bentuk, dan sifat suatu elemen dalam bidang 2 dimensi.</div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; word-wrap: break-word;"> Seperti yang sudah kita bahas sebelumnya, transformasi diaktifkan dengan syntax transform yang diikuti dengan nama fungsi dan nilainya. Serta tambahan vendor prefix untuk mengatasi masalah cross-browser, seperti ini:</div> <div class="syntaxhighlighter " id="highlighter_253693" style="background-color: rgb(255, 255, 255) !important; background-image: none !important; border: 1px solid rgb(224, 224, 224) !important; bottom: auto !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 1em 0px !important; outline: 0px !important; padding: 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 496.53125px; word-wrap: break-word;"> <div class="lines no-wrap" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <div class="line alt1" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; max-width: 100%; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: #111111; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: 2.7em !important;">1</code></td><td class="content" style="-webkit-box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; white-space: pre !important; width: auto !important;"><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">trasnform: function(values);</code></td></tr> </tbody></table> </div> <div class="line alt2" style="background-color: rgb(248, 248, 248) !important; background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; max-width: 100%; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: #111111; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: 2.7em !important;">2</code></td><td class="content" style="-webkit-box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; white-space: pre !important; width: auto !important;"> </td></tr> </tbody></table> </div> <div class="line alt1" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; max-width: 100%; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: #111111; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: 2.7em !important;">3</code></td><td class="content" style="-webkit-box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; white-space: pre !important; width: auto !important;"><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">-webkit-transform: function(values);</code></td></tr> </tbody></table> </div> </div> </div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; word-wrap: break-word;"> <b style="margin: 0px; padding: 0px;">Translate, TranslateX, TranslateY</b></div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; word-wrap: break-word;"> Properties ini berfungsi merubah posisi elemen baik dalam arah horizontal (sumbu X), vertikal (sumbu Y), maupun keduanya. Nilainya bisa berapapun dengan beragam satuan (%, px, pc, em, vw, edll). Penulisannya seperti ini:</div> <div class="syntaxhighlighter " id="highlighter_163197" style="background-color: rgb(255, 255, 255) !important; background-image: none !important; border: 1px solid rgb(224, 224, 224) !important; bottom: auto !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 1em 0px !important; outline: 0px !important; padding: 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 496.53125px; word-wrap: break-word;"> <div class="lines no-wrap" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <div class="line alt1" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; max-width: 100%; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: #111111; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: 2.7em !important;">1</code></td><td class="content" style="-webkit-box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; white-space: pre !important; width: auto !important;"><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">transform: translate( </code><code class="value" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: rgb(0, 153, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">-350px</code><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">, </code><code class="value" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: rgb(0, 153, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">100%</code> <code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">);</code></td></tr> </tbody></table> </div> </div> </div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; word-wrap: break-word;"> Artinya elemen digeser sebesar 350px ke kiri dan 100% ke atas. Persen disini bukan mengacu pada lebarnya viewport, tapi mengacu pada lebarnya elemen kita. Jadi elemen di atas geser ke atas tepat sebesar lebarnya. Kamu bisa mencoba translateX, dan translateY dengan terpisah persis seperti di atas hanya nilai yang dimasukkan tunggal.</div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2tI6LqAhQvHPTsgpXce4fCjMy-HGcoqqc0_KWfVTF8QaeTaHsoOMzkJ0ydWwMZwd11MuaNwjNq-m6jCgaMQx1UBivG9R91WbT1ALEqZFCAOIAUp6pnHr8u-BTGm84E4FdWE7pxE5l2KM/s1600/css-2d-transform.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="358" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2tI6LqAhQvHPTsgpXce4fCjMy-HGcoqqc0_KWfVTF8QaeTaHsoOMzkJ0ydWwMZwd11MuaNwjNq-m6jCgaMQx1UBivG9R91WbT1ALEqZFCAOIAUp6pnHr8u-BTGm84E4FdWE7pxE5l2KM/s1600/css-2d-transform.jpg" width="640" /></a></div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> <br /></div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> Mungkin sekarang kamu berpikir, ‘Apa bedanya dengan properties yang lain, untuk hanya menggeser elemen saya bisa gunakan margin’. Ya, mungkin benar kamu bisa lakukan ini dengan margin, tapi transfrom memberikan kemudahan. Misalkan kamu punya elemen yang horizontally centered dengan margin: 0 auto. Lalu kamu ingin menggeser elemen itu ke kiri sebesar 70px. Ini tidak akan masalah jika kamu tahu persis lebarnya container elemen tersebut, sehingga nilai 70px memang nilai yang tepat. Namun, jika sebaliknya kamu tidak tahu berapa lebar persis container (dan memang mayoritas responsive design menggunakan lebar seperti ini), kamu dapat menggunakan translate untuk menggeser elemen tersebut, baik dengan satuan absolut (px, pc, pt) maupun relatif (em, %, vw).</div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> <b style="margin: 0px; padding: 0px;">Scale, ScaleX, ScaleY </b></div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> Berfungsi untuk merubah dimensi dari suatu elemen dan semua elemen di dalamnya (child elements). Kamu bisa menuliskannya secara singkat maupun secara terpisah dengan perantara koma, seperti ini:</div> <div class="syntaxhighlighter " id="highlighter_743327" style="background-color: rgb(255, 255, 255) !important; background-image: none !important; border: 1px solid rgb(224, 224, 224) !important; bottom: auto !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 1em 0px !important; outline: 0px !important; padding: 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 496.53125px; word-wrap: break-word;"> <div class="lines no-wrap" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <div class="line alt1" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; max-width: 100%; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; text-align: justify; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: #111111; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: 2.7em !important;">1</code></td><td class="content" style="-webkit-box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; white-space: pre !important; width: auto !important;"><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">transform: scale(</code><code class="value" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: rgb(0, 153, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">-1.5</code> <code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">, </code><code class="value" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: rgb(0, 153, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">3</code><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">);</code></td></tr> </tbody></table> </div> <div class="line alt2" style="background-color: rgb(248, 248, 248) !important; background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; max-width: 100%; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; text-align: justify; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: #111111; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: 2.7em !important;">2</code></td><td class="content" style="-webkit-box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; white-space: pre !important; width: auto !important;"> </td></tr> </tbody></table> </div> <div class="line alt1" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; max-width: 100%; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; text-align: justify; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: #111111; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: 2.7em !important;">3</code></td><td class="content" style="-webkit-box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; white-space: pre !important; width: auto !important;"><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">transfrom: scale(</code><code class="value" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: rgb(0, 153, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">2</code><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">);</code></td></tr> </tbody></table> </div> </div> </div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> Pada baris pertama, elemen diperkecil 1.5x ke arah X dan 3x ke arah Y. Kamu juga bisa menuliskan ini secara terpisah, jika hanya ingin merubah dalam satu sisi saja baik scaleX, maupun scaleY. Pada baris kedua elemen diperbesar 2x baik ke arah X dan Y. Selain itu, nilai negatif diperbolehkan dan menghasilkan mirror elemen, yap efek seperti cermin pada suatu objek. Kamu bisa lihat hasilnya di <a href="http://cdpn.io/kyqDJ" style="color: #047e7d; margin: 0px; padding: 0px; text-decoration: none;" target="_blank" title="2D Mirror Transformation">sini</a>.</div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> <a href="http://cdpn.io/kyqDJ" style="color: #047e7d; margin: 0px; padding: 0px; text-decoration: none;" target="_blank" title="2D Mirror Transformation"><strong style="margin: 0px; padding: 0px;">DEMO</strong></a></div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> Bagi kamu yang senang fancy desain mungkin efek ini membantu, in my humble opinion,  jika menerapkan efek pikirkan terlebih dahulu konsep matang sebelum memasangkan semua skill set kita.</div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> <b style="margin: 0px; padding: 0px;">Rotate</b></div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> Berfungsi untuk memutar elemen. Nilai yang dipakai dapat dalam deg (derajat) maupun rad (radian), seperti ini:</div> <div class="syntaxhighlighter " id="highlighter_891846" style="background-color: rgb(255, 255, 255) !important; background-image: none !important; border: 1px solid rgb(224, 224, 224) !important; bottom: auto !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 1em 0px !important; outline: 0px !important; padding: 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 496.53125px; word-wrap: break-word;"> <div class="lines no-wrap" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <div class="line alt1" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; max-width: 100%; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; text-align: justify; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: #111111; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: 2.7em !important;">1</code></td><td class="content" style="-webkit-box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; white-space: pre !important; width: auto !important;"><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">transform: rotate(</code><code class="value" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: rgb(0, 153, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">45</code><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">deg);</code></td></tr> </tbody></table> </div> </div> </div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> Elemen di atas diputar sebesar 45 derajat searah jarum jam. Sebaliknya apabila nilai negatif maka berlawanan arah jarum jam. Elemen berputar pada porosnya yang berada di tengah-tengah elemen tersebut. Kamu kapanpun bisa merubah posisi porosnya dengan properti transform-origin, dengan nilai: left, right, top, bottom, dan gabungan pojok-pojoknyo, seperti ini:</div> <div class="syntaxhighlighter " id="highlighter_596171" style="background-color: rgb(255, 255, 255) !important; background-image: none !important; border: 1px solid rgb(224, 224, 224) !important; bottom: auto !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 1em 0px !important; outline: 0px !important; padding: 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 496.53125px; word-wrap: break-word;"> <div class="lines no-wrap" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <div class="line alt1" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; max-width: 100%; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; text-align: justify; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: #111111; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: 2.7em !important;">1</code></td><td class="content" style="-webkit-box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; white-space: pre !important; width: auto !important;"><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">transform-origin: right-</code><code class="value" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: rgb(0, 153, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">top</code><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">;</code></td></tr> </tbody></table> </div> </div> </div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> Elemen diubah posisi porosnya menjadi di kanan atas elemen, sehingga rotasi yang terjadi akan mengacu pada titik tersebut.</div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> <strong style="margin: 0px; padding: 0px;">SkewX dan SkewY</strong></div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> Berfungsi untuk memiringkan elemen. Kesimetrisan elemen pada sumbu X dan sumbu Y terpecahkan dengan properties ini. Anyway, penulisan skewX dan skewY secara singkat, saat ini sudah ditiadakan dari spesifikasi sehingga tidak lagi kita gunakan. Kamu bisa tulis seperti ini:</div> <div class="syntaxhighlighter " id="highlighter_699555" style="background-color: rgb(255, 255, 255) !important; background-image: none !important; border: 1px solid rgb(224, 224, 224) !important; bottom: auto !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 1em 0px !important; outline: 0px !important; padding: 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 496.53125px; word-wrap: break-word;"> <div class="lines no-wrap" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <div class="line alt1" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; max-width: 100%; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; text-align: justify; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: #111111; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: 2.7em !important;">1</code></td><td class="content" style="-webkit-box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; white-space: pre !important; width: auto !important;"><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">transform: skewX(</code><code class="value" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: rgb(0, 153, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">40</code><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">deg);</code></td></tr> </tbody></table> </div> <div class="line alt2" style="background-color: rgb(248, 248, 248) !important; background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; max-width: 100%; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; text-align: justify; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: #111111; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: 2.7em !important;">2</code></td><td class="content" style="-webkit-box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; white-space: pre !important; width: auto !important;"> </td></tr> </tbody></table> </div> <div class="line alt1" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; max-width: 100%; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; text-align: justify; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: #111111; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: 2.7em !important;">3</code></td><td class="content" style="-webkit-box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; white-space: pre !important; width: auto !important;"><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">transform: skewY(</code><code class="value" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: rgb(0, 153, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">-1.5</code><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">rad);</code></td></tr> </tbody></table> </div> </div> </div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> Kamu bisa lihat hasilnya di <a href="http://cdpn.io/kyqDJ" style="color: #047e7d; margin: 0px; padding: 0px; text-decoration: none;" target="_blank" title="Skew 2D Transformation">sini</a>.</div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> <a href="http://cdpn.io/kyqDJ" style="color: #047e7d; margin: 0px; padding: 0px; text-decoration: none;" target="_blank" title="Demo 2D Skew Transformation"><strong style="margin: 0px; padding: 0px;">DEMO Skew 2D Transformation</strong></a></div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> <strong style="margin: 0px; padding: 0px;">Transformasi Gabungan</strong></div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> Seperti namanya, gabungan terdengar legit. Yap, kita bisa menggabungkan semua properties transformation di atas menjadi satu kode singkat (shorthand) dengan pemisah tanda koma. Seperti ini:</div> <div class="syntaxhighlighter " id="highlighter_857813" style="background-color: rgb(255, 255, 255) !important; background-image: none !important; border: 1px solid rgb(224, 224, 224) !important; bottom: auto !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 1em 0px !important; outline: 0px !important; padding: 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 496.53125px; word-wrap: break-word;"> <div class="lines no-wrap" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <div class="line alt1" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; max-width: 100%; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; text-align: justify; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: #111111; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: 2.7em !important;">1</code></td><td class="content" style="-webkit-box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; white-space: pre !important; width: auto !important;"><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">transform: scale(</code><code class="value" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: rgb(0, 153, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">2</code><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">), rotate(</code><code class="value" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: rgb(0, 153, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">45</code><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">deg), skewX(</code><code class="value" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: rgb(0, 153, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">40</code><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">deg), skewY(</code><code class="value" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: rgb(0, 153, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">-1.5</code><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">rad);</code></td></tr> </tbody></table> </div> </div> </div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> Kalo kamu seorang engineer atau scientist atau matematiks geeks, kamu pasti menyukai matriks. Kamu bisa gunakan matriks kesayangan kamu untuk mentransformasi elemen di css3. Css3 memberikan 6 kolom matriks dengan 4 kolom pertama menunjukkan transformasi dan 2 kolom terakhir menunjukkan perbesaran dimensi (scaling). Seperti ini:</div> <div class="syntaxhighlighter " id="highlighter_737047" style="background-color: rgb(255, 255, 255) !important; background-image: none !important; border: 1px solid rgb(224, 224, 224) !important; bottom: auto !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 1em 0px !important; outline: 0px !important; padding: 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 496.53125px; word-wrap: break-word;"> <div class="lines no-wrap" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <div class="line alt1" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; max-width: 100%; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; text-align: justify; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: #111111; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: 2.7em !important;">1</code></td><td class="content" style="-webkit-box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; white-space: pre !important; width: auto !important;"><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">transform: matrix(</code><code class="value" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: rgb(0, 153, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">-350</code><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">, </code><code class="value" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: rgb(0, 153, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">200</code><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">, </code><code class="value" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: rgb(0, 153, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">45</code><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">, </code><code class="value" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: rgb(0, 153, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">-1.5</code><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">, </code><code class="value" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: rgb(0, 153, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">-1.5</code><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">, </code><code class="value" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: rgb(0, 153, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">3</code><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">);</code></td></tr> </tbody></table> </div> </div> </div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> Nilai matriks ini dioperasikan kepada seluruh point pada elemen untuk membentuk bentuk dan posisi yang baru.</div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> <strong style="margin: 0px; padding: 0px;">Saya mau cancel Transformation, caranya gimana?</strong></div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> Mudah, simply write syntax like this:</div> <div class="syntaxhighlighter " id="highlighter_279819" style="background-color: rgb(255, 255, 255) !important; background-image: none !important; border: 1px solid rgb(224, 224, 224) !important; bottom: auto !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 1em 0px !important; outline: 0px !important; padding: 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 496.53125px; word-wrap: break-word;"> <div class="lines no-wrap" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <div class="line alt1" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; max-width: 100%; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; text-align: justify; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: #111111; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: 2.7em !important;">1</code></td><td class="content" style="-webkit-box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; white-space: pre !important; width: auto !important;"><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">transform: </code><code class="value" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: rgb(0, 153, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">none</code><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">;</code></td></tr> </tbody></table> </div> </div> </div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> Kode ini kamu tulis pada elemen yang kamu inginkan batal transformasi. Metode ini lebih baik dilakukan dibandingkan kamu menghapus semua kode yang sudah kamu buat sebelumnya. Selain lebih mudah menulis sedikit kode kamu juga bisa mengundo redo pekerjaan kamu untuk mendapatkan efek yang kamu inginkan.</div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> Booya, sampai sini kamu bisa membuat efek transofrmasi 2D di css3.</div> <div style="font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: right; word-wrap: break-word;"> <span style="background-color: #999999; color: white; font-size: x-small;">Source : http://www.tutorial-webdesign.com/css3-2d-transformation/</span></div>

M-S Blog || Artikel ini akan membahas  CSS3 2D Transformation , merupakan lanjutan artikel sebelumnya dengan judul  Mengenal Transformasi d...

Read more »

Free Download Game TRANSFORMERS FALL OF CYBERTRON For PC

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggl_6LJ1nqTU4mhP5o8C2LwPe_gsg2qJVR2b5fOrj_4IvZSD30Qv9u2GEF1B8VghVetWfQVeA-2f_APZikx-Y_4sn7aX9e2t46Kb76hYL8UdhXxwRYszb8WL0LGiBvoEy6gA2lh-uySLw/s1600/transformer.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggl_6LJ1nqTU4mhP5o8C2LwPe_gsg2qJVR2b5fOrj_4IvZSD30Qv9u2GEF1B8VghVetWfQVeA-2f_APZikx-Y_4sn7aX9e2t46Kb76hYL8UdhXxwRYszb8WL0LGiBvoEy6gA2lh-uySLw/s1600/transformer.jpg" /></a></div> <div style="background-color: white; box-sizing: border-box; text-align: left;"> <span class="" lang="id" style="box-sizing: border-box;"><span style="box-sizing: border-box; font-size: 14px; line-height: 17.59375px;" title="Transformers for all."><span style="color: #333333; font-family: Verdana, Geneva, sans-serif;"><b><br /></b></span></span></span></div> <div style="background-color: white; box-sizing: border-box; text-align: left;"> <span class="" lang="id" style="box-sizing: border-box;"><span style="box-sizing: border-box; font-size: 14px; line-height: 17.59375px;" title="Transformers for all."><span style="color: #333333; font-family: Verdana, Geneva, sans-serif;"><b>Free Download Game TRANSFORMERS FALL OF CYBERTRON For PC</b></span></span></span></div> <div style="background-color: white; box-sizing: border-box; text-align: left;"> <span class="" lang="id" style="box-sizing: border-box;"><span style="box-sizing: border-box; font-size: 14px; line-height: 17.59375px;" title="Transformers for all."><span style="color: #333333; font-family: Verdana, Geneva, sans-serif;"><b><br /></b></span></span></span></div> <div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 14px; line-height: 17.59375px; text-align: left;"> <span class="" id="result_box" lang="id" style="box-sizing: border-box;"><span style="box-sizing: border-box;" title="Transformers for all.">Pada kesempatan kali ini saya akan berbagi game yg cukup menarik yaitu Transformer. </span><span style="box-sizing: border-box;" title="I think everybody know about transformers because transformers is not only in game but transformers is first time there is in film.">Saya pikir semua orang tahu tentang transformer transformer karena tidak hanya dalam permainan tetapi transformer pertama kali ada dalam film.</span></span></div> <div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 14px; line-height: 17.59375px; text-align: left;"> <span class="" lang="id" style="box-sizing: border-box;"><span style="box-sizing: border-box;" title="Transformers: Fall of Cybertron is a third-person shooter video game developed by High Moon Studios and published by Activision."><br /></span></span></div> <div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 14px; line-height: 17.59375px; text-align: left;"> <span class="" lang="id" style="box-sizing: border-box;"><span style="box-sizing: border-box;" title="Transformers: Fall of Cybertron is a third-person shooter video game developed by High Moon Studios and published by Activision.">Transformers : Fall of Cybertron adalah third-person shooter video game yang dikembangkan oleh Internet bulan Studios dan diterbitkan oleh Activision . </span><span style="box-sizing: border-box;" title="It is the sequel to the 2010 video game Transformers: War for Cybertron, and directly follows the events of that game as the Autobots struggle to defeat their Decepticon foes in a war for their home planet of Cybertron.">Ini adalah sekuel 2010 video game Transformers : War for Cybertron , dan langsung mengikuti acara permainan itu sebagai Autobots berjuang untuk mengalahkan musuh Decepticon mereka dalam perang untuk planet asal mereka Cybertron. </span></span></div> <div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 14px; line-height: 17.59375px; text-align: left;"> <span class="" lang="id" style="box-sizing: border-box;"><span style="box-sizing: border-box;" title="The game was released on August 21, 2012 in North America and on August 24, 2012 in Europe for Microsoft Windows, PlayStation 3 and Xbox 360."><br /></span></span></div> <div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 14px; line-height: 17.59375px; text-align: left;"> <span class="" lang="id" style="box-sizing: border-box;"><span style="box-sizing: border-box;" title="The game was released on August 21, 2012 in North America and on August 24, 2012 in Europe for Microsoft Windows, PlayStation 3 and Xbox 360.">Permainan ini dirilis pada 21 Agustus 2012 di Amerika Utara dan pada tanggal 24 Agustus 2012 di Eropa untuk Microsoft Windows, PlayStation 3 dan Xbox 360.</span></span></div> <div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 14px; line-height: 17.59375px; text-align: left;"> <span class="" lang="id" style="box-sizing: border-box;"><span style="box-sizing: border-box;" title="The game tells the story of the Transformers, fictional robotic life forms, and the final days of conflict on their home planet of Cybertron."><br /></span></span></div> <div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 14px; line-height: 17.59375px; text-align: left;"> <span class="" lang="id" style="box-sizing: border-box;"><span style="box-sizing: border-box;" title="The game tells the story of the Transformers, fictional robotic life forms, and the final days of conflict on their home planet of Cybertron.">Permainan bercerita tentang Transformers, bentuk kehidupan fiksi robot , dan hari-hari terakhir konflik di planet asal mereka Cybertron. </span></span><span style="box-sizing: border-box;" title="An origins subplot for the Dinobots is also told, reimagined from the Transformers: Generation 1 continuity.">Sebuah asal subplot untuk Dinobots juga mengatakan , konsep ulang dari Transformers : Generation 1 kontinuitas. </span><span style="box-sizing: border-box;" title="Other subplots also tell an adapted story for several characters.">Subplot lain juga menceritakan kisah yang diadaptasi untuk beberapa karakter. </span>Beberapa pengisi suara dari seri 1984 Transformers kembali ke Reprise peran mereka , termasuk Peter Cullen sebagai pemimpin Autobot Optimus Prime dan Gregg Berger sebagai Grimlock. Aktor-aktor lain kembali ke Reprise peran mereka dari Transformers : War for Cybertron .</div> <div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 14px; line-height: 17.59375px; text-align: justify;"> </div> <div style="background-color: white; box-sizing: border-box; color: #434242; font-family: Verdana, Geneva, sans-serif; line-height: 17.59375px; text-align: justify;"> <span class="" id="result_box" lang="id" style="box-sizing: border-box; color: #333333; font-size: 14px;"><span style="box-sizing: border-box;" title="Other actors return to reprise their roles from Transformers: War for Cybertron."><span id="7069304524595400737" style="box-sizing: border-box;"></span></span></span><br /><div style="box-sizing: border-box; font-family: Arial, Verdana; font-size: 14px; line-height: 19px;"> <span class="" id="result_box" lang="id" style="box-sizing: border-box; color: #333333;"><span style="box-sizing: border-box;" title="Other actors return to reprise their roles from Transformers: War for Cybertron."><span id="7069304524595400737" style="box-sizing: border-box;"><b style="box-sizing: border-box;">Minimum System Reqirements :</b></span></span></span></div> <span class="" id="result_box" lang="id" style="box-sizing: border-box; color: #333333; font-size: 14px;"><span style="box-sizing: border-box;" title="Other actors return to reprise their roles from Transformers: War for Cybertron."><span id="7069304524595400737" style="box-sizing: border-box;"><ul style="box-sizing: border-box; font-family: Arial, Verdana; line-height: 19px;"> <li style="box-sizing: border-box;">OS: Windows XP SP3/Vista/Win 7</li> <li style="box-sizing: border-box;">Processor: Dual Core Intel/AMD</li> <li style="box-sizing: border-box;">Memory: 2GB</li> <li style="box-sizing: border-box;">Hard disk space: 9GB</li> <li style="box-sizing: border-box;">VGA: 256MB NVIDIA GeForce 8800GT /ATI Radeon HD 4850</li> </ul>  <div style="box-sizing: border-box; font-family: Arial, Verdana; line-height: 19px;"> <b style="box-sizing: border-box;"><br style="box-sizing: border-box;" /></b></div> <div style="box-sizing: border-box; font-family: Arial, Verdana; line-height: 19px;"> <b style="box-sizing: border-box;">Link Download :</b></div> </span></span></span><br /><div style="box-sizing: border-box; text-align: center;"> <b><span class="" id="result_box" lang="id" style="box-sizing: border-box;"><span id="7069304524595400737" style="box-sizing: border-box;"></span></span><br /></b><div style="box-sizing: border-box;"> <span class="" id="result_box" lang="id" style="box-sizing: border-box;"><b><span id="7069304524595400737" style="box-sizing: border-box;"></span></b></span></div> </div> <div style="box-sizing: border-box; text-align: center;"> <span class="" id="result_box" lang="id" style="box-sizing: border-box;"><span style="box-sizing: border-box;" title="Other actors return to reprise their roles from Transformers: War for Cybertron."><b> <a href="http://satu.uk.pn/f7a0bcc7ba6cb7147aa1d6e1996c41fd" style="box-sizing: border-box; color: #789102; max-width: 100%; outline: none; text-decoration: none;">Download Game Transformers F.A.C Link ( 7.8 Gb )</a></b></span></span></div> <div style="box-sizing: border-box; text-align: center;"> </div> <div style="box-sizing: border-box; color: #333333; font-size: 14px; text-align: center;"> <span class="" id="result_box" lang="id" style="box-sizing: border-box;"><span id="7069304524595400737" style="box-sizing: border-box;"></span></span><br /><div style="box-sizing: border-box; font-family: Arial, Verdana; line-height: 19px; text-align: justify;"> <span class="" id="result_box" lang="id" style="box-sizing: border-box;"><span style="box-sizing: border-box;" title="Other actors return to reprise their roles from Transformers: War for Cybertron."><span id="7069304524595400737" style="box-sizing: border-box;"><b style="box-sizing: border-box;">How To Install :</b></span></span></span></div> <span class="" id="result_box" lang="id" style="box-sizing: border-box;"><span style="box-sizing: border-box;" title="Other actors return to reprise their roles from Transformers: War for Cybertron."><span id="7069304524595400737" style="box-sizing: border-box;"><ol style="box-sizing: border-box; font-family: Arial, Verdana; line-height: 19px; text-align: justify;"> <li style="box-sizing: border-box;">Mount With Daemon tools</li> <li style="box-sizing: border-box;">Install Via Autoplay</li> <li style="box-sizing: border-box;">Copy Crack SKIDROW and than paste to the place you have install this game</li> <li style="box-sizing: border-box;">Blok with firewall and than play the game</li> <li style="box-sizing: border-box;">Enjoy</li> </ol> </span></span></span><br /><div style="box-sizing: border-box; text-align: left;"> <span class="" id="result_box" lang="id" style="box-sizing: border-box;"><span style="box-sizing: border-box;" title="Other actors return to reprise their roles from Transformers: War for Cybertron."><span id="7069304524595400737" style="box-sizing: border-box;"><b style="box-sizing: border-box;">Sreenshot :</b></span></span></span></div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSnK_uEWY1bH9Ju2dUtW6jk8efe6Y0mQ_oKllrVbh3tFysviEE8DcPquiHgZui_oaksmZWoHprecDlBstRPOS8y2wMKcY2TOKriOUDNF97wbdxQpX-PO_68nXm4vkObGy4GTf1hXwKiGk/s1600/transformer1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSnK_uEWY1bH9Ju2dUtW6jk8efe6Y0mQ_oKllrVbh3tFysviEE8DcPquiHgZui_oaksmZWoHprecDlBstRPOS8y2wMKcY2TOKriOUDNF97wbdxQpX-PO_68nXm4vkObGy4GTf1hXwKiGk/s320/transformer1.jpg" width="320" /></a></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilDGgR-3TqAFz1JlE3fhHuiWUoYlYlC-9z_LZz6H_VgGXyUPqSbpUGuopu6NZcg-As4fIbK_PuV6TntPMGn6QyXOKYoin2t4AtkI-crWrCv25XzFxs2cRu5mRovozAAN_y8kgJyL5wa-8/s1600/transformer2.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilDGgR-3TqAFz1JlE3fhHuiWUoYlYlC-9z_LZz6H_VgGXyUPqSbpUGuopu6NZcg-As4fIbK_PuV6TntPMGn6QyXOKYoin2t4AtkI-crWrCv25XzFxs2cRu5mRovozAAN_y8kgJyL5wa-8/s320/transformer2.jpeg" width="320" /></a></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhabSbdYnEp1U7dwgIz9h4v9wtWeakItcIqyYZnh6OwKXi26JpFAPfHVoSvMNRv4UNG2nkfr8EXTwoPcRaLYeIPCyWDGJHYF0z7_nykRA-U0Lq3aX5xIh72E1F6Mxq4z5OWiiddNRY38hY/s1600/transformer3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhabSbdYnEp1U7dwgIz9h4v9wtWeakItcIqyYZnh6OwKXi26JpFAPfHVoSvMNRv4UNG2nkfr8EXTwoPcRaLYeIPCyWDGJHYF0z7_nykRA-U0Lq3aX5xIh72E1F6Mxq4z5OWiiddNRY38hY/s320/transformer3.jpg" width="320" /></a></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> </div> </div>

Free Download Game TRANSFORMERS FALL OF CYBERTRON For PC Pada kesempatan kali ini saya akan berbagi game yg cukup menarik yaitu Tra...

Read more »

Cara Edit Robot.txt Blog atau Website yang Benar Agar SEO

<h2 style="font-weight: normal; margin: 0px; padding: 0px;"> <b><span style="font-family: Verdana, sans-serif; font-size: x-small;">M-S Blog || Cara Edit Robot.txt Blog atau Website yang Benar Agar SEO Friendly, </span></b><b style="font-family: Verdana, sans-serif; font-size: small;">Robot.txt</b><span style="font-family: Verdana, sans-serif; font-size: x-small;"> adalah komponen penting dalam sebuah website atau blog untuk '</span><i style="font-family: Verdana, sans-serif; font-size: small;">memanage'</i><span style="font-family: Verdana, sans-serif; font-size: x-small;"> sebuah halaman blog di</span><i style="font-family: Verdana, sans-serif; font-size: small;"> Mesin Pencari</i><span style="font-family: Verdana, sans-serif; font-size: x-small;"> seperti </span><i style="font-family: Verdana, sans-serif; font-size: small;">Google dan Bing</i><span style="font-family: Verdana, sans-serif; font-size: x-small;">. Sebuah </span><b style="font-family: Verdana, sans-serif; font-size: small;">robot.txt </b><span style="font-family: Verdana, sans-serif; font-size: x-small;">biasanya digunakan oleh para webmaster dan blogger untuk mengatur halaman mana yang ingin di </span><i style="font-family: Verdana, sans-serif; font-size: small;">crawl </i><span style="font-family: Verdana, sans-serif; font-size: x-small;">atau dirayapi mesin pencari dan halaman mana yang tidak ingin dirayapi </span><i style="font-family: Verdana, sans-serif; font-size: small;">search enginer. </i></h2> <div style="margin: 0px; padding: 0px; text-align: left;"> <i><span style="font-family: Verdana, sans-serif; font-size: x-small;"><br /></span></i></div> <table cellpadding="0" cellspacing="0" class="tr-caption-container" style="color: black; margin-left: auto; margin-right: auto; padding: 4px; text-align: center;"><tbody> <tr><td style="margin: 0px; padding: 0px;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU028aL3MML0qXYkJzcJdZPAfEQEbVMbvuunSOWkJHWP5VaO22xUuzR5qUpRBlVnKy5Qm93azZvbyNHNE2IJLY2lwChdcNcdoCAhf7XWnC_xKNHMZX2oNgyQvLkI67Jf_X8lxTiF8yToU/s1600/edit+robot+di+blogger.jpg" imageanchor="1" style="color: #1e598e; margin-left: auto; margin-right: auto; text-decoration: none;"><span style="font-family: Verdana, sans-serif; font-size: x-small;"><img alt="Cara Edit Robot.txt Blog atau Website yang Benar Agar SEO Friendly" border="0" height="217" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU028aL3MML0qXYkJzcJdZPAfEQEbVMbvuunSOWkJHWP5VaO22xUuzR5qUpRBlVnKy5Qm93azZvbyNHNE2IJLY2lwChdcNcdoCAhf7XWnC_xKNHMZX2oNgyQvLkI67Jf_X8lxTiF8yToU/s400/edit+robot+di+blogger.jpg" title="" width="400" /></span></a></td></tr> <tr><td class="tr-caption" style="margin: 0px; padding: 0px;"><span style="font-family: Verdana, sans-serif; font-size: x-small;"><br /></span></td></tr> </tbody></table> <div style="margin: 0px; padding: 0px; text-align: left;"> <span style="font-family: Verdana, sans-serif; font-size: x-small;">Mengingat sangat penting nya sebuah <b><a href="http://www.netomaniak.com/2013/12/edit-robot-seo-friendly-di-blog.html" style="color: #1e598e; text-decoration: none;">robot.txt</a></b> di sebuah blog atau website ini yang sering juga di gunakan agar halaman tertata dengan baik di Google atau Bing (<b>SEO Friendly</b>). Kali ini <i>netomaniak.com </i>ingin membagikan tips<b> mengedit robot.txt yang baik dan benar di Blogger agar SEO friendly</b>:</span></div> <div style="margin: 0px; padding: 0px; text-align: left;"> <span style="font-family: Verdana, sans-serif; font-size: x-small;"><br /></span></div> <div style="margin: 0px; padding: 0px; text-align: left;"> <span style="font-family: Verdana, sans-serif; font-size: x-small;">Sebelum memulai, saya akan melakukan tutorial ini yang saya terapkan di <b>blogspot, </b>dan berikut caranya:</span></div> <div style="margin: 0px; padding: 0px; text-align: left;"> <span style="font-family: Verdana, sans-serif; font-size: x-small;"><br /></span></div> <div style="margin: 0px; padding: 0px; text-align: left;"> <span style="font-family: Verdana, sans-serif; font-size: x-small;">1. Masuk ke <b>Dasboard Blogger</b> anda.</span></div> <div style="margin: 0px; padding: 0px; text-align: left;"> <span style="font-family: Verdana, sans-serif; font-size: x-small;">2. Klik Menu <b>Setelan/Setting </b>pada bagian paling bawah dasboard blog, lalu klik <b>Preferensi Penelusuran </b><i>(kedua paling bawah)</i></span></div> <div style="margin: 0px; padding: 0px; text-align: left;"> <span style="font-family: Verdana, sans-serif; font-size: x-small;">3. Lihat pada bagian "Perayap dan pengindeksan", silahkan klik <b>Edit </b>pada <b>robot.txt khusus</b></span></div> <div style="margin: 0px; padding: 0px; text-align: justify;"> <div style="text-align: left;"> <span style="font-family: Verdana, sans-serif; font-size: x-small;">4. Maka akan terlihat form kosong atau default nya. Silahkan Setting sesuai halaman mana yang akan ingin dirayapi google. Lihat</span><span style="font-family: Verdana, sans-serif; font-size: x-small;"> </span><i style="font-family: Verdana, sans-serif; font-size: small;">pengaturan robot</i><span style="font-family: Verdana, sans-serif; font-size: x-small;"> </span><span style="font-family: Verdana, sans-serif; font-size: x-small;">di blog saya ini:</span></div> <div style="font-family: Verdana, sans-serif; font-size: small; text-align: left;"> <br /></div> <b style="background-color: #cccccc; font-family: Verdana, sans-serif; font-size: small;"><div style="text-align: left;"> <b>User-agent: Mediapartners-Google</b></div> </b><b style="background-color: #cccccc; font-family: Verdana, sans-serif; font-size: small;"><div style="text-align: left;"> <b>Disallow: </b></div> </b><b style="background-color: #cccccc; font-family: Verdana, sans-serif; font-size: small;"><div style="text-align: left;"> <br /></div> </b><span style="background-color: white; font-size: x-small;"><span style="font-family: Courier New, Courier, monospace;"><b><div style="text-align: left;"> <b><span style="color: blue;">User-agent: Googlebot</span></b></div> </b><b><div style="text-align: left;"> <b>Disallow: /search</b></div> </b><b><div style="text-align: left;"> <b>Disallow: /?m=1</b></div> </b><b><div style="text-align: left;"> <b>Disallow: /?m=0</b></div> </b><b><div style="text-align: left;"> <b>Disallow: /*?m=1</b></div> </b><b><div style="text-align: left;"> <b>Disallow: /*?m=0</b></div> </b><b><div style="text-align: left;"> <br /></div> </b><b><div style="text-align: left;"> <b><span style="color: lime;">User-agent: *</span></b></div> </b><b><div style="text-align: left;"> <b>Disallow: /search?updated-min=</b></div> </b><b><div style="text-align: left;"> <b>Disallow: /search?updated-max=</b></div> </b><b><div style="text-align: left;"> <b>Disallow: /search/label/*?updated-min=</b></div> </b><b><div style="text-align: left;"> <b>Disallow: /search/label/*?updated-max=</b></div> </b><b><div style="text-align: left;"> <b><span style="color: yellow;">Disallow: /p/*</span></b></div> </b><b><div style="text-align: left;"> <b>Allow: /</b></div> </b><b><div style="text-align: left;"> <br /></div> </b><b><div style="text-align: left;"> <b>Sitemap: http://<span style="color: red;">www.netomaniak.com</span>/feeds/posts/default?orderby=UPDATED</b></div> </b></span></span><b style="font-size: small;"><div style="text-align: left;"> <br /></div> </b><i style="font-family: Verdana, sans-serif;"><div style="text-align: left;"> <i><b>Keterangan:</b></i></div> </i><div style="font-family: Verdana, sans-serif; font-size: small; text-align: left;"> <br /></div> <ul style="margin: 0px; padding: 0px;"> <li style="margin: 0px; padding: 0px; text-align: left;"><span style="font-family: Verdana, sans-serif; font-size: x-small;">Untuk Tulisan berwarna<i> </i><b style="font-style: italic;"><span style="color: blue;">biru</span> </b>adalah sebuah 'kode' pada robot untuk <b>tidak <a href="http://www.netomaniak.com/2013/12/Keyword-terbanyak-diGoogle-2013.html" style="color: #1e598e; text-decoration: none;" target="_blank">merayapi</a></b> halaman berakhiran<i> </i><b style="font-style: italic;">?m=1 & ?m=0. </b>Biasanya halaman ini ada jika visitor membuka blog anda lewat Ponsel. Jika hal ini tidak di atur pada robot, maka dipastikan akan banyak sekali halaman duplikat yang terindex, dan tentu akan merugikan blog anda.</span></li> <li style="margin: 0px; padding: 0px; text-align: left;"><span style="font-family: Verdana, sans-serif; font-size: x-small;">Untuk Tulisan berwarna<i> </i><b style="font-style: italic;"><span style="color: lime;">hijau</span> </b>adalah sebuah 'kode' pada robot untuk <b>tidak merayapi</b> halaman <b>Label, search, older post, dll. </b>Halaman itu tidak butuh untuk dirayapi karena akan menghasilkan hasil pencarian blog anda di mesin pencari, dan akan membuat 'bingung' google bot untuk merayapinya.</span></li> <li style="margin: 0px; padding: 0px; text-align: left;"><span style="font-family: Verdana, sans-serif; font-size: x-small;">Untuk tulisan berwarna<span style="color: yellow; font-style: italic; font-weight: bold;"> Kuning </span>adalah sebuah optional saja. Jika anda tidak ingin Google merayapi <i>Halaman Page (ex: blog.blogspot/p/xxx.html)</i> di Blog anda. Jika anda membutuhkan halaman tersebut untuk di index, maka silahkan hapus saja tulisan yang berwarna kuning itu.</span></li> <li style="margin: 0px; padding: 0px; text-align: left;"><span style="font-family: Verdana, sans-serif; font-size: x-small;">Silahkan Ganti tulisan <b style="color: red;">Merah </b>dengan alamat blog anda.</span></li> </ul> <div style="margin: 0px; padding: 0px; text-align: left;"> <span style="font-family: Verdana, sans-serif; font-size: x-small;">5. Jika pengaturan robot.txt telah selesai, silahkan klik <b>SIMPAN.</b></span></div> <div style="margin: 0px; padding: 0px; text-align: left;"> <b><span style="font-family: Verdana, sans-serif; font-size: x-small;"><br /></span></b></div> <div style="margin: 0px; padding: 0px; text-align: left;"> <span style="font-family: Verdana, sans-serif; font-size: x-small;">Itu dia tutorial <i>edit robot.txt untuk Blog Blogspot</i>. Nah, bagaimana dengan pengaturan robot untuk <i>Wordpress atau website</i> lainnya? Caranya sama, namun di dalam sebuah website anda harus membuat sebuah file <b>Robot.txt </b>di dalam hosting anda. Silahkan atur saja sedemikian mungkin robot.txt di website anda. Jika masih merasa kebingungan dalam tutorial ini, silahkan ajukan pertanyaan kepada admin dengan mengisi kolom komentar di bawah ini. </span></div> <div style="margin: 0px; padding: 0px; text-align: left;"> <span style="font-family: Verdana, sans-serif; font-size: x-small;"><br /></span></div> <div style="margin: 0px; padding: 0px; text-align: left;"> <span style="font-family: Verdana, sans-serif; font-size: x-small;">terima kasih telah membaca <b>Cara Edit Robot.txt Blog yang Benar agar SEO Friendly.</b></span></div> </div> <br />

M-S Blog || Cara Edit Robot.txt Blog atau Website yang Benar Agar SEO Friendly,  Robot.txt  adalah komponen penting dalam sebuah website at...

Read more »

Free Download Flat UI Pro Personal License PSD & HTML

<span style="color: #444444; font-family: Verdana, sans-serif;"><b style="background-color: white;"><span style="font-size: large;">M-S Blog </span>|| Free Download Flat UI Pro Personal License PSD & HTML </b></span><br /> <span style="color: #444444; font-family: Verdana, sans-serif;"><b style="background-color: white;"><br /></b></span> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcB_HApx4PRQnNtjAZbSVrIrhINJpmvw2X3oihRMFrkT6MmyY4Cu4UDHzfsJ80dEflDLFonmU1x57X7M3DAhG90pLHWBugLAUaQ0guLGBXhXLIr_-UwVtGzlZFlpc36Sc8usXr69miBAI/s1600/Flat+UI+pro.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Free Download Flat UI Pro Personal License PSD & HTML" border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcB_HApx4PRQnNtjAZbSVrIrhINJpmvw2X3oihRMFrkT6MmyY4Cu4UDHzfsJ80dEflDLFonmU1x57X7M3DAhG90pLHWBugLAUaQ0guLGBXhXLIr_-UwVtGzlZFlpc36Sc8usXr69miBAI/s400/Flat+UI+pro.png" title="" width="400" /></a></div> <span style="color: #444444; font-family: Verdana, sans-serif;"><b style="background-color: white;"><br /></b></span> <span style="background-color: white; color: #444444; font-family: Verdana, sans-serif;"><br /></span> <blockquote class="tr_bq"> <div style="text-align: justify;"> <span style="background-color: white; color: #444444; font-family: Verdana, sans-serif;">Bootstrap, the popular front-end framework which hailed from Twitter, continues to grow as a quick way for developers to get an attractive site up and running in little time. It’s a great starting point, but Bootstrap is often left completely un-customized, and its popularity has left the framework’s distinct design looking default and monotonous.</span></div> <span style="color: #444444; font-family: Verdana, sans-serif;"><div style="background-color: white; text-align: justify;"> To bring some variety to this space, Designmodo, the team behind Dribbbleboard and this slick IMDB concept, is launching Flat UI, a free HTML user interface kit based on Bootstrap. The kit packs PSD files of buttons, inputs, selects, checkboxes, tags, menus, progress bars, sliders and navigation elements, as well as color swatches and SVG glyphs.</div> </span></blockquote> <span style="background-color: white;"><span style="color: #444444; font-family: Verdana, sans-serif;"></span></span><br /> <span style="background-color: white; color: #444444; font-family: Verdana, sans-serif;"><br /></span> <span style="background-color: white; color: #444444; font-family: Verdana, sans-serif;"><b>Bootstrap</b>, kerangka populer front-end yang berasal dari Twitter, terus berkembang sebagai cara cepat bagi pengembang untuk mendapatkan situs Facebook yang menarik dan berjalan dalam waktu sedikit. Ini adalah titik awal yang bagus, tapi Bootstrap sering tersisa benar-benar tidak disesuaikan, dan popularitasnya telah meninggalkan desain yang berbeda kerangka yang mencari default dan monoton.</span><br /> <span style="background-color: white; color: #444444; font-family: Verdana, sans-serif;"><br /></span> <span style="background-color: white; color: #444444; font-family: Verdana, sans-serif;">Untuk membawa beberapa variasi untuk ruang ini, Designmodo, tim di belakang Dribbbleboard dan konsep IMDB licin ini, meluncurkan FLAT UI, gratis kit antarmuka pengguna HTML berdasarkan Bootstrap. Kit bungkus file PSD tombol, input, memilih, checkbox, tag, menu, progress bar, slider dan elemen navigasi, serta swatch warna dan mesin terbang SVG.</span><br /> <span style="background-color: white; color: #444444; font-family: Verdana, sans-serif;"><br /></span> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzWZVvmmgBsdNEB0q47BR1PP-ntZvQW5uisB80ajEkjBVPRLniyTfTf5WyWCKoR9HWuEth16IDwKujqGdPguTKMbY4qutUyEe1NYptagXPO35kXhyphenhyphenvj3nLw5cTvIqJ6JpKtwCHOsgkurI/s1600/flat+UI.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Free Download Flat UI Pro Personal License PSD & HTML" border="0" height="139" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzWZVvmmgBsdNEB0q47BR1PP-ntZvQW5uisB80ajEkjBVPRLniyTfTf5WyWCKoR9HWuEth16IDwKujqGdPguTKMbY4qutUyEe1NYptagXPO35kXhyphenhyphenvj3nLw5cTvIqJ6JpKtwCHOsgkurI/s320/flat+UI.png" title="" width="320" /></a></div> <span style="background-color: white; color: #444444; font-family: Verdana, sans-serif;"><br /></span> <span style="background-color: white; color: #444444; font-family: Verdana, sans-serif;"><br /></span> <blockquote class="tr_bq"> <span style="background-color: white;"><span style="color: #444444; font-family: Verdana, sans-serif;">This time i want to share Flat UI PSD & HTML from Designmodo.com . Its very interesting for web designer and very easy to use especially for prototyping</span> </span></blockquote> <blockquote class="tr_bq"> <span style="background-color: white;"><span style="color: #444444; font-family: Verdana, sans-serif;"><br /></span><span style="color: #444444; font-family: Verdana, sans-serif;">You can see at designmodo.com website , for complete details about <a href="http://designmodo.com/flat/">Flat UI Pro</a></span></span></blockquote> <span style="background-color: white;"><br /></span> <span style="background-color: white; color: #444444; font-family: Verdana, sans-serif;">Kali ini saya ingin berbagi Flat UI PSD & HTML dari Designmodo.com. Yang sangat menarik bagi desainer web dan sangat mudah digunakan terutama untuk prototyping</span><br /> <span style="background-color: white; color: #444444; font-family: Verdana, sans-serif;"><br /></span> <span style="background-color: white; color: #444444; font-family: Verdana, sans-serif;">Anda dapat melihat di website designmodo.com, untuk rincian lengkap tentang <a href="http://designmodo.com/flat/">Flat UI Pro</a></span><br /> <span style="background-color: white;"><br /></span> <span style="background-color: white;"><br /></span> <div style="color: #666a76; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 28px; margin-bottom: 1.777em; orphans: 3; text-align: center; widows: 3;"> <a href="https://www.dropbox.com/s/w0xcf5jn34mt7lg/Flat-UI-PSD-HTML-Personal-License.zip" style="background-color: white; color: #53a1b8; text-decoration: none;" title="Download Flat UI Pro"><img alt="Download" class="aligncenter size-medium wp-image-49" height="117" src="http://ramazeta.com/wp-content/uploads/2013/09/toolbar-download-300x117.png" style="border-bottom-left-radius: 0.201em; border-bottom-right-radius: 0.201em; border-top-left-radius: 0.201em; border-top-right-radius: 0.201em; border: 0px; box-sizing: border-box; display: block; height: auto; margin: 0px auto 1.777em; max-width: 100%;" width="300" /></a></div> <div style="line-height: 28px; margin-bottom: 1.777em; orphans: 3; text-align: right; widows: 3;"> <span style="background-color: #cccccc; color: white; font-family: Verdana, sans-serif; font-size: xx-small;">Sumber : http://ramazeta.com/flat-ui-personal-license-psd-html/</span></div>

M-S Blog || Free Download Flat UI Pro Personal License PSD & HTML  Bootstrap, the popular front-end framework which hailed from ...

Read more »

Breadcrumb SEO Friendly Valid HTML

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQU56CvpLM9b3YawwForSRhamy0RcVUze8GVlmNzU2Mzdo653Kfbs588nYDIlusQYw_02qHS6qjLFOD-jL1Olyz1xbKuBnO4PyXu6putFgzVNDYzJx2ermgU8_3VccQCBsXM3kynezi8I/s1600/2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Breadcrumb SEO Friendly Valid HTML" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQU56CvpLM9b3YawwForSRhamy0RcVUze8GVlmNzU2Mzdo653Kfbs588nYDIlusQYw_02qHS6qjLFOD-jL1Olyz1xbKuBnO4PyXu6putFgzVNDYzJx2ermgU8_3VccQCBsXM3kynezi8I/s1600/2.jpg" title="Breadcrumb SEO Friendly Valid HTML" /></a></div> <span style="background-color: white; font-family: Arial, Geneva, sans-serif; font-size: x-small; margin: 0px; padding: 0px; text-align: justify;"><span style="font-family: Arial, serif; margin: 0px; padding: 0px;"><span style="font-size: 15px; line-height: 24px; margin: 0px; padding: 0px;"><br /></span></span></span> <span style="background-color: white; font-family: Arial, Geneva, sans-serif; font-size: x-small; margin: 0px; padding: 0px; text-align: justify;"><span style="font-family: Arial, serif; margin: 0px; padding: 0px;"><span style="font-size: 15px; line-height: 24px; margin: 0px; padding: 0px;">Kalau dulu kita sudah membahas tentang Cara memasang meta tag seo friendly maka kali ini kita akan membahas tentang </span></span></span><span style="background-color: white; font-family: Arial, serif; font-size: 15px; line-height: 24px; margin: 0px; padding: 0px; text-align: justify;"><b style="margin: 0px; padding: 0px;">Cara Memasang/Membuat Breadcrumb Agar Blog Cepat Terindex Google. </b>Apa itu <b style="margin: 0px; padding: 0px;">breadcrumb</b>? <span style="margin: 0px; padding: 0px;">Breadcrum</span> adalah semacam <span style="margin: 0px; padding: 0px;">Navigasi </span>yang<b style="margin: 0px; padding: 0px;"> </b></span><span style="background-color: white; font-family: Arial, Geneva, sans-serif; font-size: x-small; margin: 0px; padding: 0px; text-align: justify;"><span style="font-family: Arial, serif; margin: 0px; padding: 0px;"><span style="font-size: 15px; line-height: 24px; margin: 0px; padding: 0px;">berguna untuk memudahkan mesin pencari dan </span></span></span><span style="background-color: white; color: #222222; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 17px; margin: 0px; padding: 0px; text-align: justify;">visitor menjelajahi halaman demi halaman pada blog anda sesuai dengan kategori yang ada. <b style="margin: 0px; padding: 0px;">Cara memasang breadcrumb yang seo friendly</b> inipun sangat mudah karena hanya mengharuskan anda menambah dan merubah beberapa kode di template anda.</span><br /> <div style="font-family: Arial, Geneva, sans-serif; font-size: small; margin: 0px; padding: 0px;"> <br /></div> <div style="font-family: Arial, Geneva, sans-serif; margin: 0px; padding: 0px;"> <h4 style="font-size: 18px; margin: 0px 0px 0.5em; padding: 0px;"> Cara Memasang Breadcrumbs SEO Friendly di Blog</h4> <ul style="background-color: white; font-size: small; list-style-image: initial; list-style-position: outside; margin: 1.5em 0px 1.5em 3em; padding: 0px; text-align: justify;"> <li style="margin: 0.5em 0px; padding: 0px;"><span style="background-color: transparent; margin: 0px; padding: 0px;">Pertama login ke </span><a href="http://newbanie.blogspot.com/" style="-webkit-transition: all 0.5s; background-color: transparent; color: #0099cc; margin: 0px; outline: none; padding: 0px; text-decoration: none; transition: all 0.5s;" target="_blank">blogger</a></li> <li style="margin: 0.5em 0px; padding: 0px;"><span style="font-family: Arial, serif; font-size: 15px; line-height: 24px; margin: 0px; padding: 0px;">Di halaman dashboard pilih menu TEMPLATE Lalu Edit HTML</span></li> <li style="margin: 0.5em 0px; padding: 0px;"><span style="font-family: Arial, serif; font-size: 15px; line-height: 24px; margin: 0px; padding: 0px;">Backup terlebih dahulu template anda untuk menghindari hal hal buruk yang mungkin terjadi </span></li> <li style="margin: 0.5em 0px; padding: 0px;"><span style="font-family: Arial, serif; margin: 0px; padding: 0px;"><span style="font-size: 15px; line-height: 24px; margin: 0px; padding: 0px;">Cari dan </span></span><span style="color: red; font-family: Arial, serif; margin: 0px; padding: 0px;"><span style="font-size: 15px; line-height: 24px; margin: 0px; padding: 0px;"> <span style="color: black; margin: 0px; padding: 0px;">Letakan kode dibawah ini diatas kode</span> ]]></b:skin</span></span><span style="font-family: Arial, serif; margin: 0px; padding: 0px;"><span style="font-size: 15px; line-height: 24px; margin: 0px; padding: 0px;"> (untuk mempermudah pencarian gunakan Ctrl+F)</span></span></li> </ul> <blockquote class="tr_bq" style="background-color: white; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 4px; font-style: italic; margin: 1em 20px; padding: 1em; quotes: none; text-align: justify;"> <span style="font-family: georgia; margin: 0px; padding: 0px;"><span style="color: #6fa8dc; font-size: x-small;">.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:90%; line-height: 1.4em; border-bottom:3px double #eee;}</span></span></blockquote> <ul style="background-color: white; font-family: Arial, serif; font-size: 15px; line-height: 24px; list-style-image: initial; list-style-position: outside; margin: 1.5em 0px 1.5em 3em; padding: 0px; text-align: justify;"> <li style="margin: 0.5em 0px; padding: 0px;">Nah setelah selesai cari kode ini:</li> </ul> <blockquote class="tr_bq" style="background-color: white; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 4px; font-style: italic; margin: 1em 20px; padding: 1em; quotes: none; text-align: justify;"> <span style="font-family: georgia; margin: 0px; padding: 0px;"><span style="color: #6fa8dc; font-size: x-small;"><b:includable id='main' var='top'></span></span></blockquote> <ul style="background-color: white; font-family: Arial, serif; font-size: 15px; line-height: 24px; list-style-image: initial; list-style-position: outside; margin: 1.5em 0px 1.5em 3em; padding: 0px; text-align: justify;"> <li style="margin: 0.5em 0px; padding: 0px;"> Lalu ganti kode tersebut dengan kode dibawah ini:</li> </ul> <blockquote class="tr_bq" style="background-color: #f8f8f8; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 4px; font-size: small; font-style: italic; margin: 1.5em 2em; padding: 1em; quotes: none;"> <span style="color: #6fa8dc;"><b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'><br style="margin: 0px; padding: 0px;" /><b:if cond='data:blog.pageType == &quot;static_page&quot;'><br style="margin: 0px; padding: 0px;" /><div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div><br style="margin: 0px; padding: 0px;" /><b:else/><br style="margin: 0px; padding: 0px;" /><b:if cond='data:blog.pageType == &quot;item&quot;'><br style="margin: 0px; padding: 0px;" /><!-- breadcrumb for the post page --><br style="margin: 0px; padding: 0px;" /><b:loop values='data:posts' var='post'><br style="margin: 0px; padding: 0px;" /><b:if cond='data:post.labels'><br style="margin: 0px; padding: 0px;" /><div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'><br style="margin: 0px; padding: 0px;" /><span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span><br style="margin: 0px; padding: 0px;" /><b:loop values='data:post.labels' var='label'><br style="margin: 0px; padding: 0px;" />&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span><br style="margin: 0px; padding: 0px;" /></b:loop><br style="margin: 0px; padding: 0px;" />&#187; <span><data:post.title/></span><br style="margin: 0px; padding: 0px;" /></div><br style="margin: 0px; padding: 0px;" /><b:else/><br style="margin: 0px; padding: 0px;" /><div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div><br style="margin: 0px; padding: 0px;" /></b:if><br style="margin: 0px; padding: 0px;" /></b:loop><br style="margin: 0px; padding: 0px;" /><b:else/><br style="margin: 0px; padding: 0px;" /><b:if cond='data:blog.pageType == &quot;archive&quot;'><br style="margin: 0px; padding: 0px;" /><!-- breadcrumb for the label archive page and search pages.. --><br style="margin: 0px; padding: 0px;" /><div class='breadcrumbs'><br style="margin: 0px; padding: 0px;" /><span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span><br style="margin: 0px; padding: 0px;" /></div><br style="margin: 0px; padding: 0px;" /><b:else/><br style="margin: 0px; padding: 0px;" /><b:if cond='data:blog.pageType == &quot;index&quot;'><br style="margin: 0px; padding: 0px;" /><div class='breadcrumbs'><br style="margin: 0px; padding: 0px;" /><b:if cond='data:blog.pageName == &quot;&quot;'><br style="margin: 0px; padding: 0px;" /><span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span><br style="margin: 0px; padding: 0px;" /><b:else/><br style="margin: 0px; padding: 0px;" /><span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span><br style="margin: 0px; padding: 0px;" /></b:if><br style="margin: 0px; padding: 0px;" /></div><br style="margin: 0px; padding: 0px;" /></b:if><br style="margin: 0px; padding: 0px;" /></b:if><br style="margin: 0px; padding: 0px;" /></b:if><br style="margin: 0px; padding: 0px;" /></b:if><br style="margin: 0px; padding: 0px;" /></b:if><br style="margin: 0px; padding: 0px;" /></b:includable><br style="margin: 0px; padding: 0px;" /><b:includable id='main' var='top'><br style="margin: 0px; padding: 0px;" /><b:include data='posts' name='breadcrumb'/></span></blockquote> <br style="background-color: white; font-family: Arial, serif; font-size: 15px; line-height: 24px; margin: 0px; padding: 0px; text-align: justify;" /><ul style="background-color: white; font-family: Arial, serif; font-size: 15px; line-height: 24px; list-style-image: initial; list-style-position: outside; margin: 1.5em 0px 1.5em 3em; padding: 0px; text-align: justify;"> <li style="margin: 0.5em 0px; padding: 0px;">Jika sudah selesai maka langsung Simpan template anda.</li> </ul> </div> <div style="font-family: Arial, Geneva, sans-serif; font-size: small; margin: 0px; padding: 0px;"> <span style="background-color: white; font-family: Arial, serif; font-size: 15px; line-height: 24px; margin: 0px; padding: 0px; text-align: justify;"><u><b>Catatan : OPSIONAL</b></u></span></div> <div style="font-family: Arial, Geneva, sans-serif; font-size: small; margin: 0px; padding: 0px;"> <span style="background-color: white; font-family: Arial, serif; font-size: 15px; line-height: 24px; margin: 0px; padding: 0px; text-align: justify;"><br /></span></div> <div style="font-family: Arial, Geneva, sans-serif; font-size: small; margin: 0px; padding: 0px;"> <span style="background-color: white; font-family: Arial, serif; font-size: 15px; line-height: 24px; margin: 0px; padding: 0px; text-align: justify;">Apabila sobat sudah memiliki atau memasang <b style="margin: 0px; padding: 0px;">breadcrumb</b> di blognya silakan cari kode</span></div> <blockquote class="tr_bq" style="background-color: #f8f8f8; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 4px; font-family: Arial, Geneva, sans-serif; font-size: small; font-style: italic; margin: 1.5em 2em; padding: 1em; quotes: none;"> <span style="margin: 0px; padding: 0px;"><span style="color: #6fa8dc;"><span style="font-family: Arial, serif; margin: 0px; padding: 0px;"><span style="font-size: 15px; line-height: 24px; margin: 0px; padding: 0px;"><div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'> <span typeof='v:Breadcrumb'> <a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a> </span> <b:loop values='data:post.labels' var='label'> &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span></span></span><span style="background-color: white; font-family: Arial, serif; font-size: 15px; line-height: 24px; margin: 0px; padding: 0px; text-align: justify;"> </span></span></span></blockquote> <br style="font-family: Arial, Geneva, sans-serif; font-size: small; margin: 0px; padding: 0px;" /><span style="background-color: white; font-family: Arial, Geneva, sans-serif; font-size: x-small;">Dan ganti dengan</span><br style="font-family: Arial, Geneva, sans-serif; font-size: small; margin: 0px; padding: 0px;" /><br /> <blockquote class="tr_bq" style="background-color: #f8f8f8; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 4px; font-family: Arial, Geneva, sans-serif; font-size: small; font-style: italic; margin: 1.5em 2em; padding: 1em; quotes: none;"> <span style="margin: 0px; padding: 0px;"><span style="color: #3d85c6;"><div class='breadcrumbs'><br style="margin: 0px; padding: 0px;" /><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><br style="margin: 0px; padding: 0px;" /><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a><br style="margin: 0px; padding: 0px;" /></span><br style="margin: 0px; padding: 0px;" /><b:loop values='data:post.labels' var='label'> &#187;<br style="margin: 0px; padding: 0px;" /><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span> </span></span></blockquote> <br style="font-family: Arial, Geneva, sans-serif; font-size: small; margin: 0px; padding: 0px;" /><br style="font-family: Arial, Geneva, sans-serif; font-size: small; margin: 0px; padding: 0px;" /><span style="background-color: white; font-family: Arial, Geneva, sans-serif; font-size: x-small;">Selamat mencoba :))</span><span style="font-family: Arial, Geneva, sans-serif; font-size: x-small; margin: 0px; padding: 0px;"><br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" />Sumber Dari: <a href="http://newbanie.blogspot.com/2014/01/memasang-breadcrumb-seo-valid-html-blog-cepat-terindex-google.html#ixzz2pWDoAlh0" style="-webkit-transition: all 0.5s; color: #003399; margin: 0px; outline: none; padding: 0px; text-decoration: none; transition: all 0.5s;">http://newbanie.blogspot.com/2014/01/memasang-breadcrumb-seo-valid-html-blog-cepat-terindex-google.html#ixzz2pWDoAlh0</a></span>

Kalau dulu kita sudah membahas tentang Cara memasang meta tag seo friendly maka kali ini kita akan membahas tentang  Cara Memasang/Membua...

Read more »