Kostumisasi Penomoran pada Komentar Blogger™

// 81 komentar

Credits

Posting ini merupakan repost dari penulis Blognya Firdaus | eosBlog 2.0, 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 Vagabundia berasal dari Buenos Aires, Argentina.

Menambah nomor urut komentar

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 ]]></b:skin>.

.numberingcomments {
float:right;
text-align:right;
display:block;
width:50px;
margin:0 5px 0 0;
font-size:1em;
font-weight:normal;
}

  • Untuk merubah letak nomor ke kanan (right) atau ke kiri (left) dapat Anda lihat pada atribut kode yang berwarna biru.
  • Kode yang diberi background kuning, mungkin bisa Anda hilangkan atau jika Anda memerlukan properti tersebut, silakan dibiarkan apa adanya.
  • 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)].
  • Warna hijau menunjukkan nilai properti untuk mengatur ukuran font.

Dan berikut merupakan kode HTML (HyperText markup Language) dari penomoran komentar.

      <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>

<span class='numberingcomments'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</span>

            </dt>
            <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <b:if cond='data:comment.isDeleted'>
                <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
                <p>
                  <data:comment.body/>
                </p>
              </b:if>
            </dd>

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.

                <a expr:href='data:comment.url' title='comment permalink'>
                  <data:comment.timestamp/>
                </a>

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.

<span class='numberingcomments'>
<a expr:href='data:comment.url' title='comment permalink'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

Kostumisasi nomor urut komentar

Jika Anda telah melakukan kostumisasi avatar komentar dengan meletakkannya di sebelah kanan, mungkin lebih baik meletakkan nomor komentar di sebelah kiri. Anda perlu sedikit merubah & menambah CSS penomoran komentar, seperti:

.numberingcomments {
float:left;
text-align:right;
display:block;
margin-left:-50px;
font-size:1em;
font-weight:normal;
}

.numberingcomments:after {content:"."}

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.

[ Baca selengkapnya ]

Optimasi Kotak Komentar Blogger™

// 30 komentar

Anda tentu sudah baca posting tentang “Kostumisasi Avatar Komentar”, “Tahukah Anda?”, &Trik Blogger | Mengatur Tataletak Link to This Post”, kalau belum buruan menuju TKP (Tempat Kerjaan Para blogger). Oleh karena posting berikut, mungkin berhubungan dengan tautan judul posting di atas.

[ Baca selengkapnya ]

Kostumisasi Avatar Komentar

// 35 komentar

Kenapa “gambar avatar komentar” di Blogger™ Anda kelihatan lebih besar? Kenapa juga letaknya berbeda dengan default Blogger™?

Avatar komentar

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.

[ Baca selengkapnya ]

Mengganti Nextprev dengan Judul Posting

// 47 komentar

Seperti bunyi paragrap terakhir dalam posting “Tahukah Anda?”, elemen nextprev (blog-pager) 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.

[ Baca selengkapnya ]

Tahukah Anda?

// 31 komentar

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 HTML entities, contoh: &#8212;&#962;&#8734;&#962;&#8212;. Sedangkan di tengahnya merupakan terjemahan dari kode CSS dengan menggunakan beberapa atribut, antara lain: font-size, font-style, serta margin-left & vertical-align yang bernilai negatif.

Tahukah Anda, bahwa tampilan blog-pager (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 “Mengganti Nextprev dengan Judul Posring

[ Baca selengkapnya ]

Otomatis Update Posting di Facebook dan Twitter

// 34 komentar

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.

Twitterfeed 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.

Twitterfeead

Caranya cukup mudah, Anda tinggal mendaftar di Twitterfeed 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.

Twitterfeed to Facebook
Twitterfeed via facebook
Twitterfeed to Twitter
Twitterfeed via twitter
[ Baca selengkapnya ]