M-S Blog: HTML

Showing posts with label HTML. Show all posts

Download Script Website Rumah Sakit Islam Klaten

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO-2NdlT2iKEXKG1VWkiJtHEq6tyrqOXbJZsTlcKS1gnFh1VZoy7hs13ZFIH06p3wtvjlyXpPxqJkvdBf522JMFpnapfKpF3dL0_vO4Sx6b0Mn2_X7eXOfX3ndbnNCE5JA1ROgfprUidM/s1600/1+(1).png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" height="384" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO-2NdlT2iKEXKG1VWkiJtHEq6tyrqOXbJZsTlcKS1gnFh1VZoy7hs13ZFIH06p3wtvjlyXpPxqJkvdBf522JMFpnapfKpF3dL0_vO4Sx6b0Mn2_X7eXOfX3ndbnNCE5JA1ROgfprUidM/s1600/1+(1).png" title="Website Rumah Sakit Islam Klaten" width="640" /></a></div>
<div style="background-color: white; color: #666666; font-family: Roboto,sans-serif; text-align: center;">
 </div>
<div style="background-color: white; color: #666666; font-family: Roboto, sans-serif; font-size: 14px; text-align: center;">
<div style="text-align: left;">
BACA JUGA :<a href="http://solo-devilz.blogspot.com/2015/04/download-script-website-toko-online-vmart.html"> Download Script Website Toko Online</a></div>
 </div>
<div style="background-color: white; color: #666666; font-family: Roboto, sans-serif; font-size: 14px; text-align: center;">
<a class="kr_button large rounded" href="http://rsi.masholeh.web.id/" style="-webkit-box-shadow: rgb(234, 234, 234) 0px 1px 2px, rgb(251, 251, 251) 0px 1px 0px inset; -webkit-transition: all 0.3s ease-out; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(249, 249, 249)), to(rgb(240, 240, 240))); border-bottom-left-radius: 23px; border-bottom-right-radius: 23px; border-color: rgb(222, 222, 222) rgb(216, 216, 216) rgb(211, 211, 211); border-style: solid; border-top-left-radius: 23px; border-top-right-radius: 23px; border-width: 1px; box-shadow: rgb(234, 234, 234) 0px 1px 2px, rgb(251, 251, 251) 0px 1px 0px inset; color: #31b988; cursor: pointer; display: inline-block; font-family: HelveticaNeue, Arial, sans-serif; font-size: 20px; line-height: 1em; outline: none; padding: 12px 22px; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: all 0.3s ease-out;" target="_blank"> Demo</a></div>
 Alhamdulillah-Website Rumah Sakit Islam Klaten, kali ini saya dapat berbagi script website rumah sakit islam klaten yang sangat sederhana, website ini selain karya saya juga ditunjukkan kepada tugas akhir di salah satu SMK di Solo. 
 
Website ini sudah lumayan untuk dikatakan, karena sudah memiliki security / keamanan yang dibilang agak bagus dengan adanya filter SQL Injection dan dengan dilengkapinya page navigation akan memudahkan untuk merubah isi website dengan sangat mudah. 
 Bagi rekan-rekan yang ingin memiliki script website saya bagikan dengan cuma-cuma alias GRATIS, silahkan download dan gunakan dengan bijak. 
 
 
<div style="background-color: white; color: #666666; font-family: Roboto, sans-serif; font-size: 14px; text-align: center;">
<a class="kr_button large rounded" href="http://masholeh.web.id/blog/download/rsi_new.zip" style="-webkit-box-shadow: rgb(234, 234, 234) 0px 1px 2px, rgb(251, 251, 251) 0px 1px 0px inset; -webkit-transition: all 0.3s ease-out; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(249, 249, 249)), to(rgb(240, 240, 240))); border-bottom-left-radius: 23px; border-bottom-right-radius: 23px; border-color: rgb(222, 222, 222) rgb(216, 216, 216) rgb(211, 211, 211); border-style: solid; border-top-left-radius: 23px; border-top-right-radius: 23px; border-width: 1px; box-shadow: rgb(234, 234, 234) 0px 1px 2px, rgb(251, 251, 251) 0px 1px 0px inset; color: #31b988; cursor: pointer; display: inline-block; font-family: HelveticaNeue, Arial, sans-serif; font-size: 20px; line-height: 1em; outline: none; padding: 12px 22px; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; transition: all 0.3s ease-out;" target="_blank">Download</a> 
 
 
<div style="text-align: left;">
re-post from http://blog.masholeh.web.id/2014/06/download-script-website-rumah-sakit-islam-klaten.html </div>
</div>
</div>

BACA JUGA : Download Script Website Toko Online Demo Alhamdulillah-Website Rumah Sakit Islam Klaten , kali ini saya dapat berba...

06:59 +

Free Download Flat UI Pro Personal License PSD & HTML

M-S Blog || Free Download Flat UI Pro Personal License PSD & HTML  
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcB_HApx4PRQnNtjAZbSVrIrhINJpmvw2X3oihRMFrkT6MmyY4Cu4UDHzfsJ80dEflDLFonmU1x57X7M3DAhG90pLHWBugLAUaQ0guLGBXhXLIr_-UwVtGzlZFlpc36Sc8usXr69miBAI/s1600/Flat+UI+pro.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Free Download Flat UI Pro Personal License PSD & HTML" border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcB_HApx4PRQnNtjAZbSVrIrhINJpmvw2X3oihRMFrkT6MmyY4Cu4UDHzfsJ80dEflDLFonmU1x57X7M3DAhG90pLHWBugLAUaQ0guLGBXhXLIr_-UwVtGzlZFlpc36Sc8usXr69miBAI/s400/Flat+UI+pro.png" title="" width="400" /></a></div>
 
 
<blockquote class="tr_bq">
<div style="text-align: justify;">
Bootstrap, the popular front-end framework which hailed from Twitter, continues to grow as a quick way for developers to get an attractive site up and running in little time. It’s a great starting point, but Bootstrap is often left completely un-customized, and its popularity has left the framework’s distinct design looking default and monotonous.</div>
<div style="background-color: white; text-align: justify;">
To bring some variety to this space, Designmodo, the team behind Dribbbleboard and this slick IMDB concept, is launching Flat UI, a free HTML user interface kit based on Bootstrap. The kit packs PSD files of buttons, inputs, selects, checkboxes, tags, menus, progress bars, sliders and navigation elements, as well as color swatches and SVG glyphs.</div>
</blockquote>
 
 
Bootstrap, kerangka populer front-end yang berasal dari Twitter, terus berkembang sebagai cara cepat bagi pengembang untuk mendapatkan situs Facebook yang menarik dan berjalan dalam waktu sedikit. Ini adalah titik awal yang bagus, tapi Bootstrap sering tersisa benar-benar tidak disesuaikan, dan popularitasnya telah meninggalkan desain yang berbeda kerangka yang mencari default dan monoton. 
 
Untuk membawa beberapa variasi untuk ruang ini, Designmodo, tim di belakang Dribbbleboard dan konsep IMDB licin ini, meluncurkan FLAT UI, gratis kit antarmuka pengguna HTML berdasarkan Bootstrap. Kit bungkus file PSD tombol, input, memilih, checkbox, tag, menu, progress bar, slider dan elemen navigasi, serta swatch warna dan mesin terbang SVG. 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzWZVvmmgBsdNEB0q47BR1PP-ntZvQW5uisB80ajEkjBVPRLniyTfTf5WyWCKoR9HWuEth16IDwKujqGdPguTKMbY4qutUyEe1NYptagXPO35kXhyphenhyphenvj3nLw5cTvIqJ6JpKtwCHOsgkurI/s1600/flat+UI.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Free Download Flat UI Pro Personal License PSD & HTML" border="0" height="139" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzWZVvmmgBsdNEB0q47BR1PP-ntZvQW5uisB80ajEkjBVPRLniyTfTf5WyWCKoR9HWuEth16IDwKujqGdPguTKMbY4qutUyEe1NYptagXPO35kXhyphenhyphenvj3nLw5cTvIqJ6JpKtwCHOsgkurI/s320/flat+UI.png" title="" width="320" /></a></div>
 
 
<blockquote class="tr_bq">
This time i want to share Flat UI PSD & HTML from Designmodo.com . Its very interesting for web designer and very easy to use especially for prototyping </blockquote>
<blockquote class="tr_bq">
 You can see at designmodo.com website , for complete details about <a href="http://designmodo.com/flat/">Flat UI Pro</a></blockquote>
 
Kali ini saya ingin berbagi Flat UI PSD & HTML dari Designmodo.com. Yang sangat menarik bagi desainer web dan sangat mudah digunakan terutama untuk prototyping 
 
Anda dapat melihat di website designmodo.com, untuk rincian lengkap tentang <a href="http://designmodo.com/flat/">Flat UI Pro</a> 
 
 
<div style="color: #666a76; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 28px; margin-bottom: 1.777em; orphans: 3; text-align: center; widows: 3;">
<a href="https://www.dropbox.com/s/w0xcf5jn34mt7lg/Flat-UI-PSD-HTML-Personal-License.zip" style="background-color: white; color: #53a1b8; text-decoration: none;" title="Download Flat UI Pro"><img alt="Download" class="aligncenter size-medium wp-image-49" height="117" src="http://ramazeta.com/wp-content/uploads/2013/09/toolbar-download-300x117.png" style="border-bottom-left-radius: 0.201em; border-bottom-right-radius: 0.201em; border-top-left-radius: 0.201em; border-top-right-radius: 0.201em; border: 0px; box-sizing: border-box; display: block; height: auto; margin: 0px auto 1.777em; max-width: 100%;" width="300" /></a></div>
<div style="line-height: 28px; margin-bottom: 1.777em; orphans: 3; text-align: right; widows: 3;">
Sumber : http://ramazeta.com/flat-ui-personal-license-psd-html/</div>

M-S Blog || Free Download Flat UI Pro Personal License PSD & HTML Bootstrap, the popular front-end framework which hailed from ...

21:15 +

Breadcrumb SEO Friendly Valid HTML

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQU56CvpLM9b3YawwForSRhamy0RcVUze8GVlmNzU2Mzdo653Kfbs588nYDIlusQYw_02qHS6qjLFOD-jL1Olyz1xbKuBnO4PyXu6putFgzVNDYzJx2ermgU8_3VccQCBsXM3kynezi8I/s1600/2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Breadcrumb SEO Friendly Valid HTML" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQU56CvpLM9b3YawwForSRhamy0RcVUze8GVlmNzU2Mzdo653Kfbs588nYDIlusQYw_02qHS6qjLFOD-jL1Olyz1xbKuBnO4PyXu6putFgzVNDYzJx2ermgU8_3VccQCBsXM3kynezi8I/s1600/2.jpg" title="Breadcrumb SEO Friendly Valid HTML" /></a></div>
 
Kalau dulu kita sudah membahas tentang Cara memasang meta tag seo friendly maka kali ini kita akan membahas tentang Cara Memasang/Membuat Breadcrumb Agar Blog Cepat Terindex Google. Apa itu breadcrumb? Breadcrum adalah semacam Navigasi yang berguna untuk memudahkan mesin pencari dan visitor menjelajahi halaman demi halaman pada blog anda sesuai dengan kategori yang ada. Cara memasang breadcrumb yang seo friendly inipun sangat mudah karena hanya mengharuskan anda menambah dan merubah beberapa kode di template anda. 
<div style="font-family: Arial, Geneva, sans-serif; font-size: small; margin: 0px; padding: 0px;">
 </div>
<div style="font-family: Arial, Geneva, sans-serif; margin: 0px; padding: 0px;">
<h4 style="font-size: 18px; margin: 0px 0px 0.5em; padding: 0px;">
Cara Memasang Breadcrumbs SEO Friendly di Blog</h4>
<ul style="background-color: white; font-size: small; list-style-image: initial; list-style-position: outside; margin: 1.5em 0px 1.5em 3em; padding: 0px; text-align: justify;">
<li style="margin: 0.5em 0px; padding: 0px;">Pertama login ke <a href="http://newbanie.blogspot.com/" style="-webkit-transition: all 0.5s; background-color: transparent; color: #0099cc; margin: 0px; outline: none; padding: 0px; text-decoration: none; transition: all 0.5s;" target="_blank">blogger</a></li>
<li style="margin: 0.5em 0px; padding: 0px;">Di halaman dashboard pilih menu TEMPLATE Lalu Edit HTML</li>
<li style="margin: 0.5em 0px; padding: 0px;">Backup terlebih dahulu template anda untuk menghindari hal hal buruk yang mungkin terjadi </li>
<li style="margin: 0.5em 0px; padding: 0px;">Cari dan  Letakan kode dibawah ini diatas kode ]]></b:skin (untuk mempermudah pencarian gunakan Ctrl+F)</li>
</ul>
<blockquote class="tr_bq" style="background-color: white; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 4px; font-style: italic; margin: 1em 20px; padding: 1em; quotes: none; text-align: justify;">
.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:90%; line-height: 1.4em; border-bottom:3px double #eee;}</blockquote>
<ul style="background-color: white; font-family: Arial, serif; font-size: 15px; line-height: 24px; list-style-image: initial; list-style-position: outside; margin: 1.5em 0px 1.5em 3em; padding: 0px; text-align: justify;">
<li style="margin: 0.5em 0px; padding: 0px;">Nah setelah selesai cari kode ini:</li>
</ul>
<blockquote class="tr_bq" style="background-color: white; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 4px; font-style: italic; margin: 1em 20px; padding: 1em; quotes: none; text-align: justify;">
<b:includable id='main' var='top'></blockquote>
<ul style="background-color: white; font-family: Arial, serif; font-size: 15px; line-height: 24px; list-style-image: initial; list-style-position: outside; margin: 1.5em 0px 1.5em 3em; padding: 0px; text-align: justify;">
<li style="margin: 0.5em 0px; padding: 0px;"> Lalu ganti kode tersebut dengan kode dibawah ini:</li>
</ul>
<blockquote class="tr_bq" style="background-color: #f8f8f8; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 4px; font-size: small; font-style: italic; margin: 1.5em 2em; padding: 1em; quotes: none;">
<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <div class='breadcrumbs'><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &#187; <data:blog.pageName/></div> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'>  <b:loop values='data:posts' var='post'> <b:if cond='data:post.labels'> <div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'> <a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a> <b:loop values='data:post.labels' var='label'> &#187; <a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a> </b:loop> &#187; <data:post.title/> </div> <b:else/> <div class='breadcrumbs'><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &#187; Unlabelled &#187; <data:post.title/></div> </b:if> </b:loop> <b:else/> <b:if cond='data:blog.pageType == &quot;archive&quot;'>  <div class='breadcrumbs'> <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/> </div> <b:else/> <b:if cond='data:blog.pageType == &quot;index&quot;'> <div class='breadcrumbs'> <b:if cond='data:blog.pageName == &quot;&quot;'> <a expr:href='data:blog.homepageUrl'>Home</a> &#187; All posts <b:else/> <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Posts filed under <data:blog.pageName/> </b:if> </div> </b:if> </b:if> </b:if> </b:if> </b:if> </b:includable> <b:includable id='main' var='top'> <b:include data='posts' name='breadcrumb'/></blockquote>
 <ul style="background-color: white; font-family: Arial, serif; font-size: 15px; line-height: 24px; list-style-image: initial; list-style-position: outside; margin: 1.5em 0px 1.5em 3em; padding: 0px; text-align: justify;">
<li style="margin: 0.5em 0px; padding: 0px;">Jika sudah selesai maka langsung Simpan template anda.</li>
</ul>
</div>
<div style="font-family: Arial, Geneva, sans-serif; font-size: small; margin: 0px; padding: 0px;">
Catatan : OPSIONAL</div>
<div style="font-family: Arial, Geneva, sans-serif; font-size: small; margin: 0px; padding: 0px;">
 </div>
<div style="font-family: Arial, Geneva, sans-serif; font-size: small; margin: 0px; padding: 0px;">
Apabila sobat sudah memiliki atau memasang breadcrumb di blognya silakan cari kode</div>
<blockquote class="tr_bq" style="background-color: #f8f8f8; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 4px; font-family: Arial, Geneva, sans-serif; font-size: small; font-style: italic; margin: 1.5em 2em; padding: 1em; quotes: none;">
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'> <a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a> <b:loop values='data:post.labels' var='label'> &#187; <a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a> </blockquote>
 Dan ganti dengan 
<blockquote class="tr_bq" style="background-color: #f8f8f8; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 4px; font-family: Arial, Geneva, sans-serif; font-size: small; font-style: italic; margin: 1.5em 2em; padding: 1em; quotes: none;">
<div class='breadcrumbs'> <a expr:href='data:blog.homepageUrl' itemprop='url'>Home</a> <b:loop values='data:post.labels' var='label'> &#187; <a expr:href='data:label.url' itemprop='url'><data:label.name/></a> </blockquote>
 Selamat mencoba :)) Sumber Dari: <a href="http://newbanie.blogspot.com/2014/01/memasang-breadcrumb-seo-valid-html-blog-cepat-terindex-google.html#ixzz2pWDoAlh0" style="-webkit-transition: all 0.5s; color: #003399; margin: 0px; outline: none; padding: 0px; text-decoration: none; transition: all 0.5s;">http://newbanie.blogspot.com/2014/01/memasang-breadcrumb-seo-valid-html-blog-cepat-terindex-google.html#ixzz2pWDoAlh0</a>

Kalau dulu kita sudah membahas tentang Cara memasang meta tag seo friendly maka kali ini kita akan membahas tentang Cara Memasang/Membua...

02:33 +

Mengenal Pre Tag pada HTML

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5hAJr2XbuyK3EfioJQIqONxKxq7ciZqqA4170lr95xKteCKX7xKe6nHKG_dGhaXeqYyNl2OfNlYoX7rBokbnxhvTJd_0Sn8XeU2CAYPOS2mvGi9HYpLNhJNYOhaO4z-DfGJgTtCHmU8I/s1600/pre-tag.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Mengenal Pre Tag pada HTML" border="0" height="176" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5hAJr2XbuyK3EfioJQIqONxKxq7ciZqqA4170lr95xKteCKX7xKe6nHKG_dGhaXeqYyNl2OfNlYoX7rBokbnxhvTJd_0Sn8XeU2CAYPOS2mvGi9HYpLNhJNYOhaO4z-DfGJgTtCHmU8I/s320/pre-tag.png" title="Mengenal Pre Tag pada HTML" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
 </div>
M-S Blog || Pre Tag - Tag HTML merupakan dasar dari dokumen HTML, dan ini referensi tag HTML akan membantu Anda memahami baik umum dan tidak umum tag HTML dan elemen. Ada ratusan tag HTML, dan jika Anda belajar banyak dari mereka Anda akan lebih efektif dalam membangun halaman web Anda. Situs ini menawarkan ensiklopedi perintah HTML dan bagaimana menggunakannya. 
 
<blockquote style="background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxTasWeEK4JmwfJaany-pn3fl7XLZfgryXY8cVGePi0IgWUWAU3gxLKU27GkhNdy44fpXWUt_lClfCA4k8aRygxGzQy0RxfbyHxobACn29qoQj_dWf9w3kElydkYOVCU5E3VHouZhpFvE/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-family: Georgia, serif; font-size: 15px; font-style: italic; line-height: 1.45; margin: 0.25em 0px; padding: 15px 20px 15px 50px;">
PRE artinya pre-formatted atau secara mudahnya, apabila teks ditulis dalam tag <code style="color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;">pre</code> maka hasilnya akan sama dengan apa yang kita tulis, baik dalam jarak (white space, line break atau tab.</blockquote>
 
Apabila pada penulisan menggunakan mode HTML, kemudian membuat spasi yang jauh, maka hasilnya akan tetap seperti biasa. Berbeda dengan tag <code style="background-color: white; color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 23.390625px;">pre</code>, spasi akan tetap. 
 
Untuk lebih memahaminya coba sobat copy kode ini pada postingan (mode HTML). <img alt="html" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeI4v4V3fIce3RYExp9IONhJlBV9b9fjzgdXm7naMQ9_pLLq6mN-srLXK3Kv3DS5pETb-4LVJD2oi1lE-VSYpEnUx9-hn-CGIJmmkyfPkxM2GmWdele8rNdNpfYfSOkfu9NTmL5fmQ09o/s1600/compose-html.png" style="background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-VsgTMW64U57rqBp7_fLI1hChny6eP68uPTR05Zhs7aDzp2a3OsmTyeqKYLND3QN6BQL7L4G-yZpbXrZm8-cI5vxxdFUCZtcvDXdRpzlpgVC1LkcdDOdaBvQbvqOzrOn3nYPoDobOOw0/s1600/preloader.gif); background-position: 50% 50%; background-repeat: no-repeat no-repeat; border: none; box-shadow: none; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; height: auto; line-height: 23.390625px; margin-right: 10px; max-width: 98%; padding: 0px; page-break-after: always; vertical-align: middle; width: auto;" /> 
 
<pre style="background-color: #2f3741; border-left-color: rgb(64, 98, 126); border-left-style: solid; border-left-width: 4px; color: #839496; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.4em; padding: 0.8em 1em; position: relative; white-space: pre-wrap; word-wrap: normal;"><code class="xml" style="background-image: none !important; border: none !important; color: #a3a49a; display: block; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; padding: 0px !important;"><pre>
ini adalah contoh
 tag pre
 coba tulis
 seperti
 ini di
blog sobat
</pre>

<p>
ini adalah contoh
 tag pre
 coba tulis
 seperti
 ini di
blog sobat
</pre></code></pre>
 
kemudian lihat hasilnya pada mode Compose, maka akan ada perbedaan yang mencolok antara keduanya. Dengan menggunakan tag <code style="background-color: white; color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 23.390625px;">pre</code>, spasi akan dipertahankan, berbeda dengan penggunaan tag <code style="background-color: white; color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 23.390625px;">p</code> hasilnya akan lurus atau berjejer ke bawah. 
 
<h3 style="background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5XYeZbpH_b7Yoe-6uOjwn3kzW3akloWbrrvh9AaR7rfGhrQcuJFomhVq-KAIbIX7aQBOku6WeJ20w2aHMcqZcEh_dgtGu_r3271ddU7Jkj-nYNz540enjS7r8iU4yEf947pypY00-eh0/s1600/bottom-line.gif); background-position: 0% 100%; background-repeat: no-repeat no-repeat; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 21px; font-weight: 400; line-height: 23.390625px; margin: 5px 0px; padding-bottom: 12px;">
<code style="color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;">pre</code> dan <code style="color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;">blockquote</code></h3>
 
Banyak yang menggunakan <code style="background-color: white; color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 23.390625px;">blockquote</code> untuk berbagi kode. Untuk menjawab pertanyaan "Mana yang lebih baik untuk berbagi kode? <code style="color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;">blockquote</code> atau <code style="color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;">pre</code>?" Sebelum melangkah pada jawaban, silahkan simak pengertian <code style="background-color: white; color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 23.390625px;">blockquote</code>. 
 
<blockquote style="background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxTasWeEK4JmwfJaany-pn3fl7XLZfgryXY8cVGePi0IgWUWAU3gxLKU27GkhNdy44fpXWUt_lClfCA4k8aRygxGzQy0RxfbyHxobACn29qoQj_dWf9w3kElydkYOVCU5E3VHouZhpFvE/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-family: Georgia, serif; font-size: 15px; font-style: italic; line-height: 1.45; margin: 0.25em 0px; padding: 15px 20px 15px 50px;">
Blockquote adalah kutipan penting dan menonjol dari tulisan lainnya, agar tidak terlewatkan oleh pembaca. Contohnya ini.. sobat akan lebih tertarik pada paragraf ini, daripada di atasnya.</blockquote>
 
Kalau melihat pengertian <code style="background-color: white; color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 23.390625px;">blockquote</code>, tentunya kurang pas untuk berbagi kode, secara bahasa pun sudah dimengeri<code style="background-color: white; color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 23.390625px;">blockquote</code> merupakan 'blok kutipan'. Menurut saya sah2 saja menggunakan <code style="background-color: white; color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 23.390625px;">blockquote</code> sebagai tempat kode. 
 
Tapi kalau dibandingkan, lebih baik menggunakan tag <code style="background-color: white; color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 23.390625px;">pre</code> daripada <code style="background-color: white; color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 23.390625px;">blockquote</code> untuk kode. Berikut ini kelebihan tag<code style="background-color: white; color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 23.390625px;">pre</code> dibanding <code style="background-color: white; color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 23.390625px;">blockquote</code> : 
 
1. Struktur HTML lebih mudah difahami, lihat gambar : 
 
<div style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px; text-align: center;">
<img alt="pre dan blockquote" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG0aIjMyQslnxl9m-2kIHCnSn1va2LJlbgw0tN0TD8gK9Hcx4YNs_xrjSdTyxl2R0rk-9206UC6lKoOpdFPp0Te4EwSgURZdEOzSMCuf0-JZ3ce0LmWiFO2n2W2uml8LzW23fPiHklR40/s1600/pre-dan-blockquote.png" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-VsgTMW64U57rqBp7_fLI1hChny6eP68uPTR05Zhs7aDzp2a3OsmTyeqKYLND3QN6BQL7L4G-yZpbXrZm8-cI5vxxdFUCZtcvDXdRpzlpgVC1LkcdDOdaBvQbvqOzrOn3nYPoDobOOw0/s1600/preloader.gif); background-position: 50% 50%; background-repeat: no-repeat no-repeat; border: 1px solid rgb(177, 177, 177); box-shadow: rgb(170, 170, 170) 0px 0px 5px; height: auto; margin-right: 10px; max-width: 98%; padding: 0px; page-break-after: always; width: auto;" title="Mengenal Pre Tag pada HTML" /></div>
 
Lihat yang saya tandai dengan garis merah, jelas mana pembuka dan penutup. Sobat akan melihat susunan otomatis apabila menulis kode menggunakan Notepad++ atau Macromedia DreamWeaver. Bandingkan dengan gambar dibawahnya yang menggunakan <code style="background-color: white; color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 23.390625px;">blockquote</code>, rada susah untuk memahami struktur htmlnya. 
 
2. Standar huruf menggunakan monospace. 
 
Artinya, tanpa CSS pun tag <code style="background-color: white; color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 23.390625px;">pre</code> akan mempunya hurup monospace, dimana hurup 'W' akan sama dengan huruf 's' atau lainnya dalam segi ukuran. lebih jelasnya baca <a href="http://webdesign.about.com/od/fonts/g/bldefmonospace.htm" rel="nofollow" style="background-color: white; color: #21afa4; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px; text-decoration: none;" target="_blank">disini</a>. 
 
3. Bisa disisipi SyntaxHighlighter (Kode warna warni). 
 
Pewarnaan kode ini, bukan hanya mengejar nilai estetika (enak dilihat), tapi dengan pembedaan warna akan mudah memahami, mana JavaScript, mana CSS, mana HTML, mana tag pembuka, penutup, command, string, dll. 
 
Mungkin masih banyak kelebihan lainnya, silahkan bisa sobat cari dan temukan. 
 
<h4 style="background-color: white; color: #4a4a4a; font-family: Oswald, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 23.390625px; margin: 0px 0px 10px; padding: 0px 0px 12px; text-transform: uppercase;">
BAGAIMANA CARA MENULIS KODE DENGAN TAG PRE?</h4>
Untuk penulisan standar seperti ini  
 
<pre style="background-color: #2f3741; border-left-color: rgb(64, 98, 126); border-left-style: solid; border-left-width: 4px; color: #839496; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.4em; padding: 0.8em 1em; position: relative; white-space: pre-wrap; word-wrap: normal;"><code class="xml" style="background-image: none !important; border: none !important; color: #a3a49a; display: block; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; padding: 0px !important;"><pre>
isi kode
</pre></code></pre>
 
apabila menggunakan syntaxhighlighter, ada beberapa tambahan seperti : 
 
<pre style="background-color: #2f3741; border-left-color: rgb(64, 98, 126); border-left-style: solid; border-left-width: 4px; color: #839496; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.4em; padding: 0.8em 1em; position: relative; white-space: pre-wrap; word-wrap: normal;"><code class="xml" style="background-image: none !important; border: none !important; color: #a3a49a; display: block; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; padding: 0px !important;"><pre><code>
isi kode
</code></pre>

atau

dan lain-lain</code></pre>
 
<h4 style="background-color: white; color: #4a4a4a; font-family: Oswald, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 23.390625px; margin: 0px 0px 10px; padding: 0px 0px 12px; text-transform: uppercase;">
APABILA INGIN MENGGUNAKAN SYNTAXHIGHLIGHTER, MANA TUTORIALNYA?</h4>
Di blog ini saya sudah share 2 SyntaxHighlighter berikut cara penulisannya, yaitu <a href="http://blog.kangismet.net/2013/05/prism-syntaxhighlighter-untuk-blogger.html" rel="nofollow" style="background-color: white; color: #21afa4; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px; text-decoration: none;" target="_blank">PRISM</a> dan <a href="http://blog.kangismet.net/2013/05/highlightjs-syntaxhighlighter-untuk.html" rel="nofollow" style="background-color: white; color: #21afa4; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px; text-decoration: none;" target="_blank">Highlihgt.js</a> 
 
Mana yang bagus antara keduanya? 
 
Dua-duanya bagus, kalau kecepatan PRISM lebih cepat loadnya dibanding Highlight.js dari Software Maniac. Saya pribadi menggunakan Highlight.js supaya bisa digunakan pada kolom komentar. 
 
<h3 style="background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5XYeZbpH_b7Yoe-6uOjwn3kzW3akloWbrrvh9AaR7rfGhrQcuJFomhVq-KAIbIX7aQBOku6WeJ20w2aHMcqZcEh_dgtGu_r3271ddU7Jkj-nYNz540enjS7r8iU4yEf947pypY00-eh0/s1600/bottom-line.gif); background-position: 0% 100%; background-repeat: no-repeat no-repeat; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 21px; font-weight: 400; line-height: 23.390625px; margin: 5px 0px; padding-bottom: 12px;">
Tag <code style="color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;">pre</code> Details</h3>
 
1. Browser Support : 
<ul style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;">
<li>Netscape 2, 3, 4, 6, 7 dst</li>
<li>Chrome 1 dst</li>
<li>Firefox 1 dst</li>
<li>Internet Explorer 2, 3, 4, 5, 6 dst</li>
<li>Opera 3, 4, 5, 6, 7, 8 dst</li>
<li>Safari 1 dst</li>
<li>WebTV / MSNTV</li>
<li>AvantGo Palm OS</li>
<li>AvantGo Windows CE</li>
<li>HTML 3.2, 4.0</li>
<li>XHTML 1.0</li>
<li>XHTML Text Module, XHTML Legacy Module</li>
</ul>
 
2. Atribut 
<ul style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;">
<li>align (optional)</li>
<li>class (optional)</li>
<li>dir (optional)</li>
<li>id (optional)</li>
<li>lang (optional)</li>
<li>onclick (optional)</li>
<li>ondblclick (optional)</li>
<li>onkeydown (optional)</li>
<li>onkeypress (optional)</li>
<li>onkeyup (optional)</li>
<li>onmousedown (optional)</li>
<li>onmousemove (optional)</li>
<li>onmouseout (optional)</li>
<li>onmouseover (optional)</li>
<li>onmouseup (optional)</li>
<li>style (optional)</li>
<li>title (optional)</li>
</ul>
 
3. Contents: 
 
Teks. Beberapa tag yang valid pada tag <code style="background-color: white; color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 23.390625px;">pre</code> tag:  
a, abbr, acronym, applet, b, basefont, bdo, big, br, button, cite, code, dfn, em, font, i, iframe, img, input, kbd, label, map, object, q, s, samp, script, select, small, span, strike, strong, sub, sup, textarea, tt, u, var 
 
4. Valid Context : 
 
blockquote, body, button, center, dd, div, fieldset, form, iframe, li, noframes, noscript, object, td, th. 
 
Selengkapnya : http://blog.kangismet.net/2013/10/mengenal-tag-pre.html</div>

M-S Blog || Pre Tag - Tag HTML merupakan dasar dari dokumen HTML, dan ini referensi tag HTML akan membantu Anda memahami baik umum dan...

07:50 +

Perbedaan Antara target="new" dan target="_blank"

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv7SbAtQZBNiVtlm2yQqYMFaCpg5VvExmkFVnkm00tbfReTHs1kprNGjI76B2ZJYK4ER9kOsIXq8rCLhMC-lRz35RUxFhFl8ucEXZlFhc61oKR1tJKa6PG8mBd9W2SEo0dy7cz7EGEOCw/s1600/Very-Basic-Link-icon.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Perbedaan Antara target="new" dan target="_blank"" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv7SbAtQZBNiVtlm2yQqYMFaCpg5VvExmkFVnkm00tbfReTHs1kprNGjI76B2ZJYK4ER9kOsIXq8rCLhMC-lRz35RUxFhFl8ucEXZlFhc61oKR1tJKa6PG8mBd9W2SEo0dy7cz7EGEOCw/s320/Very-Basic-Link-icon.png" title="Perbedaan Antara target="new" dan target="_blank"" width="320" /></a></div>
 
 
M-S Blog || Perbedaan Antara target="new" dan target="_blank", Dalam penulisan hyperlink (link) supaya terbuka di tab baru, anda perlu menambahkan kode tertentu. Ada tiga kode alternatif yang bisa anda tambahkan yaitu: 
<pre style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; color: #839496; 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;">target="new"</pre>
atau 
<pre style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; color: #839496; 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;">target="_blank"</pre>
atau 
<pre style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; color: #839496; 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;">target="apa-pun-yang-anda-tulis"</pre>
 Saat ini saya akan menjelaskan perbedaan antara target="new" dan target="_blank", karena kode terakhir target="apapun-yg-anda-tulis",  sebagai contoh anda menulis target="tabbaru" atau bahkan asal tulis seperti  target="grhkjugrwpjsg", walaupun tetap akan terbuka pada tab baru, tetapi tidak dianjurkan. Apabila kita menggunakan target="_blank" maka semua link yang menggunakan kode ini akan terbuka di tab atau window baru. Sedangkan apabila menggunakan target="new" atau target="apapun-yg-anda-tulis", ketika kita meng-klik pertama, akan terbuka di window baru. Tetapi apabila kita klik lagi dengan kode yang sama, maka akan terbuka di tab/window yang telah kita buka tadi. Detail nya seperti ini, sebagai contoh, apabila ada 5 link menggunakan target="_blank", dan semua link kita klik, maka akan terbuka 5 window atau tab. Sedangkan apabila ada 5 link menggunakan target="new" atau target="apapun-yg-anda-tulis", pada klik pertama, akan terbuka hanya satu window atau tab baru. Apabila 4 link yang lain kita klik, maka tidak akan terbuka tab baru, dan URL akan terbuka di tab yang pertama kita klik. Supaya lebih jelas, ini contoh link dengan target="_blank" <a href="http://masholeh.web.id/">Masholeh</a> 
 ini masih menggunakan target="_blank"<a href="http://masholeh.web.id/">Masholeh</a> ini menggunakan target="new"<a href="http://masholeh.web.id/">Masholeh</a> ini masih menggunakan target="new"<a href="http://masholeh.web.id/">Masholeh</a><a href="http://masholeh.web.id/"> </a> ini menggunakan target="abcdefgh"<a href="http://masholeh.web.id/">Masholeh</a> ini masih menggunakan target="buka-di-window-baru"<a href="http://masholeh.web.id/">Masholeh</a> Gimana sob, udah jelas <a href="http://blog.kangismet.net/2011/11/perbedaan-antara-targetnew-dan.html" style="color: #21afa4; font-size: 14px; line-height: 22.390625px; text-decoration: none;">perbedaan antara target="new" dan target="_blank"</a>? apabila ada saran atau pertanyaan, silahkan diisi kolom komentarnya.</div>

M-S Blog || Perbedaan Antara target="new" dan target="_blank" , Dalam penulisan hyperlink (link) supaya terbuka...

05:58 +

Download Ebook tutorial HTML + Latihan Project untuk Pemula

<div dir="ltr" style="text-align: left;" trbidi="on">
M-S Blog || <a href="http://www.muhammad-sholeh.info/2013/09/download-ebook-tutorial-html-latian.html">Download Ebook tutorial HTML + Latihan Project untuk Pemula</a>. Apakah anda pengguna lama di internet ? pastinya anda sudah tau yang namanya HTML. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEhYI9-8qLHXKZLNHQ94xAs0eT_EoiaZVb1PaMA8jgV5JHrQti8CTN-DsJx-EteBukihv4bK7PShbP314Js_pSIXn3RixuJJtSaAph-DV-OwxKTRniIFBxccrEuD1_zvZjP333M5FWjkc/s1600/sitepoint-html5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Download Ebook tutorial HTML + Latihan Project untuk Pemula" border="0" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEhYI9-8qLHXKZLNHQ94xAs0eT_EoiaZVb1PaMA8jgV5JHrQti8CTN-DsJx-EteBukihv4bK7PShbP314Js_pSIXn3RixuJJtSaAph-DV-OwxKTRniIFBxccrEuD1_zvZjP333M5FWjkc/s320/sitepoint-html5.jpg" title="Download Ebook tutorial HTML + Latihan Project untuk Pemula" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
 </div>
 Untuk pemula, saya akan shar Download Ebook tutorial HTML + Latihan Project untuk Pemula, ebook ini berisikan dasar-dasar dalam pemrogramman web dengan HTMLdan disertai latian project yang dapat membantu memudahkan anda dalam belajar. 
  <a href="http://www.mediafire.com/download/l1bxjt1tc6chxm9/HTML5.rar">Download Ebook tutorial HTML + Latian Project untuk Pemula</a> (1.06MB) </div>

M-S Blog || Download Ebook tutorial HTML + Latihan Project untuk Pemula . Apakah anda pengguna lama di internet ? pastinya anda sudah ta...

15:32 +

Belajar Mengenal Arti kode HTML dan Fungsinya untuk Pemula

<div dir="ltr" style="text-align: left;" trbidi="on">
M-S Blog || <a href="http://www.muhammad-sholeh.info/2013/09/belajar-mengenal-arti-kode-html-dan.html">Belajar Mengenal Arti kode HTML dan Fungsinya untuk Pemula</a> | Ketika sobat menulis artikel yang di dalamnya perlu kode khusus yaitu kode HTML blog, mungkin bila bagi seorang pemula/newbie pasti akan merasa kesulitan bila mendapat kode seperti itu.namun jika anda sudah berpengalaman/sudah tau tentang kode kode HTML pasti terasa sudah merasa gampang dan pasti akan meremehkan artikel 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/AVvXsEh18yFGNMHus5XgTTe6or0mMDSopmYdjAL7QrrSkzIpJRlahncZmD55gDMFmpqSkcFczZxKtmF6Jz1kUj5fJQiR0-sLRrMhHZ1nonUsMc8tqrf0iIPF0gpSuv9-iys9GoOwgtkb2OCFVLg/s1600/images.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh18yFGNMHus5XgTTe6or0mMDSopmYdjAL7QrrSkzIpJRlahncZmD55gDMFmpqSkcFczZxKtmF6Jz1kUj5fJQiR0-sLRrMhHZ1nonUsMc8tqrf0iIPF0gpSuv9-iys9GoOwgtkb2OCFVLg/s1600/images.jpg" /></a></div>
<div class="separator" style="clear: both; margin: 0px; padding: 0px; text-align: center;">
 </div>
 
karena tidak sedikit pendatang baru merasakan kesulitan dalam menulis dengan kode HTML maka saya sedikit informasi kan beberapa kode HTML yang biasa digunakan untuk keperluan menulis.. 
<div class="separator" style="clear: both; margin: 0px; padding: 0px;">
 </div>
<div style="background-color: #6981db; border: 1px groove rgb(255, 255, 255); margin: 0px; padding: 5px; width: auto;">
<div style="margin: 0px; padding: 0px; text-align: center;">
<div style="margin: 0px; padding: 0px; text-align: left;">
KODE TEXT MIRING</div>
</div>
</div>
 
 text anda 
 
Hasilnya :      text anda 
 
<div style="background-color: #6981db; border: 1px groove rgb(255, 255, 255); margin: 0px; padding: 5px; width: auto;">
<div style="margin: 0px; padding: 0px; text-align: center;">
<div style="margin: 0px; padding: 0px; text-align: left;">
KODE TEXT CORET</div>
</div>
</div>
 
<s> text anda </s> 
 Hasilnya :    <strike style="margin: 0px; padding: 0px;">text anda</strike> 
<strike style="margin: 0px; padding: 0px;"> </strike>
<div style="background-color: #6981db; border: 1px groove rgb(255, 255, 255); margin: 0px; padding: 5px; width: auto;">
<div style="margin: 0px; padding: 0px; text-align: center;">
<div style="margin: 0px; padding: 0px; text-align: left;">
KODE TEXT GARIS BAWAH</div>
</div>
</div>
    
 text anda 
<div style="margin: 0px; padding: 0px;">
 </div>
Hasilnya :    text anda 
 
<div style="background-color: #6981db; border: 1px groove rgb(255, 255, 255); margin: 0px; padding: 5px; width: auto;">
<div style="margin: 0px; padding: 0px; text-align: center;">
<div style="margin: 0px; padding: 0px; text-align: left;">
KODE GARIS BARU</div>
</div>
</div>
 
 text anda 
<div style="margin: 0px; padding: 0px;">
 </div>
Hasilnya : 
<div style="margin: 0px; padding: 0px;">
text anda (spaci kebawah) 
 
<div style="background-color: #6981db; border: 1px groove rgb(255, 255, 255); margin: 0px; padding: 5px; width: auto;">
<div style="margin: 0px; padding: 0px; text-align: center;">
<div style="margin: 0px; padding: 0px; text-align: left;">
KODE RATA TENGAH</div>
</div>
</div>
 
<center> text anda </center> 
<div style="margin: 0px; padding: 0px;">
 </div>
Hasilnya : 
<div style="margin: 0px; padding: 0px; text-align: center;">
text anda</div>
 
<div style="background-color: #6981db; border: 1px groove rgb(255, 255, 255); margin: 0px; padding: 5px; width: auto;">
<div style="margin: 0px; padding: 0px; text-align: center;">
<div style="margin: 0px; padding: 0px; text-align: left;">
KODE RATA KIRI </div>
</div>
</div>
<div style="margin: 0px; padding: 0px;">
 </div>
 text anda 
<div style="margin: 0px; padding: 0px;">
 </div>
Hasilnya :    text anda 
 
 
<div style="background-color: #6981db; border: 1px groove rgb(255, 255, 255); margin: 0px; padding: 5px; width: auto;">
<div style="margin: 0px; padding: 0px; text-align: center;">
<div style="margin: 0px; padding: 0px; text-align: left;">
KODE RATA KANAN</div>
</div>
</div>
 
 text anda 
<div style="margin: 0px; padding: 0px;">
 </div>
Hasilnya : 
<div style="margin: 0px; padding: 0px; text-align: right;">
<div style="margin: 0px; padding: 0px; text-align: left;">
                                                                                                                                                    text anda</div>
</div>
<div style="margin: 0px; padding: 0px; text-align: right;">
<div style="margin: 0px; padding: 0px; text-align: left;">
 </div>
</div>
 
<div style="background-color: #6981db; border: 1px groove rgb(255, 255, 255); margin: 0px; padding: 5px; width: auto;">
<div style="margin: 0px; padding: 0px; text-align: center;">
<div style="margin: 0px; padding: 0px; text-align: left;">
KODE TEXT BESAR  </div>
</div>
</div>
 
<big> text anda </big> 
<div style="margin: 0px; padding: 0px;">
 </div>
Hasilnya :    <big style="margin: 0px; padding: 0px;">text anda</big> 
<big style="margin: 0px; padding: 0px;"> </big>
<div style="background-color: #6981db; border: 1px groove rgb(255, 255, 255); margin: 0px; padding: 5px; width: auto;">
<div style="margin: 0px; padding: 0px; text-align: center;">
<div style="margin: 0px; padding: 0px; text-align: left;">
KODE WARNA TEXT</div>
</div>
</div>
 
 text anda 
<div style="margin: 0px; padding: 0px;">
 </div>
Hasilnya :    text anda 
 
<div style="background-color: #6981db; border: 1px groove rgb(255, 255, 255); margin: 0px; padding: 5px; width: auto;">
<div style="margin: 0px; padding: 0px; text-align: center;">
<div style="margin: 0px; padding: 0px; text-align: left;">
KODE UKURAN TEXT </div>
</div>
</div>
 
 text anda 
<div style="margin: 0px; padding: 0px;">
 </div>
Hasilnya :      text anda 
 
 
<div style="background-color: #6981db; border: 1px groove rgb(255, 255, 255); margin: 0px; padding: 5px; width: auto;">
<div style="margin: 0px; padding: 0px; text-align: center;">
<div style="margin: 0px; padding: 0px; text-align: left;">
KODE HURUF KECIL DI BAWAH</div>
</div>
</div>
 
 text anda 
<div style="margin: 0px; padding: 0px;">
 </div>
Hasilnya :     contohtext anda 
 
<div style="background-color: #6981db; border: 1px groove rgb(255, 255, 255); margin: 0px; padding: 5px; width: auto;">
<div style="margin: 0px; padding: 0px; text-align: center;">
<div style="margin: 0px; padding: 0px; text-align: left;">
KODE HURUF KECIL DI ATAS</div>
</div>
</div>
 
 text anda 
 
Haslinya :     contoh text anda  
 
<div style="background-color: #6981db; border: 1px groove rgb(255, 255, 255); margin: 0px; padding: 5px; width: auto;">
<div style="margin: 0px; padding: 0px; text-align: center;">
<div style="margin: 0px; padding: 0px; text-align: left;">
KODE HTML UNTUK SEBUAH LINK</div>
</div>
</div>
</div>
<div style="margin: 0px; padding: 0px;">
<a href="url tujuan anda">text anda<a/> 
<div style="margin: 0px; padding: 0px;">
 </div>
Contoh : 
       <a href="http://www.muhammad-sholeh.info/2013/09/belajar-mengenal-arti-kode-html-dan.html">Mengenal Arti kode HTML dan Fungsinya<a/> 
 
Hasilnya :     <a href="http://www.muhammad-sholeh.info/2013/09/belajar-mengenal-arti-kode-html-dan.html">Mengenal Arti kode HTML dan Fungsinya</a> 
 
 
<div style="background-color: #6981db; border: 1px groove rgb(255, 255, 255); margin: 0px; padding: 5px; width: auto;">
<div style="margin: 0px; padding: 0px; text-align: center;">
<div style="margin: 0px; padding: 0px; text-align: left;">
KODE LINK OPEN NEW TAB</div>
</div>
</div>
 
 
<a href="url tujuan anda" target="_blank">text anda<a/></div>
<div style="margin: 0px; padding: 0px;">
 </div>
Contoh : 
       <a href="http://muhammad-sholeh.info/" target="_blank">M-S Blog<a/> 
<div style="margin: 0px; padding: 0px;">
 </div>
Hasilnya :   <a href="http://muhammad-sholeh.info/">M-S Blog</a> 
 
 
<div style="background-color: #6981db; border: 1px groove rgb(255, 255, 255); margin: 0px; padding: 5px; width: auto;">
<div style="margin: 0px; padding: 0px; text-align: center;">
<div style="margin: 0px; padding: 0px; text-align: left;">
KODE LINK DENGAN TOOL TIP</div>
</div>
</div>
 
<a href="url anda" title="tool tip anda">text anda</a> 
 
Contoh : 
<div style="margin: 0px; padding: 0px;">
          <a href="http://www.muhammad-sholeh.info/2013/09/belajar-mengenal-arti-kode-html-dan.html" title="M-S Blog">Mengenal Arti kode HTML dan Fungsinya</a> 
 
Hasilnya :     <a href="http://www.muhammad-sholeh.info/2013/09/belajar-mengenal-arti-kode-html-dan.html">Mengenal Arti kode HTML dan Fungsinya</a> 
<div style="margin: 0px; padding: 0px;">
 
 
<div style="background-color: white; color: #555555; font-family: Arial, Geneva, sans-serif; font-size: 13px; line-height: 18.03125px; margin: 0px; padding: 0px; text-align: justify;">
 </div>
<div style="background-color: white; color: #555555; line-height: 18.03125px; margin: 0px; padding: 0px; text-align: justify;">
Semoga Bermanfaat............</div>
</div>
</div>
</div>

M-S Blog || Belajar Mengenal Arti kode HTML dan Fungsinya untuk Pemula | Ketika sobat menulis artikel yang di dalamnya perlu kode khusus...

18:21 +

Cara Membuat Blog Valid HTML5

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: left;">
M-S Blog || <a href="http://blog.kangismet.net/2013/08/cara-membuat-blog-valid-html5.html" style="color: #333333; text-decoration: none;">Cara Membuat Blog Valid HTML5</a> - Awalnya saya males belajar tentang HTML5 tapi mengikuti perkembangan zaman, akhirnya belajar juga HTML5. Jujur saya terkontaminasi oleh Bung Adhy Kompi Ajaib dan Kang Ismet  </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw9aEplCjJyJxN_Lxr7J4_JnmYtL3Z1d32QmPmYB4LR7tjV60-TIKqdq7QaPuYpbFd4Woq_4w4KqS5PIVoNmcg2i0_cgLql9D7Gn9yAso4JvKsZS3B0MOd8jOOlkVlDaz2QDth6VUTD40/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/AVvXsEiw9aEplCjJyJxN_Lxr7J4_JnmYtL3Z1d32QmPmYB4LR7tjV60-TIKqdq7QaPuYpbFd4Woq_4w4KqS5PIVoNmcg2i0_cgLql9D7Gn9yAso4JvKsZS3B0MOd8jOOlkVlDaz2QDth6VUTD40/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/AVvXsEg5XYeZbpH_b7Yoe-6uOjwn3kzW3akloWbrrvh9AaR7rfGhrQcuJFomhVq-KAIbIX7aQBOku6WeJ20w2aHMcqZcEh_dgtGu_r3271ddU7Jkj-nYNz540enjS7r8iU4yEf947pypY00-eh0/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/AVvXsEg5XYeZbpH_b7Yoe-6uOjwn3kzW3akloWbrrvh9AaR7rfGhrQcuJFomhVq-KAIbIX7aQBOku6WeJ20w2aHMcqZcEh_dgtGu_r3271ddU7Jkj-nYNz540enjS7r8iU4yEf947pypY00-eh0/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/AVvXsEgRwmN3uAd9T7bjmK7bA0frbCAEtk5cH5BHxYBeSP1QzQjyjH5jfT3i9m5pLGkYFk21DxZZqAuIoVt8C1LQTOxcnetCH28klF1a-5LigSLM7yfTCzbl60Nb-D3oZmqO5Iws1BxyhS_Lv2Y/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... 
 
Repost http://blog.kangismet.net/2013/08/cara-membuat-blog-valid-html5.html</div>

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

06:20 +

M-S Blog

M-S Blog

M-S Blog

Download Script Website Rumah Sakit Islam Klaten

Free Download Flat UI Pro Personal License PSD & HTML

Breadcrumb SEO Friendly Valid HTML

Mengenal Pre Tag pada HTML

Perbedaan Antara target="new" dan target="_blank"

Download Ebook tutorial HTML + Latihan Project untuk Pemula

Belajar Mengenal Arti kode HTML dan Fungsinya untuk Pemula

Cara Membuat Blog Valid HTML5

Popular Posts

Blog Archive