Menata Pembuatan Tabel dalam Blog

<p>Tentu kita telah tidak asing lagi dengan yang namanya “tabel”. <em>Yah</em>, meskipun jarang membuat dokumen dalam bentuk tabulasi, namun tidak ada salahnya jika kita mengetahui bagaimana cara membuatnya. Tabel pada posting ini, kemungkinan akan lebih dioptimalkan melalui kustomisasi <abbr title="Cascading Style Sheets">CSS</abbr>. Sedangkan <abbr title="Hypertext Markup Language">HTML</abbr> akan tampak seperti biasa saja, sehingga akan berbeda seperti posting tentang <a href="http://optimasi-blog.blogspot.com/2009/05/cara-membuat-tabel-dalam-blog.html">cara membuat tabel dalam blog</a> yang pernah kami terbitkan sebelumnya.<a name='more'></a></p><table><caption>Bentuk tabel sederhana</caption><tr><th>Uraian</th><th>Angka</th><th>Huruf</th></tr><tr><td>Satuan</td><td>1</td><td>Satu</td></tr><tr><td>Puluhan</td><td>10</td><td>Sepuluh</td></tr><tr><td>Ratusan</td><td>100</td><td>Seratus</td></tr></table><div class="project"><pre class="html" data-lang="html"><table><br /> <caption>Judul Tabel</caption><br /> <span style="color:#999;"><!-- baris pertama untuk table row (tr) --></span><br /> <tr><br /> <span style="color:#999;"><!-- kolom table head (th) --></span><br /> <th>Uraian</th> <span style="color:#999;"><!-- kolom pertama --></span><br /> <th>Angka</th> <span style="color:#999;"><!-- kolom kedua --></span><br /> <th>Huruf</th> <span style="color:#999;"><!-- kolom ketiga --></span><br /> </tr><br /> <span style="color:#999;"><!-- baris kedua --></span><br /> <tr><br /> <span style="color:#999;"><!-- kolom table data (td) --></span><br /> <td>Satuan</td><br /> <td>1</td><br /> <td>Satu</td><br /> </tr><br /> <span style="color:#999;"><!-- baris ketiga --></span><br /> <tr><br /> <td>Puluhan</td><br /> <td>10</td><br /> <td>Sepuluh</td><br /> </tr><br /> <span style="color:#999;"><!-- baris ke-empat --></span><br /> <tr><br /> <td>Ratusan</td><br /> <td>100</td><br /> <td>Seratus</td><br /> </tr><br /></table></pre><div class="alert warning"><p>Terkadang penerapan dalam HTML semua bagian dari pengkodean tabel disambung menjadi satu. Sedangkan pengkodean di atas hanya sekedar memudahkan pemahaman.</p></div><pre class="css" data-lang="css"><code>table {<br /> border-bottom: 1px solid #ddd;<br /> border-spacing: 2px;<br /> margin: 1.6em 0;<br /> width: 100%;<br />}<br />caption {<br /> margin-bottom: 0;<br />}<br />tr,<br />th,<br />td {<br /> vertical-align: inherit;<br />}<br />th,<br />td {<br /> border-top: 1px solid #ddd;<br /> padding: .8em .5em;<br />}<br />th {<br /> background: #f9f9f9;<br /> font-weight: 600;<br /> text-transform: uppercase;<br />}</code></pre><div class="alert info"><p>CSS di atas telah disesuaikan dengan <em>vertical rhythm</em> struktur kode awal blog ini yakni <code>line-height:1.6em;</code>.</p></div></div><p>Sekarang kita coba untuk sedikit mengkonfigurasi tabel tanpa <code>caption</code> ke bentuk lain seperti di bawah ini. Kita masih menggunakan dasar pengkodean CSS sebelumnya dengan sedikit merubah <span class="amp">&</span> menambah sedikit properti serta nilainya.</p><pre><code>table,<br />th,<br />td {<br /> border: 1px solid #ddd;<br />}<br />th,<br />td {<br /> text-align: center;<br />}</code></pre><table class="style1"><tr><th>Uraian</th><th>Angka</th><th>Huruf</th></tr><tr><td>Satuan</td><td>1</td><td>Satu</td></tr><tr><td>Puluhan</td><td>10</td><td>Sepuluh</td></tr><tr><td>Ratusan</td><td>100</td><td>Seratus</td></tr></table><p>Atau kita ingin menampilkan baris tabel yang berbelang-belang — seperti kuda zebra — dengan sedikit ditambahkan pula variasi ketika didekati tetikus (<code>:hover</code>).</p><pre><code>tr:nth-child(2n+1) {<br /> background: #f9f9f9;<br />}<br />tr:hover {<br /> background: #bde5f8;<br /> color: #000;<br />}</code></pre><div class="alert info"><p>Ketentuan pemberian latar (<code>background</code>) akan berlaku dimulai pada baris ke-3 (2n+1) dan seterusnya berselang satu baris (2n).</p></div><table class="style2"><tr><th>Uraian</th><th>Angka</th><th>Huruf</th></tr><tr><td>Satuan</td><td>1</td><td>Satu</td></tr><tr><td>Puluhan</td><td>10</td><td>Sepuluh</td></tr><tr><td>Ratusan</td><td>100</td><td>Seratus</td></tr><tr><td>Ribuan</td><td>1000</td><td>Seribu</td></tr></table><p>Bentuk terakhir adalah menggunakan properti tabel secara lengkap (<code>thead</code>, <code>tbody</code>, <code>tfoot</code>), namun mungkin tidak sering digunakan.</p><div class="project"><pre class="html" data-lang="html"><code><table><br /> <caption>Judul Tabel</caption><br /> <span style="color:#999;"><!-- table head (thead) --></span><br /> <thead><br /> <tr><br /> <th rowspan="2">Uraian</th> <span style="color:#999;"><!-- menggabungkan 2 baris --></span><br /> <th colspan="2">Keterangan</th> <span style="color:#999;"><!-- menggabungkan 2 kolom --></span><br /> </tr><br /> <span style="color:#999;"><!-- pisahkan kembali dengan table row (tr) --></span><br /> <tr><br /> <th>Angka</th><br /> <th>Huruf</th><br /> </tr><br /> </thead><br /> <span style="color:#999;"><!-- table foot (tfoot), nanti letak tampilannya tetap pada bagian bawah tabel --></span><br /> <tfoot><br /> <tr><br /> <td>Jumlah</td><br /> <td>1111</td><br /> <td>Seribu Seratus Sebelas</td><br /> </tr><br /> </tfoot><br /> <span style="color:#999;"><!-- table body (tbody) --></span><br /> <tbody><br /> <tr><br /> <td>Satuan</td><br /> <td>1</td><br /> <td>Satu</td><br /> </tr><br /> <tr><br /> <td>Puluhan</td><br /> <td>10</td><br /> <td>Sepuluh</td><br /> </tr><br /> <tr><br /> <td>Ratusan</td><br /> <td>100</td><br /> <td>Seratus</td><br /> </tr><br /> </tbody><br /></table></code></pre><pre class="css" data-lang="css"><code>table {<br /> border-spacing: 2px;<br /> margin: 1.6em 0;<br /> width: 100%;<br />}<br />table,<br />th,<br />td {<br /> border: 1px solid #ddd;<br />}<br />caption {<br /> text-align: left;<br /> margin-bottom: .8em;<br />}<br />thead,<br />tbody,<br />tfoot {<br /> vertical-align: middle;<br />}<br />tfoot {<br /> border-top: 3px double #ddd;<br />}<br />tr,<br />th,<br />td {<br /> vertical-align: inherit;<br />}<br />th,<br />td {<br /> text-align: center;<br /> padding: .8em .5em;<br />}<br />th {<br /> background: #f9f9f9;<br /> font-weight: 600;<br /> text-transform: uppercase;<br />}<br />tr:nth-child(even) <span style="color:#999;">/* sama dengan (2n) atau (2n+0) */</span> {<br /> background: #f9f9f9;<br />}<br />tr:hover {<br /> background: #bde5f8;<br /> color: #000;<br />}</code></pre></div><div class="alert warning"><p>Pastikan bahwa <code>tr:hover</code> berada pada susunan CSS dibawah <em>pseudo-classes</em> posisi (<code>:nth-child(n)</code> dan sejenisnya) dari pengkodean tabel. Jika tidak, sangat dimungkinkan fungsi <em>hover</em> akan tidak bekerja. Mungkin sama perlakuannya terhadap pengkodean pranala (<em>link</em>), dimana <code>a:visited</code> berada di bawah <code>a</code> dan/atau <code>a:link</code>.</p></div><table class="style3"><caption>Judul Tabel</caption><thead><tr><th rowspan="2">Uraian</th><th colspan="2">Keterangan</th></tr><tr><th>Angka</th><th>Huruf</th></tr></thead><tfoot><tr><td>Jumlah</td><td>1111</td><td>Seribu Seratus Sebelas</td></tr></tfoot><tbody><tr><td>Satuan</td><td>1</td><td>Satu</td></tr><tr><td>Puluhan</td><td>10</td><td>Sepuluh</td></tr><tr><td>Ratusan</td><td>100</td><td>Seratus</td></tr><tr><td>Ribuan</td><td>1000</td><td>Seribu</td></tr></tbody></table><p>Disamping pengkodean yang telah diuraikan di atas, tidak menutup kemungkinan masih banyak bentuk tabel lain <span class="amp">&</span> tentu saja dengan menggunakan kustomisasi pengkodean yang berbeda pula. Namun yang patut dijadikan sebagai generalisasi adalah HTML tabel dapat disajikan secara bersih dengan hanya mengoptimalkan CSS kita dapat menampilkan bentuk tabel secara unik serta mungkin mudah diterima oleh pengguna.</p><style type="text/css">table{margin:1.6em 0;}caption{margin-bottom:0;}tr{font-family:Consolas, "Lucida Console", Monaco, monospace;}table .style1,.style1 th,.style1 td,table .style2,.style2 th,.style2 td,table .style3,.style3 th,.style3 td{border: 1px solid #ddd;}.style1 th,.style1 td,.style2 th,.style2 td,.style3 th,.style3 td{text-align:center;}.style2 tr:nth-child(2n+1),.style3 tr:nth-child(even){background:#f9f9f9;}.style2 tr:hover,.style3 tr:hover{background:#bde5f8;color:#000;}.style3 caption{margin-bottom:.8em;text-align:left;}.style3 thead,.style3 tbody,.style3 tfoot{vertical-align:middle;}.style3 tfoot{border-top:3px double #ddd;}</style>

Posted by Hii Sekai

TRIK SEO MERUBAH DESCRIPTION MENJADI KEYWORD

<div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-7JbhUwctcXQ/UNumDYlmlkI/AAAAAAAACjs/REY_s9cY0xY/s1600/Icahbanjarmasin.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Trik Seo Merubah Description Menjadi Keyword" border="0" height="186" src="http://1.bp.blogspot.com/-7JbhUwctcXQ/UNumDYlmlkI/AAAAAAAACjs/REY_s9cY0xY/s320/Icahbanjarmasin.jpg" title="Trik Seo Merubah Description Menjadi Keyword" width="240" /></a></div><a href="http://icah-banjarmasin.blogspot.com/"><b>Trik Seo Merubah Description Menjadi Keyword</b></a> sangatlah mudah,kebetulan code-code yang akan saya share ini sudah saya modifikasi agar sesuai yang dianjurkan oleh pihak <i>Google</i>. Dalam menerapkan suatu <b>Description</b> ke <b>Keyword</b> sebenarnya sudah dimulai dari dulu namun waktu saya sendiri itu masih ragu-ragu dalam penerapannya sebab waktu itu <strike>Keyword</strike> masih sangat dominan,beda dengan sekarang justru <b>Desckription</b> yang lebih dominan tapi bukan berarti <i>Keyword</i> tidak dipakai lagi. <a href="http://icah-banjarmasin.blogspot.com/"><b><i>Trik Seo</i></b></a> memang bermacam-macam cara tiap hari dan tiap jam ada yang selalu terupdate namun semua itu kita saja yang harus benar-benar menyingkapinya,<a href="http://www.icahbanjarmasin.com/"><b>Tips Seo</b></a> pun juga begitu namun seperti saya bilang tadi kita harus menyingkapinya dengan cacatatan <b>Sesuaikan Dengan Kebutuhan Kita</b> khususnya buat <i>Blog</i> kita..apakah perlu atau tidak. Baik kita kembali ke topik,dalam penerapan <a href="http://icah-banjarmasin.blogspot.com/"><b>Trik Seo</b></a> dimulai dari kondisi <b>Template</b> kalau bagi yang sudah <b>Profesional</b> dalam <i>Ngeblog</i> tidak begitu sukar,namun kalau bagi kita yang nota bene masih belum begitu memahami dalam hal <i>Template</i> sangat sulit. Tapi kita pun jangan berdiam diri sebab belajar tak mengenal waktu dan itu harus..!!<br />Nah sekarang langsung kita terapkan <a href="http://icah-banjarmasin.blogspot.com/"><b>Trik Seo Merubah Description Menjadi Keyword</b></a>.<br />Berikut tata cara penerapannya :<br /><ul><li>Masuk ke Blog seperti biasa.</li><li>Cari/Pilih RANCANGAN</li><li>Klik pada EDIT HTML </li><li>Selanjutnya coba kalian cari code berikut ini : </li></ul> <div class='descriptionwrapper'><br /><p class='description'><span><data:description/></span></p></div><br /><br /><br /><br />Memang tiap-tiap TEMPLATE beda-beda tapi kalian cari yang agak miriplah kata-katanya.<br />Nah kalau sudah ketemu dengan code yang saya tuliskan diatas tadi kalian ganti code-code semua itu<br />dengan code yang akan saya share ini,dan ini sudah saya modifikasi sedemian rupa agar sesuai dengan <span style="color: red;"><b>CHARSET=UTP-8  </b><span style="color: black;">serta <span style="color: blue;"><b>CHARSET=ISO-8859-1 </b><span style="color: black;">.</span></span></span></span><br /><span style="color: red;"><span style="color: black;"><span style="color: blue;"><span style="color: black;">Jadi boleh dikatan cocok buat seluruh <u>search engine</u> seperti <span style="color: magenta;"><b>GOOGLE <span style="color: lime;">YAHOO <span style="color: orange;">BING </span></span></b></span> </span></span></span></span><i>hahahyyyy.</i><br />Nah ini code tersebut :<br /><br /><br /><div class='descriptionwrapper'>  <b:if cond='data:blog.pageType != &quot;item&quot;'><p class='description'><span><data:description/></span></p><b:else/><p class='description'><span><b:if cond='data:blog.pageType == &quot;item&quot;'><strong><font style ='text-transform: uppercase;'><u><i><data:blog.pageName/></i></u></font></strong></b:if></span></p></b:if>  </div><br /><br /><br /><ul><li>Selanjutnya simpan hasil penerapan tadi.</li></ul>Semoga saja dengan cara ini <i>Blog</i> kita bisa makin bagus dan makin terbaca di mesin pencarian.<br />Demikianlah yang bisa saya sampaikan tentang <b>Trik Seo</b> khusunya tentang <a href="http://icah-banjarmasin.blogspot.com/"><b>Trik Seo Merubah Description Menjadi Keyword</b></a> semoga saja bisa berguna dan bermanfaat dalam penerapan <i><b>Trik dan Tips Seo.</b></i>

Posted by Hii Sekai

Microdata dan RDFa License dalam Blog

<p class="first-letter">Dalam sebuah situs web atau blog, kita dapat menerapkan deskripsi mengenai apa yang terkandung dalam suatu halaman web. Boleh jadi ketika pengguna berkunjung ke blog kita <span class="amp">&</span> mengerti ketika mereka membaca halaman web itu. Namun dari sisi mesin penelusur, mungkin mempunyai pemahaman yang terbatas tentang apa yang sedang dibahas di halaman tersebut. Oleh karena itu tidaklah berlebihan apabila kita berusaha agar dokumen <abbr title="Hypertext Markup Language">HTML</abbr> atau <abbr title="Extensible Hypertext Markup Language">XHTML</abbr> dapat pula dipahami oleh mesin penelusuran, dengan catatan dilakukan (<em>markup</em>) secara baik <span class="amp">&</span> benar.<a name='more'></a></p><p>Secara menyeluruh perlakuan markah <em>microdata</em> telah dijelaskan pada posting <a href="http://optimasi-blog.blogspot.com/2012/12/microdata-pada-bloggercom.html">microdata pada Blogger™</a> — terutama berkaitan dengan Blogger™ — dimana target tipe utama adalah <code>http://schema.org/Blog</code>. Pada kasus penerapan <em>microdata</em> dan <abbr title="Resource Description Framework – in – attributes">RDFa</abbr> <em>license</em> ini, kita mengacu pada tipe yang sama pula. Berbeda jika diterapkan pada tipe (<code>itemtype</code>) yang berbeda pula. Untuk memberikan pengkodean markah <em>microdata</em> pada blog, kita akan menggunakan <code>itemtype='http://n.whatwg.org/work'</code> (<a rel="nofollow" href="http://www.whatwg.org/specs/web-apps/current-work/#licensing-works">www.whatwg.org</a>) dengan <code>itemprop='copyrightHolder'</code> (<a rel="nofollow" href="http://schema.org/Blog">schema.org</a>). Sedangkan contoh format RDFa akan ‘disarikan’ berdasarkan sumber <a rel="nofollow" href="http://creativecommons.org/choose/">lisensi Creative Commons</a> (<em>License mark: HTML + RDFa</em>) dengan sedikit kustomisasi agar lebih standar.</p><pre><code><div id='content' <span style="color:red;">itemscope='itemscope' <mark>itemtype='http://schema.org/Blog'</mark></span>><br /><br />… dan seterusnya …<br /><br /> <footer><br /> <div id='content-info' <mark>itemprop='copyrightHolder'</mark> <span style="color:red;">itemscope='itemscope' <mark>itemtype='http://n.whatwg.org/work'</mark></span>><br /> <span style="color:red;"><meta expr:content='data:blog.homepageUrl' itemprop='work'/><br /> <meta content='http://creativecommons.org/licenses/by/3.0/' itemprop='license'/></span><br /> <p><span class="amp">&</span>amp;copy; <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script> <cite <span style="color:red;">itemprop='title'</span>><a expr:href='data:blog.homepageUrl' <span style="color:blue;">property='dc:title' rel='dc:source'</span> title='Beranda'><data:blog.title/></a></cite> powered by <a href='http://www.blogger.com' <span style="color:blue;">property='cc:attributionName' rel='cc:attributionURL'</span>>Blogger.com</a>. <a class='to-top' href='#content' title='Return to top'>Top</a><span class="amp">&</span>#8593; <br/> <a href='http://creativecommons.org/licenses/by/3.0/' <span style="color:blue;">rel='license'</span> title='Creative Commons Attribution 3.0 Unported License'>All Right Reserved</a>.</p><br /> </div><span style="color:green;"><!-- #content-info --></span><br /> </footer><br /></div><span style="color:green;"><!-- #content --></span></code></pre><p style="font-style:italic;">Catatan: kode yang berwarna merah akan muncul pada <em>rich snippets</em> sebagai format <em>microdata</em> <span class="amp">&</span> kode berwarna biru untuk format RDFa. Pengkodean di atas hanya merupakan contoh untuk memudahkan pemahaman, bukan secara mutlak harus diterapkan.</p><p>Kemudian lakukan <a rel="nofollow" href="http://www.google.com/webmasters/tools/richsnippets">pegujian data <em>rich snippets</em></a> <span class="amp">&</span> lakukan pengujian pula melalui <a rel="nofollow" href="http://validator.w3.org/"><em>markup validation service</em></a>. Apabila <em>markup</em> tersebut tepat, maka <em>microdata</em> dan RDFa <em>license</em> pada elemen <code><footer></code> dalam struktur blog akan lolos dari validitasi data.</p>

Posted by Hii Sekai

Gaya Penulisan Tag Kode dan Blok Kode

<p>Sebagai tindak menambah kebergunakan sebuah posting blog, penerapan semantik <em>markup</em> merupakan salah satu langkah logis agar struktur dokumen menjadi lebih baik. Bukan hanya penyandang disabilitas — saya kira — siapapun pun yang menggunakan pembaca layar pasti lebih mudah membedakan antara paragraf, daftar urut (<a href="http://optimasi-blog.blogspot.com/2011/07/styling-unordered-ordered-lists.html"><em>styling unordered <span class="amp">&</span> ordered lists</em></a>), kutipan <span class="amp">&</span> <em>preformatted text</em>, kode, <em>heading</em> dan sebagainya.<a name='more'></a></p><p class="code-text">Apabila kita menulis beberapa posting mengenai trik, turitoal, dan/atau pengkodean dalam suatu blog, maka kemunkinan besar akan terkait dengan tag <code>code</code> serta <code>pre</code>. Secara sederhana, Tag <code>code</code> biasanya berguna untuk menandai bahwa teks itu merupakan kode <span class="amp">&</span> tag <code>pre</code> untuk menandai bahwa teks berupa format bebas yang ditampilkan persis seperti pada ketikan asli dalam sebuah dokumen <abbr title="Hypertext Markup Language">HTML</abbr>. Pada posting ini, kita akan membuat gaya pengkodean untuk <code>code</code> dan kumpulan (<em>block</em>) <code>code</code> yang kemudian dimasukkan dalam tag <code>pre</code>.</p><p>Berikut merupakan <abbr title="Cascading Style Sheets">CSS</abbr> dari penggunaan tag kode pada paragraf di atas.</p><pre><code>pre, code, kbd, samp, tt {<br /> font-family: Monaco, Consolas, "Lucida Console", monospace;<br />}<br />p code, ol code, ul code {<br /> background: #eee;<br /> margin: -.1em;<br /> padding: .1em;<br />}</code></pre><p>Sedangkan penulisan dokumen <abbr title="Hypertext Markup Language">HTML</abbr> untuk blok kode akan ditunjukkan seperti di bawah ini.</p><pre><span style="background:#fc6;"><pre><code></span>pre, code, kbd, samp, tt {<br /> font-family: Monaco, Consolas, "Lucida Console", monospace;<br />}<span style="background:#fc6;"></code></pre></span></pre><p class="code-text"><em>Nah</em>, sekarang kita akan memberikan gaya penulisan blok kode (<em>code block</em>) yang sedikit berbeda, tetapi mungkin para blogger pernah melihatnya pada situs web atau blog lain.</p><div class="project"><pre class="css" data-lang="css"><code>pre {<br /> background: #606060;<br /> background-image: -webkit-linear-gradient(#606060 50%,#555 50%);<br /> background-image: -moz-linear-gradient(#606060 50%,#555 50%);<br /> background-image: -ms-linear-gradient(#606060 50%,#555 50%);<br /> background-image: -o-linear-gradient(#606060 50%,#555 50%);<br /> background-image: linear-gradient(#606060 50%,#555 50%);<br /> background-position: 0 0;<br /> background-repeat: repeat;<br /> background-size: 4em 4em; <span style="color:#c3c3c3;">/* 2× line-height */</span><br /> color: #fff;<br /> <mark>line-height: 2em;</mark><br /> margin-bottom: 2em;<br /> overflow: auto;<br /> padding: 2em; <span style="color:#c3c3c3;">/* = line-height (<em>top</em> <span class="amp">&</span> <em>bottom</em>) */</span><br /> white-space: pre;<br />}<br /><br />pre[data-lang="html"]:before,<br />pre[data-lang="css"]:before {<br /> display: block;<br /> color: #fc3;<br /> <span style="color:#c3c3c3;">/* <em>vertical rythim</em> (<em>size</em> 1.067em <span class="amp">&</span> <em>line-height</em> 1.5em) */</span><br /> font: 1.0667em/1.5em sans-serif;<br /> font-weight: bold;<br /> margin-bottom: 1.5em; <span style="color:#c3c3c3;">/* = <em>line-height</em> elemen */</span><br /> text-transform: uppercase;<br />}<br /><br />pre[data-lang="html"]:before {<br /> content: "html";<br />}<br /><br />pre[data-lang="css"]:before {<br /> content: "css";<br />}</code></pre><pre class="html" data-lang="html"><pre class="html" data-lang="html"><code>…masukkan blok kode HTML dalam <em>markup</em> ini…</code></pre><br /><br /><pre class="css" data-lang="css"><code>…masukkan blok kode CSS dalam <em>markup</em> ini…</code></pre></pre></div><p class="code-text">Apabila kita ingin agar blok kode tidak melebihi bidang elemen <code>pre</code> — menghilangkan fungsi <em>scrolling</em> — ganti <code>white-space: pre;</code> dengan <code>white-space: pre-wrap;</code>. Selain itu, kita dapat pula menambah, mengurangi, dan memodifikasi gaya penulisan blok kode di atas sesuai dengan keinginan masing-masing. Kesulitan mungkin terjadi pada konfigurasi <em>pseudo-element</em> <code>:before</code>, terutama pada ukuran <em>font</em> (teks) yang berbeda. Intinya kita perlu menyesuaikan ritme vertikal (<em>vertical rythim</em>) agar blok kode (<code>pre</code>) tetap pada jalurnya.</p>

Posted by Hii Sekai

META TAG BUAT GOOGLE PLUS

<div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-UF4hNq3zCz0/UNGUG7yMzQI/AAAAAAAACf0/ZAIXsA6kZ78/s1600/icahbanjarmasin.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="META TAG BUAT GOOGLE PLUS" border="0" height="217" src="http://3.bp.blogspot.com/-UF4hNq3zCz0/UNGUG7yMzQI/AAAAAAAACf0/ZAIXsA6kZ78/s320/icahbanjarmasin.jpg" title="META TAG BUAT GOOGLE PLUS" width="320" /></a></div><a href="http://www.icahbanjarmasin.com/"><b>META TAG BUAT GOOGLE PLUS </b></a> itu judul yang yang akan saya bahas. Setelah beberapa hari tidak update karena ada keperluan yang sangat mendesak jadi terbengkalai blog <b>Icah Banjarmasin</b> ini. O ya kita ketopik,kemaren saya sempat jalan-jalan ke <i><b>Forum Google</b></i> disana saya banyak dapat pelajaran yang sangat berharga,ternyata untuk memaksimalkan <b>Google +1</b> khususnya agar <strike>Blog</strike> kita makin <a href="http://www.icahbanjarmasin.com/"><b>Seo</b></a> ada <b>Trik Seo</b> yang digunakan. Memang <i>Katanya</i> sekarang <b>Google</b> tidak memerlukan keyword namun pada kenyataan keyword justru masih diperlukan. Seperti artikel yang ditulis oleh <b>Pablo</b> di : <i> http://www.fortune3.com/blog/2012/03/meta-tags-relevant-seo/</i> serta dibeberapa forum-forum. Dan setelah browsing kesana kemari akhirnya saya dapatkan buku tentang memaksimalkan blog kita yang dipadukan dengan <i>Google +1</i> agar lebih bagus lagi di mesin pencarian dengan catatan memaksimalkan <a href="http://www.icahbanjarmasin.com/search/label/META"><b>Meta Tag</b></a> pada <i>Templates</i> kita. Bagi yang sudah punya <b>Meta</b> biar gabung juga tidak apa dan tidak akan membuat cras atau pun berat untuk loadingnya. Apabila kalian memasang <b>Meta Tag</b> ini usahakan kalian langsung posting satu artikel yang gunanya untuk memaksimalkan kerja dari <a href="http://www.icahbanjarmasin.com/">Meta Tag</a> tersebut..begitu yang saya ketahui. Untuk cara pemasangannya ikuti langkah-langkah berikut :<br /><ol><li>Login seperti biasa ke blogspot.</li><li>Pilih RANCANGAN.</li><li>Pilih EDIT HTML.</li><li>Jangan lupa kalian centang "EXPAND TEMPLATE WIDGET.</li><li>Sekarang kalian cari code :  <head></li><li>Lalu kalian taruh code yang berikut ini tepat DIATAS CODE <head> TADI.</li></ol>Inilah code tersebut :<br /> <!--Meta keyword --><br /><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><b:section id='meta1' showaddelement='no'><br /><!-- widget must be a of Type = 'blog' to have posts data exposed, and must have a unique id --><br /><!-- Empty Includables(functions) to output nothing, You must keep them ): --><br /><b:widget id='Blog2' locked='no' type='Blog'><br /><b:includable id='nextprev'/><br /><b:includable id='backlinks' var='post'/><br /><b:includable id='post' var='post' /><br /><b:includable id='status-message'/><br /><b:includable id='comment-form' var='post'/><br /><b:includable id='backlinkDeleteIcon' var='backlink'/><br /><b:includable id='postQuickEdit' var='post'/><br /><b:includable id='commentDeleteIcon' var='comment'/><br /><b:includable id='feedLinks'/><br /><b:includable id='feedLinksBody' var='links'/><br /><b:includable id='comments' var='post'/><br /><b:includable id='main' var='top'><!-- Main Function of Any widget comes with ID 'main' --><br /><!-- Loop Page Posts (only 1 in a post page )--><br /><b:loop values='data:posts' var='post'><br /><b:if cond='data:post.labels'><br /><!-- If the post has labels, make Meta keywords by looping lables --><br />&lt;meta name=&quot;keywords&quot; content=&quot;<b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop>&quot; /&gt;<br /></b:if><br /></b:loop><br /></b:includable><br /></b:widget><br /></b:section><br /></b:if><br /><!--Meta End --><br /><br />Sekarang kalian cari masih di code yang sama yaitu :  <head> namun sekarang kalian pasang code yang akan saya berikan ini tepat DIBAWAH CODE  <head>..nah ini codenya :<br /><br /><!-- head --><br /><!-- must include(called) here to output other head sub elements --><br /><b:include data='blog' name='all-head-content'/><br /><!--::::::::::: Block2: Output Index Title,keywords,decription<br />and Post Title,description --><br /><!-- Post/Archive Page --><br /><b:if cond='data:blog.pageType != &quot;index&quot;'><br /><title><data:blog.pageName/></title><br /><meta name='description' expr:content='data:blog.pageName' /><br /><!-- Index Page --><br /><b:else/><br /><title><data:blog.pageTitle/></title><br /><meta name='keywords' content='ISI KEYWORD KALIAN DISINI' /><br /><meta name='description' content='ISI DESCRIPTION KALIAN DISINI' /><br /></b:if><br /><!--Head end --><br /><br />Setelah itu simpan,dan jangan lupa kalian bikin satu artikel dulu untuk memaksimalkan kerja dari <b>META TAG GOOGLE +1 </b>ini..<br />Semoga saja sajian <a href="http://www.icahbanjarmasin.com/"><b>META TAG BUAT GOOGLE PLUS </b></a> kali ini bisa bermanfaat <a href="http://hajinorman.blogspot.com/2012/12/promo-bonus-100-sbobet-ibcbet-dan.html">bagi</a> kalian dan tentunya buat <i>Blog</i> kita semua.<br />Salam dari <span style="color: red;"><b>BANJARMASIN  </b></span>

Posted by Hii Sekai

Membagi Dua Kolom Elemen Posting

<img alt="Bagan Elemen" class="alignleft" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEnX3w9Z5FkxnbiJgoUi0YLZ0nj206pKfNKtfwleWoRGJg6vTLF8N8XttzCxLdGn25bvVn0p8Mab4Rz6-lEN5SeVj4YZT40wHpwCmB67z4vTOVyG8UahfrdaBx2VIicWDyPBXRlm9AFvY/s200/Elemen.jpg" width="200"/><p>Umumnya elemen posting memiliki satu kolom. Sekarang tindakan apa yang dapat kita lakukan agar kolom posting itu menjadi dua? Sebelum memulai trik tersebut, alangkah baiknya jika kita memahami mengapa sebuah kolom menjadi dua. Pengkoloman terjadi apabila tersedia ruang kosong — biasanya — disebelah kiri pada sebuah elemen dasar, sehingga elemen di bahwahnya akan mengisi ruang kosong tersebut. Sedangkan elemen dasar tersebut harus memperlihatkan struktur <em>inline</em> <span class="amp">&</span> penempatan bernilai relatif agar — nantinya — mudah untuk dikustomisasi. Salah satu contoh penerapan adalah pada posting <a href="http://optimasi-blog.blogspot.com/2012/12/membuat-template-blog-hasil-karya.html">Membuat Template Blog Hasil Karya Sendiri</a> di bagian akhir tentang cara membuat tiga kolom sejajar dalam elemen <code>footer</code> yang ditandai dengan <em>selector</em> <code>.supplementary</code>.<a name='more'></a></p><p>Langkah awal untuk memulai tutorial ini ini adalah kita harus mengetahui struktur elemen pembentuk posting tersebut, contoh untuk elemen posting <em>template</em> bawaan Blogger™:</p><pre><code><div class="widget Blog" id="Blog1"><span style="color:green;"><!-- widget posting --></span><br /> <div class="blog-posts hfeed"><span style="color:green;"><!-- memulai posting dengan microformat (hfeed) --></span><br /> <div class="date-outer"><span style="color:green;"><!-- posting sesuai tanggal terbit, dapat berisi lebih dari satu posting --></span><br /> <div class="date-posts"><span style="color:green;"><!-- elemen ini dapat digunakan untuk membagi dua kolom --></span><br /> <div class="post-outer"><span style="color:green;"><!-- elemen ini dapat digunakan untuk membagi dua kolom --></span><br /> <div class="post hentry"><span style="color:green;"><!-- elemen ini dapat digunakan untuk membagi dua kolom --></span><br /> <br /> … dan seterusnya …</code></pre><p>Seperti kata sebuah ungkapan, <q>Sebaik-baik jalan adalah ditengah-tengah</q>, maka kita akan mengambil elemen <code><div class="post-outer"></code> sebagai pembagi. Syaratnya format tanggal <em>header</em> di non-aktifkan.</p><img alt="konfigurasi tanggal header" class="aligncenter" height="430" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrpTvnEdDtFOE7HM99cKR0hc9sisKyd_ckJHPyS5CRg68lAWEh0-84MpVJgvW1NclQWwb5ZTye2k_Barl_g71d4GQqCc_PVq0h1zZZX3qcAY4oV6gKqaydEHIEwyy-U1EdkUp3en626Gg/s400/Mengonfigurasi%252BPosting%252BBlog.jpg" style="margin-bottom:1.6em;" width="400"/><p>Perhatikan lebar (<code>width</code>) elemen pembentuk <em>widget</em> posting, seperti <code>main-content</code>, <code>main-content .widget</code>, <code>#main</code>, <code>#main .widget</code>, dan sebagainya. Hal ini akan memudahkan kita untuk menentukan lebar elemen posting, apabila menggunakan jenis <em>fixed layout</em>. Contoh:</p><pre><code>#main .widget {<br /> margin-right: 15px;<br /> overflow: hidden;<br /> width: 600px;<br /> word-wrap: break-word;<br />}</code></pre><p style="font-style:italic;">Catatan: kode di atas menunjukkan bahwa lebar elemen yang ditempati oleh sejumlah posting adalah sebesar 600px. Sebagai tambahan kita juga semestinya mengetahui <code>margin-left</code> elemen <em>sidebar</em> agar memperoleh hasil yang seimbang. Kira ambil contoh <code>margin-left</code> elemen <em>sidebar</em> sebesar 15px dan berada di sebelah kanan <code>#main-content</code>.</p><img alt="Tata Letak Posting Satu Kolom" class="alignfull" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7UKt3XPHpKIId6lXh2SS8tDHyLq376OjHBX7CJPdJOCLJ_G-FttIJOp7csTbIWRk8r0qn9lSbbbin64OKXDazg2EpILy3VdJY6Ifk4qNCXgoB-BGSlEehxp-d8iwGFAWi7V1If1AJ_Lw/s608/Layout%252BPosting.jpg" style="margin-bottom:1.6em;" width="608"/><p>Dengan kondisi awal kode <abbr title="Cascading Style Sheets">CSS</abbr> pada <code>.post-outer</code> adalah sebagai berikut:</p><pre><code>.post-outer {<br /> margin: 15px;<br /> width: 570px; <span style="color:green;"><!-- 600px - 15px (margin-left) - 15px (margin-right) --></span><br />}</code></pre><p style="font-style:italic;">Catatan: kode CSS di atas merupakan contoh <span class="amp">&</span> bila tidak ada pada pengkodean <em>template</em> Anda, kemungkinan terdapat pada <mark><code>.post</code> atau <em>selector</em> lain</mark>. Properti <code>width</code> juga bisa tidak disertakan.</p><p>Untuk merubah elemen posting blog menjadi dua, kita perlu mengkonfigurasi ulang <code>.post-outer</code>. Dengan rincian seperti yang ditunjukkan pada kode berikut ini.</p><pre><code>.post-outer {<br /> display: inline;<br /> float: left;<br /> position: relative;<br /> margin: 15px;<br /> width: 270px; <span style="color:green;"><!-- {600px - 30px (2× margin-left) - 30px (2× margin-right)} ÷ 2 kolom --></span><br />}</code></pre><p style="font-style:italic;">Catatan: <code>.post-outer</code> harus diperlakukan tanpa <em>border</em>, untuk menjaga struktur pengkodean yang telah kita tentukan di atas. Sebaiknya penambahan <em>border</em> <span class="amp">&</span> pernak-pernik lain ditambahkan pada <code>.post</code> dan hal inilah yang saya sebut memudahkan kustomisasi pada catatan sebelumnya.</p><img alt="Tata Letak Posting dua Kolom" class="alignfull" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS3IVuFMqQ23WMrjsDJAtPUajm79nWnTkilmfjk0EQYrRGitXTL4BRfPhHc9qWzdDKRyQ58QnIRrCfGlVc7y8Ogr4J_spaOBEw-KFkit1qXGMiS3HUBhitnzfCC1TOOorYpkabv_Y8hG8/s608/Layout-split.jpg" style="margin-bottom:1.6em;" width="608"/><p>Terakhir tambahkan <code><div class='clear'></div></code> tepat di bawah penutup <code><div class="post-outer"></code> untuk menjaga <span class="amp">&</span> mengikat pengkoloman yang telah kita buat.</p><pre><code><div class="widget Blog" id="Blog1"><br /> <div class="blog-posts hfeed"><br /> <div class="date-outer"><br /> <div class="date-posts"><br /> <div class="post-outer"><br /> <div class="post hentry"><br /> <br /> … dan seterusnya …<br /> <br /> <div><span style="color:green;"><!-- .post --></span><br /> <div><span style="color:green;"><!-- .post-outer --></span><br /> <span style="color:red;"><div class='clear'></div></span><br /> <div><span style="color:green;"><!-- .date-posts --></span><br /> <div><span style="color:green;"><!-- .date-outer --></span><br /> <div><span style="color:green;"><!-- .blog-posts --></span><br /><div><span style="color:green;"><!-- .Blog #Blog1 --></code></pre></span><p style="font-style:italic;">Catatan: untuk pengaturan CSS (<em>Cascading Style Sheets</em>) <code><div class='clear'></div></code> dapat kita temui pada posting <a href="http://optimasi-blog.blogspot.com/2012/12/membuat-template-blog-hasil-karya.html">Membuat Template Blog Hasil Karya Sendiri</a> dengan kode ditandai warna biru.</p><p>Trik atau toturial yang telah dijelaskan di atas tidak mutlak harus demikian serta tergantung pada struktur pengkodean pada masing-masing <em>template</em>. Dan jika ditelaah, maka kita akan menemukan kode/kata kunci untuk membuat suatu elemen mempunyai letak yang sejajar (dalam baris tertentu), yakni <code>display: inline;</code>, <code>float: left;</code>, <code>position: relative;</code>, dan mungkin <code>width</code>.</p>

Posted by Hii Sekai

Microdata pada Blogger.com

<p>Sebuah hal yang menarik, ketika Blogger™ memasukkan format <em>microdata</em> dalam desain <em>default template</em>, namun belum tentu berlaku jika kita serta merta menggantinya dengan <em>template</em> bukan <em>default</em> BLogger™. <em>Microdata</em> — seperti juga microformat <span class="amp">&</span> <abbr title="Resource Description Framework – in – attributes">RDFa</abbr> — bermanfaat untuk menerjemahkan informasi yang disertakan dalam tag <abbr title="Hypertext Markup Language">HTML</abbr> dengan cara yang dapat dipahami oleh mesin penelusur. Kemungkinan besar hal ini juga bermanfaat sebagai salah satu variabel dalam <a href="http://optimasi-blog.blogspot.com/2012/11/memperbaiki-struktur-blog.html">memperbaiki struktur blog</a> yang telah diterbitkan pada posting sebelumnya.<a name='more'></a></p><p>Sebagian kecil contoh telah kami berikan dalam penerapan <a href="http://optimasi-blog.blogspot.com/2012/11/membuat-navigasi-breadcrumbs-dengan.html">navigasi breadcrumbs dengan microdata</a>. Sedangkan secara keseluruhan, saya akan mencoba untuk menguraikan pada posting ini. Perlu menjadi catatan bahwa <em>microdata</em> yang dimaksud merujuk kepada schema.org, seperti <code>Blog</code>, <code>BlogPosting</code>, dan <code>Comment</code>. Kemudian hal-hal yang terkait dengan ‘basa-basi publik’ — <em>rating</em> blog yang dibuat oleh pengelola sendiri — tidak disertakan.</p><h3>Markah (<em>markup</em>) meta deskripsi blog</h3><p>Oleh karena meta deskripsi telah dimasukkan dalam blog — tepatnya pada markah <code><b:include data='blog' name='all-head-content'/></code> — kemungkinan meta deskripsi <em>microdata</em> berikut kurang bermanfaat. Terkecuali untuk memperkaya cuplikan struktur data. Meta deskripsi dengan <em>microdata</em> ini dapat diletakkan di bawah <code><body></code> atau di bawah pengkodean navbar.</p><pre><code><span style="color:red;"><body expr:class='"loading" + data:blog.mobileClass'></span><br /> <b:if cond='data:blog.pageType == <span class="amp">&</span>quot;index<span class="amp">&</span>quot;'><br /> <div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'><br /> <b:if cond='data:blog.pageName == <span class="amp">&</span>quot;<span class="amp">&</span>quot;'><br /> <span style="color:green;"><!-- Add schema.org description on home page --></span><br /> <span style="color:blue;"><b:if cond='data:blog.metaDescription'><br /> <meta expr:content='data:blog.metaDescription' itemprop='description'/><br /> </b:if></span><br /> <b:else/><br /> <span style="color:green;"><!-- Avoid duplicate schema.org description on label and search page --></span><br /> <b:if cond='data:blog.searchLabel'><br /> <span class="amp">&</span>lt;meta content=<span class="amp">&</span>quot;<span style="color:blue;">Penelusuran arsip <data:blog.title/> berdasarkan label <data:blog.pageName/></span><span class="amp">&</span>quot; itemprop=<span class="amp">&</span>quot;description<span class="amp">&</span>quot;/<span class="amp">&</span>gt;<br /> <b:else/><br /> <span class="amp">&</span>lt;meta content=<span class="amp">&</span>quot;<span style="color:blue;">Arsip <data:blog.title/> berdasarkan <data:blog.pageName/></span><span class="amp">&</span>quot; itemprop=<span class="amp">&</span>quot;description<span class="amp">&</span>quot;/<span class="amp">&</span>gt;<br /> </b:if><br /> </b:if><br /> </div><!-- itemscope itemtype='http://schema.org/Blog' --><br /> <b:else/><br /> <b:if cond='data:blog.pageType == <span class="amp">&</span>quot;archive<span class="amp">&</span>quot;'><br /> <div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'><br /> <span style="color:green;"><!-- Add schema.org description on archive page --></span><br /> <span class="amp">&</span>lt;meta content=<span class="amp">&</span>quot;<span style="color:blue;">Penelusuran arsip <data:blog.title/> berdasarkan bulan <data:blog.pageName/></span><span class="amp">&</span>quot; itemprop=<span class="amp">&</span>quot;description<span class="amp">&</span>quot;/<span class="amp">&</span>gt;<br /> </div><!-- itemscope itemtype='http://schema.org/Blog' --><br /> <b:else/><br /> <div itemscope='itemscope' itemtype='http://schema.org/BlogPosting' style='display: none;'><br /> <span style="color:green;"><!-- Add schema.org description on item and static page --></span><br /> <span style="color:blue;"><b:if cond='data:blog.metaDescription'><br /> <meta expr:content='data:blog.metaDescription' itemprop='description'/><br /> </b:if></span><br /> </div><!-- itemscope itemtype='http://schema.org/BlogPosting' --><br /> </b:if><br /> </b:if><br /><br /> …<br /><br /></body></code></pre><p style="font-style:italic;">Catatan: kode yang diberi warna biru merupakan deskripsi yang akan ditampilkan pada pengujian <em>rich snippets</em>.</p><h3>Markah <code>schema.org/Blog</code></h3><p>Apabila kita mengambil referensi berdasarkan <em>template</em> standar Blogger™, maka skema <em>microdata</em> <code>Blog</code> akan terlihat seperti di bawah ini.</p><pre><code><b:if cond='data:blog.pageType == "index"'><br /> <span style="color:red;"><div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'></span><br /> <meta expr:content='data:blog.title' itemprop='name'/><br /> <b:if cond='data:blog.metaDescription'><br /> <meta expr:content='data:blog.metaDescription' itemprop='description'/><br /> </b:if><br /> </div><br /></b:if></code></pre><p>Oleh karena alasan tertentu, maka markah itu saya kustomisasi, dimana sebagian diletakkan sebagai deskripsi (sub judul “Markah (<em>markup</em>) meta deskripsi blog”) <span class="amp">&</span> sisanya akan dikonfigurasi pada elemen lain, seperti pada elemen pembungkus. Detail akan ditunjukkan pada contoh pengkodean berikut ini.</p><pre><code><span style="color:red;"><div id='content' itemscope='itemscope' itemtype='http://schema.org/Blog'></span><br /> <header id='header-content'><br /> <div class='head-wrap'><br /> <div id='header-group'><br /> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'><br /><b:widget id='Header1' locked='true' title='Title Blog (Header)' type='Header'/><br /></b:section><br /> </div><br /> <div id='search'><br /> </div><br /> <nav id='main-menu'><br /> </nav><br /> </div><br /> </header><br /><br /> …<br /><br /> <footer id='footer-content'><br /> <p><span class="amp">&</span>amp;copy; 2012 Aris Asmara diberdayakan oleh Blogger.com</p><br /> </footer><br /></div></code></pre><h4>Kustomisasi properti skema <code>name</code>, <code>url</code>, dan <code>about</code></h4><p>Kita dapat memasukkan format <em>microdata</em> melalui tag-tag tertentu, seperti <code><span></code> atau meta. Sedangkan properti skema <code>Blog</code> antara lain berisi <code>name</code>, <code>url</code>, dan <code>about</code> dapat dikonfigurasi melalui elemen <em>header</em> blog.</p><pre><code> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'><br /><b:widget id='Header1' locked='true' title='Title Blog (Header)' type='Header'><br />…<br /><b:includable id='title'><br /> <span style="color:red;"><meta expr:content='data:blog.title' itemprop='name'/><br /> <meta expr:content='data:blog.homepageUrl' itemprop='url'/></span><br /> <b:if cond='data:blog.url == data:blog.homepageUrl'><br /> <data:title/><br /> <b:else/><br /> <a expr:href='data:blog.homepageUrl'><data:title/></a><br /> </b:if><br /></b:includable><br /><b:includable id='description'><br /> <div class='descriptionwrapper'><br /> <p class='description'<span style="color:red;">itemprop='about'</span>><span><data:description/></span></p><br /> </div><br /></b:includable><br />…<br /></b:widget><br /></b:section></code></pre><h3>Markah <code>schema.org/BlogPosting</code></h3><p>Bagi pengguna <em>template default</em> pasti sudah tidak asing lagi dengan markah berikut, karena ia sudah dimasukkan oleh perancang.</p><pre><code><b:includable id='post' var='post'><br /> <span style="color:red;"><div class='post hentry' <mark>itemprop='blogPost'</mark> itemscope='itemscope' itemtype='http://schema.org/BlogPosting'></span><br /> <span style="color:blue;"><b:if cond='data:post.thumbnailUrl'><br /> <meta expr:content='data:post.thumbnailUrl' itemprop='image_url'/><br /> </b:if></span><br /> <span style="color:orange;"><meta expr:content='data:blog.blogId' itemprop='blogId'/><br /> <meta expr:content='data:post.id' itemprop='postId'/></span><br /><br /> <a expr:name='data:post.id'/><br /> <br /> …<br /> <br /></b:includable></code></pre><p>Ketika kita melakukan uji coba terhadap struktur data, terdapat peringatan bahwa properti <code>image_url</code>, <code>blogId</code>, dan <code>postId</code> tidak termasuk dalam skema. Mengapa hal ini terjadi? Setelah kembali melihat beberapa properti yang dapat dimasukkan dalam skema <code>BlogPosting</code> pada schema.org, ternyata tidak satupun properti di atas digolongkan sebagai bagian skema <code>BlogPosting</code>. Oleh karena itu kita dapat menghilangkan atau melakukan konfigurasi ulang terhadap ketiga properti itu. Berikut merupakan konfigurasi untuk properti <code>image_url</code>.</p><pre><code><span style="color:blue;"><b:if cond='data:post.thumbnailUrl'><br /> <meta expr:content='data:post.thumbnailUrl' itemprop='thumbnailUrl'/><br /></b:if></span></code></pre><p style="font-style:italic;">Catatan: selain properti <code>thumbnailUrl</code>, kita dapat pula menandainya dengan properti <code>image</code>.</p><p>Sedangkan properti <code>blogId</code> dan <code>postId</code> — setahu saya — dulu berada pada elemen <post-footer>, tepatnya dalam kode <code>post-author</code>. Mungkin alasan pemindahan tersebut nantinya akan terkait dengan skema struktur data <code>Product</code> (<ins>red: hanya opini saya</ins>). Kembali ke pokok utama, untuk sementara properti <code>blogId</code> dan <code>postId</code> dihilangkan dari hirarki skema, namun akan dimasukkan kembali dalam kode <code>post-author</code> dengan konfigurasi sebagai berikut:</p><pre><code><span class='post-author vcard'><br /> <b:if cond='data:top.showAuthor'><br /> <data:top.authorLabel/><br /> <b:if cond='data:post.authorProfileUrl'><br /> <span class='fn' <mark>itemprop='author'</mark> itemscope='itemscope' itemtype='http://schema.org/Person'><br /> <span style="color:orange;"><meta expr:content='data:blog.blogId' itemprop='owns'/><br /> <meta expr:content='data:post.id' itemprop='owns'/></span><br /> <meta expr:content='data:post.authorProfileUrl' itemprop='url'/><br /> <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'><br /> <span itemprop='name'><data:post.author/></span><br /> </a><br /> </span><br /> <b:else/><br /> <span class='fn' <mark>itemprop='author'</mark> itemscope='itemscope' itemtype='http://schema.org/Person'><br /> <span style="color:orange;"><meta expr:content='data:blog.blogId' itemprop='owns'/><br /> <meta expr:content='data:post.id' itemprop='owns'/></span><br /> <span itemprop='name'><data:post.author/></span><br /> </span><br /> </b:if><br /> </b:if><br /></span></code></pre><p style="font-style:italic;">Catatan: untuk melihat apakah landasan properti tersebut benar atau keliru, mari kita amati pada <a rel="nofollow" href="http://schema.org/Person">http://schema.org/Person</a>.</p><h4>Properti <code>name</code> dan <code>url</code></h4><pre><code><a expr:name='data:post.id'/><br /><b:if cond='data:post.title'><br /> <span style="color:red;"><h3 class='post-title entry-title' itemprop='name'></span><br /> <b:if cond='data:post.link'><br /> <a expr:href='data:post.link'><data:post.title/></a><br /> <b:else/><br /> <b:if cond='data:post.url'><br /> <b:if cond='data:blog.url != data:post.url'><br /> <a expr:href='data:post.url'><data:post.title/></a><br /> <b:else/><br /> <data:post.title/><br /> </b:if><br /> <b:else/><br /> <data:post.title/><br /> </b:if><br /> </b:if><br /> </h3><br /></b:if></code></pre><p>Penambahan markah skema <code>BlogPosting</code> pada tag <code>entry-title</code> bisa terdiri dari beberapa versi. Seorang blogger mungkin tetap pada properti tersebut, sedangkan yang lain menambahnya menjadi <span style="color:red;"><code>itemprop='name headline'</code></span> atau merubahnya menjadi <span style="color:red;"><code>itemprop='headline'</code></span>. Variasi itu tidak akan menimbulkan pesan peringatan, ketika di uji pada alat <em>rich snippets</em>. Kemudian kita dapat pula menambahkan properti <code>url</code> yang ditunjukkan oleh markah di bawah ini.</p><pre><code> <b:if cond='data:post.link'><br /> <span style="color:red;"><meta expr:content='data:post.link' itemprop='url'/></span><br /> <a expr:href='data:post.link'><data:post.title/></a><br /> <b:else/><br /> <b:if cond='data:post.url'><br /> <b:if cond='data:blog.url != data:post.url'><br /> <span style="color:red;"><meta expr:content='data:post.url' itemprop='url'/></span><br /> <a expr:href='data:post.url'><data:post.title/></a><br /> <b:else/><br /><br /> …<br /><br /> </b:if></code></pre><p style="font-style:italic;">Catatan: <code>itemprop='url'</code> tidak akan ditampilkan pada halaman posting, sehingga diperlukan kostumisasi kembali jika ingin memunculkannya. <em>Nah</em>, masalah ini akan dibahas pada penggunaan elemen <code>post-timestamp</code>.</p><h4>Properti <code>articleBody</code></h4><p>Skema <code>BlogPosting</code> dengan properti ini telah terdapat pula pada <em>template</em> standar Blogger™ dengan peletakkan yang unik <span class="amp">&</span> menarik.</p><pre><code><b:if cond='data:blog.metaDescription == <span class="amp">&</span>quot;<span class="amp">&</span>quot;'><br /> <span style="color:green;"><!-- Then use the post body as the schema.org description, for good G+/FB snippeting. --></span><br /> <div class='post-body entry-content' expr:id='<span class="amp">&</span>quot;post-body-<span class="amp">&</span>quot; + data:post.id' <span style="color:red;">itemprop='description articleBody'</span>><br /> <data:post.body/><br /> <div style='clear: both;'/> <span style="color:green;"><!-- clear for photos floats --></span><br /> </div><br /><b:else/><br /> <div class='post-body entry-content' expr:id='<span class="amp">&</span>quot;post-body-<span class="amp">&</span>quot; + data:post.id' <span style="color:red;">itemprop='articleBody'</span>><br /> <data:post.body/><br /> <div style='clear: both;'/> <span style="color:green;"><!-- clear for photos floats --></span><br /> </div><br /></b:if></code></pre><p>Saya rasa ini merupakan terobosan yang sangat baik dari perancang. Konfigurasi pengkodean di atas akan berperan untuk membantu pengelola blog, terutama yang sudah ‘menelurkan’ banyak posting. Apa alasanya? Coba kita perhatikan markah tersebut, penggunaan <code><b:if cond='data:blog.metaDescription == <span class="amp">&</span>quot;<span class="amp">&</span>quot;'></code> dan diiringi dengan <code>itemprop='description <del>articleBody</del>'</code> merupakan kata kunci agar duplikasi meta deskripsi posting tidak terjadi, jika penulis lupa memasukkan deskripsi pada <em>editor</em> posting atau tidak mengaktifkan meta deskripsi dalam <a href="http://optimasi-blog.blogspot.com/2012/09/kustomisasi-setelan-pada-preferensi.html">setelan pengaturan pada preferensi penelusuran</a>. Arti sederhananya mungkin adalah deskripsi posting akan diterjemahkan secara otomatis, meskipun penulis tidak memasukkannya. Namun jika meta deskripsi posting telah dimasukkan penulis, maka yang akan ditampilkan adalah hasil isian dari penulis posting tersebut.</p><h4>Properti <code>articleSection</code></h4><p>Para blogger yang biasanya menambah beberapa elemen di bawah posting — elemen posting terkait — dapat memanfaatkan markah <code>articleSection</code>. Tetapi ia bukan <code>articleBody</code>, agar lebih jelas akan saya coba contohkan seperti yang ditunjukkan pada pengkodean berikut.</p><pre><code><b:if cond='data:blog.metaDescription == <span class="amp">&</span>quot;<span class="amp">&</span>quot;'><br /> <span style="color:green;"><!-- Then use the post body as the schema.org description, for good G+/FB snippeting. --></span><br /> <div class='post-body entry-content' expr:id='<span class="amp">&</span>quot;post-body-<span class="amp">&</span>quot; + data:post.id' itemprop='description articleBody'><br /> <data:post.body/><br /> <div style='clear: both;'/> <span style="color:green;"><!-- clear for photos floats --></span><br /> </div><br /> <span style="color:blue;"><b:if cond='data:blog.pageType == <span class="amp">&</span>quot;item<span class="amp">&</span>quot;'><br /> <aside class='related-posts' <span style="color:red;">itemprop='articleSection'</span>><br /> …<br /> </aside><br /> <div class='clear;'></div><br /> </b:if></span><br /><b:else/><br /> <div class='post-body entry-content' expr:id='<span class="amp">&</span>quot;post-body-<span class="amp">&</span>quot; + data:post.id' itemprop='articleBody'><br /> <data:post.body/><br /> <div style='clear: both;'/> <span style="color:green;"><!-- clear for photos floats --></span><br /> </div><br /> <span style="color:blue;"><b:if cond='data:blog.pageType == <span class="amp">&</span>quot;item<span class="amp">&</span>quot;'><br /> <aside class='related-posts' <span style="color:red;">itemprop='articleSection'</span>><br /> …<br /> </aside><br /> <div class='clear;'></div><br /> </b:if></span><br /></b:if></code></pre><h4>Properti <code>url</code> dan <code>datePublished</code> pada <code>post-timestamp</code></h4><p>Properti ini juga telah ditambahkan oleh perancang <em>template</em> Blogger™. Ketika sebuah halaman posting terbuka, maka judul posting — umumnya — tidak memiliki pranala (<em>link</em>). Oleh karena itu skema <em>microdata</em> dengan properti <code>url</code> dialihkan ke elemen <code>post-timestamp</code>. Dengan catatan pengelola blog belum melakukan perubahan struktur data pada <code>entry-title</code> (<code>post-title</code>).</p><pre><code><span class='post-timestamp'><br /> <b:if cond='data:top.showTimestamp'><br /> <data:top.timestampLabel/><br /> <b:if cond='data:post.url'><br /> <span style="color:red;"><meta expr:content='data:post.url' itemprop='url'/></span><br /> <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' <span style="color:red;">itemprop='datePublished'</span>><span style="color:blue;"><span class='updated'></span><data:post.timestamp/><span style="color:blue;"></span></span></abbr></a><br /> </b:if><br /> </b:if><br /></span></code></pre><p style="font-style:italic;">Catatan: ada yang merasa aneh pada kode yang berwarna biru? Hal itu hanya ‘latah’ saya untuk menghilangkan peringatan pada alat <em>rich snippets</em> ketika menguji struktur data blog ini.</p><h4>Properti <code>discussionUrl</code></h4><p>Skema properti ini akan muncul jika dan hanya jika pengelola menampilkannya pada halaman indeks, sedangkan pada halaman posting atau halaman statis —biasanya— tidak ditampilkan. Meskipun ditampilkan, maka besar kemungkinan pengkodean dengan menempatkan <code>itemprop='discussionUrl'</code> akan sama pula.</p><pre><code><span class='post-comment-link'><br /> <b:if cond='data:blog.pageType != "item"'><br /> <b:if cond='data:blog.pageType != "static_page"'><br /> <b:if cond='data:post.allowComments'><br /> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' <span style="color:red;">itemprop='discussionUrl'</span>><br /> <data:post.commentLabelFull/><br /> </a><br /> </b:if><br /> </b:if><br /> </b:if><br /></span></code></pre><h4>Properti <code>keywords</code></h4><p>Pengkodean dengan markah <em>microdata</em> <code>BlogPosting</code> dengan properti <code>keywords</code> secara sederhana dapat kita letakkan pada elemen <code>post-labels</code>.</p><pre><code><span class='post-labels'><br /> <b:if cond='data:post.labels'><br /> <data:postLabelsLabel/><br /> <b:loop values='data:post.labels' var='label'><br /> <a expr:href='data:label.url' rel='tag'><span style="color:red;"><span itemprop='keywords'></span><data:label.name/><span style="color:red;"></span></span></a><b:if cond='data:label.isLast != "true"'>,</b:if><br /> </b:loop><br /> </b:if><br /></span></code></pre><h3>Markah <code>schema.org/Comment</code></h3><p>Oleh karena kebanyakan para blogger menggunakan sistem komentar bersarang (<em>threaded comments</em>), maka konfigurasi hanya akan dilakukan di sekitar daerah judul komentar. Adapun properti yang dimanfaatkan sebagai <em>markup</em> adalah <code>name</code> dan <code>interactionCount</code> khusus pada jumlah komentar yang masuk. Menyisipkan atau memberi <em>markup microdata</em> pada sesi ini dibagi menjadi dua, yakni sebelum ada komentar (<em>comments</em>) <span class="amp">&</span> setelah ada komentar (<em>threaded comments</em>).</p><pre><code><b:includable id='comments' var='post'><br /> <span style="color:red;"><div class='comments' id='comments' <mark>itemprop='comment'</mark> itemscope='itemscope' itemtype='http://schema.org/Comment'></span><br /> <span style="color:blue;"><b:if cond='data:post.numComments != 0'><br /> <span style="color:red;"><span class="amp">&</span>lt;meta content=<span class="amp">&</span>quot;UserComments: <data:post.numComments/><span class="amp">&</span>quot; itemprop=<span class="amp">&</span>quot;interactionCount<span class="amp">&</span>quot;/<span class="amp">&</span>gt;</span><br /> </b:if></span><br /> <a name='comments'/><br /> <h4 <span style="color:red;">itemprop='name'</span>><data:post.commentLabelFull/></h4><br /><br /> …<br /><br /> </div><br /></b:includable></code></pre><pre><code><b:includable id='threaded_comments' var='post'><br /> <span style="color:red;"><div class='comments' id='comments' <mark>itemprop='comment'</mark> itemscope='itemscope' itemtype='http://schema.org/Comment'></span><br /> <span style="color:blue;"><b:if cond='data:post.numComments != 0'><br /> <span style="color:red;"><span class="amp">&</span>lt;meta content=<span class="amp">&</span>quot;UserComments: <data:post.numComments/><span class="amp">&</span>quot; itemprop=<span class="amp">&</span>quot;interactionCount<span class="amp">&</span>quot;/<span class="amp">&</span>gt;</span><br /> </b:if></span><br /> <a name='comments'/><br /> <h4 <span style="color:red;">itemprop='name'</span>><data:post.commentLabelFull/></h4><br /><br /> …<br /><br /> </div><br /></b:includable></code></pre><p>Khusus bagi penggunaan komentar tidak bersarang, <em>markup microdata</em> yang dimanfaatkan adalah <code><mark>itemprop='UserComments'</mark></code> dengan tipe <code>schema.org/UserComments</code>. Sedangkan propertinya antara lain: <code>commentText</code>, <code>commentTime</code>, <code>creator</code>, dan <code>replyToUrl</code> serta dapat pula ditambahkan <code>schema.org/Person</code> sebagai bagian di dalam struktur <code>schema.org/comment</code>. Sedangkan penggunaan kode dengan latar berwarna kuning menjelaskan keterkaitan antara markah yang terkandung di dalam masing-masing tipe (<code>itemtype</code>), dimana mereka merupakan satu-kesatuan yang utuh.</p><p class="first-line">Berdasarkan uraian yang sangat panjang di atas, format <em>microdata</em> dapat diterapkan beragam atau tergantung “pemberi markah”. Namun memberi sebuah <em>markup</em> terhadap data atau elemen tidak dapat dilakukan secara sembarangan, karena akan turut berpengaruh dalam menghasilkan markah yang semantik. Hal ini terkait pula dengan posting yang saya beri judul “Microdata pada Blogger.com”, sangat dimungkinkan terdapat kekeliruan atau kesalah-tafsiran, sehingga kritik dan saran sangat dibutuhkan untuk memperbaikinya. Seperti biasa Optimasi Blog selalu membuka formulir komentar lebar-lebar <span class="amp">&</span> seandainya telah ditutup pun kita masih bisa berbagi melalui <a href="http://optimasi-blog.blogspot.com/p/contact.html">halaman kontak</a>. :)</p><h3>Alat <span class="amp">&</span> Bahan bacaan</h3><p>Berikut alat dan beberapa bahan bacaan yang mungkin akan menambah pengetahuan serta wawasan kita dalam memahami tentang struktur skema <em>microdata</em>.</p><ul><li><cite><a href="http://www.google.com/webmasters/tools/richsnippets" title="Google Webmaster Tools: Structured Data Testing Tool">Structured Data Testing Tool</a></cite> — Alat Webmaster Google.</li><li><cite><a href="http://schema.org/docs/gs.html" title="schema.org: Getting started with schema.org">Getting started with schema.org</a></cite> — schema.org.</li><li><cite><a href="http://support.google.com/webmasters/bin/answer.py?hl=en&answer=99170" title="Webmaster Tools Answer: Rich snippets, 2012">Rich snippets (microdata, microformats, RDFa, and Data Highlighter)</a></cite> — Perkakas Webmaster: Tentang cuplikan kaya <span class="amp">&</span> data terstruktur.</li></ul>

Posted by Hii Sekai

Apa itu Off page SEO? | Mengenal Off Page SEO

<div dir="ltr" style="text-align: left;" trbidi="on"><br /><a href="http://belajar-blogdanseo.blogspot.com/2012/12/mengenal-off-page-seo.html"><b>Mengenal Off Page SEO</b></a> - Selain<a href="http://belajar-blogdanseo.blogspot.com/2012/12/apa-sih-on-page-seo-mengenal-on-page-seo.html" target="_blank"> On page seo</a> yang telah kita bahas dalam <a href="http://belajar-blogdanseo.blogspot.com/2012/12/belajar-dasar-seo.html" target="_blank">dasar seo</a> anda juga harus mengenal apa itu off page seo, <i>off page seo adalah</i> bagian penunjang lainnya untuk meningkatkan rangking sebuah blog. Seperti yang telah kita ketahui, untuk membangun sebuah blog dengan rengking yang di pandang layak oleh mesin pencari kita perlu membangun jaringan link.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8TAHvAHN2BUH31M3C6QIJ3sv6-yJOo_cFOKnkcIjbfie2-mwMGm_W6wFJwUr-5ghcqPYTXgDdMqSXAL9BP_3oEZ_jYGh9bFAB15JfTvJYw7QOVJWx6TXLmWWboNdcD2TKGLL61TL2uOYB/s1600/mengenal+off+page+seo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="mengenal off page seo" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8TAHvAHN2BUH31M3C6QIJ3sv6-yJOo_cFOKnkcIjbfie2-mwMGm_W6wFJwUr-5ghcqPYTXgDdMqSXAL9BP_3oEZ_jYGh9bFAB15JfTvJYw7QOVJWx6TXLmWWboNdcD2TKGLL61TL2uOYB/s1600/mengenal+off+page+seo.png" title="off page seo" /></a></div><br />Dalam <u>off page seo</u> yang perlu kita lihat disini bukanlah mengenai jumlah link atau backlink yang menuju blog anda, melainkan kualitas backlink yang menuju blog anda. Untuk mendapatkan backlink yang berkualitas pastikan backlink yang menuju ke blog anda itu dari website yang ternama, sehingga backlink tersebut memberikan efek yang bagus untuk blog yang anda kelolah.<br /><br />Contoh website yang memberikan backlink yang berkualitas yaitu website universitas, website perusahaan ternama ataupun website surat kabar. Intinya usahakan backlink yang menuju blog anda dari website-website ataupun blog yang memiliki rengking yang bagus di mesin pencari.<br /><br />Saran saya carilah becklink yang sehat agar mesin pencari seperti google itu menyukai blog anda, Hindari penggunaan tool dalam mencari backlink, karna penggunaan tool dalam mencari backlink itu tidak sehat dalam off page seo blog anda.<br /><br />off page Seo merupakan kebalikan dari on page Seo, jadi hal-hal atau faktor yang di optimalkan  terletak pada luar website atau blog yang akan kita optimasi. Mungkin sampai disini anda telah <b>mengenal apa itu off page seo</b>, bila ada pertanyaan mengenai off page seo anda bisa tanyakan di kolom komentar.<br /><br />Bagaimana pendapat anda mengenai artikel ini?</div>

Posted by Hii Sekai

TIPS SEO MENAIKKAN SERP BLOG

<div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-eDjLcLvUJaM/UMrG7bVVs7I/AAAAAAAACdY/1Fa8gXKFHNs/s1600/icahbanjarmasin.jpeg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="TIPS SEO MENAIKKAN SERP BLOG" border="0" height="129" src="http://3.bp.blogspot.com/-eDjLcLvUJaM/UMrG7bVVs7I/AAAAAAAACdY/1Fa8gXKFHNs/s320/icahbanjarmasin.jpeg" title="TIPS SEO MENAIKKAN SERP BLOG" width="261" /></a></div><a href="http://www.icahbanjarmasin.com/"><b>TIPS SEO MENAIKKAN SERP BLOG</b></a> <i>Yang</i> itu akan saya share buat teman-teman. Karena ada salah satu dari teman kita yang <strike>Email</strike> ke saya agar tema tersebut diposting sebab <a href="http://www.icahbanjarmasin.com/2012/09/submit-artikel-dan-blog_25.html"> <b>Blog</b></a> dia khususnya artikel punyanya hilang di <i>Search Engine</i>. Memang kalau artikel kita hilang di mesin pencarian seperti <a href="http://www.google.com/"><b> Google</b></a> ada rasa kecewanya juga sih dan itu juga pernah saya alami koq. Nah bagaimana itu bisa terjadi..? Mungkin ada artikel yang lebih berbobot dari pada punya kita,atau ada yang copy paste artikel kita namun dia menyajikannya lebih bagus lagi,dan bermacam-macam perkiraan. Coba kalian sering gabung di <b>FORUM GOOGLE</b> ata pun forum-forum yang ber <a href="http://www.icahbanjarmasin.com/2012/04/trik-seo-2012.html"><i>Page Rank</i></a> tinggi dengan berkomentar disitu kalau ada kesempatan ikut posting juga tentunya dengan menyertakan link-link artikel punya kita. Sekarang kembali ke topik <b>TIPS SEO MENAIKKAN SERP BLOG</b> cara ini saya coba terus apabila ada artikel-artikel saya yang agak down di mesin pencarian dan ini sangat ampuh saya rasa karena hanya sebentar saja semua artikel-artikel saya bagus lagi dimesin pencarian. O ya <b>Tips Seo</b> ini cukup asyik juga karena kita bisa mendapatkan <a href="http://www.icahbanjarmasin.com/2012/09/tips-seo-gratis-backlink-buat-blog.html"> <b>FREE BACKLINK</b></a> yang berperingkat tinggi kalau kalain mau mencoba agar <i>Blog</i> kita terjaga kestabilannya di mesin pencarian silahkan gunakan cara-cara ini. Jangan lupa kalian daftar dulu disana submit artikel atau blog kalian semoga saja bisa sajian kalai ini bisa berguna bagi yang <b>Serp Blog</b> nya lagi turun drastis. <b> </b><br /><br /><br /><a href="http://freebacklinktool.com/login/?action=register"><b>SILAHKAN SUBMIT DISINI ARTIKEL ATAU BLOGMU</b></a><br /><br /><br /><br /><a href="http://www.greatdirectories.org/free.html"> <b> <i>DISINI YANG BER PAGE RANK TINGGI..</i></b></a><br /><br /><br /> Sekian dulu <a href="http://www.icahbanjarmasin.com/"> <i>Trik Seo </i></a> yang bisa saya bagi buat teman-teman semua semoga saja berguna dan bermanfaat.<br /> 

Posted by Hii Sekai

Apa sih On Page Seo ? | Mengenal On page Seo

<div dir="ltr" style="text-align: left;" trbidi="on"><b>Apa sih On Page Seo ? </b>- Seperti yang sudah pernah saya jelaskan sebelum nya pada artikel <a href="http://belajar-blogdanseo.blogspot.com/2012/12/belajar-dasar-seo.html" target="_blank">belajar dasar seo</a> tentang <u>on page seo</u> ini, di artikel yang saya sebutkan tadi di tuliskan apa-apa saja yang terkandung dalam <i>on page seo</i>.<br /><br />Namun kali ini saya akan menambahkan sedikit lagi tentang on page seo. Kalau saya mengartrikan On page seo itu adalah mengoptimalkan bagian halaman blog kita. Sebenernya dalam seo yang paling sulit adalah bagian on page seo ini, Mungkin bagi kalian yang baru di dunia blogger bertanya kenapa kok sulit? kan di mbah-google bisa di cari.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvbOapeq6HnrWpPsVc1NTCrR2BmmHAquxBIPwqv6TO5rwypyCScFpGFYcLwxHL5_eZPDCetvEe3MN02cDom1j1J9KU1qPPyBrZh-h0fpRpBH-FS_Kz1i2w39O77Pdvn7T2H6MKo31ONa9h/s1600/seo-on-page.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="mengenal on page seo" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvbOapeq6HnrWpPsVc1NTCrR2BmmHAquxBIPwqv6TO5rwypyCScFpGFYcLwxHL5_eZPDCetvEe3MN02cDom1j1J9KU1qPPyBrZh-h0fpRpBH-FS_Kz1i2w39O77Pdvn7T2H6MKo31ONa9h/s1600/seo-on-page.jpeg" title="apa sih on page seo" /></a></div><br />Kalau anda memang mempunyai pertanyaan seperti itu, saya akan menjawabnya disini. Kalian tau gak bahwa seo itu adalah hal yang gak pasti, kenapa saya katakan gak pasti !, iya lah, banyak banget tutorial-tutorial di luar sana yang membahas tentang cara mengoptimalkan on page seo ini, tetapi pendapat dari mereka berbeda-beda, contohnya saja trentang mengoptimalkan <b>meta tag</b>, sebagian besar para blogger indonesia sangat mementingkan mera tag ini,( kalau anda tidak tau mate tag bisa anda cari di google ), dan sebagian lagi ber-anggapan kalau meta tag ini tidak terlalu penting, Sampai sekarang pun saya tidak tau mana yang benar dan mana yang salah.<br /><br />Maka dari itu saya katakan bagian seo yang paling sulit itu adalah on page seo, karna banyak sekali mitos-mitos yang di bagikan para blogger di luar sana mengenai on page seo ini, tapi kita gak tau mana yang bener dan mana yang salah, di samping itu juga pihak search engine yang selalu update juga menjadi masalah dalam seo. <br /><br />Tapi ada satu hal yang pasti dalam On page seo, hal itu adalah artikel yang anda tulis. Menurut saya dan pendapat saya, seo pada on page ya artikel anda, karna memang itulah yang akan di cari orang di <i>search engine</i> atau mesin pencari. Dan seo on page yang lain menurut saya hanyalah pendukung saja.<br /><br />Terus Faktor apa saja yang terdapat dalam on page seo? anda bisa baca disini <a href="http://belajar-blogdanseo.blogspot.com/2012/12/belajar-dasar-seo.html" rel="nofollow" target="_blank">blajar dasar seo</a> <br /><br />Sampai disini apakah anda sudah mengerti<b> apa itu on page seo</b>?</div>

Posted by Hii Sekai

Mencoba Daftar Google Adsense

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: left;"></div><div style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><b><a href="http://belajar-blogdanseo.blogspot.com/2012/12/mencoba-daftar-google-adsense.html">Mencoba mendaftar google adsense</a></b> - bosen nulis <a href="http://belajar-blogdanseo.blogspot.com/2012/12/tips-blog.html" target="_blank">tutorial blog </a>dan <a href="http://belajar-blogdanseo.blogspot.com/2012/12/tips-seo.html" target="_blank">tutorial seo</a> terus sesekali berbagi pengalaman pribada ah, Di umur blog ini yang kurang lebih baru jalan 3 minggu saya mencoba untuk mendaftarkan blog ini menjadi publisher google adsense, dan apa yang terjadi...Blog saya di tolak mentah-mentah sama si google.<br /><br />Haduh mulai mikir ada apa mengapa dan karna apa y, kok di tolak sama si google, yang ada dalam benak saya sih mungkin, mungkin ni y karna umur blog saya yang masih balita kali y, tapi setelah saya browser (begitu bukan tulisannya y?) saya menemukan sebuah artikel yang membahas tentang google adsense dan saya sangat menyimak artikel tersebut sambil berkedip-kedip mata saya ( karna udah ngantuk :D ). Di artikel tersebut di jelaskan faktor apa-apa saja yang bisa di terima menjadi publisher google.</div><div style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></div><div class="separator" style="clear: both; text-align: center;"><img alt="daftar google adsense" border="0" height="133" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEzXovMY3LkKm6TNurPHhchPSsVDt4Iw9Y-hY808DzFPqJwbWco8vL8KKROXZOn4MjtIluxCNxUdM1Fob-Lgx6OyegqTaKHGRkySM_yfFNGygP1LDA6zLKrqxYyD3VVwz9hNw0x2m6PBY/s320/google+adsense.jpg" title="Google adsense" width="320" /></div><div style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><br />Saya mengutip ( " ) beberapa tutorial yang ada dalam artikel tersebut, kata artikel tersebut jangan memilih template yang mengunakan read more otomatis. Wah langsung saya gelisah dan kawatir terhadap blog saya ini, JELAS template blog yang saya gunakan ini ada read more otomatis nya, dan saya berfikir gimana lah cara mengatasi nya ni....( sambil garuk-garuk rambut :D). Gak mungkin kan saya hilangkan read more nya, kalo di hilangkan y harus edit satu-satu lagi artikel nya...wahh pusing luar biasa.<br /><br />kalo ada yang punya solusi kasih saran y?.<br /><br />Sebenernya saya masih ragu sama tutorial artikel tersebut, tapi artikel tersebut banyak yang memberikan komentar positif lo alias setuju, berati kan artikel tersebut 70% bisa di percaya lah, apa lagi tulisan nya itu, panjang nya gak kira-kira, sampe ngelenggut" ( ngantuk) kepala saya, Tapi tetep deh kaya nya, saya masih mempertahankan template kesayangan saya ini, gak mau lagi saya rubah-rubah, rang ngedit nya juga hampir 1 bulan ye.<br /><br />Udah dulu ah artikel <b>mencoba daftar google adsesse</b> ini, Artikel ini hanyalah bentuk kepusingan saya :D saja, jadi jangan berfikir kalo saya menyerah y, NO NO NO saya bakalan tetap berjuang untuk mendapatkan yang saya inginkan karna saya di lahirkan untuk jadi pemenang bukan pecundang. ok </div></div>

Posted by Hii Sekai

Cara Rahasia mendapatkan jutaan Backlink

<div dir="ltr" style="text-align: left;" trbidi="on"><a href="http://belajar-blogdanseo.blogspot.com/2012/12/cara-rahasia-mendapatkan-jutaan-backlink.html"><b>Cara Rahasia mendapatkan jutaan Backlink</b></a> - sebenarnya cara ini sangat rahasia, akan tetapi disini saya akan membeberikannya kepada Anda sehingga blog Anda mendapatkan banyak backlink, dan segera diindeks oleh google serta mendapatkan pagerank dari google. Saya sudah merasakan manfaat dari teknik ini dan hasilnya juga sangat maksimal, sehingga blog Saya ini dengan mudah diindeks oleh google dan mendapatkan pagerank dari google. Hal ini merupakan analisa yang saya pelajari dari web/blog para master blogger dan seo, mengapa web/blog mereka dibanjiri dan mendapatkan banyak bakclik serta merajai halaman utama google dengan keyword yang mereka incar.<br /><br />Sebagaimana yang kita ketahui bahwa sampai sekarang ini <b>backlink</b> merupakan senjata yang paling ampuh untuk mendongkrak blog yang kita miliki masuk kehalaman utama google. Statement ini dudukung oleh situs terpercaya yang sering kita dengar yaitu <a href="http://www.alexa.com/" rel="nofollow" target="_blank"><b>alexa</b></a> dengan mengatakan :<br /><br /><br /><blockquote class="tr_bq">Many inbound links can help improve your rank in search engines, and can serve as a measure of a site's reputation. The list below shows the top 100 sites with inbound links to belajar-blogdanseo.blogspot.com. Multiple links from the same site are only counted once. Links from adult sites are counted, but will not be listed below.</blockquote><br />Artinya seperti ini:<br />(Inbound links = Banyaknya Backlink)<br />Inbound link yang banyak dapat membantu meningkatkan peringkat Anda di mesin pencari, dan dapat berfungsi sebagai ukuran reputasi situs. Daftar di bawah ini menunjukkan 100 situs teratas dengan inbound link untuk belajar-blogdanseo.com. Beberapa link dari situs yang sama hanya dihitung sekali. Link dari situs dewasa yang dihitung, tetapi tidak akan tercantum di bawah.<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="mendapatkan backlink" border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhluAJ3TUcG7DZvUpE2DdkXmeu4HBz7dUtRi_9eXyHjQ1-dSSYiiy5MprvymiXwj9olorBVpo5dCdp1R8LsjDfwMEOA3YQ6Fcaxpt3Ai2I2orBnwrSugNwnL6SlwQCFoP40P7_K7U5D5vU/s400/backlink.jpg" title="bcara mendapatkan jutaan backlink" width="400" /></div><br /><br />Banyak para blogger yang ingin sekali mendapatkan backlink, namun dengan cara keliru yaitu dengan black hat seo. Hal ini menurut saya boleh-boleh saja, asalkan tidak ketauan oleh si mbah google, kalau ketauan gimna? yah siap-siap lah web/blognya dibaned atau di blacklist sehingga tidak muncul lagi di google. Ini merupakan resiko yang paling besar, kan sia-sia semuanya kalau sudah di blacklist oleh google.<br /><br />Jika Anda tertarik mendapatkan backlink yang natural dan dijamin halal (emanknya makanan? hehe) tanpa resiko apapun saya akan memberitahu Anda. Tapi dengan 1 syarat, yaitu Anda juga harus mempublikasikannya juga kedalam blog Anda. Ini merupakan syarat <b>wajib</b> yang harus Anda lakukan agar blog Anda mendapatkan banyak baclink. Caranya gimana sih? kok dari tad cuap-cuap mulu?. Begini caranya..<br /><br />1. Klik link ini<a href="http://didianto.com/go/?id=nurf4dilah" rel="nofollow" target="_blank"> yourbacklink</a><br /><br />2. Jika sudah masuk kesitus itu, maka daftarkan blog Anda<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="mudah mendapatkan backlink" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEichTZmWNkAeItjJb3jrcT3sIvHY86_B_kMuDUSA6Ptvrfo8n8kBWhuTUqrDRbPWTeRSQLftTzMMbq_4dzPq3M2UB11h9Tso67ARKn7CVflSIllvPW7y7J5wf5_PCQ_QgS7Q7OJgDVGCJo/s1600/mudah_mendapatkan_baclink.jpg" title="cara rahasia mendapatkan banyak back link" /></div><br />lihat pada bagian bawah web tersebut, kemudian disana Anda akan dipandu bagaimana cara mendaftakan blog Anda dan beberapa keterangan mengenai cara mendapatkan backlink dengan mudah.<br /><br />3. Jika Anda sudah mendaftarkan, sebagaimana yang telah saya sebutkan diatas, Anda wajib membuat postingan mengenai hal ini <u><i><b>"cara rahasia mendapatkan jutaan backlink"</b></i></u>, (contek saja punya saya, tapi di edit dikitlah biar jangan ketauan nyonteknya :D).</div>

Posted by Hii Sekai

Cara Mendaftarkan blog di google

<div dir="ltr" style="text-align: left;" trbidi="on"><a href="http://belajar-blogdanseo.blogspot.com/2012/12/cara-mendaftarkan-blog-di-google.html" target=""><b>Cara Mendaftarkan Blog di Google</b></a> - Mendaftarkan blog di google adalah hal yang harus Anda lakukan jika Anda ingin google lebih cepat mengindex blog serta artikel yang Anda postingkan dalam blog anda. Selain itu dengan mendaftarkan blog yang kita milki ke google akan mempengaruhi dan <a href="http://belajar-blogdanseo.blogspot.com/2012/12/tips-mudah-meningkatkan-pengunjung-blog.html" target="_blank">meningkatkan jumlah pengunjung blog</a>. Mengapa demikian? karena seperti yang telah saya sebutkan diatas tadi, ketika blog serta artikel yang anda posting cepat terindex oleh google apalagi masuk pada halaman utama google dan dicari orang banyak orang, maka secara otomatis pengunjung akan terus mambanjiri blog Anda, bahkan tidak mustahil blog Anda pun mendapatkan Pagerank dari google. Tidak hanya saya, para sesepuh dan master <a href="http://belajar-blogdanseo.blogspot.com/2012/12/pengenalan-seo.html" target="_blank">seo</a> juga menyarankan agar web atau blog segera didaftarkan ke google.<br /><br />Mendaftarkan blog ke Google adalah salah satu cara untuk mengoptimasi blog, namun jika blog Anda hanya sekedar untuk pribadi, artinya hanya orang-orang tertentu saja yang dapat mengunjungi blog Anda atau hanya berisikan curhatan pribadi, mendaftarkan blog ke google tidaklah terlalu penting. Akan tetapi jika blog Anda ingin bersaing dan mendapatkan posisi di google dan ingin mendapatkan popularitas, hal ini adalah hal terpenting dan harus Anda lakukan. Untuk itu <a href="http://belajar-blogdanseo.blogspot.com/2012/12/belajar-blog.html" target="_blank">membuat blog</a> dan memiliki blog tidaklah cukup tanpa pengoptimalisasian blog yang kita miliki. Disini saya akan membantu Anda tentang bagaimansa cara mendaftarkan blog ke google webmaster seperti yang saya jelaskan berikut ini.<br /><br /><br /><h2><b>Mendaftarkan Blog di Google Webmaster</b></h2><br />1. Silahkan kunjungi <a href="http://www.google.com/addurl" rel="nofollow" target="_blank">www.google.com/addurl</a><br />2. Pada kotak URL, silahkan masukkan alamat blog Anda, misal : http://belajar-blogdanseo.blogspot.com/<br />3. Masukkan kode Capca lalu klik Sumbit Request<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/_iEnxos6ddpE/S_F9gDpWf2I/AAAAAAAABkU/eBL0VUnoSpg/google%20Add%20Url.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="229" src="http://2.bp.blogspot.com/_iEnxos6ddpE/S_F9gDpWf2I/AAAAAAAABkU/eBL0VUnoSpg/google%20Add%20Url.JPG" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div>Langkah selanjutnya mengambil kode verifikasi untuk dipasang keblog dari google webmaste tool, caranya perhatikan penjelasan berikut ini.<br /><br />1. Buka <a href="https://www.google.com/webmasters/tools/" rel="nofollow" target="_blank">google webmaster tools</a><br /><br />2. Klik tab Manage site/Kelola situs<br /><br />4. Tambahkan atau hapus pengguna<br /><br />5. Disebelah kanan alamat email Anda terdapat opsi Owner site/pemilik, klik opsi tersebut, kemudian klik laman verifikasi pemilik.<br /><br />6. Lalu pilih "Verifikasi dengan menggunakan metode yang berbeda"  (opsi ini berada di atas)<br /><br />Nah, pada halaman ini terdapat 4 pilihan verifikasi diantaranya yaitu menggunakan :<br /><ul><li>Tag HTML</li><li>Google Analytic</li><li>Penyedia nama domain</li><li>Unggahan file HTML</li></ul>Pilih pada opsi pertama, yaitu "Tag HTML" Anda Akan diberikan Tag atau Kode verifikasi, seperti dibawah ini<br />contoh:<br /><blockquote class="tr_bq"><span style="color: red;"><meta content='aRZ5ubdJOQEHD7fq_eTQ3UnGHhDHCOXcnThbBcH2Cqs' name='google-site-verification'/></span></blockquote><br />7. Login / masuk pada blog anda ( blogger.com ), kemudian dalam halaman Template, pilih >> tab Edit Html. masukan dan simpan meta name verifikasi yang tadi kita copy dibawah atau setelah tag :<br /><title><data:blog.pageTitle/></title><br /><br />(<span style="color: red;"> tag <title><data:blog.pageTitle/></title> posisinya berada diatas atau jika bingung silahkan gunakan ctrl+f atau bisa juga menggunakan F3 untuk mempermudah pencarian kode tersebut</span><i> </i>) <br /><br />Setelah selesai klik tombol >> Save Template / Simpan Perubahan.<br /><br />8. Kembali ke halaman google webmaster tool. kemudian klik tombol Verify, untuk mengkonfirmasi pendaftaran.<br /><br />9. Jika berhasil ter Verifikasi maka akan ada pemberitahuan bahwa website atau blog anda telah terverifikasi, kemudian klik lanjutkan.<br /><br />Sebenarnya pada tahap awal pada page add url, ketika kita malakukan verifikasi website atau blog dan dinyatakan success atau sedang diproses, website atau blog Anda sudah terdaftar ke search engine google. Namun untuk memperkuat verifikasi kepemilikan sebuah situs maka pemasangan meta tag verifikasi ini sangat membantu, ini merupakan pernyataan dari google.<br /><br />Demikianlah tutorial <u><b>cara mendaftarkan blog di google</b></u> yang dapat saya sampaikan, semoga membantu dan bermanfaat bagi Anda. Pastikan bahwa Anda terus mengunjungi blog belajar-blogdanseo ini, untuk mendapatkan update informasi seputar blogging khususnya blogger dan SEO serta informasi lainnya yang tentunya juga bermanfaat bagi Anda dan menambah wawasan. Sebelum Anda beranjak dari halaman ini saya sangat senang sekali jika Anda bersedia meluangkan sedikit waktu untuk <u><span style="color: red;">men-share</span></u> dan memberikan <u><span style="color: red;">G+1</span></u> agar temen-teman yang lain juga dapat membacanya.</div>

Posted by Hii Sekai

Cara Membuat Like Box Facebook Pada Blog

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;"><b>Cara Membuat Like Box Facebook Pada Blog</b> - Banyak cara dalam penggabungan sebuah blog dengan media jejaring sosial, salah satunya adalah dengan menambahkan like box Facebook pada sebuah blog. Hal ini dilakukan sebagai salah satu bentuk promosi blog anda. <a href="http://belajar-blogdanseo.blogspot.com/2012/12/cara-membuat-like-box-facebook-pada-blog.html"><u><b>Cara Membuat Like Box Facebook Pada Blog</b></u></a> tidaklah susah, namun sebelum membuatnya terlebih dahulu simaklah penjelasan dibawah ini</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Sedikit mengulas cara kerja<b> Like Box</b><b>Facebook</b> ini yaitu ketika salah seorang rekan anda me-like like box di blog anda atau home pagenya maka secara tidak langsung orang tersebut telah berlangganan artikel blog anda. Hal ini juga harus didukung oleh <b>RSS Graffiti</b> yang mempublikasikan postingan baru blog anda kedalam halaman facebook atau halaman profil yang Anda miliki. Nah, untuk mengenal lebih jauh tentang RSS Grafitti silahkan Anda cari di mbah google. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Kembali kepokok permasalahan, ada sesuatu yang saya lupa yaitu memberitahukannya kepada Anda, bahwa sebelum <b>membuat facebook like box</b> ini Anda juga harus sudah memiliki halama facebook atau facebook page, karena itu salah satu syarat untuk membuat<b> </b>facebook like box ini. Jika Anda belum membuatnya silahkan membuat terlebih dahulu.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Jika sudah memilikinya, anda bisa langsung ke pokok pembahasan kita yaitu <b>membuat like box</b>.<br /><br /></div><div style="text-align: justify;">1. Terlebih dahulu Anda harus login ke facebook pribadi Anda.</div><div style="text-align: justify;">2. Agar lebih mudah silahkan klik <a href="https://developers.facebook.com/docs/plugins/" rel="nofollow" target="_blank"><span style="color: blue;">Social Plugins</span></a> ini untuk lansung menuju ke <a href="https://developers.facebook.com/docs/plugins/" rel="nofollow" target="_blank"><span rel="nofollow" style="color: blue;">facebook Developers</span></a>.</div><div style="text-align: justify;">3. Kemudia Anda pilih <b>Like Box</b>. maka akan muncul windoe seperti dibawah ini :</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: justify;"><img alt="cara membuat facebook like box, membuat facebook like box, facebook like box, facebook like box pada blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwBWJ5PLH0p_HPKouE_RS7LbvoqKDHTq_HwGr7w-kQQGDZzZ28z0n7dUclSt-KJTiClSFrPx8HthvVzz1ZOMJJYTJhEY9BsR0pAc1jmB9h86Qaz8SoCr3ICCL7GFKO6OVAHhHIGC0QRl6D/s1600/facebook_like_box.jpg" title="facebook developer" /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">4. Keterangan Gambar :</div><div style="text-align: justify;"><br /></div><ul style="text-align: justify;"><li>Facebook Page URL : diisi dengan URL facebook fans page milik Anda</li></ul><ul style="text-align: justify;"><li>Width : lebar fans like box nantinya</li></ul><ul style="text-align: justify;"><li>Height : tinggi Fans like box nantinya. Kosongkan saja bagian ini, tinggi akan menyesuaikan</li></ul><ul style="text-align: justify;"><li>Color scheme : Ada dua pilihan warna di sini. Light untuk warna terang (putih) dan dark untuk warna gelap (hitam)</li></ul><ul style="text-align: justify;"><li>Show Faces : Beri tanda centang apabila ingin menampilkan avatar orang-orang yang menyukai fans page Anda atau pilih No untuk menyembunyikannya</li></ul><ul style="text-align: justify;"><li>Stream : Beri tanda centang apabila ingin menampilkan situasi terbaru (update terbaru) dari halaman fans page milik Anda</li></ul><ul style="text-align: justify;"><li>Header : Beri tanda centang apabila ingin menampilkan “find us on facebook”</li></ul><div style="text-align: justify;">Jika sudah melakukan konfigurasi yang menurut Anda baik dan sesuai kehendak. Klik “Get Code” untuk mengambil code fans like box tersebut. Setelah itu akan muncul window baru seperti dibawah ini :</div><div style="text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: justify;"><img alt="membuat facebook like box di blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi295m22UK3LY8wHboPKIJ_QJzHFycUQdLfCI8mw7uUDriQ9fnWn-7CwPN_UtCUaFY6QRFd8-c980CLDhIDjlxRsqCohfBFLaoVB-xrw71hQPFFx2nHpd7uJU94_PTSgjzhRxXCt2JJTJCc/s320/code_facebook_like_box.jpg" title="code facebook like box" /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Keterngn : Didalam kotak code Facebook Like Box ini terdiri dari 3 elemen yaitu HTML5, XFBML, dan IFRAME seperti contoh gambar diatas. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">5. Klik IFRAME, nah maka akan keluar  kodenya, setelah itu anda copy ke blog Anda Caranya:</div><ul style="text-align: justify;"><li>Login ke Blogger</li><li>Pilih menu Desain/Rancangan</li><li>Tambah Gadget</li><li>Kemudian pilih HTML/Java Script</li><li>Paste Kode Facebook Like Box tadi kedalamnya</li><li>Kemudian klik save </li></ul><div style="text-align: justify;">Nah selesai dah..</div>Bagaimana menurut anda, <b><i>Cara Membuat Like Box Facebook</i></b> mudah kan?  Bila ada kesulitan silahkan berkomentar. </div>

Posted by Hii Sekai

Tool Pendukung dalam SEO

<div dir="ltr" style="text-align: left;" trbidi="on"><a href="http://belajar-blogdanseo.blogspot.com/2012/12/tool-pendukung-dalam-seo.html"><b>Tool Pendukung dalam SEO</b></a> - Setelah sebelumnya saya membuat artikel tentang <a href="http://belajar-blogdanseo.blogspot.com/2012/12/tips-memilih-template-blog-yang-seo.html" target="_blank">Tips Memilih Template Blog Yang Seo</a>, kali ini saya akan membagikan beberapa tool pendukung dalam SEO. Langsung saja,<br />Untuk mengoptimalkan sebuah web atau blog khususnya pada search engine optimization (SEO), kita tidak dapat melakukannya secara manual, diperlukan beberapa tool pendukung yang dapat memudahkan kita dalam optimasi SEO secara efektif.<br /><br />Ada banyak sekali hal positif yang kita dapati jika kita menggunakan tool pendukung seo yang nantinya saya akan bagikan. Apalagi jika Anda sering mengikuti kontes seo, tool pendukung seo ini adalah tool yang wajib Anda gunakan, sehingga memudahkan Anda dalam optimasi subjek kontes seo.<br /><br />Perlu saya sampaikan kepada teman - temen semua bahwa tool pendukung seo yang akan saya sampaikan merupakan tool seo yang dapat Anda manfaatkan dan di download secara gratis. Baik itu add-ons dari browser mozilla firefox ataupun online seo tool. Untuk tool seo add-ons mozilla firefox dapat Anda lihat screnshotnya seperti dibawah ini.<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghdHSxC9cUquDEO_5i2pBDf7qdJyUDXuuBhTTtUkAbbWc6JT7TGobAIYisbyVn1eLYIn9sY-6gxqX781EuPrBSMbhj1R2dohsuyTBdMLSRBzMXdzbhhD6Thng8ko0jEP4PJR2VQ7rudURs/s1600/SeoQuake+Pic.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="seoquarke pendukung seo" border="0" height="120" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghdHSxC9cUquDEO_5i2pBDf7qdJyUDXuuBhTTtUkAbbWc6JT7TGobAIYisbyVn1eLYIn9sY-6gxqX781EuPrBSMbhj1R2dohsuyTBdMLSRBzMXdzbhhD6Thng8ko0jEP4PJR2VQ7rudURs/s320/SeoQuake+Pic.gif" title="tool pendukung seo" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><br />Jika Anda tertarik dan ingin menggunakan tool pendukung seo ini, berikut daftar tool pendukung seo yang bisa Anda menfaatkan.<br /><br /><h2><b>Daftar Tool Pendukung SEO</b></h2><div style="text-align: left;"><span style="color: red;"><b>1. Firefox add-ons SEO Tool</b></span></div><div style="text-align: left;"><b><br /></b></div>Bagi Anda yang menggunakan browser mozilla, berikut add-ons tool pendukung seo yang dapat di download secara gratis.<br /><ul><li><b>SeoQuake SEO extension</b></li></ul><br /><b>SeoQuake</b> adalah add ons firefox yang sangat populer dan banyak digunakan oleh para webmaster SEO karena memiliki berbagai fungsi dan fitur yang sangat lengkap.<br /><br /><a href="https://addons.mozilla.org/en-US/firefox/addon/seoquake-seo-extension/" rel="nofollow" target="_blank" title="Install Add ons SeoQuake">Install Add ons SeoQuake</a> <br /><br /><b>Google Chrome add-ons SEO tool</b><br /><br />Jika Anda menggunakan browser google chrome silahkan download tool pendukung seo dibawah ini<br /><br /><a href="http://www.seoquake.com/blog/?p=1010" rel="nofollow" target="_blank" title="Install Add ons SeoQuake">Install Add ons SeoQuake</a><br /><br /><ul><li><b>SEO Doctor</b></li></ul><br />Tool SEO Doctor berfungsi dan dapat  menganalisa berbagai faktor SEO pada blog anda secara langsung dan memberikan <i>score</i> sebagai penilaian atas faktor SEO yang anda terapkan di blog anda, mulai dari penilaian inbound backlink, Page Rank Flow, Headings dan lain sebaginya. Disamping itu tool seo doctor juga memberikan informasi dan solusi mengenai web atau blog Anda yang mengalami permasalahan yang  ditandai dengan bendera pada jendela browser yang Anda gunakan.<br /><br /><a href="https://addons.mozilla.org/en-US/firefox/addon/seo-doctor/" rel="nofollow" target="_blank">Install Add Ons SEO Doctor</a><br /><br /><ul><li><b>SearchStatus</b></li></ul><br />SearchStatus adalah Add-Ons Firefox yang memiliki banyak fitur yang membantu Anda dalam SEO web atau blog yang Anda miliki. Beberapa fitur dari add-ons firefox ini dapat menampilkan Google Page Rank, Alexa Rank, Compete Rank, SeoMoz Rank, nofollow link highting, check metatag, google index dan lain sebagainya.<br /><br /><a href="https://addons.mozilla.org/en-US/firefox/addon/searchstatus/" rel="nofollow" target="_blank">Install Add Ons Search Status</a><br /><br /><ul><li><b>Page Speed</b></li></ul><br />Add-ons page speed ini merupakan tool yang diberikan untuk dimanfaatkan secara gratis oleh google untuk menganalisa kecepatan website atau blog serta memberikan solusi bagaimana meningkatkan kecepatan loading web atau blog. Sebagaimana yang kita tahu bahwa kecepatan loading suatu blog atau website sangat berpengaruh terhadap SEO. Namun, add-ons page speed harus dikolaborasika dengan add-ons Firebug untuk hasil yang maksimal.<br /><br /><ol><li><a href="https://addons.mozilla.org/en-US/firefox/addon/firebug/" rel="nofollow" target="_blank">Install Add-Ons Firebug</a> </li><li><a href="https://developers.google.com/speed/pagespeed/" rel="nofollow" target="_blank">Install Add-Ons Page Speed</a></li></ol><span style="color: red;"><i>Penting</i></span>: Untuk add-ons page speed sesuikan dengan browser yang Anda gunakan, misalnya Anda menggunakan browser google chrome maka download untuk yang google chrome, dan jika Anda menggunakan browser mozilla firefox maka download untuk yang mozilla firefox.<br /><br />Sebagaimana yang telah saya sampaikan bahwa masih banyak lagi tool seo yang dapat kita manfaatkan seperti online seo tool. Untuk daftarnya dapat Anda lihat seperti dibawah ini<br /><br /><div style="text-align: left;"><span style="color: red;"><b>2. Online SEO Tool</b></span></div><br />Ada banyak sekali tool seo online yang dapat kita manfaatkan secara gratis. Namun tool seo online yang akan saya sampaikan berikut ini merupakan tool seo online rekomendasi dari saya. Berikut daftar online seo tool.<br /><br /><ul><li><b>Iwebtool </b></li></ul><br />Iwebtool merupakan sebuah website yang menyediakan banyak fitur SEO Tool yang bisa digunakan secara gratis, diantaranya adalah PageRank Checker, Backlink Checker, Website Speed Test, Link Popularity, Search engine Position dan lain-lain.<br /><br />Iwebtool (link telah rusak)<br /><br /><ul><li><b>Backlink Watch</b></li></ul><br />Backlink adalah faktor yang sangat penting dalam SEO, khususnya untuk Google. Sebaik apapun website atau blog anda, jika tidak mempunyai backlink dari website lain, maka posisi website atau blog Anda di beberapa search engine seperti google tidak akan memiliki posisi pada halaman utama. Backlink Watch merupakan penyedia Backlink Checker populer untuk mengecek backlink blog kita termasuk backlink website lain yang menjadi kompetitor atau pesaing anda, sehingga anda dapat mengetahui seberapa kuat kompetitor atau pesaing anda untuk dikalahkan.<br /><br />Backlink Watch<br /><br />Masih banyak lagi tool pendukung seo online yang dapat Anda manfaatkan secara gratis dan Anda dapat mencarinya di google. Mungkin hanya ini yang dapat saya sampaikan, semoga bermanfaat. Pastikan bahwa Anda tetap mengunjungi blog belajar blog dan seo, agar Anda mendapatkan Update  informasi seputar panduan dan <a href="http://belajar-blogdanseo.blogspot.com/2012/12/belajar-blog.html" target="_blank">cara membuat blog</a> serta <a href="http://belajar-blogdanseo.blogspot.com/2012/12/tips-seo.html" target="_blank">Tips SEO</a> dan informasi lainnya yang tentu saja dapat menambah wawasan serta pengetahuan anda tentang <a href="http://belajar-blogdanseo.blogspot.com/" target="_blank">blog dan seo</a>.</div>

Posted by Hii Sekai

Membuat Template Blog Hasil Karya Sendiri

<p>Pada posting sebelumnya, kita telah mengetahui tentang <a href="http://optimasi-blog.blogspot.com/2012/11/penyusunan-dasar-template-bloggercom.html">dasar penyusunan template di Blogger.com</a>. Sekarang tinggal tergantung pada kreativitas masing-masing dalam menambahkan beberapa <em>selector</em> atau elemen HTML5 agar blog dapat ditampilkan pada layar peramban. Toturial berikut dapat diterapkan dengan cara yang berbeda pada tiap blog <span class="amp">&</span> tentu saja tergantung pada pengelola blog yang bersangkutan. Untuk pembuatan blog dari awal mungkin tidak akan menemukan masalah yang berarti, namun jika dilakukan pada blog yang telah memiliki posting, pembaharuan <em>template</em> kemungkinan besar akan meninggalkan residu dari pengkodean <em>template</em> sebelumnya. Adapun agar template kembali segar, maka dibutuhkan sedikit trik untuk melakukan <em>reset template</em>, yakni — dengan cara — pergi ke <em>dashboard</em> Blogger.com, kemudian “terapkan” salah satu <em>template</em> dasar.<a name='more'></a></p><p class="new-line">Sebagai langkah pertama, silakan simpan (<em>copy <span class="amp">&</span> paste</em>) beberapa <em>widget</em> yang mungkin akan kita tampilkan dalam blog — seperti navbar, <em>header</em>, dan <em>main</em> (Posting Blog) — pada “Edit HTML”. Kemudian bersihkan semua kode, sehingga area “Edit HTML” menjadi kosong dan masukkan HTML (<em>Hypertext Markup Language</em>) berikut.</p><pre><code><?xml version="1.0" encoding="UTF-8" ?><br /><!DOCTYPE html><br /><html 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'><br /> <head><br /> <!--[if lte IE 8]> <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> <![endif]--><br /> <!--[if gte IE 9]> <meta content='IE=9' http-equiv='X-UA-Compatible'/> <![endif]--><br /> <b:if cond='data:blog.isMobile'><br /> <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/><br /> <b:else/><br /> <meta content='width=960' name='viewport'/><br /> </b:if><br /> <b:include data='blog' name='all-head-content'/><br /> <title><br /> <b:if cond='data:blog.homepageUrl == data:blog.url'><br /> <data:blog.title/><br /> <b:else/><br /> <data:blog.pageName/> | <data:blog.title/><br /> </b:if><br /> </title><br /> <b:skin><![CDATA[/*<br />--------------------------------------------------------------<br />Blogger Template Style<br />Name: <br />URL: <br />Designer: <br />-------------------------------------------------------------- */<br /><br />/* =Reset<br />----------------------------------------------- */<br />html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}a:hover,a:active{outline: none}table{border-collapse:collapse;border-spacing:0}input,select{vertical-align:middle}<br /> ]]></b:skin><br /> </head><br /> <body expr:class='"loading" + data:blog.mobileClass'><br /> </body><br /></html></code></pre><p class="new-line">Kedua, tambahkan satu-persatu kode <em>widget</em> dalam tubuh HTML (<code><body></code>). Misalnya:</p><pre><code> <body expr:class='"loading" + data:blog.mobileClass'><br /> <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'><br /><b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/><br /></b:section><br /><br /> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'><br /><b:widget id='Header1' locked='true' title='Title Blog (Header)' type='Header'/><br /></b:section><br /><br /> <b:section class='main' id='main' showaddelement='no'><br /><b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/><br /></b:section><br /><br /> <b:section class='sidebar' id='sidebar' preferred='yes'/><br /> </body></code></pre><p class="new-line">Ketiga, memberikan beberapa <em>selector</em> atau elemen pada HTML5 untuk mengapit kode <em>widget</em>. Semakin sederhana struktur pengkodean, maka akan semakin mudah dalam melakukan kustomisasi. <em>Selector</em> <code>id</code> berarti kustomasi hanya dilakukan pada <code>id</code> yang bersangkutan <span class="amp">&</span> tidak ada perulangan, karena sifatnya yang unik (satu <code>id</code> sama dengan satu elemen). Sedangkan <code>class</code> dapat digunakan secara berulang-ulang pada karakter pengkodean yang sama (satu <code>class</code> sama dengan beberapa elemen).</p><pre><code> <body expr:class='"loading" + data:blog.mobileClass'><br /> <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'><br /><b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/><br /></b:section><br /><br /><span style="color:red;"><div id='content'><br /><br /> <header id='header-content'><br /> <div class='head-wrap'><br /> <div class='header-group'></span><br /> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'><br /><b:widget id='Header1' locked='true' title='Title Blog (Header)' type='Header'/><br /></b:section><br /> <span style="color:red;"></div><span style="color:green;"><!-- .header-group --></span><br /> </div><span style="color:green;"><!-- .head-wrap --></span><br /> </header><span style="color:green;"><!-- #header-content --></span></span><br /><br /> <span style="color:red;"><div id='main-wrapper'><br /> <div id='main-content'></span><br /> <b:section class='main' id='main' showaddelement='no'><br /><b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/><br /></b:section><br /> <span style="color:red;"></div><span style="color:green;"><!-- #main-content --></span><br /> <aside id='sidebar-content'></span><br /> <b:section class='sidebar' id='sidebar' preferred='yes'/><br /> <span style="color:red;"></aside><span style="color:green;"><!-- #sidebar-content --></span><br /> <span style="color:blue;"><div style='clear:both;'></div></span> <span style="color:green;"><!-- Mungkin lebih baik menggunakan <div class='clear'></div> yang diatur dengan CSS --></span><br /> </div><span style="color:green;"><!-- #main-wrapper --></span><br /><br /> <footer id='footer-content'><br /> <div class='foot-wrap'><br /> <div id='content-info'><br /> <p><span class="amp">&</span>amp;copy; <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script> <a expr:href='data:blog.homepageUrl' title='Beranda'><data:blog.title/></a>. All Right Reserved. <a class='to-top' href='#content' title='Return to top'>Top</a><span class="amp">&</span>#8593; <br/>Powered by <a href='http://www.blogger.com'>Blogger.com</a></p><br /> </div><span style="color:green;"><!-- #content-info --></span><br /> </div><span style="color:green;"><!-- .foot-wrap --></span><br /> </footer><span style="color:green;"><!-- #footer-content --></span><br /><br /></div><span style="color:green;"><!-- #content --></span></span><br /> </body></code></pre><p class="new-line">Keempat, simpan HTML <em>template</em> hasil modifikasi tersebut. Pada tampilan sederhana, hasil yang ditunjukkan oleh pengkodean di atas adalah menggunakan satu kolom <span class="amp">&</span> memanfaatkan seluruh lebar halaman peramban. Oleh karena kita belum melakukan konfigurasi pada CSS (<em>Cascading Style Sheets</em>) dalam markah <code><head></code>. Contoh CSS berikut menggunakan <em>fixed layout</em> dengan lebar konten 960px sesuai dengan <meta content='width=960' name='viewport'/>.</p><pre><code> <b:skin><![CDATA[/*<br />--------------------------------------------------------------<br />Blogger Template Style<br />Name: <br />URL: <br />Designer: <br />-------------------------------------------------------------- */<br /><br />/* =Reset<br />----------------------------------------------- */<br />html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}a:hover,a:active{outline: none}table{border-collapse:collapse;border-spacing:0}input,select{vertical-align:middle}<br /><br />/* =Layout<br />----------------------------------------------- */<br />#content {<br />margin: 0 auto;<br />width: 960px;<br />}<br />#header-content,<br />#main-wrapper,<br />#footer-content {<br />width: 100%;<br />}<br />#main-content,<br />#sidebar-content {<br />display: inline;<br />position: relative;<br />}<br />#main-content {<br />float: left; <span style="color:green;">/* Tentukan letak main-content di sebelah kanan (right) atau kiri */</span><br />width: 640px;<br />}<br />#sidebar-content {<br />float: left;<br />width: 320px;<br />}<br />.header .widget,<br />.main .widget,<br /><span style="color:orange;">.sidebar .widget</span> {<br />margin-left: 15px;<br />margin-right: 15px;<br />word-wrap: break-word;<br />}<br /><br />/* =Global<br />----------------------------------------------- */<br />body,<br />button,<br />input,<br />select,<br />textarea {<br />color: #000;<br />font: .9375em/1.6em 'Helvetica Neue', Helvetica, Arial, sans-serif;<br />}<br />body {<br />background: #fff;<br />text-align: left;<br />width: 100%;<br />}<br />body:before, body:after {<br />content: '';<br />display: table;<br />}<br />body:after {<br />clear: both;<br />}<br /><br /><span style="color:green;">/* Mungkin lebih baik menggunakan CSS berikut dibandingkan dengan <div style="clear:both;"></div> */</span><br /><span style="color:blue;">.clear {<br />clear: both;<br />display: block;<br />height: 0;<br />overflow: hidden;<br />visibility: hidden;<br />width: 0;</span><br />}<br /><br />… dan seterusnya …<br /> ]]></b:skin></code></pre><p class="new-line">Kelima, pratinjau hasilnya <span class="amp">&</span> apabila telah sesuai dengan kriteria tampilan blog yang kita inginkan “simpan” <em>template</em>.</p><p>Dengan 5 (lima) langkah di atas, kita telah dapat membuat <em>template</em> blog hasil karya sendiri, meskipun dalam menyelesaikan beberapa tahapan tersebut membutuhkan pemahaman yang lebih tentang <abbr title="Cascading Style Sheets"></abbr>CSS</abbr> dan <abbr title="Hypertext Markup Language"></abbr>HTML</abbr>. Bukan sebatas itu saja, bahkan lebih spesifik akan meliputi berbagai aspek yang dibutuhkan oleh sebuah situs web atau blog agar mendekati aksesibilitas di sisi pengguna. Kata paling sederhana mungkin mengandung makna mudah dibaca serta keterbacaan. Oh, iya! Hampir lupa, untuk pemanfaatan <em>selector</em> <code>class</code> yang digunakan pada beberapa elemen belum ada pada posting di atas. Daripada lupa akan dicontohkan melalui penambahan 3 (tiga) kolom pada <em>footer</em> berikut.</p><p style="font-weight:600;">HTML</p><pre><code> <footer id='footer-content'><br /> <div class='foot-wrap'><br /> <span style="color:red;"><div id='sidebar-footer'><br /> <aside class='supplementary'><br /> <b:section <span style="color:orange;">class='sidebar'</span> id='sidebar2' preferred='yes'/><br /> </aside><br /> <aside class='supplementary'><br /> <b:section <span style="color:orange;">class='sidebar'</span> id='sidebar3' preferred='yes'/><br /> </aside><br /> <aside class='supplementary'><br /> <b:section <span style="color:orange;">class='sidebar'</span> id='sidebar4' preferred='yes'/><br /> </aside><br /> <div class='clear'></div><br /> </div><span style="color:green;"><!-- #sidebar-footer --></span></span><br /> <div id='content-info'><br /> <p><span class="amp">&</span>amp;copy; <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script> <a expr:href='data:blog.homepageUrl' title='Beranda'><data:blog.title/></a>. All Right Reserved. <a class='to-top' href='#content' title='Return to top'>Top</a><span class="amp">&</span>#8593;<br/> Powered by <a href='http://www.blogger.com'>Blogger.com</a></p><br /> </div><span style="color:green;"><!-- #content-info --></span><br /> </div><span style="color:green;"><!-- .foot-wrap --></span><br /> </footer><span style="color:green;"><!-- #footer-content --></span></code></pre><br /><p style="font-weight:600;">CSS</p><br /><pre><code>.supplementary {<br />display: inline;<br />float: left;<br />position: relative;<br />width: 320px;<br />}</code></pre><p style="font-style:italic;">Catatan: Untuk kode yang berwarna orange, konfigurasi CSS <em>widget</em> dalam <code>section class='sidebar'</code> sama dengan pengkodean sebelumnya (<code>.sidebar .widget</code>).</p><p>Sederhana bukan? Jika sebuah elemen memiliki karakteristik yang sama, alangkah lebih baik apabila digabungkan dengan pengkodean elemen lain. Hal tersebut dimaksudkan agar pengkodean lebih mudah dikustomisasi <span class="amp">&</span> dengan harapan — mungkin — akan lebih semantik.</p>

Posted by Hii Sekai