Ashamod: Blogging

List Icon Font Awesome Lengkap dan CSS Value Content

<div class="separator" style="clear: both; text-align: center;">
<a href="http://smartaddons.s3.amazonaws.com/images/blog/Joomla/yt-shortcode/font-awesome.png" style="margin-left: 1em; margin-right: 1em;"><img alt="List Icon Font Awesome Lengkap dan CSS Value Content" height="400" src="http://smartaddons.s3.amazonaws.com/images/blog/Joomla/yt-shortcode/font-awesome.png" title="List Icon Font Awesome Lengkap dan CSS Value Content" width="400" /></a></div>
Sekarang ashamod share List atau Daftar Icon Font Awesome lengkap dengan CSS Value Content. 
Sekedar berbagi pengetahuan Apa itu font awesome? - Font Awesome merupakan kumpulan icon dan  tombol yang berbasis font. yang artinya, ketika kalian membutuhkan ikon di blog, tidak lagi menggunakan gambar / image melainkan diganti dengan menggunakan Css Value Content dari Font Awesome itu sendiri, yang tentunya akan lebih mempercepat proses loading blog anda. 
Jika anda sudah jelas tentang apa itu Font Awesome, selanjutnya ashamod akan memberikan list lengkap icon Fon Awesome beserta Value Contentnya. Font Awesome icon bisa disisipkan dengan pseudo elemen :after dan juga :before. 
 
Untuk menambahkan icon Font Awesome pada pseudo elemen :before, tentunya kalian harus mengetahui value content dari icon tersebut. Contoh penggunaan : 
<blockquote class="tr_bq">
.element { 
    position: relative; 
} 
 
/*ganti conten value sesuai 
dengan icon yang diperlukan*/ 
 
.element:before { 
    content: "\f000"; 
    font-family: FontAwesome; 
    font-style: normal; 
    font-weight: normal; 
    text-decoration: inherit; 
/*--sesuaikan sebagai tambahan--*/ 
    color: #000; 
    font-size: 18px; 
    padding-right: 0.5em; 
    position: absolute; 
    top: 10px; 
    left: 0; 
}</blockquote>
 
Berikut ini list lengkap icon Font Awesome dan CSS value content 
<h3>
Icon Aplikasi Website</h3>
<hr />
<div id="font-awesome-list">
<ul class="font-group">
<li> icon-adjust "\f042"</li>
<li> icon-anchor "\f13d"</li>
<li> icon-asterisk "\f069"</li>
<li> icon-ban-circle "\f05e"</li>
<li> icon-bar-chart "\f080"</li>
<li> icon-barcode "\f02a"</li>
<li> icon-beaker "\f0c3"</li>
<li> icon-beer "\f0fc"</li>
<li> icon-bell "\f0a2"</li>
<li> icon-bell-alt "\f0f3"</li>
<li> icon-bolt "\f0e7"</li>
<li> icon-book "\f02d"</li>
<li> icon-bookmark "\f02e"</li>
<li> icon-bookmark-empty "\f097"</li>
<li> icon-briefcase "\f0b1"</li>
<li> icon-bullhorn "\f0a1"</li>
<li> icon-bullseye "\f140"</li>
<li> icon-calendar "\f073"</li>
<li> icon-calendar-empty "\f133"</li>
<li> icon-camera "\f030"</li>
<li> icon-camera-retro "\f083"</li>
<li> icon-certificate "\f0a3"</li>
<li> icon-check-empty "\f096"</li>
<li> icon-check-minus "\f147"</li>
<li> icon-check-sign "\f14a"</li>
<li> icon-check "\f046"</li>
<li> icon-circle "\f111"</li>
<li> icon-circle-blank "\f10c"</li>
<li> icon-cloud "\f0c2"</li>
<li> icon-cloud-download "\f0ed"</li>
<li> icon-cloud-upload "\f0ee"</li>
<li> icon-code "\f121"</li>
<li> icon-code-fork "\f126"</li>
<li> icon-coffee "\f0f4"</li>
<li> icon-cog "\f013"</li>
<li> icon-cogs "\f085"</li>
<li> icon-collapse-alt "\f117"</li>
<li> icon-comment "\f075"</li>
<li> icon-comments "\f086"</li>
<li> icon-comments-alt "\f0e6"</li>
<li> icon-credit-card "\f09d"</li>
<li> icon-crop "\f125"</li>
<li> icon-dashboard "\f0e4"</li>
<li> icon-desktop "\f108"</li>
<li> icon-download "\f01a"</li>
<li> icon-download-alt "\f019"</li>
<li> icon-edit "\f044"</li>
<li> icon-edit-sign "\f14b"</li>
<li> icon-ellipsis-horizontal "\f141"</li>
<li> icon-ellipsis-vertical "\f142"</li>
<li> icon-envelope "\f003"</li>
<li> icon-envelope-alt "\f0e0"</li>
<li> icon-eraser "\f12d"</li>
<li> icon-exchange "\f0ec"</li>
<li> icon-exclamation "\f12a"</li>
<li> icon-exclamation-sign "\f06a"</li>
<li> icon-expand-alt "\f116"</li>
<li> icon-external-link "\f08e"</li>
<li> icon-external-link-sign "\f14c"</li>
<li> icon-eye-open "\f06e"</li>
<li> icon-eye-close "\f070"</li>
<li> icon-facetime-video "\f03d"</li>
<li> icon-fighter-jet "\f0fb"</li>
<li> icon-film "\f008"</li>
<li> icon-filter "\f0b0"</li>
<li> icon-fire-extinguisher "\f134"</li>
<li> icon-fire "\f06d"</li>
<li> icon-flag-alt "\f11d"</li>
<li> icon-flag-checkered "\f11e"</li>
<li> icon-folder-close "\f07b"</li>
<li> icon-folder-open "\f07c"</li>
<li> icon-folder-close-alt "\f114"</li>
<li> icon-folder-open-alt "\f115"</li>
<li> icon-food "\f0f5"</li>
<li> icon-frown "\f119"</li>
<li> icon-gamepad "\f11b"</li>
<li> icon-gift "\f06b"</li>
<li> icon-glass "\f000"</li>
<li> icon-globe "\f0ac"</li>
<li> icon-group "\f0c0"</li>
<li> icon-hdd "\f0a0"</li>
<li> icon-headphones "\f025"</li>
<li> icon-heart-empty "\f08a"</li>
<li> icon-heart "\f004"</li>
<li> icon-home "\f015"</li>
<li> icon-inbox "\f01c"</li>
<li> icon-info-sign "\f05a"</li>
<li> icon-info "\f129"</li>
<li> icon-key "\f084"</li>
<li> icon-keyboard "\f11c"</li>
<li> icon-laptop "\f109"</li>
<li> icon-leaf "\f06c"</li>
<li> icon-legal "\f0e3"</li>
<li> icon-lemon "\f094"</li>
<li> icon-level-up "\f148"</li>
<li> icon-level-down "\f149"</li>
<li> icon-lightbulb "\f0eb"</li>
<li> icon-location-arrow "\f124"</li>
<li> icon-lock "\f023"</li>
<li> icon-magic "\f0d0"</li>
<li> icon-magnet "\f076"</li>
<li> icon-mail-reply "\f112"</li>
<li> icon-mail-reply-all "\f122"</li>
<li> icon-mail-forward "\ff064"</li>
<li> icon-map-marker "\f041"</li>
<li> icon-meh "\f11a"</li>
<li> icon-microphone "\f130"</li>
<li> icon-microphone-off "\f131"</li>
<li> icon-minus "\f068"</li>
<li> icon-minus-sign "\f056"</li>
<li> icon-minus-sign-alt "\f146"</li>
<li> icon-mobile-phone "\f10b"</li>
<li> icon-money "\f0d6"</li>
<li> icon-move "\f047"</li>
<li> icon-music "\f001"</li>
<li> icon-off "\f011"</li>
<li> icon-ok "\f00c"</li>
<li> icon-ok-sign "\f058"</li>
<li> icon-ok-circle "\f05d"</li>
<li> icon-pencil "\f040"</li>
<li> icon-phone "\f095"</li>
<li> icon-phone-sign "\f098"</li>
<li> icon-picture "\f03e"</li>
<li> icon-plane "\f072"</li>
<li> icon-google-plus-sign "\f0d4"</li>
<li> icon-google-plus "\f0d5"</li>
<li> icon-print "\f02f"</li>
<li> icon-pushpin "\f08d"</li>
<li> icon-puzzle-piece "\f12e"</li>
<li> icon-qrcode "\f029"</li>
<li> icon-question-sign "\f059"</li>
<li> icon-question "\f128"</li>
<li> icon-quote-left "\f10d"</li>
<li> icon-quote-right "\f10e"</li>
<li> icon-random "\f074"</li>
<li> icon-refresh "\f021"</li>
<li> icon-remove-sign "\f057"</li>
<li> icon-remove-circle "\f05c"</li>
<li> icon-remove "\f00d"</li>
<li> icon-reorder "\f0c9"</li>
<li> icon-reply "\f112"</li>
<li> icon-reply-all "\f122"</li>
<li> icon-resize-vertical "\f07d"</li>
<li> icon-resize-horizontal "\f07e"</li>
<li> icon-retweet "\f079"</li>
<li> icon-road "\f018"</li>
<li> icon-rocket "\f135"</li>
<li> rotate-left "\f0e2"</li>
<li> rotate-right "\f01e"</li>
<li> icon-rss "\f09e"</li>
<li> icon-rss-sign "\f143"</li>
<li> icon-screenshot "\f05b"</li>
<li> icon-search "\f002"</li>
<li> icon-share "\f045"</li>
<li> icon-share-alt "\f064"</li>
<li> icon-share-sign "\f14d"</li>
<li> icon-shield "\f132"</li>
<li> icon-shopping-cart "\f07a"</li>
<li> icon-sign-blank "\f0c8"</li>
<li> icon-signal "\f012"</li>
<li> icon-signin "\f090"</li>
<li> icon-signout "\f08b"</li>
<li> icon-sitemap "\f0e8"</li>
<li> icon-smile "\f118"</li>
<li> icon-sort "\f0dc"</li>
<li> icon-sort-down "\f0dd"</li>
<li> icon-sort-up "\f0de"</li>
<li> icon-spinner "\f110"</li>
<li> icon-star "\f005"</li>
<li> icon-star-empty "\f006"</li>
<li> icon-star-half-full "\f123"</li>
<li> icon-star-half-empty "\f123"</li>
<li> icon-suitcase "\f0f2"</li>
<li> icon-tablet "\f10a"</li>
<li> icon-tag "\f02b"</li>
<li> icon-tags "\f02c"</li>
<li> icon-tasks "\f0ae"</li>
<li> icon-terminal "\f120"</li>
<li> icon-thumbs-up "\f087"</li>
<li> icon-thumbs-down "\f088"</li>
<li> icon-ticket "\f145"</li>
<li> icon-time "\f017"</li>
<li> icon-tint "\f043"</li>
<li> icon-trash "\f014"</li>
<li> icon-trophy "\f091"</li>
<li> icon-truck "\f0d1"</li>
<li> icon-umbrella "\f0e9"</li>
<li> icon-unlock "\f09c"</li>
<li> icon-unlock-alt "\f13e"</li>
<li> icon-upload "\f01b"</li>
<li> icon-upload-alt "\f093"</li>
<li> icon-user-md "\f0f0"</li>
<li> icon-user "\f007"</li>
<li> icon-volume-off "\f026"</li>
<li> icon-volume-down "\f027"</li>
<li> icon-volume-up "\f028"</li>
<li> icon-warning-sign "\f071"</li>
<li> icon-wrench "\f0ad"</li>
<li> icon-zoom-in "\f00e"</li>
<li> icon-zoom-out "\f010"</li>
</ul>
</div>
<h3>
Icon Teks Editor</h3>
<hr />
<div id="font-awesome-list">
<ul class="font-group">
<li> icon-file "\f016"</li>
<li> icon-file-alt "\f0f6"</li>
<li> icon-cut "\f0c4"</li>
<li> icon-copy "\f0c5"</li>
<li> icon-paste "\f0ea"</li>
<li> icon-save "\f0c7"</li>
<li> icon-undo "\f0e2"</li>
<li> icon-repeat "\f01e"</li>
<li> icon-text-height "\f034"</li>
<li> icon-text-width "\f035"</li>
<li> icon-align-left "\f036"</li>
<li> icon-align-center "\f037"</li>
<li> icon-align-right "\f038"</li>
<li> icon-align-justify "\f039"</li>
<li> icon-indent-left "\f03b"</li>
<li> icon-indent-right "\f03c"</li>
<li> icon-font "\f031"</li>
<li> icon-bold "\f032"</li>
<li> icon-italic "\f033"</li>
<li> icon-strikethrough "\f0cc"</li>
<li> icon-underline "\f0cd"</li>
<li> icon-superscript "\f12b"</li>
<li> icon-subscript "\f12c"</li>
<li> icon-link "\f0c1"</li>
<li> icon-unlink "\f127"</li>
<li> icon-paper-clip "\f0c6"</li>
<li> icon-eraser "\f12d"</li>
<li> icon-columns "\f0db"</li>
<li> icon-table "\f0ce"</li>
<li> icon-th "\f00a"</li>
<li> icon-th-list "\f00b"</li>
<li> icon-th-large "\f009"</li>
<li> icon-list "\f03a"</li>
<li> icon-list-ul "\f0ca"</li>
<li> icon-list-ol "\f0cb"</li>
<li> icon-list-alt "\f022"</li>
</ul>
</div>
<h3>
Icon Penunjuk</h3>
<hr />
<div id="font-awesome-list">
<ul class="font-group">
<li> icon-angle-left "\f104"</li>
<li> icon-angle-right "\f105"</li>
<li> icon-angle-up "\f106"</li>
<li> icon-angle-down "\f107"</li>
<li> icon-arrow-left "\f060"</li>
<li> icon-arrow-right "\f061"</li>
<li> icon-arrow-up "\f062"</li>
<li> icon-arrow-down "\f063"</li>
<li> icon-caret-down "\f0d7"</li>
<li> icon-caret-up "\f0d8"</li>
<li> icon-caret-left "\f0d9"</li>
<li> icon-caret-right "\f0da"</li>
<li> icon-chevron-left "\f053"</li>
<li> icon-chevron-right "\f054"</li>
<li> icon-chevron-up "\f077"</li>
<li> icon-chevron-down "\f078"</li>
<li> icon-chevron-sign-left "\f137"</li>
<li> icon-chevron-sign-right "\f138"</li>
<li> icon-chevron-sign-up "\f139"</li>
<li> icon-chevron-sign-down "\f13a"</li>
<li> icon-circle-arrow-left "\f0a8"</li>
<li> icon-circle-arrow-right "\f0a9"</li>
<li> icon-circle-arrow-up "\f0aa"</li>
<li> icon-circle-arrow-down "\f0ab"</li>
<li> icon-double-angle-left "\f100"</li>
<li> icon-double-angle-right "\f101"</li>
<li> icon-double-angle-up "\f102"</li>
<li> icon-double-angle-down "\f103"</li>
<li> icon-hand-right "\f0a4"</li>
<li> icon-hand-left "\f0a5"</li>
<li> icon-hand-up "\f0a6"</li>
<li> icon-hand-down "\f0a7"</li>
</ul>
</div>
<h3>
Icon Video Player</h3>
<hr />
<div id="font-awesome-list">
<ul class="font-group">
<li> icon-play "\f04b"</li>
<li> icon-play-sign "\f144"</li>
<li> icon-play-circle "\f01d"</li>
<li> icon-pause "\f04c"</li>
<li> icon-stop "\f04d"</li>
<li> icon-eject "\f052"</li>
<li> icon-forward "\f04e"</li>
<li> icon-fast-forward "\f050"</li>
<li> icon-step-backward "\f048"</li>
<li> icon-step-forward "\f051"</li>
<li> icon-fullscreen "\f0b2"</li>
<li> icon-resize-full "\f065"</li>
<li> icon-resize-small "\f066"</li>
</ul>
</div>
<h3>
Icon Merk</h3>
<hr />
<div id="font-awesome-list">
<ul class="font-group">
<li> icon-css3 "\f13c"</li>
<li> icon-facebook-sign "\f082"</li>
<li> icon-facebook "\f09a"</li>
<li> icon-twitter-sign "\f081"</li>
<li> icon-twitter "\f099"</li>
<li> icon-github "\f09b"</li>
<li> icon-github-sign "\f092"</li>
<li> icon-html5 "\f13b"</li>
<li> icon-linkedin "\f0e1"</li>
<li> icon-linkedin-sign "\f08c"</li>
<li> icon-maxcdn "\f136"</li>
<li> icon-pinterest "\f0d2"</li>
<li> icon-pinterest-sign "\f0d3"</li>
<li> icon-google-plus "\f0d5"</li>
<li> icon-google-plus-sign "\f0d4"</li>
</ul>
</div>
<h3>
Icon Kedokteran</h3>
<hr />
<div id="font-awesome-list">
<ul class="font-group">
<li> icon-ambulance "\f0f9"</li>
<li> icon-beaker "\f0c3"</li>
<li> icon-h-sign "\f0fd"</li>
<li> icon-hospital "\f0f8"</li>
<li> icon-medkit "\f0fa"</li>
<li> icon-plus-sign-alt "\f0fe"</li>
<li> icon-stethoscope "\f0f1"</li>
<li> icon-user-md "\f0f0"</li>
</ul>
</div>
<div style="clear: both;">
</div>
 
Sekian tentang List Icon Font Awesome Lengkap dan CSS Value Content, semoga berguna...

List Icon Font Awesome Lengkap dan CSS Value Content

Sekarang ashamod share List atau Daftar Icon Font Awesome lengkap dengan CSS Value Content. Sekedar berbagi pengetahuan Apa itu font awes...

Cara Membuat Blog Valid HTML5

<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Blog Valid HTML5" height="320" src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" title="Blog Valid HTML5" width="320" /></a></div>
Sekarang ashamod share Tips Bagaimana Cara agar Blog valid HTML5. 
Pertama kita harus tahu tentang apa itu HTML5, dan bagaimana cara Agar blog bisa 100% Valid HTML5. 
ok langsung kita kepembahasan. 
 
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 class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1XhBordBVEf3wdA3UL0RSyODT46-a-UykPbmu2VcYNm9svkqEUfAwRHKtBf5fEtv7wZMHV9_3NrNtPn6o92cTR6EAG2f-5PrsvQve117VkunyvVMPaAK_Y8YdZCE2TzIHfcdT8MNqIx4/s1600/html5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Blog Valid HTML5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1XhBordBVEf3wdA3UL0RSyODT46-a-UykPbmu2VcYNm9svkqEUfAwRHKtBf5fEtv7wZMHV9_3NrNtPn6o92cTR6EAG2f-5PrsvQve117VkunyvVMPaAK_Y8YdZCE2TzIHfcdT8MNqIx4/s1600/html5.png" title="" /></a></div>
 
Perlukah web/blog valid HTML5? dari berbagai sumber yang terpercaya saya menemukan bahwa diantara keuntungan mevalidasi blog adalah : 
<ul>
<li>Membantu Search Engine meng-indeks dokumen website/blog lebih efektif.</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 dan tentu masih banyak lagi keuntungan lain dari validasi HTML ini.</li>
</ul>
<div>
Bagus dan Efektifkah validasi Blogspot untuk SEO? Ini juga 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 kalin tentang validasi untuk SEO.</div>
<div>
 </div>
<div>
Akan Lebih baik jika anda melakukan test validasi blog kamu terlebih dahulu. Validasi bisa dites <a href="http://html5.validator.nu/" rel="nofollow" target="_blank">Disini</a> atau <a href="http://validator.w3.org/" rel="nofollow" target="_blank">Disini</a></div>
<div>
 </div>
<div>
Cara Membuat Blog 100% Valid HTML5 
<hr />
 </div>
<div>
<div>
Langkah 1 : Backup template sebelum melakukan editing.</div>
<div>
Langkah 2 : Cari kode seperti ini : 
<blockquote class="tr_bq">
<?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></blockquote>
ganti dengan : 
<blockquote class="tr_bq">
<?xml version="1.0" encoding="UTF-8" ?> 
<!DOCTYPE html> 
<HTML> 
<head> 
<meta charset='utf-8'/></blockquote>
Langkah 3 : Ganti kode </html> dengan </HTML> (paling bawah di template) 
 
Langkah 4 : ganti kode ini : 
<blockquote class="tr_bq">
<b:include data='blog' name='all-head-content'/></blockquote>
dengan kode di bawah ini : 
<blockquote class="tr_bq">
<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></blockquote>
Langkah 5 : Ganti <b:skin><![CDATA[ dengan kode dibawah : 
<blockquote class="tr_bq">
<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></blockquote>
Langkah 6 : Hapus semua kode ini : 
<blockquote class="tr_bq">
<b:include name='quickedit'/></blockquote>
Setiap kali menambahkan widget baru, hapus kode di atas. 
 
Langkah 7 : Hapus semua kode ini (opsional) 
<blockquote class="tr_bq">
<a expr:name='data:post.id'/></blockquote>
Langkah 8 : hapus kode seperti ini : 
<blockquote class="tr_bq">
<b:include data='post' name='postQuickEdit'/></blockquote>
atau seperti ini : 
<blockquote class="tr_bq">
<b:includable id='postQuickEdit' var='post'> 
<b:if cond='data:post.editUrl'> 
 
<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> 
 
</b:if> 
</b:includable></blockquote>
Langkah 9 : Hapus kode dibawah ini (kalau ditemukan, kalau tidak ada, lewati saja) 
<blockquote class="tr_bq">
<div class='post-share-buttons goog-inline-block'>...sampai...</div></blockquote>
Langkah 10 : Ganti semua code & dengan &amp; 
 
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. 
 
Harap Diperhatikan (Penting) 
<hr />
 
Kemungkinan dengan langkah-langkah di atas, blog sobat belum valid. Supaya menjadi 100%, silahkan perhatikan beberapa hal dibawah ini : 
 
1. Selalu gunakan tag alt pada gambar, contoh : 
<blockquote class="tr_bq">
<img alt="HTML5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1XhBordBVEf3wdA3UL0RSyODT46-a-UykPbmu2VcYNm9svkqEUfAwRHKtBf5fEtv7wZMHV9_3NrNtPn6o92cTR6EAG2f-5PrsvQve117VkunyvVMPaAK_Y8YdZCE2TzIHfcdT8MNqIx4/s1600/html5.png" /></blockquote>
2. Jangan gunakan border="0" pada gambar, sebagai gantinya tambahkan kode : 
<blockquote class="tr_bq">
style="border:none"</blockquote>
atau CSS terpisah seperti 
<blockquote class="tr_bq">
img{border:none}</blockquote>
3. Pada iFrame, jangan menggunakan frameborder="0" atau allowtransparency:"true" scrolling="no", sebagai gantinya gunakan kode : 
<blockquote class="tr_bq">
style="border:none;overflow:hidden"</blockquote>
atau CSS terpisah seperti 
<blockquote class="tr_bq">
iframe{border:none;overflow:hidden}</blockquote>
4. Pada tag a jangan menggunakan tag name seperti : 
<blockquote class="tr_bq">
<a name='comment-form'></blockquote>
sebagai gantinya gunakan id seperti : 
<blockquote class="tr_bq">
<a href='#comment-form'></blockquote>
5. Jangan ada dua id pada template. 
 
 
6. Hapus kode <b:include name='quickedit'/> setiap menambah widget baru. 
 
Sekian tentang Cara Membuat Blog Valid HTML5, semoga berguna...</div>
</div>

Cara Membuat Blog Valid HTML5

Sekarang ashamod share Tips Bagaimana Cara agar Blog valid HTML5. Pertama kita harus tahu tentang apa itu HTML5, dan bagaimana cara Agar ...

Cara Membuat Widget Recent Comment Keren Gaya Massage Windows 8

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5tAiypuFYzWF-uvV6yRqdlv0EJAsKHHyHDEN3HXRo55YkU31UBsZ0vZfTHfRrNAj59YeJxcsuDUAsr9jNSmbkAaB7bAay40cwfLuusNV-KrsNHHP6kS-SSxzkrjoDyP7zluP35B6juhQ/s1600/komentar+windows+8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Widget Recent Comment Keren Gaya Massage Windows 8" border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5tAiypuFYzWF-uvV6yRqdlv0EJAsKHHyHDEN3HXRo55YkU31UBsZ0vZfTHfRrNAj59YeJxcsuDUAsr9jNSmbkAaB7bAay40cwfLuusNV-KrsNHHP6kS-SSxzkrjoDyP7zluP35B6juhQ/s1600/komentar+windows+8.png" title="Widget Recent Comment Keren Gaya Massage Windows 8" width="317" /></a></div>
 
Sekarang ashamod share Tips Blogging tentang Cara Membuat Widget Recent Comment Keren Gaya Massage Windows 8. 
Tutorial kali ini saya coba memberikan tips bagaimana cara merubah tampilan widget recent post agar lebih keren. Tanpa membuang waktu langsung saja simak baik-baik panduan Cara Membuat atau Merubah Widget Recent Comment Keren Gaya Massage Windows 8 di bawah ini. 
 
1. Buka bloggger 
2. Menuju Template > Edit HTML 
3. Cari Kode  ]]></b:skin> Biar Lebih Cepat Tekan CTRL+F 
4. Jika Sudah Ketemu Tambahkan Kode Di Bawah Ini Di Atas Kode ]]></b:skin> 
 
<pre class="line-number" data-codetype="CSS"><code>
#rc-avatar-plus ul{border:1px solid #bbb;background:#fff!important;padding:10px!important;word-wrap:break-word}
#rc-avatar-plus li{margin:0!important;border:0!important;background:transparent!important;padding:0 0 10px!important;list-style-type:none!important}
#rc-avatar-plus .rc-info{width:20%}
#rc-avatar-plus img{padding:0!important;width:100%}
#rc-avatar-plus h4{margin:5px 0!important}
#rc-avatar-plus a{position:relative;width:70%;padding:5px}
#rc-avatar-plus a,#rc-avatar-plus a:hover{color:#fff!important;text-decoration:none}
#rc-avatar-plus a:after{content:"";position:absolute;top:10px;width:0;height:0;line-height:0}
#rc-avatar-plus p{margin:0 0 5px;padding:0}
#rc-avatar-plus .rc-author .rc-info,#rc-avatar-plus .rc-admin a{float:left}
#rc-avatar-plus .rc-admin .rc-info,#rc-avatar-plus .rc-author a,#rc-avatar-plus span{float:right}
#rc-avatar-plus .rc-author a{background:#8b0094}
#rc-avatar-plus .rc-author a:after{left:-10px;border-top:10px solid #8b0094;border-left:10px solid transparent}
#rc-avatar-plus .rc-admin a{background:#1eadfe}
#rc-avatar-plus .rc-admin a:after{right:-10px;border-top:10px solid #1eadfe;border-right:10px solid transparent}
</code></pre>
 
5. Menuju Tata Letak > Tambah Widget > HTML/Javascipt 
6. Masukan Kode Dibawah Ini 
 
<pre class="line-number" data-codetype="JavaScript"><code><div id='rc-avatar-plus'>
<script type='text/javascript'>
var copyright_by_duypham_dot_info='Recent Comments free version 3.0 by http://duypham.info';
nc=4;
length_name=30;
length_content=90;
no_avatar='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9eOjvu9p3g3O71SC09glxCXOj2yDT-Wj8AEvi5FyDgtIh8tsyTMF8GhYzps5Wg7kkNlUkGonU1eXHrARo2gitZtM6N3dpMFDdGnOrtf5eS8iIoPCX8ik8z89NVJcovqk-nYkvPxtifHE/s90/no-avatar.png';
on='on';
home_page='';
admin_uri='';
admin_avatar='';
var dp=['S b=["\\E\\H\\P\\s\\M\\f\\A","\\M\\e\\e\\s\\1B\\r\\r","\\Z","\\n\\q\\I\\v","\\M\\j\\h\\I","\\1k\\A\\D\\1A","\\n\\q\\E\\h\\U\\1J\\I","\\r\\s\\r","\\k\\s\\l\\n\\e","\\w","\\j\\h\\s\\l\\f\\m\\h","","\\k\\H\\V\\k\\e\\j\\n\\q\\L","\\e\\v\\2B\\s\\s\\h\\j\\1p\\f\\k\\h","\\1a\\e","\\e\\n\\e\\l\\h","\\I\\h\\h\\E","\\v\\s\\h\\q\\2C\\h\\f\\j\\m\\M\\1a\\e\\v\\e\\f\\l\\1K\\h\\k\\H\\l\\e\\k","\\H\\j\\n","\\f\\H\\e\\M\\v\\j","\\k\\j\\m","\\L\\E\\1a\\n\\A\\f\\L\\h","\\h\\q\\e\\j\\P","\\l\\h\\q\\L\\e\\M","\\l\\n\\q\\1g","\\r","\\e\\M\\j\\1a\\n\\q\\J\\j\\h\\s\\l\\P\\J\\e\\v","\\K\\f\\l\\H\\h","\\L\\E\\1a\\h\\U\\e\\h\\q\\E\\h\\E\\1H\\j\\v\\s\\h\\j\\e\\P","\\m\\v\\q\\e\\h\\q\\e","\\k\\H\\A\\A\\f\\j\\P","\\T\\1D\\2A\\2z\\2v\\1n\\1t","\\l\\f\\k\\e\\1L\\q\\E\\h\\U\\1J\\I","\\T\\1D\\1q\\1C\\1C\\1t","\\q\\f\\A\\h","\\M\\e\\e\\s\\1B\\r\\r\\n\\A\\L\\1q\\Z\\V\\l\\v\\L\\V\\l\\v\\L\\Z\\m\\v\\A\\r\\n\\A\\L\\r\\V\\l\\f\\q\\1g\\Z\\L\\n\\I","\\q\\v\\w\\f\\K\\f\\e\\f\\j","\\C\\k\\m\\j\\n\\s\\e\\w\\e\\P\\s\\h\\D\\x\\e\\h\\U\\e\\r\\1c\\f\\K\\f\\k\\m\\j\\n\\s\\e\\x\\B\\j\\m\\1v\\f\\K\\f\\e\\f\\j\\1n\\2x\\2y\\1t\\C\\r\\k\\m\\j\\n\\s\\e\\B","\\1P\\j\\n\\e\\h","\\C\\k\\m\\j\\n\\s\\e\\w\\e\\P\\s\\h\\D\\x\\e\\h\\U\\e\\r\\1c\\f\\K\\f\\k\\m\\j\\n\\s\\e\\x\\w\\k\\j\\m\\D\\x","\\r\\I\\h\\h\\E\\k\\r","\\r\\m\\v\\A\\A\\h\\q\\e\\k\\r\\E\\h\\I\\f\\H\\l\\e\\1k\\f\\l\\e\\D\\1c\\k\\v\\q\\J\\n\\q\\J\\k\\m\\j\\n\\s\\e\\T\\A\\f\\U\\J\\j\\h\\k\\H\\l\\e\\k\\D\\1A\\T\\m\\f\\l\\l\\V\\f\\m\\1g\\D\\j\\m\\1v\\f\\K\\f\\e\\f\\j\\1n\\x\\B\\C\\r\\k\\m\\j\\n\\s\\e\\B","\\1K\\h\\m\\h\\q\\e\\w\\1p\\v\\A\\A\\h\\q\\e\\k\\w\\I\\j\\h\\h\\w\\K\\h\\j\\k\\n\\v\\q\\w\\1C\\Z\\1A\\w\\V\\P\\w","\\r\\I\\h\\h\\E\\k\\r\\m\\v\\A\\A\\h\\q\\e\\k\\r\\E\\h\\I\\f\\H\\l\\e\\1k\\f\\l\\e\\D\\1c\\k\\v\\q\\J\\n\\q\\J\\k\\m\\j\\n\\s\\e\\T\\A\\f\\U\\J\\j\\h\\k\\H\\l\\e\\k\\D","\\T\\m\\f\\l\\l\\V\\f\\m\\1g\\D\\j\\m\\1v\\f\\K\\f\\e\\f\\j\\1q\\x\\B\\C\\r\\k\\m\\j\\n\\s\\e\\B","\\C\\H\\l\\B","\\1p\\v\\A\\A\\h\\q\\e\\k\\w\\v\\q\\w","\\1B\\w","\\1D\\m","\\m\\v\\A\\A\\h\\q\\e\\1H\\f\\L\\h\\D","\\T","\\1k","\\C\\l\\n\\w\\m\\l\\f\\k\\k\\D\\x","\\j\\m\\J\\f\\E\\A\\n\\q","\\j\\m\\J\\f\\H\\e\\M\\v\\j","\\x\\B\\C\\E\\n\\K\\w\\m\\l\\f\\k\\k\\D\\x\\j\\m\\J\\n\\q\\I\\v\\x\\B\\C\\n\\A\\L\\w\\f\\l\\e\\D\\x","\\x\\w\\m\\l\\f\\k\\k\\D\\x\\j\\m\\J\\f\\K\\f\\e\\f\\j\\x\\w\\k\\j\\m\\D\\x","\\x\\r\\B\\C\\M\\1G\\B","\\C\\r\\M\\1G\\B\\C\\r\\E\\n\\K\\B\\C\\f\\w\\M\\j\\h\\I\\D\\x","\\x\\w\\j\\h\\l\\D\\x\\q\\v\\I\\v\\l\\l\\v\\1P\\x\\w\\e\\n\\e\\l\\h\\D\\x","\\w\\v\\q\\w","\\x\\B\\C\\s\\B","\\C\\r\\s\\B","\\e\\j\\H\\h","\\C\\k\\s\\f\\q\\B","\\C\\r\\k\\s\\f\\q\\B","\\C\\r\\f\\B\\C\\E\\n\\K\\w\\m\\l\\f\\k\\k\\D\\x\\m\\l\\h\\f\\j\\x\\B\\C\\r\\E\\n\\K\\B\\C\\r\\l\\n\\B","\\C\\r\\H\\l\\B","\\n\\q\\q\\h\\j\\2i\\2j\\2q\\2r","\\j\\m\\J\\f\\K\\f\\e\\f\\j\\J\\s\\l\\H\\k","\\L\\h\\e\\2m\\l\\h\\A\\h\\q\\e\\2P\\P\\1L\\E"];1f=0;u=0;X=[];d=[];p=[];Y=[];1j=[];1x=[];t=[];1o=[];1u=[];a=[];W=[];1l=[];1h=[];1s=[];1m=[];1R=b[0];1S=b[1];1T=b[2];1Y=b[3];1M=3b[b[4]];y=1M[b[6]](b[5]);1w 2T(1r){G(d[u][b[6]](b[7])!=-1){Y[u]=1;i=d[u][b[8]](b[7]);i=i[1];i=i[b[10]](/-/g,b[9]);i=i[b[10]](/.2S/,b[11]);1I=i[b[12]](0,1);1O=i[b[12]](1);i=1I[b[13]]()+1O;t[u]=i}N{o=1r[b[16]][b[15]][b[14]];t[u]=o;1N=1r[b[16]][b[17]][b[14]];i=2U((1N-1)/2Y)+1;Y[u]=i};u++};1w 2X(R){1f=R[b[16]][b[17]][b[14]];1x=R[b[16]][b[15]][b[14]];G(b[18]1i R[b[16]][b[19]][0]){1s=R[b[16]][b[19]][0][b[18]][b[14]]};1m=R[b[16]][b[19]][0][b[21]][b[20]];1W(g=0;(g<1z)&&(g<1f);g++){c=R[b[16]][b[22]][g];G(g==R[b[16]][b[22]][b[23]]){2W};X=c[b[24]][0][b[4]];X=X[b[8]](b[25]);1X=X[5];1E=X[8];d[g]=c[b[26]][b[4]];G(y!=-1){d[g]=d[g]+b[5]};1o[g]=c[b[28]][0][b[27]];1u[g]=c[b[28]][1][b[27]];p[g]=1E;G(b[29]1i c){S F=c[b[29]][b[14]]}N{G(b[30]1i c){S F=c[b[30]][b[14]]}N{S F=b[31]}};F=F[b[10]](/<3c \\/>/g,b[9]);F=F[b[10]](/@<a.*?a>/g,b[11]);F=F[b[10]](/<[^>]*>/g,b[11]);G(F[b[23]]<1Q){1j[g]=F}N{F=F[b[12]](0,1Q);S 1e=F[b[32]](b[9]);F=F[b[12]](0,1e);1j[g]=F+b[33]};Q=c[b[19]][0][b[34]][b[14]];G(Q[b[23]]<1F){a[g]=Q}N{Q=Q[b[12]](0,1F);S 1e=Q[b[32]](b[11]);Q=Q[b[12]](0,1e);a[g]=Q+b[33]};G(b[18]1i c[b[19]][0]){1h[g]=c[b[19]][0][b[18]][b[14]]};G(c[b[19]][0][b[21]][b[20]]==b[35]){W[g]=2n;1l[g]=b[36]}N{W[g]=c[b[19]][0][b[21]][b[20]];1l[g]=a[g]};G(d[g][b[6]](b[7])!=-1){1d[b[38]](b[37])}N{1d[b[38]](b[39]+1U+b[2V]+1X+b[3a])}}};G(2R==b[2Z]+1S+1R+1T+1Y){1d[b[38]](b[39]+1U+b[2Q]+1z+b[2l])};1w 2k(){S O=b[11];O+=b[2o];1W(z=0;(z<1z)&&(z<1f);z++){t[z]=t[z][b[10]](b[2p]+1x+b[2s],b[11]);S 1b=b[11];G(Y[z]==1){1b=b[1V]}N{1y=b[2c]+Y[z]+b[1V];G(y!=-1){1b=b[2b]+1y}N{1b=b[2a]+1y}};O+=b[1Z];G(((1h[z]==1s)&&(W[z]==1m))||((1h[z]==2d)&&(W[z]==2e))){O+=b[2h]}N{O+=b[2g]};O+=b[2f]+1l[z]+b[2t]+W[z]+b[2u]+a[z]+b[2J]+d[z]+1b+p[z]+b[2I]+a[z]+b[2H]+t[z]+b[2G]+1j[z]+b[2K];G(1o[z]!=b[2L]){O+=b[2O]+1u[z]+b[2N]};O+=b[2M]};O+=b[2F];1d[b[2E]](b[2w])[b[2D]]=O};',"|","split","|||||||||||_0x2dd0|||x74|x61||x65||x72|x73|x6C|x63|x69|||x6E|x2F|x70|||x6F|x20|x22|||x6D|x3E|x3C|x3D|x64|_0xd75bx5|if|x75|x66|x2D|x76|x67|x68|else|_0xd75bx8|x79|a2|_0xd75bx4|var|x26|x78|x62|im|lk|pn|x2E|||||||||||x24|_0xd75bx9|x6A|document|_0xd75bx6|tt|x6B|ur|in|j2|x3F|alt|ima|x32|pi|x43|x31|_0xd75bx2|ura|x3B|ti|x5F|function|tb|cp|nc|x30|x3A|x33|x23|cid|length_name|x34|x50|str1|x4F|x52|x49|a3|num|str2|x77|length_content|ad|loc|dot|home_page|48|for|pid|inf|52|||||||||||51|50|49|admin_uri|admin_avatar|55|54|53|x48|x54|rc_avatar|44|x45|no_avatar|45|46|x4D|x4C|47|56|57|x39|69|x28|x29|x35|x38|x55|x53|68|70|67|61|60|59|58|62|63|66|65|64|x42|43|copyright_by_duypham_dot_info|html|rc_avatar2|parseInt|40|break|rc_avatar1|200|42|||||||||||41|location|br","","fromCharCode","replace","\\w+","\\b","g"];eval(function(d,e,a,c,b,f){b=function(a){return(a<e?dp[4]:b(parseInt(a/e)))+(35<(a%=e)?String[dp[5]](a+29):a.toString(36))};if(!dp[4][dp[6]](/^/,String)){for(;a--;)f[b(a)]=c[a]||b(a);c=[function(a){return f[a]}];b=function(){return dp[7]};a=1}for(;a--;)c[a]&&(d=d[dp[6]](RegExp(dp[8]+b(a)+dp[8],dp[9]),c[a]));return d}(dp[0],62,199,dp[3][dp[2]](dp[1]),0,{}));
</script>
<script type='text/javascript'>rc_avatar();</script>
</div>
</code></pre>
 
7. Simpan 
 
Demikianlah Cara Membuat Widget Recent Comment Keren Gaya Massage Windows 8, semoga membantu....

Cara Membuat Widget Recent Comment Keren Gaya Massage Windows 8

Sekarang ashamod share Tips Blogging tentang Cara Membuat Widget Recent Comment Keren Gaya Massage Windows 8. Tutorial kali ini saya cob...