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 Pelajaran	Kelas X	Kelas XI	Kelas XII
PENDIDIKAN AGAMA ISLAM	5.0 MB	4.0 MB	2.3 MB
PENDIDIKAN KEWARGANEGARAAN	2.0 MB	2.0 MB	5.2 MB
BAHASA INDONESIA	3.4 MB	9.0 MB	5.6 MB
BAHASA INGGRIS	2.0 MB	-	4.2 MB
MATEMATIKA	4.0 MB	5.5 MB	3.3 MB
FISIKA	2.7 MB	4.0 MB	11 MB
BIOLOGI	9.5 MB	8.4 MB	11.0 MB
KIMIA	6.4 MB	48.0 MB	5.0 MB
SEJARAH	5.3 MB	4.0 MB	4.0 MB
GEOGRAFI	16.0 MB	14.0 MB	14.0 MB
EKONOMI	10.0 MB	2.7 MB	1.7 MB
SOSIOLOGI	7.8 MB	6.0 MB	6.0 MB
SENI BUDAYA	-	-	-
PEND. JASMANI, ORKES	1.8 MB	3.4 MB	20.0 MB
TEKNOLOGI INFORMASI & KOMUNIKASI	58.0 MB	29.0 MB	27.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.

5 Penemuan Canggih Ala Super Hero

Kalau ditanya tentang pernah atau tidak nonton film super hero, jawabannya tentu pernah bahkan sering. Setiap super hero memiliki kekuatan yang berbeda - beda.

 

Tapi tahukah, bahwa pada tahun 2013 ini terdapat 5 penemuan canggih yang ternspirasi dari kekuatan yang dimiliki oleh super hero. 

 

Sekarang kita simak satu persatu sebagai berikut :

 

1. Menurunkan Laju Peluru ala Neo - The Matrix 

 

Bionic Body Armor, memang kemunculannya pada awal 2009. Namun bukan berarti saat ini tidak perlu pengembangan. Fungsinya untuk memberikan stimuliasi / reflek kejut kepada pemakainya yang pada waktu yang sama akan menyebabkan gerakan refleksif pemakainya dalam arah yang berlawanan dari sebuah laju proyektil yang mengancam.

 

 

Hebatnya, Smart armor inisedang dikembangkan dalam bentuk cairan pelindung tubuh. Satu versi menggunakan cairan magnetorheological (MFS), yang menebal bila terkena medan magnet, dan lainnya menggunakan cairan geser-penebalan (STFs), yang mengeras bila ada stimulasi atau disambar paksa oleh suatu objek yang mengancam pemakainya.

 

2. Kemampuan Memanipulasi Cuaca ala Storm (X-Men)

 

Bila Anda pernah mendengar Proyek besar yang bernama HAARP (High Frequency Active Auroral Research Program)< yang merupakan proyek yang dicurigai dalam mengembangkan sebuah senjata pamungkas berdasarkan konsep-konsep "mesin gempa bumi" Nikola Tesla.

Bahkan menurut sebagian kalangan, proyek ini bertanggung jawab terhadap beberapa kejadian  gempa besar, seperti gempa bumi 7,8 skala Richter (SR) di Sichuan China 12 Mei 2008, gempa bumi 7,0 SR di Haiti 12 Januari 2010, dan gempa bumi 8,8 SR di Chile 27 Februari 2010.

Dalam beritanya disebutkan bahwa pemimpin Venezuela itu menuduh AS menyebabkan kehancuran di Haiti dengan menguji coba "senjata tektonik". Media massa Venezuela pun melaporkan bahwa gempa bumi ini mungkin terkait dengan proyek yang disebut HAARP ini, sebuah sistem yang dapat menghasilkan perubahan iklim yang tak terduga dan keras. 

 

3.   Kekuatan Otot kekar seperti Hulk

 

Disebut Berkley Bionics dan Lockheed Martin Human Universal Load Carrier (HULC) exoskeletons adalah contoh dari inovasi yang menyerupai kekuatan Super hero Hulk. HULC, melalui kaki titanium nya, mengubah otot pemakainya menjadi kuat di atas normal. Kaki titanium dipasang ke bingkai backpacklike dengan seperangkat unit yang memberikan tenaga melalui mikrokomputer on-board kecil. Salah satu fitur HULC paling mengesankan adalah ia tidak memerlukan joystick atau mekanisme kontrol manual seperti remote control atau tombol-tombol pengontrol. Perangkat ini dapat merasakan gerakan yang dimaksudkan operator, dan bereaksi sesuai keinginan, layakanya fungsi saraf yang menerima perintah dari otot-otot yang ingin bergerak.  

 

 

4. Superman : Kemampuan melihat yang menembus dinding.

 

Yakni kamera yang bernama Camero's Xaver 800, dilengkapi dengan radar gelombang mikro, memungkinkan untuk menembus dinding dan proyek pencitraan 3-D dari benda apa pun yang bersembunyi di balik dinding-dinding yang tebal sekalipun, mampu mencitrakan tembus dinding tua biasa, batu bata tanah liat, blok sinder bahkan struktur beton bertulang sekalipun, semuanya dapat ditembus Camero's Xaver 800.

Sama halnya dengan Superman, ternyata juga punya kryptonite atau kelemahannya, yakni penglihatan kamera ini tidak dapat menembus logam solid. 

 

 

Selain kamera Xaver 800, yang tidak kalah populer adalah sinar X, dimana sering digunakan di seluruh bandara Internasional dunia dalam memeriksa kelengkapan dan isi koper dari calon penumpang pesawat terbang. Ada jenis Sinar x genggam yang ditawarkan Fisik Optik Corporation yang disebut LEXID, yang dapat mengungkapkan selundupan tersembunyi di balik tembok, di mobil dan dalam wadah lain.

 

 

5. Perekat ala Spiderman Pada Dinding

Para ilmuwan senantiasa mengembangkan perekat sintetis yang meniru cicak selama bertahun-tahun, dan penemuan tersebut kini berpotensi menjadi kenyataan, melalui metode baru yang menggunakan plastik untuk membuat struktur mikroskopis serupa. teknologi ini akan membantu robot dalam eksplorasi batas akhir pada medan dinding.hal ini masuk akal, mengingat prinsip yang sama pada alat perekat yang kini manusia telah terbiasa menggunakannya.

 

 

Nah, demikian penemuan - penemuan unik dan canggih ala superhero. 

 

 

Free Backlink

Do you want to get free backlink? Special for my loyal readers, i will give you backlink. You just follow the procedure below.


Apakah Sahabat ingin mendapatkan backlink gratis? Khusus untuk pembaca setia Catatan Harianku, Catatan Harianku akan memberikan backlink. Sahabat hanya perlu mengikuti prosedur di bawah ini.


Just Place Full Blog Tricks banner into you  blog...!


Hanya dengan meletakkan banner dibawah ini kedalam blog anda.. !

<a href="http://www.smaga-tik.blogspot.com/" onmouseover="window.location=this.href"><img alt="Teknologi Informasi dan Komunikasi" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib6AgL-kAFo9T_jxtV5Ud0G6LS34kI3oi_F4Rgmv7o4K5BMqkWyzPgXE6I5rZaddfmv-XTpse868m6-b2-ZjuX1kVHNXTlhi1rsWBVBqZFXYRsCDBhRB8OnV5LZ9tRucsGqVpiZ7AncGga/s1600/banner.png" /></a>

Then, if you've put it on your blog. You can contact me by give a comment.


Kemudian, jika Anda telah menempatkannya di blog Anda. Anda dapat menghubungi saya dengan memberikan komentar dibawah ini.



LIST BANNER SAHABAT :

Kode Warna HTML

Kode Warna HTML akan menghasilkan Kombinasi Warna yang pas dan sesuai dan ini akan membuat blog kita semakin nyaman dipandang. Untuk itu saya sediakan tabel Kode Warna ini untuk sobat semua yang membutuhkan. Pemakaiannya pun sangat mudah, sobat tinggal klik warna yang ada pada tabel Kode Warna dibawah dan pastekan kode warna yang muncul ditempat yang akan sobat robah warnanya.

Cara Verifikasi dan Validasi NUPTK 2013

Bagi pemilik NUPTK dan masih aktif sebagai PTK (Pendidik & Tenaga Kependidikan) silakan melakukan proses verifikasi dan validasi (VerVal), pemutakhiran datanya serta melengkapi EDS (Evaluasi Diri Sekolah) dengan mengunduh Formulir, dan mengikuti prosedur yang ada disitus ini.

Proses VerVal dan pemutakhiran data yang terintegrasi EDS ini sekaligus berfungsi untuk pembersihan database NUPTK yang tersimpan selama periode 2006 s.d 2012 dari keadaan yang tidak benar, tidak lengkap, tidak sesuai formatnya dan duplikasi.

 Bagi PTK pemilik NUPTK yang tidak melakukan proses VerVal dan pemutakhiran, status NUPTK-nya akan dinyatakan TIDAK AKTIF periode 2013 secara otomatis oleh sistem.

 Bagi PTK yang telah di verifikasi dan validasi oleh sistem pendataan direktorat terkait namun belum teridentifikasi atau belum memiliki NUPTK dapat mengajukan NUPTK baru melalui Layanan PADAMU NEGERI sesuai syarat dan ketentuan yang ditetapkan oleh BPSDMPK-PMP KEMDIKBUD.

Langkah Pengambilan dan Penyerahan Formulir A01, A02, A03 sebagai berikut :

Silahkan kunjungi PADAMU Kemdikbud

Pada Form yang disediakan silahkan untuk mencari Nama/NUPTK Anda dan Lokasi induk tempat anda bekerja lalu klik Cari Data seperti gambar dibawah ini.

Setelah itu akan muncul daftar nama-nama yg terkait. Kemudian Klik Unduh pada nama yang sesuai dengan kepunyaan anda.

Setelah itu silahkan print formulir yang anda unduh tersebut, diisi dan kemudian serahkan kepada Operator Sekolah beserta lampiran berkas yang disyaratkan (hanya yang mendapatkan formulir A01, sedangkan untuk formulir A02 dan A03 dapat menyerahkan ke Operator Dinas Pendidikan Setempat).

Untuk yang mendapatkan formulir A02 dan A03, setelah di verifikasi oleh Operator Dinas Pendidikan silahkan untuk mengulangi langkah diatas untuk mendapatkan Formulir A01.

Selanjutnya, bagi yang menyerahkan Formulir A01 ke Operator Sekolah beserta dengan kelengkapan berkasnya, maka akan di verifikasi dan di validasi oleh Operator Sekolah sehingga nantinya akan mendapatkan Surat Tanda Bukti Verval NUPTK Lv.1 (S02b) beserta dengan UserID dan KODE AKTIVASI PTK yang bersangkutan.

Langkah Aktivasi Akun, Pencetakan Tanda Bukti VerVal dan Pengisian Formulir Secara Online

Untuk selanjutnya, bagi yang sudah mendapatkan Surat Tanda Bukti Verval NUPTK Lv. 1 langsung saja menuju ke http://padamu.siap.web.id untuk melakukan aktivasi dengan menekan tombol Aktivasi Akun PTK seperti gambar dibawah ini.

Setelah menekan tombol Aktivasi Akun PTK, maka anda akan dibawa kehalaman Aktivasi seperti gambar dibawah ini. Masukkan UserID dan Kode Aktivasi anda yang terdapat pada Surat Tanda Bukti Verval NUPTK Lv. 1. lalu klik Lanjut.

Lalu anda akan dibawa memasuki halaman data pribadi kita.

Disini ada hal yang penting untuk diperhatikan bahwa ada 2 pilihan dalam pembuatan akun yang ditawarkan yakni Saya ingin membuat Akun baru dan Saya ingin login menggunakan Akun SIAP saya.

• Untuk pilihan Pertama - Saya ingin membuat Akun baru diperuntukkan bagi PTK yang sama sekali belum pernah mendaftar di SIAP.web.Id ini, jadi bagi anda yang belum pernah atau tidak pernah terdaftar disini maka baiknya pilihlah pilihan ini dengan langsung memasukkan password yang diinginkan. Kalau anda memilih pilihan ini maka nantinya ketika login akan menggunakan NUPTK sebagai Username dan passwordnya adalah yang telah anda masukkan tadi. Jadi saya sarankan bagi yang belum memiliki account atau pemula silahkan memilih pilihan ini.
• Untuk Pilihan Kedua -  Saya ingin login menggunakan Akun SIAP saya adalah diperuntukkan bagi yang sudah memiliki account pada SIAP.web.id ini sebelumnya, artinya kita mengkaitkan account yang sudah kita daftarkan dengan validasi NUPTK saat ini.

Selanjutnya klik Lanjut untuk masuk ke halaman konfirmasi data pribadi anda seperti gambar dibawah ini.

Lalu pilihlah/klik Simpan

Halaman selanjutnya adalah halaman yang menyatakan bahwa anda sudah terdaftar pada layanan Padamu Negeri seperti gambar dibawah ini.

Langkah selanjutnya adalah mencoba login account yang baru anda buat tadi dengan menekan tombol Login.

Langkah Login sebagai PTK

Setelah sukses melakukan AKTIVASI diatas, maka anda resmi terdaftar dalam program PADAMU.Siap.web.id, dan sekarang silahkan Login PTK seperti gambar dibawah ini.

Kemudian masukkan username dan password anda. Username adalah NUPTK sedangkan password adalah password yang telah kita masukkan diawal aktivasi tadi, lalu tekan login.

Jika benar, maka anda akan dibawa masuk kehalaman pribadi anda seperti gambar dibawah ini.

Langkah selanjutnya adalah mengikuti langkah - langkah yakni Cek Data, Isi Angket, Isi Data dan Cetak Ajuan.

Keterangan :

Cek Data : silahkan untuk cek data pribadi, jika terdapat kekeliruan data silahkan menghubungi Operator Sekolah untuk diperbaiki.

Isi Angket : Setiap PTK (bukan Staf Tata Usaha) berkewajiban mengisi Angket yang terdiri dari 57 pertanyaan yang harus dijawab.

Isi Data : Setiap PTK wajib mengisi kelengkapan data pribadi yakni riwayat Pendidikan, Data Keluarga, Data Kepegawaian dan Riwayat mengajar. Jadi sebelum mengisi data ini persiapkan dahulu berkas - berkas yang diperlukan.

Cetak Ajuan : adalah hasil akhir berupa lembar bukti pengisian data anda yang nantinya bukti ini yang diserahkan kepada Operator Sekolah untuk di Validasi Level 2.

Untuk pengisian tersebut dilakukan secara berurutan, yakni harus diselesaikan sesuai urutannya langkah demi langkah.

Kalau semua isian sudah di isi, maka nanti halaman diatas akan menjadi seperti gambar dibawah ini dan anda akan mendapatkan Lembar Surat Pakta Integritas PTK yang harus ditanda tangani di atas materai Rp. 6.000 dan diketahui oleh Kepala Sekolah kemudian diserahkan kepada Operator Sekolah yang selanjutnya akan diserahkan kepada Operator Dinas Pendidikan untuk diproses lebih lanjut.

Sampai disini pekerjaan kita sudah selesai, tinggal menunggu proses selanjutnya.

Demikian Cara Verifikasi dan Validasi NUPTK 2013 untuk PTK, semoga bisa bermanfaat.