March 2014

Cara Membuat Navigasi Menu Full Color di Blog

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiw2-sP9hiR4DHt6_i434uSbeIQPcMjhhOklNOB040WdQJnfNT_nfz85HSt4ksiA7fVIypi951bpxLXBACf6ohALmZxAsB8o-s19lMUc0a61-qn80upVgeoIBhZg3qzBpwfxjzrUszFZQ/s1600/Menu+Full+Color.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Navigasi Menu Full Color di Blog" border="0" height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiw2-sP9hiR4DHt6_i434uSbeIQPcMjhhOklNOB040WdQJnfNT_nfz85HSt4ksiA7fVIypi951bpxLXBACf6ohALmZxAsB8o-s19lMUc0a61-qn80upVgeoIBhZg3qzBpwfxjzrUszFZQ/s1600/Menu+Full+Color.jpg" title="Menu Navigasi Blog" width="640" /></a></div>
<div class="separator" style="clear: both; color: #333333; line-height: 17.600000381469727px;">
<span style="background-color: white;"><span style="font-family: Verdana, sans-serif;"><b><br /></b></span></span></div>
<div class="separator" style="clear: both; color: #333333; line-height: 17.600000381469727px;">
<span style="background-color: white;"><span style="font-family: Verdana, sans-serif;"><b>M-S Blog || Cara Mudah Membuat Navigasi Menu Full Color</b>, sangat menarik jika blog sobat di buat dengan navigasi menu seperti gambar di atas , tentu juga dengan blog sobat yang menarik akan membuat pengunjung betah dan merasa enak di pandang oleh pengunjung blog sobat . Dengan menu yang Full Color dan dapat di setting sesuai keinginan warna yang sobat mau . Sangat mudah memasang Navigasi menu Full Color ini , cuma  menambahkan class yang berisi background untuk setiap warnanya pada link menu . </span></span></div>
<div class="separator" style="clear: both; color: #333333; line-height: 17.600000381469727px;">
<span style="background-color: white;"><span style="font-family: Verdana, sans-serif;"><br /></span></span></div>
<div class="separator" style="clear: both; color: #333333; line-height: 17.600000381469727px;">
<span style="background-color: white;"><span style="font-family: Verdana, sans-serif;">Berikut Tutorial Memasangnya :</span></span></div>
<div class="separator" style="clear: both; color: #333333; line-height: 17.600000381469727px;">
<span style="background-color: white;"><span style="font-family: Verdana, sans-serif;"><br /></span></span></div>
<div class="separator" style="clear: both; color: #333333; line-height: 17.600000381469727px;">
<span style="background-color: white;"><span style="font-family: Verdana, sans-serif;">1. Masuk Blogger</span></span></div>
<div class="separator" style="clear: both; color: #333333; line-height: 17.600000381469727px;">
<span style="background-color: white;"><span style="font-family: Verdana, sans-serif;">2. Dashboard >Pilih Template > Edit HTML</span></span></div>
<div class="separator" style="clear: both; color: #333333; line-height: 17.600000381469727px;">
<span style="background-color: white;"><span style="font-family: Verdana, sans-serif;">3. Cari code<b> </b><span style="color: red;"><b>]]></b:skin></b> </span>supaya mudah , Pake CTRL+F aja</span></span></div>
<div class="separator" style="clear: both; color: #333333; line-height: 17.600000381469727px;">
<span style="background-color: white;"><span style="font-family: Verdana, sans-serif;">4. Masukan Code CSS tepat di atas<span style="color: red;"><b> </b></span><span style="color: red;"><b>]]></b:skin></b></span></span></span></div>
<div class="separator" style="clear: both; color: #333333; line-height: 17.600000381469727px;">
<span style="background-color: white; color: red;"><b><span style="font-family: Verdana, sans-serif;"><br /></span></b></span></div>
<div class="separator" style="clear: both; color: #333333; line-height: 17.600000381469727px;">
</div>
<div style="border: 1px solid rgb(121, 66, 10); color: #333333; height: 300px; line-height: 17.600000381469727px; overflow: auto; padding: 10px; width: 450px;">
<div style="margin: 0cm 0cm 13.5pt;">
<div class="MsoNormal" style="line-height: normal; margin-bottom: 0cm;">
<div class="MsoNormal">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">navmenu { background: #111; border-bottom: 5px solid #0091d6; position: relative; height:35px; margin: 0 auto; text-transform: uppercase; z-index: 1; }<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">ul.navfullcolor { list-style: none; padding: 0; font: 14px Arial; font-weight: bold; width:auto; line-height: 15px; margin: auto; }<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">ul.navfullcolor li { float: left; position: relative; margin: 0px 1px 0px 0px; }<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">ul.navfullcolor li a, ul.navfullcolor li a:link { color: #fff; text-decoration: none; display: block; padding: 10px 26px; transition: all 0.2s ease; }<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">ul.navfullcolor li a:hover { color: #fff; transition: all 1s ease; }<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">ul.navfullcolor li ul { display: none; top: 35px; border-top: 5px solid #FF8000; }<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">ul.navfullcolor li:hover ul { position: absolute; display: block; padding: 0; list-style: none; }<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">ul.navfullcolor li ul li { float: none; background: #282321; border-bottom: 1px solid #191614; border-top: 1px solid #3a3230; width:210px; }<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">ul.navfullcolor li ul li a, ul.navfullcolor li ul li a:link { color: #aaa; display: block; }<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">ul.navfullcolor li ul li a:hover { background: #FF8000; }<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">.green{background-color:#01A451 !important;} .green:hover{background-color:#52e052 !important;}<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">.yellow{background-color:#FBC700 !important;} .yellow:hover{background-color:#FFE500 !important;}<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">.red{background-color:#D52100 !important;} .red:hover{background-color:#ff0000 !important;}<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">.purple{background-color:#660099 !important;} .purple:hover{background-color:#D580FE !important;}<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">.blue{background-color:#0091d6 !important;} .blue:hover{background-color:#80C8FE !important;</span></span></div>
</div>
</div>
</div>
<span style="background-color: white;"><span style="font-family: Verdana, sans-serif;"><b style="border: 0px; color: #555555; line-height: 18.031999588012695px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"></b><br style="color: #333333; line-height: 17.600000381469727px;" /></span></span>
<div class="separator" style="clear: both; color: #333333; line-height: 17.600000381469727px;">
<span style="background-color: white;"><span style="font-family: Verdana, sans-serif;"><br /></span></span></div>
<div class="separator" style="clear: both; color: #333333; line-height: 17.600000381469727px;">
<span style="background-color: white;"><span style="font-family: Verdana, sans-serif;">5. Selanjutnya letakan HTML ke dalam template,</span></span></div>
<div class="separator" style="clear: both; color: #333333; line-height: 17.600000381469727px;">
<span style="background-color: white;"><span style="font-family: Verdana, sans-serif;">    Pilih  Tata Letak > Tambah Widget ( di Atas Pos ) pilih > HTML/Javascript.<br />6. Copy kode berikut ini, lalu paste ke dalam widget HTML/Javascript</span></span></div>
<div class="separator" style="clear: both; color: #333333; line-height: 17.600000381469727px;">
<span style="background-color: white;"><span style="font-family: Verdana, sans-serif;"><br /></span></span></div>
<div class="separator" style="clear: both; color: #333333; line-height: 17.600000381469727px;">
</div>
<div style="border: 1px solid rgb(121, 66, 10); color: #333333; height: 300px; line-height: 17.600000381469727px; overflow: auto; padding: 10px; width: 450px;">
<div style="margin: 0cm 0cm 13.5pt;">
<div class="MsoNormal" style="line-height: normal; margin-bottom: 0cm;">
<div class="MsoNormal">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><div class='navmenu'><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><ul class='navfullcolor'><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">    <li><a expr:href='data:blog.homepageUrl' class='blue'>Home</a></li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">    <li><a href='http://ilmuane11.blogspot.com' class='red'>Menu 1</a><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        <ul><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        <li><a href='http://ilmuane11.blogspot.com'>Sub Menu 1</a></li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        <li><a href='http://ilmuane11.blogspot.com'>Sub Menu 2</a></li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        <li><a href='http://ilmuane11.blogspot.com'>Sub Menu 3</a></li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        <li><a href='http://ilmuane11.blogspot.com'>Sub Menu 4</a></li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        <li><a href='http://ilmuane11.blogspot.com'>Sub Menu 5</a></li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        </ul><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">    </li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">    <li><a href='http://ilmuane11.blogspot.com' class='yellow'>Menu 2</a><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        <ul><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        <li><a href='http://ilmuane11.blogspot.com'>Sub Menu 1</a></li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        <li><a href='http://ilmuane11.blogspot.com'>Sub Menu 2</a></li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        <li><a href='http://ilmuane11.blogspot.com'>Sub Menu 3</a></li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        <li><a href='http://ilmuane11.blogspot.com'>Sub Menu 4</a></li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        </ul><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">    </li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">    <li><a href='http://ilmuane11.blogspot.com' class='green'>Menu 3</a><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        <ul><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        <li><a href='http://ilmuane11.blogspot.com>Sub Menu 1</a></li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        <li><a href='http://ilmuane11.blogspot.com'>Sub Menu 2</a></li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        <li><a href='http://ilmuane11.blogspot.com'>Sub Menu 3</a></li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        </ul><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">    </li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">    <li><a href='http://ilmuane11.blogspot.com' class='purple'>Menu 4</a><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        <ul><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        <li><a href='http://ilmuane11.blogspot.com'>Sub Menu 1</a></li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        <li><a href='http://ilmuane11.blogspot.com'>Sub Menu 2</a></li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        </ul><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">    </li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">    <li><a href='http://ilmuane11.blogspot.com' class='red'>Menu 5</a></li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">    <li><a href='http://ilmuane11.blogspot.com' class='yellow'>Menu 6</a></li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">    <li><a href='http://ilmuane11.blogspot.com' class='green'>Menu 7</a></li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;"></ul><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;"></div></span></span></div>
</div>
</div>
</div>
<span style="background-color: white;"><span style="font-family: Verdana, sans-serif;"><br style="color: #333333; line-height: 17.600000381469727px;" /><b style="border: 0px; color: #555555; line-height: 18.031999588012695px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"></b><span style="color: #333333; line-height: 17.600000381469727px;"></span></span></span><br />
<div class="separator" style="clear: both; color: #333333; line-height: 17.600000381469727px;">
<span style="background-color: white;"><span style="font-family: Verdana, sans-serif;">7. Klik Simpan > Selseai tinggal Review deh . jangan kaget  kalau sangat keren :D</span></span></div>
<div class="separator" style="clear: both; color: #333333; line-height: 17.600000381469727px;">
<span style="background-color: white;"><span style="font-family: Verdana, sans-serif;"><br /></span></span></div>
<div class="separator" style="clear: both; color: #333333; line-height: 17.600000381469727px;">
<span style="background-color: white;"><span style="font-family: Verdana, sans-serif;">Selsai , sekian tutorial blog dari saya , semoga bermanfaat :D</span></span></div>
</div>

M-S Blog || Cara Mudah Membuat Navigasi Menu Full Color, sangat menarik jika blog sobat di buat dengan navigasi menu seperti gambar di atas , tentu j…

Mar 27, 2014 +

Free Download Game Counter Strike : Condition Zero

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPB_Zpxsyj7nyM2OcOsFsF2Cr6SEhnKo3ak0e0bH1-qykxWD8IP-9zr5s2IgMC83ZTPMm7dPZbtj1L_EgO57Xy6Xi1LWiZ3oOwlt1aostXTkWiAzI1J9tAOir3JA0dwmaBESREnjL0bKQ/s1600/index.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Free Download Game Counter Strike : Condition Zero" border="0" height="479" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPB_Zpxsyj7nyM2OcOsFsF2Cr6SEhnKo3ak0e0bH1-qykxWD8IP-9zr5s2IgMC83ZTPMm7dPZbtj1L_EgO57Xy6Xi1LWiZ3oOwlt1aostXTkWiAzI1J9tAOir3JA0dwmaBESREnjL0bKQ/s1600/index.jpg" title="Free Download Game Counter Strike : Condition Zero" width="640" /></a></div>
<div style="background-color: white; color: #444444; font-family: Arial, serif; line-height: 18.200000762939453px; text-align: center;">
<span style="font-family: inherit;"><b><br /></b></span></div>
<div style="background-color: white; color: #444444; font-family: Arial, serif; line-height: 18.200000762939453px; text-align: center;">
<span style="font-family: inherit;"><b><br /></b></span></div>
<div style="background-color: white; color: #444444; font-family: Arial, serif; line-height: 18.200000762939453px; text-align: center;">
<span style="font-family: inherit;"><b>System Requirements:</b></span></div>
<br style="background-color: white; color: #444444; font-family: Arial, serif; line-height: 18.200000762939453px;" />
<div style="background-color: white; color: #444444; font-family: Arial, serif; line-height: 18.200000762939453px; text-align: center;">
<span style="font-family: inherit;">OS : Windows XP/Vista/7/8</span></div>
<br style="background-color: white; color: #444444; font-family: Arial, serif; line-height: 18.200000762939453px;" />
<div style="background-color: white; color: #444444; font-family: Arial, serif; line-height: 18.200000762939453px; text-align: center;">
<span style="font-family: inherit;">RAM : 256 MB</span></div>
<br style="background-color: white; color: #444444; font-family: Arial, serif; line-height: 18.200000762939453px;" />
<div style="background-color: white; color: #444444; font-family: Arial, serif; line-height: 18.200000762939453px; text-align: center;">
<span style="font-family: inherit;">Graphic Card : 64 MB</span></div>
<br style="background-color: white; color: #444444; font-family: Arial, serif; line-height: 18.200000762939453px;" />
<div style="background-color: white; color: #444444; font-family: Arial, serif; line-height: 18.200000762939453px; text-align: center;">
<span style="font-family: inherit;"><br /></span></div>
<br style="background-color: white; color: #444444; font-family: Arial, serif; line-height: 18.200000762939453px;" />
<div style="background-color: white; color: #444444; font-family: Arial, serif; line-height: 18.200000762939453px;">
<span style="font-family: inherit;"><br /></span></div>
<br style="background-color: white; color: #444444; font-family: Arial, serif; line-height: 18.200000762939453px;" />
<div style="background-color: white; color: #444444; font-family: Arial, serif; line-height: 18.200000762939453px;">
<span style="font-family: inherit;"><b>Cara Install :</b></span></div>
<br style="background-color: white; color: #444444; font-family: Arial, serif; line-height: 18.200000762939453px;" />
<div style="background-color: white; color: #444444; font-family: Arial, serif; line-height: 18.200000762939453px;">
<span style="font-family: inherit;">1. Download kemudian ekstrak filenya.</span></div>
<br style="background-color: white; color: #444444; font-family: Arial, serif; line-height: 18.200000762939453px;" />
<div style="background-color: white; color: #444444; font-family: Arial, serif; line-height: 18.200000762939453px;">
<span style="font-family: inherit;">2. Kemudian buka CSCZSetupII.exe, klik next</span></div>
<br style="background-color: white; color: #444444; font-family: Arial, serif; line-height: 18.200000762939453px;" />
<div style="background-color: white; color: #444444; font-family: Arial, serif; line-height: 18.200000762939453px;">
<span style="font-family: inherit;">3. Setelah itu centang kotak, lalu klik <span class="IL_AD" id="IL_AD6">next</span>, next dan next</span></div>
<br style="background-color: white; color: #444444; font-family: Arial, serif; line-height: 18.200000762939453px;" />
<div style="background-color: white; color: #444444; font-family: Arial, serif; line-height: 18.200000762939453px;">
</div>
<div style="background-color: white; color: #444444; font-family: Arial, serif; line-height: 18.200000762939453px;">
<span style="font-family: inherit;">4. Jika sudah klik ok dan tunggu prosesnya sampai selesai</span></div>
<br style="background-color: white; color: #444444; font-family: Arial, serif; line-height: 18.200000762939453px;" />
<div style="background-color: white; color: #444444; font-family: Arial, serif; line-height: 18.200000762939453px;">
<span style="font-family: inherit;">5. Mainkan gamenya dan nanti akan disuruh memasukkan serial number,<span class="IL_AD" id="IL_AD3">pakai saja serial number di bawah ini :</span></span></div>
<br style="background-color: white; color: #444444; font-family: Arial, serif; line-height: 18.200000762939453px;" />
<div style="background-color: white; color: #444444; font-family: Arial, serif; line-height: 18.200000762939453px;">
<span style="font-family: inherit;">          <b>58V2E-CCKCJ-B8VSE-MEW9Y-ACB2K</b></span></div>
<br style="background-color: white; color: #444444; font-family: Arial, serif; line-height: 18.200000762939453px;" />
<div style="background-color: white; color: #444444; font-family: Arial, serif; line-height: 18.200000762939453px;">
<span style="font-family: inherit;">6. Enjoy</span></div>
<div style="background-color: white; color: #444444; font-family: Arial, serif; line-height: 18.200000762939453px;">
<br /><span style="font-family: inherit;"><span style="color: red;">Perhatian!!</span> tombol next mempunyai tanda >, sedangkan tombol oke mempunyai tanda |  .</span></div>
<div style="background-color: white; color: #444444; font-family: Arial, serif; line-height: 18.200000762939453px;">
<span style="font-family: inherit;"><br /></span></div>
<div style="background-color: white; color: #444444; font-family: Arial, serif; line-height: 18.200000762939453px;">
<span style="font-family: inherit;">Screenshot :</span></div>
<div style="background-color: white; color: #444444; font-family: Arial, serif; line-height: 18.200000762939453px;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div style="background-color: white; color: #444444; font-family: Arial, serif; line-height: 18.200000762939453px;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div style="background-color: white; color: #444444; font-family: Arial, serif; line-height: 18.200000762939453px; text-align: center;">
<span style="width: auto;"><img alt="Download Counter Strike : Condition Zero" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinYJrZ1LAI3e66yGWvawDWwbgq1XuoPYlBp_ZQwfFsKXAcjP4otzGMGNNVJP3DKZdLQW1Idowem-3Al8JwX3ugP3-P-joqpUDhyphenhyphenxH195lbC3xafD4bWmt23zItsjd2FdDhHXmZm3zjS-_i/s400/counter-strike-condition-zero.1524998.jpg" style="max-width: 100%; width: auto;" title="Download Counter Strike : Condition Zero" /></span><br /><br />Langsung saja download di bawah ini :<br /><br /><a href="http://files.indowebster.com/download/files/Counter_Strike_CZ_2"><b><span style="font-size: large;">Download Counter Strike : Condition Zero</span></b></a></div>
</div>

System Requirements: OS : Windows XP/Vista/7/8 RAM : 256 MB Graphic Card : 64 MB Cara Install : 1. Download kemudian ekstrak filenya. 2. Kemudian buk…

Mar 08, 2014 +

Membuat efek kertas terselip dengan CSS

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlPtj2QeIUWihNc7A4wfFHVOozNPw_RiqX_NFHgtQzm9ZKBwUFVAkkq-n40GOIzVkP2Va5h2r5hTb5udjYxN_3Dvp7QJqv53JAOOSHOTZEY1aLZVaTY2J3tLTeBKOc3g45dGhakXkxszNP/s1600/thumb-efek-kertas-terselip.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlPtj2QeIUWihNc7A4wfFHVOozNPw_RiqX_NFHgtQzm9ZKBwUFVAkkq-n40GOIzVkP2Va5h2r5hTb5udjYxN_3Dvp7QJqv53JAOOSHOTZEY1aLZVaTY2J3tLTeBKOc3g45dGhakXkxszNP/s1600/thumb-efek-kertas-terselip.jpg" width="200" /></a></div>
<div style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; line-height: 25px; margin-bottom: 20px; padding: 0px;">
<br /></div>
<div style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; line-height: 25px; margin-bottom: 20px; padding: 0px;">
Efek yang akan kita buat pada tutorial ini adalah efek kertas yang terselip. Efek ini juga merupakan contoh lain dari penerapan Pseudo-Element Before dan After yang sebelumnya telah anda pelajari dalam tutorial berjudul <span style="color: #6aa84f;">“Mengenal lebih dalam CSS Pseudo Element”</span> dan beberapa kasus yang pernah dibahas, seperti pada tutorial <span style="color: #6aa84f;">“Membuat CSS Tooltip”</span></div>
<div style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; line-height: 25px; margin-bottom: 20px; padding: 0px;">
Kembali ke pembahasan utama, kali ini kita akan membuat sebuah efek kertas yang terselip ke dalam lubang. Berikut ini adalah screenshot dari efek yang kita bicarakan jika anda masih belum memiliki gambarannya.</div>
<div class="post-image" style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; margin: 20px 0px; padding: 20px; text-align: center;">
<img alt="Efek Kertas Terselip Preview" src="https://lh3.googleusercontent.com/-jPUTJyZxX6Y/UdDNZAQmCaI/AAAAAAAACIw/HHLEfSPtnXY/s800/01-07-2013%25207-28-40.png" style="margin: 0px; max-width: 100%; padding: 0px;" /></div>
<div class="post-image" style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; margin: 20px 0px; padding: 20px; text-align: center;">
<a class="button" href="https://dl.dropboxusercontent.com/u/26808427/cdn/ariona/demo/tucked-paper/index.html" style="background-color: #32beff; color: black; display: inline-block; margin: 0px; padding: 10px 20px; text-decoration: none;" target="_blank" title="Demonstrasi Efek Kertas Terselip">Demonstrasi</a></div>
<h2 style="background-color: white; font-family: 'Crete Round', Arial; font-weight: normal; margin: 0px 0px 20px; padding: 0px;">
<span style="font-size: small;">Markup HTML</span></h2>
<div style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; line-height: 25px; margin-bottom: 20px; padding: 0px;">
Untuk markup HTMLnya sederhana saja, kita hanya membutuhkan sebuah div sebagai objek kertas, saya beri kelas kertas pada div tersebut. Saya juga tambahkan sedikit random/dummy text pada kertas tersebut.</div>
<pre class="prettyprint" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 2px; background-color: #fffcef; border-bottom-color: rgb(255, 225, 109); border-bottom-width: 1px; border-style: solid none; border-top-color: rgb(255, 225, 109); border-top-width: 1px; box-shadow: none; font-family: consolas, monaco; margin: 20px -20px; overflow: auto; padding: 20px; text-shadow: white 0px 1px 1px;"><span class="tag" style="color: #195f91; margin: 0px; padding: 0px;"><div</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;"> </span><span class="atn" style="color: #cb4b16; margin: 0px; padding: 0px;">class</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">=</span><span class="atv" style="color: #268bd2; margin: 0px; padding: 0px;">"kertas"</span><span class="tag" style="color: #195f91; margin: 0px; padding: 0px;">></span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
 </span><span class="tag" style="color: #195f91; margin: 0px; padding: 0px;"><h1></span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">Lorem Ipsum Dolor Sit Amet</span><span class="tag" style="color: #195f91; margin: 0px; padding: 0px;"></h1></span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
 </span><span class="tag" style="color: #195f91; margin: 0px; padding: 0px;"><p></span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut at consectetur officia et accusamus inventore dolor cupiditate tempore fuga alias aliquam quo dolorum voluptatem tenetur ipsum corporis commodi vitae! Iusto!
 </span><span class="tag" style="color: #195f91; margin: 0px; padding: 0px;"></p></span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
</span><span class="tag" style="color: #195f91; margin: 0px; padding: 0px;"></div></span></pre>
<h2 style="background-color: white; font-family: 'Crete Round', Arial; font-weight: normal; margin: 0px 0px 20px; padding: 0px;">
<span style="font-size: small;">CSS</span></h2>
<div style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; line-height: 25px; margin-bottom: 20px; padding: 0px;">
Pertama-tama kita beri style terlebih dahulu kertas yang akan kita selipkan nantinya beserta background dari bodynya.</div>
<pre class="prettyprint" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 2px; background-color: #fffcef; border-bottom-color: rgb(255, 225, 109); border-bottom-width: 1px; border-style: solid none; border-top-color: rgb(255, 225, 109); border-top-width: 1px; box-shadow: none; font-family: consolas, monaco; margin: 20px -20px; overflow: auto; padding: 20px; text-shadow: white 0px 1px 1px;"><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">body</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">{</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
 background</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">:</span><span class="com" style="color: #93a1a1; margin: 0px; padding: 0px;">#d8d8d8;</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">}</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">.</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">kertas</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">{</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
 background</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">:</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">white</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">;</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
 width</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">:</span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">400px</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">;</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
 margin</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">:</span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">20px</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;"> </span><span class="kwd" style="color: #195f91; margin: 0px; padding: 0px;">auto</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">;</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
 padding</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">:</span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">20px</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">;</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
 position</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">:</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">relative</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">;</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
 font</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">-</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">family</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">:</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">cambria</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">,</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">serif</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">;</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
 box</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">-</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">shadow</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">:</span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">0</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;"> </span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">1px</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;"> </span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">10px</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;"> rgba</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">(</span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">0</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">,</span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">0</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">,</span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">0</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">,.</span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">3</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">);</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">}</span></pre>
<div style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; line-height: 25px; margin-bottom: 20px; padding: 0px;">
Selanjutnya adalah efek utama yang akan kita buat, Tekniknya sangat sederhana, kita buat tambahkan pseudo element pada class kertas, yang akan menjadi efek lubang untuk menyelipkan kertas.</div>
<pre class="prettyprint" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 2px; background-color: #fffcef; border-bottom-color: rgb(255, 225, 109); border-bottom-width: 1px; border-style: solid none; border-top-color: rgb(255, 225, 109); border-top-width: 1px; box-shadow: none; font-family: consolas, monaco; margin: 20px -20px; overflow: auto; padding: 20px; text-shadow: white 0px 1px 1px;"><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">.</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">kertas</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">::</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">before</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">,</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;"> </span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">.</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">kertas</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">::</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">after</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">{</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
 background</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">:</span><span class="com" style="color: #93a1a1; margin: 0px; padding: 0px;">#d8d8d8;</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
 content</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">:</span><span class="str" style="color: #268bd2; margin: 0px; padding: 0px;">""</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">;</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
 width</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">:</span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">100px</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">;</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
 height</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">:</span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">50px</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">;</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
 position</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">:</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">absolute</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">;</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
 top</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">:-</span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">25px</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">;</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
 box</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">-</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">shadow</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">:</span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">0</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;"> </span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">5px</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;"> </span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">10px</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;"> </span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">-</span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">7px</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;"> rgba</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">(</span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">0</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">,</span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">0</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">,</span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">0</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">,.</span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">3</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">);</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">}</span></pre>
<div style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; line-height: 25px; margin-bottom: 20px; padding: 0px;">
style tersebut akan membuat sebuah box yang akan kita gunakan untuk menutupi ujung-ujung kertas dan pada style selanjutnya kita akan mengatur rotasi dari tiap ujung.</div>
<pre class="prettyprint" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 2px; background-color: #fffcef; border-bottom-color: rgb(255, 225, 109); border-bottom-width: 1px; border-style: solid none; border-top-color: rgb(255, 225, 109); border-top-width: 1px; box-shadow: none; font-family: consolas, monaco; margin: 20px -20px; overflow: auto; padding: 20px; text-shadow: white 0px 1px 1px;"><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">.</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">kertas</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">::</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">before</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">{</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
 left</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">:-</span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">50px</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">;</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
 </span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">-</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">webkit</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">-</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">transform</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">:</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;"> rotate</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">(-</span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">45deg</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">);</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
 </span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">-</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">moz</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">-</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">transform</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">:</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;"> rotate</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">(-</span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">45deg</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">);</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
 </span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">-</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">ms</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">-</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">transform</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">:</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;"> rotate</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">(-</span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">45deg</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">);</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
 </span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">-</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">o</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">-</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">transform</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">:</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;"> rotate</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">(-</span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">45deg</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">);</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
 transform</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">:</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;"> rotate</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">(-</span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">45deg</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">);</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">}</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">.</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">kertas</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">::</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">after</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">{</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
 right</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">:-</span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">50px</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">;</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
 </span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">-</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">webkit</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">-</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">transform</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">:</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;"> rotate</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">(</span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">45deg</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">);</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
 </span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">-</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">moz</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">-</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">transform</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">:</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;"> rotate</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">(</span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">45deg</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">);</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
 </span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">-</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">ms</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">-</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">transform</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">:</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;"> rotate</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">(</span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">45deg</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">);</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
 </span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">-</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">o</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">-</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">transform</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">:</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;"> rotate</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">(</span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">45deg</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">);</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
 transform</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">:</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;"> rotate</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">(</span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">45deg</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">);</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">}</span></pre>
<div style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; line-height: 25px; margin-bottom: 20px; padding: 0px;">
Silahkan simpan pekerjaan anda dan perhatikan apa yang ditampilkan dalam browser.</div>
<h2 style="background-color: white; font-family: 'Crete Round', Arial; font-weight: normal; margin: 0px 0px 20px; padding: 0px;">
<span style="font-size: small;">Efek Selotip</span></h2>
<div style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; line-height: 25px; margin-bottom: 20px; padding: 0px;">
Dengan teknik yang sama, kita juga bisa membuat efek kertas yang menempel dengan menggunakan <a href="https://www.google.com/search?q=selotip&tbm=isch&tbo=u&source=univ&sa=X&ei=A8XQUbvTJcTlrAfpxYGgAQ&ved=0CEYQsAQ" style="color: #ef8700; margin: 0px; padding: 0px; text-decoration: none;" title="Selotip">selotip</a> di setiap ujungnya. yang perlu kita lakukan hanyalah merubah tinggi dari pseudo element dan memberi background yang transparan</div>
<pre class="prettyprint" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 2px; background-color: #fffcef; border-bottom-color: rgb(255, 225, 109); border-bottom-width: 1px; border-style: solid none; border-top-color: rgb(255, 225, 109); border-top-width: 1px; box-shadow: none; font-family: consolas, monaco; margin: 20px -20px; overflow: auto; padding: 20px; text-shadow: white 0px 1px 1px;"><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">.</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">kertas</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">::</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">before</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">,</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;"> </span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">.</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">kertas</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">::</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">after</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">{</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
 background</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">:</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">rgba</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">(</span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">255</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">,</span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">255</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">,</span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">255</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">,.</span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">5</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">);</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
 content</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">:</span><span class="str" style="color: #268bd2; margin: 0px; padding: 0px;">""</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">;</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
 width</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">:</span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">100px</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">;</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
 height</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">:</span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">25px</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">;</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
 position</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">:</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">absolute</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">;</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
 top</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">:-</span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">10px</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">;</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
 box</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">-</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">shadow</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">:</span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">0</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;"> </span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">5px</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;"> </span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">10px</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;"> </span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">-</span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">7px</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;"> rgba</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">(</span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">0</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">,</span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">0</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">,</span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">0</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">,.</span><span class="lit" style="color: #195f91; margin: 0px; padding: 0px;">3</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">);</span><span class="pln" style="color: #93a1a1; margin: 0px; padding: 0px;">
</span><span class="pun" style="color: #93a1a1; margin: 0px; padding: 0px;">}</span></pre>
<div style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; line-height: 25px; margin-bottom: 20px; padding: 0px;">
Dalam contoh di atas saya memberikan warna transparan dengan system rgba, anda bisa menggunakan background-image dan membuat gambar selotip yang lebih realistis.</div>
</div>

Efek yang akan kita buat pada tutorial ini adalah efek kertas yang terselip. Efek ini juga merupakan contoh lain dari penerapan Pseudo-Element Before…

Mar 08, 2014 +

Load more posts

M-S Blog

M-S Blog

M-S Blog

Cara Membuat Navigasi Menu Full Color di Blog

Free Download Game Counter Strike : Condition Zero

Membuat efek kertas terselip dengan CSS

Popular Posts

Blog Archive