Oktober 2013

Cara Menambahkan "EMOTICON" Pada Postingan dengan javascript

<div dir="ltr" style="text-align: left;" trbidi="on">
Blog Masholeh || Cara Menambahkan "EMOTICON" Pada Postingan dengan javascript, Pasang "Emoticon" di komentar blog mungkin itu sudah biasa, Tapi bagaimana jika "Emoticon" itu ditambahkan pada postingan?? mungkin akan terlihat lebih keren...?  
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAjMFlJ3qkl83gAIQ5HnmdAo6WDOgZdnTWn6qh3KO6wk2O_o2ME6-XRgddk086dfIPnecJ2xng8gGkwZ6c93559JWVqxEN4z31-ibaJcWNPrhmsBF3dzZpTAtIAKLs376Ey6gVKpW-BPk/s1600/emotiondalampostingan.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Menambahkan "EMOTICON" Pada Postingan dengan javascript" border="0" height="191" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAjMFlJ3qkl83gAIQ5HnmdAo6WDOgZdnTWn6qh3KO6wk2O_o2ME6-XRgddk086dfIPnecJ2xng8gGkwZ6c93559JWVqxEN4z31-ibaJcWNPrhmsBF3dzZpTAtIAKLs376Ey6gVKpW-BPk/s400/emotiondalampostingan.png" title="Cara Menambahkan "EMOTICON" Pada Postingan dengan javascript" width="400" /></a></div>
 Kebanyakan orang ingin menulis postingan yang disertakan dengan ekspresi - ekspresi. Nah sekarang anda bisa menambahkan "Emoticon" itu hanya dengan kode script. 
 
 
<center style="background-color: white; font-family: Coda; font-size: 15px; line-height: 21px;">
<a class="tombol" href="http://rawamangun18.blogspot.com/2012/03/emoticon-post-blogger.html" style="-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 1px; -webkit-transition: background-color 1s ease-out 0s; background-color: #248ab0; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(102, 102, 102); box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 1px; color: #3b5998; cursor: pointer; font-family: Arial, sans-serif; font-size: 11px; font-weight: bold; line-height: normal; margin: 0px 0.2em; padding: 6px 14px; text-decoration: none; text-shadow: rgba(0, 0, 0, 0.298039) 0px -1px 0px; text-transform: uppercase; transition: background-color 1s ease-out 0s; white-space: nowrap;">DEMO</a></center>
 
<copas style="background-color: #f9f9f9; border: 1px solid rgb(242, 242, 242); color: #cf4040; font-family: Coda; font-size: 13px; letter-spacing: 1px; line-height: 20px; margin: 0px; padding: 0px 8px; position: relative; text-shadow: none;">/*hehe</copas> <copas style="background-color: #f9f9f9; border: 1px solid rgb(242, 242, 242); color: #cf4040; font-family: Coda; font-size: 13px; letter-spacing: 1px; line-height: 20px; margin: 0px; padding: 0px 8px; position: relative; text-shadow: none;">/*sweet</copas> <copas style="background-color: #f9f9f9; border: 1px solid rgb(242, 242, 242); color: #cf4040; font-family: Coda; font-size: 13px; letter-spacing: 1px; line-height: 20px; margin: 0px; padding: 0px 8px; position: relative; text-shadow: none;">/*gakmau</copas> <copas style="background-color: #f9f9f9; border: 1px solid rgb(242, 242, 242); color: #cf4040; font-family: Coda; font-size: 13px; letter-spacing: 1px; line-height: 20px; margin: 0px; padding: 0px 8px; position: relative; text-shadow: none;">/*ingusan</copas> <copas style="background-color: #f9f9f9; border: 1px solid rgb(242, 242, 242); color: #cf4040; font-family: Coda; font-size: 13px; letter-spacing: 1px; line-height: 20px; margin: 0px; padding: 0px 8px; position: relative; text-shadow: none;">/*hai</copas> <copas style="background-color: #f9f9f9; border: 1px solid rgb(242, 242, 242); color: #cf4040; font-family: Coda; font-size: 13px; letter-spacing: 1px; line-height: 20px; margin: 0px; padding: 0px 8px; position: relative; text-shadow: none;">*ketawa</copas> <copas style="background-color: #f9f9f9; border: 1px solid rgb(242, 242, 242); color: #cf4040; font-family: Coda; font-size: 13px; letter-spacing: 1px; line-height: 20px; margin: 0px; padding: 0px 8px; position: relative; text-shadow: none;">/*omg</copas>  <copas style="background-color: #f9f9f9; border: 1px solid rgb(242, 242, 242); color: #cf4040; font-family: Coda; font-size: 13px; letter-spacing: 1px; line-height: 20px; margin: 0px; padding: 0px 8px; position: relative; text-shadow: none;">/*no</copas> <copas style="background-color: #f9f9f9; border: 1px solid rgb(242, 242, 242); color: #cf4040; font-family: Coda; font-size: 13px; letter-spacing: 1px; line-height: 20px; margin: 0px; padding: 0px 8px; position: relative; text-shadow: none;">/*panas</copas> <copas style="background-color: #f9f9f9; border: 1px solid rgb(242, 242, 242); color: #cf4040; font-family: Coda; font-size: 13px; letter-spacing: 1px; line-height: 20px; margin: 0px; padding: 0px 8px; position: relative; text-shadow: none;">/*woe</copas> 
 
<copas style="background-color: #f9f9f9; border: 1px solid rgb(242, 242, 242); color: #cf4040; font-family: Coda; font-size: 13px; letter-spacing: 1px; line-height: 20px; margin: 0px; padding: 0px 8px; position: relative; text-shadow: none;">/*berguling</copas> <copas style="background-color: #f9f9f9; border: 1px solid rgb(242, 242, 242); color: #cf4040; font-family: Coda; font-size: 13px; letter-spacing: 1px; line-height: 20px; margin: 0px; padding: 0px 8px; position: relative; text-shadow: none;">/*XD</copas> <copas style="background-color: #f9f9f9; border: 1px solid rgb(242, 242, 242); color: #cf4040; font-family: Coda; font-size: 13px; letter-spacing: 1px; line-height: 20px; margin: 0px; padding: 0px 8px; position: relative; text-shadow: none;">/*hipnotis</copas>  <copas style="background-color: #f9f9f9; border: 1px solid rgb(242, 242, 242); color: #cf4040; font-family: Coda; font-size: 13px; letter-spacing: 1px; line-height: 20px; margin: 0px; padding: 0px 8px; position: relative; text-shadow: none;">/*bye</copas> <copas style="background-color: #f9f9f9; border: 1px solid rgb(242, 242, 242); color: #cf4040; font-family: Coda; font-size: 13px; letter-spacing: 1px; line-height: 20px; margin: 0px; padding: 0px 8px; position: relative; text-shadow: none;">/*sedih</copas> 
 
Hilangkan tanda "*"  
Bukan hanya "Emoticon" tersebut anda juga bisa menambahkan "Emoticon" seperti <copas style="background-color: #f9f9f9; border: 1px solid rgb(242, 242, 242); color: #cf4040; font-family: Coda; font-size: 13px; letter-spacing: 1px; line-height: 20px; margin: 0px; padding: 0px 8px; position: relative; text-shadow: none;">:D</copas>  <copas style="background-color: #f9f9f9; border: 1px solid rgb(242, 242, 242); color: #cf4040; font-family: Coda; font-size: 13px; letter-spacing: 1px; line-height: 20px; margin: 0px; padding: 0px 8px; position: relative; text-shadow: none;">:)</copas> dan masih banyak lagi. 
 
Cukup dengan menambahkan kode script dibawah ini diatas kode <copas style="background-color: #f9f9f9; border: 1px solid rgb(242, 242, 242); color: #cf4040; font-family: Coda; font-size: 13px; letter-spacing: 1px; line-height: 20px; margin: 0px; padding: 0px 8px; position: relative; text-shadow: none;"></head></copas> 
<pre style="background-color: white; font-size: 15px; line-height: 21px;"><code class="xml" style="background-color: #292e34; border-left-color: rgb(188, 185, 167); border-left-style: solid; border-left-width: 4px; color: #bfbf90; display: block; font-family: Coda; font-size: 13px; letter-spacing: 0.2px; line-height: 18px; margin: 0.5em 0px; max-height: 250px; overflow: auto; padding: 0.8em; text-shadow: none;"><script src='https://first-secondary.googlecode.com/svn/trunk/Emoticondalampostingan.js' type='text/javascript'/></code></pre>
Cara menggunakannya gunakan Editor mode "EDIT HTML" bukan "Compose". 
Tambahan : Jika anda kurang suka dengan gambar emoticon-nya anda bisa menggantinya. 
 
1. Silahkan kunjungi <a href="http://emoticoner.com/" style="background-color: white; color: #3b5998; font-family: Coda; font-size: 15px; line-height: 21px; text-decoration: none;">http://emoticoner.com/</a> dan silhakan pilih emoticon yang anda suka. 
2. Silahkan anda download file.js dibawah kemudian edit dengan notepad dan ganti url gambar pada kode tersebut dengan url gambar emoticon yang anda pilih. 
 
<center style="background-color: white; font-family: Coda; font-size: 15px; line-height: 21px;">
<a class="tombol" href="http://sites.google.com/site/zyztem33/js/emoticon.js" style="-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 1px; -webkit-transition: background-color 1s ease-out 0s; background-color: #248ab0; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(102, 102, 102); box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 1px; color: #3b5998; cursor: pointer; font-family: Arial, sans-serif; font-size: 11px; font-weight: bold; line-height: normal; margin: 0px 0.2em; padding: 6px 14px; text-decoration: none; text-shadow: rgba(0, 0, 0, 0.298039) 0px -1px 0px; text-transform: uppercase; transition: background-color 1s ease-out 0s; white-space: nowrap;">DOWNLOAD</a></center>
 
3. Jika sudah save file tersebut dengan extensi "js" seperti file.js, kemudian anda upload di google.code atau tempat hosting lainnya. 
4. Tambahkan kode diatas kode <copas style="background-color: #f9f9f9; border: 1px solid rgb(242, 242, 242); color: #cf4040; font-family: Coda; font-size: 13px; letter-spacing: 1px; line-height: 20px; margin: 0px; padding: 0px 8px; position: relative; text-shadow: none;"></head></copas> 
<pre style="background-color: white; font-size: 15px; line-height: 21px;"><code class="xml" style="background-color: #292e34; border-left-color: rgb(188, 185, 167); border-left-style: solid; border-left-width: 4px; color: #bfbf90; display: block; font-family: Coda; font-size: 13px; letter-spacing: 0.2px; line-height: 18px; margin: 0.5em 0px; max-height: 250px; overflow: auto; padding: 0.8em; text-shadow: none;"><script src='https://first-secondary.googlecode.com/svn/trunk/Emoticondalampostingan.js' type='text/javascript'/></code></pre>
text berwarna merah ganti dengan url dimana anda meng-upload file.js yang telah anda edit tadi. </div>

Blog Masholeh || Cara Menambahkan "EMOTICON" Pada Postingan dengan javascript , Pasang " Emoticon " di komentar blo...

Baca selengkapnya »

01.40 +

Bagaimana Cara Membuat Blog Valid CSS3

<div dir="ltr" style="text-align: left;" trbidi="on">
Bagaimana Cara Membuat Blog Valid CSS3 - Setelah berkutat beberapa lama dengan Validasi HTML5, kini saya coba untuk berbagi Validasi CSS3. Terlambat kayaknya saya berbagi tutorial ini, tapi sebuah pepatah mengatakanbetter late than never, lebih baik terlambat daripada tidak sama sekali. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho6k4CPLqUV4yeZwIAqaUMwrarDhGVjwCinA0TybP7f-pSqMrByu-_LyfbGKRb3K8Ui5AE_Vwl4DKEIJq6SgIeMixMvGvDjs6rT4sx7G6lgpQ3ZLxFurNVdoOv1oH1J9TJ_tq3oLsD570/s1600/css3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Bagaimana Cara Membuat Blog Valid CSS3 " border="0" height="274" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho6k4CPLqUV4yeZwIAqaUMwrarDhGVjwCinA0TybP7f-pSqMrByu-_LyfbGKRb3K8Ui5AE_Vwl4DKEIJq6SgIeMixMvGvDjs6rT4sx7G6lgpQ3ZLxFurNVdoOv1oH1J9TJ_tq3oLsD570/s320/css3.jpg" title="Bagaimana Cara Membuat Blog Valid CSS3 " width="320" /></a></div>
 Diantara yang menyebabkan terlambatnya saya berbagi tentang validasi ini, saya tidak pernah memposting sesuatu yang belum pernah saya coba. Ironis kan? sebuah blog membahas validasi tapi blognya sendiri belum valid. 
 
<blockquote class="tr_bq" style="background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGC2Nuy8IWN6dfYbRODBJW4VhadINYZalQ1E01ytMH4dcrzMJhgl0gAEt3IwubsmoEelBCJKTOa0ntWIxK3XOgYoKfxwSmq-va3vPlXY5EwSkyZA59mn96I978NKehkUC6J-KCxYxnA88/s1600/bg-blockquote.gif); background-position: 15px 18px; background-repeat: no-repeat no-repeat; border: 1px dashed rgb(204, 204, 204); clear: both; color: #666666; font-size: 15px; font-style: italic; line-height: 1.45; margin: 0.25em 0px; padding: 15px 20px 15px 50px;">
Perlu dicatat, bahwa validasi baik HTML5 maupun CSS3 bukan sesuatu yang sempurna. Artinya, ketika sebuah blog valid HTML5 atau CSS3 tidak berarti sempurna dalam CSS dan HTML. Validasi hanya merupakan panduan dalam menyusun HTML dan CSS yang baik.</blockquote>
 
Bagi sobat yang ingin mencoba validasi CSS3, baik menghilangkan error atau warning, silahkan dicoba trik yang saya gunakan : 
 
<h3 style="background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw9CSlrl75EwX3DcfL68AeM85EsrHwDYb3FRicJR2fkLC6Tihh5_u5bCi_PqtKvWXVVjuytfbpYKZ_Bpie0mOyTS5Zi-OOIyBvolK-2RdOSCiwHALPODijhd-vTAplSpFJ4Rx30IqQyB4/s1600/bottom-line.gif); background-position: 0% 100%; background-repeat: no-repeat no-repeat; color: #2c3e50; font-family: Montserrat, 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 22px; font-weight: 400; line-height: 22.390625px; margin: 0px; padding-bottom: 12px;">
Non Aktifkan CSS Reset Stylesheet Blogger</h3>
<div id="css-reset" style="background-color: white; color: #2c3e50; font-family: Montserrat, 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 14px; line-height: 22.390625px;">
</div>
 
Menonaktifkan CSS Reset ini, saya temukan di Blog Damar Zaky dan aplikasinya dipermudah oleh Kompi Ajaib. Sebelum menonaktifkan CSS Reset Stylesheet Blogger, silahkan lihat kode dibawah, biasanya susunan template akan seperti ini : 
<pre style="background-color: #002b36; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; color: #839496; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.4em; margin-bottom: 1.5em; margin-top: 1.5em; padding: 0.8em 1em; position: relative; white-space: pre-wrap; word-wrap: break-word;"><code style="background-image: none !important; border: none !important; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; padding: 0px !important;"><b:skin><![CDATA[*
......
KODE CSS DI SINI
...... 
]]></b:skin></code></pre>
ganti <code style="background-color: #f7f7f9; border: 1px solid rgb(225, 225, 232); color: #dd1144; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13px; line-height: 22.390625px; padding: 2px 4px;"><b:skin><![CDATA[*</code> dengan  
<pre style="background-color: #002b36; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; color: #839496; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.4em; margin-bottom: 1.5em; margin-top: 1.5em; padding: 0.8em 1em; position: relative; white-space: pre-wrap; word-wrap: break-word;"><code style="background-image: none !important; border: none !important; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; padding: 0px !important;">&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /* <b:skin><![CDATA[*/]]></b:skin>
<style type='text/css'></code></pre>
ganti kode <code style="background-color: #f7f7f9; border: 1px solid rgb(225, 225, 232); color: #dd1144; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13px; line-height: 22.390625px; padding: 2px 4px;">]]></b:skin></code> dengan kode : 
<pre style="background-color: #002b36; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; color: #839496; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.4em; margin-bottom: 1.5em; margin-top: 1.5em; padding: 0.8em 1em; position: relative; white-space: pre-wrap; word-wrap: break-word;"><code style="background-image: none !important; border: none !important; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; padding: 0px !important;"></style></code></pre>
Setelah menonaktifkan CSS Reset ini, biasanya akan ada sedikit perobahan tampilan, baik di dashboard atau di blog. Saran saya tidak usah panik, edit saja satu persatu. 
 
<h3 style="background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw9CSlrl75EwX3DcfL68AeM85EsrHwDYb3FRicJR2fkLC6Tihh5_u5bCi_PqtKvWXVVjuytfbpYKZ_Bpie0mOyTS5Zi-OOIyBvolK-2RdOSCiwHALPODijhd-vTAplSpFJ4Rx30IqQyB4/s1600/bottom-line.gif); background-position: 0% 100%; background-repeat: no-repeat no-repeat; color: #2c3e50; font-family: Montserrat, 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 22px; font-weight: 400; line-height: 22.390625px; margin: 0px; padding-bottom: 12px;">
Hapus Beberapa Kode</h3>
 
Banyak tutorial yang memberikan kode CSS untuk diterpakan pada berbagai browser. Dengan hadirnya CSS3 ini, kode-kode tersebut sudah tidak diperlukan lagi. Seperti contoh kode rounded corner (ujung membulat) biasanya kodenya akan seperti ini : 
<pre style="background-color: #002b36; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; color: #839496; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.4em; margin-bottom: 1.5em; margin-top: 1.5em; padding: 0.8em 1em; position: relative; white-space: pre-wrap; word-wrap: break-word;"><code style="background-image: none !important; border: none !important; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; padding: 0px !important;">-moz-border-radius:5px;
-khtml-border-radius:5px;
-o-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;</code></pre>
dengan hadirnya CSS3, untuk beberapa browser hanya diperlukan kode <code style="background-color: #f7f7f9; border: 1px solid rgb(225, 225, 232); color: #dd1144; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13px; line-height: 22.390625px; padding: 2px 4px;">border-radius:5px</code>, oleh karena itu, hapus semua kode yang berawalan: 
<pre style="background-color: #002b36; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; color: #839496; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.4em; margin-bottom: 1.5em; margin-top: 1.5em; padding: 0.8em 1em; position: relative; white-space: pre-wrap; word-wrap: break-word;"><code style="background-image: none !important; border: none !important; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; padding: 0px !important;">-moz-
-khtml-
-o-
-webkit-</code></pre>
Hapus juga kode dengan awalan 
<pre style="background-color: #002b36; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; color: #839496; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.4em; margin-bottom: 1.5em; margin-top: 1.5em; padding: 0.8em 1em; position: relative; white-space: pre-wrap; word-wrap: break-word;"><code style="background-image: none !important; border: none !important; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; padding: 0px !important;">DXImageTransform</code></pre>
 
<h3 style="background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw9CSlrl75EwX3DcfL68AeM85EsrHwDYb3FRicJR2fkLC6Tihh5_u5bCi_PqtKvWXVVjuytfbpYKZ_Bpie0mOyTS5Zi-OOIyBvolK-2RdOSCiwHALPODijhd-vTAplSpFJ4Rx30IqQyB4/s1600/bottom-line.gif); background-position: 0% 100%; background-repeat: no-repeat no-repeat; color: #2c3e50; font-family: Montserrat, 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 22px; font-weight: 400; line-height: 22.390625px; margin: 0px; padding-bottom: 12px;">
Perhatikan Beberapa Perintah Validator</h3>
 
Masih banyak perintah-perintah perbaikan dari CSS Validator tahap demi tahap. Sebagai contoh perintah seperti ini : 
 
Family names containing whitespace should be quoted. If quoting is omitted, any whitespace characters before and after the name are ignored and any sequence of whitespace characters inside the name is converted to a single space. 
 
Itu artinya, apabila ada hurup yang mempunyai spasi, tambahkan tanda petik ("). Misalkan sobat menggunakan huruf Open Sans, Segoe UI, Arial (sebagai backup apabila huruf pertama tidak bisa diload) maka penulisannya 
<pre style="background-color: #002b36; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; color: #839496; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.4em; margin-bottom: 1.5em; margin-top: 1.5em; padding: 0.8em 1em; position: relative; white-space: pre-wrap; word-wrap: break-word;"><code style="background-image: none !important; border: none !important; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; padding: 0px !important;">font-family: 'Open Sans', 'Segoe UI', Arial, sans-serif</code></pre>
 
Sebetulnya masih banyak perintah yang lain, silahkan lakukan secara santai. Sobat juga bisa berdiskusi di kolom komentar apabila ada permasalahan dalam validasi ini. 
 </div>

Bagaimana Cara Membuat Blog Valid CSS3 - Setelah berkutat beberapa lama dengan Validasi HTML5 , kini saya coba untuk berbagi Validasi CSS...

Baca selengkapnya »

05.46 +

Cara Membuat Blog Valid HTML5

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both;">
M-S Blog || Cara Membuat Blog Valid HTML5 - Awalnya saya males belajar tentang HTML5 tapi mengikuti perkembangan zaman, akhirnya belajar juga HTML5. Jujur saya terkontaminasi oleh Kang Ismet dan M-S Blog </div>
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTYScJXxmVQxmu_ly1vQl-hVT0HfckY75pYp3GtsBLdUINzUrTkNBOtSMdmoztmraL5CO66JIVP2z2FyEBzClq62vnyaEBo1cPnkbK-ERcqaJWM8rzWTDFpkOKqeviWwlnK-ZH0uhDDtM/s1600/gela1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Blog Valid HTML5" border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTYScJXxmVQxmu_ly1vQl-hVT0HfckY75pYp3GtsBLdUINzUrTkNBOtSMdmoztmraL5CO66JIVP2z2FyEBzClq62vnyaEBo1cPnkbK-ERcqaJWM8rzWTDFpkOKqeviWwlnK-ZH0uhDDtM/s320/gela1.png" title="Cara Membuat Blog Valid HTML5" width="320" /></a></div>
 
Apa itu HTML5? HTML5 adalah pengembangan dari versi sebelumnya, dimana tujuan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin. Intinya, agar web/blog terbaca sempurna di semua browser dan mudah dalam penggunaan. 
 
<div style="background-color: white; color: #555555; font-family: 'Source Sans Pro', sans-serif, 'Segoe UI', Arial, Tahoma; font-size: 16px; line-height: 25.59375px; text-align: center;">
</div>
 
Perlukah web/blog valid HTML5? dari berbagai sumber saya temukan bahwa diantara keuntungan mevalidasi blog adalah : 
<ul style="background-color: white; color: #555555; font-family: 'Source Sans Pro', sans-serif, 'Segoe UI', Arial, Tahoma; font-size: 16px; line-height: 25.59375px;">
<li>Membantu Search Engine meng-indeks dokumen website/blog lebih baik.</li>
<li>Render browser lebih baik dan lebih cepat</li>
<li>DOCUMENT OBJECT MODEL (DOM) lebih stabil dan konsisten</li>
<li>Future Proof, yang berarti HTML lebih kompatible, backward compatible terhadap browser terbaru.</li>
<li>Mengetahui kondisi website/blog lebih detail ( link-link broken, link mati, dst.)</li>
<li>Lebih disukai browser-browser dan tentu masih banyak lagi keuntungan lain dari validasi HTML ini.</li>
</ul>
 
Baguskah validasi Blogspot untuk SEO? Nah.. ini yang saya masih belum tau, kalau melihat alasan di atas tentunya baik, tapi kenapa vitur-vitur template blogspot itu sendiri belum valid HTML5. Saya tunggu pendapat sobat tentang validasi untuk SEO. 
 
<div style="background-color: white; color: #555555; font-family: 'Source Sans Pro', sans-serif, 'Segoe UI', Arial, Tahoma; font-size: 16px; line-height: 25.59375px; text-align: center;">
<a href="http://html5.validator.nu/" rel="nofollow" style="color: #007abe; text-decoration: none;" target="_blank">VALIDASI BLOG DISINI</a> atau <a href="http://validator.w3.org/" rel="nofollow" style="color: #007abe; text-decoration: none;" target="_blank">DISINI</a> | <a href="http://html5.validator.nu/?doc=http%3A%2F%2Fblog.kangismet.net" rel="nofollow" style="color: #007abe; text-decoration: none;" target="_blank">CONTOH BLOG YANG TELAH DIVALIDASI</a></div>
 
<h3 style="background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw9CSlrl75EwX3DcfL68AeM85EsrHwDYb3FRicJR2fkLC6Tihh5_u5bCi_PqtKvWXVVjuytfbpYKZ_Bpie0mOyTS5Zi-OOIyBvolK-2RdOSCiwHALPODijhd-vTAplSpFJ4Rx30IqQyB4/s1600/bottom-line.gif); background-position: 0% 100%; background-repeat: no-repeat no-repeat; color: #555555; font-family: 'Source Sans Pro', sans-serif, 'Segoe UI', Arial, Tahoma; font-size: 26px; font-weight: 400; line-height: 25.59375px; margin: 0px; padding-bottom: 12px;">
Cara Membuat Blog 100% Valid HTML5</h3>
 
Langkah 1 : Backup template sebelum melakukan editing. 
Langkah 2 : Cari kode seperti ini : 
<pre style="background-color: #f3f3f3; border-color: rgb(200, 200, 200) rgb(200, 200, 200) rgb(200, 200, 200) rgb(157, 179, 201); border-style: solid; border-width: 1px 1px 1px 3px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; line-height: 1.5em; margin-bottom: 1.7em; margin-top: 1.7em; padding: 0.5em 1em; position: relative; white-space: pre-wrap; word-wrap: break-word;"><code class="xml" style="background-image: none !important; border: none !important; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; padding: 0px !important;"><?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head></code></pre>
ganti dengan : 
<pre style="background-color: #f3f3f3; border-color: rgb(200, 200, 200) rgb(200, 200, 200) rgb(200, 200, 200) rgb(157, 179, 201); border-style: solid; border-width: 1px 1px 1px 3px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; line-height: 1.5em; margin-bottom: 1.7em; margin-top: 1.7em; padding: 0.5em 1em; position: relative; white-space: pre-wrap; word-wrap: break-word;"><code class="xml" style="background-image: none !important; border: none !important; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; padding: 0px !important;"><?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/></code></pre>
Langkah 3 : Ganti kode <code style="background-color: #f7f7f9; border: 1px solid rgb(225, 225, 232); color: #dd1144; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; line-height: 25.59375px; padding: 2px 4px;"></html></code> dengan <code style="background-color: #f7f7f9; border: 1px solid rgb(225, 225, 232); color: #dd1144; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; line-height: 25.59375px; padding: 2px 4px;"></HTML></code> (paling bawah di template) 
Langkah 4 : ganti kode ini : 
<pre style="background-color: #f3f3f3; border-color: rgb(200, 200, 200) rgb(200, 200, 200) rgb(200, 200, 200) rgb(157, 179, 201); border-style: solid; border-width: 1px 1px 1px 3px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; line-height: 1.5em; margin-bottom: 1.7em; margin-top: 1.7em; padding: 0.5em 1em; position: relative; white-space: pre-wrap; word-wrap: break-word;"><code class="xml" style="background-image: none !important; border: none !important; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; padding: 0px !important;"><b:include data='blog' name='all-head-content'/></code></pre>
dengan kode di bawah ini : 
<pre style="background-color: #f3f3f3; border-color: rgb(200, 200, 200) rgb(200, 200, 200) rgb(200, 200, 200) rgb(157, 179, 201); border-style: solid; border-width: 1px 1px 1px 3px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; line-height: 1.5em; margin-bottom: 1.7em; margin-top: 1.7em; padding: 0.5em 1em; position: relative; white-space: pre-wrap; word-wrap: break-word;"><code class="xml" style="background-image: none !important; border: none !important; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; padding: 0px !important;"><meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='description'/>
</b:if>
</b:if></code></pre>
Langkah 5 : Ganti <code style="background-color: #f7f7f9; border: 1px solid rgb(225, 225, 232); color: #dd1144; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; line-height: 25.59375px; padding: 2px 4px;"><b:skin><![CDATA[</code> dengan kode dibawah : 
<pre style="background-color: #f3f3f3; border-color: rgb(200, 200, 200) rgb(200, 200, 200) rgb(200, 200, 200) rgb(157, 179, 201); border-style: solid; border-width: 1px 1px 1px 3px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; line-height: 1.5em; margin-bottom: 1.7em; margin-top: 1.7em; padding: 0.5em 1em; position: relative; white-space: pre-wrap; word-wrap: break-word;"><code class="xml" style="background-image: none !important; border: none !important; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; padding: 0px !important;"><link href='//www.blogger.com/static/v1/widgets/3950009988-widget_css_bundle.css' rel='stylesheet' type='text/css'/>
&lt;style type=&quot;text/css&quot;&gt; &lt;!-- /*<b:skin><![CDATA[*/]]
<style></code></pre>
Langkah 6 : Hapus semua kode ini : 
<pre style="background-color: #f3f3f3; border-color: rgb(200, 200, 200) rgb(200, 200, 200) rgb(200, 200, 200) rgb(157, 179, 201); border-style: solid; border-width: 1px 1px 1px 3px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; line-height: 1.5em; margin-bottom: 1.7em; margin-top: 1.7em; padding: 0.5em 1em; position: relative; white-space: pre-wrap; word-wrap: break-word;"><code class="xml" style="background-image: none !important; border: none !important; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; padding: 0px !important;"><b:include name='quickedit'/></code></pre>
Setiap kali menambahkan widget baru, hapus kode di atas. 
Langkah 7: Hapus semua kode ini (opsional) 
<pre style="background-color: #f3f3f3; border-color: rgb(200, 200, 200) rgb(200, 200, 200) rgb(200, 200, 200) rgb(157, 179, 201); border-style: solid; border-width: 1px 1px 1px 3px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; line-height: 1.5em; margin-bottom: 1.7em; margin-top: 1.7em; padding: 0.5em 1em; position: relative; white-space: pre-wrap; word-wrap: break-word;"><code class="xml" style="background-image: none !important; border: none !important; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; padding: 0px !important;"><a expr:name='data:post.id'/></code></pre>
Langkah 8 : hapus kode seperti ini : 
<pre style="background-color: #f3f3f3; border-color: rgb(200, 200, 200) rgb(200, 200, 200) rgb(200, 200, 200) rgb(157, 179, 201); border-style: solid; border-width: 1px 1px 1px 3px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; line-height: 1.5em; margin-bottom: 1.7em; margin-top: 1.7em; padding: 0.5em 1em; position: relative; white-space: pre-wrap; word-wrap: break-word;"><code class="xml" style="background-image: none !important; border: none !important; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; padding: 0px !important;"><b:include data='post' name='postQuickEdit'/></code></pre>
atau seperti ini : 
<pre style="background-color: #f3f3f3; border-color: rgb(200, 200, 200) rgb(200, 200, 200) rgb(200, 200, 200) rgb(157, 179, 201); border-style: solid; border-width: 1px 1px 1px 3px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; line-height: 1.5em; margin-bottom: 1.7em; margin-top: 1.7em; padding: 0.5em 1em; position: relative; white-space: pre-wrap; word-wrap: break-word;"><code class="xml" style="background-image: none !important; border: none !important; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; padding: 0px !important;"><b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='&quot;item-control &quot; + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</b:if>
</b:includable></code></pre>
Langkah 9 : Hapus kode dibawah ini (kalau ditemukan, kalau tidak ada, lewati saja) 
<pre style="background-color: #f3f3f3; border-color: rgb(200, 200, 200) rgb(200, 200, 200) rgb(200, 200, 200) rgb(157, 179, 201); border-style: solid; border-width: 1px 1px 1px 3px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; line-height: 1.5em; margin-bottom: 1.7em; margin-top: 1.7em; padding: 0.5em 1em; position: relative; white-space: pre-wrap; word-wrap: break-word;"><code class="xml" style="background-image: none !important; border: none !important; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; padding: 0px !important;"><div class='post-share-buttons goog-inline-block'>...sampai...</div></code></pre>
Langkah 10 : Ganti semua code <code style="background-color: #f7f7f9; border: 1px solid rgb(225, 225, 232); color: #dd1144; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; line-height: 25.59375px; padding: 2px 4px;">&</code> dengan <code style="background-color: #f7f7f9; border: 1px solid rgb(225, 225, 232); color: #dd1144; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; line-height: 25.59375px; padding: 2px 4px;">&amp;</code> 
 
Sampai di sini, template sobat sudah bisa Valid HTML5 untuk Homepage. Akan tetapi pada postingan masih banyak error karena komentar blogger (kecuali komentar hack seperti blog ini). Mudah-mudahan saya bisa share cara mem-fix-an postingan. 
 
<h3 style="background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw9CSlrl75EwX3DcfL68AeM85EsrHwDYb3FRicJR2fkLC6Tihh5_u5bCi_PqtKvWXVVjuytfbpYKZ_Bpie0mOyTS5Zi-OOIyBvolK-2RdOSCiwHALPODijhd-vTAplSpFJ4Rx30IqQyB4/s1600/bottom-line.gif); background-position: 0% 100%; background-repeat: no-repeat no-repeat; color: #555555; font-family: 'Source Sans Pro', sans-serif, 'Segoe UI', Arial, Tahoma; font-size: 26px; font-weight: 400; line-height: 25.59375px; margin: 0px; padding-bottom: 12px;">
Harap Diperhatikan</h3>
 
Kemungkinan dengan langkah-langkah di atas, blog sobat belum valid. Supaya menjadi 100%, silahkan perhatikan beberapa hal dibawah ini : 
 
1. Selalu gunakan tag <code style="background-color: #f7f7f9; border: 1px solid rgb(225, 225, 232); color: #dd1144; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; line-height: 25.59375px; padding: 2px 4px;">alt</code> pada gambar, contoh : 
<pre style="background-color: #f3f3f3; border-color: rgb(200, 200, 200) rgb(200, 200, 200) rgb(200, 200, 200) rgb(157, 179, 201); border-style: solid; border-width: 1px 1px 1px 3px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; line-height: 1.5em; margin-bottom: 1.7em; margin-top: 1.7em; padding: 0.5em 1em; position: relative; white-space: pre-wrap; word-wrap: break-word;"><code class="xml" style="background-image: none !important; border: none !important; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; padding: 0px !important;"><img alt="HTML5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLCLDDZ2mRbTXYUcCssT8A3AHKsyn5KmnjmgZW5fRCYJeTybWGQQdhsJLZVjBiT0pVIQoT1BKyMIB5F0hnn_ta0ZfEUUpI205EPv65B7AkI0s-WG_wJ3pvGDCGOUZlt9kN3ltYRV1ngKg/s1600/html5.png" /></code></pre>
2. Jangan gunakan <code style="background-color: #f7f7f9; border: 1px solid rgb(225, 225, 232); color: #dd1144; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; line-height: 25.59375px; padding: 2px 4px;">border="0"</code> pada gambar, sebagai gantinya tambahkan kode : 
<pre style="background-color: #f3f3f3; border-color: rgb(200, 200, 200) rgb(200, 200, 200) rgb(200, 200, 200) rgb(157, 179, 201); border-style: solid; border-width: 1px 1px 1px 3px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; line-height: 1.5em; margin-bottom: 1.7em; margin-top: 1.7em; padding: 0.5em 1em; position: relative; white-space: pre-wrap; word-wrap: break-word;"><code class="ini" style="background-image: none !important; border: none !important; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; padding: 0px !important;">style="border:none"</code></pre>
atau CSS terpisah seperti 
<pre style="background-color: #f3f3f3; border-color: rgb(200, 200, 200) rgb(200, 200, 200) rgb(200, 200, 200) rgb(157, 179, 201); border-style: solid; border-width: 1px 1px 1px 3px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; line-height: 1.5em; margin-bottom: 1.7em; margin-top: 1.7em; padding: 0.5em 1em; position: relative; white-space: pre-wrap; word-wrap: break-word;"><code class="css" style="background-image: none !important; border: none !important; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; padding: 0px !important;">img{border:none}</code></pre>
3. Pada iFrame, jangan menggunakan <code style="background-color: #f7f7f9; border: 1px solid rgb(225, 225, 232); color: #dd1144; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; line-height: 25.59375px; padding: 2px 4px;">frameborder="0"</code> atau <code style="background-color: #f7f7f9; border: 1px solid rgb(225, 225, 232); color: #dd1144; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; line-height: 25.59375px; padding: 2px 4px;">allowtransparency:"true"</code> <code style="background-color: #f7f7f9; border: 1px solid rgb(225, 225, 232); color: #dd1144; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; line-height: 25.59375px; padding: 2px 4px;">scrolling="no"</code>, sebagai gantinya gunakan kode : 
<pre style="background-color: #f3f3f3; border-color: rgb(200, 200, 200) rgb(200, 200, 200) rgb(200, 200, 200) rgb(157, 179, 201); border-style: solid; border-width: 1px 1px 1px 3px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; line-height: 1.5em; margin-bottom: 1.7em; margin-top: 1.7em; padding: 0.5em 1em; position: relative; white-space: pre-wrap; word-wrap: break-word;"><code class="ini" style="background-image: none !important; border: none !important; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; padding: 0px !important;">style="border:none;overflow:hidden"</code></pre>
atau CSS terpisah seperti 
<pre style="background-color: #f3f3f3; border-color: rgb(200, 200, 200) rgb(200, 200, 200) rgb(200, 200, 200) rgb(157, 179, 201); border-style: solid; border-width: 1px 1px 1px 3px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; line-height: 1.5em; margin-bottom: 1.7em; margin-top: 1.7em; padding: 0.5em 1em; position: relative; white-space: pre-wrap; word-wrap: break-word;"><code class="css" style="background-image: none !important; border: none !important; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; padding: 0px !important;">iframe{border:none;overflow:hidden}</code></pre>
4. Pada tag <code style="background-color: #f7f7f9; border: 1px solid rgb(225, 225, 232); color: #dd1144; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; line-height: 25.59375px; padding: 2px 4px;">a</code> jangan menggunakan tag <code style="background-color: #f7f7f9; border: 1px solid rgb(225, 225, 232); color: #dd1144; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; line-height: 25.59375px; padding: 2px 4px;">name</code> seperti : 
<pre style="background-color: #f3f3f3; border-color: rgb(200, 200, 200) rgb(200, 200, 200) rgb(200, 200, 200) rgb(157, 179, 201); border-style: solid; border-width: 1px 1px 1px 3px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; line-height: 1.5em; margin-bottom: 1.7em; margin-top: 1.7em; padding: 0.5em 1em; position: relative; white-space: pre-wrap; word-wrap: break-word;"><code class="xml" style="background-image: none !important; border: none !important; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; padding: 0px !important;"><a name='comment-form'></code></pre>
sebagai gantinya gunakan <code style="background-color: #f7f7f9; border: 1px solid rgb(225, 225, 232); color: #dd1144; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; line-height: 25.59375px; padding: 2px 4px;">id</code> seperti : 
<pre style="background-color: #f3f3f3; border-color: rgb(200, 200, 200) rgb(200, 200, 200) rgb(200, 200, 200) rgb(157, 179, 201); border-style: solid; border-width: 1px 1px 1px 3px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; line-height: 1.5em; margin-bottom: 1.7em; margin-top: 1.7em; padding: 0.5em 1em; position: relative; white-space: pre-wrap; word-wrap: break-word;"><code class="xml" style="background-image: none !important; border: none !important; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; padding: 0px !important;"><a href='#comment-form'></code></pre>
5. Jangan ada dua <code style="background-color: #f7f7f9; border: 1px solid rgb(225, 225, 232); color: #dd1144; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; line-height: 25.59375px; padding: 2px 4px;">id</code> pada template. 
6. Hapus kode <code style="background-color: #f7f7f9; border: 1px solid rgb(225, 225, 232); color: #dd1144; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13.5px; line-height: 25.59375px; padding: 2px 4px;"><b:include name='quickedit'/></code> setiap menambah widget baru. 
 
Untuk kekurangannya Insya Allah saya tambahkan kedepannya. 
Semoga bermanfaat... 
 </div>

M-S Blog || Cara Membuat Blog Valid HTML5 - Awalnya saya males belajar tentang HTML5 tapi mengikuti perkembangan zaman, akhirnya belajar...

Baca selengkapnya »

15.36 +

Bagaimana Cara Membuat Persentase pada Scrollbar dengan CSS di Blog

<div dir="ltr" style="text-align: left;" trbidi="on">
Blog Masholeh || Bagaimana Cara Membuat Persentase pada Scrollbar - Tutorial kali ini sebenarnya tidak terlalu penting bagi sebuah blog, namun bagi sahabat yang ingin membuat blognya lebih unik, tidak ada salahnya untuk mencoba menerapkan persentase pada scrollbar ini. Pada postingan sebelum nya juga di jelaskan <a href="http://www.muhammad-sholeh.info/2013/08/bagaimana-cara-merubah-warna-scroll-bar.html">Bagaimana Cara Merubah Warna Scroll Bar dengan CSS di blog</a> 
 Dengan menambahkan persentase, pengunjung akan bisa melihat berapa persen halaman yang telah di scroll, apabila sampai bawah di scroll maka akan menjadi 100%. 
 
 
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJekokzGIg35Y3yJvJk9PnnUdih4CsJFT_JqUE9Nnsy94qq1kKgesiDNI7X0eV0Bvl6jj1TYiitVdL4LR26SRE0DcEw879VveB56_OwZGiZTEQKOIdh4zsBdTsmdv14CNYzFNYWCQmzuKX/s1600/x.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Bagaimana Cara Membuat Persentase pada Scrollbar" border="0" height="338" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJekokzGIg35Y3yJvJk9PnnUdih4CsJFT_JqUE9Nnsy94qq1kKgesiDNI7X0eV0Bvl6jj1TYiitVdL4LR26SRE0DcEw879VveB56_OwZGiZTEQKOIdh4zsBdTsmdv14CNYzFNYWCQmzuKX/s640/x.png" title="Bagaimana Cara Membuat Persentase pada Scrollbar" width="640" /></a></div>
 
 
<div class="clear" style="background-color: #2f3135; clear: both; color: #dfe2e4; font-family: Ubuntu, Arial, sans-serif; font-size: 13px; line-height: 23.390625px; margin: 0px; padding: 0px;">
</div>
 
Untuk membuatnya silahkan ikuti langkah-langkahnya : 
 
Langkah 1 : Seperti biasa masuk ke Template dan Edit HTML. Simpan kode ini di atas <code style="background-color: white; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 16px;">]]></b:skin></code> 
<pre style="background-color: #002028; border-left-color: rgb(24, 78, 89); border-left-style: solid; border-left-width: 3px; clear: both; color: #84999b; font-size: 12px; line-height: 23.390625px; margin-bottom: 1.3em; margin-top: 1.3em; overflow: auto; padding: 0.5em 1em; word-wrap: normal;"><code class="css" style="color: #839496; display: block; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; line-height: 16px; padding: 0.5em;">#scroll {
  display: none;
  position: fixed;
  top: 0;
  right: 20px;
  z-index: 500;
  padding: 3px 8px;
  background-color: #2187e7;
  color: #fff;
  border-radius: 3px;
}
#scroll:after {
  content: " ";
  position: absolute;
  top: 50%;
  right: -8px;
  height: 0;
  width: 0;
  margin-top: -4px;
  border: 4px solid transparent;
  border-left-color: #2187e7;
}</code></pre>
<blockquote style="background-color: #445787; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; color: white; font-family: Ubuntu, Arial, sans-serif; font-size: 13px; line-height: 23.390625px; margin: 0.75em 0px; padding: 10px 15px; position: relative;">
NB: Ubahlah warna background presentase pada Scrollbar sesuka anda.</blockquote>
 
 
Langkah 2 : Simpan kode ini di bawah <code style="font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 16px;"></head></code> 
<pre style="background-color: #002028; border-left-color: rgb(24, 78, 89); border-left-style: solid; border-left-width: 3px; clear: both; color: #84999b; font-size: 12px; line-height: 23.390625px; margin-bottom: 1.3em; margin-top: 1.3em; overflow: auto; padding: 0.5em 1em; word-wrap: normal;"><code class="xml" style="color: #839496; display: block; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; line-height: 16px; padding: 0.5em;"><div id='scroll'></div></code></pre>
 
Langkah 3 : Simpan JavaScript ini di atas <code style="font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 16px;"></body></code> 
<pre style="background-color: #002028; border-left-color: rgb(24, 78, 89); border-left-style: solid; border-left-width: 3px; clear: both; color: #84999b; font-size: 12px; line-height: 23.390625px; margin-bottom: 1.3em; margin-top: 1.3em; overflow: auto; padding: 0.5em 1em; word-wrap: normal;"><code class="xml" style="color: #839496; display: block; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; line-height: 16px; padding: 0.5em;"><script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
 var viewportHeight = $(this).height(),
 scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
 progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
 distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
 $('#scroll')
 .css('top', distance)
 .text(' ' + Math.round(progress * 100) + '%')
 .fadeIn(100);
 if (scrollTimer !== null) {
 clearTimeout(scrollTimer);
 }
 scrollTimer = setTimeout(function() {
 $('#scroll').fadeOut();
 }, 1500);
});
//]]>
</script></code></pre>
Simpan Template. Sekian dan Terima Kasih</div>

Blog Masholeh || Bagaimana Cara Membuat Persentase pada Scrollbar - Tutorial kali ini sebenarnya tidak terlalu penting bagi sebuah blog, ...

Baca selengkapnya »

07.08 +

Bagaimana Cara Merubah Warna Scroll Bar dengan CSS di blog

<div dir="ltr" style="text-align: left;" trbidi="on">
Blog Masholeh || Bagaimana Cara Merubah Warna Scroll Bar dengan CSS di blog - Apa arti scrollbar? Scroll bar berarti bar penggulung. Scrollbar biasanya kita lihat berada di samping kanan blog untuk menggulung layar ke atas atau bawah. Untuk lebih jelasnya bisa sobat lihat pada screenshoot di bawah ini : 
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7-KyWL_FEs_gS8E3-zMmUm6Tt2KtDqNHmlNqqXliW9XMzB1D6Skjq1gVtOcR2JZYNtCjelPDPCqSI6IXrw5AMXuAU8a_90I60xjiwE93E6sc8cmYIFULxyH9g9SOygUknuFUZVilYWVo9/s1600/x.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Bagaimana Cara Merubah Warna Scroll Bar dengan CSS di blog" border="0" height="341" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7-KyWL_FEs_gS8E3-zMmUm6Tt2KtDqNHmlNqqXliW9XMzB1D6Skjq1gVtOcR2JZYNtCjelPDPCqSI6IXrw5AMXuAU8a_90I60xjiwE93E6sc8cmYIFULxyH9g9SOygUknuFUZVilYWVo9/s640/x.png" title="Bagaimana Cara Merubah Warna Scroll Bar dengan CSS di blog" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
 </div>
<div class="separator" style="clear: both; text-align: center;">
 </div>
Menurut saya, mengganti scroll bar tidak ada hubungannya dengan SEO. Hal ini digunakan hanya untuk mempercantik tampilan blog agar betah berlama2 tinggal di blog kita. ##Caranya sangat gampang, sobat tinggal menyimpan kode ini di atas <code style="font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 16px;">]]></b:skin></code> 
<pre style="border-left-color: rgb(24, 78, 89); border-left-style: solid; border-left-width: 3px; clear: both; font-size: 12px; line-height: 23.390625px; margin-bottom: 1.3em; margin-top: 1.3em; overflow: auto; padding: 0.5em 1em; word-wrap: normal;"><code class="ruby" style="display: block; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; line-height: 16px; padding: 0.5em;">::-webkit-scrollbar {
height:12px;
width: 15px;
background: #6d6d6d; //warna background scroll
}
::-webkit-scrollbar-thumb {
background-color: #142c3e; //warna scroll
}</code></pre>
Untuk menyesuaikan dengan tampilan blog sobat, silahkan edit warna scroll dan warna backgroundnya. NB : Kode di atas tidak bisa tampil di Firefox atau Internet Explorer, dan hanya tampil di Google Chrome.</div>

Blog Masholeh || Bagaimana Cara Merubah Warna Scroll Bar dengan CSS di blog - Apa arti scrollbar? Scroll bar berarti bar penggulung. Scro...

Baca selengkapnya »

06.09 +

Blogger

CSS

Javascript

Cara Menambahkan "EMOTICON" Pada Postingan dengan javascript

Bagaimana Cara Membuat Blog Valid CSS3

Cara Membuat Blog Valid HTML5

Bagaimana Cara Membuat Persentase pada Scrollbar dengan CSS di Blog

Bagaimana Cara Merubah Warna Scroll Bar dengan CSS di blog

Entri Populer

Arsip Blog