Indonesia Innovation!
7 Style Tabel Modifikasi CSS3 Untuk Blogger
Posted: 22 Mar 2013 03:25 PM PDT
<table border="1"> <caption>TITLE</caption> <tbody> <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr> <tr><td>Division 1.1</td><td>Division 1.2</td><td>Division 1.3</td></tr> <tr><td>Division 2.1</td><td>Division 2.2</td><td>Division 2.3</td></tr> <tr><td>Division 3.1</td><td>Division 3.2</td><td>Division 3.3</td></tr> </tbody> </table>
table[border="1"] {border-collapse:collapse;} table[border="1"] caption {font:normal normal 11px Arial,Sans-Serif;color:#fff;background-color:#333;} table[border="1"] tr {background:#fafafa;} table[border="1"] caption {background:#000;vertical-align:top; padding:5px 10px; border:1px solid #bbb;color:#fff} table[border="1"] th, table [border="1"] td {vertical-align:top; padding:5px 10px; border:1px solid #bbb;} table[border="1"] tr:nth-child(even) {background:#f5f5f5;} table[border="1"] th {background:#418AA4;color:#fff;font-weight:bold;}
table[border="1"] {border-collapse:collapse;font:normal normal 11px Arial,Sans-Serif;color:#ccc;-webkit-box-shadow:0 1px 3px black;-moz-box-shadow:0 1px 3px black;box-shadow:0 1px 3px black;} table[border="1"] caption {font:normal normal 11px Arial,Sans-Serif;color:#fff;background-color:#333;} table[border="1"] tr {background-color:#222;} table[border="1"] th, table[border="1"] td {vertical-align:top;padding:5px 10px;border:1px solid #3c3c3c;} table[border="1"] td:nth-child(even) {background-color:#1c1c1c;} table[border="1"] th {background-color:#555;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#666',endColorstr='#555');background-image:-webkit-gradient(linear,left top,left bottom,from(#666),to(#555));background-image:-webkit-linear-gradient(top,#666,#555);background-image:-moz-linear-gradient(top,#666,#555);background-image:-ms-linear-gradient(top,#666,#555);background-image:-o-linear-gradient(top,#666,#555);background-image:linear-gradient(top,#666,#555);color:black;font-size:12px;text-shadow:0 1px 0 rgba(255,255,255,.4);font-weight:bold;}
table[border="1"] {color: #333;font-family: Helvetica, Arial, sans-serif;border-collapse:collapse; border-spacing: 0;} table[border="1"] caption {height: 30px;color:#fff;background-color:#555;} table[border="1"] td, th {border: 1px solid transparent;height: 30px;transition: all 0.3s;} table[border="1"] th {background: #DFDFDF;font-weight: bold;} table[border="1"] td {background: #FAFAFA;text-align: center;} table[border="1"] tr:nth-child(even) td { background: #F1F1F1;} table[border="1"] tr:nth-child(odd) td { background: #FEFEFE; } table[border="1"] tr td:hover { background: #666; color: #FFF; }
table[border="1"] {border-collapse:collapse;font:normal 12px Verdana,Arial,Sans-Serif;color:#333;} table[border="1"] tr {background:#F0F0F0;} table[border="1"] th, table[border="1"] td, {vertical-align:top;padding:5px 10px;border:2px solid #fff;} table[border="1"] td:nth-child(odd) {background:#DEDEDE;} table[border="1"] th, table[border="1"] caption {background:#4A6D67;color:#fff;font-weight:bold;}
table[border="1"]{border-collapse:collapse;margin:0px;} table[border="1"],table[border="1"] th, table[border="1"] td{border:1px solid #ccc;padding:2px 7px;} table[border="1"] caption {font:normal normal 11px Tahoma,Sans-Serif;color:#fff;background-color:#800000;} td{vertical-align:top;} table[border="1"] th{background-color:#fafafa;text-align:left;}
table[border="1"] caption {font:normal normal 11px Tahoma,Sans-Serif;color:#fff;background-color:#C2B084;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.5);-moz-box-shadow:0 1px 3px rgba(0,0,0,.5);box-shadow:0 1px 3px rgba(0,0,0,.5);} table[border="1"] {border-collapse:collapse;font:normal normal 11px Verdana,Arial,Sans-Serif;color:#666;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.5);-moz-box-shadow:0 1px 3px rgba(0,0,0,.5);box-shadow:0 1px 3px rgba(0,0,0,.5);} table[border="1"] tr {background-color:#fafafa;} table[border="1"] th, table[border="1"] td {vertical-align:top;padding:5px 10px;border:1px solid white;} table[border="1"] tr:nth-child(even) {background-color:#f5f5f5;} table[border="1"] th {background-color:#ECE9D8;color:#ACA899;font-weight:bold;}
table[border="1"] {border-collapse:collapse;font:normal normal 11px Trebuchet,"Trebuchet MS",Arial,Sans-Serif;color:#3366CC;} table[border="1"] tr {background:#E1D4C1;} table[border="1"] th, table[border="1"] caption, table[border="1"] td {vertical-align:top;padding:5px 15px;border:1px solid #fff;} table[border="1"] td:nth-child(odd) {background:#F5EDE3;} table[border="1"] th {background:#104386;color:#99CCFF;font-weight:bold;}
Unlimited Backlink Blogger Gratis
Posted: 22 Mar 2013 08:17 AM PDT
inurl: Keyword sobat disini"This site uses KeywordLuv" atau inurl: Keyword sobat disini"Enable CommentLuv"
inurl: Tutorial Blogger"This site uses KeywordLuv" atau inurl: Tutorial Blogger"Enable CommentLuv"
http://www.lost-sector.net/
"Nice post, jangan lupa berkunjung balik ke Lost-Sector"
"Nice post, jangan lupa berkunjung balik ke <a href="www.lost-sector.net">Lost-Sector</a>"
Cara Membuat Email Subscribe di Bawah Postingan Blog
Posted: 22 Mar 2013 10:06 AM PDT
Ganti lostsectorblog dengan username feedsburner Ganti lostsector dengan username twitter Ganti lostsector.stars dengan username facebook fans page Ganti 108801075003252823592 dengan id profil google plus yang sobat punya
Cara Menyembunyikan Widget Pada Halaman Blogspot
Posted: 22 Mar 2013 11:10 AM PDT
Untuk penempatan kode HTML-nya sendiri, sobat harus menempatkannya tepat di atas tag </head>
<style type='text/css'> <b:if cond='data:blog.pageType == "item"'> .sidebar {display:none;} </b:if> </style>
<style type='text/css'> <b:if cond='data:blog.pageType == "http://lostsector.blogspot.in/2012/12/cara-mengatasi-missing-required-field-upadate-blog.html"'> .sidebar {display:none;} </b:if> </style>
<style type='text/css'> <b:if cond='data:blog.pageType == "static_page"'> .sidebar {display:none;} </b:if> </style>
<style type='text/css'> <b:if cond='data:blog.pageType == "item"'> <b:if cond='data:blog.pageType == "static_page"'> .sidebar {display:none;} </b:if> </b:if> </style>
<style type='text/css'> <b:if cond='data:blog.url == "http://lostsector.blogspot.com/2012/11/cara-memepercepat-loading-blog.html"'> <b:if cond='data:blog.url == "http://lostsector.blogspot.in/2012/12/lostsector-forum.html"'> <b:if cond='data:blog.url == "http://lostsector.blogspot.com/2012/11/mempercepat-loading-form-komentar-blog.html"'> .sidebar{display:none;} </b:if> </b:if> </b:if> </style>
<style type='text/css'> <b:if cond='data:blog.pageType == "item"'> .sidebar, #comments, #navigation, #popular-post {display:none;} </b:if> </style>
Cara Membuat / Memasang Permalink SEO di Blog
Posted: 22 Mar 2013 12:16 PM PDT
.permalink-lostsector {border: 1px dotted #424242; padding: 5px; background: none;-moz-border-radius:5px;} .permalink-lostsector a {background:none;} img.float-right {margin: 5px 0px 0 10px;} img.float-left {margin: 5px 10px 0 0px;}
<div class='permalink-lostsector' style='padding:5px 5px 5px 5px; overflow: auto; width: auto; height: auto; text-align: center;'><blink><b>Baca dulu sobat, Penting...!!!</b></blink><br/>Terima kasih telah membaca artikel tentang <strong><data:blog.pageName/></strong> dengan URL :<br/> <strong><data:post.url/></strong><br/> Sobat boleh menyebarluaskan atau mengcopy artikel <strong><a expr:href='data:post.url'><data:blog.pageName/></a></strong> ini, namun jangan lupa mencantumkan link sumbernya.</div>
CSS Buttons With Transitional Hover Untuk Blogger
Posted: 22 Mar 2013 09:51 AM PDT
#button .icon { background:#E3E3E3 url('https://lh3.googleusercontent.com/--e_YVckfUbg/TyvWSQ-Sa3I/AAAAAAAAF_4/A6xydsmRC6E/d/refreshcode.png') 3px 0 no-repeat; -moz-border-radius:10px; -webkit-border-radius:10px; -o-border-radius:10px; border-radius:10px; display:block; color:#212121; float:none; height:80px; width: 80px; line-height:80px; margin:10px auto 0; padding-top:1px; position:relative; text-shadow:0 1px 0 #FAFAFA; text-align:center; text-decoration:none; white-space:nowrap; -webkit-transition:width .25s ease-in-out, background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out, background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out, background-color .25s ease-in-out; -o-transition:width .25s ease-in-out, background-color .25s ease-in-out; transition:width .25s ease-in-out, background-color .25s ease-in-out; -webkit-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px; -o-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px; box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 1px 3px; } #button a span { display:none; } #button:hover a span { display:inline; } #button a span { font-size:1.4em; } #button:hover .icon { width:420px; } #button .demo { background-position:0 -80px; } #button .info { background-position:0 -160px; } #button .download { background-position:0 0; }
<div id="button"> <a href="#" class="icon demo"><span>Lihat Demo</span></a> </div>
<div id="button"> <a href="#" class="icon download"><span>Lihat Demo</span></a> </div>
<div id="button"> <a href="#" class="icon info"><span>Lihat Demo</span></a> </div>
Cara Menampilkan Widget Pada Halaman Tertentu Blogspot
Posted: 22 Mar 2013 11:56 AM PDT
<b:widget id='HTML4' locked='false' title='' type='HTML'> <b:includable id='main'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> </b:if> </b:includable> </b:widget>
<b:widget id='HTML4' locked='false' title='' type='HTML'> <b:includable id='main'> <b:if cond='data:blog.pageType == "item"'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> </b:if> </b:includable> </b:widget>
<b:widget id='HTML4' locked='false' title='' type='HTML'> <b:includable id='main'> <b:if cond='data:blog.pageType != "static_page"'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> </b:if> </b:includable> </b:widget>
<b:widget id='HTML4' locked='false' title='' type='HTML'> <b:includable id='main'> <b:if cond='data:blog.pageType == "archive"'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> </b:if> </b:includable> </b:widget>
<b:widget id='HTML4' locked='false' title='' type='HTML'> <b:includable id='main'> <b:if cond='data:blog.url == "Masukkan URL halaman sobat disini"'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> </b:if> </b:includable> </b:widget>
Cara Membuat Popup Email Subscribe / Berlangganan Artikel Terbaru Pada Blog
Posted: 22 Mar 2013 11:17 AM PDT
Keterangan : Ganti "lostsectorblog" dengan username feedburner yang sobat miliki
Bagaimana Cara Memasang Email Subscription di Bawah Postingan Blog ?
Posted: 22 Mar 2013 10:09 AM PDT
Ganti lostsectorblog dengan username feedburner sobat Ganti http://www.facebook.com/lostsector.stars dengan url facebook fans page Ganti http://twitter.com/lostsector dengan url twitter yang sobat miliki Ganti https://plus.google.com/108801075003252823592/ dengan url profil google plus Ganti http://pinterest.com/lostsector dengan url pinterest Ganti http://feeds.feedburner.com/lostsectorblog dengan url google feedburner Ganti lostsector.stars dengan username facebook fans page yang sobat punya
Cara Mudah Membuat Formulir Contact Us / Hubungi Kami di Blog
Posted: 22 Mar 2013 09:06 AM PDT
Minify / Compressor Javascript Rekomendasi Google
Posted: 22 Mar 2013 09:11 AM PDT
"Minifying" code refers to eliminating unnecessary bytes, such as extra spaces, line breaks, and indentation. Keeping JavaScript code compact has a number of benefits. First, for inline JavaScript and external files that you don't want cached, the smaller file size reduces the network latency incurred each time the page is downloaded. Secondly, minification can further enhance compression of external JS files and of HTML files in which the JS code is inlined. Thirdly, smaller files can be loaded and run more quickly by web browsers. Several tools are freely available to minify JavaScript, including the Closure Compiler, JSMin or the YUI Compressor. You can create a build process that uses these tools to minify and rename the development files and save them to a production directory. We recommend minifying any JS files that are 4096 bytes or larger in size. You should see a benefit for any file that can be reduced by 25 bytes or more (less than this will not result in any appreciable performance gain). Source : developers.google.com