Styling Unordered & Ordered lists

Secara default style daftar urut menggunakan bullent (unordered list) digambarkan dengan satu titik noktah yang cukup besar—lebih besar dari titik (“.”)—terletak didepan teks yang dilingkupinya. Sedangkan ordered List ditampilkan dalam bentuk angka (decimal).

[ Baca selengkapnya ]

Study Kasus: Valid HTML5 di Template Klasik

Kelihatannya terdengar basi dan sudah dibahas berulang-ulang. Saya mengangkat tema ini bukan untuk berdebat tentang perlukah sebuah web/blog valid X-HTML (Extensible HyperText Markup Language) atau sejenisnya. Namun dititik-beratkan kepada suatu contoh kasus, bahwa Blogger™ ternyata dapat valid di HTML5, baik halaman depan maupun halaman posting.

[ Baca selengkapnya ]

Redesign: Optimasi Blog dari Masa ke Masa

Berubah lagi? Betul, mungkin karena perubahan itu diperlukan untuk suatu revolusi. Saya tidak berbicara tentang politik, tapi sedang mengungkapkan narasi mengenai sebuah blog.

[ Baca selengkapnya ]

Kostumisasi Penomoran pada Komentar Blogger™

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 ]