June 2011

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

Kostumisasi Avatar Komentar

GIBZET0407 - 6:46 PM

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

6:46 PM

Mengganti Nextprev dengan Judul Posting

GIBZET0407 - 5:35 AM

Seperti bunyi paragrap terakhir dalam posting “<a href="http://optimasi-blog.blogspot.com/2011/06/tahukah-anda.html">Tahukah Anda?</a>”, elemen nextprev (<code>blog-pager</code>) dalam Blogger™ dapat diterjemahkan sebagai navigasi yang meliputi ke posting lebih baru, home, & posting lama. Defaultnya, elemen nextprev terletak di akhir seluruh posting pada halaman home & di bawah form komentar pada halaman posting.<a name='more'></a>Berikut merupakan kode CSS (Cascading Style Sheets) untuk elemen nextprev.<pre><code>#blog-pager-newer-link { float:left; } #blog-pager-older-link { float:right; } #blog-pager { text-align:center; }</code></pre>Sedangkan markup HTML (HyperText Markup Language) untuk elemen tersebut, dapat ditunjukkan seperti di bawah ini :<pre><code> <b:if cond='data:newerPageUrl'> <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> </b:if> <b:if cond='data:olderPageUrl'> <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> </b:if> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a></code></pre>Nah, sekarang bagaimana cara merubah agar tampilan posting lebih baru, home, & 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>.<h3>Langkah Pertama (Primer)</h3><ul><li>Login ke akun blogspot Anda.</li><li>Pilih Rancangan → Edit HTML.Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template Anda yang ada dengan mengklik tulisan “Download Template Lengkap”. Kemudian simpan dalam hardisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan, Anda sudah memiliki back-up untuk mengembalikannya seperti semula.</li><li>Masukkan script berikut di atas <code></head></code><pre><code><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script></code></pre>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.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.</li><li>Update (July 01, 2011) — Kemudian tambahkan script berikut di atas <code></body></code>, disertai dengan conditional tags.<pre><code><b:if cond='data:blog.pageType == "item"'> <script type="text/javascript"> $(document).ready(function(){ var newerLink = $("a.blog-pager-newer-link").attr("href"); $("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() { var newerLinkTitle = $("a.blog-pager-newer-link").text(); $("a.blog-pager-newer-link").text(newerLinkTitle); }); var olderLink = $("a.blog-pager-older-link").attr("href"); $("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() { var olderLinkTitle = $("a.blog-pager-older-link").text(); $("a.blog-pager-older-link").text(olderLinkTitle);//rgt }); }); </script> </b:if></code></pre><li>Simpan template.</li></ul><h4 style="font-variant:small-caps;">Menyembunyikan Link “Home”</h4>Tambahkan CSS inline pada kode yang berwarna merah.<pre><code> <b:if cond='data:newerPageUrl'> <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> </b:if> <b:if cond='data:olderPageUrl'> <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> </b:if> <a style="display:none;" class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a></code></pre><h3>Langkah Kedua (Sekunder)</h3><h4 style="font-variant:small-caps;">Kostumisasi CSS blog-pager</h4>Ketika menampilkan judul posting yang panjang, maka tampilan navigasi nextprev 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>.<pre><code>#blog-pager-newer-link, #blog-pager-older-link { width: 48%; } #blog-pager-newer-link { text-align: left; } #blog-pager-older-link { text-align: right; }</code></pre>Opsional: Anda dapat menambah CSS <code>blog-pager</code> dengan tag berikut:<pre><code>#blog-pager-newer-link:before { content:"\2190"; } #blog-pager-older-link:after { content:"\2192"; }</code></pre>Mungkin artinya adalah memasukkan entitas HTML dengan karakter numerik <code>&#8592;</code> (←) sebelum <code>#blog-pager-newer-link</code> dan karakter <code>&#8594;</code> (→) sesudah <code>#blog-pager-older-link</code>.<h3>Langkah Ketiga (Tersier)</h3><h4 style="font-variant:small-caps;">Peletakkan nextprev</h4>Dimana posisi yang baik untuk meletakkan <code>blog-pager</code>? Kembali kepada selera masing-masing. Sedangkan menurut saya sendiri, peletakkan nextprev sebaiknya seperti default-nya atau di bawah posting. Kode HTML yang perlu Anda cari adalah sebagai berikut.<pre><code><b:if cond='data:blog.pageType != "item"'> <b:include name='nextprev'/> </b:if></code></pre>Tambahkan conditional tag (warna hijau), seperti yang tampak pada kode di atas. Selanjutnya copas (copy & paste) kode tersebut tepat di atas kode berikut. Jangan lupa untuk mengganti conditional tag.<pre><code><b:if cond='data:blog.pageType == "item"'> <b:include name='nextprev'/> </b:if> <b:if cond='data:blog.pageType == "static_page"'> <b:include data='post' name='comment_picker'/> </b:if> <b:if cond='data:blog.pageType == "item"'> <b:include data='post' name='comment_picker'/> </b:if></code></pre>Simpan template & 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>.<h4 style="font-variant:small-caps;">Mengganti blog-pager dengan tag Paragraf</h4>Apabila ingin membuat tampilan yang berbeda, Anda bisa melakukan beberapa kostumisasi, seperti pada ulasan di bawah ini:CSS untuk <code>blog-pager</code>.<pre><code>#blog-pager { text-align:left; } p.blog-pager-newer-link, p.blog-pager-older-link { margin:0; }</code></pre>HTML untuk <code>blog-pager</code>.<pre><code><b:includable id='nextprev'> <div class='blog-pager' id='blog-pager'> <b:if cond='data:newerPageUrl'> Posting terbaru: <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> </b:if> <b:if cond='data:olderPageUrl'> Posting lama: <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> </b:if> <a style="display:none;" class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a></code></pre>Kode yang berwarna merah merupakan markup yang dicari & warna hijau merupakan markup yang telah diganti dengan tag paragraf (<code></code>).Anda dapat juga melakukan kostumisasi navigasi nextprev dengan beberapa variasi lainnya. Mohon maaf, posting ini tidak disertai dengan gambar. Versi demo dapat Anda lihat pada navigasi nextprev di <a href="http://optimasi-blog.blogspot.com/"><cite title="Optimasi blog melalui trik blogger, tips blogging, dan SEO">Optimasi-Blog</cite></a>.

5:35 AM

Tahukah Anda?

GIBZET0407 - 10:08 AM

Tahukah Anda, jika tampilan berikut bukan merupakan image (gambar)? Mungkin kita telah melihatnya pada web/blog yang pernah dikunjungi & mengira itu adalah image.-—♦—ς∞ς—♦—-O p timasi - Blog-—♦—ς∞ς—♦—-Tampilan seperti border merupakan kumpulan beberapa <abbr title="HyperText Markup Language">HTML</abbr> entities, contoh: <code>&#8212;&#962;&#8734;&#962;&#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> & <code>vertical-align</code> yang bernilai negatif.Tahukah Anda, bahwa tampilan <code>blog-pager</code> (nextprev)—diterjemahkan dengan “Newer Post” & “Older Post” (“Posting lebih baru” & “Posting lama”)—dapat diganti dengan title (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 Nextprev dengan Judul Posring</a>”

10:08 AM

Otomatis Update Posting di Facebook dan Twitter

GIBZET0407 - 8:47 PM

Hampir semua narablog memiliki akun facebook dan/atau mungkin pula akun twitter. Tidak jarang kita menggunakan website social network tersebut sebagai salah satu aktivitas keseharian, baik hanya sekedar ngobrol maupun kegiatan yang lain. Dalam dunia blog, facebook & twitter mungkin lebih dikenal dengan istilah sebagai “ajang promosi”.Bagaimana Anda melakukan update di facebook & twitter, jika posting telah diterbitkan di blog Anda? Mungkin Anda akan mengunjungi ke kedua website social network tersebut dan melakukan update secara manual. Salah satu alternatif agar posting yang diterbitkan akan ter-update secara otomatis di akun facebook & twitter Anda adalah dengan menggunakan layanan twitterfeed.<blockquote><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 feed—suatu format data yang digunakan untuk menyediakan pembaharuan konten—ke website social network tersebut.</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>Caranya cukup mudah, Anda tinggal mendaftar di <a href="http://twitterfeed.com">Twitterfeed</a> dan memasukkan feed blog Anda dengan benar. Kemudian Anda perlu melakukan penambahan autority (wewenang) ke akun facebook & twitter, agar feed yang dikirim melalui twitterfeed dapat diterima dengan baik oleh kedua website social network tersebut. Anda pun dapat melakukan kostumisasi feed (update posting), seperti: menampilkan judul posting saja dan/atau disertai dengan ringkasan pendek isi posting.Berikut ini merupakan “penampakkan” (screenshot) update posting yang dimaksud pada uraian di atas.<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>

8:47 PM

GIBZET0407

Kostumisasi Penomoran pada Komentar Blogger™

Optimasi Kotak Komentar Blogger™

Kostumisasi Avatar Komentar

Mengganti Nextprev dengan Judul Posting

Tahukah Anda?

Otomatis Update Posting di Facebook dan Twitter

Popular

Blog Labels

Blog Archive