tag:blogger.com,1999:blog-87211272278310866862024-02-19T18:48:29.243+07:00Farkryzer The Second GenerationArticles | Games | Tips & TrickAnonymoushttp://www.blogger.com/profile/15367599609887741667noreply@blogger.comBlogger250125tag:blogger.com,1999:blog-8721127227831086686.post-81500223446949232742012-02-10T17:19:00.000+07:002012-02-13T16:43:26.445+07:00Membuat border image dengan CSS3<br />
<a name='more'></a>Sudah seminggu lebih saya tidak update blog karena kesibukan saya, tapi Allhamdullilah pada hari jum'at ini saya dapat memberikan sebuah tutorial mengenai cara membuat border image dengan CSS3<br />
<br />
Sobat blogger pasti tahu kan border terlebih yang sering utak - atik template border pasti sudah tidak asing lagi bagi kalian, jika kalian sering membuat border seperti<br />
<br />
<div style="border-top: 5px solid #000;">
<br />
<div id="body-langkah">
border:2px solid black;</div>
<br />
Kali ini saya ingin share sedikit mengenai cara membuat border dengan CSS3<br />
<br />
Coba perhatikan script cssnya di bawah ini :<br />
<br />
<div id="body-langkah">
<b>border-width: <span style="background-color: purple; color: white;">BESARNYA</span>;</b><br />
<b>border-image: url('<span style="background-color: orange; color: white;">url gambar</span>') <span style="background-color: red; color: white;">[TOP]</span><span style="color: white;"> </span><span style="background-color: red; color: white;">[RIGHT]</span><span style="color: white;"> </span><span style="background-color: red; color: white;">[BOTTOM]</span><span style="color: white;"> </span><span style="background-color: red; color: white;">[LEFT]</span><span style="color: white;"> </span><span style="background-color: blue; color: white;">[REPEAT]</span>;</b><br />
<b> -moz-border-image: url('</b><b><span style="background-color: orange; color: white;">url gambar</span></b><b>') </b><b><span style="background-color: red; color: white;">[TOP]</span><span style="color: white;"> </span><span style="background-color: red; color: white;">[RIGHT]</span><span style="color: white;"> </span><span style="background-color: red; color: white;">[BOTTOM]</span><span style="color: white;"> </span><span style="background-color: red; color: white;">[LEFT]</span></b><b> </b><b><span style="background-color: blue; color: white;">[REPEAT]</span></b><b>;</b><br />
<b>-webkit-border-image: url('</b><b><span style="background-color: orange; color: white;">url gambar</span></b><b>') </b><b><span style="background-color: red; color: white;">[TOP]</span><span style="color: white;"> </span><span style="background-color: red; color: white;">[RIGHT]</span><span style="color: white;"> </span><span style="background-color: red; color: white;">[BOTTOM]</span><span style="color: white;"> </span><span style="background-color: red; color: white;">[LEFT]</span></b><b> </b><b><span style="background-color: blue; color: white;">[REPEAT]</span></b><b>;</b><br />
<b>-o-border-image: url('</b><b><span style="background-color: orange; color: white;">url gambar</span></b><b>') </b><b><span style="background-color: red; color: white;">[TOP]</span><span style="color: white;"> </span><span style="background-color: red; color: white;">[RIGHT]</span><span style="color: white;"> </span><span style="background-color: red; color: white;">[BOTTOM]</span><span style="color: white;"> </span><span style="background-color: red; color: white;">[LEFT]</span></b><b> </b><b><span style="background-color: blue; color: white;">[REPEAT]</span></b><b>;</b></div>
<br />
<b>Keterangan</b><br />
<b><span style="background-color: purple; color: white;">BESARNYA</span></b><b> : ganti dan sesuaikan dengan besar gambar border menggunakan pixel. </b><br />
<b><span style="background-color: orange; color: white;">url gambar</span> : tempat / url dimana gambar itu berada.</b><br />
<b><span style="background-color: red; color: white;">[TOP]</span><span style="color: white;"> </span><span style="background-color: red; color: white;">[RIGHT]</span><span style="color: white;"> </span><span style="background-color: red; color: white;">[BOTTOM]</span><span style="color: white;"> </span><span style="background-color: red; color: white;">[LEFT]</span> : lebar - lebar gambar sesuaikan agar pas sehingga tidak terjadi kesalahan dapat dengan menggunakan persentase ataupun pixel misal (20%, 25px)</b><br />
<b><span style="background-color: blue; color: white;">[REPEAT]</span></b> <b>: ganti dengan stretch atau repeat atau round jika ingin dibedakan antara sumbu-x dan sumbu-y misalnya yg x itu round dan yg y itu stretch maka tambahkan menjadi </b><b style="color: blue;">round stretc</b><b style="color: blue;">h</b><b>;</b><br />
<br />
<b>Contohnya dan hasilnya :</b><br />
<div id="body-langkah1">
border-width: 27px; -moz-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 round stretch;<br />
-webkit-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 round stretch;<br />
-o-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 round stretch;
border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 round stretch;</div>
<br />
<div style="border: 5px solid red; margin: 0 20px 0 20px; padding: 5px;">
<b style="color: red;">NOTE: </b><br />
<b> </b><br />
<i><b>Jika kalian bingung, ribet mesti ngitung sana sini masih ada alternatif lain yang harus sobat coba yaitu menggunakan css generator untuk border image yang dapat sobat kunjungi di bawah ini :</b></i><br />
<div style="text-align: center;">
<a href="http://border-image.com/"><b>http://border-image.com/</b></a></div>
</div>
<br />
<br />
<div style="border-top: 5px solid #000;">
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<u><b>SAYA SEDIAKAN SEDIKIT YANG SUDAH JADI DIDAPAT DARI SITUS YG LAIN</b></u></div>
<br />
<div id="border1">
<b>border-width: 20px;<br />
-moz-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKCq6Cme-NefGBmP55w-H3nGvOX-IbgegkCagrC86yXPvS9R11zmJ20Bv9W7TNQUZBbrlJWQ3vUR0Q2pJKENP3qBM6ceJNXNcqdoKqnN6p7TZYeDl8cyyFuaNdwYm6z1Vp_FeCIEx7S-V2/s1600/frame.gif) 20 stretch;<br />-webkit-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKCq6Cme-NefGBmP55w-H3nGvOX-IbgegkCagrC86yXPvS9R11zmJ20Bv9W7TNQUZBbrlJWQ3vUR0Q2pJKENP3qBM6ceJNXNcqdoKqnN6p7TZYeDl8cyyFuaNdwYm6z1Vp_FeCIEx7S-V2/s1600/frame.gif) 20 stretch;</b><br />
<b>
-o-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKCq6Cme-NefGBmP55w-H3nGvOX-IbgegkCagrC86yXPvS9R11zmJ20Bv9W7TNQUZBbrlJWQ3vUR0Q2pJKENP3qBM6ceJNXNcqdoKqnN6p7TZYeDl8cyyFuaNdwYm6z1Vp_FeCIEx7S-V2/s1600/frame.gif) 20 stretch;<br />-ms-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKCq6Cme-NefGBmP55w-H3nGvOX-IbgegkCagrC86yXPvS9R11zmJ20Bv9W7TNQUZBbrlJWQ3vUR0Q2pJKENP3qBM6ceJNXNcqdoKqnN6p7TZYeDl8cyyFuaNdwYm6z1Vp_FeCIEx7S-V2/s1600/frame.gif) 20 stretch;</b><br />
<b>border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKCq6Cme-NefGBmP55w-H3nGvOX-IbgegkCagrC86yXPvS9R11zmJ20Bv9W7TNQUZBbrlJWQ3vUR0Q2pJKENP3qBM6ceJNXNcqdoKqnN6p7TZYeDl8cyyFuaNdwYm6z1Vp_FeCIEx7S-V2/s1600/frame.gif) 20 stretch;</b></div>
<br />
<div id="border2">
<b>border-width: 25px 30px;<br />
-moz-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVMmmswHWAtSsDaKhI2qeWhMnKYBn9Nlnu5WAFua9lnhUtPt0cnfCNrkNouP-lvB0zN6iZbD9YK6TYggFzhI8baDygOaWyGfvurSaf2mW2iuEX0cU9tqdRHvG9LcG4_CSxd-jO8HxkHnT6/s1600/frame2.png) 25 30 stretch;<br />
-webkit-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVMmmswHWAtSsDaKhI2qeWhMnKYBn9Nlnu5WAFua9lnhUtPt0cnfCNrkNouP-lvB0zN6iZbD9YK6TYggFzhI8baDygOaWyGfvurSaf2mW2iuEX0cU9tqdRHvG9LcG4_CSxd-jO8HxkHnT6/s1600/frame2.png) 25 30 stretch;<br />
-o-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVMmmswHWAtSsDaKhI2qeWhMnKYBn9Nlnu5WAFua9lnhUtPt0cnfCNrkNouP-lvB0zN6iZbD9YK6TYggFzhI8baDygOaWyGfvurSaf2mW2iuEX0cU9tqdRHvG9LcG4_CSxd-jO8HxkHnT6/s1600/frame2.png) 25 30 stretch;<br />
-ms-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVMmmswHWAtSsDaKhI2qeWhMnKYBn9Nlnu5WAFua9lnhUtPt0cnfCNrkNouP-lvB0zN6iZbD9YK6TYggFzhI8baDygOaWyGfvurSaf2mW2iuEX0cU9tqdRHvG9LcG4_CSxd-jO8HxkHnT6/s1600/frame2.png) 25 30 stretch;<br />
border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVMmmswHWAtSsDaKhI2qeWhMnKYBn9Nlnu5WAFua9lnhUtPt0cnfCNrkNouP-lvB0zN6iZbD9YK6TYggFzhI8baDygOaWyGfvurSaf2mW2iuEX0cU9tqdRHvG9LcG4_CSxd-jO8HxkHnT6/s1600/frame2.png) 25 30 stretch;</b></div>
<br />
<style>
body{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGt2r7sVwzmAO4e0ux4fMg4DvT03eqXPyVTC_pucQzCxmGGz2HMHzhqzMWWHGWHox2ELR2bo7xfun88o8swsrngakXYlW5S3UVlrK8qIjcRubsesnKJiQHQTXFOAJAB9pxRZCtZSlihRND/s1600/background.jpg) center fixed;}
.post{background:transparent;border:0 solid #000;box-shadow:inset 0 0 20px #fff}
#body-langkah{background:#fff;margin:5px 25px 5px 25px;padding:5px;border:1px solid #fff;border-radius:3px;;font-family: 'Electrolize', sans-serif;font-size:15px;-moz-transition:all .5s;-webkit-transition:all .5s;-o-transition:all .5s;box-shadow:0 0 5px #000}
#body-langkah:hover{box-shadow:0 0 10px #000}
#body-langkah1{margin:5px 25px 5px 25px;padding:5px;border-width: 27px; -moz-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 round stretch;-webkit-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 round stretch;-o-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 round stretch; border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 round stretch;}
#border1{border-width: 20px;
-moz-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKCq6Cme-NefGBmP55w-H3nGvOX-IbgegkCagrC86yXPvS9R11zmJ20Bv9W7TNQUZBbrlJWQ3vUR0Q2pJKENP3qBM6ceJNXNcqdoKqnN6p7TZYeDl8cyyFuaNdwYm6z1Vp_FeCIEx7S-V2/s1600/frame.gif) 20 stretch;-webkit-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKCq6Cme-NefGBmP55w-H3nGvOX-IbgegkCagrC86yXPvS9R11zmJ20Bv9W7TNQUZBbrlJWQ3vUR0Q2pJKENP3qBM6ceJNXNcqdoKqnN6p7TZYeDl8cyyFuaNdwYm6z1Vp_FeCIEx7S-V2/s1600/frame.gif) 20 stretch;-o-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKCq6Cme-NefGBmP55w-H3nGvOX-IbgegkCagrC86yXPvS9R11zmJ20Bv9W7TNQUZBbrlJWQ3vUR0Q2pJKENP3qBM6ceJNXNcqdoKqnN6p7TZYeDl8cyyFuaNdwYm6z1Vp_FeCIEx7S-V2/s1600/frame.gif) 20 stretch;-ms-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKCq6Cme-NefGBmP55w-H3nGvOX-IbgegkCagrC86yXPvS9R11zmJ20Bv9W7TNQUZBbrlJWQ3vUR0Q2pJKENP3qBM6ceJNXNcqdoKqnN6p7TZYeDl8cyyFuaNdwYm6z1Vp_FeCIEx7S-V2/s1600/frame.gif) 20 stretch;border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKCq6Cme-NefGBmP55w-H3nGvOX-IbgegkCagrC86yXPvS9R11zmJ20Bv9W7TNQUZBbrlJWQ3vUR0Q2pJKENP3qBM6ceJNXNcqdoKqnN6p7TZYeDl8cyyFuaNdwYm6z1Vp_FeCIEx7S-V2/s1600/frame.gif) 20 stretch;width:500px;margin:auto;padding:5px}
#border2{border-width: 25px 30px;-moz-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVMmmswHWAtSsDaKhI2qeWhMnKYBn9Nlnu5WAFua9lnhUtPt0cnfCNrkNouP-lvB0zN6iZbD9YK6TYggFzhI8baDygOaWyGfvurSaf2mW2iuEX0cU9tqdRHvG9LcG4_CSxd-jO8HxkHnT6/s1600/frame2.png) 25 30 stretch;-webkit-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVMmmswHWAtSsDaKhI2qeWhMnKYBn9Nlnu5WAFua9lnhUtPt0cnfCNrkNouP-lvB0zN6iZbD9YK6TYggFzhI8baDygOaWyGfvurSaf2mW2iuEX0cU9tqdRHvG9LcG4_CSxd-jO8HxkHnT6/s1600/frame2.png) 25 30 stretch;-o-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVMmmswHWAtSsDaKhI2qeWhMnKYBn9Nlnu5WAFua9lnhUtPt0cnfCNrkNouP-lvB0zN6iZbD9YK6TYggFzhI8baDygOaWyGfvurSaf2mW2iuEX0cU9tqdRHvG9LcG4_CSxd-jO8HxkHnT6/s1600/frame2.png) 25 30 stretch;-ms-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVMmmswHWAtSsDaKhI2qeWhMnKYBn9Nlnu5WAFua9lnhUtPt0cnfCNrkNouP-lvB0zN6iZbD9YK6TYggFzhI8baDygOaWyGfvurSaf2mW2iuEX0cU9tqdRHvG9LcG4_CSxd-jO8HxkHnT6/s1600/frame2.png) 25 30 stretch;border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVMmmswHWAtSsDaKhI2qeWhMnKYBn9Nlnu5WAFua9lnhUtPt0cnfCNrkNouP-lvB0zN6iZbD9YK6TYggFzhI8baDygOaWyGfvurSaf2mW2iuEX0cU9tqdRHvG9LcG4_CSxd-jO8HxkHnT6/s1600/frame2.png) 25 30 stretch;width:500px;margin:auto;padding:5px}
#kolom-gif{-moz-column-count:2;-webkit-column-count:2;column-count:2}
#link a{-moz-transition:all .3s;-webkit-transition:all .3s;-o-transition:all .3s}
#link a:hover{margin-left:25px}
@-keyframes img{0% {opacity:1} 50% {opacity:.5} 100% {opacity:1}}
@-moz-keyframes img{0% {opacity:1} 50% {opacity:.5} 100% {opacity:1}}
@-webkit-keyframes img{0% {opacity:1} 50% {opacity:.5} 100% {opacity:1}}
#gambar{animation:img 5s infinite;-moz-animation:img 5s infinite;-webkit-animation:img 5s infinite}
.blog-pager{background:transparent;border-radius:0}
:selection{background:#622222;color:white}
::-moz-selection{background:#622222;color:white}
::-webkit-selection{background:#622222;color:white}
</style>
</div>
</div>Anonymoushttp://www.blogger.com/profile/15367599609887741667noreply@blogger.com64tag:blogger.com,1999:blog-8721127227831086686.post-13001996346311703782012-01-26T20:22:00.000+07:002012-02-23T18:02:27.338+07:00Farkryzer Link Exchange | Tukar Link<br />
<a name='more'></a><div class="separator" style="clear: both; text-align: center;">
<a href="http://biologid.blogspot.com/" style="margin-left: 1em; margin-right: 1em;"></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://biologid.blogspot.com/" style="margin-left: 1em; margin-right: 1em;"></a></div>
<a href="http://biologid.blogspot.com/" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="http://biologid.blogspot.com/" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="http://biologid.blogspot.com/" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="http://biologid.blogspot.com/" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a>Bagi sobat yang ingin tukar link dengan saya syaratnya sangat mudah, sobat tinggal taruh link menuju homepage blog saya dan konfirmasikan ke saya nanti akan saya pasang link sobat secepatnya :<br />
<a href="http://biologid.blogspot.com/" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://biologid.blogspot.com/" style="margin-left: 1em; margin-right: 1em;"></a></div>
<a href="http://biologid.blogspot.com/" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="http://biologid.blogspot.com/" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a>Script HTML link saya :<br />
<div id="body-langkah">
<a href="http://www.farizky234.blogspot.com/" <span class="data-post">target="_blank"</span>><b>Farkryzer</b></a></div>
<br />
<div style="border-top: 4px solid black;">
<div style="text-align: center;">
<b>Link 1 sampai dengan 9 :</b></div>
<div id="link1">
<a href="http://biologid.blogspot.com/" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><br />
<div id="link2">
<b>1.</b> <a href="http://danyf5habibi.wordpress.com/" target="_blank">Danyf5habibi</a><br />
<b>2.</b> <a href="http://habluezshare.blogspot.com/" target="_blank">Habluezshare</a><br />
<b>3.</b> <a href="http://blog-terakhir.blogspot.com/" target="_blank">Blog Terakhir</a><br />
<b>4.</b> <a href="http://www.duniasharing.com/" target="_blank">Dunia Sharing</a><br />
<b>5.</b> <a href="http://cirebon-cyber4rt.blogspot.com/" target="_blank">Cirebon-Cyber4rt</a><br />
<b>6.</b> <a href="http://sersan-mulyono.blogspot.com/" target="_blank">Mulyono Blog's</a><br />
<b>7.</b> <a href="http://berbagi-kreativitas.blogspot.com/" target="_blank">Berbagi Kreativitas</a><br />
<b>8.</b> <a href="http://catatanku-yd.blogspot.com/" target="_blank">Catatanku</a><br />
<b>9.</b> <a href="http://biologid.blogspot.com/" target="_blank">Sharing Ilmu Bio</a> </div>
</div>
<br />
<div style="border-top: 4px solid black;">
<div style="text-align: center;">
<b>Link 10 sampai dengan 18 :</b></div>
<div id="link1">
<div id="link2">
<b>10.</b> <a href="http://www.simpleblog4.blogspot.com/" target="_blank">Simple Blog 4</a><br />
<b>11.</b> <a href="http://www.pengetahuanpintars.blogspot.com/" target="_blank">PENGETAHUAN PINTARse</a><br />
<b>12.</b> <a href="http://www.narenciel.blogspot.com/" target="_blank">Narenciel</a><b> </b><br />
<b>13.</b> <a href="http://www.rzaal1306.blogspot.com/" target="_blank">RzaaL 1306</a><br />
<b>14.</b> <a href="http://www.richatrouble.blogspot.com/" target="_blank">Trouble M★ker</a><br />
<b>15.</b> <a href="http://www.alkaz-comunity.blogspot.com/" target="_blank">Alkaz-Comunity</a><br />
<br />
<b>16.</b> <a href="http://www.terimaterjemahan.blogspot.com/">Jasa Penerjemah</a>
<b> </b><br />
<b>17.</b> <a href="http://www.zyiroyz.com/">Zyi Share
</a><br />
<b>18.</b> <a href="http://bzz0874.blogspot.com/" target="_blank">Catatan Bazzo</a></div>
<br /></div>
<br />
<div style="border-top: 4px solid black;">
<div style="text-align: center;">
<b>Link 19 sampai dengan 27 :</b></div>
</div>
<div id="link1">
<div id="link2">
<b>19.</b> <a href="http://obiusammah.blogspot.com/">Obi's blog </a><br />
<b>20.</b> <a href="http://www.rizaldipriantama.blogspot.com/">Rizaldi Priantama</a><br />
<b>21.</b> <a href="http://variasiblogger.blogspot.com/">Variasi Blogger</a><br />
<br />
<b>22.</b> <a href="http://angkasa5.blogspot.com/">Download Movie</a><br />
<b>23.</b> <a href="http://inovasiit.blogspot.com/">Inovasi IT</a></div>
<b>24.</b> <a href="http://-/">Your Link Here</a><br />
<br />
<b>25.</b> <a href="http://-/">Your Link Here</a><br />
<b> 26.</b> <a href="http://-/">Your Link Here</a><br />
<b>24.</b> <a href="http://-/">Your Link Here</a><br />
<br /></div>
<br />
<div style="border-top: 4px solid black;">
Apabila sobat telah memasang link saya segera konfirmasikan kepada saya, akan saya pasang balik linknya secepatnya. Pesan dapat diberitahukan menggunakan kotak komentar dan E-Mal kepada saya buku tamu juga bisa tetapi tidak disarankan.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
<br />
<style>
body{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV9NnLThouxN4hkgfscPY_Tl4zaM0fsq2p3r0nSRtw-MfSPyN_Jy-b_RrVnpo4Hai_qZldqgxCQF_LcQCdDkqSthX8L2SCHbwzezd7ENgBF_AHC7Yt6pWAfdQExqWt4XgehEb50TYeCmc4/s1600/link+exchange.jpg) center fixed no-repeat;}
.post{background:#fff;border:0 solid #000;box-shadow:inset 0 0 20px #000;opacity:.9}
.post:hover{opacity:.9}
#body-langkah{background:#fff;margin:5px 25px 5px 25px;padding:5px;border:1px solid #fff;border-radius:3px;;font-family: 'Electrolize', sans-serif;font-size:15px;-moz-transition:all .5s;-webkit-transition:all .5s;-o-transition:all .5s;box-shadow:0 0 5px #000}
#body-langkah:hover{box-shadow:0 0 10px #000}
#link1{-moz-column-count:3;-webkit-column-count:3;column-count:3;-moz-column-rule:3px outset #000;-webkit-column-rule:3px outset #000;column-rule:3px outset #000}
#link1 a{-moz-transition:all .3s;-webkit-transition:all .3s;-o-transition:all .3s;color:white;text-shadow:0 0 5px black;font-weight:bold;text-decoration:none}
#link1 a:hover{margin-left:25px;cursor:pointer;}
#link2 a{text-shadow:0 0 5px #B22222}
#link2 a:hover{text-shadow:0 0 10px #B22222}
@-keyframes img{0% {opacity:1} 50% {opacity:.5} 100% {opacity:1}}
@-moz-keyframes img{0% {opacity:1} 50% {opacity:.5} 100% {opacity:1}}
@-webkit-keyframes img{0% {opacity:1} 50% {opacity:.5} 100% {opacity:1}}
#gambar{animation:img 5s infinite;-moz-animation:img 5s infinite;-webkit-animation:img 5s infinite}
.blog-pager{background:transparent;border-radius:0}
:selection{background:#DAA520;color:white}
::-moz-selection{background:#DAA520;color:white}
::-webkit-selection{background:#DAA520;color:white}
</style></div>
</div>
</div>Anonymoushttp://www.blogger.com/profile/15367599609887741667noreply@blogger.com38tag:blogger.com,1999:blog-8721127227831086686.post-76021202681250163612012-01-23T16:19:00.002+07:002012-01-23T16:22:18.302+07:00Atur elemen blog tampil di halaman utama atau halaman post saja<br />
<a name='more'></a>Wah lama sekali saya tidak update blog ya, seminggu lalu tapi masih sempet - sempet sih blogwalking :D. Nah entri saya yang baru ini akan membahas mengenai <a href="http://www.farizky234.blogspot.com/2012/01/atur-elemen-blog-tampil-di-halaman.html">cara mengatur elemen blog hanya tampil di halaman utama atau halaman post saja</a>, dengan kata lain kamu mengatur widget - widget blog misalnya buku tamu blog sobat ingin ditampilkan di halaman utama saja, sobat dapt menggunakan cara ini.<br />
<br />
Fungsinya ya untuk menghemat space blog yang sudah kepenuhan atau barangkali ingin mengatur beberapa elemen yang hanya ingin di tampilkan di halaman utama tau di halaman post, langsung saja saya mulai caranya :<br />
<br />
Untuk lebih mudah melakukan caranya saya sarankan sobat harus mengetahui sedikit saja mengenai css selector.<br />
<br />
<div style="border-top: 5px solid black;">
<br />
Caranya mudah yaitu copykan script ini sesudah <i>]]></b:skin></i><br />
<br />
<b>1.</b> Untuk membuat selector tidak tampil di halaman post (Hanya tampil di halaman utama saja)<br />
<div id="body-langkah">
<b:if cond='data:blog.pageType == &quot;item&quot;'><br />
<style type='text/css'><br />
<b>Selector</b>{display:none}<br />
</style><br />
</b:if></div>
<br />
<b>2.</b> Untuk membuat selector tidak tampil di halaman utama (Hanya tampil di halaman postingan saja)<br />
<div id="body-langkah">
<b:if cond='data:blog.pageType != &quot;item&quot;'><br />
<style type='text/css'><br />
<b>Selector</b>{display:none}<br />
</style><br />
</b:if></div>
<br />
<div style="border-top: 5px solid black;">
<br />
<div style="text-align: center;">
<span style="font-size: large;"><u><b>Contoh penerapannya yaitu :</b></u></span></div>
1. Masuk ke dashboard > Pilih blog kemudian > Pilih Template > Edit HTML<br />
2. Kemudian ketahui id dari elemen yang ingin sobat atur caranya mudah :<br />
Misalnya sobat akan mengatur widget dengan nama Buku Tamu, cari di template sobat dengan cara Ctrl+F kemudian ketikan buku tamu misalnya ketemu seperti ini :<br />
<div id="body-langkah">
<b:widget id='HTML3' locked='false' title='Farkryzer Mania' type='HTML'></div>
kemudian copykan idnya yaitu HTML3nya kedalam scriptnya<br />
<div id="body-langkah">
<b:if cond='data:blog.pageType != &quot;item&quot;'><br />
<style type='text/css'><br />
<b>#HTML3</b>{display:none}<br />
</style><br />
</b:if></div>
Apabila ingin tambah elemen sobat tinggal gunakan tanda koma ( , ) setiap selector misalnya :<br />
<div id="body-langkah">
#HTML3<b>,</b>#HTML2<b>,</b>#HTML1{display:none}</div>
<br />
Silahkan berkreasi sendiri untuk menciptakan blog sesuai dengan keinginan sobat ...<br />
<style>
body{background:url(http://fc07.deviantart.net/fs38/i/2008/349/c/8/Simple_Wallpaper_by_mario_182.jpg) fixed;}
.post{background:transparent;border:0 solid #000;box-shadow:inset 0 0 20px #fff}
#body-langkah{background:#fff;margin:5px 25px 5px 25px;padding:5px;border:1px solid #fff;border-radius:3px;;font-family: 'Electrolize', sans-serif;font-size:15px;-moz-transition:all .5s;-webkit-transition:all .5s;-o-transition:all .5s;box-shadow:0 0 5px #000}
#body-langkah:hover{box-shadow:0 0 10px #000}
#kolom-gif{-moz-column-count:2;-webkit-column-count:2;column-count:2}
#link a{-moz-transition:all .3s;-webkit-transition:all .3s;-o-transition:all .3s}
#link a:hover{margin-left:25px}
@-keyframes img{0% {opacity:1} 50% {opacity:.5} 100% {opacity:1}}
@-moz-keyframes img{0% {opacity:1} 50% {opacity:.5} 100% {opacity:1}}
@-webkit-keyframes img{0% {opacity:1} 50% {opacity:.5} 100% {opacity:1}}
#gambar{animation:img 5s infinite;-moz-animation:img 5s infinite;-webkit-animation:img 5s infinite}
.blog-pager{background:transparent;border-radius:0}
:selection{background:#622222;color:white}
::-moz-selection{background:#622222;color:white}
::-webkit-selection{background:#622222;color:white}
</style></div>
</div>Anonymoushttp://www.blogger.com/profile/15367599609887741667noreply@blogger.com40tag:blogger.com,1999:blog-8721127227831086686.post-91668212110698147132012-01-15T20:47:00.001+07:002012-01-16T14:12:15.225+07:005 Tips agar blog menjadi lebih ringan<br />
<a name='more'></a>Hallo Sobat Farkryzer, sekarang saya ingin mencoba sharing seputar tips blog yaitu <a href="http://www.farizky234.blogspot.com/2012/01/tips-agar-blog-menjadi-lebih-ringan.html">membuat blog menjadi lebih ringan</a>. Mungkin sobat blogger sering mendengar mengenai <a href="http://www.farizky234.blogspot.com/2012/01/tips-agar-blog-menjadi-lebih-ringan.html">cara membuat blog menjadi lebih ringan</a>, tetapi mungkin dari beberapa sobat ada yang belum pernah membaca atau baru membaca tetapi lupa lagi. Biar ga lama langsung aja baca sob : <br />
<br />
Mempunyai blog yang ringan merupakan dampaan setiap blogger, karena dengan blog ringan dapat memuaskan para pengunjung, blognya ringan otomatis waktu muatnya pun relatif cepat. Ini ada beberapa tips dari saya agar blog menjadi lebih ringan, silahkan di simak :D :<br />
<br />
<div style="text-align: center;">
<div id="body-langkah">
<b>1. Pilih Template yang sederhana / size kecil </b>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-C1tC-eQtYJhox06oJ44WW3oSOkqufkDSl2ZQYFlnei4m8bcE-M2VISdI25NAa1EyV1PNYbZUkhYaCL6MCZJjtJLJMSvlEh3i5t473076KQfG23FWc7IIiLdAUg2GtGX39ndkEm7fSlA/s1600/Forte-Blogger-Template.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-C1tC-eQtYJhox06oJ44WW3oSOkqufkDSl2ZQYFlnei4m8bcE-M2VISdI25NAa1EyV1PNYbZUkhYaCL6MCZJjtJLJMSvlEh3i5t473076KQfG23FWc7IIiLdAUg2GtGX39ndkEm7fSlA/s1600/Forte-Blogger-Template.png" border="0" height="275" id="gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-C1tC-eQtYJhox06oJ44WW3oSOkqufkDSl2ZQYFlnei4m8bcE-M2VISdI25NAa1EyV1PNYbZUkhYaCL6MCZJjtJLJMSvlEh3i5t473076KQfG23FWc7IIiLdAUg2GtGX39ndkEm7fSlA/s320/Forte-Blogger-Template.png" width="320" /></a></div>
<br />
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Kita awali dari template, pilihlah template / tema blog dengan size kecil. Maksudnya yaitu tidak mengandung terlalu banyak script. Ya setidaknya pilih yang kurang dari 100kb atau lebih kecil lebih bagus.</div>
</div>
<br />
<br />
<div style="text-align: center;">
<div id="body-langkah">
<b>2. Buang widget yang tidak diperlukan</b>
<br />
<div style="text-align: center;">
<b> </b><img alt="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQVyLZIKfc9VoTPny6EaEJV_DHrSTi_1t759xVe1jf9LGFzKxgaooCSYiSgvRtE7RTjLhRzYbjDoiDzQEBSK618juM0oDy8AN4GyK48B0xepXwXVK9nlMMF9goDPqO9tr0UvfejUnznc4/s1600/widgets.jpg" height="320" id="gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQVyLZIKfc9VoTPny6EaEJV_DHrSTi_1t759xVe1jf9LGFzKxgaooCSYiSgvRtE7RTjLhRzYbjDoiDzQEBSK618juM0oDy8AN4GyK48B0xepXwXVK9nlMMF9goDPqO9tr0UvfejUnznc4/s320/widgets.jpg" width="254" /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Widget merupakan salah satu elemen paling penting untuk blog, terus kenapa saya masukan daftar ??? widget memang penting tetapi maksudnya dari tips kedua ini adalah, buanglah widget yang sekiranya tidak perlu, misalnya jam, kalender dll.</div>
</div>
<br />
<br />
<div style="text-align: center;">
<div id="body-langkah">
<b>3. Kurangi Javascript, Jquery serta Flash</b>
<br />
<div style="text-align: center;">
<img height="200" id="gambar" src="http://www.thecybertramp.com/blog/wp-content/uploads/2011/02/jquery-training.png" style="padding-bottom: 8px; padding-right: 8px; padding-top: 8px;" width="200" /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Di sadari atau tidak Javascript dapat membuat blog menjadi lebih berat apalagi jquery dapat membuat size blog berkali - kali lipat lebih besar karena script jquery yang strukturnya sangat panjang yang ototmatis menambah size blog dan menjadikan blog sobat menjadi berat. Jadi saran saya kurangi saja lah atau bila terpaksa pilihlah jquery yang tidak terlalu besar. Oh ya yang terakhir flash, itu pun sama membuat berat mohon di hilangkan ya sobat :D</div>
</div>
<br />
<b><br /></b><br />
<div style="text-align: center;">
<div id="body-langkah">
<b>4. Kurangi gambar - gambar di blog</b>
<br />
<div style="text-align: center;">
<img alt="http://tridante-compuskill.com/image/cache/no_image-500x500.jpg" height="200" id="gambar" src="http://tridante-compuskill.com/image/cache/no_image-500x500.jpg" width="200" /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Ini juga termasuk sobat, masalah yang membuat blog kita menjadi berat, untuk pemakaian gambar background diblog sebelum di pasang saya sarankan untuk di compress terlebih dahulu, maksimal ukurannya 100kb-an.</div>
</div>
<br />
<br />
<div style="text-align: center;">
<b>5. Pasang jump-break di postingan</b></div>
<div id="body-langkah">
<div style="text-align: center;">
<img height="202" id="gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXp568y1JfGlhcZ1TYbX1gycPoHi8IPgazeCACQoQsk7suwG-U0PVk8_uVJB00GCQeHvcXrtiMVexPtVbyAR1rRgLiRKi6Y88hymRg5IHVeo0kM6iq8TJ5yaZYgJzt6LK4BtdGdZeh6Z8/s320/jump+break.jpg" style="padding-bottom: 8px; padding-right: 8px; padding-top: 8px;" width="320" /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Percaya atau tidak, ini didasarkan analisa saya. Postingan / Entri tanpa jump break dapat menambah size blog di halaman utama. Setelah saya selidiki ternyata memang benar. <i><b>Kenapa ???</b></i> Itu terjadi, karena data yang ada pada postingan ikut di terambil ketika membuka halaman utama. <i><b>Maksudnya ???</b></i> Jadi misalnya sobat punya 3 postingan di homepage dengan judul saja tanpa jump-break, sepintas dalam pikiran kita jika yang di load / di muat halaman utama untuk postingan hanya judulnya saja tetapi kenyatannya tulisan - tulisan serta datanya ikut terambil. Untuk bukti silahkan <i>v</i><i>iew page source</i> atau <i>Ctrl + U</i> untuk firefox dan lihat apakah benar . . .</div>
</div>
<br />
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Segitu Saja tips dari saya semoga membantu sobat yang menginginkan blognya ringan, apabila blog ingin ringan tetapi tampilan tetap maksimal silahkan gunakan css sebagai alternatif.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: center;">
<br />
<img alt="http://coding.smashingmagazine.com/wp-content/uploads/2011/08/less-css.jpg" height="192" id="gambar" src="http://coding.smashingmagazine.com/wp-content/uploads/2011/08/less-css.jpg" width="320" /><br />
<br />
Untuk mencoba check besar size blog sobat silahkan ke entri ini :<br />
<a href="http://www.farizky234.blogspot.com/2012/01/ukur-waktu-loading-blog-dengan-gtmetrix.html">http://www.farizky234.blogspot.com/2012/01/ukur-waktu-loading-blog-dengan-gtmetrix.html</a></div>
<style>
body{background:url(http://fc07.deviantart.net/fs38/i/2008/349/c/8/Simple_Wallpaper_by_mario_182.jpg) fixed;}
.post{background:transparent;border:0 solid #000;box-shadow:inset 0 0 20px #fff}
#body-langkah{background:#fff;margin:5px 25px 5px 25px;padding:5px;border:1px solid #fff;border-radius:3px;;font-family: 'Electrolize', sans-serif;font-size:15px;-moz-transition:all .5s;-webkit-transition:all .5s;-o-transition:all .5s;box-shadow:0 0 5px #000}
#body-langkah:hover{box-shadow:0 0 5px #fff}
#kolom-gif{-moz-column-count:2;-webkit-column-count:2;column-count:2}
#link a{-moz-transition:all .3s;-webkit-transition:all .3s;-o-transition:all .3s}
#link a:hover{margin-left:25px}
@-keyframes img{0% {opacity:1} 50% {opacity:.5} 100% {opacity:1}}
@-moz-keyframes img{0% {opacity:1} 50% {opacity:.5} 100% {opacity:1}}
@-webkit-keyframes img{0% {opacity:1} 50% {opacity:.5} 100% {opacity:1}}
#gambar{animation:img 5s infinite;-moz-animation:img 5s infinite;-webkit-animation:img 5s infinite}
.blog-pager{background:transparent;border-radius:0}
</style>
</div>
</div>
</div>
</div>Anonymoushttp://www.blogger.com/profile/15367599609887741667noreply@blogger.com61tag:blogger.com,1999:blog-8721127227831086686.post-11796733773950608142012-01-11T15:01:00.000+07:002012-01-11T15:04:35.036+07:00Menerapkan sistem Tumpang Tindih pada elemen<br />
<a name='more'></a>Saya sarankan sobat sedikit mengerti menganai <a href="http://www.farizky234.blogspot.com/search/label/CSS?max-results=4"><b>CSS</b></a> ketika ingin menerapkan cara ini<br />
<br />
<div style="border-top: 5px solid white;">
<br />
Kali ini saya membahas mengenai cara <a href="http://www.farizky234.blogspot.com/2012/01/menerapkan-sistem-tumpang-tindih-pada.html">Menerapkan sistem Tumpang Tindih pada elemen</a> atau sama saja dengan cara <a href="http://www.farizky234.blogspot.com/2012/01/menerapkan-sistem-tumpang-tindih-pada.html">Mengatasi Widget yang posisinya di bawah widget lain</a>. Ini sering terjadi pada widget-widget yang dipasang melayang atau bahasa kerennya position:fixed nah apabila sobat - sobat pernah mengalami hal seperti buku tamu tersembunyi yang ketika melewati widget lain (elemen lain) dan posisinya membawahinya saya punya sosusinya dan sangat mudah sekali. Silahkan simak kode CSS berikut :<br />
<br />
<div id="body-langkah">
z-index:99;</div>
<br />
Sudah dilihat kodenya sekarang lihat. Ada dua cara menggunakannya yaitu:<br />
<br />
<b>1.</b> Menambahkan kode dibawah dengan nilai besar kedalam CSS widgetnya, apabila widget ingin tampil didepan<br />
<div id="body-langkah">
z-index:99;</div>
<br />
<b>2.</b> Menambahkan kode dibawah dengan nilai kecil kedalam CSS widgetnya, apabila widget ingin tampil dibelakang<br />
<div id="body-langkah">
z-index:-1;</div>
<br />
Jadi intinya posisi akan semakin di depan apabila nilai z-index lebih tinggi dan posisi akan semakin di belakang apabila nilainya lebih kecil dari z-index yang lebih tinggi<br />
<br />
<div style="border-top: 5px solid white;">
<br />
Sampai disini materi kita mengenai cara <a href="http://www.farizky234.blogspot.com/2012/01/menerapkan-sistem-tumpang-tindih-pada.html">Menerapkan sistem Tumpang Tindih pada elemen</a> blog, selamat mencoba dan berhasil, Good Luck.<br />
<style>
body{background:#e6e6fa}
.post{background:transparent;border:0 solid #000;box-shadow:inset 0 0 20px #fff}
#body-langkah{background:#fff;margin:5px 25px 5px 25px;padding:5px;border:1px solid #fff;border-radius:3px;;font-family: 'Electrolize', sans-serif;font-size:15px;-moz-transition:all .5s;-webkit-transition:all .5s;-o-transition:all .5s}
#body-langkah:hover{box-shadow:0 0 5px #fff}
#kolom-gif{-moz-column-count:2;-webkit-column-count:2;column-count:2}
#link a{-moz-transition:all .3s;-webkit-transition:all .3s;-o-transition:all .3s}
#link a:hover{margin-left:25px}
</style></div>
</div>Anonymoushttp://www.blogger.com/profile/15367599609887741667noreply@blogger.com47tag:blogger.com,1999:blog-8721127227831086686.post-571351351688747692012-01-07T05:00:00.000+07:002012-01-07T14:39:12.361+07:00Membuat Widget Dock Style dengan CSS dan HTML<div style="text-align: center;">
<i style="color: red;"><b></b></i><br />
<a name='more'></a><i style="color: red;"><b>Note: Lewati Pembukaan dan perkenalan apabila ingin langsung ke caranya</b></i></div>
<br />
<div style="border-top: 5px solid black;">
<div style="text-align: right;">
<b style="color: red;">Pembukaan</b></div>
<br />
Sebelumnya kita telah <a href="http://www.farizky234.blogspot.com/2012/01/membuat-widget-tersembunyi-dengan-css.html">membuat widget tersembunyi dengan CSS</a>, sekarang saya akan mencoba share karya saya <strike>*sombong mode on</strike> mengenai cara membuat dock dengan CSS, no Javascript jadi ga akan buat size tambah besar.<br />
<br />
Sebetulnya saya sudah agak lama mengetahui cara ini tapi saya tahan sharenya agar satu - satu keluarnya :D<br />
<br />
Yang akan kalian temukan disini :<br />
<div id="link">
<ul>
<li><a href="http://www.farizky234.blogspot.com/2012/01/membuat-widget-dock-style-dengan-css.html">Buat dock style di blogger / blogspot</a></li>
<li><a href="http://www.farizky234.blogspot.com/2012/01/membuat-widget-dock-style-dengan-css.html">Cara membuat widget dock style di blogger / blogspot</a></li>
<li><a href="http://www.farizky234.blogspot.com/2012/01/membuat-widget-dock-style-dengan-css.html">Cara membuat widget shortcut dock di blogger / blogspot</a></li>
<li><a href="http://www.farizky234.blogspot.com/2012/01/membuat-widget-dock-style-dengan-css.html">Cara membuat widget dock style di blogspot </a></li>
<li><a href="http://www.farizky234.blogspot.com/2012/01/membuat-widget-dock-style-dengan-css.html">Cara membuat widget dock style dengan CSS dan HTML</a></li>
<li><a href="http://www.farizky234.blogspot.com/2012/01/membuat-widget-dock-style-dengan-css.html">Cara membuat widget dock style tanpa javascript </a></li>
<li><a href="http://www.farizky234.blogspot.com/2012/01/membuat-widget-dock-style-dengan-css.html">Cara membuat widget dock style di bawah</a></li>
<li><a href="http://www.farizky234.blogspot.com/2012/01/membuat-widget-dock-style-dengan-css.html">Cara membuat widget dock style di atas</a></li>
</ul>
</div>
<br />
<div style="border-top: 5px solid black;">
<div style="color: red; text-align: right;">
<b>Perkenalan</b></div>
<br />
A: Apa itu Dock ? Maksudnya membuat dermaga di blog mang bisa ???<br />
F: bukan itu, maksud disini, dock yaitu susunan icon - icon yang disusun sedemikian rupa agar dimaksudkan mempercantik sebuah tampilan, tahu kan icon yang sejajar yang biasanya berada diatas atau bawah ? kalo<br />
ga tahu lihat gambar di bawah ini :<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img alt="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE2v7FOKVdXWFgKZDhdKErMCetnQHOxE1lXbwQWZU3EwVZle0N9LSYMUBfA89dba3dunv2FVrWIrg8UUmSCg7cSOhlSXLWs5aQXyC3pbRfDudRsn7BBx1T51khZdslh4iR64RjxOuljXo/s1600/dockgj7.jpg" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE2v7FOKVdXWFgKZDhdKErMCetnQHOxE1lXbwQWZU3EwVZle0N9LSYMUBfA89dba3dunv2FVrWIrg8UUmSCg7cSOhlSXLWs5aQXyC3pbRfDudRsn7BBx1T51khZdslh4iR64RjxOuljXo/s320/dockgj7.jpg" style="margin-left: auto; margin-right: auto;" width="320" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Salah satu dock dalam Mac os</td></tr>
</tbody></table>
<div style="text-align: center;">
</div>
<br />
A : Oh tahu tapi kan itu bukannya ada di desktop linux atau Mac ?<br />
F : Makannya saya coba share cara ini ke kamu agar tahu cara buatnya<br />
A : Siap master !<br />
F : Jangan panggil saya master pengetahuan saya masih sempit *malu<br />
<br />
<div style="text-align: right;">
<div style="border-top: 5px solid black;">
<br />
<div style="color: red;">
<b>Step-stepnya</b></div>
</div>
<div style="text-align: left;">
Oke saya sudahi wawancaranya :D, langsung saja saya mulai caranya yaitu :</div>
<br />
<div style="border-top: 5px solid black;">
<div style="color: purple; text-align: right;">
<b>1</b></div>
<div style="text-align: left;">
Seperti biasa sobat buka Tata Letak Blogger kemudian buat widget HTML baru.</div>
<br />
<div style="border-top: 5px solid black;">
<div style="color: purple; text-align: right;">
<b>2</b></div>
<div style="text-align: left;">
Kemudian sobat tinggal copy pastekan script dibawah ini, ( harap diperhatikan saya membuatnya dengan pengetahuan sendiri jadi apabila masih kurang dari sempurna jujur saya belum memasterkan ilmu ini :D ) :</div>
<br />
<div style="border-top: 5px solid black;">
<div style="color: purple; text-align: right;">
<b>3 </b></div>
<div style="color: blue; text-align: center;">
<span style="font-size: large;"><b>1. Dock terletak dibawah :</b></span></div>
<div id="body-langkah" style="text-align: left;">
<style><br />
<b>ul#navigation</b>{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDaYyCI4wpycksSACy4FSDB9jK1b9oaBI_akbbQG5zH3bl3EOctRAecFdwWpVJqdrouBddWaAz8aIr45sWe5qZqc8mCZ31CP-XfypBfI8A-JU3tU2WjZmkAus2pXc0PZfX-y-mG_9aVvXI/s1600/alas.png) bottom no-repeat;bottom:-25px;list-style:none;<b style="background-color: red; color: white;">margin-left:310px</b>;opacity:.3;position:fixed;width:400px;z-index:9;-moz-transition:all .2s ease-out;-webkit-transition:all .2s ease-out;-o-transition:all .2s ease-out}<br />
<b>ul#navigation:hover</b>{opacity:.9}<br />
<b>ul#navigation li</b>{width:60px;display:inline;float:left;border:0}<br />
<b>ul#navigation li a</b>{background-position:center;background-repeat:no-repeat;background-size:40px 46px;display:block;float:left;margin-top:-2px;width:50px;height:25px;padding-top:40px;text-decoration:none;text-align:center;-moz-transition:all .2s;-webkit-transition:all .2s;-o-transition:all .2s;opacity:.7}<br />
<b>ul#navigation li a:hover</b>{background-size:64px 64px;opacity:1}<b></b><br />
<b style="color: red;">ul#navigation .home a</b><span style="color: red;">{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmlUNS-UBxNNX-A_cnbcOho8YctSqX-cFVBfichYSmF765yliLybfZwiDEVcUgr66oERZtow_Pz0vYcjZvP3wGr-PJlLvp074E3zgXl_X5xYM9WAKvlF_azDTcjeTgOVeFd-g5m_M8Yo6V/s1600/home.png)}</span><br />
<b style="color: purple;">ul#navigation .mail a</b><span style="color: purple;">{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixplcAu6-uJBpe02x0kJ6uz0m7CkvdEMFhiC6J6rSUr2qDqYiucNYDFwKcl_4kSyZdmQ4PqIQ76hlOi_Nhh_3oKaOQijm_kEihRK6w5X7P2_fwNrjIkWus3uH-QI6moRYYeBeOcyHrhyphenhyphena7/s1600/mail.png)}</span><br />
<b style="color: #38761d;">ul#navigation .link a</b><span style="color: #38761d;">{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqd4iZnpmZxWMs8JNylrMfLBWgV_Pt3H0JKnJ9JS4O3vaRqL1ePov-IPKW9QwrzCNKfbZKYZFs8k9SBSctYS71Ju0DCjabrms3-2bp3DandwdQLmSt5z8lsoELp8iAzvTQBmqBeg4rW1Aq/s1600/link.png)}</span><br />
<b style="color: magenta;">ul#navigation .history a</b><span style="color: magenta;">{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgabpHKdZcHSBKgY17qYJ5RAL2ILfFRPVAuqaOJDcNZw5JoXMUDNKSgrWwYIZ793KuxBd4fsETB9YDxLv4b5kU1HxWObb7XLIqed9MoXKdwxtAT_Ky7FOjH_NBEH7uYVe58LkO9dyCcd47E/s1600/history.png)}</span><br />
<b style="color: blue;">ul#navigation .google-plus a</b><span style="color: blue;">{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguuwf5CkArWsYHucQzKHrIO70wKbv6qz_otMSzmgavJdWtAVMnDC1hcwa7quXIVqgpeVV1jJA0d-K4zYZS7pQMTAk6QcgAS9X_Z25ZJjS5fwxPDvYO9hVpiB7y7Xllt7KVHdD3vCbjoArj/s1600/google-plus.png)} </span><br />
<div style="color: orange;">
<b>ul#navigation .rss a</b>{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM_KlXQxX2lEUgr9G4Mjb9IKj7xArykoA3b2NatjiSqnsBaNCBWvV3D8BnWCiPfqGxDT2yHiGnd5XRZEdLtifKpQrVZAnldfOxZV445rFkys3mChl7P4dMKj5BrrMdw_EN8izXTI_BllXT/s1600/rss.png)}</div>
<b style="color: #bf9000;">ul#navigation .rss a:hover</b><span style="color: #bf9000;">{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib0avQgVDMnT6MjowikS5Wi0j7WJjrEkpWOtY7qcgGF-Bk-og85AUJrEFH8wyF4hjLdH-ahmMVoAC4WfP0tWZcn9oPygug3rnbrBDZGVPc654gD30cNluYiVojYfbgP7nfpOdpgXuecccN/s1600/rss1.png)}</span><br />
</style><br />
<br />
<ul id="navigation"><br />
<li class="<b style="color: red;">home</b>" title="Kembali ke halaman utama <b style="background-color: orange;">Nama Site / Blog Sobat</b>"><a href="<b style="background-color: yellow;">isi dengan alamat blog / site sobat</b>"></a></li><br />
<li class="<b style="color: purple;">mail</b>" title="Kirim E-mail kepada Admin"><a href="<b style="background-color: yellow;">mailto:isi dengan alamat e-mail sobat</b>"></a></li><br />
<li class="<b style="color: #38761d;">link</b>" title="Lihat <b style="background-color: orange;">Nama Site / Blog Sobat</b> dengan tampilan magazine (Minimalis)"><a href="<b style="background-color: yellow;">isi dengan alamat tampilan magazine sobat</b>"></a></li><br />
<li class="<b style="color: magenta;">history</b>" title="Lihat keseluruhan Entri <b style="background-color: orange;">Nama Site / Blog Sobat</b>"><a href="<b style="background-color: yellow;">isi dengan alamat sitemap sobat</b>"></a></li><br />
<li class="google-plus" title="Lihat Profil Google Plus Admin"><a href="<b style="background-color: yellow;">isi dengan alamat profil google+ sobat</b>"></a></li><br />
<li class="<b style="color: orange;">rss</b>" title="Langganan Farkryzer dengan RSS Feeds"><a href="<b style="background-color: yellow;">isi dengan alamat blog / site sobat</b>/feeds/posts/default"></a></li><br />
</ul></div>
<div style="color: red;">
<b><br /></b></div>
<div style="border-top: 3px solid red;">
<div style="color: red; text-align: left;">
<b>Note :</b><br />
<b>1 </b></div>
<div style="text-align: left;">
<b style="background-color: red; color: white;">margin-left:310px</b> : silahkan sobat rubah sesuaikan dengan lebar blog / site sobat, dengan hitungan 400px yaitu lebar docknya maka masukan <b style="background-color: red; color: white;">margin-left:310px</b>, karena 310px + 400px + 310px = 1020px (sesuai dengan lebar halaman blog saya sekarang). Contoh lain misal lebarnya 1000px maka <b><span style="background-color: red; color: white;">margin-left:300px</span> </b>karena 300px + 400px + 300px, tenang saja hitungannya menggunakan matematika sederhana xD</div>
<div style="text-align: left;">
<b style="color: red;">2</b></div>
<div style="text-align: left;">
Harap diperhatikan apabila sobat ingin merubah gambar iconnya pastikan ukurannya 64px x 64px agar seluruh icon menjadi selarah sehingga tampilan tidak berkurang</div>
<div style="text-align: left;">
<b style="color: red;">3</b></div>
<div style="text-align: left;">
Lihat .home dengan class="home" atau .mail dengan class="mail" setiap elemen css dan html saling berhubungan satu sama lain jadi apabila sobat ingin merubah :</div>
<div style="text-align: left;">
.google-plus menjadi .facebook maka rubah juga class="google-plus" menjadi class="facebook" agar script valid.</div>
<div style="text-align: left;">
<b style="color: red;">4</b></div>
<div style="text-align: left;">
Untuk yang saya buat maksimal 6 icon dengan ukuran 40px x 46px, jadi apabila sobat menyalahi aturan nanti jadi berantakan, kecuali apabila sobat ingin mengembangkannya sendiri, tetapi saya ga tanggung jawab xD</div>
<div style="text-align: right;">
<b><br /></b></div>
<div style="border-top: 3px solid red;">
<br />
<div style="border-top: 2px solid black;">
<div style="color: red; text-align: right;">
<b>Demo</b></div>
<div style="text-align: left;">
Mau lihat demonya ? dah dijadiin widget tuh liat dihalaman bawah halaman ...</div>
<div style="text-align: left;">
<b> </b></div>
<div style="border-top: 2px solid black;">
<br />
<div style="border-top: 5px solid black;">
<div style="color: blue; text-align: center;">
<span style="font-size: large;"><b>2. Dock terletak diatas :</b></span></div>
<div style="text-align: left;">
<div id="body-langkah" style="text-align: left;">
<style><br />
<b>ul#navigation</b>{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDaYyCI4wpycksSACy4FSDB9jK1b9oaBI_akbbQG5zH3bl3EOctRAecFdwWpVJqdrouBddWaAz8aIr45sWe5qZqc8mCZ31CP-XfypBfI8A-JU3tU2WjZmkAus2pXc0PZfX-y-mG_9aVvXI/s1600/alas.png)
bottom no-repeat;list-style:none;<b style="background-color: red; color: white;">margin-left:310px</b>;opacity:.3;position:fixed;top:5px;width:400px;z-index:9;-moz-transition:all
.2s ease-out;-webkit-transition:all .2s ease-out;-o-transition:all .2s
ease-out}<br />
<b>ul#navigation:hover</b>{opacity:.9}<br />
<b>ul#navigation li</b>{width:60px;display:inline;float:left;border:0}<br />
<b>ul#navigation li a</b>{background-position:center;background-repeat:no-repeat;background-size:40px
46px;display:block;float:left;margin-top:-2px;width:50px;height:25px;padding-top:40px;text-decoration:none;text-align:center;-moz-transition:all
.2s;-webkit-transition:all .2s;-o-transition:all .2s;opacity:.7}<br />
<b>ul#navigation li a:hover</b>{background-size:64px 64px;opacity:1}<br />
<b style="color: red;">ul#navigation .home a</b><span style="color: red;">{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmlUNS-UBxNNX-A_cnbcOho8YctSqX-cFVBfichYSmF765yliLybfZwiDEVcUgr66oERZtow_Pz0vYcjZvP3wGr-PJlLvp074E3zgXl_X5xYM9WAKvlF_azDTcjeTgOVeFd-g5m_M8Yo6V/s1600/home.png)}</span><br />
<b style="color: purple;">ul#navigation .mail a</b><span style="color: purple;">{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixplcAu6-uJBpe02x0kJ6uz0m7CkvdEMFhiC6J6rSUr2qDqYiucNYDFwKcl_4kSyZdmQ4PqIQ76hlOi_Nhh_3oKaOQijm_kEihRK6w5X7P2_fwNrjIkWus3uH-QI6moRYYeBeOcyHrhyphenhyphena7/s1600/mail.png)}</span><br />
<b style="color: #38761d;">ul#navigation .link a</b><span style="color: #38761d;">{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqd4iZnpmZxWMs8JNylrMfLBWgV_Pt3H0JKnJ9JS4O3vaRqL1ePov-IPKW9QwrzCNKfbZKYZFs8k9SBSctYS71Ju0DCjabrms3-2bp3DandwdQLmSt5z8lsoELp8iAzvTQBmqBeg4rW1Aq/s1600/link.png)}</span><br />
<b style="color: magenta;">ul#navigation .history a</b><span style="color: magenta;">{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgabpHKdZcHSBKgY17qYJ5RAL2ILfFRPVAuqaOJDcNZw5JoXMUDNKSgrWwYIZ793KuxBd4fsETB9YDxLv4b5kU1HxWObb7XLIqed9MoXKdwxtAT_Ky7FOjH_NBEH7uYVe58LkO9dyCcd47E/s1600/history.png)}</span><br />
<b style="color: blue;">ul#navigation .google-plus a</b><span style="color: blue;">{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguuwf5CkArWsYHucQzKHrIO70wKbv6qz_otMSzmgavJdWtAVMnDC1hcwa7quXIVqgpeVV1jJA0d-K4zYZS7pQMTAk6QcgAS9X_Z25ZJjS5fwxPDvYO9hVpiB7y7Xllt7KVHdD3vCbjoArj/s1600/google-plus.png)} </span><br />
<div style="color: orange;">
<b>ul#navigation .rss a</b>{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM_KlXQxX2lEUgr9G4Mjb9IKj7xArykoA3b2NatjiSqnsBaNCBWvV3D8BnWCiPfqGxDT2yHiGnd5XRZEdLtifKpQrVZAnldfOxZV445rFkys3mChl7P4dMKj5BrrMdw_EN8izXTI_BllXT/s1600/rss.png)}</div>
<b style="color: #bf9000;">ul#navigation .rss a:hover</b><span style="color: #bf9000;">{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib0avQgVDMnT6MjowikS5Wi0j7WJjrEkpWOtY7qcgGF-Bk-og85AUJrEFH8wyF4hjLdH-ahmMVoAC4WfP0tWZcn9oPygug3rnbrBDZGVPc654gD30cNluYiVojYfbgP7nfpOdpgXuecccN/s1600/rss1.png)}</span><br />
</style><br />
<br />
<ul id="navigation"><br />
<li class="<b style="color: red;">home</b>" title="Kembali ke halaman utama <b style="background-color: orange;">Nama Site / Blog Sobat</b>"><a href="<b style="background-color: yellow;">isi dengan alamat blog / site sobat</b>"></a></li><br />
<li class="<b style="color: purple;">mail</b>" title="Kirim E-mail kepada Admin"><a href="<b style="background-color: yellow;">mailto:isi dengan alamat e-mail sobat</b>"></a></li><br />
<li class="<b style="color: #38761d;">link</b>" title="Lihat <b style="background-color: orange;">Nama Site / Blog Sobat</b> dengan tampilan magazine (Minimalis)"><a href="<b style="background-color: yellow;">isi dengan alamat tampilan magazine sobat</b>"></a></li><br />
<li class="<b style="color: magenta;">history</b>" title="Lihat keseluruhan Entri <b style="background-color: orange;">Nama Site / Blog Sobat</b>"><a href="<b style="background-color: yellow;">isi dengan alamat sitemap sobat</b>"></a></li><br />
<li class="google-plus" title="Lihat Profil Google Plus Admin"><a href="<b style="background-color: yellow;">isi dengan alamat profil google+ sobat</b>"></a></li><br />
<li class="<b style="color: orange;">rss</b>" title="Langganan Farkryzer dengan RSS Feeds"><a href="<b style="background-color: yellow;">isi dengan alamat blog / site sobat</b>/feeds/posts/default"></a></li><br />
</ul></div>
<div style="color: red;">
<b><br /></b></div>
</div>
<br />
<div style="border-top: 5px solid black;">
<b style="color: red;">Penutup</b><br />
<br />
<div style="text-align: left;">
Agak ribet ya ? Maaf saya bukan seorang guru yang baik xD, tapi berjuang aja sob hasil baik itu tidak semudah yang kita bayangkan. . .</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Apabila sobat ada masalah ketika membuat dock ini silahkan kirim scriptnya ke e-mail saya agar saya mencoba mengechecknya.</div>
<style>
body{background:#DCDCDC}
.post{background:transparent;border:0 solid #000;box-shadow:inset 0 0 20px #fff}
#body-langkah{background:#f5f5f5;margin:5px 25px 5px 25px;padding:5px;border:1px solid #000;border-radius:3px;;font-family: 'Electrolize', sans-serif;font-size:15px;-moz-transition:all .5s;-webkit-transition:all .5s;-o-transition:all .5s}
#body-langkah:hover{box-shadow:0 0 5px #000}
#kolom-gif{-moz-column-count:2;-webkit-column-count:2;column-count:2}
#link a{-moz-transition:all .3s;-webkit-transition:all .3s;-o-transition:all .3s}
#link a:hover{margin-left:25px}
</style></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Anonymoushttp://www.blogger.com/profile/15367599609887741667noreply@blogger.com43tag:blogger.com,1999:blog-8721127227831086686.post-54522350662117583142012-01-05T11:23:00.000+07:002012-01-10T18:38:24.845+07:00Ukur Waktu Loading Blog dengan GTmetrix<br />
<a name='more'></a>Hari ini saya posting tatapi bukan mengenai trick - trick lagi nanti saya lanjutkan lain waktu tetapi saya share seputar <a href="http://www.farizky234.blogspot.com/2012/01/ukur-waktu-loading-blog-dengan-gtmetrix.html">ukur waktu loading blog dengan GTmetrix</a>, berbeda dengan iWebtool yang hanya mengukur scriptnya saja dengan GTmetrix blog / site sobat diukur sampai kedalam - dalamnya (terlebih gambar) sehingga jauh lebih detail. Nilai tambah lainnya adalah blog sobat diberi nilai dimana itu akan menentukan kualitas blog sobat apakah sudah baik atau masih kurang.<br />
<br />
<div style="text-align: center;">
</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><div id="gambar">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVVUMMexQKTQsjoPfn_2l3b5rol24R5EKZ-3nBfKAHudW-hHta0_HDxWHnRu17sifVi7yFdT__iTrhSL4O_l-wtWn2AVvIQwpLJN4QxxPH3xhl_NysHQTa9kzf-Xvxl83c_7pZKMgE2skg/s1600/review.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVVUMMexQKTQsjoPfn_2l3b5rol24R5EKZ-3nBfKAHudW-hHta0_HDxWHnRu17sifVi7yFdT__iTrhSL4O_l-wtWn2AVvIQwpLJN4QxxPH3xhl_NysHQTa9kzf-Xvxl83c_7pZKMgE2skg/s320/review.jpg" width="320" /></a></div>
</td></tr>
<tr><td class="tr-caption" style="text-align: center;">Klik gambar untuk memperbesar</td></tr>
</tbody></table>
<br />
<div style="border-top: 5px solid #000;">
<b><span style="font-size: large;">Terlihat bahwa :</span></b><br />
<div style="color: #38761d;">
Nilai Page Speed Grade nya mendapat nilai B dengan persentase 85% (baik)</div>
<div style="color: #bf9000;">
Nilai YSlow Grade nya mendapat nilai C dengan persentase 71% (lumayan)</div>
<div style="color: blue;">
Page load time: 3.93s</div>
<div style="color: blue;">
Total page size: 634KB</div>
<div style="color: blue;">
Total number of requests: 94</div>
<br />
<div style="border-top: 5px solid #000;">
<span style="font-size: large;"><b>Indikator dari warna :</b></span><br />
<span class="" id="result_box" lang="id"><span class="hps" style="color: #38761d;">Jika sobat mendapat hijau</span><span style="color: #38761d;"> itu</span><span class="hps" style="color: #38761d;"></span><span style="color: #38761d;"> </span><span class="hps" style="color: #38761d;">menunjukkan bahwa sobat</span><span style="color: #38761d;"> </span><span class="hps" style="color: #38761d;">telah</span><span style="color: #38761d;"> </span><span class="hps" style="color: #38761d;">mencetak</span><span style="color: #38761d;"> nilai </span><span class="hps" style="color: #38761d;">lebih tinggi dari</span><span style="color: #38761d;"> </span><span class="hps" style="color: #38761d;">rata-rata</span><br /> <span class="hps"></span></span><span class="" id="result_box" lang="id" style="color: #990000;"><span class="hps">Jika sobat mendapat merah</span> itu<span class="hps"></span> <span class="hps">menunjukkan bahwa sobat</span> <span class="hps">telah</span> <span class="hps">mencetak</span> nilai <span class="hps">lebih rendah dari</span> <span class="hps">rata-rata</span></span><span class="" id="result_box" lang="id"><span class="hps" style="color: #990000;"></span><span style="color: #990000;"></span><br /> <span class="hps" style="color: #b45f06;">Jika sobat mendapat nilai oranye sobat telah mencetak + / - 5 % dari nilai rata - rata</span></span><br />
<br />
Dan dibawahnya di tag Breakdown disitu dijelaskan secara mendetail apa saja yang harus sobat lakukukan (rekomendasi) agar blog sobat menjadi lebih ringan.<br />
<br />
<div style="border-top: 5px solid #000;">
<div style="text-align: center;">
<div style="color: red;">
<br />
<b>Langsung saja cek disini sobat :</b></div>
</div>
<div id="link" style="text-align: center;">
<b><a href="http://gtmetrix.com/">http://gtmetrix.com/</a></b></div>
<br />
<div style="color: red;">
<b><blink></blink><i><u></u></i></b></div>
<b style="color: orange;">Blog / Site sahabat Farkryzer yang sudah di test : </b><br />
<div style="border-top: 5px solid #000;">
<div id="backlink">
<b>Blog / Site : </b><a href="http://www.aliefkurniawan.com/"><b>http://www.aliefkurniawan.com/</b></a> | 05 / 01 / 2012<br />
<span style="color: #38761d;">Page Speed Grade nya mendapat nilai</span><span style="color: #38761d;"> (B)</span><span style="color: #38761d;"> dengan persentase 86%</span><br />
<span style="color: #bf9000;">YSlow Grade nya mendapat nilai</span><span style="color: #bf9000;"> (C)</span><span style="color: #bf9000;"> dengan persentase 75%</span><br />
<span style="color: blue;">Page load time: 37.80s</span><br />
<span style="color: blue;">Total page size: 819KB</span><br />
<span style="color: blue;">Total number of requests: 112</span><br />
<br />
<b>2. Blog / Site : <a href="http://www.irwanefendi.co.cc/">http://www.irwanefendi.co.cc/</a> | </b>05 / 01 / 2012<br />
<div style="color: #38761d;">
Page Speed Grade nya mendapat nilai (B) dengan persentase <span class="report-score">80%</span></div>
<div style="color: #990000;">
YSlow Grade nya mendapat nilai (E) dengan persentase 55%</div>
<span style="color: blue;">Page load time: 29.28s</span><br />
<span style="color: blue;">Total page size: 2.00MB</span><br />
<span style="color: blue;">Total number of requests: 350</span></div>
<div style="border-top: 3px solid #000;">
<div id="backlink">
<b>3. Blog / Site : <a href="http://www.hariyantowijoyo.blogspot.com/">http://www.hariyantowijoyo.blogspot.com/</a></b> | 05 / 01 /2012<br />
<div style="color: #38761d;">
Page Speed Grade nya mendapat nilai (B) dengan persentase <span class="report-score">85%</span></div>
<div style="color: #990000;">
YSlow Grade nya mendapat nilai (E) dengan persentase <span class="report-score">55%</span></div>
<span style="color: blue;">Page load time: 7.64s</span><br />
<span style="color: blue;">
Total page size: 2.48MB</span><br />
<span style="color: blue;">
Total number of requests: 243</span><br />
<br />
<b>4. Blog / Site : <a href="http://www.sampeweweh.blogspot.com/">http://www.sampeweweh.blogspot.com/</a></b> | 05 / 01 /2012<b></b><br />
<span style="color: #38761d;">Page Speed Grade nya mendapat nilai dengan persentase 80% (B)</span><br />
<div style="color: #b45f06;">
YSlow Grade nya mendapat nilai - dengan persentase 69% (D)</div>
<span style="color: blue;">Page load time: 4.03s</span><br />
<span style="color: blue;">Total page size: 755KB</span><br />
<span style="color: blue;">Total number of requests: 102 </span></div>
<div style="border-top: 5px solid #000;">
<div id="backlink">
<b>5. Blog / Site : <a href="http://www.spider-share.blogspot.com/">http://www.spider-share.blogspot.com/</a></b><b> | </b>05 / 01 / 2012<br />
<div style="color: #38761d;">
Page Speed Grade nya mendapat nilai (B) dengan persentase 82% </div>
<div style="color: #b45f06;">
YSlow Grade nya mendapat nilai (D) dengan persentase 62%</div>
<div style="color: blue;">
Page load time: 56.81s</div>
<div style="color: blue;">
Total page size: 2.64MB</div>
<div style="color: blue;">
Total number of requests: 262</div>
<br />
<b>6. Blog / Site : </b><br />
<b><a href="http://www,asis-sugianto.blogspot.com/">http://www.asis-sugianto.blogspot.com/</a></b><b> </b>| 06 / 01 / 2012<br />
<div style="color: #38761d;">
Page Speed Grade nya mendapat nilai (B) dengan persentase <span class="report-score">81%</span></div>
<div style="color: #660000;">
YSlow Grade nya mendapat nilai (F) dengan persentase <span class="report-score">37%</span> </div>
<span style="color: blue;">Page load time: 21.79s</span><br />
<span style="color: blue;">
Total page size: 1.27MB</span><br />
<span style="color: blue;">
Total number of requests: 153</span></div>
<div style="border-top: 5px solid #000;">
<div id="backlink">
<b>7. Blog / Site : <a href="http://www.mfajar.com/">http://www.mfajar.com/</a> | </b>06 / 01 / 2012<br />
<div style="color: #274e13;">
<i>Page Speed Grade nya mendapat nilai (A) dengan persentase 90%</i></div>
<div style="color: #bf9000;">
YSlow Grade nya mendapat nilai (C) dengan persentase 75% (-)</div>
<span style="color: blue;">Page load time: 6.54s</span><br />
<span style="color: blue;">
Total page size: 710KB</span><br />
<span style="color: blue;">
Total number of requests: 34</span><br />
<br />
<b>8. Blog / Site : <a href="http://www.jurnalrachmat.blogspot.com/">http://www.jurnalrachmat.blogspot.com</a></b><a href="http://www.jurnalrachmat.blogspot.com/">/</a> | 06 / 01 / 2012<br />
<div style="color: #bf9000;">
Page Speed Grade nya mendapat nilai (C) dengan persentase 79%</div>
<div style="color: #b45f06;">
YSlow Grade nya mendapat nilai (D) dengan persentase 69%</div>
<div style="color: blue;">
Page load time: 5.01s</div>
<div style="color: blue;">
Total page size: 698kb</div>
<div style="color: blue;">
Total number of requests: 94</div>
</div>
<div style="border-top: 5px solid #000;">
<div id="backlink">
<b>9. Blog / Site : <a href="http://www.ayriy.blogspot.com/">http://www.ayriy.blogspot.com/</a></b> | 06 / 01 / 2012<br />
<span style="color: #38761d;">Page Speed Grade nya mendapat nilai (B) dengan </span><br />
<span style="color: #38761d;">persentase 87%</span><br />
<span style="color: #b45f06;">YSlow Grade nya mendapat nilai (D) dengan </span><br />
<span style="color: #b45f06;">persentase 70%</span><br />
<div style="color: blue;">
Page load time: 6.24s</div>
<div style="color: blue;">
Total page size: 1.26MB</div>
<div style="color: blue;">
Total number of requests: 155</div>
<br />
<b>10. Blog / Site : <a href="http://www.sin1aja.blogspot.com/">http://www.sin1aja.blogspot.com/</a></b> | 06 / 01 / 2012<br />
<div style="color: #274e13;">
<i>Page Speed Grade nya mendapat nilai (A) dengan persentase 93% </i></div>
<div style="color: #38761d;">
YSlow Grade nya mendapat nilai (B) dengan persentase 84%</div>
<span style="color: blue;">Page load time: 1.38s</span><br />
<span style="color: blue;">
Total page size: 463KB</span><br />
<span style="color: blue;">
Total number of requests: 17</span></div>
<div style="border-top: 5px solid #000;">
<div id="backlink">
<b>12. Blog / Site : <a href="http://www.ghora-aries.blogspot.com/">http://www.ghora-aries.blogspot.com/</a></b> | 07 / 01 / 2012<br />
<div style="color: #38761d;">
Page Speed Grade nya mendapat nilai (B) dengan persentase 86%</div>
<div style="color: #bf9000;">
YSlow Grade nya mendapat nilai (C) dengan persentase 73%</div>
<span style="color: blue;">Page load time: 3.66s</span><br />
<span style="color: blue;">Total page size: 646KB</span><br />
<span style="color: blue;">Total number of requests: 80</span><br />
<br />
<b>12. Blog / Site : <a href="http://www.alam-perwira.blogspot.com/">http://www.alam-perwira.blogspot.com/</a></b> | 10 / 01 / 2012<br />
<div style="color: #38761d;">
Page Speed Grade nya mendapat nilai (B) dengan persentase 85%</div>
<div style="color: #bf9000;">
YSlow Grade nya mendapat nilai (C) dengan persentase 73%</div>
<span style="color: blue;">Page load time: 7.00s</span><br style="color: blue;" /><span style="color: blue;">
Total page size: 909KB</span><br style="color: blue;" /><span style="color: blue;">
Total number of requests: 89</span><br /></div>
<div style="border-top: 5px solid #000;">
<style>
body,.post{background:#FFFAF0}
.post{border:1px solid #000;box-shadow:0 0 10px #000;margin:10px}
#backlink{-moz-column-count:2;-webkit-column-count:2;column-count:2;-moz-column-rule:3px outset #000;-webkit-column-rule:3px outset #000;column-rule:3px outset #000}
#link a{text-decoration:none;color:#fff;cursor:default}
#link{border:1px solid #000;width:175px;margin:auto;padding:auto;background:#000}
#link:hover{background:#333;box-shadow:0 0 5px #333}
#gambar{box-shadow:0 0 10px #000;opacity:.5;transition:all .5s;-moz-transition:all .5s;-webkit-transition:all .5s;-o-transition:all .5s}
#gambar:hover{box-shadow:0 0 0 #000;opacity:1}
</style></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Anonymoushttp://www.blogger.com/profile/15367599609887741667noreply@blogger.com56tag:blogger.com,1999:blog-8721127227831086686.post-22606465244013617452012-01-03T19:33:00.001+07:002012-02-12T15:22:57.168+07:00Membuat widget tersembunyi dengan CSS<br />
<a name='more'></a>Ini 100% buatan saya jadi jika sobat mau copast entri ini silahkan saja tapi dengan syarat backlink ke sini<br />
<br />
Nah Pada entri yang sekarang ini saya selaku Farkryzer Admin <strike>sok resmi</strike> mau mencoba share mengenai cara membuat widget tersembunyi dengan CSS, kenapa CSS ? kenapa tidak javascript / jquery kan lebih bagus ? memang benar javascript / jquery memberikan hal lebih dimana apapun dapat dilakukan dengannya tapi sobat harus tahu bahwa bahasa pemrogramman tadi membutuhkan size lebih bila ditaruh pada blog itulah sebabnya pepatah blogger mengatakan "Perbanyak CSS kurangi Javascript" itu memang ada benarnya. Oke kembali ke topik utama kita sebetulnya mudah saja dalam melakukannya dan kelebihan utama cara ini yaitu kita menggunakan CSS sehingga lebih memangkas size tetapi kerugiannya penerapan ini hanya bisa digunakan pada browser - browser modern seperti firefox, chrome, opera tapi tidak apalah sekarang - sekarang ini browser tersebut sering dipakai.<br />
<br />
Disini dibahas cara :<br />
<ul>
<li><a href="http://www.farizky234.blogspot.com/2012/01/membuat-widget-tersembunyi-dengan-css.html">Membuat widget tersembunyi dengan CSS</a></li>
<li><a href="http://www.farizky234.blogspot.com/2012/01/membuat-widget-tersembunyi-dengan-css.html">Membuat buku tamu tersembunyi dengan CSS</a></li>
<li><a href="http://www.farizky234.blogspot.com/2012/01/membuat-widget-tersembunyi-dengan-css.html">Membuat widget tersembunyi fade in dan fade out dengan CSS</a></li>
<li><a href="http://www.farizky234.blogspot.com/2012/01/membuat-widget-tersembunyi-dengan-css.html">Membuat buku tamu tersembunyi fade in dan fade out dengan CSS</a></li>
<li><a href="http://www.farizky234.blogspot.com/2012/01/membuat-widget-tersembunyi-dengan-css.html">Membuat widget tersembunyi tanpa javascript</a></li>
<li><a href="http://www.farizky234.blogspot.com/2012/01/membuat-widget-tersembunyi-dengan-css.html">Membuat buku tamu tersembunyi tanpa javascript</a></li>
</ul>
<br />
<div style="border-top: 5px solid black;">
<br />
Langkah - langkahnya yaitu :<br />
<br />
<div style="border-top: 5px solid black;">
<div style="text-align: right;">
<b>1</b></div>
Buka Tata Letak Blogger kemudian buat widget HTML baru.<br />
<br />
<div style="border-top: 5px solid black;">
<div style="text-align: right;">
<b>2</b></div>
Kemudian sobat tinggal copy pastekan script dibawah ini :<br />
<br />
<div id="body-langkah">
<style type='text/css'><br />
.fwidget{<span style="background-color: #6aa84f; color: white;">background:#000</span>;border-radius:5px;<span style="background-color: yellow;">bottom:-5px;</span>box-shadow:0 0 5px #fff;color:#fff;float:left;<span style="background-color: #3d85c6; color: white;">height:25px</span>;<span style="background-color: orange;">margin-left:95px</span>;opacity:.8;overflow:hidden;padding:auto;<span style="background-color: cyan;">position:fixed</span>;text-shadow:0 0 5px #000;<span style="background-color: #3d85c6; color: white;">width:90px</span>;z-index:9;-o-transition:all 2s ease-in-out;-moz-transition:all 2s ease-in-out;-webkit-transition:all 2s ease-in-out}<br />
.fwidget:hover{<span style="background-color: #134f5c; color: white;">background:transparent</span>;border:2px solid #000;box-shadow:0 0 15px #000;color:#000;<span style="background-color: #0b5394; color: white;">height:450px</span>;margin-left:20px;opacity:1;<span style="background-color: #0b5394; color: white;">width:240px</span>}<br />
.fwidget-body{-o-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-webkit-transition:all 1s ease-in-out}<br />
.fwidget h3{cursor:point;font-size:13px;text-align:center}<br />
</style><br />
<br />
<div class='fwidget'><br />
<h3><b style="color: red;">Judul Widget</b></h3><br />
<div class='fwidget-body'><br />
<div style="color: red;">
<b style="background-color: magenta; color: white;"><center></b><b>MASUKAN SCRIPT WIDGETNYA MISALNYA BUKU TAMU<span style="background-color: magenta; color: white;"></ceenter> </span></b></div>
</div><br />
</div></div>
<b>Keterangan :</b><span style="background-color: #6aa84f; color: white;"><br /></span><br />
<span style="background-color: #6aa84f; color: white;">background:#000</span> : warna background sebelum dibuka #000 = hitam<br />
<span style="background-color: #134f5c; color: white;">background:transparent</span> : warna background sesudah dibuka transparent = transparan<br />
<span style="background-color: yellow;">bottom:-5px</span> : posisi widget disembunyikan dibawah rubah <span style="background-color: yellow;">bottom</span> menjadi <span style="background-color: yellow;">top</span> bila menginginkan posisi diatas<br />
<span style="background-color: orange;">margin-left:95px</span> : rubah dengan nilai sesuai keinginan dengan aturan makin besar nilainya posisinya makin kekanan<br />
<span style="background-color: cyan;">position:fixed</span> : apabila sobat ingin membuat widget ini tidak ikut pindah ketika discroll rubah menjadi <span style="background-color: cyan;">position:absolute</span><br />
<span style="background-color: #3d85c6; color: white;">height:25px</span> dan <span style="background-color: #3d85c6; color: white;">width:90px</span> : adalah tinggi dan lebar sebelum dibuka rubah angkanya<br />
<span style="background-color: #0b5394; color: white;">height:450px</span> dan <span style="background-color: #0b5394; color: white;">width:240px</span> :adalah tinggi dan lebar sesudah dibuka<br />
<b style="color: red;">Judul Widget</b> : Ganti dengan judul widgetnya / Tulisan tombolnya<br />
<b><span style="color: red;">MASUKAN SCRIPT WIDGETNYA MISALNYA BUKU TAMU</span> </b>: Ganti dengan script widget yang akan dipasang<br />
<b style="background-color: magenta; color: white;"><center></b> dan <b><span style="background-color: magenta; color: white;"></ceenter> </span></b> : hilangkan apabila widget tidak rata tengah<br />
<br />
<div style="border-top: 5px solid black;">
<div style="text-align: right;">
<b> Demo</b></div>
<div style="text-align: center;">
<i>Disini sudah saya pasang demonya dengan tulisan Sorot ini</i></div>
<br />
<style type="text/css">
.fwidget{background:#000;border-radius:5px;bottom:-5px;box-shadow:0 0 5px #fff;color:#fff;float:right;height:30px;margin-right:95px;opacity:.8;overflow:hidden;padding:auto;position:fixed;text-shadow:0 0 5px #000;width:90px;z-index:9;-o-transition:all 2s ease-in-out;-moz-transition:all 2s ease-in-out;-webkit-transition:all 2s ease-in-out}
.fwidget:hover{background:#fff;border:2px solid #000;box-shadow:0 0 15px #000;color:#000;height:350px;margin-right:20px;opacity:1;width:180px}
.fwidget-body{height:225px;margin:auto;padding:0 5px;-o-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-webkit-transition:all 1s ease-in-out}
.fwidget h3{cursor:point;font-size:13px;text-align:center}
</style>
<br />
<div class="fwidget">
<div style="cursor: pointer; font-family: Electrolize, sans-serif; text-align: center;">
Sorot ini</div>
<br />
<br />
<br />
<center><a href="http://www.alexa.com/siteinfo/http://www.farizky234.blogspot.com/"><script language="javascript" src="http://xslt.alexa.com/site_stats/js/s/b?url=http://www.farizky234.blogspot.com/" type="text/javascript">
</script></a></center>
</div>
</div>
</div>
</div>
<div style="border-top: 5px solid black;">
<div style="text-align: right;">
<b>3</b></div>
Simpan dan kemudian Save dan lihat hasilnya<br />
<br />
<div style="border-top: 5px solid black;">
<br />
<style>
body{}
#body-langkah{margin:5px 25px 5px 25px;padding:5px;border:1px solid #000;border-radius:3px;;font-family: 'Electrolize', sans-serif;font-size:15px}
#kolom-gif{-moz-column-count:2;-webkit-column-count:2;column-count:2}
</style><br />
NOTE :<br />
jika kalian ada masalah karena posisi nya mebelakangi / membawahi elemen lain silahkan baca tutorial singkat mengenai <a href="http://www.farizky234.blogspot.com/2012/01/menerapkan-sistem-tumpang-tindih-pada.html">Menerapkan sistem tumpang tindih</a><br />
<br />
Akhir kata saya ucapkan Terima kasih sudah mau membaca entri ini semoga bermanfaat, silahkan isi kotak komentar apabila ada yang sobat tanyakan mengenai cara tadi ...<br />
<br />
<ul>
<li>Atau bila perlu kirim email kepada saya apabila ingin bertanya lebih dalam, tetapi mohon maaf apabila dibalasnya terlalu lama mungkin saat itu saya sedang sibuk. Tapi bakal dibales secepatnya :)</li>
<li>Atau +saya di google plus dan chat disana Terima kasih</li>
</ul>
<br />
<div style="border-top: 5px solid black;">
<style>
body{background:#ADFF2F}
#body-langkah{margin:5px 25px 5px 25px;padding:5px;border:1px solid #000;border-radius:3px;;font-family: 'Electrolize', sans-serif;font-size:15px}
#kolom-gif{-moz-column-count:2;-webkit-column-count:2;column-count:2}
</style></div>
</div>
</div>
</div>Anonymoushttp://www.blogger.com/profile/15367599609887741667noreply@blogger.com66tag:blogger.com,1999:blog-8721127227831086686.post-66265230825201769632012-01-02T15:07:00.000+07:002012-01-02T15:11:52.887+07:00Rubah warna blok tulisan dengan CSS<br />
<a name='more'></a>Mungkin sebagian blogger sudah tahu trick ini tetapi saya sengaja buat untuk para blogger yang belum tahu cara ini sekalian update blog karena saya sudah tidak ada ide lagi :D dan juga melengkapi tutorial CSS<br />
<br />
<a href="http://www.farizky234.blogspot.com/2012/01/rubah-warna-blok-tulisan-dengan-css.html">Rubah warna blok tulisan dengan CSS</a><br />
<b></b><br />
<div style="border-top: 4px solid #000;">
<div style="text-align: right;">
<b>1</b></div>
Caranya yaitu sangat mudah hanya mengcopykan script CSS di bawah ini :<br />
<div id="body-langkah">
::selection{<span style="background-color: red; color: white;">color:#fff;background:#000</span>} <br />
::-moz-selection{<span style="background-color: red; color: white;">color:#fff;background:#000</span>}<br />
::-webkit-selection{<span style="background-color: red; color: white;">color:#fff;background:#000</span>}</div>
<div style="text-align: center;">
<br /></div>
<div style="color: orange; text-align: center;">
<b>Rubah tulisan yang saya warnai merah sesuai dengan keinginan kamu contohnya yaitu :</b></div>
<div style="text-align: left;">
color:<span style="color: red;">#fff </span>artinya tulisan ketika di blok berwarna putih = #fff</div>
<div style="text-align: left;">
background:<span style="color: red;">#000 </span>artinya background tulisan ketika di blok berwarna hitam = #000</div>
<b><br />
</b><br />
<br />
<div style="border-top: 4px solid #000;">
<div style="text-align: right;">
<b>2</b></div>
Masukan kode tersebut ke <b>ruang lingkup CSS</b> di template sobat atau jika tidak tahu Cari kode <b>]]></b:skin></b> dan masukan script tadi sebelumnya / diatasnya<br />
<br />
<div style="border-top: 4px solid #000;">
<div style="text-align: right;">
<b>3</b></div>
<div style="text-align: left;">
Save Template dan lihat hasilnya<br />
</div>
<div style="border-top: 4px solid #000;">
<style>
body{background:#f64950}
#body-langkah{margin:5px 25px 5px 25px;padding:5px;border:1px solid #000;border-radius:3px;;font-family: 'Electrolize', sans-serif;font-size:15px}
#kolom-gif{-moz-column-count:2;-webkit-column-count:2;column-count:2}
</style></div>
</div>
</div>
</div>Anonymoushttp://www.blogger.com/profile/15367599609887741667noreply@blogger.com6tag:blogger.com,1999:blog-8721127227831086686.post-68186280269023334472011-12-29T18:25:00.001+07:002011-12-29T21:18:53.455+07:00Macam - macam blog di Indonesia<br />
<a name='more'></a>Beralih dari post - post sebelumnya yang lumayan serius, sekarang saya mencoba untuk entri yang lebih easy sedikit. Lagi pula saya sedikit bingung mau ngepost apa ...<br />
<br />
<div style="text-align: center;">
<img height="200" id="il_fi" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXR67i8StaZBwxId_Ng6BKD29NH4e8c-lwTPN5dSWHagHAeTHWJRRXxtv59tc-9IEHLjZKIWqKNbI5x0E0oiEtNId-mu86Ffdjh3YIcamOPSZHK_pksjFHhoojE9b1Qybr8V97DUpBK0w/s200/Blogger-deevro.jpg" style="padding-bottom: 8px; padding-right: 8px; padding-top: 8px;" width="199" /></div>
<br />
Well sedikit membahas saja blog - blog di Indonesia itu banyak dan macam - macamnya pun beragam disini saya akan mengkategorikannya dalam beberapa macam blog di Indonesia di lihat dari isinya serta cirinya, silahkan simak baik - baik :D :<br />
<br />
<div style="border-top: 5px solid black;">
<div id="bagian">
<b></b><br />
<br />
<div id="judul">
<b>1. Blog yang Share Semua</b></div>
<br />
Sangat sulit mencari nama yang pas untuk ini, Ciri - ciri pertama blog ini yaitu ini sering update ( setiap hari dapat menerbitkan lebih dari satu entri ), ntah itu hasil copast atau buatan sendiri. Blognya ramai, Pengunjungnya banyak, biasanya mereka menyempatkan diri untuk baca artikel yang berisi info - info menarik, hal unik aneh dll. Followers dan likers untuk blog ini relatif banyak.<br />
<br /></div>
<div style="border-top: 5px solid black;">
<div id="bagian">
<br />
<div id="judul">
<b> 2. Blog Master</b></div>
<br />
Blog yang sangat dibutuhkan oleh para newbie blogger, dihormati oleh para blogger karena isinya yang berisi mengenai modifikasi blog serta pelajaran seputar ilmu blog, pengunjungnya pun banyak dan kebanyakan datang dari mesin pencari google, yang tersasar ke blog tersebut. Dari followers dan Likers pun relatif banyak, bahkan saya menemukan yang lebih dari 2000 ( <strike>saya saja baru 10%nya T_T</strike> )<br />
<br /></div>
<div style="border-top: 5px solid black;">
<div id="bagian">
<br />
<b></b>
<br />
<div id="judul">
<b>3. Blog Designer</b></div>
<br />
<div style="text-align: center;">
Blog yang sangat dikagumi. Blogger tersebut sangat mahir dalam mendesain tampilan blog. Membuat para pengunjung sangat betah. Ciri - cirinya ya itu tadi dari tampilan, ada dua perbedaan yaitu yang satu tampilan pada blognya all out maksudnya tidak peduli mau size blognya besar atau kecil yang penting cantuk, dan yang satu lagi tampilan yang juga maksimal tetapi masih menyeimbangkannya dengan size blog yang ringan.</div>
<br />
<br /></div>
<div style="border-top: 5px solid black;">
<div id="bagian">
<br />
<b></b><br />
<div id="judul">
<b>4. Blog Bisnis</b></div>
<br />
Blog ini memiliki ciri yaitu jumlah iklan yang sangat banyak, bahkan hampir setengah dari blognya iklan mau itu yang melayang - layang sampai harus mengklik close dua kali, iklan yang menderet dari atas hingga bawah halaman dll. Biasanya blogger ini saling bekerja sama dengan blogger lainnya dalam hal mencari keuntungan yaitu dengan cara saling mengklik iklannya.<br />
<br /></div>
<div style="border-top: 5px solid black;">
<div id="bagian">
<br />
<b></b><br />
<div id="judul">
<b>5. Blog Bisnis part 2</b></div>
<br />
<strike>Jiah dah kayak mau download game aja pake part - part segala</strike>. Maksudnya yaitu tujuan mereka sama dengan yang sudah saya sebutkan diatas hanya saja perbedaannya yaitu pada letak caranya, blogger ini mendapat keuntungan dengan cara menjual barang baik itu baju, gadget dll. Biasanya barang yang dijual merupakan barang usaha pribadi, keluarga, teman dll.<br />
<br /></div>
<div style="border-top: 5px solid black;">
<div id="bagian">
<br />
<b></b><br />
<div id="judul">
<b>6. Diary Blog</b></div>
<br />
Blogger ini memanfaatkan blognya sebagai sarana curhat, cerita pribadi. Pengunjung blog ini relatif sedikit, dan waktu aktif dari bloggernya pun relatif sebentar.<br />
<br /></div>
<div style="border-top: 5px solid black;">
<div id="bagian">
<br />
<b></b><br />
<div id="judul">
<b>7. Blog sharing File</b></div>
<br />
Tentu saja blogger ini sangat dibutuhkan di dunia maya, karena mereka menyediakan file - file baik itu game, film <strike>( ehemm ... xD )</strike>, sofware, <strike>hardware ( makin gaje aja )</strike> dll. Pengunjungnya pun kebanyakan yang nyasar dari nyai google dan likersnya pun banyak, mungkin pengunjung memberi like pada blog tersebut sebagai tanda terima kasih jarena file yang di share dapat digunakan.<br />
<br /></div>
<div style="border-top: 5px solid black;">
<div id="bagian">
<br />
<b></b><br />
<div id="judul">
<b>8. Blog sharing Ilmu</b></div>
<br />
Tentu saja ini yang sangat berguna, terutama bagi para pelajar. Bila mereka diharuskan mencari pembahasan materi merekalah yang dicari tetapi biasanya pengunjung secara random mengunjungi nya karena mereka dapat entrinya pun berasal dari arahan mbah google. Dan contoh lainnya blog ini menyediakan berbagai tips mengenai ilmu modifikasi komputer, os bahkan sampai yang berbau otomotif, kesehatan dll. Mencirikannya menjadi salah satu blog yang paling berguna.<br />
<br /></div>
<div style="border-top: 5px solid black;">
<div id="bagian">
<br />
<b></b><br />
<div id="judul">
<b>9. Genuine Blog</b></div>
<br />
Maksudnya yaitu semua entri / artikel yang berasal dari blognya 100% orisinil buatan sendiri biasanya mengenai pembahasan apapun serta hal - hal mengenai motifasi, dan juga blog yang berisi karya sastra seperti puisi, cerpen pun masuk kategori ini.<br />
<br /></div>
<div style="border-top: 5px solid black;">
<div id="bagian">
<br />
<b></b><br />
<div id="judul">
<b>10. Blog Fansuber</b></div>
<br />
Nah kalo yang ini saya suka karena mereka lah yang memberikan separuh kehidupannya untuk berjuang tanpa pamrih membuat subtitle serta encoding film ( Anime ) *lebaymode on. Tapi seriusan sob mereka itu memang perlu di puji atas kerja kerasnya, cirinya yaitu pengunjugnnya ( saya termasuk ) yang setia karena pasti absen setiap waktu ketika episode berikutnya muncul. Likers nya pun banyak dan satu lagi biasanya pengurusnya alias adminnya lebih dari satu.<br />
<br /></div>
<div style="border-top: 5px solid black;">
<div style="text-align: center;">
</div>
<br />
Segitu saja entri dari saya menurutmu kalian termasuk yang mana ???
<style>
body{background:#FF8C00}
#bagian{transition:all .5s;-moz-transition:all .5s;-webkit-transiton:all .5s;-o-transition:all .5s;padding:10px;cursor:default}
#bagian:hover{box-shadow:#000 0 0 10px inset}
#judul{background:#000;color:#fff;margin:auto;text-align:center;float:center;width:250px;border-radius:5px}
#judul:hover{background:#2F4F4F;color:#fff;}
</style></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Anonymoushttp://www.blogger.com/profile/15367599609887741667noreply@blogger.com30tag:blogger.com,1999:blog-8721127227831086686.post-71907339442178907442011-12-24T20:21:00.000+07:002011-12-29T12:29:16.119+07:00The Hand Resist Him, Fenomena Lukisan Berpenghuni Gaib<br />
<a name='more'></a>
Sekali - sekali saya ingin mengepost mengenai artikel seram, oke dari pada kelamaan silahkan simak baik - baik :
<div style="border-top: 5px solid #000;">
Konon di dunia ini ada lukisan yang terkutuk. Berita ini sudah tersebar
ke seluruh penjuru dunia sejak dahulu, judul lukisannya 'The Hand Resist
Him' (THRH).<br />
<br />
THRH atau yang juga dikenal sebagai eBay Haunted Painting adalah lukisan
yang dibuat oleh Bill Stoneham pada taun 1972, di lukisan ini, dia
menggambarkan seorang anak kecil berdiri di depan sebuah pintu kaca
bersama bonekanya, di pintunya banyak tangan yang nempel. <br />
<br />
Menurut Bill, anak kecil di lukisan itu adalah dirinya saat berumur 5
tahun, pintunya merupakan pemisah antara dunia nyata dan dunia mimpi dan
bonekanya sendiri sebagai pemandu yang mengawal anak kecil itu.
Sedangkan tangan-tangan yang menempel di pintu menggambarkan kehidupan
lain.<br />
<br />
<div style="text-align: center;">
<img alt="" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQV3FaiZ4NOOK5j6rzzlYzhPX7BPbnRBtJfd4rrXzo8B-nvqYvQFBv0IyY5sseuixd8FeDTGBkMpXLM71mdCMxreiMz_KVxABpCLHVmk4FYfNvG7HGjKcOgqLwjNXZ-nSVLvez5fqq3_w/s400/hands_resist_him1.jpg" /></div>
<br />
Lukisan ini mulai jadi 'Urband legend' sejak di posting ke eBay pada
Februari 2000. Lukisan ini pertama kali di pamerkan di Galeri Los
Angeles tahun 1970-an, THRH akhirnya jatuh ke tangan aktor John Marley,
dia terkenal atas perannya sebagai Jack Woltz dalam The Godfather. <br />
<br />
<div style="text-align: center;">
<img alt="" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn3cDu8dAFpNy3HMDvk6KrIVwlODRkqLfZC5FNqgO2rrGp0-rtI0RERU1eaZwixRl7WWgCiq2uPSbNyw4bP7KH9_3n599xJA6gLzOLOYazAeEfYsBNEKotb5_jE8CQ0jtPjnSxv5FMOHE/s320/11116-7386.gif" /></div>
<br />
<br />
Setelah Marley meninggal, lukisan itu terus berpindah tangan di California, sampai akhirnya ditemui di tempat pelelangan.<br />
<br />
THRH muncul di situs lelang eBay bulan Februari 2000. Menurut
penjualnya, lukisan itu membawa kutukan. Dia bilang kalau karakter dalam
lukisan itu bergerak di malam hari, dan kadang-kadang hilang dari
lukisan itu ke dalam bagian rumah yang ada di lukisan. <br />
<br />
Penjual yang namanya tidak diketahui ini juga bilang kalau karakter
boneka wanita mengancam karakter laki-laki dengan benda yang dia pegang,
ini membuat karakter laki-laki meninggalkan lukisan. Dia juga bilang
kalo dia tidak bertanggung jawab atas apa yang terjadi aama pembeli THRH
berikutnya.<br />
<br />
Berita ini menyebar cepat di internet, menurut orang yang sudah melihat
lukisan ini, mereka merasa tidak nyaman dan ketakutan setelah melihat
lukisan ini. Di eBay sendiri lukisan ini dilihat sebanyak 30 ribu kali.<br />
<br />
Dengan tawaran awal hanya $199, THRH berhasil terjual $1,025.
Pembelinya, seorang pemilik Galeri di Grand Rapids, Michigan,
menghubungi Bill Stoneham berkaitan dengan horor di lukisan itu dan
deskripsi seram di eBay. Dia mengaku terkejut dengan semua cerita dan
interpretasi aneh terhadap lukisan itu. <br />
<br />
Bill juga bilang kalau pemilik galeri dimana THRH dipamerkan pertama
kali dan kritikus yang mengkritik lukisan ini meninggal kurang dari 1
tahun setelah kontak dengan lukisan ini. <br />
<br />
Bill juga membuat sekuel dari lukisan itu yang judulnya Resistance at the Threshold, yang juga terlihat menyimpan misteri.<br />
<br />
<div style="text-align: center;">
<img alt="" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr8iT96VwoYl6_UFRZ7htuayqiKswIZq7VR2VDH8_ViyudfAguvHZAjNBKT7eim9LcnlUhFFirbNge1PuDyFU-cIR0yAgrAnpf6LzrFUx6d7Kj5zIcp-hMhWDQpEkhCg3k-5NTcb4qCu4/s400/5080576.jpg" /></div>
<br />
<br />
Di lukisan yang ini, anak laki-lakinya sudah dewasa, bonekanya juga
sudah rusak-rusak. Belum ada laporan lagi apakah lukisan ini menghantui
pemiliknya yang baru. Hal ini juga bisa aaja cuma hoax yang sengaja
dibuat agar lukisan ini laku mahal.<br />
<br />
Berbicara tentang lukisan yang berpenghuni, baru-baru ini ada fenomena
lukisan hidup yang tidak kalah serem, liat saja lukisan di bawah ini.. <br />
<br />
<div style="text-align: center;">
<img alt="" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHjBemFGzrE_UHHTus906t3Y8RP-G-TmGqbZpEHPAIRIwGvRG5r50QpTzs-XiY3tJspRrKjZp3Mvynm7YKbd8Oevb525Ez3tjsxcWXtLog4x87ZTIL7Ad-BYssJrQ0X3d_9y1T_vNk3h4/s320/lukisaaan.jpg" /></div>
<br />
Lukisan ini dibuat oleh seorang gadis di jepang, konon, setelah dia
menyelesaikan lukisan potret dirinya, lalu ia bunuh diri, yang tidak
kalah serem, katanya kalau kita liat lukisan ini 5 menit maka gambarnya
bakal berubah.
source: indowebster.web.id/showthread.php?t=174055
<style>
body{background:#2F4F4F}
</style></div>Anonymoushttp://www.blogger.com/profile/15367599609887741667noreply@blogger.com28tag:blogger.com,1999:blog-8721127227831086686.post-54634873111272128332011-12-24T10:19:00.002+07:002011-12-24T15:46:49.410+07:00Membuat lipatan atau lengkungan dengan CSS3 Border Radius<br />
<a name='more'></a><br />
Trick ini hanya pengenmbangan dari Cara membuat <a href="http://www.farizky234.blogspot.com/2011/09/bab-vii-belajar-css3-bagian-1.html">border radius</a> dengan dengan <a href="http://www.farizky234.blogspot.com/2011/09/bab-vii-belajar-css3-bagian-1.html">box shadow</a>. Oke dari pada lama - lama langsung saja simak trick berikut :<br />
<br />
Pertama - tama pilih bagian mana yang akan di buat efek ini misalkan kamu ingin membuatnya pada <br />
<pre id="line19">.post, kemudian masukan script css ini :</pre>
<div id="body-langkah">
border-<span style="background-color: red; color: white;">bottom</span>-<span style="background-color: orange;">left</span>-radius: <span style="background-color: red; color: white;">100px</span> <span style="background-color: orange;">20px</span>;box-shadow: <span style="background-color: yellow;">-5px 10px 15px</span> <span style="background-color: lime;">#999;</span></div>
<div id="lipatan">
<br /></div>
<div style="text-align: center;">
<br />
<style>
body{background:}
#lipatan{background-color: #fff;display: block;margin:auto;height: 97px;width: 208px;color: #565656;vertical-align: middle;text-decoration: none;border: 1px solid #CCC;border-bottom-left-radius: 100px 20px;box-shadow: -5px 10px 15px #999}
#body-langkah{margin:5px 25px 5px 25px;padding:5px;border:1px solid #000;border-radius:3px;;font-family: 'Electrolize', sans-serif;font-size:15px}
#kolom-gif{-moz-column-count:2;-webkit-column-count:2;column-count:2}
</style>
</div>
<div style="text-align: center;">
Note:<span style="background-color: red; color: white;">Yang diwarnai yaitu antara bottom dengan 100px berhubungan dimana 100px merupakan nilai dari bottom</span> dan <span style="background-color: orange;">pada left memiliki nilai 20px</span>, silahkan rubah nilai tersebut sesuai dengan keinginan kalian. <span style="background-color: yellow;">Dan untuk warna kuning merupakan nilai dari shadow</span>, <span style="background-color: lime;">dan hijau merupakan warna dari shadow box diatas</span></div>
<div style="text-align: center;">
<br />
<style>
body{background:}
#lipatan{background-color: #fff;display: block;margin:auto;height: 97px;width: 208px;color: #565656;vertical-align: middle;text-decoration: none;border: 1px solid #CCC;border-bottom-left-radius: 100px 20px;box-shadow: -5px 10px 15px #999}
#body-langkah{margin:5px 25px 5px 25px;padding:5px;border:1px solid #000;border-radius:3px;;font-family: 'Electrolize', sans-serif;font-size:15px}
#kolom-gif{-moz-column-count:2;-webkit-column-count:2;column-count:2}
</style>
</div>
<div style="text-align: left;">
Berikut beberapa contoh script lipatan dengan CSS3 Border Radius</div>
<br />
<div style="text-align: left;">
<div id="lipatan1">
<br />
border-top-left-radius: 100px 20px;box-shadow: -10px -5px 15px #999;</div>
<br />
<div id="lipatan2">
border-top-right-radius: 20px 20px;border-bottom-left-radius: 20px 20px;</div>
<br />
<div id="lipatan3">
border-bottom-right-radius: 100px 100px;</div>
<br />
<div id="lipatan4" style="text-align: center;">
border-top-left-radius: 20px 20px;border-top-right-radius: 20px 20px;border-bottom-right-radius: 100px 100px;border-bottom-left-radius: 100px 100px;</div>
<br />
Sobat tinggal utak-atik sedikit untuk hasil yang sobat inginkan, silahkan isi kotak komentar apabila ada yang di tanyakan ^_^<br />
<br />
<div style="color: red;">
<b>TAMBAHAN ( Dengan Transisi ) </b></div>
Bagaimana jika hasil barusan kita gabungkan dengan efek transisi silahkan lihat contoh dibawah ini :<br />
<div id="lipatan5">
<br /></div>
Tambahkan script CSS3 transisi, bila sobat belum mengerti. Terlebih dahulu pelajari di <a href="http://www.farizky234.blogspot.com/2011/09/bab-ix-belajar-css3-bagian-3-transisi.html">Bab IX : Belajar CSS3 Bagian 3 ( Transisi )</a><br />
<div id="body-langkah">
<b>#lipatan</b> {background-color: #fff;display: block;margin:auto;height: 97px;width: 400px;color: #565656;vertical-align: middle;text-decoration: none;border: 1px solid #ccc;padding:5px;<span style="background-color: red; color: white;">-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s</span>}</div>
Tambahkan selection :hover untuk bentuk ketika disorot, jika sobat belum mengerti silahkan pelajari terlebih dahulu di : <a href="http://www.farizky234.blogspot.com/2011/09/bab-iv-belajar-css-bagian-3-link.html">Bab IV : Belajar CSS bagian 3 ( Link | hover )</a><br />
<div id="body-langkah">
<b>#lipatan:<span style="background-color: yellow;">hover</span></b> {border-bottom-left-radius: 100px 20px;box-shadow: -5px 10px 15px #999}</div>
<style>
body{background:#fff8dc}
#lipatan,#lipatan1,#lipatan2,#lipatan3,#lipatan4{background-color: #fff;display: block;margin:auto;height: 97px;width: 400px;color: #565656;vertical-align: middle;text-decoration: none;border: 1px solid #CCC;padding:5px}
#lipatan{border-bottom-left-radius: 100px 20px;box-shadow: -5px 10px 15px #999}
#lipatan1{border-top-left-radius: 100px 20px;box-shadow: -10px -5px 15px #999}
#lipatan2{border-top-right-radius: 20px 20px;border-bottom-left-radius: 20px 20px;border: 3px solid #622222}
#lipatan3{border-bottom-right-radius: 100px 100px}
#lipatan4{border-top-left-radius: 20px 20px;border-top-right-radius: 20px 20px;border-bottom-right-radius: 100px 100px;border-bottom-left-radius: 100px 100px;box-shadow: 0 0 15px #999}
#lipatan5{background-color: #fff;display: block;margin:auto;height: 97px;width: 400px;color: #565656;vertical-align: middle;text-decoration: none;border: 1px solid #CCC;padding:5px;-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s}
#lipatan5:hover{border-bottom-left-radius: 100px 20px;box-shadow: -5px 10px 15px #999}
#body-langkah{margin:5px 25px 5px 25px;padding:5px;border:1px solid #000;border-radius:3px;;font-family: 'Electrolize', sans-serif;font-size:15px}
#kolom-gif{-moz-column-count:2;-webkit-column-count:2;column-count:2}
</style>
</div>Anonymoushttp://www.blogger.com/profile/15367599609887741667noreply@blogger.com8tag:blogger.com,1999:blog-8721127227831086686.post-23281359367334473342011-12-19T10:12:00.001+07:002011-12-30T16:36:55.688+07:00Membuat status loading ketika memuat halaman blog<div class="separator" style="clear: both; text-align: center;">
</div>
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: left;">
Sekarang saya akan sharing mengenai <a href="http://farizky234.blogspot.com/2011/12/cara-membuat-status-loading-ketika.html"><u>cara membuat status loading ketika memuat halaman blog</u></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Well, bila sobat belum tahu dan masih bingung maksudnya silahkan lihat screenshot di bawah ini :</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl0XrcI7oEBibTtSuH6BRw4eGrd-TM9-ETzYiEsFTXDmr-RkaRP6GNvi8Oevm-4bYKMa7SFKZYVtfypPtvE7X4gSns2MRlcmXXeGjvqoK9U1sDgsVLNHFnQKs7begOQvL4tCKZy1FMlSjG/s1600/loading.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="108" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl0XrcI7oEBibTtSuH6BRw4eGrd-TM9-ETzYiEsFTXDmr-RkaRP6GNvi8Oevm-4bYKMa7SFKZYVtfypPtvE7X4gSns2MRlcmXXeGjvqoK9U1sDgsVLNHFnQKs7begOQvL4tCKZy1FMlSjG/s320/loading.jpg" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Status ini berguna bila sobat memiliki blog yang berat atau sekedar membuat blog menjadi lebih dinamis</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; color: #990000; text-align: left;">
<span style="font-size: large;"><b>Langkah - langkahnya yaitu :</b></span></div>
<div class="separator" style="clear: both; color: #990000; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; color: #cc0000; text-align: left;">
<b>1. Masuk ke Template >>> Edit HTML</b></div>
<div class="separator" style="clear: both; color: #cc0000; text-align: left;">
<b>2. Cari kode <body> kemudian ganti dengan script dibawah ini : </b></div>
<div id="body-langkah" style="font-family: inherit;">
<span class="fullpost" style="font-size: small;"><body onLoad='init()'><div id='loading''> <img border='0' src='</span><span style="background-color: yellow; font-size: small;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYMuyg0U1Q7ppofWq_FreULKP0wP5Z1v6uDblpeTRAzhtkz7HNtVO51Arsf6wwWXSBLEl27J4h4W2ddRVvIIM77NiqGP40-iAt2PRK9qNWsvoSNv7DfCidFra0_8ikeJh-O8x7jvSiPprt/s1600/f2.gif</span><span class="fullpost" style="font-size: small;"><span style="background-color: yellow;">'</span>/></div> <script src='http://farkryzer-script.googlecode.com/files/loading.js' type='text/javascript</span><span class="fullpost" style="font-size: small;">' type='text/javascript'/></span></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div id="kolom-gif"">
Note: yang saya warnai kuning adalah gambar loading dari statusnya, silahkan ganti sesuai dengan keinginan sobat, dibawah ini beberapa macam gambar yang bisa sobat pilih <i><b>(gambar ringan tidak lebih dari 10kb dan rata-rata 5kb)</b></i> :<br />
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYMuyg0U1Q7ppofWq_FreULKP0wP5Z1v6uDblpeTRAzhtkz7HNtVO51Arsf6wwWXSBLEl27J4h4W2ddRVvIIM77NiqGP40-iAt2PRK9qNWsvoSNv7DfCidFra0_8ikeJh-O8x7jvSiPprt/s1600/f2.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYMuyg0U1Q7ppofWq_FreULKP0wP5Z1v6uDblpeTRAzhtkz7HNtVO51Arsf6wwWXSBLEl27J4h4W2ddRVvIIM77NiqGP40-iAt2PRK9qNWsvoSNv7DfCidFra0_8ikeJh-O8x7jvSiPprt/s1600/f2.gif" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUSKbGMl_SVN51yvU40JrUFP0bwT-YZKYsXALzcsA3qMM2BOffk2sUNALv6pAfUOt7uevgvg0Y7jSrLOTue6_GxCBaYaH5l7pMFqtN4Laa0ftvEzwaRR7DyFeViYCeN5QEfhdyOt5XLTGq/s1600/f3.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUSKbGMl_SVN51yvU40JrUFP0bwT-YZKYsXALzcsA3qMM2BOffk2sUNALv6pAfUOt7uevgvg0Y7jSrLOTue6_GxCBaYaH5l7pMFqtN4Laa0ftvEzwaRR7DyFeViYCeN5QEfhdyOt5XLTGq/s1600/f3.gif" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYMqrruUPEkYnlopad_6Z9e_1aHXlcQyB-i5OmT0GhRxlLXAJZKDnwbBC4sOWnFJn1LpUtFC0Rhkhs-79PVHmLH2STLyOV0lIx-WOlxLJalpKPup8qPprW2gope_80bHMKVxa496ngDKPm/s1600/f4.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYMqrruUPEkYnlopad_6Z9e_1aHXlcQyB-i5OmT0GhRxlLXAJZKDnwbBC4sOWnFJn1LpUtFC0Rhkhs-79PVHmLH2STLyOV0lIx-WOlxLJalpKPup8qPprW2gope_80bHMKVxa496ngDKPm/s1600/f4.gif" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj5WBjS86NLKjSDYl2fI3UH38X-BHHO7MFep3dhOMdi2ctJ_QX3PTDYmvisWPtz-CalhL-wJR0qK5gIxGCZI8bV6X7nj163m30tTPvurs6kFjUsYYC2GKz4hsemZMzJTD2lMC5gQPn4lYA/s1600/f1.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj5WBjS86NLKjSDYl2fI3UH38X-BHHO7MFep3dhOMdi2ctJ_QX3PTDYmvisWPtz-CalhL-wJR0qK5gIxGCZI8bV6X7nj163m30tTPvurs6kFjUsYYC2GKz4hsemZMzJTD2lMC5gQPn4lYA/s1600/f1.gif" /></a></div>
<div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ1aO3PVu3kqOZbBScRj30zniraE_q7A3eOZtS8KMn_RDH4O0fq6KxBbKZXuuSNDePU0MEcUuTVbUdU9UemyfDmZrAghGi6d-wRUjtxC-aGlhAC-REr_kj0uDB1fDrAwSTlVyxsMF9-urh/s1600/f5.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ1aO3PVu3kqOZbBScRj30zniraE_q7A3eOZtS8KMn_RDH4O0fq6KxBbKZXuuSNDePU0MEcUuTVbUdU9UemyfDmZrAghGi6d-wRUjtxC-aGlhAC-REr_kj0uDB1fDrAwSTlVyxsMF9-urh/s1600/f5.gif" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv3cxAwc3e8lvsutRrIrxUuhfeog8wiHmpDrb8pjltz8VRq4Wv7TW4VLkoFVsy004kO-qAKWywYYRfLHpPLbx5Y9CHfcSsiwmoXcWZhAsawjAaLEvgTgfpHsXCigv03BXX_9ZDre2p0gZd/s1600/f8.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv3cxAwc3e8lvsutRrIrxUuhfeog8wiHmpDrb8pjltz8VRq4Wv7TW4VLkoFVsy004kO-qAKWywYYRfLHpPLbx5Y9CHfcSsiwmoXcWZhAsawjAaLEvgTgfpHsXCigv03BXX_9ZDre2p0gZd/s1600/f8.gif" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWZBgQ-D-6IHuTPWEpwez6-RazuCbyTt1G-eV_z4MUzizF1pdHtAQXOiAM8MTzNx5gZ5Csr6YmB3Nimf7uAvzLyGp9vHnER809irQp-05PLRdWo8TPxwbw2LLuRBx8gQFaNrAClN-noSdF/s1600/f9.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWZBgQ-D-6IHuTPWEpwez6-RazuCbyTt1G-eV_z4MUzizF1pdHtAQXOiAM8MTzNx5gZ5Csr6YmB3Nimf7uAvzLyGp9vHnER809irQp-05PLRdWo8TPxwbw2LLuRBx8gQFaNrAClN-noSdF/s1600/f9.gif" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWEwvt1DWv35IATAK8BaAls6e76EfS5EfwcmIYUkToLJEpsetDeL_PQz_GDmE54drDzywcWy3LObCETX2gITK03JaHs1Smxw5HHgGSeABXK2qMv9kUxuTq-KQDil3LHdWm5PZxyaDOo1vs/s1600/f11.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWEwvt1DWv35IATAK8BaAls6e76EfS5EfwcmIYUkToLJEpsetDeL_PQz_GDmE54drDzywcWy3LObCETX2gITK03JaHs1Smxw5HHgGSeABXK2qMv9kUxuTq-KQDil3LHdWm5PZxyaDOo1vs/s1600/f11.gif" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZrQXZrz-kFf9N_wWGfl14sRMwK7A5dJCnrgd1C8qwaIaUosab21j7reAkRW-eJIn_hrprto0XQVLRPifbKVvs2wC0sYe3RXFxYpAQNtvrfdzuxlGq9-b1OGUcXy_eV2Zwm_f7W8lJA7ph/s1600/f10.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZrQXZrz-kFf9N_wWGfl14sRMwK7A5dJCnrgd1C8qwaIaUosab21j7reAkRW-eJIn_hrprto0XQVLRPifbKVvs2wC0sYe3RXFxYpAQNtvrfdzuxlGq9-b1OGUcXy_eV2Zwm_f7W8lJA7ph/s1600/f10.gif" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsVifB7pYFBs3LcKky-AdM3mW0rII5_Cf4m3ojjOMcLUXG41ectQ2daiAjhVkMe1zlS-au0Cr0QB07oM6-r6IyU9muwe6q5_-UUeMB5vEKaJl31POVMpOAfwelAKqXplDSO3rRpfm0fo7C/s1600/f7.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsVifB7pYFBs3LcKky-AdM3mW0rII5_Cf4m3ojjOMcLUXG41ectQ2daiAjhVkMe1zlS-au0Cr0QB07oM6-r6IyU9muwe6q5_-UUeMB5vEKaJl31POVMpOAfwelAKqXplDSO3rRpfm0fo7C/s1600/f7.gif" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ63uz2-88w4Z1XO0esJzyMalLTnkAeavYrpBsKCmyK7aYAqvR7fV69HTaXq2MObUgbxxadiJ8XVUzM0K_4VGLXqunBR7I7FzA3fYxZc9oNpVxelXc94eUjtxKTKrDM7hEavULlcmocT-7/s1600/f6.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ63uz2-88w4Z1XO0esJzyMalLTnkAeavYrpBsKCmyK7aYAqvR7fV69HTaXq2MObUgbxxadiJ8XVUzM0K_4VGLXqunBR7I7FzA3fYxZc9oNpVxelXc94eUjtxKTKrDM7hEavULlcmocT-7/s1600/f6.gif" /></a></div>
<br />
<br />
<div style="color: #cc0000; text-align: left;">
<b>3. Langkah terakhir simpan kode css ini di template sobat, jika bingung silahkan tempatkan di atas kode ]]></b:skin> :</b></div>
<div id="body-langkah" style="font-family: inherit; text-align: left;">
<span style="font-size: small;">#loading{<span style="background-color: orange;">padding: 15px;border: 1px solid
#000;border-radius:3px;background-color:#f5f5f5;opacity:.8;filter:alpha;margin:auto;width:435px;text-align:center</span>}</span></div>
<div class="separator" style="clear: both; text-align: left;">
Note: yang saya warnai orange bisa sobat ganti sesuai dengan keinginan</div>
<div class="separator" style="clear: both; text-align: left;">
Note: script css diatas berguna untuk mengatur tampilan dari status loading yang dipasang di blog sobat.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; color: #cc0000; text-align: left;">
<b>4. Simpan dan kemudian lihat hasilnya.</b></div>
<div class="separator" style="clear: both; color: #cc0000; text-align: left;">
<b>5. Apabila ada yang ditanyakan seputar trik ini silahkan buat komentar di entri ini.</b></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; color: red; text-align: left;">
<b>EDIT STATUS LEBIH DALAM</b></div>
<div class="separator" style="clear: both; text-align: left;">
Ini hanya tambahan saja, silahkan simak tujuannya untuk memasukan tulisan maupun link pada status loading jadi tida hanya kosong dengan gambar loading saja.</div>
<div class="separator" style="clear: both; text-align: left;">
Oke lihat dulu script di bawah ini : </div>
<div id="body-langkah" style="font-family: inherit; text-align: left;">
<span class="fullpost" style="font-size: small;"><body onLoad='init()'><b style="color: magenta;"><div id='loading'></b> <b><span style="background-color: white; color: red;"><p>Halaman sedang dimuat</p></span></b><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYMuyg0U1Q7ppofWq_FreULKP0wP5Z1v6uDblpeTRAzhtkz7HNtVO51Arsf6wwWXSBLEl27J4h4W2ddRVvIIM77NiqGP40-iAt2PRK9qNWsvoSNv7DfCidFra0_8ikeJh-O8x7jvSiPprt/s1600/f2.gif'/> <b><span style="background-color: red; color: white;"><span style="background-color: white; color: red;"><p>Apabila waktu muat relatif lama, silahkan menggunakan tampilan </span><span style="background-color: white; color: purple;"><a href='http://farizky234.blogspot.com/?m=1'>ini</a></span><span style="background-color: white; color: red;"></p> <div style='text-align:right'><p>Farkryzer Admin</p></div></span></span></b></span><span style="font-size: small;"><b><span style="color: magenta;"></div></span></b></span><span class="fullpost" style="font-size: small;"> <script src='http://farkryzer-script.googlecode.com/files/loading.js' type='text/javascript'/></span></div>
<div class="separator" style="clear: both; text-align: left;">
Bila sobat sudah pintar css tentu saja cara ini lebih mudah diterapkan sendiri. Oke saya jelaskan satu persatu.</div>
<div class="separator" style="clear: both; text-align: left;">
Note: yang saya warnai merah tebal dengan <b><i><p> sampai </p></i></b> itu menandakan kita akan menambahkan tulisan, masukan tulisan yang sobat inginkan antara kode <b><i><p> dan </p></i></b> sehingga seperti contoh ini : <b><i><p>Farkryzer The Second Generation</p></i> </b>untuk letaknya tempatkan setelah <b style="color: magenta;"><div id='loading'></b> <span class="fullpost" style="font-size: x-small;">dan </span><b style="color: magenta;"></div></b><span class="fullpost" style="font-size: x-small;"> </span></div>
<div class="separator" style="clear: both; text-align: left;">
<span class="fullpost" style="font-size: x-small;"> </span>Note: untuk link gunakan kode HTML dengan aturan <b style="color: purple;"><a href='<span style="background-color: red; color: white;">alamat link</span>'><span style="background-color: red; color: white;">nama link</span></a></b><span class="fullpost" style="font-size: x-small;"> <span style="font-size: small;"><span style="font-family: inherit;">yang saya warnai merah silahkan sobat ganti sesuai keinginan.</span></span></span></div>
<div class="separator" style="clear: both; font-family: inherit; text-align: left;">
<span class="fullpost" style="font-size: small;"><br /></span></div>
<div class="separator" style="clear: both; color: #cc0000; text-align: left;">
<b><span class="fullpost" style="font-size: x-small;"><span style="font-size: small;"><span style="font-family: inherit;">Setelah itu simpan kemudian lihat haslinya</span></span></span></b></div>
</div>
<style>
body{background:#cff}
#body-langkah{margin:5px 25px 5px 25px;padding:5px;border:1px solid #000;border-radius:3px;;font-family: 'Electrolize', sans-serif;font-size:15px}
#kolom-gif{-moz-column-count:2;-webkit-column-count:2;column-count:2}
</style>Anonymoushttp://www.blogger.com/profile/15367599609887741667noreply@blogger.com28tag:blogger.com,1999:blog-8721127227831086686.post-52980947310895076612011-12-11T15:45:00.001+07:002011-12-22T18:15:34.518+07:00Mencicipi CMS Joomla dan Drupal<a name='more'></a><br />
<br />
Oke to the topic :
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="border: 4px solid black; box-shadow: 5px 5px 10px black; padding: 25px;">
<div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
</div>
<b>Pengertian, proses instalasi CMS</b></div>
<div style="text-align: center;">
<img height="240" id="il_fi" src="http://us.123rf.com/400wm/400/400/madmaxer/madmaxer1103/madmaxer110300081/9187185-3d-illustration-of-web-design-icon-or-symbol.jpg" style="padding-bottom: 8px; padding-right: 8px; padding-top: 8px;" width="320" /></div>
<div style="text-align: center;">
<br /></div>
Oke sekarang kita mencoba belajar ke tahap yang lebih tinggi lagi yaitu mendesign website sendiri<br />
<br />
Jika sobat ingin membuat website ada beberapa hal yang perlu di siapkan, yaitu :<br />
Menguasai bahas pemrograman, ini tentu saja merupakan sebuah keharusan untuk kita yang ingin mendesin website karena untuk membuat website sendiri tidak semudah menggambar di corel yang tinggal klik ini klik itu jadi deh gambarnya, melainkan kita membuat script dari awal hingga akhir dengan mengetik. Meskipun banyak yang menyediakan script yang sudah jadi, tetapi tidak lengkap rasanya bila kita tidak membuatnya dengan jerih payah sendiri.<br />
<br />
tahap berikutnya yaitu menggunakan CMS sebagai dasar dari website itu sendiri,<br />
<br />
<b>Apa itu CMS ?</b> <u>CMS atau Content Management System yaitu suatu aplikasi pengolah website yang biasanya digunakan sebagai pengatur website serta isinya, arti kasarnya yaitu halaman admin.</u><br />
<br />
<u>Contohnya</u> yaitu :<br />
Joomla, Drupal, Wordpress, VBulletin untuk forum dan lain - lain.<br />
<br />
Itu sedikit penjelasan dari CMS sekarang kita mencicipinya seperti tujuan dari artikel ini :<br />
<br />
<b>Oke sebelum memulai instalasi persiapkan beberapa hal di bawah ini :</b><br />
1. server, mutlak di perlukan dimana suatu script dan database itu di simpan. Jika ingin mencoba yang lebih mudah silahkan untuk mencoba XAMPP, ini merupakan aplikasi server yang mudah digunakan, open source, lengkap ada ( Apache, MySql, PHP dan Perl ) dan yang pasti gratis.<br />
Silahkan unduh dari website resminya di <a href="http://www.apachefriends.org/en/xampp.html">www.apachefriends.org/en/xampp.html</a><br />
Jika sudah instal jalankannya yaitu :<br />
ketik localhost atau localhost/xampp pada adress bar di browser kamu<br />
<br />
2. database, sudah termasuk dalam XAMPP jadi tidak perlu bingung untuk unduh aplikasi lain, buat di Tools > PhpMyAdmin di localhost.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.jaringmaya.com/sites/default/files/gambar_artikel/logo-drupal.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" id="il_fi" src="http://www.jaringmaya.com/sites/default/files/gambar_artikel/logo-drupal.png" style="padding-bottom: 8px; padding-right: 8px; padding-top: 8px;" width="174" /></a><a href="http://blog.kuroartz.web.id/wp-content/uploads/2010/06/JoomlaSymbolColor.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" id="il_fi" src="http://blog.kuroartz.web.id/wp-content/uploads/2010/06/JoomlaSymbolColor.png" style="padding-bottom: 8px; padding-right: 8px; padding-top: 8px;" width="200" /></a></div>
<div style="text-align: center;">
</div>
<br />
Jika sudah sekarang silahkan unduh CMSnya disini saya memilih Joomla dan Drupal karena itu tadi seperti XAMPP yaitu gratis dan open source, alamatnya yaitu :<br />
Joomla <a href="http://www.joomla.org/download.html">http://www.joomla.org/download.html</a><br />
Drupal <a href="http://drupal.org/download">http://drupal.org/download</a><br />
<br />
<b>Untuk instalasinya, simak langkah - langkah di bawah ini :</b><br />
1. Unduh file CMSnya kemudian extract.<br />
2. kemudian simpan di folder htdocs di xampp ( misal kamu akan membuat website dengan alamat localhost/farkryzer maka buat folder farkryzer di htdocs kemudian simpan cmsnya disitu )<br />
3. Oke sekarang ikuti seperti penjelasan di nomer dua yaitu buka alamatnya yaitu localhost/farkryzer bila tadi kamu simpan di folder farkryzer.<br />
4. Nah instalasi akan di mulai di browsernya, lakukan sampai selesai.<br />
5. Jreng* ... cms selesai dan siap untuk di gunakan.<br />
<br />
<br />
Segitu saja pembahasan kita mengenai CMS tidak usah sungkan untuk bertanya justru saya senang bila ada yang bertanya atau membuat komentar itu berarti nih blog ramai.<br />
<br />
<div style="color: red;">
<i>*Note : panduan dengan gambar menyusul</i></div>
<br />
<div style="text-align: right;">
<a href="http://farizky234.blogspot.com/"><b>Farkryzer</b></a></div>
</div>
<style>
body{background:#faebd7}
</style>Anonymoushttp://www.blogger.com/profile/15367599609887741667noreply@blogger.com7tag:blogger.com,1999:blog-8721127227831086686.post-88602469706086707392011-12-11T13:28:00.001+07:002011-12-23T18:44:30.923+07:00Farkryzer menunggu 3ds emulator<br />
<a href="http://www.3dspcemulator.com/img/Starfox-64-3D.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="172" id="il_fi" src="http://www.3dspcemulator.com/img/Starfox-64-3D.gif" style="padding-bottom: 8px; padding-right: 8px; padding-top: 8px;" width="200" /></a>Setelah sekian lama saya akhirnya bisa ngepost juga karena saya mulai jarang sekali aktif di dunia blogging karena ada beberapa hal yang<br />
<a name='more'></a>membuatnya terjadi, termasuk salah satunya yaitu bosan. Akan tetapi buat pada membuat komentar serta bertanya, akan saya balas walaupun sedikit terlambat jawabannya. Oh ya to the topik ... Kalian tahu kan, bahwa blog ini banyak membahas mengenai game nds ( main pake emulator ), tetapi semenjak kemunculan 3ds game-game nds banyak yang sudah tidak di produksi dengan banyak, oleh karena itu saya berencana untuk beralih ke 3ds yang merupakan perkembangan / lanjutan dari nds. Akan tetapi emulator 3ds belum tersedia sekarang ini, gamenya aja belum bisa dibajak ( wajar lah konsolenya aja baru keluar tahun ini @2011 ), tapi saya yakin emulator 3ds akan muncul karena seperti kita ketahui game - game nintendo sangat di gemari di seluruh dunia.<br />
<br />
Jadi intinya pembahasan artikel ini merupakan pembukaan bahwa saya akan melanjutkan sharing game - game dan emulator dari konsole Nintendo 3ds, oke segitu saja kita berharap emulator 3ds secepatnya keluar syukur - syukur tahun depan 2012 sudah keluar.<br />
<br />
Akan saya update secepanya mengenai perkembangan 3ds emulator.<br />
<br />
<b>Game - game yang ingin saya mainkan dari 3ds :</b><br />
<div style="text-align: center;">
<b> </b><img height="172" id="il_fi" src="http://www.videogamesblogger.com/wp-content/uploads/2011/08/rune-factory-4-promo-image-600x325.jpg" style="padding-bottom: 8px; padding-right: 8px; padding-top: 8px;" width="320" /></div>
<ul>
<li>Rune Factory 4, siapa yang tidak tahu game ini yang memberikan segudang fitur didalamnya yaitu gabungan antara bercocok tanam dan pertarungan, apalagi inidalam seri terakhir dimana tokoh utamanya akan melawan naga angin Ventuswill. Dimana seperti kita ketahui pada seri pertama melawan naga bumi Terabble, seri kedua Fiersome naga api, seri 3 yaitu Aquaticus naga air. Maka dari itu saya sangat ingin memainkan game ini.</li>
<li>Harvest moon, meskipun cara bermainnya yang itu - itu saja tetapi saya yakin kita akan di beri cara bermain yang berbeda bila dimainkan dalam format 3d. </li>
<li>dll. </li>
</ul>
<div style="text-align: right;">
<a href="http://www.farizky234.blogspot.com/"><b>Farkryzer </b></a></div>
<style>
body{font-family:Electrolize, sans-serif;background:#191970}
</style>Anonymoushttp://www.blogger.com/profile/15367599609887741667noreply@blogger.com15tag:blogger.com,1999:blog-8721127227831086686.post-14074253434750189962011-09-30T14:55:00.000+07:002011-12-31T18:05:10.507+07:00CSS3 : Gambar transparan dengan opacity<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<a name='more'></a>CSS3 sekarang ini sering di gunakan untuk mendesain website terutama blog, karena mudah untuk digunakan. Sekarang saya akan memberitahukan cara <a href="http://farizky234.blogspot.com/2011/09/css3-gambar-menjadi-transparan-ketika.html">membuat gambar menjadi transparan ketika disorot dengan CSS3</a>.<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
Note:<br />
agar lebih lancar, saya sarankan sobat menguasai : <br />
<a href="http://farizky234.blogspot.com/2011/09/bab-iv-belajar-css-bagian-3-link.html">Bab IV : Belajar CSS bagian 3 ( Link | hover )</a><br />
<a href="http://farizky234.blogspot.com/2011/09/bab-ix-belajar-css3-bagian-3-transisi.html">Bab IX : Belajar CSS3 Bagian 3 ( Transisi )</a><br />
dan ilmu dasar css tentunya. Atau kalian bisa ngulik sendiri ... <br />
<br />
<span style="font-size: large;"><b>Step - stepnya yaitu : </b></span><br />
<br />
<b>1.</b> Cari element apa yang akan di buat efek transparan ketika hover, saya ambil contoh #header-post<br />
<br />
<b>2.</b> Ceritanya kan kita akan membuat efek pada hover bukan waktu awal. maka buat hover pada element tersebut misal :<br />
awalnya seperti ini :<br />
<br />
<div style="border: 1px solid red; margin: 0 40px 0 40px; padding: 5px;">
<b>#header {float:center;width:960px;height:150px;text-align: center;color:#111;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqSm90INmdD0ZQ5gogCGqfY2KAtnpVC9mYUp4ZjAw4St0VWdLThtyBOvvMxdwtSPx0nqk-jAVJogVhQ5cgwp5VTOKHdbqQv4LSHjZ84F87JZqKjbWhkBgMEkwf8s4ABG_C_gFPgyOaA_SY/s1600/Farkryzer+x1.png) no-repeat scroll top center;}<br />#header h1 {visibility:hidden;}</b></div>
<br />
<br />
kemudian buat hover untuk element #header menjadi :<br />
<br />
<div style="border: 1px solid red; margin: 0 40px 0 40px; padding: 5px;">
<b>#header {float:center;width:960px;height:150px;text-align:
center;color:#111;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqSm90INmdD0ZQ5gogCGqfY2KAtnpVC9mYUp4ZjAw4St0VWdLThtyBOvvMxdwtSPx0nqk-jAVJogVhQ5cgwp5VTOKHdbqQv4LSHjZ84F87JZqKjbWhkBgMEkwf8s4ABG_C_gFPgyOaA_SY/s1600/Farkryzer+x1.png)
no-repeat scroll top center;}</b><br />
<b><span style="background-color: yellow;">#header:hover { }</span><br style="background-color: yellow;" /><span style="background-color: yellow;">
</span>#header h1 {visibility:hidden;}</b></div>
<br />
<br />
<b>3.</b> Setelah itu masukan kode cssnya, lihat rumus di bawah ini :<br />
<br />
<div style="border: 1px dashed blue; margin: 0 40px 0 40px; padding: 5px;">
<b>element:hover {<span style="background-color: orange;">opacity: </span><span style="background-color: yellow;">XXX</span><span style="background-color: orange;">;filter:alpha</span>}</b></div>
<br />
<div style="color: blue;">
<b>Keterangan :</b></div>
<b><span style="background-color: yellow;">XXX</span></b> kamu ganti sesuai dengan keinginan kamu, misalnya 0.5 atau 0.25 dll, makin kecil nilainya maka tingkat transparan suatu objek akan semakin tinggi.<br />
<br />
Contoh yang sudah saya buat adalah :<br />
<br />
<div style="border: 1px solid red; margin: 0 40px 0 40px; padding: 5px;">
<b>.gambar
{<span style="background-color: lime;">-moz-transition:all .5s;-webkit-transition:all .5s;-o-transition:all .5s</span>}</b><br />
<b>.gambar:hover {<span style="background-color: yellow;">opacity: 0.7;filter:alpha}</span><span style="background-color: yellow;">
</span></b><br />
<br />
<b>Keterangan:</b><br />
<b> <span style="background-color: lime;">yg berwarna hijau</span> : saya tambahkan dengan efek transisi agar tidak terlalu biasa-biasa saja.</b><br />
<b><span style="background-color: yellow;">yg berwarna kuning</span> : contoh dari kode CSS gambar transparan. </b></div>
<br />
kamu bisa kreasikan dan kembangkan sendiri cara tadi, jika ada di tanyakan silahkan isi kotak komentar.<br />
<br />
<div style="border-top: 5px solid red;">
Sesuai permintaan sobat<b style="color: orange;"> @Zh!nTho</b> saya akan berikan sedikit demo yang sudah jadi :<br />
<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><div id="gambar">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj75WvJoEBmPQeRilhD5bVzBE0sjGstt_HHFFQr9wIokeAVQQ5dTdQjWdtnz9s4Wy7RL5hDz2FNWqJOSB9VM9gjPXydSxyeUyZnNa8bbAEw7Z52BKQa8bryPfHzahpZppDsilayacGUDZ-C/s1600/Natsu.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="226" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj75WvJoEBmPQeRilhD5bVzBE0sjGstt_HHFFQr9wIokeAVQQ5dTdQjWdtnz9s4Wy7RL5hDz2FNWqJOSB9VM9gjPXydSxyeUyZnNa8bbAEw7Z52BKQa8bryPfHzahpZppDsilayacGUDZ-C/s400/Natsu.JPG" width="400" /></a></div>
</td></tr>
<tr><td class="tr-caption" style="text-align: center;">Sorot gambar ini kemudian alihkan</td></tr>
</tbody></table>
<div style="text-align: center;">
<br />
<div style="border-top: 5px solid red;">
Buat <b style="color: orange;">@Catatan Ardha</b> saya akan memberikan caranya, seperti cara diatas menggunakan opacity kita tinggal memodifikasinya sedikit sob :<br />
<br />
<br />
<div style="border: 1px solid red; margin: 0 40px 0 40px; padding: 5px;">
<div style="text-align: left;">
<b>#gambar1{-moz-transition:all .5s;-webkit-transition:all .5s;-o-transition:all .5s;<span style="background-color: lime;">opacity:.5</span>}<br />#gambar1:hover{<span style="background-color: red;">opacity: 1</span>}</b></div>
<b>Keterangan:</b><br />
<div style="text-align: left;">
<b style="background-color: lime;">yang berwarna hijau</b>: artinya gambar transparan sebelum disorot<b> </b>nilai opacity = .5 menandakan gambar dalam keadaan transparan<b><br /></b></div>
<div style="text-align: left;">
<b style="background-color: red;">yang berwarna merah</b>: artinya gambar menjadi biasa ketika disorot nilai opacity = 1 menandakan gambar utuh seperti semula<b> </b></div>
</div>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><div id="gambar1">
<img border="0" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMtafXjS7kV5MxRfmsNQkDn3HFUOBhAX0GFvNIaIzNESmK12xN5M_h2BfhqgKk-Whgs6KlWkqvKMj2TGlykvKK7NR_r9cROesdhfh1sn3cuDkN3X9f-SobOO-B-hcNsTHp6GHiYIcDpOlX/s400/vlcsnap-2011-12-30-11h46m04s188.jpg" style="margin-left: auto; margin-right: auto;" width="400" /></div>
</td></tr>
<tr><td class="tr-caption" style="text-align: center;">Coba sendiri sorot gambarnya</td></tr>
</tbody></table>
</div>
<br />
<div style="text-align: right;">
<a href="http://farizky234.blogspot.com/"><b style="color: red;">Farkryzer</b></a></div>
<style>
body{background:#8FBC8B}
#gambar{-moz-transition:all .5s;-webkit-transition:all .5s;-o-transition:all .5s}
#gambar:hover{opacity:0.7;filter:alpha;}
#gambar1{-moz-transition:all .5s;-webkit-transition:all .5s;-o-transition:all .5s;opacity:.5}
#gambar1:hover{opacity: 1}
</style></div>
</div>Anonymoushttp://www.blogger.com/profile/15367599609887741667noreply@blogger.com28tag:blogger.com,1999:blog-8721127227831086686.post-51317025584736767512011-09-28T15:11:00.000+07:002011-12-22T18:17:06.658+07:00Misteri Kursi Bernomor 13 di Pesawat Batavia AirMisteri sangat menarik untuk di baca, maka dari itu saya tertarik untuk memberikan artikel yang berbau misteri, dengan judul Misteri Kursi Bernomor 13 di Pesawat Batavia Air.Saya tidak tahu pasti apakah ini benar atau tidak, dari pada penasaran langsung saja baca dibawah ini :<br />
<br />
<a name='more'></a><br />
<br />
<div style="box-shadow: 5px 5px 15px black; margin: 25px; padding: 25px;">
<div style="text-align: center;">
<img <br="" alt="" border="0" height="250" src="http://www.okezone.eu/images/world/misteri%20kursi%20bernomor%2013%20di%20pesawat%20batavia%20air.jpg" width="550" />
</div>
<div style="text-align: justify;">
<br />
Tahukah Anda, konon tidak ada kursi penumpang di pesawat terbang yang
bernomor 13 di dunia ini? Meski banyak yang tidak percaya, namun tahyul
di jagad raya ini mempercayai angka 13, dikaitkan dengan kejadian sial
atau mengerikan.<br />
<br />
Namun di Indonesia, pesawat Batavia Air dengan nomor penerbangan YG -
561 dari Jakarta tujuan Pekanbaru, hari Minggu ((25/11/2011) petang,
memberikan tiket penumpang bernomor 13A dan 13B kepada Nyonya Mardiana
dan suaminya. Mulanya, Mardiana merasa heran, sebab setelah puluhan kali
naik pesawat, baru kali ini dia mendapat kursi bernomor 13. Namun dia
mendiamkan saja.<br />
<br />
Keanehan mulai terjadi saat Mardiana dan suaminya naik ke pesawat.
Ternyata kursi bernomor 13 memang tidak ada. Setelah kursi nomor 12,
yang ada di deretan selanjutnya adalah kursi bernomor 14. Ketika
disampaikan perihal nomor tiket itu kepada pramugari yang bernama Ira
Maei, dia langsung terheran-heran.<br />
<br />
"Tidak ada nomor 13 di pesawat ini, ada kesalahan, namun ibu dan bapak
dapat duduk di kursi nomor 14A dan 14B ini saja dahulu," kata Ira
menenangkan.<br />
<br />
Tidak lama kemudian, muncul seorang pria tinggi besar yang menyebutkan
dia memiliki tiket bernomor 14 A dan seorang penumpang lain yang
belakangan diketahui bernama Rizal, pegawai Kantor Bea dan Cukai Riau
yang memegang tiket bernomor 14B.<br />
<br />
Masalah mulai muncul, dan pramugari Hindri Astutik dan Juni Cahyati
mulai terlihat kasak kusuk memanggil petugas darat untuk membantu
menyelesaikan persoalan. Setelah beberapa lama, seluruh penumpang telah
naik ke pesawat. Ternyata, ada tersisa dua kursi yang belum diduduki
penumpang. Akhirnya pramugari mengarahkan Rizal untuk duduk di kursi
bernomor 2B dan pria bertubuh tinggi besar di kursi 11E yang kosong.
Pesawat berkapasitas 168 orang itu penuh total. Tidak ada lagi kursi
tersisa.<br />
<br />
Namun akibat insiden kursi bernomor 13A dan 13B, jadwal pesawat yang
semestinya tebang pukul 16.50, pintu pesawat baru dapat ditutup pada
pukul 17.10 dan terbang pukul 17.30. Tidak ada kejadian apapun sepanjang
perjalanan dari Jakarta ke Pekanbaru, cuaca cukup bagus.<br />
<br />
Hanya saja sesaat sebelum mendarat, tubuh pesawat bergoyang, oleng ke
kiri dan ke kanan, tidak stabil, sehingga membuat penumpang cukup cemas.
Untungnya, Kapten Pilot Hendra Sutrisno mampu mendaratkan pesawat
dengan baik. Ketika mendarat, bahkan ada penumpang yang bertepuk
tangan.<br />
<br />
Sebelum turun dari pesawat, Mardiana dan suaminya masih penasaran,
mengapa mereka diberi nomor kursi 13 A dan 13B. Pramugari Juni Cahyati
mengatakan, masalah itu disebabkan petugas darat Batavia, mungkin tidak
mengecek bahwa pesawat Batavia yang satu ini, tidak memiliki kursi
bernomor 13.<br />
<br />
"Memangnya ada pesawat yang bernomor kursi 13?" tanya suami Ny Mardiana.
Juni mengungkapkan, ada satu pesawat Batavia di Indonesia, yang
memiliki nomor kursi 13. Kalau pernyataan Juni diasumsikan benar,
mengapa hanya Ny Mardiana dan suaminya yang mendapat nomor kursi 13?<br />
<br />
Bukankah kalau penumpang penuh, semestinya, ada empat penumpang lain
yang memegang tiket bernomor 13C, 13D, 13E dan 13F? Belum ada jawaban
misteri kursi bernomor 13A dan 13B itu, kecuali pihak Batavia mau jujur
membukanya kepada publik.<br />
<br />
Atau, jangan-jangan petugas darat Batavia Air memang tidak profesional.
Contoh ketidakprofesional lainnya, sebelum masuk ke pesawat, penumpang
Batavia yang berada di ruang tunggu C7 tujuan Pekanbaru harus masuk ke
pesawat melewati pintu C5, sementara pada saat bersamaan, penumpang yang
berada di ruang tunggu C5 tujuan Batam dipindahkan ke jalur C7.<br />
Koridor bandara akhirnya kacau penuh sesak, penumpang dari dua arah
berlawanan bersinggungan karena hendak bergegas naik ke pesawat.</div>
<br />
<a href="http://www.okezone.eu/index.php?option=com_content&view=section&layout=blog&id=13&Itemid=128" rel="nofollow" target="_blank"><b>Sumber disini</b></a>
</div>
<br />
<div style="color: black; text-align: right;">
<a href="http://farizky234.blogspot.com/"><b>Farkryzer</b></a></div>
<style>
body{background:#000}
</style>Anonymoushttp://www.blogger.com/profile/15367599609887741667noreply@blogger.com2tag:blogger.com,1999:blog-8721127227831086686.post-51764566237216611012011-09-25T19:51:00.001+07:002011-12-20T22:08:18.903+07:00Membuat greeting / tulisan berubah teratur waktu<br />
<a name='more'></a>Membuat greeting yang teratur oleh waktu, pasti kalian tahu kan maksudnya. Tidak ? Ya sudah saya akan berikan penjelasan sedikit :<br />
<br />
<br />
<br />
Membuat greeting teratur waktu itu seperti ini :<br />
<br />
Jadi jika :<br />
Pada jam <span style="background-color: #ffe599;">5 s.d. 10</span> tulisannya <b style="background-color: #ffe599;">Selamat pagi semua !</b><br />
Pada jam <span style="background-color: #ffd966;">10 s.d. 15</span> tulisannya <b style="background-color: #ffd966;">Selamat siang semua !</b><br />
Pada jam <span style="background-color: #f1c232;">15 s.d. 18</span> tulisannya <b style="background-color: #f1c232;">Selamat sore semua !</b><br />
Pada jam <span style="background-color: #bf9000;">18 s.d. 5</span> tulisannya <b style="background-color: #bf9000;">Selamat malam semua !</b> <br />
<br />
Contoh: silahkan lihat di <b><i>guest book Farkryzer</i></b> yang bertuliskan Selamat ... Semua !<br />
<br />
Caranya :<br />
<br />
<div style="color: red; text-align: center;">
<span style="font-size: large;"><b><blink>Buat Text Javascript seperti di bawah ini :</blink></b></span></div>
<br />
<div style="border: 4px double black; box-shadow: 0 0 10px black; margin: 40px; padding: 20px;">
<script type="text/javascript"><br />
var d = new Date()<br />
var time = d.getHours()<br />
if (<span style="background-color: yellow;">time>=5 && time<10</span>)<br />
{<br />
document.write("<span style="background-color: yellow;">Selamat pagi !</span>");<br />
}<br />
else if (<span style="background-color: orange;">time>=10 && time<15</span>)<br />
{<br />
document.write("<span style="background-color: orange;">Selamat siang semua !</span>");<br />
}<br />
else if (<span style="background-color: red; color: white;">time>=15 && time<18</span>)<br />
{<br />
document.write("<span style="background-color: red; color: white;">Selamat sore semua !</span>");<br />
}<br />
else if (<span style="background-color: cyan;">time>=18 && time<23</span>)<br />
{<br />
document.write("<span style="background-color: cyan;">Selamat malam semua !</span>");<br />
}<br />
<span style="background-color: lime;">else</span><br />
{<br />
document.write("Selamat beristirahat !");<br />
}<br />
</script>
</div>
<b>Note :</b> copy-kan semuanya, untuk yang di beri warna kamu dapat rubah sesuai keinginan misalnya yang saya beri warna kuning saya ganti <span style="background-color: yellow;">time>=5 && time<10</span> menjadi <span style="background-color: yellow;">time>=4 && time<9 </span>dan <span style="background-color: yellow;">Selamat pagi !</span> menjadi <span style="background-color: yellow;">Ohayo semuanya selamat datang di Farkryzer !</span><br />
<div style="text-align: center;">
- waktunya yaitu dari <b>1 s.d. 24</b> jadi jam <b>11 pagi = 11</b> dan <b>11 malam = 2</b>3 berlaku untuk semuanya-</div>
dan <span style="background-color: lime;">else</span> bisa kamu ganti jika ingin di spesifikasikan waktunya menjadi <span style="background-color: lime;">else if (</span><b><span style="background-color: lime; color: blue;">isikan timenya sesuai keinginan</span></b><span style="background-color: lime;">) </span><br />
<br />
Kamu bisa utak-atik sendiri dan taruh di mana pun sesuai keinginan-mu <br />
<br />
<div style="text-align: right;">
<a href="http://farizky234.blogspot.com/"><b style="color: red;">Farkryzer</b></a></div>
Anonymoushttp://www.blogger.com/profile/15367599609887741667noreply@blogger.com6tag:blogger.com,1999:blog-8721127227831086686.post-41379967526540187862011-09-25T12:47:00.000+07:002011-12-20T21:45:58.671+07:00Belajar CSS Selector<br />
<a name='more'></a><br />
Demi memenuhi permintaansobat @<a href="http://www.blogger.com/profile/08235438206112119920" rel="nofollow">Zh!nTho</a>
<span class="comment-timestamp">
<a href="http://farizky234.blogspot.com/2011/09/bab-ix-belajar-css3-bagian-3-transisi.html?showComment=1316916369182#c485185888827300585" title="comment permalink">
</a></span> saya putuskan untuk membuat post ini<br />
<br />
Pasti tidak asing bagi kalian apa itu selector, saya pernah menjelaskan selector sedikit di <a href="http://farizky234.blogspot.com/2011/09/perkenalan-css.html"><b>Bab I : Perkenalan CSS</b></a> tapi meskipun tidak sebanyak yang akan saya bahas sekarang.<br />
<span class="comment-timestamp">
</span><br />
<span class="comment-timestamp">Untuk mengingat kembali apa itu selector , saya akan beri contoh sedikit:</span><br />
<br />
<div style="text-align: center;">
Silahkan lihat tulisan yang di beri warna merah, itu adalah contoh dari selektor :</div>
<span class="comment-timestamp">
</span>
<br />
<div style="border: 5px solid black; margin: 20px; padding: 5px;">
<b style="color: red;">.page-wrap</b>{width:880px;margin:0 auto;}<br />
<b style="color: red;">#content-wrapper</b>{background:#c22400; margin: auto;float:center}<br />
<b style="color: red;">#content-wrapper:hover</b>{background:#FFA500;}<br />
<b style="color: red;">#main-wrapper</b>{margin: auto;background:#ddd;float:center;overflow:hidden;width:700px;word-wrap:break-word;}</div>
Sudah ingat kan sekarang baik sekarang kalian lihat macam-macam selektor di bawah ini :<br />
<br />
<table border="1" cellpadding="0" cellspacing="0" class="reference"><tbody>
<tr><th style="background-color: red; color: white; text-align: center;" width="22%;">Selector</th>
<th style="background-color: red; color: white; text-align: center;" width="17%">Example</th>
<th style="background-color: red; color: white; text-align: center;" width="56%">Example description</th>
<th style="background-color: red; color: white; text-align: center;">CSS</th>
</tr>
<tr>
<td style="text-align: justify;"><b> .<span style="color: red;">class</span></b></td>
<td class="notranslate"><b> .<span style="color: red;">page-wrap</span></b></td>
<td> Memilih element kelas <span style="color: red;">page-wrap</span></td>
<td style="background-color: #6fa8dc; color: white; text-align: center;">1</td>
</tr>
<tr>
<td style="text-align: justify;"><b> #id</b></td>
<td class="notranslate"><b>#<span style="color: red;">content-wrapper</span></b></td>
<td> Memilih element id <span style="color: red;">content-wrapper</span></td>
<td style="background-color: #6fa8dc; color: white; text-align: center;">1</td>
</tr>
<tr>
<td style="text-align: justify;"><b> *</b></td>
<td class="code notranslate"><b> *</b></td>
<td> Memilih semua element</td>
<td style="background-color: #3d85c6; color: white; text-align: center;">2</td>
</tr>
<tr>
<td style="text-align: justify;"><b> element</b></td>
<td class="notranslate"><b> <span style="color: red;">p</span></b></td>
<td> Memilih element <span style="color: red;"><p></span></td>
<td style="background-color: #6fa8dc; color: white; text-align: center;">1</td>
</tr>
<tr>
<td style="text-align: justify;"><b> element,element</b></td>
<td class="notranslate"><b> <span style="color: blue;">div</span>,<span style="color: red;">p</span></b></td>
<td> Memilih element <span style="color: blue;"><div></span> dengan <span style="color: red;"><p></span></td>
<td style="background-color: #6fa8dc; color: white; text-align: center;">1</td>
</tr>
<tr>
<td style="text-align: justify;"><b> element element</b></td>
<td class="notranslate"><b> <span style="color: blue;">div</span> <span style="color: red;">p</span></b></td>
<td> Memilih element <span style="color: red;"><p></span> yang ada didalam element <span style="color: blue;"><div></span></td>
<td style="background-color: #6fa8dc; color: white; text-align: center;">1</td>
</tr>
<tr>
<td style="text-align: justify;"><b> element>element</b></td>
<td class="notranslate"><b> <span style="color: blue;">div</span>><span style="color: red;">p</span></b></td>
<td> Memilih element <span style="color: red;"><p></span> dimana induknya ada di element <span style="color: blue;"><div></span></td>
<td style="background-color: #3d85c6; color: white; text-align: center;">2</td>
</tr>
<tr>
<td style="text-align: justify;"><b> element+element</b></td>
<td class="notranslate"><b> <span style="color: blue;">div</span>+<span style="color: red;">p</span></b></td>
<td> Memilih element <span style="color: red;"><p></span> yang ditempatkan sesudah <span style="color: blue;"><div></span></td>
<td style="background-color: #3d85c6; color: white; text-align: center;">2</td>
</tr>
<tr>
<td style="text-align: justify;"><b> [attribute]</b></td>
<td class="notranslate"><b> [<span style="color: red;">targe</span>t]</b></td>
<td> Memilih element dengan atribut <b style="color: red;">target</b></td>
<td style="background-color: #3d85c6; color: white; text-align: center;">2</td>
</tr>
<tr>
<td style="text-align: justify;"><b> [attribute=value]</b></td>
<td class="notranslate"><b> [<span style="color: blue;">target</span>=<span style="color: red;">_blank</span>]</b></td>
<td> Memilih element dengan <span style="color: blue;">targetnya</span> yaitu <b style="color: red;">_blank</b></td>
<td style="background-color: #3d85c6; color: white; text-align: center;">2</td>
</tr>
<tr>
<td style="text-align: justify;"><b> [attribute~=value]</b></td>
<td class="notranslate"><b> [title~=<span style="color: red;">flower</span>]</b></td>
<td> Memilih semua element dengan judul <span style="color: red;">flower</span></td>
<td style="background-color: #3d85c6; color: white; text-align: center;">2</td>
</tr>
<tr>
<td style="text-align: justify;"><b> [attribute|=language]</b></td>
<td class="notranslate"><b> [<span style="color: blue;">lang</span>|=<span style="color: red;">en</span>]</b></td>
<td> Memilih semua element dengan atribut <span style="color: blue;">lang</span> yang di awali dengan <span style="color: red;">en</span></td>
<td style="background-color: #3d85c6; color: white; text-align: center;">2</td>
</tr>
<tr>
<td style="text-align: justify;"><b> :link</b></td>
<td class="notranslate"><b> <span style="color: red;">a</span>:link</b></td>
<td> Memilih semua <span style="color: red;">link</span> yang tidak di kunjungi</td>
<td style="background-color: #6fa8dc; color: white; text-align: center;">1</td>
</tr>
<tr>
<td style="text-align: justify;"><b> :visited</b></td>
<td class="notranslate"><b> <span style="color: red;">a</span>:visited</b></td>
<td> Memilih semua <span style="color: red;">link</span> yang sedang di kunjungi </td>
<td style="background-color: #6fa8dc; color: white; text-align: center;">1</td>
</tr>
<tr>
<td style="text-align: justify;"><b> :active</b></td>
<td class="notranslate"><b> <span style="color: red;">a</span>:active</b></td>
<td> Memilih semua <span style="color: red;">link</span> yang sedang di aktifkan</td>
<td style="background-color: #6fa8dc; color: white; text-align: center;">1</td>
</tr>
<tr>
<td style="text-align: justify;"><b> :hover</b></td>
<td class="notranslate"><b> <span style="color: red;">a</span>:hover</b></td>
<td> Memilih <span style="color: red;">link</span> yang sedang di sorot</td>
<td style="background-color: #6fa8dc; color: white; text-align: center;">1</td>
</tr>
<tr>
<td style="text-align: justify;"><b> :focus</b></td>
<td class="notranslate"><b> input:focus</b></td>
<td> Memilih elementinput yang sedang di fokuskan</td>
<td style="background-color: #3d85c6; color: white; text-align: center;">2</td>
</tr>
<tr>
<td style="text-align: justify;"><b> :first-letter</b></td>
<td class="notranslate"><b> <span style="color: red;">p</span>:first-letter</b></td>
<td> Memilih huruf pertama pada element <span style="color: red;"><p></span></td>
<td style="background-color: #6fa8dc; color: white; text-align: center;">1</td>
</tr>
<tr>
<td style="text-align: justify;"><b> :first-line</b></td>
<td class="notranslate"><b> <span style="color: red;">p</span>:first-line</b></td>
<td> Memilih baris pertama pada element <span style="color: red;"><p></span></td>
<td style="background-color: #6fa8dc; color: white; text-align: center;">1</td>
</tr>
<tr>
<td style="text-align: justify;"><b> :first-child</b></td>
<td class="notranslate"><b> <span style="color: red;">p</span>:first-child</b></td>
<td> Memilih setiap element <<span style="color: red;">p></span> pertama dari induknya</td>
<td style="background-color: #3d85c6; color: white; text-align: center;">2</td>
</tr>
<tr>
<td style="text-align: justify;"><b> :before</b></td>
<td class="notranslate"><b> <span style="color: red;">p</span>:before</b></td>
<td> Memasukan konten "before" pada setiap element <span style="color: red;"><p></span></td>
<td style="background-color: #3d85c6; color: white; text-align: center;">2</td>
</tr>
<tr>
<td style="text-align: justify;"><b> :after</b></td>
<td class="notranslate"><b> <span style="color: red;">p</span>:after</b></td>
<td> Memasukan konten "after" pada setiap element <span style="color: red;"><p></span></td>
<td style="background-color: #3d85c6; color: white; text-align: center;">2</td>
</tr>
<tr>
<td style="text-align: justify;"><b> :lang(language)</b></td>
<td class="notranslate"><b> <span style="color: red;">p</span>:lang(it)</b></td>
<td>Memilih setiap element <span style="color: red;"><p></span> dengan atribut lang di mulai dengan "it"</td>
<td style="background-color: #3d85c6; color: white; text-align: center;">2</td>
</tr>
<tr>
<td style="text-align: justify;"><b> element1~element2</b></td>
<td><b> <span style="color: red;">p</span>~ul</b></td>
<td> Memilih setiap element ul yang di dahului oleh element <span style="color: red;"><p></span></td>
<td style="background-color: #0b5394; color: white; text-align: center;">3</td>
</tr>
<tr>
<td style="text-align: justify;"><b> [attribute^=value]</b></td>
<td><b> a[src^="<span style="color: red;">https</span>"]</b></td>
<td> Memilih setiap element <b>a</b> yang di awali dengan <span style="color: red;">https</span></td>
<td style="background-color: #0b5394; color: white; text-align: center;">3</td>
</tr>
<tr>
<td style="text-align: justify;"><b> [attribute$=value]</b></td>
<td><b> a[src$="<span style="color: red;">.pdf</span>"]</b></td>
<td><table border="1" cellpadding="0" cellspacing="0" class="reference"><tbody>
<tr></tr>
<tr><td> Memilih setiap element <b>a</b> yang di akhiri dengan <span style="color: red;">.pdf</span></td></tr>
</tbody></table>
</td>
<td style="background-color: #0b5394; color: white; text-align: center;">3</td>
</tr>
<tr>
<td style="text-align: justify;"><b> [attribute*=value]</b></td>
<td><b> a[src*="<span style="color: red;">farkryzer</span>"]</b></td>
<td> Memilih setiap element <b>a</b> yang mengandung kata "<span style="color: red;">farkryzer</span>" </td>
<td style="background-color: #0b5394; color: white; text-align: center;">3</td>
</tr>
<tr>
<td style="text-align: justify;"><b> :first-of-type</b></td>
<td><b> <span style="color: red;">p</span>:first-of-type</b></td>
<td> Memilih setiap element p yang element <span style="color: red;">p</span> pertama dari induknya</td>
<td style="background-color: #0b5394; color: white; text-align: center;">3</td>
</tr>
<tr>
<td style="text-align: justify;"><b> :last-of-type</b></td>
<td><b> <span style="color: red;">p</span>:last-of-type</b></td>
<td> Memilih setiap element p yang element <span style="color: red;">p</span> terakhir dari induknya</td>
<td style="background-color: #0b5394; color: white; text-align: center;">3</td>
</tr>
<tr>
<td style="text-align: justify;"><b> :only-of-type</b></td>
<td><b> <span style="color: red;">p</span>:only-of-type</b></td>
<td> Memilih setiap element p yang hanya element <span style="color: red;">p</span> dari induknya</td>
<td style="background-color: #0b5394; color: white; text-align: center;">3</td>
</tr>
<tr>
<td style="text-align: justify;"><b> :only-child</b></td>
<td><b> <span style="color: red;">p</span>:only-child</b></td>
<td> Memilih setiap element p yang hanya anak element <span style="color: red;">p</span> dari induknya</td>
<td style="background-color: #0b5394; color: white; text-align: center;">3</td>
</tr>
<tr>
<td style="text-align: justify;"><b> :nth-child(n)</b></td>
<td><b> <span style="color: red;">p</span>:nth-child(2)</b></td>
<td> Memilih setiap element p yang hanya anak kedua element <span style="color: red;">p</span> dari induknya</td>
<td style="background-color: #0b5394; color: white; text-align: center;">3</td>
</tr>
<tr>
<td style="text-align: justify;"><b> :nth-last-child(n)</b></td>
<td><b> <span style="color: red;">p</span>:nth-last-child(2)</b></td>
<td> Memilih setiap element p yang hanya anak kedua dari induknya, termasuk anak yang terakhir</td>
<td style="background-color: #0b5394; color: white; text-align: center;">3</td>
</tr>
<tr>
<td style="text-align: justify;"><b> :nth-of-type(n)</b></td>
<td><b> <span style="color: red;">p</span>:nth-of-type(2)</b></td>
<td> Memilih setiap element p yang hanya element <span style="color: red;">p</span> kedua dari induknya</td>
<td style="background-color: #0b5394; color: white; text-align: center;">3</td>
</tr>
<tr>
<td style="text-align: justify;"><b> :nth-last-of-type(n)</b></td>
<td><b> <span style="color: red;">p</span>:nth-last-of-type(2)</b></td>
<td> Memilih setiap element p yang hanya element <span style="color: red;">p</span> kedua dari induknya, termasuk anak yang terakhir</td>
<td style="background-color: #0b5394; color: white; text-align: center;">3</td>
</tr>
<tr>
<td style="text-align: justify;"><b> :last-child</b></td>
<td><b> <span style="color: red;">p</span>:last-child</b></td>
<td> Memilih semua element terakhir pada element <span style="color: red;">p</span></td>
<td style="background-color: #0b5394; color: white; text-align: center;">3</td>
</tr>
<tr>
<td style="text-align: justify;"><b> :root</b></td>
<td><b> :root</b></td>
<td> Memilih element dokumen root</td>
<td style="background-color: #0b5394; color: white; text-align: center;">3</td>
</tr>
<tr>
<td style="text-align: justify;"><b> :empty</b></td>
<td><b> p:empty</b></td>
<td> Memilih setiap element p yang tidak memiliki anak (termasuk node teks)</td>
<td style="background-color: #0b5394; color: white; text-align: center;">3</td>
</tr>
<tr>
<td style="text-align: justify;"><b> :target</b></td>
<td><b> #news:target </b></td>
<td> Memilih element #news yang masih aktif Selects the current active #news element</td>
<td style="background-color: #0b5394; color: white; text-align: center;">3</td>
</tr>
<tr>
<td style="text-align: justify;"><b> :enabled</b></td>
<td><b> input:enabled</b></td>
<td> Memilih semua element input di aktifkan</td>
<td style="background-color: #0b5394; color: white; text-align: center;">3</td>
</tr>
<tr>
<td style="text-align: justify;"><b> :disabled</b></td>
<td><b> input:disabled</b></td>
<td> Memilih semua element input di nonaktifkan<br />
<table border="1" cellpadding="0" cellspacing="0" class="reference"><tbody>
<tr></tr>
</tbody></table>
</td>
<td style="background-color: #0b5394; color: white; text-align: center;">3</td>
</tr>
<tr>
<td style="text-align: justify;"><b> :checked</b></td>
<td><b> input:checked</b></td>
<td> Memilih semua element input di periksa</td>
<td style="background-color: #0b5394; color: white; text-align: center;">3</td>
</tr>
<tr>
<td style="text-align: justify;"><b> :not(selector)</b></td>
<td><b> :not(p)</b></td>
<td><span class="short_text" id="result_box" lang="id"><span class="hps">Memilih</span> <span class="hps">setiap elemen</span> <span class="hps">yang bukan</span> <span class="hps">elemen p</span></span></td>
<td style="background-color: #0b5394; color: white; text-align: center;">3</td>
</tr>
<tr>
<td style="text-align: justify;"><b> ::selection</b></td>
<td><b> ::selection</b></td>
<td><span class="" id="result_box" lang="id"><span class="hps">Memilih</span> <span class="hps">bagian dari</span> <span class="hps">elemen</span> <span class="hps">yang</span> <span class="hps">dipilih oleh</span> <span class="hps">pengguna</span></span></td>
<td style="background-color: #0b5394; color: white; text-align: center;">3</td>
</tr>
</tbody></table>
<div style="text-align: right;">
<br /></div>
<div style="text-align: right;">
Untuk lihat contohnya silahkan menuju situs aslinya di >>> <a href="http://www.w3schools.com/cssref/css_selectors.asp"><b>W3SCHOOLS</b></a> </div>
<div style="text-align: right;">
klik linknya selector yang ingin di coba</div>Anonymoushttp://www.blogger.com/profile/15367599609887741667noreply@blogger.com6tag:blogger.com,1999:blog-8721127227831086686.post-80144551286884762912011-09-21T17:15:00.000+07:002011-12-23T18:38:36.118+07:00Harvest Moon : The Tale of Two Towns (E) [ 100% works on no$gba ]<div align="center">
<br />
<div align="center">
<img alt="" border="0" height="171" src="http://brutalgamer.com/wp-content/uploads/2011/04/HM-TTOTT-DS-Logo-450x241.jpg" width="320" /></div>
<div style="text-align: justify;">
<br />
<strike></strike><br />
<a name='more'></a><strike><br />
</strike><br />
Setelah nunggu setengah tahun akhirnya nih game keluar juga T_T<strike><br />
</strike><br />
Download Rom tersedia di paling bawah postingan, enjoy ya (-:<strike><br />
</strike></div>
<div style="text-align: justify;">
</div>
<br />
<div style="text-align: center;">
<div class="bbcode_container">
<div class="bbcode_quote">
<div class="quote_container">
<b></b><br />
<b style="color: lime;">1) DOWNLOAD HARVEST MOON : THE TALES OF TWO TOWN HERE : </b><br />
<div style="color: red;">
<b>DOWNLOAD ROM (E) :</b></div>
<a href="http://www.mediafire.com/?5io519t7cfz3wvw"><b>MEDIAFIRE</b></a><br />
<br />
<div style="color: red;">
<b>MIRROR 1 :</b></div>
<b><a href="http://www.megaupload.com/?d=K7WAUSFY">MEGAUPLOAD</a> </b></div>
<div class="quote_container">
<b><span style="color: red;">MIRROR 2 :</span> </b></div>
<div class="quote_container">
<b><a href="http://hotfile.com/dl/130311190/12c2600/XXXX-VE-HMTO2T-E.rar.html">HOTFILE</a></b></div>
<div class="quote_container">
<b><span style="color: red;">MIRROR 3 : </span></b></div>
<div class="quote_container">
<b><a href="http://www.fileserve.com/file/SB4sXkf">FILESERVE</a></b></div>
<div class="quote_container">
<b><span style="color: red;">MIRROR 4 : </span></b></div>
<div class="quote_container">
<b><a href="http://www.wupload.com/file/196461009">WUPLOAD</a></b></div>
<div class="quote_container" style="color: red;">
<b> MIRROR 5 ( LOKAL ) :</b></div>
<div class="quote_container">
<b><a href="http://www.indowebster.com/download/files/_hmto2__e__">INDOWEBSTER</a></b></div>
<div class="quote_container">
<br />
<div style="color: lime;">
<b>2) CARA MEMAINKANNYA :</b></div>
<div style="text-align: center;">
Dah barusan saya cek dan bisa 100% di emulator no$gba dengan settingan bios mode.<br />
jika belum punya atau tidak tahu cara settingnya download saja :<br />
<a href="http://farizky234.blogspot.com/2011/08/nogba-nozoomer-2302-gba-bios.html">http://farizky234.blogspot.com/2011/08/nogba-nozoomer-2302-gba-bios.html</a></div>
<br />
<b style="color: lime;">3) NIH BUAT BUKTI BISA DIJALANIN SILAHKAN CEK : </b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwdJGmxJq38fO9cEFKlxuy0abq6b3kKvjS3smGlSma_mYww-KEVrLjDsi-jtBldWP4_etYHevTqUzfqwVwmIKyhqhyphenhyphen-75HkSmgNfcz_WL3N5qsABmDx-OIpheM-n2CUVPRdsWCyg3LHL9a/s1600/HM+TTOTT+2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQHdbiSp9tydRAjSckmfpYueCcl9OpXR6_EMIgwuzrNrE10RWhGRt5eXg-RbpG3i16mFTKHMaXunCRHxHd9fitZJtKSSXasDDFRL6w3Ag2x5EJpa2ClWezE9qVQSPYAdmcRpvdvzhbyncZ/s1600/HM+TTOTT+1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQHdbiSp9tydRAjSckmfpYueCcl9OpXR6_EMIgwuzrNrE10RWhGRt5eXg-RbpG3i16mFTKHMaXunCRHxHd9fitZJtKSSXasDDFRL6w3Ag2x5EJpa2ClWezE9qVQSPYAdmcRpvdvzhbyncZ/s1600/HM+TTOTT+1.PNG" /></a></div>
<br />
<div style="text-align: justify;">
Sorry cuman dua screenshoot aja nih juga buru-buru ampe namanya Farizy ( ga nyadar mestinya Farizky ), pengen main nih enjoy semuanya (-: </div>
<br /></div>
<div class="quote_container" style="color: blue; text-align: right;">
<b>Thanks to uploader, Indowebster <i>@Akatsuki87</i></b><u><i> </i></u><br />
<u><i>http://www.indowebster.web.id/showthread.php?t=154955 </i></u><b><br /></b></div>
<div class="quote_container" style="text-align: right;">
<b><span style="color: red;">Shared by Farizky</span></b></div>
<div class="quote_container">
<br /></div>
<div class="quote_container">
</div>
</div>
</div>
</div>
</div>
<style>
body{font-family:Electrolize, sans-serif;background:#32cd32}
</style>Anonymoushttp://www.blogger.com/profile/15367599609887741667noreply@blogger.com64tag:blogger.com,1999:blog-8721127227831086686.post-56470232258526111122011-09-08T19:41:00.001+07:002011-12-20T21:46:13.090+07:00Bab IX : Belajar CSS3 Bagian 3 ( Transisi )<br />
<a name='more'></a>Pasti kalian sudah tahu kan transisi itu apa, semacam efek pergantian efek dari bentuk sebelumnyake bentuk sesudahnya, sudah pasti CSS ini sangat bermanfaat, terlebih lagi untuk membuat web / blog menjadi lebih hidup, coba lah lihat efek ini pada area post ini coba arahkan kursor maka akan mengalami efek pergantian.<br />
<br />
Cara ini sangat erat kaitannya dengan hover maka kamu harus menguasai teknik hover yah minimal mengetahui sedikit >> <a href="http://farizky234.blogspot.com/2011/09/bab-iv-belajar-css-bagian-3-link.html">Baca CSS tentang hover</a>, jika tanpa menggunakan transisi coba lihat.<br />
<br />
Yang akan kalian pelajari yaitu<br />
<a href="http://farizky234.blogspot.com/2011/09/bab-ix-belajar-css3-bagian-3-transisi.html">Membuat efek transisi dengan CSS3</a><br />
<a href="http://farizky234.blogspot.com/2011/09/bab-ix-belajar-css3-bagian-3-transisi.html">a. transition property</a><br />
<a href="http://farizky234.blogspot.com/2011/09/bab-ix-belajar-css3-bagian-3-transisi.html">b. transition duration</a><br />
<a href="http://farizky234.blogspot.com/2011/09/bab-ix-belajar-css3-bagian-3-transisi.html">c. transition delay</a><br />
<br />
<div style="border-radius: 15px; border: 5px dashed cyan; padding: 15px;">
<div style="color: #38761d;">
<b><a href="http://farizky234.blogspot.com/2011/09/bab-viii-belajar-css3-bagian-2-tulisan.html">Tahap Sebelumnya</a> | Bab VIII : Belajar CSS3 Bagian 2 ( Tulisan ) </b><b>|</b></div>
<br />
Pertama - tama saya akan tunjukan efek transisi yang saya terapkan pada Farkryzer ini<br />
1. Judul post ( hover | active )<br />
2. Background dan border post ( hover )<br />
3. border menubar halaman utama ( hover )<br />
4. dan saya bingung ( hahahaha ... )<br />
<br />
baiklah langsung saja ke pokok bahasan kita :<br />
<br />
<a href="http://farizky234.blogspot.com/2011/09/bab-ix-belajar-css3-bagian-3-transisi.html"><b>Transisi ( Transitions )</b></a><br />
Sangat mudah sekali untuk memahami teknik pembuatan efek transisi ini, orang awam puin bisa ( termasuk saya ), apalagi jika kamu sudah jago teknik hover >>> <a href="http://farizky234.blogspot.com/2011/09/bab-iv-belajar-css-bagian-3-link.html">Baca CSS tentang hover</a><br />
Baiklah rumusnya adalah :<br />
<b><br /></b><br />
<div style="background-color: #d0e0e3; border: 2px solid black; margin: 0pt 50px; padding: 5px;">
<b>.post {background#f2f2f2;border: 4px solid #000;<span style="background-color: yellow;">-moz-transition-property:background,border</span>;<span style="background-color: yellow;">-moz-transition-duration:.25s</span>;<span style="background-color: lime;">-webkit-transition-property:background,border</span>;<span style="background-color: lime;">-webkit-transition-duration:.25s</span>;<span style="background-color: cyan;">-o-transition-property:background,border</span>;<span style="background-color: cyan;">-o-transition-duration:.25s</span>;</b><b>}</b><br />
<b>.post:hover {background:#fff;border-radius:30px;}</b><br />
<br />
<b># Keterangan :</b><br />
<br />
<a href="http://farizky234.blogspot.com/2011/09/bab-ix-belajar-css3-bagian-3-transisi.html"><b>A. Property ( elemen yang akan di buat transisi )</b></a><br />
<b><span style="background-color: yellow;">-moz-transition-property:<span style="color: red;">...</span></span></b> <b><<< kamu tambahkan agar firefox 4 kompatibel</b><br />
<b><span style="background-color: lime;">-webkit-transition-property:<span style="color: red;">...</span></span></b> <b><<< + agar chrome & safari kompatibel</b><br />
<b><span style="background-color: cyan;">-o-transition-property:<span style="color: red;">...</span></span> <<< + agar opera kompatibel</b> <br />
<b><span style="color: red;">...</span> kamu ganti apa yang akana kamu buat efek transisi border, background dll. Contoh diatas saya umpamakan border dan background maka transisinya yaitu 1.background: #f2f2f2 menjadi #fff dan 2.border: ( persegi tidak radius ) menjadi ( radius 30px )</b><br />
<div style="background-color: #a2c4c9;">
<b>Note: kamu dapat gunakan <span style="color: red;">all</span> jika efek ingin kamu tambahkan ke semuanya.</b></div>
<br />
<a href="http://farizky234.blogspot.com/2011/09/bab-ix-belajar-css3-bagian-3-transisi.html"><b>B. Duration ( waktu berlangsungnya transisi )</b></a><br />
<b><span style="background-color: yellow;">-moz-transition-duration:<span style="color: red;">...s</span></span></b> <b><<< + agar firefox 4 kompatibel</b> <br />
<b><span style="background-color: lime;">-webkit-transition-duration:<span style="color: red;">...s</span></span></b> <b><<< + agar chrome & safari kompatibel</b> <br />
<b><span style="background-color: cyan;">-o-transition-duration:<span style="color: red;">..s</span></span></b><b> <<< + agar opera kompatibel</b><br />
<b>...s kamu ganti sesuai keinginan, contohnya yaitu saya masukan .2s berarti durasi / waktu transisi berlangsung selama 0,2 sekon atau 1/5 detik.</b><br />
<br />
<a href="http://farizky234.blogspot.com/2011/09/bab-ix-belajar-css3-bagian-3-transisi.html"><b>C. Delay ( waktu penjeda untuk memulai transisi)</b></a><br />
<b>jika kamu ingin membuat waktu jeda sebelum mulai transisi gunakan delay </b> <br />
<b><span style="background-color: yellow;">-moz-transition-delay:<span style="color: red;">...s</span></span></b> <b><<< + agar firefox 4 kompatibel</b><br />
<b><span style="background-color: lime;">-webkit-transition-delay:<span style="color: red;">...s</span></span></b> <b><<< + agar chrome & safari kompatibel</b><br />
<b><span style="background-color: cyan;">-o-transition-delay:<span style="color: red;">..s</span></span></b><b> <<< + agar opera kompatibel<span style="background-color: lime;"><span style="color: red;"> </span></span></b></div>
<br />
Ada yang ditanyakan ? Silahkan berkomentar di bawah post ini<br />
<div style="text-align: right;">
<b style="color: orange;">Tahap Berikutnya</b></div>
</div>
<br />
<div style="text-align: right;">
<a href="http://farizky234.blogspot.com/"><b>Farkryzer</b></a></div>Anonymoushttp://www.blogger.com/profile/15367599609887741667noreply@blogger.com9tag:blogger.com,1999:blog-8721127227831086686.post-35124064904219674482011-09-05T21:05:00.000+07:002011-12-20T21:46:24.606+07:00Bab VIII : Belajar CSS3 Bagian 2 ( Tulisan )<br />
<a name='more'></a>Ini adalah materi ke dua CSS3 yang saya berikan.<br />
Bab VIII : Belajar CSS3 Bagian 2 ( Tulisan )<br />
Materinya cukup sedikit mengingat CSS3 hanya tambahan dari CSS sebelumnya.<br />
Yang akan kalian pelajari di Bab VIII : Belajar CSS3 Bagian 2 ( Tulisan ) adalah :<br />
<a href="http://farizky234.blogspot.com/2011/09/bab-viii-belajar-css3-bagian-2-tulisan.html">1. Membuat efek bayangan pada tulisan dengan CSS3</a><br />
<a href="http://farizky234.blogspot.com/2011/09/bab-viii-belajar-css3-bagian-2-tulisan.html">2. Gunakan jenis tulisan baru dengan CSS3</a><br />
<br />
<div style="border-radius: 10px; border: 5px dashed cyan; padding: 15px;">
<div style="color: #38761d;">
<b><a href="http://farizky234.blogspot.com/2011/09/bab-vii-belajar-css3-bagian-1.html">Tahap Sebelumnya</a> | Bab VII : Belajar CSS3 Bagian 1 ( Perkenalan | Box model | Box Shadow ) |</b></div>
<br />
<a href="http://farizky234.blogspot.com/2011/09/bab-viii-belajar-css3-bagian-2-tulisan.html"><b>1. Efek Bayangan pada tulisan ( Text Shadow )</b></a><br />
Sebelumnya saya pernah menjelaskan tentan membuat bayangan pada objek ( box | border ) sekarang efek ini ada pada tulisan tidak jauh berbeda dengan yang sebelumnya hanya berubah sedikit saya box-shadow untuk box dan text-shadow untuk tulisan, atau lebih jelasnya silahkan lihat rumus berikut :<br />
<br />
<div style="background-color: #d0e0e3; border: 2px solid black; margin: 0pt 50px; padding: 5px;">
<b>#comments-block li {<span style="background-color: yellow;">text-shadow: 0 0 10px #fff</span>;}</b><br />
<br />
# Keterangan :<br />
<b><span style="background-color: yellow;">text-shadow: 0 0 10px #fff</span> silahkan kamu ubah sesuai keinginan</b><br />
<b>Contohnya yaitu :</b><br />
<div style="text-align: left;">
<b>color: white;font-size: 20px;font-family: arial;</b><b><span style="background-color: yellow;">text-shadow: 0 0 10px #ff0000</span>;</b></div>
<div style="color: white; font-family: Arial,Helvetica,sans-serif; font-size: 20px; text-align: center; text-shadow: 0pt 0pt 10px rgb(255, 0, 0);">
<b>maka akan jadi seperti ini</b></div>
</div>
<br />
<a href="http://farizky234.blogspot.com/2011/09/bab-viii-belajar-css3-bagian-2-tulisan.html"><b>2. Jenis Tulisan baru ( New Font )</b></a><br />
Jika kamu harus memakai jenis tulisan yang harus ada di setiap komputer pengguna, sekarang kamu dapat memakai jenis tulisan tanpa harus khawatir tidak akan terbaca komputer karena pada CSS3 ini dapat memungkinkan itu terjadi, rumusnya yaitu :<br />
<br />
<div style="background-color: #d0e0e3; border: 2px solid black; margin: 0pt 50px; padding: 5px;">
<b>@font-face {font-family: myFirstFont;src: url('<span style="background-color: yellow;">url font format ttf</span>'), url('<span style="background-color: lime;">url font format eot</span>');}</b><br />
#Keterangan :<br />
<b><span style="background-color: yellow;">url font format ttf</span></b> masukan alamat fontnya dengan format ttf<br />
Note : <b><span style="background-color: lime;">url font format eot</span></b> kamu tambahkan agar Internet Explorer kompatibel dengan desain ini ( dalam format eot saja )</div>
<br />
<div style="color: orange; text-align: right;">
<b>| Bab IX : Belajar CSS3 Bagian 3 ( Transisi )</b><b> | <a href="http://farizky234.blogspot.com/2011/09/bab-ix-belajar-css3-bagian-3-transisi.html">Tahap Berikutnya</a></b></div>
</div>
<br />
<div style="text-align: right;">
<a href="http://www.farizky234.blogspot.com/"><b>Farkryzer</b></a></div>Anonymoushttp://www.blogger.com/profile/15367599609887741667noreply@blogger.com6tag:blogger.com,1999:blog-8721127227831086686.post-34394238328594925032011-09-05T14:06:00.001+07:002011-12-20T21:46:38.541+07:00Bab VII : Belajar CSS3 Bagian 1 ( Perkenalan | Box model | Box Shadow )<br />
<a name='more'></a><br />
<b>Perkenalan :</b><br />
Sekarang kamu sedang masuk ke jenjang yang lebih tinggi lagi karena materi ini sudah termasuk CSS3, apa yang baru dar CSS3 sebelumnya ? Itu pasti yang akan kalian pikirkan, sebelum memulainya saya akan menjelaskan sedikit ,engenai CSS3. CSS3 sebetulnya tidak jauh berbeda dengan CSS2, semacam upgrade saja. Intinya adalah CSS3 ini bisa di gabungkan dengan CSS2 sebelumnya, jadi jangan khawatir kekadaluwarsaan ilmu CSS2 karena sebetulnya CSS2 dan CSS3 saling berhubungan satu sama lain, adapun beberapa materi yang akan kamu pelajari yaitu :<br />
<br />
Materi CSS3 diantaranya :<br />
<ul>
<li>Box model</li>
<li>Background</li>
<li>Efek Tulisan ( Text Effect )</li>
<li>Transformasi 2D / 3D</li>
<li>Animasi ( Animations )</li>
<li>Transisi ( Transitions )</li>
</ul>
Di Bab VII : Belajar CSS3 Bagian 1 ( Perkenalan | Box model | Box Shadow ) kamu akan mempelajari tentang :<br />
<ul>
</ul>
<b>Box Model</b><br />
Sekarang kamu akan mempelajari Box Mode dan Box Shadow :<br />
1. <a href="http://farizky234.blogspot.com/2011/09/bab-vii-belajar-css3-bagian-1.html">Membua ujung objek yang dibulatkan dengan CSS3</a><br />
2. <a href="http://farizky234.blogspot.com/2011/09/bab-vii-belajar-css3-bagian-1.html">Membuat efek bayangan box dengan CSS3</a><br />
<br />
<ul>
</ul>
<div style="border-radius: 10px; border: 5px dashed cyan; padding: 15px;">
<div style="color: #38761d;">
<b><a href="http://farizky234.blogspot.com/2011/09/bab-vi-belajar-css-bagian-5-list-tabel.html">Tahap Sebelumnya</a> | Bab VI : Belajar CSS bagian 5 ( List | Tabel ) |</b></div>
<br />
CSS3 memang menakjubkan membuat semua hal menjadi lebih indah dengan cara yang lebih mudah, sekarang saya akan menyampaikan materinya. Mari kita simak bersama-sama :<br />
<br />
<b> <a href="http://www.blogger.com/goog_1702746582">1. Ujung yang dibulatkan</a></b><a href="http://farizky234.blogspot.com/2011/09/bab-vii-belajar-css3-bagian-1.html"> <b>( Rounded corners )</b></a><br />
Rounded Rorners adalah cara membulatkan ujung-ujung dari suatu objek yang sebelumnya persegi. Rumusnya yaitu :<br />
<br />
<div style="background-color: #d0e0e3; border: 2px solid black; margin: 0pt 50px; padding: 5px;">
<b>div
{<span style="background-color: yellow;">border:<span style="color: red;">nilai</span></span>;<span style="background-color: cyan;">border-radius:<span style="color: red;">nilai</span></span>;<span style="background-color: lime;">-moz-border-radius:<span style="color: red;">nilai</span>;</span>}</b><br />
<b><br /></b><br />
<b>Contoh diatas silahkan kamu ubah sesuai keinginan</b><br />
<b># Keterangan : </b><br />
<b><span style="background-color: yellow;">border:<span style="color: red;">nilai</span></span></b><b> untuk mendesain bordernya</b><br />
<b><span style="background-color: cyan;">border-radius:<span style="color: red;">nilai</span></span></b><b> besar radius yang akan terbentuk</b><br />
<div style="background-color: #a2c4c9;">
<b>Note : </b><b><span style="background-color: lime;">-moz-border-radius:<span style="color: red;">nilai</span></span></b><b> kamu tambahkan agar firefox 3.6 kebawah kompatibel dengan desain ini.</b></div>
<b><br /></b><br />
<b>Contohnya seperti ini :</b><br />
<div style="text-align: center;">
<b> </b><b><span style="background-color: yellow;">border:2px solid black</span>;<span style="background-color: cyan;">border-radius:25px</span>;<span style="background-color: lime;">-moz-border-radius:25px;</span></b></div>
<div style="text-align: center;">
<div style="-moz-border-radius: 25px; background-color: grey; border-radius: 25px; border: 2px solid;">
<br /></div>
</div>
</div>
<br />
<a href="http://farizky234.blogspot.com/2011/09/bab-vii-belajar-css3-bagian-1.html"><b>2. Efek Bayangan Box (Box-Shadow)</b></a><br />
Efek CSS3 lainnya yaitu bayangan box, ini dapat kamu terapkan pada box, background, border dan sebagainya. Rumusnya yaitu :<br />
<br />
<div style="background-color: #d0e0e3; border: 2px solid black; margin: 0pt 50px; padding: 5px;">
<b>div
{<span style="background-color: red; color: white;">width:300px;height:100px;background-color:yellow</span>;</b><b><span style="background-color: yellow;">box-shadow: 10px 10px 5px #888888</span></b><b>;<span style="background-color: cyan;">-moz-box-shadow: 10px 10px 5px #888888</span>;<span style="background-color: lime;">-webkit-box-shadow: 10px 10px 5px #888888</span>;</b><b>}</b><br />
<b><br /></b><br />
<b>Contoh diatas silahkan kamu ubah sesuai keinginan</b><br />
<b># Keterangan</b><br />
<b style="color: white;"><span style="background-color: red;">width:300px;height:100px;background-color:yellow</span></b><b> Ini adalah property & value objek yang akan di buat bayangan (shadow)</b><br />
<b><span style="background-color: yellow;">box-shadow: 10px 10px 5px #888888</span></b><b> silahkan sesaikan dengan keinginanmu</b><br />
<div style="background-color: #a2c4c9;">
<b>Note : </b><b><span style="background-color: cyan;">-moz-box-shadow: 10px 10px 5px #888888</span></b><b> kamu tambahkan agar safari kompatibel dengan efek ini, </b><b><span style="background-color: lime;">-webkit-box-shadow: 10px 10px 5px #888888</span></b><b> kamu tambahkan agar firefox 3.6 kebawah kompatibel dengan efek ini</b></div>
<b><br /></b><br />
<b>Contohnya seperti ini :</b><br />
<div style="text-align: left;">
<b><span style="background-color: red; color: white;">background-color: black; border-radius: 10px; border: 2px solid white</span>; <span style="background-color: yellow;">box-shadow: 0 0 10px cyan</span>;<span style="background-color: cyan;">-moz-box-shadow: 0px 0px 10px cyan</span>;</b><b><span style="background-color: lime;">-webkit-box-shadow: 0px 0px 10px cyan</span>;</b></div>
<br />
<div style="-moz-box-shadow: 0px 0px 10px cyan; -webkit-box-shadow: 0px 0px 10px cyan; background-color: black; border-radius: 10px; border: 2px solid white; box-shadow: 0 0 10px cyan;">
<br /></div>
<div style="text-align: center;">
<b><br /></b><br />
<div style="background-color: #a2c4c9; text-align: left;">
<b>Note: Efek ini tidak akan berhasil pada browser Internet Explorer</b></div>
</div>
</div>
<b><br /></b><br />
<div style="color: orange; text-align: right;">
<b>|</b><b> Bab VIII : Belajar CSS3 Bagian 2 ( Tulisan )</b><b> | <a href="http://farizky234.blogspot.com/2011/09/bab-viii-belajar-css3-bagian-2-tulisan.html">Tahap Berikutnya</a></b></div>
</div>
<br />
<div style="text-align: right;">
<a href="http://farizky234.blogspot.com/"><b>Farkryzer</b></a></div>Anonymoushttp://www.blogger.com/profile/15367599609887741667noreply@blogger.com6tag:blogger.com,1999:blog-8721127227831086686.post-21176466158793050602011-09-04T09:56:00.000+07:002011-12-20T21:47:09.978+07:00Bab VI : Belajar CSS bagian 5 ( List | Tabel )<br />
<a name='more'></a>Sebelumnya saya membahas :<br />
<a href="http://farizky234.blogspot.com/2011/09/bab-v-belajar-css-bagian-4-border.html">Bab V : Belajar CSS bagian 4 ( Boder | Margin | Padding )</a><br />
Mari kita lanjut ketahap berikutnya, yaitu : <b>Bab VI : Belajar CSS bagian 5 ( List / Tabel )</b><br />
<br />
Bab V : Belajar CSS bagian 4 ( List | Tabel )<br />
Kalian akan mempelajari tentang :<br />
<a href="http://farizky234.blogspot.com/2011/09/bab-vi-belajar-css-bagian-5-list-tabel.html">A. Mendesain element list dengan CSS</a><br />
<a href="http://farizky234.blogspot.com/2011/09/bab-vi-belajar-css-bagian-5-list-tabel.html">B. Mendesain tabel dengan CSS</a><br />
<ol>
<li><a href="http://farizky234.blogspot.com/2011/09/bab-vi-belajar-css-bagian-5-list-tabel.html">Cara mendesain border tabel dengan CSS</a></li>
<li><a href="http://farizky234.blogspot.com/2011/09/bab-vi-belajar-css-bagian-5-list-tabel.html">Mengatur border tabel menjadi satu garis border dengan CSS</a></li>
<li><a href="http://farizky234.blogspot.com/2011/09/bab-vi-belajar-css-bagian-5-list-tabel.html">Menentukan lebar dan tinggi tabel dengan CSS</a></li>
<li><a href="http://farizky234.blogspot.com/2011/09/bab-vi-belajar-css-bagian-5-list-tabel.html">Mengatur perataan tulisan dengan CSS</a></li>
<li><a href="http://farizky234.blogspot.com/2011/09/bab-vi-belajar-css-bagian-5-list-tabel.html">Membuat padding tabel dengan CSS</a></li>
<li><a href="http://farizky234.blogspot.com/2011/09/bab-vi-belajar-css-bagian-5-list-tabel.html">Mengatur warna tabel dengan CSS</a></li>
</ol>
<br />
<ol>
</ol>
<div style="border: 5px dashed blue; padding: 15px;">
<b style="color: blue;"><a href="http://farizky234.blogspot.com/2011/09/bab-v-belajar-css-bagian-4-border.html">Tahap Sebelumnya</a> | Bab V : Belajar CSS bagian 4</b><b> <span style="color: blue;">( Border | Margin | Padding ) </span></b><b style="color: blue;">| </b><br />
<br />
Disini saya menggabungkan materi List dengan tabel karena materi list sangat sedikit maka saya gabungkan dengan materi tabel.<br />
<br />
<a href="http://farizky234.blogspot.com/2011/09/bab-vi-belajar-css-bagian-5-list-tabel.html"><b>A. Mendesain daftar (List)</b></a><a href="http://farizky234.blogspot.com/2011/09/bab-iv-belajar-css-bagian-3-link.html"><b><br /></b></a><br />
Pasti tahu kan list itu ada yang berupa titik, nomer tetapi bagaimana caranya menggantinya dengan yang lain ? Maka dari itu mari kita simak rumusnya bersama-sama :<br />
<br />
<div style="background-color: #9fc5e8; border: 2px solid black; margin: 0pt 50px; padding: 5px;">
<b>ul {list-style-type:</b><b><span style="color: red;">bentuknya</span>;}</b><br />
<br />
<b># Keterangan :</b><br />
<b><span style="color: red;">bentuknuya</span> : dapat kamu gantidengan kode dibawah ini :</b><br />
<ul>
<li><b><span style="color: red;">circle</span> : dalam bentuk lingkaran</b></li>
<li><b><span style="color: red;">squeare</span> : dalam bentuk persegi</b></li>
<li><b><span style="color: red;">upper-roman</span> : dalam bentuk angka romawi</b></li>
<li><b><span style="color: red;">lower-alpha</span> : dalam bentuk huruf alphabet kecil</b> </li>
</ul>
<b></b><b> </b></div>
<b>Atau bisa di ganti dengan gambar yang kamu inginkan (jangan terlalu besar gambarnya), Rumusnya yaitu :</b><br />
<br />
<div style="background-color: #9fc5e8; border: 2px solid black; margin: 0pt 50px; padding: 5px;">
<b>a) ul
{
list-style-image: url('<span style="color: red;">url gambarnya</span>');}</b><br />
<b>cara diatas bisa diterapkan untuk firefox, chrome dan safari tetapi tidak untuk IE dan opera, maka menggunakan cara b </b><br />
<br />
<b>b) ul
{<span style="color: blue;">list-style-type: none;
padding: 0px;
margin: 0px;</span>}<br />
li
{
background-image: url('</b><b><span style="color: red;">url gambarnya'</span></b><b>);<span style="color: blue;">background-repeat: no-repeat;background-position: 0px 5px;
padding-left: 14px;</span>
}</b><br />
<br />
<b># Keterangan :</b><br />
<b style="color: blue;">yang saya warnai biru itu kode dimana kamu atur besar kecilnya gambar dari list</b><br />
<br />
<b>yang c adalah cara yang lebih simple :</b><br />
<b>c) ul
{list-style: square url("</b><b><span style="color: red;">url gambarnya</span>");}</b><b><span style="color: red;"></span></b><br />
<br /></div>
<br />
<a href="http://farizky234.blogspot.com/2011/09/bab-vi-belajar-css-bagian-5-list-tabel.html"><b>B. Mendesain Tabel</b></a><br />
<b><br /></b><br />
<b> <a href="http://farizky234.blogspot.com/2011/09/bab-vi-belajar-css-bagian-5-list-tabel.html">1. Menentukan border tabel ( Table Borders )</a></b><br />
caranya sama dengan materi sebelumnya ( cara membuat border pada bweb ) , Rumusnya yaitu :<br />
<br />
<div style="background-color: #9fc5e8; border: 2px solid black; margin: 0pt 50px; padding: 5px;">
<b>table, th, td {border:<span style="color: red;">desain border</span>;}</b><br />
<br />
<b># Keterangan :</b><br />
<b><span style="color: red;">desain border</span></b><b> : dapat kamu isi sesuai keinginan kamu, besar border (px) jenis border dan warna border</b><br />
<b>untuk melihat kembali jenis border <a href="http://farizky234.blogspot.com/2011/09/bab-v-belajar-css-bagian-4-border.html">masuk ke materi sebelumnya </a></b><br />
<a href="http://www.farizky234.blogspot.com/">
<b> </b></a></div>
<a href="http://www.farizky234.blogspot.com/">
</a><br />
<b> </b><br />
<b> <a href="http://farizky234.blogspot.com/2011/09/bab-vi-belajar-css-bagian-5-list-tabel.html">2. Jadikan 1 border ( Collapse Table Border )</a></b><br />
Saya sedikit bingung saat menentukan judulnya, tetapi initinya yaitu mengatur border tabel menjadi 1 border (biasanya pada border tabel yang defauft memiliki 2 border ), untuk mengaturnya maka gunakan rumus di bawah ini :<br />
<br />
<div style="background-color: #9fc5e8; border: 2px solid black; margin: 0pt 50px; padding: 5px;">
<b>table
{<span style="color: red;">border-collapse:collapse;</span>}<br />
table,th, td
{border: 2px outline red;}</b><b></b><br />
<br />
<b># Keterangan :</b><br />
<b><span style="color: red;">border-collapse:collapse; </span>silahkan tambahkan kode ini</b><b><span style="color: red;"><br /></span></b><b> </b></div>
<br />
<a href="http://farizky234.blogspot.com/2011/09/bab-vi-belajar-css-bagian-5-list-tabel.html"><b>3. Atur lebar dan tinggi Tabel ( </b><b>Table </b><b>Width & Height )</b></a><br />
<b> Rumusnya yaitu :</b><br />
<b><br /></b><br />
<div style="background-color: #9fc5e8; border: 2px solid black; margin: 0pt 50px; padding: 5px;">
<b>table
{width:<span style="color: blue;">lebarnya</span>;}<br />
th
{height:<span style="color: red;">Tingginya</span>;}</b><br />
<br />
<b>#Keterangan :</b><br />
<b><span style="color: blue;">lebarnya</span> : silahkan kamu atur sendiri berapa (px)</b><br />
<b><span style="color: red;">tingginya</span> : silahkan kamu atur sendiri berapa (px)</b><br />
<b> </b><br />
<b> </b></div>
<br />
<a href="http://farizky234.blogspot.com/2011/09/bab-vi-belajar-css-bagian-5-list-tabel.html"><b>4. Keselarasan tulisan Tabel ( Text-Alignment</b></a><br />
<b>Rumusnya yaitu :</b><br />
<b><br /></b><br />
<div style="background-color: #9fc5e8; border: 2px solid black; margin: 0pt 50px; padding: 5px;">
<b>a) td
{text-align:<span style="color: red;">rataan</span>;} </b><br />
<b>b) td
{height:<span style="color: blue;">tingginya</span>;vertical-align:<span style="color: purple;">letaknya</span>;}</b><b> </b><br />
<b> (yang b di gunakan jika kamu ingin mengatur rataan atas bawah )</b><br />
<br />
<b># Keterangan :</b><br />
<b style="color: red;">rataan</b> : <b>diganti dengan keinginan kamu <span style="color: red;">center</span>, <span style="color: red;">left</span>, <span style="color: red;">right</span>, <span style="color: red;">justify</span></b><br />
<b><span style="color: blue;">tingginya : </span></b><b>silahkan kamu atur sendiri berapa (px)</b><br />
<b><span style="color: purple;">letaknya : </span>bisa kamu masukan dengan kode <span style="color: purple;">bottom</span> ( bawah ) <span style="color: purple;">middle</span> ( tengah ) dan <span style="color: purple;">top</span> ( atas )</b><b><span style="color: purple;"><br /></span></b></div>
<br />
<a href="http://farizky234.blogspot.com/2011/09/bab-vi-belajar-css-bagian-5-list-tabel.html"><b>6. Atur padding tabel ( Table Padding )</b></a><br />
Padding yaitu jarak antara border dengan isi di dalam border, rumusnya yaitu :<br />
<div style="background-color: #9fc5e8; border: 2px solid black; margin: 0pt 50px; padding: 5px;">
<b>td
{padding:<span style="color: red;">besar padding</span>;}</b><br />
<b><br />
<b> </b></b><br />
<b># Keterangan :</b><br />
<b><span style="color: red;">besar padding</span></b><b> : bisa kamu gandi sesuai keinginan kamu (px)<br />
<b> </b></b></div>
<b>
<br />
<b> <a href="http://www.blogger.com/goog_2060800335">7. Warna Tabel (</a></b><a href="http://farizky234.blogspot.com/2011/09/bab-vi-belajar-css-bagian-5-list-tabel.html"> <b>Table Color )</b></a><br />
cara ini merupakan gabungan antara desain border, warna tulisan dan warna background, rumusnya yaitu :<br />
</b><br />
<div style="background-color: #9fc5e8; border: 2px solid black; margin: 0pt 50px; padding: 5px;">
<b><b>table, td, th
{border:<span style="color: purple;">desain border</span>;}</b></b><br />
<b><b>th
{background-color:<span style="color: blue;">warna background</span>;color:<span style="color: red;">warna tulisan</span>;}</b><b> </b></b><br />
<b><br /></b><br />
<b><b># Keterangan :</b></b><br />
<b><b><span style="color: red;">warna tulisan : </span></b><b>dapat kamu ganti dengan HEX, RGB atau kata warna b. inggris</b><b> </b></b><br />
<b><b><span style="color: blue;">warna background : </span></b><b>dapat kamu ganti dengan HEX, RGB atau kata warna b. inggris</b></b><br />
<b><b><span style="color: purple;">desain border : </span></b><b>dapat kamu isi sesuai keinginan kamu, besar border (px) jenis border dan warna border</b><b></b></b></div>
<b>
<br />
</b><br />
<div style="text-align: right;">
<b><b><span style="color: red;">| </span></b><span style="color: red;">Bab VII : Belajar CSS3 Bagian 1 ( Perkenalan | Box model | Box Shadow )</span></b><b><b><span style="color: red;"> | <a href="http://farizky234.blogspot.com/2011/09/bab-vii-belajar-css3-bagian-1.html">Tahap Berikutnya </a></span></b></b></div>
<b>
</b></div>
<b>
</b><br />
<div style="text-align: right;">
<br />
<b><a href="http://farizky234.blogspot.com/"><b>Farkryzer</b></a></b></div>
<b>
</b>Anonymoushttp://www.blogger.com/profile/15367599609887741667noreply@blogger.com1tag:blogger.com,1999:blog-8721127227831086686.post-51237281976135105102011-09-04T09:54:00.000+07:002011-12-20T21:47:44.908+07:00Bab V : Belajar CSS bagian 4 ( Border | Margin | Padding )<br />
<a name='more'></a>Sudah 4 materi kita pelajari, sebelumnya<br />
<a href="http://farizky234.blogspot.com/2011/09/bab-iv-belajar-css-bagian-3-link.html">Bab IV : Belajar CSS bagian 3 ( Link | hover )</a><br />
kita pelajari, saatnya masuk ke materi baru : Bab V : <b>Belajar CSS bagian 4 ( Border | Margin | Padding )</b><br />
<br />
Bab V : Belajar CSS bagian 4 ( Border | Margin | Padding )<br />
Kalian akan mempelajari :<br />
<a href="http://farizky234.blogspot.com/2011/09/bab-v-belajar-css-bagian-4-border.html">1. Membuat atau mengatur margin dengan CSS </a><br />
<a href="http://farizky234.blogspot.com/2011/09/bab-v-belajar-css-bagian-4-border.html">2. Membuat atau mendesain border dengan CSS</a><br />
<a href="http://farizky234.blogspot.com/2011/09/bab-v-belajar-css-bagian-4-border.html">3. Membuat atau mengatur padding dengan CSS</a><br />
<br />
<div style="border: 5px dashed blue; padding: 15px;">
<b style="color: blue;"><a href="http://farizky234.blogspot.com/2011/09/bab-iv-belajar-css-bagian-3-link.html">Tahap Sebelumnya</a> | Bab IV : Belajar CSS bagian 3 ( Link | hover ) |</b><br />
<br />
Sebelum memulai materi ini saya awali terlebih dahulu penjelasan margin. border dan padding. Yang sudah mengerti silahkan skip saja :<br />
<br />
<div style="border: 1px dashed blue; padding: 15px;">
<div style="text-align: center;">
<b>Margin
</b></div>
<div style="background-color: red; padding: 15px;">
<div style="color: white; text-align: center;">
<b>Border</b></div>
<div style="background-color: white; border: 1px dashed black; padding: 15px;">
<div style="text-align: center;">
<b>Padding</b></div>
<div style="background-color: white; border: 1px dashed black; padding: 15px; text-align: center;">
<br />
<b>Konten / Isi </b><br />
<br /></div>
</div>
</div>
</div>
Margin : Area terluar border ( konten )<br />
Border : garis yang memisahkan margin dengan padding<br />
Padding : Area dalam pemisah border dengan konten / isi<br />
Konten / isi : tempat dimana sesuatu kamu letakan ( teks, gambar dll )<br />
<br />
<b> <a href="http://farizky234.blogspot.com/2011/09/bab-v-belajar-css-bagian-4-border.html">1. Margin</a></b><br />
Seperti yang telah saya jelaskan di atas, padding area terluar border atau juga bisa yang lainnya gambar, tulisan juga dapat di buat margin. biasanya di gunakan untuk memisahkan border dengan konten lain agar tidak menyatu. Rumus untuk membuat margin yaitu :<br />
<br />
<br />
<div style="background-color: #9fc5e8; border: 2px solid black; margin: 0pt 50px; padding: 5px;">
<b>selector {margin-<span style="color: red;">letak</span>:<span style="color: blue;">besarnya</span>;}</b><br />
<br />
<b># Keterangan </b><br />
<b><span style="color: red;">letak </span>: bisa kamu tentukan mana yang akan kamu buat margin apakah itu <span style="color: red;">top</span> (atas), <span style="color: red;">bottom</span> (bawah), <span style="color: red;">left</span> (kiri) atau <span style="color: red;">right</span> (kanan)</b> <br />
<b><span style="color: blue;">besarnya</span> : yaitu besar jarak margin (lebar) ditentukan dengan px</b><br />
<b><br /></b><br />
<b>misal seperti ini jadinya :</b><br />
<b>.post-body img{margin-<span style="color: red;">bottom</span>:<span style="color: blue;">10px</span>;}</b><br />
<b>menjelaskan bahwa jarak pemisah bagian bawah gambar post 10px</b></div>
<div style="background-color: #6fa8dc; border: 2px solid black; margin: 0pt 50px; padding: 5px;">
<b>Note : Untuk membuatnya lebih singkat kamu dapat menggunakan cara ini :</b><br />
<b>selector {margin: <span style="color: red;">top</span> <span style="color: blue;">right</span> <span style="color: purple;">bottom</span> <span style="color: magenta;">left</span>;}</b><br />
<b>Contohnya : </b><br />
<b>p {margin: <span style="color: red;">10px</span> <span style="color: blue;">10px</span> <span style="color: purple;"></span></b><b><span style="color: purple;">10px</span></b><b> <span style="color: magenta;">10px</span>;}</b><br />
<b>Namun jika ingin membuat margin hanya bottom dan top saja tetapi ingin metode singkat ini, contohnya :</b><br />
<b>p {margin: <span style="color: red;">10px</span><span style="color: blue;"> 0</span> <span style="color: purple;">10px</span> <span style="color: magenta;">0</span>;} </b></div>
<b>
</b><br />
<b> <a href="http://farizky234.blogspot.com/2011/09/bab-v-belajar-css-bagian-4-border.html"><b>2. Border</b></a>
<br />
Border sangat penting untuk mendesain web / blog karena dapat memperindah web / blog, ada macam-macam jenis border ada solid, dashed, dotted, inset, outset, ridge, groove dan double, bentuknya yaitu :<br />
<br />
</b><br />
<div style="border: 5px solid red; text-align: center;">
<b><b style="color: red;">solid</b></b></div>
<b>
<br />
</b><br />
<div style="border: 5px dashed red; text-align: center;">
<b>dashed</b></div>
<b>
<br />
</b><br />
<div style="border: 5px dotted red; text-align: center;">
<b>dotted</b></div>
<b>
<br />
</b><br />
<div style="border: 5px inset red; text-align: center;">
<b>inset</b></div>
<b>
<br />
</b><br />
<div style="border: 5px outset red; text-align: center;">
<b>outset</b></div>
<b>
<br />
</b><br />
<div style="border: 5px ridge red; text-align: center;">
<b>ridge</b></div>
<b>
<br />
</b><br />
<div style="border: 5px groove red; text-align: center;">
<b>groove</b></div>
<b>
<br />
</b><br />
<div style="border: 5px double red; text-align: center;">
<b>double</b></div>
<b>
<br />
Sekarang lihat caranya :
<br /><br />
</b><br />
<div style="background-color: #9fc5e8; border: 2px solid black; margin: 0pt 50px; padding: 5px;">
<b><b>1. Rumus Border</b></b><br />
<b><b>Selector {border-style:<span style="color: red;">bentuknya</span>;}</b></b><br />
<b><b># Ket : </b><b><span style="color: red;">bentuknya</span></b><b> : kamu atur sesuai keinginan kodenya yaitu yang diatas ( solid, dashed ... )</b></b><br />
<b><b>Contoh : a img {border-style:solid}</b></b><br />
<b><br /></b><br />
<b><b>2.Kode CSS dibawah dapat digunakan sebagai pelengkap border</b></b><br />
<b><b> a. menentukan lebar border :</b></b><br />
<b><b>Selector {</b><b>border-style:bentuknya;</b><b>border-width:<span style="color: red;">besarnya</span>;} </b></b><br />
<b><b># Ket : </b><b><span style="color: red;">besarnya : </span>kamu ganti sesuai keinginan kamu</b><b><span style="color: red;"> </span>( px dll</b><b><span style="color: red;"> </span>)</b></b><br />
<b><b>Contoh : a img {</b><b>border-style:dashed;</b><b>border-width:<span style="color: red;">400px</span>;} </b></b><br />
<b><br /></b><br />
<b><b> b. menentukan warna border :</b><b>Selector {</b><b>border-style:bentuknya;</b><b>border-color:<span style="color: red;">warnanya</span>;}</b></b><br />
<b><b># Ket : </b><b><span style="color: red;">warnanya</span>;</b><b> : kamu ganti sesuai keinginan kamu ( HEX, RGB, color name )</b></b><br />
<b><b>Contoh : </b><b>a img {</b><b>border-style:inline;</b><b>border-color:<span style="color: red;">(0,0,255</span>;}</b></b><br />
<b><b><br /></b></b><br />
<b><b>3. Membuat border individual :</b></b><br />
<b><b>Selector {</b><b>border-<span style="color: red;">pilihan</span>:<span style="color: blue;">bentuknya</span>;}</b></b><br />
<b><b># Ket : </b><b><span style="color: red;">pilihan :</span> mana yang akan kamu buat border top ( atas ), bottom ( bawah ), left ( kiri ) atau right ( kanan ).</b></b><br />
<b> <b><span style="color: blue;">bentuknya : </span>(solid, dashed ... )</b></b><br />
<b><b>Contoh :</b> </b><br />
<b><b>a img {</b><b>border-<span style="color: red;">top</span>:<span style="color: blue;">dashed</span>;</b><b>border-<span style="color: red;">right</span>:<span style="color: blue;">inline</span>;</b><b>border-<span style="color: red;">bottom</span>:<span style="color: blue;">outline</span>;</b><b>border-<span style="color: red;">left</span>:<span style="color: blue;">double</span>;}</b></b></div>
<b>
</b><br />
<div style="background-color: #6fa8dc; border: 2px solid black; margin: 0pt 50px; padding: 5px;">
<b>Note : Untuk membuatnya lebih singkat kamu dapat menggunakan cara ini :</b><br />
<b>selector {border: <span style="color: red;">besarnya</span> <span style="color: blue;">bentuknya</span> <span style="color: purple;">warnanya</span>;}</b><br />
<b>Contohnya : </b><br />
<b><b><b>a img {</b><b>border: <span style="color: red;">5px</span> <span style="color: blue;">groove</span> <span style="color: purple;">#ff0000</span></b><b>;}</b></b></b><b></b></div>
<b>
</b><br />
<b> <a href="http://farizky234.blogspot.com/2011/09/bab-v-belajar-css-bagian-4-border.html">3.Padding</a></b><br />
<b> Bisa dikatakan caranya persis dengan metode buat / atur margin :</b><br />
<div style="background-color: #9fc5e8; border: 2px solid black; margin: 0pt 50px; padding: 5px;">
<b>selector {padding-<span style="color: red;">letak</span>:<span style="color: blue;">besarnya</span>;}</b><br />
<br />
<b># Keterangan </b><br />
<b><span style="color: red;">letak </span>: bisa kamu tentukan mana yang akan kamu buat padding apakah itu <span style="color: red;">top</span> (atas), <span style="color: red;">bottom</span> (bawah), <span style="color: red;">left</span> (kiri) atau <span style="color: red;">right</span> (kanan)</b> <br />
<b><span style="color: blue;">besarnya</span> : yaitu besar jarak margin (lebar) ditentukan dengan px</b><br />
<b><br /></b><br />
<b>misal seperti ini jadinya :</b><br />
<b>.post-title a{padding-<span style="color: red;">left</span>:<span style="color: blue;">5px</span>;}</b><br />
<b>menjelaskan bahwa jarak bagian kiri link judul post 10px</b></div>
<div style="background-color: #6fa8dc; border: 2px solid black; margin: 0pt 50px; padding: 5px;">
<b>Note : Untuk membuatnya lebih singkat kamu dapat menggunakan cara ini :</b><br />
<b>selector {padding: <span style="color: red;">top</span> <span style="color: blue;">right</span> <span style="color: purple;">bottom</span> <span style="color: magenta;">left</span>;}</b><br />
<b>Contohnya : </b><br />
<b>.post-title a{padding: <span style="color: red;">15px</span> <span style="color: blue;">10px</span> </b><b><span style="color: purple;">15px</span></b><b> <span style="color: magenta;">20px</span>;}</b><br />
<b>Namun jika ingin membuat margin hanya left saja tetapi ingin metode singkat ini, contohnya :</b><br />
<b>.post-title a{padding: <span style="color: red;">0</span><span style="color: blue;"> 0</span> <span style="color: purple;">0</span> <span style="color: magenta;">20</span>px;} </b></div>
<b>
</b><br />
<div style="text-align: right;">
<b> <span style="color: red;">| Bab VI : Belajar CSS bagian 5 ( List | Tabel ) | <a href="http://farizky234.blogspot.com/2011/09/bab-vi-belajar-css-bagian-5-list-tabel.html">Tahap Berikutnya</a></span></b></div>
</div>
<br />
<div style="text-align: right;">
<a href="http://farizky234.blogspot.com/"><b>Farkryzer</b></a></div>Anonymoushttp://www.blogger.com/profile/15367599609887741667noreply@blogger.com3