Blogger Hack

jQuery Sliding (Efek Geser) pada Komentar

GIBZET0407 - 10:07 PM

Sepertinya sudah tidak asing lagi? Benar, tidak jarang pengelola blog menggunakannya — terutama pada elemen komentar — untuk menambahkan efek geser (sliding) buka & tutup. Penerapan sederhana dapat menggunakan metode <code>jQuery slideToggle()</code>, seperti yang telah diuraikan pada situs w3schools tentang <a href="http://www.w3schools.com/jquery/jquery_slide.asp">jQuery effects — sliding</a>.<pre><code>$(selector).slideToggle(speed,callback);</code></pre><a name="more"></a><div class="alert info">Opsional: kita dapat mengatur parameter kecepatan (warna merah) dengan memasukkan nilai “fast”,“slow”, atau besaran waktu dalam milliseconds.</div><div class="project"><pre class="javascript" data-lang="javascript"><code>$("#flip").click(function(){ $("#panel").slideToggle(); });</code></pre></div><div class="alert info"><code>#flip</code> dan <code>#panel</code> merupakan selector, kita pun dapat merubahnya menjadi bentuk penamaan lain.</div>Sekarang bagaimana caranya agar jQuery tersebut dapat mengakomodasi efek geser buka & tutup pada elemen komentar. Kita perlu menambahkan script jQuery ajax, kemudian letakkan saja di atas <code></head></code>.<pre><code><script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/></code></pre><div class="alert warning">Perhatikan pada script jQuery ajax di atas, jangan sampai memasukkan dua kali (double). Oleh karena versinya dapat berbeda-beda.</div>Tambahkan pula <code>jQuery slideToggle()</code> dan letakkan di atas <code></body></code>.<div class="project"><pre class="javascript" data-lang="javascript"><code><script type='text/javascript'> //<![CDATA[ $("#flip").click(function(){ $("#comments").slideToggle("slow"); }); //]]> </script></code></pre></div>Simpan template, kemudian centang Expand Widget Templates. Sisipkan kode <abbr title="Hypertext Markup Language">HTML</abbr> diantara markah berikut.<div class="project"><pre class="html" data-lang="html"> <div class='blog-posts hfeed'> … <div class='post-outer'> <b:include data='post' name='post'/> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <div id='flip'>Komentar</div>  <b:include data='post' name='comment_picker'/> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='flip'>Komentar</div> <b:include data='post' name='comment_picker'/> </b:if> </div> … </div></pre>Dan terakhir adalah kustomisasi <abbr title="Cascading Style Sheets">CSS</abbr> dengan contoh penerapan sebagai berikut. Letakkan di atas <code>]]></b:skin></code>.<pre class="css" data-lang="css"><code>#flip { background: #fc6; cursor: pointer; padding: 1.5em 0; } #flip:hover, #flip:focus { background: #6cf; } #comments { display: none; }</code></pre></div>Jangan lupa disimpan. Untuk demonstrasi jQuery efek geser buka tutup elemen komentar dapat diamati pada posting “<a href="http://optimasi-blog.blogspot.com/2013/01/bentuk-halaman-unik-di-blog.html">Bentuk Halaman Unik di Blog</a>”.

10:07 PM

Microdata dan RDFa License dalam Blog

GIBZET0407 - 2:41 AM

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 & 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 (markup) secara baik & benar.<a name="more"></a>Secara menyeluruh perlakuan markah microdata 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 microdata dan <abbr title="Resource Description Framework – in – attributes">RDFa</abbr> license ini, kita mengacu pada tipe yang sama pula. Berbeda jika diterapkan pada tipe (<code>itemtype</code>) yang berbeda pula. Untuk memberikan pengkodean markah microdata pada blog, kita akan menggunakan <code>itemtype='http://n.whatwg.org/work'</code> (<a href="http://www.whatwg.org/specs/web-apps/current-work/#licensing-works" rel="nofollow">www.whatwg.org</a>) dengan <code>itemprop='copyrightHolder'</code> (<a href="http://schema.org/Blog" rel="nofollow">schema.org</a>). Sedangkan contoh format RDFa akan ‘disarikan’ berdasarkan sumber <a href="http://creativecommons.org/choose/" rel="nofollow">lisensi Creative Commons</a> (License mark: HTML + RDFa) dengan sedikit kustomisasi agar lebih standar.<pre><code><div id='content' itemscope='itemscope' itemtype='http://schema.org/Blog'> … dan seterusnya … <footer> <div id='content-info' itemprop='copyrightHolder' itemscope='itemscope' itemtype='http://n.whatwg.org/work'> <meta expr:content='data:blog.homepageUrl' itemprop='work'/> <meta content='http://creativecommons.org/licenses/by/3.0/' itemprop='license'/> &amp;copy; <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script> <cite itemprop='title'><a expr:href='data:blog.homepageUrl' property='dc:title' rel='dc:source' title='Beranda'><data:blog.title/></a></cite> powered by <a href='http://www.blogger.com' property='cc:attributionName' rel='cc:attributionURL'>Blogger.com</a>. <a class='to-top' href='#content' title='Return to top'>Top</a>&#8593; <a href='http://creativecommons.org/licenses/by/3.0/' rel='license' title='Creative Commons Attribution 3.0 Unported License'>All Right Reserved</a>. </div> </footer> </div></code></pre>Catatan: kode yang berwarna merah akan muncul pada rich snippets sebagai format microdata & kode berwarna biru untuk format RDFa. Pengkodean di atas hanya merupakan contoh untuk memudahkan pemahaman, bukan secara mutlak harus diterapkan.Kemudian lakukan <a href="http://www.google.com/webmasters/tools/richsnippets" rel="nofollow">pegujian data rich snippets</a> & lakukan pengujian pula melalui <a href="http://validator.w3.org/" rel="nofollow">markup validation service</a>. Apabila markup tersebut tepat, maka microdata dan RDFa license pada elemen <code><footer></code> dalam struktur blog akan lolos dari validitasi data.

2:41 AM

Microdata pada Blogger.com

GIBZET0407 - 8:22 AM

Sebuah hal yang menarik, ketika Blogger™ memasukkan format microdata dalam desain default template, namun belum tentu berlaku jika kita serta merta menggantinya dengan template bukan default BLogger™. Microdata — seperti juga microformat & <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>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 microdata 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’ — rating blog yang dibuat oleh pengelola sendiri — tidak disertakan.<h3>Markah (markup) meta deskripsi blog</h3>Oleh karena meta deskripsi telah dimasukkan dalam blog — tepatnya pada markah <code><b:include data='blog' name='all-head-content'/></code> — kemungkinan meta deskripsi microdata berikut kurang bermanfaat. Terkecuali untuk memperkaya cuplikan struktur data. Meta deskripsi dengan microdata ini dapat diletakkan di bawah <code><body></code> atau di bawah pengkodean navbar.<pre><code><body expr:class='"loading" + data:blog.mobileClass'> <b:if cond='data:blog.pageType == &quot;index&quot;'> <div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'> <b:if cond='data:blog.pageName == &quot;&quot;'>  <b:if cond='data:blog.metaDescription'> <meta expr:content='data:blog.metaDescription' itemprop='description'/> </b:if> <b:else/>  <b:if cond='data:blog.searchLabel'> &lt;meta content=&quot;Penelusuran arsip <data:blog.title/> berdasarkan label <data:blog.pageName/>&quot; itemprop=&quot;description&quot;/&gt; <b:else/> &lt;meta content=&quot;Arsip <data:blog.title/> berdasarkan <data:blog.pageName/>&quot; itemprop=&quot;description&quot;/&gt; </b:if> </b:if> </div> <b:else/> <b:if cond='data:blog.pageType == &quot;archive&quot;'> <div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'>  &lt;meta content=&quot;Penelusuran arsip <data:blog.title/> berdasarkan bulan <data:blog.pageName/>&quot; itemprop=&quot;description&quot;/&gt; </div> <b:else/> <div itemscope='itemscope' itemtype='http://schema.org/BlogPosting' style='display: none;'>  <b:if cond='data:blog.metaDescription'> <meta expr:content='data:blog.metaDescription' itemprop='description'/> </b:if> </div> </b:if> </b:if> … </body></code></pre>Catatan: kode yang diberi warna biru merupakan deskripsi yang akan ditampilkan pada pengujian rich snippets.<h3>Markah <code>schema.org/Blog</code></h3>Apabila kita mengambil referensi berdasarkan template standar Blogger™, maka skema microdata <code>Blog</code> akan terlihat seperti di bawah ini.<pre><code><b:if cond='data:blog.pageType == "index"'> <div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'> <meta expr:content='data:blog.title' itemprop='name'/> <b:if cond='data:blog.metaDescription'> <meta expr:content='data:blog.metaDescription' itemprop='description'/> </b:if> </div> </b:if></code></pre>Oleh karena alasan tertentu, maka markah itu saya kustomisasi, dimana sebagian diletakkan sebagai deskripsi (sub judul “Markah (markup) meta deskripsi blog”) & sisanya akan dikonfigurasi pada elemen lain, seperti pada elemen pembungkus. Detail akan ditunjukkan pada contoh pengkodean berikut ini.<pre><code><div id='content' itemscope='itemscope' itemtype='http://schema.org/Blog'> <header id='header-content'> <div class='head-wrap'> <div id='header-group'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Title Blog (Header)' type='Header'/> </b:section> </div> <div id='search'> </div> <nav id='main-menu'> </nav> </div> </header> … <footer id='footer-content'> &amp;copy; 2012 Aris Asmara diberdayakan oleh Blogger.com </footer> </div></code></pre><h4>Kustomisasi properti skema <code>name</code>, <code>url</code>, dan <code>about</code></h4>Kita dapat memasukkan format microdata melalui tag-tag tertentu, seperti <code></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 header blog.<pre><code> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Title Blog (Header)' type='Header'> … <b:includable id='title'> <meta expr:content='data:blog.title' itemprop='name'/> <meta expr:content='data:blog.homepageUrl' itemprop='url'/> <b:if cond='data:blog.url == data:blog.homepageUrl'> <data:title/> <b:else/> <a expr:href='data:blog.homepageUrl'><data:title/></a> </b:if> </b:includable> <b:includable id='description'> <div class='descriptionwrapper'> itemprop='about'><data:description/> </div> </b:includable> … </b:widget> </b:section></code></pre><h3>Markah <code>schema.org/BlogPosting</code></h3>Bagi pengguna template default pasti sudah tidak asing lagi dengan markah berikut, karena ia sudah dimasukkan oleh perancang.<pre><code><b:includable id='post' var='post'> <div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> <b:if cond='data:post.thumbnailUrl'> <meta expr:content='data:post.thumbnailUrl' itemprop='image_url'/> </b:if> <meta expr:content='data:blog.blogId' itemprop='blogId'/> <meta expr:content='data:post.id' itemprop='postId'/> <a expr:name='data:post.id'/> … </b:includable></code></pre>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>.<pre><code><b:if cond='data:post.thumbnailUrl'> <meta expr:content='data:post.thumbnailUrl' itemprop='thumbnailUrl'/> </b:if></code></pre>Catatan: selain properti <code>thumbnailUrl</code>, kita dapat pula menandainya dengan properti <code>image</code>.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:<pre><code> <b:if cond='data:top.showAuthor'> <data:top.authorLabel/> <b:if cond='data:post.authorProfileUrl'> itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta expr:content='data:blog.blogId' itemprop='owns'/> <meta expr:content='data:post.id' itemprop='owns'/> <meta expr:content='data:post.authorProfileUrl' itemprop='url'/> <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'> <data:post.author/> </a> <b:else/> itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta expr:content='data:blog.blogId' itemprop='owns'/> <meta expr:content='data:post.id' itemprop='owns'/> <data:post.author/> </b:if> </b:if> </code></pre>Catatan: untuk melihat apakah landasan properti tersebut benar atau keliru, mari kita amati pada <a href="http://schema.org/Person" rel="nofollow">http://schema.org/Person</a>.<h4>Properti <code>name</code> dan <code>url</code></h4><pre><code><a expr:name='data:post.id'/> <b:if cond='data:post.title'> <h3 class='post-title entry-title' itemprop='name'> <b:if cond='data:post.link'> <a expr:href='data:post.link'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'> <b:if cond='data:blog.url != data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> <b:else/> <data:post.title/> </b:if> </b:if> </h3> </b:if></code></pre>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 <code>itemprop='name headline'</code> atau merubahnya menjadi <code>itemprop='headline'</code>. Variasi itu tidak akan menimbulkan pesan peringatan, ketika di uji pada alat rich snippets. Kemudian kita dapat pula menambahkan properti <code>url</code> yang ditunjukkan oleh markah di bawah ini.<pre><code> <b:if cond='data:post.link'> <meta expr:content='data:post.link' itemprop='url'/> <a expr:href='data:post.link'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'> <b:if cond='data:blog.url != data:post.url'> <meta expr:content='data:post.url' itemprop='url'/> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> … </b:if></code></pre>Catatan: <code>itemprop='url'</code> tidak akan ditampilkan pada halaman posting, sehingga diperlukan kostumisasi kembali jika ingin memunculkannya. Nah, masalah ini akan dibahas pada penggunaan elemen <code>post-timestamp</code>.<h4>Properti <code>articleBody</code></h4>Skema <code>BlogPosting</code> dengan properti ini telah terdapat pula pada template standar Blogger™ dengan peletakkan yang unik & menarik.<pre><code><b:if cond='data:blog.metaDescription == &quot;&quot;'>  <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'> <data:post.body/> <div style='clear: both;'/>  </div> <b:else/> <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'> <data:post.body/> <div style='clear: both;'/>  </div> </b:if></code></pre>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 == &quot;&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 editor 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.<h4>Properti <code>articleSection</code></h4>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.<pre><code><b:if cond='data:blog.metaDescription == &quot;&quot;'>  <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'> <data:post.body/> <div style='clear: both;'/>  </div> <b:if cond='data:blog.pageType == &quot;item&quot;'> <aside class='related-posts' itemprop='articleSection'> … </aside> <div class='clear;'></div> </b:if> <b:else/> <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'> <data:post.body/> <div style='clear: both;'/>  </div> <b:if cond='data:blog.pageType == &quot;item&quot;'> <aside class='related-posts' itemprop='articleSection'> … </aside> <div class='clear;'></div> </b:if> </b:if></code></pre><h4>Properti <code>url</code> dan <code>datePublished</code> pada <code>post-timestamp</code></h4>Properti ini juga telah ditambahkan oleh perancang template Blogger™. Ketika sebuah halaman posting terbuka, maka judul posting — umumnya — tidak memiliki pranala (link). Oleh karena itu skema microdata 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>).<pre><code> <b:if cond='data:top.showTimestamp'> <data:top.timestampLabel/> <b:if cond='data:post.url'> <meta expr:content='data:post.url' itemprop='url'/> <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a> </b:if> </b:if> </code></pre>Catatan: ada yang merasa aneh pada kode yang berwarna biru? Hal itu hanya ‘latah’ saya untuk menghilangkan peringatan pada alat rich snippets ketika menguji struktur data blog ini.<h4>Properti <code>discussionUrl</code></h4>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.<pre><code> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:post.allowComments'> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' itemprop='discussionUrl'> <data:post.commentLabelFull/> </a> </b:if> </b:if> </b:if> </code></pre><h4>Properti <code>keywords</code></h4>Pengkodean dengan markah microdata <code>BlogPosting</code> dengan properti <code>keywords</code> secara sederhana dapat kita letakkan pada elemen <code>post-labels</code>.<pre><code> <b:if cond='data:post.labels'> <data:postLabelsLabel/> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if> </b:loop> </b:if> </code></pre><h3>Markah <code>schema.org/Comment</code></h3>Oleh karena kebanyakan para blogger menggunakan sistem komentar bersarang (threaded comments), maka konfigurasi hanya akan dilakukan di sekitar daerah judul komentar. Adapun properti yang dimanfaatkan sebagai markup adalah <code>name</code> dan <code>interactionCount</code> khusus pada jumlah komentar yang masuk. Menyisipkan atau memberi markup microdata pada sesi ini dibagi menjadi dua, yakni sebelum ada komentar (comments) & setelah ada komentar (threaded comments).<pre><code><b:includable id='comments' var='post'> <div class='comments' id='comments' itemprop='comment' itemscope='itemscope' itemtype='http://schema.org/Comment'> <b:if cond='data:post.numComments != 0'> &lt;meta content=&quot;UserComments: <data:post.numComments/>&quot; itemprop=&quot;interactionCount&quot;/&gt; </b:if> <a name='comments'/> <h4 itemprop='name'><data:post.commentLabelFull/></h4> … </div> </b:includable></code></pre><pre><code><b:includable id='threaded_comments' var='post'> <div class='comments' id='comments' itemprop='comment' itemscope='itemscope' itemtype='http://schema.org/Comment'> <b:if cond='data:post.numComments != 0'> &lt;meta content=&quot;UserComments: <data:post.numComments/>&quot; itemprop=&quot;interactionCount&quot;/&gt; </b:if> <a name='comments'/> <h4 itemprop='name'><data:post.commentLabelFull/></h4> … </div> </b:includable></code></pre>Khusus bagi penggunaan komentar tidak bersarang, markup microdata yang dimanfaatkan adalah <code>itemprop='UserComments'</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.Berdasarkan uraian yang sangat panjang di atas, format microdata dapat diterapkan beragam atau tergantung “pemberi markah”. Namun memberi sebuah markup 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 & seandainya telah ditutup pun kita masih bisa berbagi melalui <a href="http://optimasi-blog.blogspot.com/p/contact.html">halaman kontak</a>. :)<h3>Alat & Bahan bacaan</h3>Berikut alat dan beberapa bahan bacaan yang mungkin akan menambah pengetahuan serta wawasan kita dalam memahami tentang struktur skema microdata.<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 & data terstruktur.</li></ul>

8:22 AM

Navigasi Breadcrumbs dengan Microdata

GIBZET0407 - 12:36 AM

Anda mungkin pernah membaca posting <a href="http://optimasi-blog.blogspot.com/2009/06/menambah-lokasi-link-post-breadcrumbs.html">Menambah Lokasi Link Post (Breadcrumbs Trail)</a> oleh Hoctro. Posting ini juga berhubungan dengan hal tersebut, namun di-aransemen dengan beberapa hack agar muncul di beberapa halaman & ditambahkan format microdata <code>data-vocabulary</code>. Penggunaan <code>data-vocabulary</code> dimaksudkan agar breadcrumbs mampu berdiri sendiri, sehingga akan harmonis dengan format microdata http://schema.org/Blog. Lebih lanjut mengenai breadcrumbs yang didukung beberapa format dapat kita telaah pada <a href="http://support.google.com/webmasters/bin/answer.py?hl=en&answer=185417">Rich snippets — Breadcrumbs</a>.<a name="more"></a><pre><code><b:includable id='breadcrumb' var='posts'> <b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType == "static_page"'>  <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'>Beranda</a> / <data:blog.pageName/></div> <b:else/> <b:if cond='data:blog.pageType == "item"'>  <b:loop values='data:posts' var='post'> <b:if cond='data:post.labels'> <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'>Beranda</a> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast == "true"'> / <a expr:href='data:label.url' itemprop='url'><data:label.name/></a> </b:if> </b:loop> / <data:post.title/></div> <b:else/> <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'>Beranda</a> / Tanpa Label / <data:post.title/></div> </b:if> </b:loop> <b:else/> <b:if cond='data:blog.pageType == "archive"'>  <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'>Beranda</a> / Arsip <data:blog.pageName/></div> <b:else/> <b:if cond='data:blog.pageType == "index"'>  <b:if cond='data:blog.pageName == ""'> <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'>Beranda</a> / Penelusuran Arsip Posting</div> <b:else/> <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'>Beranda</a> / <data:blog.pageName/></div> </b:if> </b:if> </b:if> </b:if> </b:if> </b:if> </b:includable></code></pre>Untuk pengkodean berwarna merah, dapat diganti sesuai keinginan Anda dengan menyesuaikan pula di halaman apa ia ditampilkan. Sedangkan warna biru (“/”) merupakan pemisah (separator) antar <code>title</code>. Letakkan pengkodean pada “Edit HTML”, jangan lupa centang Expand Widget Templates. Kemudian cari kode berikut & taruh di atasnya.<pre><code><b:includable id='main' var='top'></code></pre>Kita telah menambahkan widget breadcrumbs (kalau boleh dikatakan demikian), tinggal cara memanggil serta meletakkan kode pemanggilan tersebut. Perlu diperhatikan, kemungkinan pengkodean tiap template dapat berbeda-beda. Cara memanggilnya adalah melalui markah berikut.<pre><code><b:include data='posts' name='breadcrumb'/></code></pre>Letakkan kode pemanggilan itu di atas <code><b:include data='top' name='status-message'/></code>, seperti yang dapat kita amati di bawah ini.<pre><code> <div class='blog-posts hfeed'> <b:include data='posts' name='breadcrumb'/> <b:include data='top' name='status-message'/></code></pre>Sedangkan untuk melakukan beberapa kustomisasi, tambahkan selector <code>.breadcrumbs</code> pada <abbr title="Cascading Style Sheets">CSS</abbr> template atau letakkan saja di atas <code>]]></b:skin></code>. Contoh:<pre><code>.breadcrumbs { font: .875em/1.7143em monospace; margin: 0 0 1.7143em; }</code></pre>Penambahan breadcrumbs di atas, khusus dilakukan pada Blogger™ & pengkodeannya tidak mutlak demikian. Artinya kita masih dapat merubah atau melakukan modifikasi sesuai dengan pengkodean template yang digunakan.Bahan Bacaan: <cite><a href="http://www.bloggerplugins.org/2009/06/breadcrumb-for-blogger-blogspot.html" title="Blogger Plugins: Breadcrumb for Blogger, 2009">Breadcrumb for Blogger</a></cite> format RDF (Resource Description Framework) — Blogger Plugins.

12:36 AM

Memodifikasi Tanggal Posting (date-header)

GIBZET0407 - 5:48 PM

<img alt="Tanggal Kalender" class="alignleft" height="164" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSPuw0VcxZ0NDE2isJcQZFFAxitp0P4bsBTDwJn7m7xmQQ9Xm8WAlJDMeVAwusME88gi3rFJW4rsOZ6TwXAJ52S_vMTh-znWrR9X4GqpTZcDUELr8ZBbL_Nqr2VRC7fO899D0T9yzyqdI/s800/date%252Bcalender.jpg" width="200"/>Pernah melihat hal yang menarik pada tanggal posting (<code>date-header</code>)? Atau kebanyakan tidak melihat, oleh karena tidak jarang elemen ini dihilangkan? Date Header merupakan kepala (judul) tanggal yang terdiri dari satu atau lebih posting, dimana mereka diterbitkan pada tanggal yang sama. Seandainya hari ini — 21 Oktober 2012 — Anda dapat menerbitkan sebanyak dua posting, maka kedua posting tersebut akan memiliki kepala tanggal 21 Oktober 2012.<a name="more"></a>Sebenarnya date header pada Blogger™ dapat ditampilkan dengan menarik, seperti sebagai <a href="http://optimasi-blog.blogspot.com/2009/06/merubah-tanggal-posting-menjadi-icon.html">icon kalender</a> atau bentuk-bentuk lain. Mungkin disebabkan kekurang-tahuan kita, sehingga tidak jarang menghilangkan elemen ini. Berikut merupakan gambar pengaturan tanggal posting, baik melalui language and formating atau tata letak (layout) posting blog & kode elemen-nya.<figure><img alt="Pengaturan Format Tanggal" height="242" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivrDFBO815mKs34POM2OcsslvDH3w3KW1tRmLOF4cJG-np9WwaH-VBc1Tc0G5VIP0NET5ibpD4V_5Rm4dLSDwrnRw7wVF_uV-20FZXGkxepqSxHYpIrT0X-UCjKuM2lb17LW5UMki6V1Q/s800/Setting%252BFormating.png" width="400"/><figcaption>Pengaturan tanggal posting (<code>date-header</code>) melalui language and formating.</figcaption></figure><figure><img alt="Konfigurasi Posting Blog" height="476" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgagdsT9dTYZo3gTuDooSCq1-yeTYOpgz3Bb0EX7PzXE1gj24olaQ__X8CVBiWehAhh9goK_HQgsDCS3vR1_c3N11d9OEASvlZ2yJW2pT1IhGH4qeuuYnYOZvF_nKXNxYnwVMvhZzR0WZw/s800/Configure%252BBlog%252BPosts.jpg" width="400"/><figcaption>Pengaturan tanggal posting (<code>date-header</code>) melalui tata letak (layout) posting blog.</figcaption></figure><pre><code><b:if cond='data:post.isDateStart'> &lt;div class=&quot;date-outer&quot;&gt; </b:if> <b:if cond='data:post.dateHeader'> <h2 class='date-header'><data:post.dateHeader/></h2> </b:if> <b:if cond='data:post.isDateStart'> &lt;div class=&quot;date-posts&quot;&gt; </b:if></code></pre>Backup terlebih dulu template sebelum melakukan trik blogger berikut ini. Kemudian akses edit <abbr title="HyperText Markup Language">HTML</abbr> melalui menu Template pada dashboard Blogger™, klik tombol proses & centang “Expand Widget Templates”. Tampilan tanggal posting dapat dibuat sedikit menarik dengan menambahkan script berikut di atas </head>, sehingga nantinya format tanggal mudah untuk dikustomisasi.<pre><code><script type='text/javascript'> //<![CDATA[ function replace_date(b){var a=b.split(' ');month=""+a[0].slice(0,3)+"";day=" "+a[1].slice(0,2)+", ";year=""+a[2]+"";document.write(month+day+year)}; //]]> </script></code></pre>Cari markah <code>date-header</code> seperti pada kode yang diberi warna merah di atas, kemudian ganti dengan kode berikut. Oleh karena beberapa pengaturan template pada blog penulis, maka <code><h2></code> diganti dengan <code><div></code>.<pre><code><div class='date-header'><script> replace_date(&#39;<data:post.dateHeader/>&#39;);</script></div></code></pre>Format tanggal posting harus sesuai seperti gambar (<code>figure</code>) di atas, letaknya — sampai posting ini diterbitkan — berada pada urutan ketiga dari bawah (third from bottom). Contoh: “Oktober 21, 2012” atau “October 21, 2012“. Selanjutnya, menambahkan <abbr title="Cascading Style Sheets">CSS</abbr> berikut di atas <code>]]></b:skin></code>.<pre><code>.date-header { background: #666; color: #fff; float: left; position: relative; text-align: center; width: 44px; /* perhatikan border-width left & right */ } .date-header:after { content: ''; display: block; position: absolute; bottom: -20px; /* perhatikan border-width top & bottom */ left: 0; border-color: #666 #666 #fff #666; /* nilai kode yang berwarna biru sama dengan nilai pada warna latar */ border-style: solid; border-width: 8px 22px 12px; /* top=8px, bottom=12px, left & right masing-masing=22px */ } .date-header .month { border-bottom: 1px solid #fff; display: block; }  .date-header .sep, .date-header .year { clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); position: absolute !important; }  .post { padding-left: 58px; }</code></pre>Terkadang <code>.post</code> dapat pula diganti dengan <code>.post-outer</code> — sedangkan atribut <code>padding</code> dapat pula diganti dengan <code>margin</code> — tergantung pengkodean dalam tiap-tiap template. Hasilnya dapat dilihat pada tanggal posting di blog ini atau dapat diamati melalui gambar berikut.<a href="http://optimasi-blog.blogspot.com/2012/10/memodifikasi-tanggal-posting-date-header.html" title="Modifikasi Tanggal Posting"><img alt="Modifikasi Tanggal Posting" class="alignfull" height="92" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT42C8rWZAF-058bpwLlsIvyHIOp09JH_m83Dj5DHTgv1gkVmZDT3EvatpfYfGzh-CBAM_2Vmw9IA8HuDl1h_RiK4UOUyBlscPtomEJ71MNJRU6AvP-yw5cVYKZ8hzewuY-4xpN1pvPXE/s800/Modifikasi%252Btanggal%252Bposting.png" style="margin-bottom:1.6em;" width="608"/></a>Sekarang tampilan tanggal posting lebih menarik bukan? Pun tidak perlu lagi meng-unggah gambar & sebagainya. Selamat mencoba trik blogger “memodifikasi tanggal posting (<code>date-header</code>)”. :)

5:48 PM

Hilangnya Taut Hapus pada Komentar

GIBZET0407 - 12:00 AM

Pernah mengalami “hilangnya taut hapus/delete (<code>item-control</code>)” pada sistem threaded comment Blogger™? Mungkin pula kawan-kawan sudah menemukan solusinya, dengan menambahkan <abbr title="Cascading Style Sheets">CSS</abbr> tertentu seperti:<a name="more"></a><pre><code>.item-control { display: inline; }</code></pre>Atau ketika kita rajin memeriksa pengkodean elemen sesuai dengan bawaan peramban kesayangan, maka akan diperoleh seperti di bawah ini.<pre><code>span.blog-admin, span.pid-xxx { display:inline; } xxx"><a o="d" target="_self" href="http://www.blogger.com/delete-comment.g?blogID=xxx&postID=xxx">Hapus</a></code></pre>Namun kendala yang dihadapi, ketika pengguna lain mengunjungi blog/situs kita ternyata “taut hapus/delete” itu masih menempel ‘kaya perangko’ pada komentar. :) Walaupun jika di klik oleh pengunjung tidak akan menimbulkan efek akan terhapusnya komentar yang ditarget. Padahal “taut hapus/delete” pada sistem komentar Blogger™ seharusnya diperuntukan bagi admin & tentu saja termasuk ‘sang empu’-nya komentar.Hilangnya “taut hapus/delete” disebabkan raibnya hak (authorization) admin untuk melakukan sunting (edit) & hapus (delete) secara otomatis ketika blog/situs tampil penuh (tampilan sebenarnya) pada layar peramban. Dimana otorisasi tersebut diwujudkan dalam bentuk <abbr title="Cascading Style Sheets">CSS</abbr> (<code>authorization.css</code>) yang terintegrasi dengan bundle.css (embeded). Sedangkan hilangnya hak (authorization) tersebut, sangat dimungkinkan karena admin blog menghilangkan fungsi Navbar. Betul tidak? Bukan sok pintar, gan tapi hanya sekedar sharing.Nah, untuk mengujinya coba munculkan kembali navbar bawaan Blogger™. Jika agak lupa dengan kode navbar, coba perhatikan markup berikut.<pre><code> <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'> <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/> </b:section></code></pre>Kemudian lacak ke halaman posting yang ada komentarnya. Yah, tidak kelihatan “pro” dong tampilan blog saya! Intinya ketika widget navbar dihilangkan atau <a href="http://optimasi-blog.blogspot.com/2012/09/fitur-blogger-konfigurasi-navbar-off.html">mengkonfigurasi navbar menjadi off</a>, maka “taut hapus/delete” akan hilang pula. (<ins>red: CMIIW</ins>)Pengecualian, apabila widget navbar kita sembunyikan dengan menambahkan <code>selector</code> tertentu atau diapit dengan menggunakan CSS inline, misalnya:<pre><code><div class='fake'> <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'> <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/> </b:section> </div> <div class='clear'></div></code></pre>atau<pre><code><div style='display:none;margin:0;padding:0;height:0;'> <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'> <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/> </b:section> </div> <div class='clear'></div></code></pre>Dimana pengkodean CSS <code>.fake</code> sama dengan gaya penulisan kode <abbr title="Cascading Style Sheets">CSS</abbr> inline pada contoh di atas (warna merah). Sedangkan <code><div class='clear'></div></code> bersifat opsional, kode tersebut berfungsi untuk membersihkan elemen agar tidak tumpang tindih dengan baris kode di bawahnya atau lainnya. Dengan atribut serta nilai seperti di bawah ini.<pre><code>.clear { clear: both; display: block; height: 0; overflow: hidden; visibility: hidden; width: 0; }</code></pre>Untuk Blogger™ peletakkan standar kode CSS berada antara <code><b:skin><![CDATA[</code> dan <code>]]></b:skin></code>. Jadi “taut hapus/delete” pada sistem threaded comment Blogger™ akan muncul, jika admin menyertakan widget navbar — walaupun ditampilkan secara sembunyi-sembunyi — dalam blognya.Pilih mana, taut hapus/delete ada atau tidak ada?

12:00 AM

Kostumisasi Penomoran pada Komentar Blogger™

GIBZET0407 - 2:31 AM

<h2>Credits</h2>Posting ini merupakan repost dari penulis <a href="http://eosmate.blogspot.com/2008/08/memberi-nomor-urut-pada-komentar-di.html">Blognya Firdaus | eosBlog 2.0</a>, sedangkan sumber asli berasal dari blog Randomness yang dipostkan oleh Fernandooo1. Namun sayang blog dari penulis asli tersebut tidak dapat lagi diakses, mungkin telah dihapus oleh pemiliknya. Fernandooo1 mengatakan bahwa script penomoran komentar tersebut didapat dari seorang kawannya, yakni JMiur yang memiliki blog <a href="http://vagabundia.blogspot.com/">Vagabundia</a> berasal dari Buenos Aires, Argentina.<h2>Menambah nomor urut komentar</h2>Anda mungkin sudah tidak asing lagi dengan judul trik blogger di atas. Yah, berita lama (± tahun 2008) yang mungkin terlupakan, tapi tidak ketinggalan zaman. Perbedaan tampilan & tata letak pada trik ini hanya merupakan hasil kostumisasi dari kode/script aslinya.Tambahkan CSS (Cascading Style Sheets) berikut di atas <code>]]></b:skin></code>. <pre><code>.numberingcomments { float:right; text-align:right; display:block; width:50px; margin:0 5px 0 0; font-size:1em; font-weight:normal; }</code></pre><ul><li>Untuk merubah letak nomor ke kanan (<code>right</code>) atau ke kiri (<code>left</code>) dapat Anda lihat pada atribut kode yang berwarna biru.</li> <li>Kode yang diberi background kuning, mungkin bisa Anda hilangkan atau jika Anda memerlukan properti tersebut, silakan dibiarkan apa adanya.</li> <li>Untuk mengatur letak nomor agar sesuai dengan keinginan Anda, silakan rubah nilai properti kode yang diberi warna merah [dimulai dari 0 (atas), 5px (kanan), 0 (bawah), 0 (kiri)].</li> <li>Warna hijau menunjukkan nilai properti untuk mengatur ukuran font.</li> </ul>Dan berikut merupakan kode HTML (HyperText markup Language) dari penomoran komentar. <pre><code> <div expr:id='data:widget.instanceId + "_comments-block-wrapper"'> <dl expr:class='data:post.avatarIndentClass' id='comments-block'> <script type='text/javascript'>var CommentsCounter=0;</script> <b:loop values='data:post.comments' var='comment'> <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'> <b:if cond='data:comment.favicon'> <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/> </b:if> <a expr:name='data:comment.anchorName'/> <b:if cond='data:blog.enabledCommentProfileImages'> <data:comment.authorAvatarImage/> </b:if> <a expr:name='data:comment.anchorName'/> <b:if cond='data:blog.enabledCommentProfileImages'> <data:comment.authorAvatarImage/> </b:if> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if> <script type='text/javascript'> CommentsCounter=CommentsCounter+1; document.write(CommentsCounter) </script> </dt> <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'> <b:if cond='data:comment.isDeleted'> <data:comment.body/> <b:else/> <data:comment.body/> </b:if> </dd></code></pre>Sisipkan kode yang berwarna merah di antara kode-kode di atas.HTML di atas hanya akan memberikan nomor urut tidak termasuk permalink komentar. Oleh karena permalink komentar sudah terwakili oleh timestamp komentar. <pre><code> <a expr:href='data:comment.url' title='comment permalink'> <data:comment.timestamp/> </a></code></pre>Apabila Anda ingin menerapkan nomor urut komentar sebagai permalink komentar, maka cukup mengambil kode yang berwarna merah pada timestamp & letakkan pada script seperti yang tampak di bawah ini. <pre><code> <a expr:href='data:comment.url' title='comment permalink'> <script type='text/javascript'> CommentsCounter=CommentsCounter+1; document.write(CommentsCounter) </script> </a> </code></pre><h2>Kostumisasi nomor urut komentar</h2>Jika Anda telah melakukan <a href="http://optimasi-blog.blogspot.com/2011/06/kostumisasi-avatar-komentar.html">kostumisasi avatar komentar</a> dengan meletakkannya di sebelah kanan, mungkin lebih baik meletakkan nomor komentar di sebelah kiri. Anda perlu sedikit merubah & menambah CSS penomoran komentar, seperti: <pre><code>.numberingcomments { float:left; text-align:right; display:block; margin-left:-50px; font-size:1em; font-weight:normal; } .numberingcomments:after {content:"."}</code></pre>Silakan Anda melakukan trial & error, baik menambah dan/atau mengurangi kode CSS penomoran komentar, sampai Anda menemukan posisi yang tepat untuk meletakkan nomor urut tersebut.

2:31 AM

Optimasi Kotak Komentar Blogger™

GIBZET0407 - 3:21 AM

Anda tentu sudah baca posting tentang “<a href="http://optimasi-blog.blogspot.com/2011/06/kostumisasi-avatar-komentar.html">Kostumisasi Avatar Komentar</a>”, “<a href="http://optimasi-blog.blogspot.com/2011/06/tahukah-anda.html">Tahukah Anda?</a>”, & “<a href="http://optimasi-blog.blogspot.com/2010/06/trik-blogger-mengatur-tataletak-link-to.html">Trik Blogger | Mengatur Tataletak Link to This Post</a>”, kalau belum buruan menuju TKP (Tempat Kerjaan Para blogger). Oleh karena posting berikut, mungkin berhubungan dengan tautan judul posting di atas.<a name="more"></a> <h2>Merubah lebar kotak komentar</h2>Tambahkan CSS (Cascading Style Sheets) berikut di atas <code>]]></b:skin></code>. <pre><code>.comment-form { width:425px; max-width:425px; overflow:auto; clear:both; }</code></pre>Catatan: Tambahkan jika CSS tersebut belum include dalam CSS template blog Anda. Kemudian silakan rubah nilai atribut yang berwarna merah, bisa dengan menggunakan satuan <code>px</code>, <code>em</code>, <code>%</code>, atau <code>pt</code>. Atribut <code>width</code> berfungsi untuk mengatur ‘lebar’ suatu elemen, sedangkan <code>max-width</code> digunakan untuk mengatur ‘lebar maksimal’ suatu elemen.<h2>Aksesoris kotak komentar</h2><h3>1. Menambah teks sebelum kotak komentar</h3><figure><img alt="Optimasi formulir komentar" height="172" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPlT3HXQArIg4tRS8zNKeQ2eN49kGBmavs2zKI865n2f48jUcuW3fF823odA8R-FUgwqA56U1L3oaiC2cxk-9Q2yKZHbHIP0C58nXUnFZLjnRr-1b4x07QunESvuHIy_J3I5et05oO92M/s320/comment-form.png" width="350"/><figcaption>Figure 1. Menambah teks sebelum kotak komentar (panah hitam)</figcaption></figure> <pre><code> <h2 id='comment-post-message'><data:postCommentMsg/></h2> Silakan berkomentar, tapi jangan memasukkan SPAM yah… <data:blogCommentMessage/> <data:blogTeamBlogMessage/> <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/> <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/></code></pre>Catatan: Kode yang berwarna merah merupakan kode yang dicari, sedangkan yang berwarna hijau merupakan sisipan teks untuk menambah informasi di atas kotak komentar. Default untuk kode yang berwarna merah adalah <code><h4 id='comment-post-message'><data:postCommentMsg/></h4></code>.<h3>2. Menambah variasi teks atau gambar di samping kotak komentar</h3>Sebelum Anda mencoba menambah variasi teks maupun gambar di samping kotak komentar, terlebih dahulu Anda perlu meninjau lebar—dengan atribut <code>width</code>—elemen komentar (<code>#comments</code>) & lebar kotak komentar (<code>.comment-form</code>) pada CSS template blog Anda. Jika lebar yang Anda tinjau sudah terasa cukup untuk dapat menampung elemen baru, mari kita lanjut ke langkah berikutnya. Yang perlu di garis-bawahi, bahwa konsep berikut hanya merupakan ‘contoh’ atau tidak bersifat ‘mutlak’.Coba Anda lihat gambar di atas (Figure 1), perhatikan yang diberi tanda panah berwarna merah. Mungkin seperti itulah penambahan yang saya maksudkan & bentuknya lebih kurang terlihat pada model di bawah ini.You still on the focus. Enjoy with Blogger™ commenting system. Please, don't include spam. .......You still on the focus. Enjoy with Blogger™ commenting system. Please don't include spam.......Untuk membuat aksesoris seperti di atas, maka Anda perlu menambahkan kode <abbr title="Cascading Style Sheets">CSS</abbr> maupun <abbr title="HyperText Markup Language">HTML</abbr> dalam template blog Anda.<h4>Kode CSS</h4><pre><code>.intermezzo { float:right; width:32%; margin-top:8em; -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); } .intermezzo .first-letter { float:left; line-height:0.5em; padding:0.175em 0.15em 0.0175em 0; font-size:5em; } .intermezzo .first-line { margin-left:-5.75em; } .intermezzo .enjoy { display:block; font-variant:small-caps; font-weight:bold; } .intermezzo .type-s { padding:0.175em 0 0; font-size:6.15em; vertical-align:-0.35em; } .intermezzo .end-letter .hidden-s { color:#fafafa; display:block; position:absolute; left:-1.75em; } .intermezzo .end-letter { text-transform:uppercase; font-size:2em; margin:-0.225em 0 0 2.225em; display:block; position:absolute; } .intermezzo .dot { font-size:1.5em; bottom:-1.5em; margin-left:6em; display:block; position:absolute; } .dot .dot-1 { bottom:-0.5em; display:block; position:absolute; } .dot .dot-2 { bottom:-1em; display:block; position:absolute; margin-left:-0.25em; } .dot .dot-3 { bottom:-1.5em; display:block; position:absolute; margin-left:-0.75em; } .dot .dot-4 { bottom:-2em; display:block; position:absolute; margin-left:-1.525em; } .dot .dot-5 { bottom:-2.5em; display:block; position:absolute; margin-left:-2.5em; } .dot .dot-6 { bottom:-3em; display:block; position:absolute; margin-left:-3.75em; }</code></pre><ul><li>Letakkan kode tersebut di atas <code>]]></b:skin></code>.</li> <li>Warna biru menunjukkan bahwa kode CSS tersebut cocok untuk template “Optimasi Blog” & belum tentu balance dengan template blog Anda. Apabila Anda memaksa untuk tetap menggunakan CSS di atas, mungkin Anda perlu pula merubah nilai atribut dari masing-masing ‘markup’-nya, baik sebagian maupun keseluruhan. Dan jika Anda beruntung, berarti Anda tidak perlu merubah kode CSS tersebut.</li> <li>Warna merah merupakan kode yang mungkin perlu dirubah agar sesuai dengan template blog Anda. <code>width</code> menunjukkan lebar elemen & <code>margin-top</code> menunjukkan jarak margin suatu elemen dengan bidang di atasnya.</li> <li>Warna hijau merupakan sintaksis dari transformasi memutar suatu elemen dalam CSS3.</li> </ul><h4>Kode HTML</h4><pre><code>You still on the focus. Enjoy with Blogger™ commenting system. Please, don't include spam. .......</code></pre><ul><li>Letakkan kode HTML tersebut di atas kode berikut. <pre><code> <b:if cond='data:post.embedCommentForm'> <b:if cond='data:post.allowNewComments'> <b:include data='post' name='comment-form'/> <b:else/> <data:post.noNewCommentsText/> </b:if> <b:else/> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if> </b:if> </b:if> <b:if cond='data:showCmtPopup'> <div id='comment-popup'> <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'> </iframe> </div> </b:if></code></pre></li> <li>Apabila Anda memulai pencarian dengan kode <code></code>, maka Anda akan menemui 2 (dua) kode. Pilihlah yang kedua!</li> <li>Untuk menjaga format komentar agar tidak berantakan, Anda dapat menambahkan kode <code><div style='clear:both;'></div></code> di atas kode HTML <code></code>. </li> <li>Update (June 29, 2011): Ketika Anda melakukan pengaturan bahwa komentar tidak di-izinkan karena suatu sebab atau lain hal, mungkin aksesoris teks/gambar di samping kotak komentar tidak diperlukan lagi. Tambahkan kode berikut (warna merah) di-antara HTML <code>.intermezzo</code>. <pre><code><div style='clear:both;'></div> <b:if cond='data:post.allowNewComments'>You still on the focus. Enjoy with Blogger™ commenting system. Please, don't include spam. .......</b:if></code></pre></li> <li>Update (June 29, 2011): Di halaman statis kok muncul juga? Tambahkan kode berwarna biru berikut di-antara HTML <code>.intermezzo</code>. <pre><code><div style='clear:both;'></div> <b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:post.allowNewComments'>You still on the focus. Enjoy with Blogger™ commenting system. Please, don't include spam. .......</b:if></b:if></code></pre></li> <li>Kemudian rubah CSS <code>.comment-form</code> menjadi (lihat kode berwarna merah): <pre><code>.comment-form { width:…; max-width:…; overflow:auto; clear:left; }</code></pre>dot…dot…dot tergantung isian nilai yang telah Anda masukkan.</li> </ul>Seperti ucapan sebelumnya, Anda pun bisa berkreasi dengan variasi kode dan/atau bentuk lain sesuai dengan keinginan & mungkin dapat merebut simpati pengunjung di blog Anda.

3:21 AM

GIBZET0407