,

Cara Membuat Tabel Keren Dengan CSS dalam Postingan

Apakah saat ini anda ingin membuat sebuah tabel dalam postingan ??. Kalau jawabannya Ya, mungkin anda akan mencari bentuk tampilan tabel yang berbeda dari yang sering diposting blogger lainnya.

Nah berikut saya ingin membagikan 10 macam tabel yang cantik, elegan dan terlihat profesional dibandingkan yang lain. Bukannya merendahkan yang lain, karena pada prinsipnya adalah sama menggunakan kode HTML juga namun ditambah dengan kode CSS sebagai pelengkap make-up dari tabel kita kali ini.

Cara memasang kode CSS ikuti langkah dibawah ini :

  • Masuk Blogger.com > pilih Template > Edit HTML
  • Tekan Control + F > cari kode ]]></b:skin>
  • Letakkan salah satu kode CSS pilihan Anda diatas tag ]]></b:skin>
  • Save Template


Blue Table Rounded Style


 
.CSSTableGenerator { margin:0px;padding:0px; width:100%; box-shadow: 10px 10px 5px #888888; border:1px solid #ffffff; -moz-border-radius-bottomleft:15px; -webkit-border-bottom-left-radius:15px; border-bottom-left-radius:15px; -moz-border-radius-bottomright:15px; -webkit-border-bottom-right-radius:15px; border-bottom-right-radius:15px; -moz-border-radius-topright:15px; -webkit-border-top-right-radius:15px; border-top-right-radius:15px; -moz-border-radius-topleft:15px; -webkit-border-top-left-radius:15px; border-top-left-radius:15px; }.CSSTableGenerator table{ width:100%; height:100%; margin:0px;padding:0px; }.CSSTableGenerator tr:last-child td:last-child { -moz-border-radius-bottomright:15px; -webkit-border-bottom-right-radius:15px; border-bottom-right-radius:15px; } .CSSTableGenerator table tr:first-child td:first-child { -moz-border-radius-topleft:15px; -webkit-border-top-left-radius:15px; border-top-left-radius:15px; } .CSSTableGenerator table tr:first-child td:last-child { -moz-border-radius-topright:15px; -webkit-border-top-right-radius:15px; border-top-right-radius:15px; }.CSSTableGenerator tr:last-child td:first-child{ -moz-border-radius-bottomleft:15px; -webkit-border-bottom-left-radius:15px; border-bottom-left-radius:15px; }.CSSTableGenerator tr:hover td{ } .CSSTableGenerator tr:nth-child(odd){ background-color:#aad4ff; } .CSSTableGenerator tr:nth-child(even) { background-color:#ffffff; } .CSSTableGenerator td{ vertical-align:middle; border:1px solid #ffffff; border-width:0px 1px 1px 0px; text-align:left; padding:7px; font-size:10px; font-family:Georgia; font-weight:normal; color:#000000; }.CSSTableGenerator tr:last-child td{ border-width:0px 1px 0px 0px; }.CSSTableGenerator tr td:last-child{ border-width:0px 0px 1px 0px; }.CSSTableGenerator tr:last-child td:last-child{ border-width:0px 0px 0px 0px; } .CSSTableGenerator tr:first-child td{ background:-o-linear-gradient(bottom, #005fbf 5%, #003f7f 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #005fbf), color-stop(1, #003f7f) ); background:-moz-linear-gradient( center top, #005fbf 5%, #003f7f 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#005fbf", endColorstr="#003f7f"); background: -o-linear-gradient(top,#005fbf,003f7f); background-color:#005fbf; border:0px solid #ffffff; text-align:center; border-width:0px 0px 1px 1px; font-size:14px; font-family:Georgia; font-weight:bold; color:#ffffff; } .CSSTableGenerator tr:first-child:hover td{ background:-o-linear-gradient(bottom, #005fbf 5%, #003f7f 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #005fbf), color-stop(1, #003f7f) ); background:-moz-linear-gradient( center top, #005fbf 5%, #003f7f 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#005fbf", endColorstr="#003f7f"); background: -o-linear-gradient(top,#005fbf,003f7f); background-color:#005fbf; } .CSSTableGenerator tr:first-child td:first-child{ border-width:0px 0px 1px 0px; } .CSSTableGenerator tr:first-child td:last-child{ border-width:0px 0px 1px 1px; }


Red Table Rounded Style


 
.CSSTableGenerator { margin:0px;padding:0px; width:100%; box-shadow: 10px 10px 5px #888888; border:1px solid #ffffff; -moz-border-radius-bottomleft:18px; -webkit-border-bottom-left-radius:18px; border-bottom-left-radius:18px; -moz-border-radius-bottomright:18px; -webkit-border-bottom-right-radius:18px; border-bottom-right-radius:18px; -moz-border-radius-topright:18px; -webkit-border-top-right-radius:18px; border-top-right-radius:18px; -moz-border-radius-topleft:18px; -webkit-border-top-left-radius:18px; border-top-left-radius:18px; }.CSSTableGenerator table{ width:100%; height:100%; margin:0px;padding:0px; }.CSSTableGenerator tr:last-child td:last-child { -moz-border-radius-bottomright:18px; -webkit-border-bottom-right-radius:18px; border-bottom-right-radius:18px; } .CSSTableGenerator table tr:first-child td:first-child { -moz-border-radius-topleft:18px; -webkit-border-top-left-radius:18px; border-top-left-radius:18px; } .CSSTableGenerator table tr:first-child td:last-child { -moz-border-radius-topright:18px; -webkit-border-top-right-radius:18px; border-top-right-radius:18px; }.CSSTableGenerator tr:last-child td:first-child{ -moz-border-radius-bottomleft:18px; -webkit-border-bottom-left-radius:18px; border-bottom-left-radius:18px; }.CSSTableGenerator tr:hover td{ background-color:#ffaaaa; } .CSSTableGenerator td{ vertical-align:middle; background:-o-linear-gradient(bottom, #ffffff 5%, #ffaaaa 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #ffaaaa) ); background:-moz-linear-gradient( center top, #ffffff 5%, #ffaaaa 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffaaaa"); background: -o-linear-gradient(top,#ffffff,ffaaaa); background-color:#ffffff; border:1px solid #ffffff; border-width:0px 1px 1px 0px; text-align:left; padding:7px; font-size:10px; font-family:Arial; font-weight:normal; color:#000000; }.CSSTableGenerator tr:last-child td{ border-width:0px 1px 0px 0px; }.CSSTableGenerator tr td:last-child{ border-width:0px 0px 1px 0px; }.CSSTableGenerator tr:last-child td:last-child{ border-width:0px 0px 0px 0px; } .CSSTableGenerator tr:first-child td{ background:-o-linear-gradient(bottom, #ff5656 5%, #7f0000 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff5656), color-stop(1, #7f0000) ); background:-moz-linear-gradient( center top, #ff5656 5%, #7f0000 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff5656", endColorstr="#7f0000"); background: -o-linear-gradient(top,#ff5656,7f0000); background-color:#ff5656; border:0px solid #ffffff; text-align:center; border-width:0px 0px 1px 1px; font-size:14px; font-family:Georgia; font-weight:bold; color:#ffffff; } .CSSTableGenerator tr:first-child:hover td{ background:-o-linear-gradient(bottom, #ff5656 5%, #7f0000 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff5656), color-stop(1, #7f0000) ); background:-moz-linear-gradient( center top, #ff5656 5%, #7f0000 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff5656", endColorstr="#7f0000"); background: -o-linear-gradient(top,#ff5656,7f0000); background-color:#ff5656; } .CSSTableGenerator tr:first-child td:first-child{ border-width:0px 0px 1px 0px; } .CSSTableGenerator tr:first-child td:last-child{ border-width:0px 0px 1px 1px; }


Dark Table Rounded Style


 
.CSSTableGenerator { margin:0px;padding:0px; width:100%; box-shadow: 10px 10px 5px #888888; border:1px solid #666666; -moz-border-radius-bottomleft:23px; -webkit-border-bottom-left-radius:23px; border-bottom-left-radius:23px; -moz-border-radius-bottomright:23px; -webkit-border-bottom-right-radius:23px; border-bottom-right-radius:23px; -moz-border-radius-topright:23px; -webkit-border-top-right-radius:23px; border-top-right-radius:23px; -moz-border-radius-topleft:23px; -webkit-border-top-left-radius:23px; border-top-left-radius:23px; }.CSSTableGenerator table{ width:100%; height:100%; margin:0px;padding:0px; }.CSSTableGenerator tr:last-child td:last-child { -moz-border-radius-bottomright:23px; -webkit-border-bottom-right-radius:23px; border-bottom-right-radius:23px; } .CSSTableGenerator table tr:first-child td:first-child { -moz-border-radius-topleft:23px; -webkit-border-top-left-radius:23px; border-top-left-radius:23px; } .CSSTableGenerator table tr:first-child td:last-child { -moz-border-radius-topright:23px; -webkit-border-top-right-radius:23px; border-top-right-radius:23px; }.CSSTableGenerator tr:last-child td:first-child{ -moz-border-radius-bottomleft:23px; -webkit-border-bottom-left-radius:23px; border-bottom-left-radius:23px; }.CSSTableGenerator tr:hover td{ } .CSSTableGenerator tr:nth-child(odd){ background-color:#7f7f7f; } .CSSTableGenerator tr:nth-child(even) { background-color:#b2b2b2; } .CSSTableGenerator td{ vertical-align:middle; border:1px solid #666666; border-width:0px 1px 1px 0px; text-align:left; padding:7px; font-size:10px; font-family:Georgia; font-weight:normal; color:#000000; }.CSSTableGenerator tr:last-child td{ border-width:0px 1px 0px 0px; }.CSSTableGenerator tr td:last-child{ border-width:0px 0px 1px 0px; }.CSSTableGenerator tr:last-child td:last-child{ border-width:0px 0px 0px 0px; } .CSSTableGenerator tr:first-child td{ background:-o-linear-gradient(bottom, #1c1616 5%, #4c4c4c 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1c1616), color-stop(1, #4c4c4c) ); background:-moz-linear-gradient( center top, #1c1616 5%, #4c4c4c 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#1c1616", endColorstr="#4c4c4c"); background: -o-linear-gradient(top,#1c1616,4c4c4c); background-color:#1c1616; border:0px solid #666666; text-align:center; border-width:0px 0px 1px 1px; font-size:14px; font-family:Times New Roman; font-weight:bold; color:#ffffff; } .CSSTableGenerator tr:first-child:hover td{ background:-o-linear-gradient(bottom, #1c1616 5%, #4c4c4c 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1c1616), color-stop(1, #4c4c4c) ); background:-moz-linear-gradient( center top, #1c1616 5%, #4c4c4c 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#1c1616", endColorstr="#4c4c4c"); background: -o-linear-gradient(top,#1c1616,4c4c4c); background-color:#1c1616; } .CSSTableGenerator tr:first-child td:first-child{ border-width:0px 0px 1px 0px; } .CSSTableGenerator tr:first-child td:last-child{ border-width:0px 0px 1px 1px; }


Magenta Table Rounded Style


 
.CSSTableGenerator { margin:0px;padding:0px; width:100%; box-shadow: 10px 10px 5px #888888; border:1px solid #ffffff; -moz-border-radius-bottomleft:19px; -webkit-border-bottom-left-radius:19px; border-bottom-left-radius:19px; -moz-border-radius-bottomright:19px; -webkit-border-bottom-right-radius:19px; border-bottom-right-radius:19px; -moz-border-radius-topright:19px; -webkit-border-top-right-radius:19px; border-top-right-radius:19px; -moz-border-radius-topleft:19px; -webkit-border-top-left-radius:19px; border-top-left-radius:19px; }.CSSTableGenerator table{ width:100%; height:100%; margin:0px;padding:0px; }.CSSTableGenerator tr:last-child td:last-child { -moz-border-radius-bottomright:19px; -webkit-border-bottom-right-radius:19px; border-bottom-right-radius:19px; } .CSSTableGenerator table tr:first-child td:first-child { -moz-border-radius-topleft:19px; -webkit-border-top-left-radius:19px; border-top-left-radius:19px; } .CSSTableGenerator table tr:first-child td:last-child { -moz-border-radius-topright:19px; -webkit-border-top-right-radius:19px; border-top-right-radius:19px; }.CSSTableGenerator tr:last-child td:first-child{ -moz-border-radius-bottomleft:19px; -webkit-border-bottom-left-radius:19px; border-bottom-left-radius:19px; }.CSSTableGenerator tr:hover td{ } .CSSTableGenerator tr:nth-child(odd){ background-color:#ffbfff; } .CSSTableGenerator tr:nth-child(even) { background-color:#ffeaff; } .CSSTableGenerator td{ vertical-align:middle; border:1px solid #ffffff; border-width:0px 1px 1px 0px; text-align:left; padding:7px; font-size:10px; font-family:Comic Sans MS; font-weight:normal; color:#000000; }.CSSTableGenerator tr:last-child td{ border-width:0px 1px 0px 0px; }.CSSTableGenerator tr td:last-child{ border-width:0px 0px 1px 0px; }.CSSTableGenerator tr:last-child td:last-child{ border-width:0px 0px 0px 0px; } .CSSTableGenerator tr:first-child td{ background:-o-linear-gradient(bottom, #ed00ed 5%, #ed00ed 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ed00ed), color-stop(1, #ed00ed) ); background:-moz-linear-gradient( center top, #ed00ed 5%, #ed00ed 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ed00ed", endColorstr="#ed00ed"); background: -o-linear-gradient(top,#ed00ed,ed00ed); background-color:#ed00ed; border:0px solid #ffffff; text-align:center; border-width:0px 0px 1px 1px; font-size:14px; font-family:Comic Sans MS; font-weight:bold; color:#ffffff; } .CSSTableGenerator tr:first-child:hover td{ background:-o-linear-gradient(bottom, #ed00ed 5%, #ed00ed 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ed00ed), color-stop(1, #ed00ed) ); background:-moz-linear-gradient( center top, #ed00ed 5%, #ed00ed 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ed00ed", endColorstr="#ed00ed"); background: -o-linear-gradient(top,#ed00ed,ed00ed); background-color:#ed00ed; } .CSSTableGenerator tr:first-child td:first-child{ border-width:0px 0px 1px 0px; } .CSSTableGenerator tr:first-child td:last-child{ border-width:0px 0px 1px 1px; }


Orange Table Normal Style


 
.CSSTableGenerator { margin:0px;padding:0px; width:100%; box-shadow: 10px 10px 5px #888888; border:1px solid #ff7f00; -moz-border-radius-bottomleft:0px; -webkit-border-bottom-left-radius:0px; border-bottom-left-radius:0px; -moz-border-radius-bottomright:0px; -webkit-border-bottom-right-radius:0px; border-bottom-right-radius:0px; -moz-border-radius-topright:0px; -webkit-border-top-right-radius:0px; border-top-right-radius:0px; -moz-border-radius-topleft:0px; -webkit-border-top-left-radius:0px; border-top-left-radius:0px; }.CSSTableGenerator table{ width:100%; height:100%; margin:0px;padding:0px; }.CSSTableGenerator tr:last-child td:last-child { -moz-border-radius-bottomright:0px; -webkit-border-bottom-right-radius:0px; border-bottom-right-radius:0px; } .CSSTableGenerator table tr:first-child td:first-child { -moz-border-radius-topleft:0px; -webkit-border-top-left-radius:0px; border-top-left-radius:0px; } .CSSTableGenerator table tr:first-child td:last-child { -moz-border-radius-topright:0px; -webkit-border-top-right-radius:0px; border-top-right-radius:0px; }.CSSTableGenerator tr:last-child td:first-child{ -moz-border-radius-bottomleft:0px; -webkit-border-bottom-left-radius:0px; border-bottom-left-radius:0px; }.CSSTableGenerator tr:hover td{ } .CSSTableGenerator tr:nth-child(odd){ background-color:#ffaa56; } .CSSTableGenerator tr:nth-child(even) { background-color:#ffffff; } .CSSTableGenerator td{ vertical-align:middle; border:1px solid #ff7f00; border-width:0px 1px 1px 0px; text-align:left; padding:7px; font-size:10px; font-family:Arial; font-weight:bold; color:#000000; }.CSSTableGenerator tr:last-child td{ border-width:0px 1px 0px 0px; }.CSSTableGenerator tr td:last-child{ border-width:0px 0px 1px 0px; }.CSSTableGenerator tr:last-child td:last-child{ border-width:0px 0px 0px 0px; } .CSSTableGenerator tr:first-child td{ background:-o-linear-gradient(bottom, #ff7f00 5%, #bf5f00 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff7f00), color-stop(1, #bf5f00) ); background:-moz-linear-gradient( center top, #ff7f00 5%, #bf5f00 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff7f00", endColorstr="#bf5f00"); background: -o-linear-gradient(top,#ff7f00,bf5f00); background-color:#ff7f00; border:0px solid #ff7f00; text-align:center; border-width:0px 0px 1px 1px; font-size:14px; font-family:Arial; font-weight:bold; color:#ffffff; } .CSSTableGenerator tr:first-child:hover td{ background:-o-linear-gradient(bottom, #ff7f00 5%, #bf5f00 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff7f00), color-stop(1, #bf5f00) ); background:-moz-linear-gradient( center top, #ff7f00 5%, #bf5f00 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff7f00", endColorstr="#bf5f00"); background: -o-linear-gradient(top,#ff7f00,bf5f00); background-color:#ff7f00; } .CSSTableGenerator tr:first-child td:first-child{ border-width:0px 0px 1px 0px; } .CSSTableGenerator tr:first-child td:last-child{ border-width:0px 0px 1px 1px; }


Yellow Table Normal Style


 
.CSSTableGenerator { margin:0px;padding:0px; width:100%; box-shadow: 10px 10px 5px #888888; border:1px solid #bfbf00; -moz-border-radius-bottomleft:0px; -webkit-border-bottom-left-radius:0px; border-bottom-left-radius:0px; -moz-border-radius-bottomright:0px; -webkit-border-bottom-right-radius:0px; border-bottom-right-radius:0px; -moz-border-radius-topright:0px; -webkit-border-top-right-radius:0px; border-top-right-radius:0px; -moz-border-radius-topleft:0px; -webkit-border-top-left-radius:0px; border-top-left-radius:0px; }.CSSTableGenerator table{ width:100%; height:100%; margin:0px;padding:0px; }.CSSTableGenerator tr:last-child td:last-child { -moz-border-radius-bottomright:0px; -webkit-border-bottom-right-radius:0px; border-bottom-right-radius:0px; } .CSSTableGenerator table tr:first-child td:first-child { -moz-border-radius-topleft:0px; -webkit-border-top-left-radius:0px; border-top-left-radius:0px; } .CSSTableGenerator table tr:first-child td:last-child { -moz-border-radius-topright:0px; -webkit-border-top-right-radius:0px; border-top-right-radius:0px; }.CSSTableGenerator tr:last-child td:first-child{ -moz-border-radius-bottomleft:0px; -webkit-border-bottom-left-radius:0px; border-bottom-left-radius:0px; }.CSSTableGenerator tr:hover td{ background-color:#ffffff; } .CSSTableGenerator td{ vertical-align:middle; background-color:#ffffaa; border:1px solid #bfbf00; border-width:0px 1px 1px 0px; text-align:left; padding:8px; font-size:10px; font-family:Verdana; font-weight:bold; color:#000000; }.CSSTableGenerator tr:last-child td{ border-width:0px 1px 0px 0px; }.CSSTableGenerator tr td:last-child{ border-width:0px 0px 1px 0px; }.CSSTableGenerator tr:last-child td:last-child{ border-width:0px 0px 0px 0px; } .CSSTableGenerator tr:first-child td{ background:-o-linear-gradient(bottom, #ffff00 5%, #e8e800 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffff00), color-stop(1, #e8e800) ); background:-moz-linear-gradient( center top, #ffff00 5%, #e8e800 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffff00", endColorstr="#e8e800"); background: -o-linear-gradient(top,#ffff00,e8e800); background-color:#ffff00; border:0px solid #bfbf00; text-align:center; border-width:0px 0px 1px 1px; font-size:14px; font-family:Verdana; font-weight:bold; color:#000000; } .CSSTableGenerator tr:first-child:hover td{ background:-o-linear-gradient(bottom, #ffff00 5%, #e8e800 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffff00), color-stop(1, #e8e800) ); background:-moz-linear-gradient( center top, #ffff00 5%, #e8e800 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffff00", endColorstr="#e8e800"); background: -o-linear-gradient(top,#ffff00,e8e800); background-color:#ffff00; } .CSSTableGenerator tr:first-child td:first-child{ border-width:0px 0px 1px 0px; } .CSSTableGenerator tr:first-child td:last-child{ border-width:0px 0px 1px 1px; }


Green Table Rounded Style


 
.CSSTableGenerator { margin:0px;padding:0px; width:100%; box-shadow: 10px 10px 5px #888888; border:1px solid #3f7f00; -moz-border-radius-bottomleft:9px; -webkit-border-bottom-left-radius:9px; border-bottom-left-radius:9px; -moz-border-radius-bottomright:9px; -webkit-border-bottom-right-radius:9px; border-bottom-right-radius:9px; -moz-border-radius-topright:9px; -webkit-border-top-right-radius:9px; border-top-right-radius:9px; -moz-border-radius-topleft:9px; -webkit-border-top-left-radius:9px; border-top-left-radius:9px; }.CSSTableGenerator table{ width:100%; height:100%; margin:0px;padding:0px; }.CSSTableGenerator tr:last-child td:last-child { -moz-border-radius-bottomright:9px; -webkit-border-bottom-right-radius:9px; border-bottom-right-radius:9px; } .CSSTableGenerator table tr:first-child td:first-child { -moz-border-radius-topleft:9px; -webkit-border-top-left-radius:9px; border-top-left-radius:9px; } .CSSTableGenerator table tr:first-child td:last-child { -moz-border-radius-topright:9px; -webkit-border-top-right-radius:9px; border-top-right-radius:9px; }.CSSTableGenerator tr:last-child td:first-child{ -moz-border-radius-bottomleft:9px; -webkit-border-bottom-left-radius:9px; border-bottom-left-radius:9px; }.CSSTableGenerator tr:hover td{ background-color:#ffffff; } .CSSTableGenerator td{ vertical-align:middle; background:-o-linear-gradient(bottom, #b6f27b 5%, #ffffff 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b6f27b), color-stop(1, #ffffff) ); background:-moz-linear-gradient( center top, #b6f27b 5%, #ffffff 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#b6f27b", endColorstr="#ffffff"); background: -o-linear-gradient(top,#b6f27b,ffffff); background-color:#b6f27b; border:1px solid #3f7f00; border-width:0px 1px 1px 0px; text-align:left; padding:7px; font-size:10px; font-family:Arial; font-weight:normal; color:#000000; }.CSSTableGenerator tr:last-child td{ border-width:0px 1px 0px 0px; }.CSSTableGenerator tr td:last-child{ border-width:0px 0px 1px 0px; }.CSSTableGenerator tr:last-child td:last-child{ border-width:0px 0px 0px 0px; } .CSSTableGenerator tr:first-child td{ background:-o-linear-gradient(bottom, #5fbf00 5%, #3f7f00 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5fbf00), color-stop(1, #3f7f00) ); background:-moz-linear-gradient( center top, #5fbf00 5%, #3f7f00 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#5fbf00", endColorstr="#3f7f00"); background: -o-linear-gradient(top,#5fbf00,3f7f00); background-color:#5fbf00; border:0px solid #3f7f00; text-align:center; border-width:0px 0px 1px 1px; font-size:14px; font-family:Georgia; font-weight:bold; color:#561d1d; } .CSSTableGenerator tr:first-child:hover td{ background:-o-linear-gradient(bottom, #5fbf00 5%, #3f7f00 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5fbf00), color-stop(1, #3f7f00) ); background:-moz-linear-gradient( center top, #5fbf00 5%, #3f7f00 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#5fbf00", endColorstr="#3f7f00"); background: -o-linear-gradient(top,#5fbf00,3f7f00); background-color:#5fbf00; } .CSSTableGenerator tr:first-child td:first-child{ border-width:0px 0px 1px 0px; } .CSSTableGenerator tr:first-child td:last-child{ border-width:0px 0px 1px 1px; }


Grey Table Normal Style


 
.CSSTableGenerator { margin:0px;padding:0px; width:100%; box-shadow: 10px 10px 5px #888888; border:1px solid #cccccc; -moz-border-radius-bottomleft:4px; -webkit-border-bottom-left-radius:4px; border-bottom-left-radius:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px; border-bottom-right-radius:4px; -moz-border-radius-topright:4px; -webkit-border-top-right-radius:4px; border-top-right-radius:4px; -moz-border-radius-topleft:4px; -webkit-border-top-left-radius:4px; border-top-left-radius:4px; }.CSSTableGenerator table{ width:100%; height:100%; margin:0px;padding:0px; }.CSSTableGenerator tr:last-child td:last-child { -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px; border-bottom-right-radius:4px; } .CSSTableGenerator table tr:first-child td:first-child { -moz-border-radius-topleft:4px; -webkit-border-top-left-radius:4px; border-top-left-radius:4px; } .CSSTableGenerator table tr:first-child td:last-child { -moz-border-radius-topright:4px; -webkit-border-top-right-radius:4px; border-top-right-radius:4px; }.CSSTableGenerator tr:last-child td:first-child{ -moz-border-radius-bottomleft:4px; -webkit-border-bottom-left-radius:4px; border-bottom-left-radius:4px; }.CSSTableGenerator tr:hover td{ background-color:#ffffff; } .CSSTableGenerator td{ vertical-align:middle; background:-o-linear-gradient(bottom, #e5e5e5 5%, #ffffff 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #e5e5e5), color-stop(1, #ffffff) ); background:-moz-linear-gradient( center top, #e5e5e5 5%, #ffffff 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#e5e5e5", endColorstr="#ffffff"); background: -o-linear-gradient(top,#e5e5e5,ffffff); background-color:#e5e5e5; border:1px solid #cccccc; border-width:0px 1px 1px 0px; text-align:left; padding:7px; font-size:10px; font-family:Arial; font-weight:normal; color:#000000; }.CSSTableGenerator tr:last-child td{ border-width:0px 1px 0px 0px; }.CSSTableGenerator tr td:last-child{ border-width:0px 0px 1px 0px; }.CSSTableGenerator tr:last-child td:last-child{ border-width:0px 0px 0px 0px; } .CSSTableGenerator tr:first-child td{ background:-o-linear-gradient(bottom, #cccccc 5%, #b2b2b2 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #cccccc), color-stop(1, #b2b2b2) ); background:-moz-linear-gradient( center top, #cccccc 5%, #b2b2b2 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#b2b2b2"); background: -o-linear-gradient(top,#cccccc,b2b2b2); background-color:#cccccc; border:0px solid #cccccc; text-align:center; border-width:0px 0px 1px 1px; font-size:14px; font-family:Arial; font-weight:bold; color:#000000; } .CSSTableGenerator tr:first-child:hover td{ background:-o-linear-gradient(bottom, #cccccc 5%, #b2b2b2 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #cccccc), color-stop(1, #b2b2b2) ); background:-moz-linear-gradient( center top, #cccccc 5%, #b2b2b2 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#b2b2b2"); background: -o-linear-gradient(top,#cccccc,b2b2b2); background-color:#cccccc; } .CSSTableGenerator tr:first-child td:first-child{ border-width:0px 0px 1px 0px; } .CSSTableGenerator tr:first-child td:last-child{ border-width:0px 0px 1px 1px; }


Black White Table Rounded Style


 
.CSSTableGenerator { margin:0px;padding:0px; width:100%; box-shadow: 10px 10px 5px #888888; border:1px solid #000000; -moz-border-radius-bottomleft:10px; -webkit-border-bottom-left-radius:10px; border-bottom-left-radius:10px; -moz-border-radius-bottomright:10px; -webkit-border-bottom-right-radius:10px; border-bottom-right-radius:10px; -moz-border-radius-topright:10px; -webkit-border-top-right-radius:10px; border-top-right-radius:10px; -moz-border-radius-topleft:10px; -webkit-border-top-left-radius:10px; border-top-left-radius:10px; }.CSSTableGenerator table{ width:100%; height:100%; margin:0px;padding:0px; }.CSSTableGenerator tr:last-child td:last-child { -moz-border-radius-bottomright:10px; -webkit-border-bottom-right-radius:10px; border-bottom-right-radius:10px; } .CSSTableGenerator table tr:first-child td:first-child { -moz-border-radius-topleft:10px; -webkit-border-top-left-radius:10px; border-top-left-radius:10px; } .CSSTableGenerator table tr:first-child td:last-child { -moz-border-radius-topright:10px; -webkit-border-top-right-radius:10px; border-top-right-radius:10px; }.CSSTableGenerator tr:last-child td:first-child{ -moz-border-radius-bottomleft:10px; -webkit-border-bottom-left-radius:10px; border-bottom-left-radius:10px; }.CSSTableGenerator tr:hover td{ } .CSSTableGenerator tr:nth-child(odd){ background-color:#e5e5e5; } .CSSTableGenerator tr:nth-child(even) { background-color:#ffffff; } .CSSTableGenerator td{ vertical-align:middle; border:1px solid #000000; border-width:0px 1px 1px 0px; text-align:left; padding:7px; font-size:10px; font-family:Impact; font-weight:normal; color:#000000; }.CSSTableGenerator tr:last-child td{ border-width:0px 1px 0px 0px; }.CSSTableGenerator tr td:last-child{ border-width:0px 0px 1px 0px; }.CSSTableGenerator tr:last-child td:last-child{ border-width:0px 0px 0px 0px; } .CSSTableGenerator tr:first-child td{ background:-o-linear-gradient(bottom, #4c4c4c 5%, #000000 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4c4c4c), color-stop(1, #000000) ); background:-moz-linear-gradient( center top, #4c4c4c 5%, #000000 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#4c4c4c", endColorstr="#000000"); background: -o-linear-gradient(top,#4c4c4c,000000); background-color:#4c4c4c; border:0px solid #000000; text-align:center; border-width:0px 0px 1px 1px; font-size:14px; font-family:Impact; font-weight:normal; color:#ffffff; } .CSSTableGenerator tr:first-child:hover td{ background:-o-linear-gradient(bottom, #4c4c4c 5%, #000000 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4c4c4c), color-stop(1, #000000) ); background:-moz-linear-gradient( center top, #4c4c4c 5%, #000000 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#4c4c4c", endColorstr="#000000"); background: -o-linear-gradient(top,#4c4c4c,000000); background-color:#4c4c4c; } .CSSTableGenerator tr:first-child td:first-child{ border-width:0px 0px 1px 0px; } .CSSTableGenerator tr:first-child td:last-child{ border-width:0px 0px 1px 1px; }


Red White Table Rounded Style


 
.CSSTableGenerator { margin:0px;padding:0px; width:100%; box-shadow: 10px 10px 5px #888888; border:1px solid #bf0000; -moz-border-radius-bottomleft:14px; -webkit-border-bottom-left-radius:14px; border-bottom-left-radius:14px; -moz-border-radius-bottomright:14px; -webkit-border-bottom-right-radius:14px; border-bottom-right-radius:14px; -moz-border-radius-topright:14px; -webkit-border-top-right-radius:14px; border-top-right-radius:14px; -moz-border-radius-topleft:14px; -webkit-border-top-left-radius:14px; border-top-left-radius:14px; }.CSSTableGenerator table{ width:100%; height:100%; margin:0px;padding:0px; }.CSSTableGenerator tr:last-child td:last-child { -moz-border-radius-bottomright:14px; -webkit-border-bottom-right-radius:14px; border-bottom-right-radius:14px; } .CSSTableGenerator table tr:first-child td:first-child { -moz-border-radius-topleft:14px; -webkit-border-top-left-radius:14px; border-top-left-radius:14px; } .CSSTableGenerator table tr:first-child td:last-child { -moz-border-radius-topright:14px; -webkit-border-top-right-radius:14px; border-top-right-radius:14px; }.CSSTableGenerator tr:last-child td:first-child{ -moz-border-radius-bottomleft:14px; -webkit-border-bottom-left-radius:14px; border-bottom-left-radius:14px; }.CSSTableGenerator tr:hover td{ background-color:#ffaaaa; } .CSSTableGenerator td{ vertical-align:middle; background-color:#ffffff; border:1px solid #bf0000; border-width:0px 1px 1px 0px; text-align:left; padding:7px; font-size:10px; font-family:Georgia; font-weight:normal; color:#000000; }.CSSTableGenerator tr:last-child td{ border-width:0px 1px 0px 0px; }.CSSTableGenerator tr td:last-child{ border-width:0px 0px 1px 0px; }.CSSTableGenerator tr:last-child td:last-child{ border-width:0px 0px 0px 0px; } .CSSTableGenerator tr:first-child td{ background:-o-linear-gradient(bottom, #ff5656 5%, #ff5656 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff5656), color-stop(1, #ff5656) ); background:-moz-linear-gradient( center top, #ff5656 5%, #ff5656 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff5656", endColorstr="#ff5656"); background: -o-linear-gradient(top,#ff5656,ff5656); background-color:#ff5656; border:0px solid #bf0000; text-align:center; border-width:0px 0px 1px 1px; font-size:14px; font-family:Georgia; font-weight:bold; color:#000000; } .CSSTableGenerator tr:first-child:hover td{ background:-o-linear-gradient(bottom, #ff5656 5%, #ff5656 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff5656), color-stop(1, #ff5656) ); background:-moz-linear-gradient( center top, #ff5656 5%, #ff5656 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff5656", endColorstr="#ff5656"); background: -o-linear-gradient(top,#ff5656,ff5656); background-color:#ff5656; } .CSSTableGenerator tr:first-child td:first-child{ border-width:0px 0px 1px 0px; } .CSSTableGenerator tr:first-child td:last-child{ border-width:0px 0px 1px 1px; }

Cara pemakaian :

Ketika akan membuat posting baru, pergunakan halaman HTML sebagai editor postingan anda (bukan Compose), mengetik seperti biasa kemudian kalau ingin membuat tabel copy-paste kode HTML dibawah ini.


<div class="CSSTableGenerator" >
<table ><tr> <td>Title 1</td><td >Title 2</td><td>Title 3</td></tr>
<tr><td >Row 1</td><td>Row 1</td><td>Row 1</td></tr><tr><td >Row 2</td><td>Row 2</td><td>Row 2</td></tr><tr><td >Row 3</td><td>Row 3</td><td>Row 3</td></tr><tr><td >Row 4</td><td>Row 4</td><td>Row 4</td></tr>
</table></div>


Download Gratis Buku Pelajaran SMA KTSP

Selamat siang semua ...
Tahun Pelajaran baru 2013/2014 sudah dimulai pada tanggal 15 Juli 2013 beberapa hari yang lalu dan proses belajar mengajar juga berjalan. Biasanya di awal - awal Tahun Pelajaran Baru setiap siswa akan memulai segalanya dengan yang baru baik alat tulis baru, tas baru, baju baru, sepatu baru.... tapi muka tetap aja yang lama... hehehe.

Akan tetapi yang harus diingat bahwa semuanya tidak mesti baru, sesuaikan dengan kebutuhan sekolah dan yang dipersiapkan adalah yang penting saja seperti halnya buku pelajaran.

Tapi buku pelajaran tidak mesti membeli, kita juga bisa mendownloadnya dengan gratis. Berikut adalah buku-buku pelajaran yang bisa didownload dengan gratis alias ngga bayar.

Mata PelajaranKelas XKelas XIKelas XII
PENDIDIKAN AGAMA ISLAM5.0 MB4.0 MB2.3 MB
PENDIDIKAN KEWARGANEGARAAN2.0 MB2.0 MB5.2 MB
BAHASA INDONESIA3.4 MB9.0 MB5.6 MB
BAHASA INGGRIS2.0 MB-4.2 MB
MATEMATIKA4.0 MB5.5 MB3.3 MB
FISIKA2.7 MB4.0 MB11 MB
BIOLOGI9.5 MB8.4 MB11.0 MB
KIMIA6.4 MB48.0 MB5.0 MB
SEJARAH5.3 MB4.0 MB4.0 MB
GEOGRAFI16.0 MB14.0 MB14.0 MB
EKONOMI10.0 MB2.7 MB1.7 MB
SOSIOLOGI7.8 MB6.0 MB6.0 MB
SENI BUDAYA---
PEND. JASMANI, ORKES1.8 MB3.4 MB20.0 MB
TEKNOLOGI INFORMASI & KOMUNIKASI58.0 MB29.0 MB27.0 MB
BAHASA ARAB--3.3 MB

Buku-buku tersebut akan selalu diupdate sampai benar - benar lengkap.

PERHATIAN !!
Buku-buku diatas bersumber dari BSE-Kemdikbud dan masih berbasis KTSP dan untuk Kurikulum 2013 ditunggu saja nanti akan saya share untuk pegangan guru dan siswa
,

Cara Memasang Tombol Google+

Dari beberapa blogger yang sering melakukan modifikasi atau menghias atau mempercantik blog-nya pastinya tidak asing lagi dengan cara memasang tombol Google+, akan tetapi tidak jarang juga yang merasa kesulitan apalagi yang baru saja belajar nge-blog.

Sebelum memasang tombol G+ atau Tombol Google+, sedikit saya terangkan bahwa Tombol Google+ berguna agar pengunjung dapat merekomendasikan konten anda kedalam lingkaran mereka dan memungkinkan dapat meningkatkan trafic atau lalu lintas ke blog kita.

Kutipan dari Google :
Tombol +1 juga dapat meningkatkan waktu yang dihabiskan di situs Anda dengan memberikan rekomendasi untuk pembacaan lebih jauh.

Cara pemasangannya :

Silahkan memasang Script dibawah ini atas Tag </body> 


<!-- Tempatkan tag ini di bagian head atau tepat sebelum tag body penutup -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

Kemudian anda bisa memasang tombol G+ dimana saja dengan menambahkan kode dibawah ini.

Tombol G+ dengan ukuran Standar (24 piksel)

<g:plusone></g:plusone>

Hasilnya seperti ini :

Tombol G+ dengan ukuran Sedang (20 piksel)

<g:plusone size="medium"></g:plusone>

Hasilnya seperti ini :

Tombol G+ dengan ukuran Kecil (15 piksel)

<g:plusone size="small"></g:plusone>

Hasilnya seperti ini :

Tombol G+ dengan ukuran Tinggi (60 piksel)

<g:plusone size="tall"></g:plusone>

Hasilnya seperti ini :

Demikian postingan tentang Cara Memasang Tombol Google+, semoga bermanfaat.
, ,

Cara Membuat Pop-Up Tersembunyi Secara Otomatis

Pada kesempatan kali ini, saya ingin berbagi tentang bagaimana cara membuat Pop-Up Windows yang akan muncul secara otomatis ketika seorang pengunjung membuka atau mengunjungi blog utama yang sudah terpasang script ini.

Salah satu keunggulan Pop-Up ini yakni membuka situs tertentu yang sudah tersetting dan ini bertujuan sebagai salah satu bentuk promo terutama untuk blog yang masig baru, dengan harapan bisa meningkatkan trafik ke blog yang kita setting dan kemungkinan akan bisa menaikkan page rank.


Untuk Sistem Kerjanya :

Ketika pengunjung datang berkunjung pada blog utama yang dipasang sript ini, otomatis akan membuka halaman atau blog lain yang sesuai dengan setting pada jendela browser baru. Kehadirannnya tidak menghalangi tampilan blog anda, kerena pop up in muncul berada dibawah jendela broser, sehingga pengunjung blog utama adalah satu pengunjung blog lainnya.

Cara pemasangan :

1. Login pada blog
2. Pilih Layout 
3. Kemudian Tambah Gadget dan pilih HTML/Javascript  
4. Lalu Copy-Paste kode dibawah ini


     <script> //Silahkan sesuaikan url situs dibawah ini 
    var popunder="http://thephatar.blogspot.com"
    //Setting tampilan pop up dibawah ini
    var winfeatures="width= //Setting tampilan pop up dibawah ini 
    var winfeatures="width=250,height=150,scrollbars=1,resizable=1,toolbar=1,location=1,menubar=1,status=1,directories=0"
    var once_per_session=0

    ///JANGAN EDIT DIBAWAH INI/////

    function get_cookie(Name) {
      var search = Name + "="
      var returnvalue = "";
      if (document.cookie.length > 0) {
        offset = document.cookie.indexOf(search)
        if (offset != -1) { // if cookie exists
          offset += search.length
          // set index of beginning of value
          end = document.cookie.indexOf(";", offset);
          // set index of end of cookie value
          if (end == -1)
             end = document.cookie.length;
          returnvalue=unescape(document.cookie.substring(offset, end))
          }
       }
      return returnvalue;
    }

    function loadornot(){
    if (get_cookie('popunder')==''){
    loadpopunder()
    document.cookie="popunder=yes"
    }
    }
    //edit by http://thephatar.blogspot.com
    function loadpopunder(){
    win2=window.open(popunder,"",winfeatures)
    win2.blur()
    window.focus()
    }

    if (once_per_session==0)
    loadpopunder()
    else
    loadornot()
    </script>
    var once_per_session=0
    ///JANGAN EDIT DIBAWAH INI/////
    function get_cookie(Name) {   var search = Name + "="   var returnvalue = "";   if (document.cookie.length > 0) {     offset = document.cookie.indexOf(search)     if (offset != -1) { // if cookie exists       offset += search.length       // set index of beginning of value       end = document.cookie.indexOf(";", offset);       // set index of end of cookie value       if (end == -1)          end = document.cookie.length;       returnvalue=unescape(document.cookie.substring(offset, end))       }    }   return returnvalue; }
    function loadornot(){ if (get_cookie('popunder')==''){ loadpopunder() document.cookie="popunder=yes" } } //edit by http://thephatar.blogspot.com function loadpopunder(){ win2=window.open(popunder,"",winfeatures) win2.blur() window.focus() }
    if (once_per_session==0) loadpopunder() else loadornot() </script>

Keterangan :
Ganti situs yang berwarna Merah dengan situs tujuan
Ganti ukuran yang berwarna biru sesuai selera anda

5. Kemudian Klik Save


Sumber : thephatar[.]blogspot[.]com
,

MEMASANG SYNTAX HIGHLIGTER RINGAN DENGAN CSS

Fungsi dari Syntax Highlighter itu sendiri yaitu untuk menyisipkan code-code seperti Javascript, Css, dan HTML agar source code yang ada didalam posting mudah dibedakan. Bagi para blogger yang menyajikan tutorial Blog pasti sudah tidak asing lagi dengan Syntax Highlighter ini.



Langsung saja :
1. Login pada blog
2. Pilih dashboard template edit html
3. Kemudian letakan CSS di bawah ini tepat di atas code ]]></b:skin>

 
/*Pre*/
pre,i[rel="pre"]{display:block;padding:5px .5em 5px 1em;font:normal normal 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;border:2px solid #c5d0e3;position:relative;overflow:auto;word-wrap:normal;white-space:pre;-webkit-user-select:text;-moz-user-select:-moz-text;-moz-user-select:text;-khtml-user-select:text;-ms-user-select:text;user-select:text;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;}
pre:hover,i[rel="pre"]:hover {background-color: #e6e9f1;}
pre code{display:block;color:#111;margin-top:3px;font:normal normal 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;letter-spacing:0;white-space:pre;overflow:auto;}
pre[rel="HTML"],pre[data-codetype="HTML"]{border-color:#4584BE;}
pre[rel="CSS"],pre[data-codetype="CSS"]{border-color:#5DA028;}
pre[rel="JavaScript"],pre[data-codetype="JavaScript"]{border-color:#545448;}
pre[rel="JQuery"],pre[data-codetype="JQuery"]{border-color:#7073CF;}
pre[rel="JQuery UI"],pre[data-codetype="JQuery UI"]{border-color:#E36B23;}
pre[rel="XML"],pre[data-codetype="XML"]{border-color:#C44032;}
pre[rel="PHP"],pre[data-codetype="PHP"]{border-color:#FF9900;}
pre[rel*="+"],pre[data-codetype*="+"]{border-color:#0B7E88;}
pre .comments,pre .template_comment,pre .diff .header,pre .doctype,pre .lisp .string,pre .javadoc{color:#00BB4B;font-style:italic;}
pre .keyword,pre .css .rule .keyword,pre pre .winutils,pre .javascript .title,pre .method,pre .addition,pre .css .tag,pre .lisp .title{color:#859900;}
pre .number,pre .command,pre .string,pre .tag .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#9B0909}
pre .title,pre .localvars,pre .function .title,pre .chunk,pre .decorator,pre .builtin,pre .built_in,pre .lisp .title,pre .identifier,pre .title .keymethods,pre .id{color:#103197;}
pre .tag .title,pre .rules .property,pre .django .tag .keyword{font-weight:bold;}
pre .attribute,pre .variable,pre .instancevar,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .label{color:#0499D3;}
pre .preprocessor,pre .pi,pre .shebang,pre .symbol,pre .diff .change,pre .special,pre .keymethods,pre .attr_selector,pre .important,pre .subst,pre .cdata{color:#cb4b16;}
pre .deletion{color:#dc322f;}
pre .tex .formula{background:#073642;}
pre.numbered{border-left-width:2px;}
pre .line-number,pre.numbered code{display:block;line-height:16px;}
pre .line-number{float:left;margin:0 1em 0 -1em;color:#586E75;border-right:2px solid #c5d0e3;text-align:right;min-width:35px;}
pre .line-number span{display:block;position:relative;padding:0 .5em 0 1em;}
pre .line-number span:nth-child(even){background-color:#FAFAFA;}
pre .line-number span em{position:absolute;bottom:-1px;left:100%;background-color:orange;padding:0 2px 1px 2px;border:1px solid black;font-style:normal;color:black;display:none;}
pre .line-number span:hover em{display:block;}
pre .line-number span:target a{display:block;color:white;position:relative;background-color:#268bd2;margin:0 -.5em 0 -1em;padding:0 .5em 0 0;}
pre.numbered code span{line-height:12px;}
pre[data-codetype="HTML"] .line-number span:target a{background-color:#4584BE;}
pre[data-codetype="CSS"] .line-number span:target a{background-color:#5DA028;}
pre[data-codetype="JavaScript"] .line-number span:target a{background-color:#bbbbbb;}
pre[data-codetype="JQuery"] .line-number span:target a{background-color:#7073CF;}
pre[data-codetype="JQuery UI"] .line-number span:target a{background-color:#E36B23;}
pre[data-codetype="XML"] .line-number span:target a{background-color:#C44032;}
pre[data-codetype="PHP"] .line-number span:target a{background-color:#FF9900;}
pre[data-codetype*="+"] .line-number span:target a{background-color:#B58900;}
pre code mark {background: white;}
pre[data-codetype]:before {content:attr(data-codetype);display:block;position:static;top:0;right:0;left:0;background-color:#666;padding:0 7px;margin:0 -3px;font:bold 11px/20px Arial,Sans-Serif;color:white;}
pre[data-codetype="HTML"]:before {background-color:#4584BE;}
pre[data-codetype="CSS"]:before {background-color:#5DA028;}
pre[data-codetype="JavaScript"]:before {background-color:#545448;}
pre[data-codetype="JQuery"]:before {background-color:#7073CF;}
pre[data-codetype="JQuery UI"]:before {background-color:#E36B23;}
pre[data-codetype="PHP"]:before {background-color:#FF9900;}
pre[data-codetype="XML"]:before {background-color:#C44032;}
pre[data-codetype*="+"]:before {background-color:#0B7E88;}
code,pre{padding:0 3px 2px;font-family:Monaco, Menlo, Consolas, "Courier New", monospace;font-size:12px;color:#333333;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
code,i[rel="code"]{overflow:auto;max-height:200px;padding:2px 4px;color:#d14;white-space:nowrap;background-color:#f7f7f9;border:1px solid #e1e1e8;-webkit-user-select:text;-moz-user-select:-moz-text;-moz-user-select:text;-khtml-user-select:text;-ms-user-select:text;user-select:text;}
i[rel="code"]{display:block;}


4. Selanjutnya simpan script di bawah ini tepat di atas code </head> atau di atas code </body>


 
<script src="http://googledrive.com/host/0Bwggu85mZBaxeWRoSXlwUV9QNzA/" type="text/javascript">


5. Save template

Cara Pemakaian :

Buat posting seperti biasa dan letakkan code di bawah ini pada halaman HTML bukan pada compose :


HTML

<pre class="numbered" data-codetype="HTML" title="Click"><code class="xml">
Masukkan Code Script Disini 
</code></pre>

CSS

<pre class="numbered" data-codetype="CSS" title="Click"><code class="xml"> 
Masukkan Code Script Disini 
</code></pre>

JAVASCRIPT

<pre class="numbered" data-codetype="JavaScript" title="Click"><code class="xml"> 
Masukkan Code Script Disini 
</code></pre>

XML

<pre class="numbered" data-codetype="XML" title="Click"><code class="xml"> 
Masukkan Code Script Disini 
</code></pre>

HTML+jQuery

<pre class="numbered" data-codetype="HTML+jQuary" title="Click"><code class="xml"> 
Masukkan Code Script Disini 
</code></pre>

Setelah selesai, silahkan lihat hasilnya.
Subscribe to: Posts (Atom)