Followers

Powered by Blogger.

  • Cara Membuat Tabel Kode Warna (Update)

    By : ANS-Home

    1 Comment
    What's up friends?
    Kali ini saya akan memberikan tutorial "Cara Membuat Tabel Kode Warna".
    Pertama, saya akan menjelaskan apa itu Kode Warna. Kode warna adalah sekumpulan kode-kode tertentu yang dibuat khusus untuk menciptakan suatu warna yang tertentu, hal ini sangat diperlukan dalam bidang persenian dan aplikasi-aplikasi seni (ex : Adobe Photoshop, Image Creator, dsb), dan setiap satu kode hanya memiliki satu warna saja (ex : kode #000000 hanya menciptakan satu warna saja, yaitu warna hitam, dan tidak ada diciptakan warna yang lain untuk kode tersebut).
    Tapi teman-teman, saat ini saya tidak hanya memberikan kode dengan tanda pagar (#) saja, melainkan dengan Nama Warnanya dan Desimal Warnanya.

    Untuk contoh/demonya klik link di bawah :
    ►Tabel Kode Warna◄

    Cara Membuat :
    1. Login di blogger.com dengan akun yang bersangkutan
    2. Masuk ke menu "Editor/Posting/Entri/Artikel"
    3. Lalu pilih tab "HTML" yang di sebelah kanan tab "Compose"
    4. Lalu masukkan kode berikut :


    <table cellpadding="4"><tbody>
    <tr><th style="background: none repeat scroll 0% 0% rgb(255, 255, 255); color: black;">Warna/Color</th> <th style="color: black;">Nama Warna</th><th style="color: black;">Hexadecimal</th><th style="color: black;">Desimal</th></tr>
    </tbody><tbody style="color: #d8e5a3; font-family: Arial; font-size: 12px; font-weight: 500;">
    <tr><td style="background: none repeat scroll 0% 0% rgb(240, 248, 255); color: black;"><br /></td><td style="color: black;">01. aliceblue</td><td style="color: black;">#f0f8ff</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">240,248,255</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% antiquewhite; color: black;"><br /></td><td style="color: black;">02. antiquewhite</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#faebd7</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">250,235,215</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% aqua; color: black;"><br /></td><td style="color: black;">03  aqua</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#00ffff</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">0,255,255</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% aquamarine; color: black;"><br /></td><td style="color: black;">04. aquamarine</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#7fffd4</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">127,255,212</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% azure; color: black;"><br /></td><td style="color: black;">05. azure</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#f0ffff</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">240,255,255</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% beige; color: black;"><br /></td><td style="color: black;">06. beige</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#f5f5dc</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">245,245,220</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% bisque; color: black;"><br /></td><td style="color: black;">07. bisque</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#ffe4c4</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">255,228,196</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% black; color: black;"><br /></td><td style="color: black;">08. black</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#000000</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">0,0,0</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% blanchedalmond; color: black;"><br /></td><td style="color: black;">09. blanchedalmond</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#ffebcd</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">255,235,205</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% blue; color: black;"><br /></td><td style="color: black;">10. blue</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#0000ff</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">0,0,255</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% blueviolet; color: black;"><br /></td><td style="color: black;">11. blueviolet</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#8a2be2</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">138,43,226</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% brown; color: black;"><br /></td><td style="color: black;">12. brown</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#a52a2a</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">165,42,42</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% burlywood; color: black;"><br /></td><td style="color: black;">13. burlywood</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#deb887</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">222,184,135</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% cadetblue; color: black;"><br /></td><td style="color: black;">14. cadetblue</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#5f9ea0</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">95,158,160</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% chartreuse; color: black;"><br /></td><td style="color: black;">15. chartreuse</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#7fff00</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">127,255,0</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% chocolate; color: black;"><br /></td><td style="color: black;">16. chocolate</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#d2691e</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">210,105,30</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% coral; color: black;"><br /></td><td style="color: black;">17. coral</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#ff7f50</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">255,127,80</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% cornflowerblue; color: black;"><br /></td><td style="color: black;">18. cornflowerblue</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#6495ed</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">100,149,237</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% cornsilk; color: black;"><br /></td><td style="color: black;">19. cornsilk</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#fff8dc</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">255,248,220</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% crimson; color: black;"><br /></td><td style="color: black;">20. crimson</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#dc143c</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">220,20,60</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% cyan; color: black;"><br /></td><td style="color: black;">21. cyan</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#00ffff</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">0,255,255</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% darkblue; color: black;"><br /></td><td style="color: black;">22. darkblue</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#00008b</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">0,0,139</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% darkcyan; color: black;"><br /></td><td style="color: black;">23. darkcyan</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#008b8b</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">0,139,139</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% darkgoldenrod; color: black;"><br /></td><td style="color: black;">24. darkgoldenrod</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#b8860b</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">184,134,11</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% darkgray; color: black;"><br /></td><td style="color: black;">25. darkgray</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#a9a9a9</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">169,169,169</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% darkgreen; color: black;"><br /></td><td style="color: black;">26. darkgreen</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#006400</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">0,100,0</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% darkgrey; color: black;"><br /></td><td style="color: black;">27. darkgrey</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#a9a9a9</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">169,169,169</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% darkkhaki; color: black;"><br /></td><td style="color: black;">28. darkkhaki</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#bdb76b</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">189,183,107</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% darkmagenta; color: black;"><br /></td><td style="color: black;">29. darkmagenta</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#8b008b</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">139,0,139</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% darkolivegreen; color: black;"><br /></td><td style="color: black;">30. darkolivegreen</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#556b2f</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">85,107,47</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% darkorange; color: black;"><br /></td><td style="color: black;">31. darkorange</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#ff8c00</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">255,140,0</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% darkorchid; color: black;"><br /></td><td style="color: black;">32. darkorchid</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#9932cc</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">153,50,204</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% darkred; color: black;"><br /></td><td style="color: black;">33. darkred</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#8b0000</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">139,0,0</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% darksalmon; color: black;"><br /></td><td style="color: black;">34. darksalmon</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#e9967a</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">233,150,122</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% darkseagreen; color: black;"><br /></td><td style="color: black;">35. darkseagreen</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#8fbc8f</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">143,188,143</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% darkslateblue; color: black;"><br /></td><td style="color: black;">36. darkslateblue</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#483d8b</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">72,61,139</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% darkslategray; color: black;"><br /></td><td style="color: black;">37. darkslategray</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#2f4f4f</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">47,79,79</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% darkslategrey; color: black;"><br /></td><td style="color: black;">38. darkslategrey</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#2f4f4f</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">47,79,79</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% darkturquoise; color: black;"><br /></td><td style="color: black;">39. darkturquoise</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#00ced1</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">0,206,209</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% darkviolet; color: black;"><br /></td><td style="color: black;">40. darkviolet</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#9400d3</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">148,0,211</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% deeppink; color: black;"><br /></td><td style="color: black;">41. deeppink</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#ff1493</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">255,20,147</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% deepskyblue; color: black;"><br /></td><td style="color: black;">42. deepskyblue</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#00bfff</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">0,191,255</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% dimgray; color: black;"><br /></td><td style="color: black;">43. dimgray</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#696969</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">105,105,105</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% dimgrey; color: black;"><br /></td><td style="color: black;">44. dimgrey</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#696969</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">105,105,105</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% dodgerblue; color: black;"><br /></td><td style="color: black;">45. dodgerblue</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#1e90ff</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">30,144,255</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% firebrick; color: black;"><br /></td><td style="color: black;">46. firebrick</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#b22222</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">178,34,34</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% floralwhite; color: black;"><br /></td><td style="color: black;">47. floralwhite</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#fffaf0</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">255,250,240</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% forestgreen; color: black;"><br /></td><td style="color: black;">48. forestgreen</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#228b22</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">34,139,34</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% fuchsia; color: black;"><br /></td><td style="color: black;">49. fuchsia</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#ff00ff</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">255,0,255</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% gainsboro; color: black;"><br /></td><td style="color: black;">50. gainsboro</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#dcdcdc</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">220,220,220</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% ghostwhite; color: black;"><br /></td><td style="color: black;">51. ghostwhite</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#f8f8ff</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">248,248,255</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% gold; color: black;"><br /></td><td style="color: black;">52. gold</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#ffd700</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">255,215,0</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% goldenrod; color: black;"><br /></td><td style="color: black;">53. goldenrod</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#daa520</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">218,165,32</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% gray; color: black;"><br /></td><td style="color: black;">54. gray</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#808080</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">128,128,128</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% green; color: black;"><br /></td><td style="color: black;">55. green</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#008000</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">0,128,0</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% greenyellow; color: black;"><br /></td><td style="color: black;">56. greenyellow</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#adff2f</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">173,255,47</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% grey; color: black;"><br /></td><td style="color: black;">57. grey</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#808080</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">128,128,128</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% honeydew; color: black;"><br /></td><td style="color: black;">58. honeydew</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#f0fff0</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">240,255,240</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% hotpink; color: black;"><br /></td><td style="color: black;">59. hotpink</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#ff69b4</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">255,105,180</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% indianred; color: black;"><br /></td><td style="color: black;">60. indianred</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#cd5c5c</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">205,92,92</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% indigo; color: black;"><br /></td><td style="color: black;">61. indigo</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#4b0082</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">75,0,130</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% ivory; color: black;"><br /></td><td style="color: black;">62. ivory</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#fffff0</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">255,255,240</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% khaki; color: black;"><br /></td><td style="color: black;">63. khaki</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#f0e68c</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">240,230,140</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% lavender; color: black;"><br /></td><td style="color: black;">64. lavender</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#e6e6fa</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">230,230,250</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% lavenderblush; color: black;"><br /></td><td style="color: black;">65. lavenderblush</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#fff0f5</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">255,240,245</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% lawngreen; color: black;"><br /></td><td style="color: black;">66. lawngreen</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#7cfc00</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">124,252,0</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% lemonchiffon; color: black;"><br /></td><td style="color: black;">67. lemonchiffon</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#fffacd</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">255,250,205</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% lightblue; color: black;"><br /></td><td style="color: black;">68. lightblue</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#add8e6</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">173,216,230</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% lightcoral; color: black;"><br /></td><td style="color: black;">69. lightcoral</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#f08080</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">240,128,128</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% lightcyan; color: black;"><br /></td><td style="color: black;">70. lightcyan</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#e0ffff</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">224,255,255</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% lightgoldenrodyellow; color: black;"><br /></td><td style="color: black;">71. lightgoldenrodyellow</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#fafad2</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">250,250,210</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% lightgray; color: black;"><br /></td><td style="color: black;">72. lightgray</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#d3d3d3</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">211,211,211</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% lightgreen; color: black;"><br /></td><td style="color: black;">73. lightgreen</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#90ee90</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">144,238,144</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% lightgrey; color: black;"><br /></td><td style="color: black;">74. lightgrey</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#d3d3d3</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">211,211,211</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% lightpink; color: black;"><br /></td><td style="color: black;">75. lightpink</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#ffb6c1</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">255,182,193</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% lightsalmon; color: black;"><br /></td><td style="color: black;">76. lightsalmon</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#ffa07a</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">255,160,122</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% lightseagreen; color: black;"><br /></td><td style="color: black;">77. lightseagreen</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#20b2aa</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">32,178,170</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% lightskyblue; color: black;"><br /></td><td style="color: black;">78. lightskyblue</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#87cefa</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">135,206,250</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% lightslategray; color: black;"><br /></td><td style="color: black;">79. lightslategray</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#778899</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">119,136,153</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% lightslategrey; color: black;"><br /></td><td style="color: black;">80. lightslategrey</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#778899</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">119,136,153</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% lightsteelblue; color: black;"><br /></td><td style="color: black;">81. lightsteelblue</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#b0c4de</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">176,196,222</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% lightyellow; color: black;"><br /></td><td style="color: black;">82. lightyellow</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#ffffe0</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">255,255,224</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% lime; color: black;"><br /></td><td style="color: black;">83. lime</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#00ff00</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">0,255,0</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% limegreen; color: black;"><br /></td><td style="color: black;">84. limegreen</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#32cd32</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">50,205,50</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% linen; color: black;"><br /></td><td style="color: black;">85. linen</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#faf0e6</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">250,240,230</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% magenta; color: black;"><br /></td><td style="color: black;">86. magenta</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#ff00ff</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">255,0,255</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% maroon; color: black;"><br /></td><td style="color: black;">87. maroon</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#800000</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">128,0,0</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% mediumaquamarine; color: black;"><br /></td><td style="color: black;">88. mediumaquamarine</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#66cdaa</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">102,205,170</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% mediumblue; color: black;"><br /></td><td style="color: black;">89. mediumblue</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#0000cd</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">0,0,205</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% mediumorchid; color: black;"><br /></td><td style="color: black;">90. mediumorchid</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#ba55d3</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">186,85,211</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% mediumpurple; color: black;"><br /></td><td style="color: black;">91. mediumpurple</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#9370db</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">147,112,219</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% mediumseagreen; color: black;"><br /></td><td style="color: black;">92. mediumseagreen</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#3cb371</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">60,179,113</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% mediumslateblue; color: black;"><br /></td><td style="color: black;">93. mediumslateblue</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#7b68ee</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">123,104,238</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% mediumspringgreen; color: black;"><br /></td><td style="color: black;">94. mediumspringgreen</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#00fa9a</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">0,250,154</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% mediumturquoise; color: black;"><br /></td><td style="color: black;">95. mediumturquoise</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#48d1cc</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">72,209,204</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% mediumvioletred; color: black;"><br /></td><td style="color: black;">96. mediumvioletred</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#c71585</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">199,21,133</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% midnightblue; color: black;"><br /></td><td style="color: black;">97. midnightblue</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#191970</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">25,25,112</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% mintcream; color: black;"><br /></td><td style="color: black;">98. mintcream</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#f5fffa</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">245,255,250</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% mistyrose; color: black;"><br /></td><td style="color: black;">99. mistyrose</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#ffe4e1</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">255,228,225</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% moccasin; color: black;"><br /></td><td style="color: black;">100. moccasin</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#ffe4b5</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">255,228,181</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% navajowhite; color: black;"><br /></td><td style="color: black;">101. navajowhite</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#ffdead</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">255,222,173</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% navy; color: black;"><br /></td><td style="color: black;">102. navy</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#000080</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">0,0,128</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% oldlace; color: black;"><br /></td><td style="color: black;">103. oldlace</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#fdf5e6</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">253,245,230</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% olive; color: black;"><br /></td><td style="color: black;">104. olive</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#808000</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">128,128,0</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% olivedrab; color: black;"><br /></td><td style="color: black;">105. olivedrab</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#6b8e23</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">107,142,35</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% orange; color: black;"><br /></td><td style="color: black;">106. orange</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#ffa500</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">255,165,0</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% orangered; color: black;"><br /></td><td style="color: black;">107. orangered</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#ff4500</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">255,69,0</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% orchid; color: black;"><br /></td><td style="color: black;">108. orchid</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#da70d6</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">218,112,214</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% palegoldenrod; color: black;"><br /></td><td style="color: black;">109. palegoldenrod</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#eee8aa</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">238,232,170</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% palegreen; color: black;"><br /></td><td style="color: black;">110. palegreen</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#98fb98</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">152,251,152</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% paleturquoise; color: black;"><br /></td><td style="color: black;">111. paleturquoise</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#afeeee</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">175,238,238</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% palevioletred; color: black;"><br /></td><td style="color: black;">112. palevioletred</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#db7093</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">219,112,147</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% papayawhip; color: black;"><br /></td><td style="color: black;">113. papayawhip</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#ffefd5</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">255,239,213</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% peachpuff; color: black;"><br /></td><td style="color: black;">114. peachpuff</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#ffdab9</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">255,218,185</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% peru; color: black;"><br /></td><td style="color: black;">115. peru</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#cd853f</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">205,133,63</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% pink; color: black;"><br /></td><td style="color: black;">116. pink</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#ffc0cb</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">255,192,203</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% plum; color: black;"><br /></td><td style="color: black;">117. plum</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#dda0dd</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">221,160,221</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% powderblue; color: black;"><br /></td><td style="color: black;">118. powderblue</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#b0e0e6</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">176,224,230</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% purple; color: black;"><br /></td><td style="color: black;">119. purple</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#800080</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">128,0,128</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% red; color: black;"><br /></td><td style="color: black;">120. red</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#ff0000</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">255,0,0</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% rosybrown; color: black;"><br /></td><td style="color: black;">121. rosybrown</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#bc8f8f</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">188,143,143</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% royalblue; color: black;"><br /></td><td style="color: black;">122. royalblue</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#4169e1</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">65,105,225</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% saddlebrown; color: black;"><br /></td><td style="color: black;">123. saddlebrown</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#8b4513</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">139,69,19</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% salmon; color: black;"><br /></td><td style="color: black;">124. salmon</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#fa8072</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">250,128,114</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% sandybrown; color: black;"><br /></td><td style="color: black;">125. sandybrown</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#f4a460</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">244,164,96</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% seagreen; color: black;"><br /></td><td style="color: black;">126. seagreen</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#2e8b57</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">46,139,87</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% seashell; color: black;"><br /></td><td style="color: black;">127. seashell</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#fff5ee</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">255,245,238</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% sienna; color: black;"><br /></td><td style="color: black;">128. sienna</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#a0522d</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">160,82,45</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% transparent; color: black;"><br /></td><td style="color: black;">129. transparent</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#c0c0c0</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">192,192,192</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% skyblue; color: black;"><br /></td><td style="color: black;">130. skyblue</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#87ceeb</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">135,206,235</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% slateblue; color: black;"><br /></td><td style="color: black;">131. slateblue</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#6a5acd</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">106,90,205</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% slategray; color: black;"><br /></td><td style="color: black;">132. slategray</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#708090</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">112,128,144</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% slategrey; color: black;"><br /></td><td style="color: black;">133. slategrey</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#708090</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">112,128,144</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% snow; color: black;"><br /></td><td style="color: black;">134. snow</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#fffafa</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">255,250,250</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% springgreen; color: black;"><br /></td><td style="color: black;">135. springgreen</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#00ff7f</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">0,255,127</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% steelblue; color: black;"><br /></td><td style="color: black;">136. steelblue</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#4682b4</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">70,130,180</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% tan; color: black;"><br /></td><td style="color: black;">137. tan</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#d2b48c</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">210,180,140</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% teal; color: black;"><br /></td><td style="color: black;">138. teal</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#008080</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">0,128,128</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% thistle; color: black;"><br /></td><td style="color: black;">139. thistle</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#d8bfd8</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">216,191,216</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% tomato; color: black;"><br /></td><td style="color: black;">140. tomato</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#ff6347</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">255,99,71</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% turquoise; color: black;"><br /></td><td style="color: black;">141. turquoise</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#40e0d0</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">64,224,208</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% violet; color: black;"><br /></td><td style="color: black;">142. violet</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#ee82ee</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">238,130,238</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% wheat; color: black;"><br /></td><td style="color: black;">143. wheat</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#f5deb3</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">245,222,179</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% white; color: black;"><br /></td><td style="color: black;">144.white</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#ffffff</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">255,255,255</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% whitesmoke; color: black;"><br /></td><td style="color: black;">145. whitesmoke</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#f5f5f5</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">245,245,245</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% yellow; color: black;"><br /></td><td style="color: black;">146. yellow</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#ffff00</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">255,255,0</td></tr>
    <tr><td style="background: none repeat scroll 0% 0% yellowgreen; color: black;"><br /></td><td style="color: black;">147. yellowgreen</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">#9acd32</td><td style="background: none repeat scroll 0% 0% transparent; color: black;">154,205,50</td></tr>
    </tbody></table>


    5. Setelah itu terserah anda mau di "Simpan/Pratinjau"
    6. Jika gan rasa sudah pas, langsung aja pilih tab "Publikasikan"
    7. Selesai, dan teman-teman sudah bisa melihat hasilnya.



    Sekian dulu pemberitahuan dari saya..
    See you in my next pages..
    Bye gan..!!

    Selamat mencoba..

    *jangan lupa komentarnya ya gan.. :D

    -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
    DAFTAR ISI :

  • Cara Membuat Efek Gelembung Pada Mouse Blog

    By : ANS-Home

    3 Comments
    What's up friends..!!
    Sekarang saya akan memberikan tutorial "Cara Membuat Efek Gelembung Pada Mouse".

    Tips yang satu ini gak susah-susah amat kok gan. Tetapi melalui tips yang satu ini, kita diajarkan untuk menjadi kreatif.Tips ini akan membuat blog teman-teman semua menjadi lebih indah dan menarik. Tapi hati-hati teman, ini akan memperberat blog anda juga, tapi gak berat-berat amat kok gan.. ^_^

    Dan karena saya murah hati, saya memberikan 2 model untuk teman-teman saya semua. :D
    Dan karena saya murah hati juga, saya memberikan 2 cara untuk membuat efek gelembung ini. :D
    Untuk contoh/demonya, silahkan lihat pada script/kode model masing-masing.

    Oke gan, langsung aja ke caranya :

    Cara 1 :
    1. Login dulu di blogger.com dengan akun yang bersangkutan
    2. Dari Dasbor,
         - Pilih Template
         - Edit HTML
         - Pilih Lanjutkan
         - Centang "Expand Template Widget"
    3. Cari kode </head>     untuk mempermudah mencari, tekan F3 atau CTRL+F
    4. Letakkan script/kode efeknya diatas/sebelum kode </head>
    ( untuk script/kodenya lihat setelah cara ke-2 )
    5. Lalu klik Pratinjau/Preview untuk memastikan apakah script/kodenya berjalan dengan baik atau tidak.
    6. Jika sudah oke, Simpan/save template anda.

    Cara 2 :

    1. Login dulu di blogger.com dengan akun yang bersangkutan
    2. Dari Dasbor,
         - Pilih Tata Letak atau Page Element
         - Klik Tambah Gadget
         - Pilih dan klik HTML/JavaScript
    3. Letakkan script/kode efeknya
    4. Simpan

    Script/kode Efek Gelembung Model 1 :
    DEMO


    <script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">
    // <![CDATA[
    var colours=new Array("#ff0000", "#ff0000", "#ff0000", "#ff0000", "#ff0000"); // colours for top, right, bottom and left borders and background of bubbles
    var bubbles=100; // maximum number of bubbles on screen

     var x=ox=400;
    var y=oy=300;
    var swide=800;
    var shigh=600;
    var sleft=sdown=0;
    var bubb=new Array();
    var bubbx=new Array();
    var bubby=new Array();
    var bubbs=new Array();

     window.onload=function() { if (document.getElementById) {
    var rats, div;
    for (var i=0; i<bubbles; i++) {
    rats=createDiv("3px", "3px");
    rats.style.visibility="hidden";

     div=createDiv("auto", "auto");
    rats.appendChild(div);
    div=div.style;
    div.top="1px";
    div.left="0px";
    div.bottom="1px";
    div.right="0px";
    div.borderLeft="1px solid "+colours[3];
    div.borderRight="1px solid "+colours[1];

     div=createDiv("auto", "auto");
    rats.appendChild(div);
    div=div.style;
    div.top="0px";
    div.left="1px";
    div.right="1px";
    div.bottom="0px"
    div.borderTop="1px solid "+colours[0];
    div.borderBottom="1px solid "+colours[2];

     div=createDiv("auto", "auto");
    rats.appendChild(div);
    div=div.style;
    div.left="1px";
    div.right="1px";
    div.bottom="1px";
    div.top="1px";
    div.backgroundColor=colours[4];
    div.opacity=0.5;
    if (document.all) div.filter="alpha(opacity=50)";

     document.body.appendChild(rats);
    bubb[i]=rats.style;
    }
    set_scroll();
    set_width();
    bubble();
    }}
    function bubble() {
    var c;
    if (x!=ox || y!=oy) {
    ox=x;
    oy=y;
    for (c=0; c<bubbles; c++) if (!bubby[c]) {
    bubb[c].left=(bubbx[c]=x)+"px";
    bubb[c].top=(bubby[c]=y)+"px";
    bubb[c].width="3px";
    bubb[c].height="3px"
    bubb[c].visibility="visible";
    bubbs[c]=3;
    break;
    }
    }
    for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);
    setTimeout("bubble()", 40);
    }

     function update_bubb(i) {
    if (bubby[i]) {
    bubby[i]-=bubbs[i]/2+i%2;
    bubbx[i]+=(i%5-2)/5;
    if (bubby[i]>sdown && bubbx[i]>0) {
    if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {
    bubb[i].width=bubbs[i]+"px";
    bubb[i].height=bubbs[i]+"px";
    }
    bubb[i].top=bubby[i]+"px";
    bubb[i].left=bubbx[i]+"px";
    }
    else {
    bubb[i].visibility="hidden";
    bubby[i]=0;
    return;
    }
    }
    }
    document.onmousemove=mouse;
    function mouse(e) {
    set_scroll();
    y=(e)?e.pageY:event.y+sleft;
    x=(e)?e.pageX:event.x+sdown; }

     window.onresize=set_width;
    function set_width() {
    if (document.documentElement && document.documentElement.clientWidth) {
    swide=document.documentElement.clientWidth;
    shigh=document.documentElement.clientHeight;
    }
    else if (typeof(self.innerHeight)=="number") {
    swide=self.innerWidth;
    shigh=self.innerHeight;
    }
    else if (document.body.clientWidth) {
    swide=document.body.clientWidth;
    shigh=document.body.clientHeight;
    }
    else {
    swide=800;
    shigh=600;
    }
    }
    window.onscroll=set_scroll;
    function set_scroll() {
    if (typeof(self.pageYOffset)=="number") {
    sdown=self.pageYOffset;
    sleft=self.pageXOffset;
    }
    else if (document.body.scrollTop || document.body.scrollLeft) {
    sdown=document.body.scrollTop;
    sleft=document.body.scrollLeft;
    }
    else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
    sleft=document.documentElement.scrollLeft;
    sdown=document.documentElement.scrollTop;
    }
    else {
    sdown=0;
    sleft=0;
    }
    }
    function createDiv(height, width) {
    var div=document.createElement("div");
    div.style.position="absolute";
    div.style.height=height;
    div.style.width=width;
    div.style.overflow="hidden";
    return (div);
    }
    // ]]>
    </script>


    ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼
    Keterangan :
    var colours=new Array("#ff0000", "#ff0000", "#ff0000", "#ff0000", "#ff0000"); ► adalah warna untuk border dan backgroundnya, anda bisa mengganti #ff0000 dengan kode warna yang lain.
    var bubbles=100; ► adalah jumlah banyaknya gelembung yang keluar per satu trip, tetapi untuk hasil yang lebih baik, biarkan saja begitu.

     untuk kode warna silahkan lihat 3 link kode warna dibawah :
    - Tabel Kode Warna
    - Kode Warna 238 Warna
    - Kode Warna 2 Model




    Script/kode Efek Gelembung Model 2 :
    DEMO


    <script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">
    // <![CDATA[
    var colours=new Array("#FF0000", "#6600CC", "#0000CC", "#FF00CC", "transparance"); // colours for top, right, bottom and left borders and background of bubbles
    var bubbles=100; // maximum number of bubbles on screen

    var x=ox=400;
    var y=oy=300;
    var swide=800;
    var shigh=600;
    var sleft=sdown=0;
    var bubb=new Array();
    var bubbx=new Array();
    var bubby=new Array();
    var bubbs=new Array();

    window.onload=function() { if (document.getElementById) {
    var rats, div;
    for (var i=0; i<bubbles; i++) {
    rats=createDiv("3px", "3px");
    rats.style.visibility="hidden";

    div=createDiv("auto", "auto");
    rats.appendChild(div);
    div=div.style;
    div.top="1px";
    div.left="0px";
    div.bottom="1px";
    div.right="0px";
    div.borderLeft="1px solid "+colours[3];
    div.borderRight="1px solid "+colours[1];

    div=createDiv("auto", "auto");
    rats.appendChild(div);
    div=div.style;
    div.top="0px";
    div.left="1px";
    div.right="1px";
    div.bottom="0px"
    div.borderTop="1px solid "+colours[0];
    div.borderBottom="1px solid "+colours[2];

    div=createDiv("auto", "auto");
    rats.appendChild(div);
    div=div.style;
    div.left="1px";
    div.right="1px";
    div.bottom="1px";
    div.top="1px";
    div.backgroundColor=colours[4];
    div.opacity=0.5;
    if (document.all) div.filter="alpha(opacity=50)";

    document.body.appendChild(rats);
    bubb[i]=rats.style;
    }
    set_scroll();
    set_width();
    bubble();
    }}


    function bubble() {
    var c;
    if (x!=ox || y!=oy) {
    ox=x;
    oy=y;
    for (c=0; c<bubbles; c++) if (!bubby[c]) {
    bubb[c].left=(bubbx[c]=x)+"px";
    bubb[c].top=(bubby[c]=y)+"px";
    bubb[c].width="3px";
    bubb[c].height="3px"
    bubb[c].visibility="visible";
    bubbs[c]=3;
    break;
    }
    }
    for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);
    setTimeout("bubble()", 40);
    }

    function update_bubb(i) {
    if (bubby[i]) {
    bubby[i]-=bubbs[i]/2+i%2;
    bubbx[i]+=(i%5-2)/5;
    if (bubby[i]>sdown && bubbx[i]>0) {
    if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {
    bubb[i].width=bubbs[i]+"px";
    bubb[i].height=bubbs[i]+"px";
    }
    bubb[i].top=bubby[i]+"px";
    bubb[i].left=bubbx[i]+"px";
    }
    else {
    bubb[i].visibility="hidden";
    bubby[i]=0;
    return;
    }
    }
    }
    document.onmousemove=mouse;
    function mouse(e) {
    set_scroll();
    y=(e)?e.pageY:event.y+sleft;
    x=(e)?e.pageX:event.x+sdown; }

    window.onresize=set_width;
    function set_width() {
    if (document.documentElement && document.documentElement.clientWidth) {
    swide=document.documentElement.clientWidth;
    shigh=document.documentElement.clientHeight;
    }
    else if (typeof(self.innerHeight)=="number") {
    swide=self.innerWidth;
    shigh=self.innerHeight;
    }
    else if (document.body.clientWidth) {
    swide=document.body.clientWidth;
    shigh=document.body.clientHeight;
    }
    else {
    swide=800;
    shigh=600;
    }
    }
    window.onscroll=set_scroll;
    function set_scroll() {
    if (typeof(self.pageYOffset)=="number") {
    sdown=self.pageYOffset;
    sleft=self.pageXOffset;
    }
    else if (document.body.scrollTop || document.body.scrollLeft) {
    sdown=document.body.scrollTop;
    sleft=document.body.scrollLeft;
    }
    else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
    sleft=document.documentElement.scrollLeft;
    sdown=document.documentElement.scrollTop;
    }
    else {
    sdown=0;
    sleft=0;
    }
    }
    function createDiv(height, width) {
    var div=document.createElement("div");
    div.style.position="absolute";
    div.style.height=height;
    div.style.width=width;
    div.style.overflow="hidden";
    return (div);
    }
    // ]]>
    </script>



    ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼
    Keterangan :
    sama seperti model 1. >>
    var colours=new Array("#FF0000", "#6600CC", "#0000CC", "#FF00CC", "transparance"); ► kode tersebut jangan diganggu gugat, tetapi kalau anda sudah profesional, ya sudah tidak apa-apa, tetapi untuk hasil yang lebih baik biarkan saja begitu.
    var bubbles=100; ► adalah jumlah banyaknya gelembung yang keluar per satu trip, tetapi untuk hasil yang lebih baik, biarkan saja begitu.

     untuk kode warna silahkan lihat 3 link kode warna dibawah :
    - Tabel Kode Warna
    - Kode Warna 238 Warna
    - Kode Warna 2 Model




    Sekian dulu pemberitahuan dari saya..
    See you in my next pages..
    Bye gan..!!

    Selamat mencoba..

    *jangan lupa komentarnya ya gan.. :D

    -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
    DAFTAR ISI :

  • Cara Membuat Auto Readmore Di Blogger

    By : ANS-Home

    1 Comment
    TERBUKTI BERHASIL 100%..

     What's up friends ?
    Kali ini saya akan memberitahukan tutorial "Cara Membuat Auto Readmore Di Blogger".
    Tips yang satu ini sangat penting anda terapkan di blog anda, karena tips ini akan membuat halaman awal blog anda tidak boros tempat. Tips ini akan memotong sedikit tulisan yang ada pada setiap posting yang ada, tapi tenang gan, tips ini tidak akan menghilangkan tulisan yang dipotong tadi, karena ketika anda klik tulisan "Read More (atau tulisan yang lain)"nya tulisan yang tadi terpotong itu akan kelihatan kembali.
    Jika gan masih bingung atau penasaran, silahkan anda lihat homepage bblog saya untuk demonya.

    Oke gan, langsung aja kita ke cara-cara pembuatannya :
    (langsung to the point aja ya gan)
    1. Login di blogger.com
    2. Dari dasbor,
         - pilih Template 
         - pilih Edit HTML
         - centang/ceklis Expand Template Widget
    --> Untuk lebih aman, terlebih dulu download template anda, hal ini baik untuk berjaga-jaga kalau tips ini gagal di blog anda, silahkan lihat tutorialnya disini<--
    3. Cari kode </head> (Tekan tombol F3 atau CTRL+F untuk mempermudah pencarian)
    4. Jika sudah ketemu, letakkan kode/script dibawah ini tepat diatas/sebelum kode </head>
    <script type='text/javascript'>
    var thumbnail_mode = &quot;float&quot; ;
    summary_noimg = 310;
    summary_img = 250;
    img_thumb_height = 110;
    img_thumb_width = 110;
    </script>
    <script src='https://sites.google.com/site/bukarahasiahost/azmeereadmore/azmee-readmore.js' type='text/javascript'/>

    Note :
    - summary_noimg = 310 ► adalah banyaknya tulisan/karakter yang akan ditampilkan jika tidak ada gambar di posting anda, anda bisa merubah angka "310" menjadi ke angka berapa saja.
    - summary_img = 250 ►adalah banyak tulisan/karakter yang akan ditampilkan jika ada gambar di posting anda, anda bisa merubah angka "250" menjadi ke angka berapa saja.
    - img_thumb_height = 110 ► adalah ukuran tinggi gambar yang akan ditampilkan, anda bisa merubah angka "110" dengan angka berapa saja.
    - img_thumb_width = 110 ► adalah ukuran lebar gambar yang akan ditampilkan, anda bisa merubah angka "110" dengan angka berapa saja.
    ( Tapi untuk hasil yang baik dan maksimal, biarkan saja seperti itu )

    5. Setelah itu cari kode <data:post.body/> (Tekan tombol F3 atau CTRL+F untuk mempermudah pencarian)
    6. Jika sudah ketemu, ganti kode <data:post.body/> dengan kode/script berikut :


    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:post.body/>
    <b:else/>
    <div expr:id='&quot;summary&quot; + data:post.id'>
    <data:post.body/>
    </div>
    <script type='text/javascript'>
    createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
    </script>
    <div style='clear: both;'/><span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Read more.. >></b></a></span>
    </b:if>

    Note :
    - padding-top:5px ► Ganti angka 5 menjadi angka berapa saja, untuk menentukan jarak tulisan Read More dengan tulisan posting yang ada diatasnya.
    - float:right ► Ganti tulisan right menjadi left, jika anda ingin tulisan Read More nya ada disebelah kiri.
    - Read more.. ► Ganti tulisan Read more.. dengan kata apa saja untuk menggantikan kata Read More nya, misalnya dengan kata "Baca Seterusnya", "Lanjut Baca", "Read Full This Post", atau sebagainya.
    ( Tapi untuk hasil yang baik dan maksimal, biarkan saja seperti itu )

    7. Untuk melihat hasilnya sebaiknya jangan disave dulu, klik Preview untuk melihat hasilnya.
    8. Jika anda sudah merasa script/kode ini berjalan dengan baik, silahkan simpan/save template anda.
    9. Selesai deh...!!




    Sekian dulu pemberitahuan dari saya..
    See you in my next pages..
    Bye gan..!!

    Selamat mencoba..

    *jangan lupa komentarnya ya gan.. :D

    -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
    DAFTAR ISI :


  • Cara Membuat Tombol Search Dengan Gaya CSS

    By : ANS-Home

    1 Comment

    What's up gan?
    Are you fine today?
    If you fine, I want to tell you about "Cara Membuat Tombol Search Dengan Gaya CSS"

    Tombol search/search button adalah suatu gadget pencarian yang sangat diperlukan para pengunjung website/blog untuk mencari artikel-artikel yang dibutuhkan. Selain tombol search, banyak hal yang dapat kita lakukan untuk mempermudah pengunjung dalam mencari artikel-artikel blog, seperti membuat menu navigasi horizontal atau yang lainnya.

    Dan kali ini saya akan memberitahukan gan2 semua cara membuat tombol search dengan gaya css dan tanpa image.

    Okelah gan, langsung aja kita ke stepnya :
    1. Login di blogger.com
    2. Dari dasbor pilih Rancangan/Tata Letak
    3. Pilih Tambah Gadget
    4. Pilih HTML/JavaScript
    5. Kemudian letakkan code dibawah ini kedalam HTML/JavaScript

    <form action='http://alamat-blog.anda'/search' class='searchform' method='get'>
    <input class='searchfield' id='q' name='q' onblur='if (this.value == "")
    {this.value = "Search...";}' onfocus='if (this.value == "Search...")
    {this.value = ""}' type='text' value='Search...'/>
    <input class='searchbutton' type='submit' value='Go'/>
    </form>


    6. Setelah itu klik Simpan
    7. Selanjutnya masuk ke halaman Template
         - Sebelum mengedit Template, silahkan unduh terlebih dahulu template anda. ( silahkan baca Cara Mengunduh/BackUp/Download Template Sendiri )
    8. Pilih Edit HTML
    9. Centang
    10. Cari code ]]></b:skin> (Untuk mempermudah pencarian tekan F3 atau tekan tombol CTRL F)
    11. Letakkan code dibawah ini diatas code ]]></b:skin> :


    /*- Search -------------------*/
    .searchform {
    display:inline-block;
    zoom: 1; /* ie7 hack for display:inline-block */
    display: inline;
    border: solid 1px #556b2f;
    padding: 3px 5px;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
    -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
    box-shadow: 0 1px 0px rgba(0,0,0,.1);
    background: #33ff33;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff),
    to(#ededed));
    background: -moz-linear-gradient(top, #fff, #ededed);
    filter: :progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',
    endColorstr='#ededed'); /* ie7 */
    -ms-filter:
    progid:XImageTransform.Microsoft.gradient(startColorstr='#ffffff',
    endColorstr='#ededed'); /* ie8 */
    }
    .searchform input {
    font: normal 12px/100% Arial, Helvetica, sans-serif;
    }
    .searchform .searchfield {
    background: #d5d5d5;
    padding: 6px 6px 6px 8px;
    width: 240px;
    border: solid 1px #bcbbbb;
    outline: none;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
    }
    .searchform .searchbutton {
    color: #fff;
    border: solid 1px #494949;
    font-size: 11px;
    height: 27px;
    width: 27px;
    text-shadow: 0 1px 1px rgba(0,0,0,.6);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    background: #555;
    background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e),
    to(#454545));
    background: -moz-linear-gradient(top, #9e9e9e, #454545);
    filter: :progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e',
    endColorstr='#454545'); /* ie7 */
    -ms-filter:
    progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e',
    endColorstr='#454545'); /* ie8 */
    } 


    12. Setelah selesai, klik Simpan Template dan lihat hasilnya..


    Sekian dulu pemberitahuan dari saya..
    See you in my next pages..
    Bye gan..!!

    Selamat mencoba..

    *jangan lupa komentarnya ya gan.. :D
    • Subscribe to: Posts (Atom)

    Copyright © 2013 - Nisekoi - All Right Reserved

    ANS Home Powered by Blogger - Designed by Ariel Nicho Sirait