Kostumisasi Penomoran pada Komentar Blogger™

<h2>Credits</h2><p>Posting ini merupakan <em>repost</em> 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 <strong>Randomness</strong> yang dipostkan oleh <strong>Fernandooo1</strong>. 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 <strong>JMiur</strong> yang memiliki blog <a href="http://vagabundia.blogspot.com/">Vagabundia</a> berasal dari Buenos Aires, Argentina.</p><h2>Menambah nomor urut komentar</h2><p>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 <span class="amp">&</span> tata letak pada trik ini hanya merupakan hasil kostumisasi dari kode/script aslinya.</p><p>Tambahkan CSS (Cascading Style Sheets) berikut di atas <mark><code>]]></b:skin></code></mark>. <pre><code>.numberingcomments {<br />float:<span style='color:blue;'>right</span>;<br />text-align:right;<br />display:block;<br /><mark>width:50px;</mark><br />margin:<span style='color:red;'>0 5px 0 0</span>;<br />font-size:<span style='color:green;'>1em</span>;<br />font-weight:normal;<br />}</code></pre></p><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><br /><li>Kode yang diberi background kuning, mungkin bisa Anda hilangkan atau jika Anda memerlukan properti tersebut, silakan dibiarkan apa adanya.</li><br /><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><br /><li>Warna hijau menunjukkan nilai properti untuk mengatur ukuran <em>font</em>.</li><br /></ul><p>Dan berikut merupakan kode HTML (HyperText markup Language) dari penomoran komentar. <pre><code> <div expr:id='data:widget.instanceId + "_comments-block-wrapper"'><br /> <dl expr:class='data:post.avatarIndentClass' id='comments-block'><br /><br /><span style='color:red;'><script type='text/javascript'>var CommentsCounter=0;</script></span><br /><br /> <b:loop values='data:post.comments' var='comment'><br /> <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'><br /> <b:if cond='data:comment.favicon'><br /> <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/><br /> </b:if><br /> <a expr:name='data:comment.anchorName'/><br /> <b:if cond='data:blog.enabledCommentProfileImages'><br /> <data:comment.authorAvatarImage/><br /> </b:if><br /> <a expr:name='data:comment.anchorName'/><br /> <b:if cond='data:blog.enabledCommentProfileImages'><br /> <data:comment.authorAvatarImage/><br /> </b:if><br /> <b:if cond='data:comment.authorUrl'><br /> <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a><br /> <b:else/><br /> <data:comment.author/><br /> </b:if><br /><br /><span style='color:red;'><span class='numberingcomments'><br /><script type='text/javascript'><br />CommentsCounter=CommentsCounter+1;<br />document.write(CommentsCounter)<br /></script><br /></span></span><br /><br /> </dt><br /> <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'><br /> <b:if cond='data:comment.isDeleted'><br /> <span class='deleted-comment'><data:comment.body/></span><br /> <b:else/><br /> <p><br /> <data:comment.body/><br /> </p><br /> </b:if><br /> </dd></code></pre></p><p>Sisipkan kode yang berwarna merah di antara kode-kode di atas.</p><p>HTML di atas hanya akan memberikan nomor urut tidak termasuk permalink komentar. Oleh karena permalink komentar sudah terwakili oleh <em>timestamp</em> komentar. <pre><code> <span style='color:red;'><a expr:href='data:comment.url' title='comment permalink'></span><br /> <data:comment.timestamp/><br /> <span style='color:red;'></a></span></code></pre></p><p>Apabila Anda ingin menerapkan nomor urut komentar sebagai permalink komentar, maka cukup mengambil kode yang berwarna merah pada <em>timestamp</em> <span class="amp">&</span> letakkan pada script seperti yang tampak di bawah ini. <pre><code><span class='numberingcomments'><br /><span style='color:red;'><a expr:href='data:comment.url' title='comment permalink'></span><br /><script type='text/javascript'><br />CommentsCounter=CommentsCounter+1;<br />document.write(CommentsCounter)<br /></script><br /><span style='color:red;'></a></span><br /></span></code></pre></p><h2>Kostumisasi nomor urut komentar</h2><p>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 <span class="amp">&</span> menambah CSS penomoran komentar, seperti: <pre><code>.numberingcomments {<br /><span style='color:red;'>float:left;</span><br />text-align:right;<br />display:block;<br /><span style='color:red;'>margin-left:-50px;</span><br />font-size:1em;<br />font-weight:normal;<br />}<br /><br /><span style='color:green;'>.numberingcomments:after {content:"."}</span></code></pre></p><p>Silakan Anda melakukan trial <span class="amp">&</span> error, baik menambah dan/atau mengurangi kode CSS penomoran komentar, sampai Anda menemukan posisi yang tepat untuk meletakkan nomor urut tersebut.</p>

Posted by Hii Sekai

Optimasi Kotak Komentar Blogger™

<p>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>”, <span class="amp">&</span> “<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.</p><a name='more'></a><br /><br /><h2>Merubah lebar kotak komentar</h2><p>Tambahkan CSS (Cascading Style Sheets) berikut di atas <mark><code>]]></b:skin></code></mark>. <pre><code>.comment-form {<br />width:<span style="color:red;">425px</span>;<br />max-width:<span style="color:red;">425px</span>;<br />overflow:auto;<br />clear:both;<br />}</code></pre></p><p>Catatan: Tambahkan jika CSS tersebut belum <em>include</em> dalam CSS <em>template</em> 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.</p><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> <span style="color:red;"><h2 id='comment-post-message'><data:postCommentMsg/></h2></span><br /><span style="color:green;"><p>Silakan berkomentar, tapi jangan memasukkan SPAM yah…</p></span><br /> <p><data:blogCommentMessage/></p><br /> <data:blogTeamBlogMessage/><br /> <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/><br /> <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><p>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><span style="color:red;"><h4 id='comment-post-message'><data:postCommentMsg/></h4></span></code>.</p><h3>2. Menambah variasi teks atau gambar di samping kotak komentar</h3><p>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>) <span class="amp">&</span> 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 ‘<strong>contoh</strong>’ atau tidak bersifat ‘<strong>mutlak</strong>’.</p><p>Coba Anda lihat gambar di atas (Figure 1), perhatikan yang diberi tanda panah berwarna merah. Mungkin seperti itulah penambahan yang saya maksudkan <span class="amp">&</span> bentuknya lebih kurang terlihat pada model di bawah ini.</p><p class='intermezzo2'><span class='first-letter'>You</span> <span class='first-line'>still on the focus.</span> <span class='enjoy'>Enjoy <em>with</em> <span style='font-size:0.75em;'>Blogger™ commenting system.</span></span> Plea<span class='type-s'>s</span>e, don't include <span class='end-letter'><span class='hidden-s'>s</span>pam.</span> <span class='dot2'>.<span class='dot-1'>.</span><span class='dot-2'>.</span><span class='dot-3'>.</span><span class='dot-4'>.</span><span class='dot-5'>.</span><span class='dot-6'>.</span></span></p><p style="text-align:center;">You still on the focus. Enjoy with Blogger™ commenting system. Please don't include spam.......</p><p>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.<p><h4><span style="border-bottom:1px solid #666666;">Kode CSS</span></h4><pre><code><span style="color:blue;">.intermezzo {<br />float:right;<br /><span style="color:red;">width:32%;<br />margin-top:8em;</span><br /><span style="color:green;">-moz-transform:rotate(45deg);<br />-webkit-transform:rotate(45deg);<br />-o-transform:rotate(45deg);<br />transform:rotate(45deg);</span><br />}<br />.intermezzo .first-letter {<br />float:left;<br />line-height:0.5em;<br />padding:0.175em 0.15em 0.0175em 0;<br />font-size:5em;<br />}<br />.intermezzo .first-line {<br />margin-left:-5.75em;<br />}<br />.intermezzo .enjoy {<br />display:block;<br />font-variant:small-caps;<br />font-weight:bold;<br />}<br />.intermezzo .type-s {<br />padding:0.175em 0 0;<br />font-size:6.15em;<br />vertical-align:-0.35em;<br />}<br />.intermezzo .end-letter .hidden-s {<br />color:#fafafa;<br />display:block;<br />position:absolute;<br />left:-1.75em;<br />}<br />.intermezzo .end-letter {<br />text-transform:uppercase;<br />font-size:2em;<br />margin:-0.225em 0 0 2.225em;<br />display:block;<br />position:absolute;<br />}<br />.intermezzo .dot {<br />font-size:1.5em;<br />bottom:-1.5em;<br />margin-left:6em;<br />display:block;<br />position:absolute;<br />}<br />.dot .dot-1 {<br />bottom:-0.5em;<br />display:block;<br />position:absolute;<br />}<br />.dot .dot-2 {<br />bottom:-1em;<br />display:block;<br />position:absolute;<br />margin-left:-0.25em;<br />}<br />.dot .dot-3 {<br />bottom:-1.5em;<br />display:block;<br />position:absolute;<br />margin-left:-0.75em;<br />}<br />.dot .dot-4 {<br />bottom:-2em;<br />display:block;<br />position:absolute;<br />margin-left:-1.525em;<br />}<br />.dot .dot-5 {<br />bottom:-2.5em;<br />display:block;<br />position:absolute;<br />margin-left:-2.5em;<br />}<br />.dot .dot-6 {<br />bottom:-3em;<br />display:block;<br />position:absolute;<br />margin-left:-3.75em;<br />}</span></code></pre><ul><li>Letakkan kode tersebut di atas <mark><code>]]></b:skin></code></mark>.</li><br /><li>Warna biru menunjukkan bahwa kode CSS tersebut cocok untuk template “Optimasi Blog” <span class="amp">&</span> belum tentu <em>balance</em> 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><br /><li>Warna merah merupakan kode yang mungkin perlu dirubah agar sesuai dengan template blog Anda. <code>width</code> menunjukkan lebar elemen <span class="amp">&</span> <code>margin-top</code> menunjukkan jarak margin suatu elemen dengan bidang di atasnya.</li><br /><li>Warna hijau merupakan sintaksis dari transformasi memutar suatu elemen dalam CSS3.</li><br /></ul><h4><span style="border-bottom:1px solid #666666;">Kode HTML</span></h4><pre><code><p class='intermezzo'><span class='first-letter'>You</span> <span class='first-line'>still on the focus.</span> <span class='enjoy'>Enjoy <em>with</em> <span style='font-size:0.75em;'>Blogger™ commenting system.</span></span> Plea<span class='type-s'>s</span>e, don't include <span class='end-letter'><span class='hidden-s'>s</span>pam.</span> <span class='dot'>.<span class='dot-1'>.</span><span class='dot-2'>.</span><span class='dot-3'>.</span><span class='dot-4'>.</span><span class='dot-5'>.</span><span class='dot-6'>.</span></span></p></code></pre><ul><li>Letakkan kode HTML tersebut di atas kode berikut. <pre><code> <span style="color:red;"><p class='comment-footer'></span><br /> <b:if cond='data:post.embedCommentForm'><br /> <b:if cond='data:post.allowNewComments'><br /> <b:include data='post' name='comment-form'/><br /> <b:else/><br /> <data:post.noNewCommentsText/><br /> </b:if><br /> <b:else/><br /> <b:if cond='data:post.allowComments'><br /> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a><br /> </b:if><br /> </b:if><br /><br /> </p><br /> </b:if><br /> <b:if cond='data:showCmtPopup'><br /> <div id='comment-popup'><br /> <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'><br /> </iframe><br /> </div><br /> <span style="color:red;"></b:if></span></code></pre></li><br /><li>Apabila Anda memulai pencarian dengan kode <code><span style="color:red;"><p class='comment-footer'></span></code>, maka Anda akan menemui 2 (dua) kode. <strong>Pilihlah yang kedua!</strong></li><br /><li>Untuk menjaga format komentar agar tidak berantakan, Anda dapat menambahkan kode <mark><code><div style='clear:both;'></div></code></mark> di atas kode HTML <code><p class='intermezzo'></code>. </li><br /><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><mark><div style='clear:both;'></div></mark><br /><p class='intermezzo'><span style='color:red;'><b:if cond='data:post.allowNewComments'></span><span class='first-letter'>You</span> <span class='first-line'>still on the focus.</span> <span class='enjoy'>Enjoy <em>with</em> <span style='font-size:0.75em;'>Blogger^™ commenting system</span>.</span> Plea<span class='type-s'>s</span>e, don't include <span class='end-letter'><span class='hidden-s'>s</span>pam.</span> <span class='dot'>.<span class='dot-1'>.</span><span class='dot-2'>.</span><span class='dot-3'>.</span><span class='dot-4'>.</span><span class='dot-5'>.</span><span class='dot-6'>.</span></span><span style='color:red;'></b:if></span></p></code></pre></li><br /><li>Update (June 29, 2011): Di halaman statis kok muncul juga? Tambahkan kode berwarna biru berikut di-antara HTML <code>.intermezzo</code>. <pre><code><mark><div style='clear:both;'></div></mark><br /><span style='color:blue;'><b:if cond='data:blog.pageType != "static_page"'></span><p class='intermezzo'><span style='color:red;'><b:if cond='data:post.allowNewComments'></span><span class='first-letter'>You</span> <span class='first-line'>still on the focus.</span> <span class='enjoy'>Enjoy <em>with</em> <span style='font-size:0.75em;'>Blogger^™ commenting system</span>.</span> Plea<span class='type-s'>s</span>e, don't include <span class='end-letter'><span class='hidden-s'>s</span>pam.</span> <span class='dot'>.<span class='dot-1'>.</span><span class='dot-2'>.</span><span class='dot-3'>.</span><span class='dot-4'>.</span><span class='dot-5'>.</span><span class='dot-6'>.</span></span><span style='color:red;'></b:if></span></p><span style='color:blue;'></b:if></span></code></pre></li><br /><li>Kemudian rubah CSS <code>.comment-form</code> menjadi (lihat kode berwarna merah): <pre><code>.comment-form {<br />width:…;<br />max-width:…;<br />overflow:auto;<br /><span style="color:red;">clear:left;</span><br />}</code></pre>dot…dot…dot tergantung isian nilai yang telah Anda masukkan.</li><br /></ul><p>Seperti ucapan sebelumnya, Anda pun bisa berkreasi dengan variasi kode dan/atau bentuk lain sesuai dengan keinginan <span class="amp">&</span> mungkin dapat merebut simpati pengunjung di blog Anda.</p>

Posted by Hii Sekai

Kostumisasi Avatar Komentar

<p class="intro" style="text-indent:0;">Kenapa “gambar avatar komentar” di Blogger™ Anda kelihatan lebih besar? Kenapa juga letaknya berbeda dengan <em>default</em> Blogger™?</p><div style="text-align:center; margin:0 auto 1.5em;"><br /><img alt="Avatar komentar" height="153" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFONIIEbYBY6y8QNjehfB26jTPptFcEnm_yhkHDYzcEpjZpjPrgUqzZLEhZRWKD4yVETiemtEfJWoYlSWf8pydHcHuvyNO3X31TMv2rHVC1Aq691zoXQU44G2_xw07cHr8_vkvLiHJIHQ/s320/avatar+komentar.png" style="clear:both; border-width:3px; border-style:dotted dashed solid double; border-color:#666666;" title="Kostumisasi avatar komentar" width="320"/></div><p>Dalam Blogger™ terdapat kode-kode embeded—kode perintah spesifik oleh pihak developer untuk menunjang kinerja mesin blogger—yang berfungsi mengatur secara <em>default</em> tampilan blog. Nah, termasuk didalamnya adalah pengaturan tampilan komentar (red=“<span style="color:red;">bukan formulir komentar</span>”). Silakan Anda koreksi, jika frase kata yang berwarna merah (dalam tanda kutip) keliru.<a name='more'></a></p><p>Apabila Anda ingin mengetahui kode <abbr title="Cascading Style Sheets">CSS</abbr> embeded tersebut, coba buka blog Anda <span class="amp">&</span> tekan tombol <kbd>Ctrl</kbd> + <kbd>U</kbd> pada papan ketik. Mungkin Anda akan melihat kode seperti ini:</p><pre><code><link type='text/css' rel='stylesheet' href='http://www.blogger.com/static/v1/widgets/129348724-widget_css_bundle.css' /></code></pre><p>Dari <em>bundle CSS</em> di atas akan kita temui kode avatar komentar sebagai berikut.</p><pre><code><span style="color:green">#comments-block .avatar-image-container img {<br />-ms-interpolation-mode:bicubic;<br />border:1px solid #ccc;<br />float:right;<br />}<br /><br />#comments-block .avatar-image-container.avatar-stock img {<br />border-width:0;<br />padding:1px;<br />}</span><br /><br /><span style="color:red">#comments-block avatar-image-container {<br />height:37px;<br />left:-45px;<br />position:absolute;<br />width:37px;<br />}</span></code></pre><p>Kode yang berwarna hijau dapat Anda lihat tampilannya pada komentar klasik Blogger™. Sedangkan yang berwarna merah merupakan tampilan avatar komentar di bawah posting.</p><h2 id="avatar1">Memperbesar gambar avatar</h2><p>Untuk memperbesar gambar avatar pada komentar di bawah posting, maka kita akan menggunakan kode CSS yang berwarna merah <span class="amp">&</span> letakkan di atas <mark><code>]]></b:skin></code></mark>.</p><pre><code>#comments-block avatar-image-container {<br />height:<span style="color:red">37px</span>;<br />left:<span style="color:blue">-45px</span>;<br />position:absolute;<br />width:<span style="color:red">37px</span>;<br />}</code></pre><br /><p>Catatan: Silakan dirubah nilai atribut <code>height</code> <span class="amp">&</span> <code>width</code>—ditandai dengan warna merah—sesuai dengan keinginan Anda. Kembali ke ulasan “<a href="#avatar3">mengganti gambar <em>blank</em></a>”</p><br /><h2 id="avatar2">Merubah letak avatar</h2><br /><p><br />Lihat kembali kode untuk “<a href="#avatar1" title="lihat kode avatar di atas">memperbesar gambar avatar</a>”, kemudian ganti atribut <code>left</code>—ditandai dengan warna biru—sesuai dengan letak yang Anda inginkan. Nilai minus (-) berarti avatar akan bergeser ke kiri. Sebaliknya jika nilai yang dimasukkan positif, maka avatar akan bergeser ke kanan.</p><br /><p><br />Anda dapat pula menambahkan atribut lainnya, contoh <mark><code>margin:2em 0 -2px 0;</code></mark>. Artinya avatar akan bergeser ke bawah sejauh 2 <em>ems</em> dari tempatnya semula, sedangkan nilai -2px hanya sekedar untuk menyelaraskan kode CSS avatar dengan CSS inline dalam <abbr title="HyperText Markup Languange">HTML</abbr> komentar seperti di bawah ini (hanya untuk diketahui saja).</p><pre><code><b:if cond='data:comment.favicon'><br /> <img expr:src='data:comment.favicon' height='32px' style='<span style="color:red;">margin-bottom:-2px;</span>' width='32px'/><br /></b:if></code></pre><br /><h2 id="avatar3"><br />Mengganti gambar <em>blank</em></h2><br /><p><br />Tampilan <em>blank</em> pada avatar akan terjadi jika pengomentar menggunakan identitas “Anonymous” atau “Name/URL” atau tidak memiliki gambar avatar pada identitasnya. Untuk mengganti gambar <em>blank</em> dengan gambar yang Anda inginkan, maka kode yang digunakan adalah sebagai berikut:</p><pre><code>#comments-block .avatar-image-container img {<br />-ms-interpolation-mode:bicubic;<br />border:1px solid #ccc;<br />float:right;<br />}</code></pre><br /><p><br />Tambahkan atribut:</p><pre><code>background:url('<span style="color:green">alamat penyimpanan gambar avatar</span>') no-repeat;<br />height:<span style="color:green">37px</span>;<br />width:<span style="color:green">37px</span>;<br /></code></pre><br /><p><br />Silakan ubah alamat <span class="amp">&</span> nilai dari masing-masing atribut yang ditandai dengan warna hijau. Dan agar tampilan gambar lebih bagus, sebaiknya gambar avatar yang Anda upload berukuran sama dengan atribut <code>height</code> <span class="amp">&</span> <code>width</code> pada ulasan “<a href="#avatar1" title="lihat kode avatar di atas">memperbesar gambar avatar</a>”.</p><br /><p><br />Hasilnya akan terlihat seperti di bawah ini.</p><pre><code>#comments-block .avatar-image-container img {<br />-ms-interpolation-mode:bicubic;<br />border:1px solid #ccc;<br />float:right;<br /><span style="color:red;">background:url('<span style="color:green">alamat penyimpanan gambar avatar</span>') no-repeat;<br />height:<span style="color:green">37px</span>;<br />width:<span style="color:green">37px</span>;</span><br />}</code></pre><p>Kemudian letakkan di atas kode <mark><code>]]></b:skin></code></mark>.</p><br /><h2><br />Mempercantik avatar dengan CSS3</h2><br /><p><br />Terakhir, untuk mempercantik tampilan avatar komentar dapat menggunakan CSS3, antara lain <em><a href="http://optimasi-blog.blogspot.com/2010/06/rounded-corner-membuat-sudut-menjadi.html">rounded corner</a></em> <span class="amp">&</span> <em>box shadow</em>.</p><br /><pre><code>#comments-block .avatar-image-container img {<br />-ms-interpolation-mode:bicubic;<br />border:1px solid #ccc;<br />float:right;<br /><span style="color:red;">background:url('<span style="color:green">alamat penyimpanan gambar avatar</span>') no-repeat;<br />height:<span style="color:green">37px</span>;<br />width:<span style="color:green">37px</span>;</span><br /><span style="color:blue;">border-radius:5px;<br />box-shadow:2px 2px 5px #666666;</span><br />}</code></pre><br /><p><br />Catatan: <br />Atribut CSS yang berwarna biru merupakan penyisipan dari tag “Mengganti gambar <em>blank</em>” di atas.</p><br /><p><br />Anda pun bisa melakukan kostumisasi lain, sehingga tampilan avatar komentar mampu mewakili keinginan dan kebutuhan Anda.</p><br />

Posted by Hii Sekai

Mengganti Nextprev dengan Judul Posting

<p>Seperti bunyi paragrap terakhir dalam posting “<a href="http://optimasi-blog.blogspot.com/2011/06/tahukah-anda.html">Tahukah Anda?</a>”, elemen <em>nextprev</em> (<code>blog-pager</code>) dalam Blogger™ dapat diterjemahkan sebagai navigasi yang meliputi ke posting lebih baru, <em>home</em>, <span class="amp">&</span> posting lama. Defaultnya, elemen nextprev terletak di akhir seluruh posting pada halaman <em>home</em> <span class="amp">&</span> di bawah <em>form</em> komentar pada halaman posting.</p><a name='more'></a><p>Berikut merupakan kode CSS (<em>Cascading Style Sheets</em>) untuk elemen <em>nextprev</em>.</p><pre><code>#blog-pager-newer-link {<br />float:left;<br />}<br />#blog-pager-older-link {<br />float:right;<br />}<br />#blog-pager {<br />text-align:center;<br />}</code></pre><p>Sedangkan markup HTML (<em>HyperText Markup Language</em>) untuk elemen tersebut, dapat ditunjukkan seperti di bawah ini :</p><pre><code> <b:if cond='data:newerPageUrl'><br /> <span id='blog-pager-newer-link'><br /> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a><br /> </span><br /> </b:if><br /><br /> <b:if cond='data:olderPageUrl'><br /> <span id='blog-pager-older-link'><br /> <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a><br /> </span><br /> </b:if><br /><br /> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a></code></pre><p>Nah, sekarang bagaimana cara merubah agar tampilan posting lebih baru, <em>home</em>, <span class="amp">&</span> posting lama menjadi judul posting? Silakan Anda simak tutorial berikut yang bersumber pada postingan di blog <a href="http://etblue.blogspot.com/2011/01/blogger-change-newer-posts-link-and.html#"><cite title="Lan, Fiona. January 21, 2011. ETBlue: Change newer posts link and older posts link text, make them become real dynamic post titles (diakses:June 19, 2011)">ETBlue</cite></a>.</p><h3>Langkah Pertama (Primer)</h3><ul><li>Login ke akun blogspot Anda.</li><li>Pilih Rancangan → Edit HTML.<p>Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template Anda yang ada dengan mengklik tulisan “Download Template Lengkap”. Kemudian simpan dalam <em>hardisk</em> atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan, Anda sudah memiliki <em>back-up</em> untuk mengembalikannya seperti semula.</p></li><li>Masukkan script berikut di atas <code><span style="color:red;"></head></span></code><pre><code><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script></code></pre><p>Tips : Kalau susah mencarinya, coba tekan tombol <kbd>F3</kbd> atau <kbd>Ctrl</kbd> + <kbd>F</kbd> di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (firefox), sehingga Anda tinggal memasukkan kata yang ingin dicari.</p><p>Perhatikan pada script jQuery ajax di atas — jika Anda memiliki versi 1.4.4 ke atas — pilih salah satu jQuery dengan versi yang lebih baru.</p></li><li>Update (July 01, 2011) — Kemudian tambahkan script berikut di atas <code></body></code>, disertai dengan <em>conditional tags</em>.<pre><code><b:if cond='data:blog.pageType == "item"'><br /><script type="text/javascript"><br />$(document).ready(function(){ <br />var newerLink = $("a.blog-pager-newer-link").attr("href"); <br />$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() { <br />var newerLinkTitle = $("a.blog-pager-newer-link").text(); <br />$("a.blog-pager-newer-link").text(newerLinkTitle); <br />}); <br />var olderLink = $("a.blog-pager-older-link").attr("href"); <br />$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() { <br />var olderLinkTitle = $("a.blog-pager-older-link").text(); <br />$("a.blog-pager-older-link").text(olderLinkTitle);//rgt <br />}); <br />}); <br /></script><br /></b:if></code></pre><li>Simpan template.</li></ul><h4 style="font-variant:small-caps;">Menyembunyikan <em>Link</em> “<em>Home</em>”</h4><p>Tambahkan CSS inline pada kode yang berwarna merah.</p><pre><code> <b:if cond='data:newerPageUrl'><br /> <span id='blog-pager-newer-link'><br /> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a><br /> </span><br /> </b:if><br /><br /> <b:if cond='data:olderPageUrl'><br /> <span id='blog-pager-older-link'><br /> <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a><br /> </span><br /> </b:if><br /><br /> <span style="color:red;"><a <span style="color:green;">style="display:none;"</span> class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a></span></code></pre><h3>Langkah Kedua (Sekunder)</h3><h4 style="font-variant:small-caps;">Kostumisasi CSS <em>blog-pager</em></h4><p>Ketika menampilkan judul posting yang panjang, maka tampilan navigasi <em>nextprev</em> akan berantakan. Bagaimana cara memperbaikinya? Hal itu telah diulas dalam update 19 Pebruari 2010 di blog <a href="http://etblue.blogspot.com/2011/01/blogger-change-newer-posts-link-and.html#"><cite title="Lan, Fiona. January 21, 2011. ETBlue: Change newer posts link and older posts link text, make them become real dynamic post titles (diakses:June 19, 2011)">ETBlue</cite></a>, yakni dengan menmbahkan beberapa atribut dalam CSS <code>blog-pager</code>.</p><pre><code>#blog-pager-newer-link,<br />#blog-pager-older-link {<br />width: 48%;<br />}<br />#blog-pager-newer-link {<br />text-align: left;<br />}<br />#blog-pager-older-link {<br />text-align: right;<br />}</code></pre><p>Opsional: Anda dapat menambah CSS <code>blog-pager</code> dengan tag berikut:</p><pre><code>#blog-pager-newer-link:before {<br />content:"\2190";<br />}<br />#blog-pager-older-link:after {<br />content:"\2192";<br />}</code></pre><p>Mungkin artinya adalah memasukkan entitas HTML dengan karakter numerik <code><span class="amp">&</span>#8592;</code> (←) sebelum <code>#blog-pager-newer-link</code> dan karakter <code><span class="amp">&</span>#8594;</code> (→) sesudah <code>#blog-pager-older-link</code>.</p><h3>Langkah Ketiga (Tersier)</h3><h4 style="font-variant:small-caps;">Peletakkan <em>nextprev</em></h4><p>Dimana posisi yang baik untuk meletakkan <code>blog-pager</code>? Kembali kepada selera masing-masing. Sedangkan menurut saya sendiri, peletakkan <em>nextprev</em> sebaiknya seperti <em>default</em>-nya atau di bawah posting. Kode HTML yang perlu Anda cari adalah sebagai berikut.</p><pre><code><span style="color:green;"><b:if cond='data:blog.pageType != "item"'></span><br /><span style="color:red;"><b:include name='nextprev'/></span><br /><span style="color:green;"></b:if></span></code></pre><p>Tambahkan <em>conditional tag</em> (warna hijau), seperti yang tampak pada kode di atas. Selanjutnya copas (<em>copy <span class="amp">&</span> paste</em>) kode tersebut tepat di atas kode berikut. Jangan lupa untuk mengganti <em>conditional tag</em>.</p><pre><code><span style="color:green;"><b:if cond='data:blog.pageType == "item"'></span><br /><span style="color:red;"><b:include name='nextprev'/></span><br /><span style="color:green;"></b:if></span><br /> <span style="color:red;"><b:if cond='data:blog.pageType == "static_page"'></span><br /> <b:include data='post' name='comment_picker'/><br /> </b:if><br /> <b:if cond='data:blog.pageType == "item"'><br /> <b:include data='post' name='comment_picker'/><br /> </b:if></code></pre><p>Simpan template <span class="amp">&</span> sekarang <code>blog-pager</code> Anda telah berpindah di atas komentar, jika pengguna mengunjungi halaman artikel/posting tertentu. Untuk memperbaiki tampilannya, Anda tinggal melakukan improvisasi pada kode CSS <code>blog-pager</code>.</p><h4 style="font-variant:small-caps;">Mengganti <em>blog-pager</em> dengan tag Paragraf</h4><p>Apabila ingin membuat tampilan yang berbeda, Anda bisa melakukan beberapa kostumisasi, seperti pada ulasan di bawah ini:</p><p>CSS untuk <code>blog-pager</code>.</p><pre><code>#blog-pager {<br />text-align:left;<br />}<br />p.blog-pager-newer-link,<br />p.blog-pager-older-link {<br />margin:0;<br />}</code></pre><p>HTML untuk <code>blog-pager</code>.</p><pre><code><span style="color:red;"><b:includable id='nextprev'></span><br /> <div class='blog-pager' id='blog-pager'><br /> <b:if cond='data:newerPageUrl'><br /> <span style="color:green;"><p class='blog-pager-newer-link'>Posting terbaru: </span><br /> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a><br /> <span style="color:green;"></p></span><br /> </b:if><br /><br /> <b:if cond='data:olderPageUrl'><br /> <span style="color:green;"><p class='blog-pager-older-link'>Posting lama: </span><br /> <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a><br /> <span style="color:green;"></p></span><br /> </b:if><br /><br /> <a style="display:none;" class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a></code></pre><p>Kode yang berwarna merah merupakan <em>markup</em> yang dicari <span class="amp">&</span> warna hijau merupakan <em>markup</em> yang telah diganti dengan tag paragraf (<code><p></code>).</p><p>Anda dapat juga melakukan kostumisasi navigasi <em>nextprev</em> dengan beberapa variasi lainnya. Mohon maaf, posting ini tidak disertai dengan gambar. Versi demo dapat Anda lihat pada navigasi <em>nextprev</em> di <a href="http://optimasi-blog.blogspot.com/"><cite title="Optimasi blog melalui trik blogger, tips blogging, dan SEO">Optimasi-Blog</cite></a>.</p>

Posted by Hii Sekai

Tahukah Anda?

<p>Tahukah Anda, jika tampilan berikut bukan merupakan <em>image</em> (gambar)? Mungkin kita telah melihatnya pada web/blog yang pernah dikunjungi <span class="amp">&</span> mengira itu adalah <em>image</em>.</p><p style="padding-left:3.5em; margin-bottom:0;">-—♦—ς∞ς—♦—-</p><p class="top-intro" style="margin:0 0 0.75em 0; font:2em Georgia, serif; color:#ff4400;"><span style='font-size:3em; font-weight:bolder;'>O</span> <span style='margin-left:-1.75em; vertical-align:1.15em;'>p</span> <span style='vertical-align:1.75em; margin-left:0.175em;'>t</span><span style='font-size:2em; vertical-align:0.5em; margin-left:-0.05em; font-style:italic;'>i</span><span style='font-size:3em; margin-left:-0.05em; vertical-align:0.25em; font-style:italic;'>m</span><span style='margin-left:-2em; vertical-align:1.25em;'>a</span><span style='margin-left:0.4em; vertical-align:1.25em;'>s</span><span style='font-size:2em; vertical-align:0.475em; font-style:italic; margin-left:0.25em;'>i</span> <span style='font-size:2em; vertical-align:-0.415em; margin-left:-2.25em; color:#af8c00;'>-</span> <span style='font-size:2em; vertical-align:-0.435em; margin-left:-0.05em;'>B</span><span style='font-size:2.5em; vertical-align:-0.415em; font-style:italic; margin-left:-0.135em; text-transform:uppercase;'>l</span><span style='font-size:1.5em; vertical-align:-0.5em; font-style:italic; margin-left:-0.6275em;'>o</span><span style='font-size:2em; vertical-align:-0.1em; margin-left:0em;'>g</span></p><p style="padding-left:3.5em;">-—♦—ς∞ς—♦—-</p><p>Tampilan seperti <em>border</em> merupakan kumpulan beberapa <abbr title="HyperText Markup Language">HTML</abbr> <em>entities</em>, contoh: <code><span class="amp">&</span>#8212;<span class="amp">&</span>#962;<span class="amp">&</span>#8734;<span class="amp">&</span>#962;<span class="amp">&</span>#8212;</code>. Sedangkan di tengahnya merupakan terjemahan dari kode <abbr title="Cascading Style Sheets">CSS</abbr> dengan menggunakan beberapa atribut, antara lain: <code>font-size</code>, <code>font-style</code>, serta <code>margin-left</code> <span class="amp">&</span> <code>vertical-align</code> yang bernilai negatif.</p><p>Tahukah Anda, bahwa tampilan <code>blog-pager</code> (<em>nextprev</em>)—diterjemahkan dengan “Newer Post” <span class="amp">&</span> “Older Post” (“Posting lebih baru” <span class="amp">&</span> “Posting lama”)—dapat diganti dengan <em>title</em> (judul) posting? Jika ingin mencobanya, silakan menuju posting tentang “<a href="http://optimasi-blog.blogspot.com/2011/06/mengganti-nextprev-dengan-judul-posting.html">Mengganti <em>Nextprev</em> dengan Judul Posring</a>”</p>

Posted by Hii Sekai

Otomatis Update Posting di Facebook dan Twitter

<p class="first-letter">Hampir semua narablog memiliki akun facebook dan/atau mungkin pula akun twitter. Tidak jarang kita menggunakan website <em>social network</em> tersebut sebagai salah satu aktivitas keseharian, baik hanya sekedar ngobrol maupun kegiatan yang lain. Dalam dunia blog, facebook <span class="amp">&</span> twitter mungkin lebih dikenal dengan istilah sebagai “ajang promosi”.</p><p>Bagaimana Anda melakukan update di facebook <span class="amp">&</span> twitter, jika posting telah diterbitkan di blog Anda? Mungkin Anda akan mengunjungi ke kedua website <em>social network</em> tersebut dan melakukan update secara manual. Salah satu alternatif agar posting yang diterbitkan akan ter-<em>update</em> secara otomatis di akun facebook <span class="amp">&</span> twitter Anda adalah dengan menggunakan layanan twitterfeed.</p><blockquote><p><a href="http://twitterfeed.com">Twitterfeed</a> merupakan web penyedia layanan update posting otomatis, baik di facebook maupun twitter. Update posting itu dilakukan dengan mengirimkan <em>feed</em>—suatu format data yang digunakan untuk menyediakan pembaharuan konten—ke website <em>social network</em> tersebut.</p></blockquote><div class="separator" style="clear: both; text-align: center; margin:1.5em 0;"><img alt="Twitterfeead" height="194" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdQunT1GkFI9NTqNIYLUYfe8ZTTuk6MFXjPl13SlCiqEVnU7kEUroLTLdiuK6E5DejjiMt1__xHDVlVx19IfsmR5p9BqNqO4u4oSxyObggGRjQYik1EoMqKRmoBTHXGBmjinLadE7V_Sg/s400/Twitterfeed.png" title="Twitterfeead" width="350" /></div><p>Caranya cukup mudah, Anda tinggal mendaftar di <a href="http://twitterfeed.com">Twitterfeed</a> dan memasukkan <em>feed</em> blog Anda dengan benar. Kemudian Anda perlu melakukan penambahan <em>autority</em> (wewenang) ke akun facebook <span class="amp">&</span> twitter, agar <em>feed</em> yang dikirim melalui twitterfeed dapat diterima dengan baik oleh kedua website <em>social network</em> tersebut. Anda pun dapat melakukan kostumisasi <em>feed</em> (update posting), seperti: menampilkan judul posting saja dan/atau disertai dengan ringkasan pendek isi posting.</p><p>Berikut ini merupakan “penampakkan” (<em>screenshot</em>) update posting yang dimaksud pada uraian di atas.</p><figure><img alt="Twitterfeed to Facebook" height="112" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6c7uimc5hQT6BR6cSahmdkVk0PIQbXJGlYJsak22Jg8sM9lUNPBR_CcfHPNljXE7A1eeyTjefPsj0DFXFTBErnOYqvs9b9ALrgJY0ZXXiIB7hTA3r4wvsuW-j_n12s_On-4tsmMa3Br8/s320/Twitterfeed+to+Faceebook.png" title="Twitterfeed to Facebook" width="320" /><figcaption>Twitterfeed via facebook</figcaption></figure> <figure><img alt="Twitterfeed to Twitter" height="67" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimhVzfjdm0uPy-XZjPBL1JvOp2e8rEQq6YKyEYOTT8xbXlDPW3SOsu95euPo_02iCIzlQzSjjummF4uWTBl7DXqwJVGpGv35QZDyWeZMCAK4VEs8gznu620HFoPelRGqv0Hjs6Oifbfts/s320/Twitterfeed+to+Twitter.png" title="Twitterfeed to Twitter" width="320" /><figcaption>Twitterfeed via twitter</figcaption></figure>

Posted by Hii Sekai