Mulyono Website

Tampilkan postingan dengan label Komentar. Tampilkan semua postingan

Jumat, 11 Mei 2012

Memodifikasi Tulisan Jumlah Komentar dan Menambahkan Link Menuju Formulir Komentar

Biasanya pada bagian atas kolom komentar terdapat tulisan yang menunjukkan ada berapa banyak jumlah komentar yang ada di bawahnya. Tulisan yang saya maksud adalah seperti yang terlihat pada screenshot di bawah ini. Screenshot ini diambil dari blog yang menggunakan template "Mudah" dari Blogger.

Tulisan tersebut dapat diganti sesuai dengan keinginan kita agar tampak lebih menarik. Misalnya saja, tulisan itu diganti dengan kalimat: Ada 3 komentar untuk "Link Judul Artikel". Selain itu, kita dapat pula menambahkan kalimat berikutnya yang mengandung link atau tautan untuk menuju langsung ke formulir komentar. Saat jumlah komentar telah banyak pada artikel tertentu, hal ini dapat memudahkan pengunjung yang ingin memberi komentar baru karena tak perlu repot-repot lagi menggulung layar untuk menemukan form komentar yang terletak di bawah komentar terakhir.

Tulisan jumlah komentar.

Berikut langkah-langkah untuk memodifikasi tulisan jumlah komentar serta menambahkan link menuju form komentar. Selamat menyimak.

1. Masuk ke akun Blogger.

2. Klik menu "Template" melalui "Opsi lainnya" (simbol segitiga hitam) pada Dasbor baru Blogger.

3. Untuk membuat salinan template, klik tombol "Cadangkan / Pulihkan" lalu klik Tombol "Unduh template lengkap". Hal ini berguna untuk memudahkan kita mengembalikan template ke keadaan sebelum pengeditan jika terjadi kesalahan dalam mengedit template. Bila sudah, klik tombol "Tutup".

4. Klik tombol "Edit HTML" pada bagian "Langsung di Blog" lalu klik tombol "Lanjutkan".

5. Beri tanda centang pada "Expand Template Widget".

6. Carilah kode yang mirip dengan kode di bawah ini. Kode pada masing-masing template dapat saja sedikit berbeda.

Untuk menemukan kode dengan cepat, gunakan fitur pencarian teks pada browser. Misalnya, pada Mozilla Firefox, tekan tombol Ctrl+F di keyboard atau pada Google Chrome tekan tombol F3, lalu masukan penggalan kode yang akan dicari sebagai kata kunci utamanya.

7. Hapus kode tersebut dan ganti dengan kode di bawah ini.

<h4>

<b:if cond='data:post.numComments == 1'>

Ada 1 komentar untuk "<a expr:href='data:post.url'><data:blog.pageName/></a>". Baca komentar tersebut di bawah ini atau <a href='#comment-form' rel='nofollow'>poskan komentar</a>.

<b:else/>

Ada <data:post.numComments/> komentar untuk "<a expr:href='data:post.url'><data:blog.pageName/></a>". Baca komentar-komentar tersebut di bawah ini atau <a href='#comment-form' rel='nofollow'>poskan komentar</a>.

</b:if>

</h4>

8. Selanjutnya klik tombol "Simpan template".

9. Jika berhasil, hasilnya akan tampak seperti gambar di bawah ini.

Tulisan Jumlah Komentar Hasil Modifikasi

Tulisan jumlah komentar yang sudah dimodifikasi.

Selamat mencoba dan semoga berhasil.

Senin, 16 April 2012

Cara Mengganti Tulisan "Poskan Komentar" dengan Tulisan Lain atau Gambar

Pada artikel sebelumnya saya telah membahas mengenai cara membuat pesan formulir komentar di Blogger. Kali ini saya akan membahas hal yang masih berkaitan dengan komentar di Blogger yaitu tentang tulisan "Poskan Komentar". Tulisan ini dapat kita ganti dengan kata-kata atau kalimat yang diinginkan. Selain itu, "Poskan Komentar" juga bisa diganti dengan gambar atau ikon seperti kita mengganti link tulisan "Posting Lebih Baru", "Beranda" dan "Posting Lama" dengan gambar.

Nah, untuk mengganti tulisan "Poskan Komentar" dengan tulisan lain atau gambar dapat disimak langkah-langkahnya di bawah ini.

1. Masuk ke akun Blogger.

2. Klik Rancangan → Edit HTML.

3. Klik Download Template Lengkap untuk membuat salinan template. Jika nanti terjadi kesalahan kita dapat dengan mudah mengembalikan template ke kondisi sebelum dilakukan pengeditan.

4. Beri tanda centang pada "Expand Template Widget".

5. Cari kode <data:postCommentMsg/>. Untuk mempercepat pencarian tekan tombol Ctrl + F atau tombol F3 lalu masukkan kode yang dicari. Biasanya kode tersebut ada 2.

6. Selanjutnya ganti kedua kode tersebut dengan tulisan lain atau kalimat yang Anda inginkan. Jika Anda menemukan 3 kode, cukup ganti kode yang pertama dan ke-dua saja.

7. Bila Anda ingin menggantinya dengan gambar, maka hapus kode tersebut dan ganti dengan kode berikut:

Ganti tulisan yang berwarna merah dengan URL gambar Anda. Untuk mendapatkan URL gambar, kita perlu menyimpan atau meng-hosting gambar di Blogger atau di tempat lain.

8. Klik tombol "SIMPAN TEMPLATE".

9. Selesai dan lihat hasilnya.

Selamat mencoba. Semoga berhasil.

Tulisan "Poskan Komentar" yang sudah diganti.

Jumat, 13 April 2012

Cara Membuat Pesan Formulir Komentar di Blogger

Pernahkah Anda melihat pesan-pesan khusus di dekat area formulir komentar saat ingin berkomentar di suatu blog? Apakah Anda tertarik juga untuk membuat pesan tersebut pada blog Anda? Tidak sulit untuk membuat pesan pada formulir komentar dan tidak perlu mengedit HTML template blog karena Blogger telah menyediakan fasilitas tersebut. Kita tinggal mengetikkan kalimat-kalimat pesan saja sesuai keinginan.

Lalu, bagaimana cara membuat pesan di formulir komentar? Simak langkah-langkahnya di bawah ini.

1. Masuk ke akun Blogger.

2. Klik menu Setelan kemudian pilih tab Komentar.

3. Selanjutnya temukan bagian "Pesan Formulir Komentar" dan isikan pesan-pesan Anda pada kotak yang tersedia. Anda dapat menggunakan beberapa tag HTML, seperti <b>, <i>, <a>.

Mengetikkan pesan di bagian "Pesan Formulir Komentar".

4. Setelah itu klik tombol SIMPAN SETELAN yang ada pada bagian bawah laman.

5. Selesai. Hasilnya akan tampak seperti gambar di bawah ini di mana pesan tersebut muncul di atas formulir komentar.

Pesan Formulir Komentar.

Minggu, 11 Maret 2012

Komentar Bertingkat dengan Warna Komentar Admin yang Berbeda

Sebelumnya saya pernah memosting tentang cara membuat komentar bertingkat di Blogger. Komentar bertingkat atau threaded comments ini dibuat oleh pihak Blogger sendiri. Namun, di template blog ini, saya tidak menggunakan komentar bertingkat buatan Blogger tersebut.

Saya memakai komentar bertingkat dari blog Artis Tutorials untuk blog ini. Komentar bertingkat yang satu ini sudah dilengkapi dengan adanya warna kotak komentar admin yang berbeda dengan warna kotak komentar pengunjung. Bila teman-teman berminat untuk memasang komentar bertingkat ini, silakan pergi ke http://artistutorial.blogspot.com/2012/01/threaded-comments-for-blogger-comment.html untuk melihat langsung tutornya. Jika teman-teman mengalami masalah dalam pemasangannya, silakan bertanya kepada admin blog tersebut.

Komentar bertingkat dengan warna kotak komentar admin yang berbeda.

Bagi teman-teman yang menggunakan template Thesis Blogger karya Blog Juragan seperti yang saya pakai ini, bisa disimak pengalaman saya dalam memasang komentar bertingkat buatan Artis Tutorials di bawah ini.

1. Masuk ke akun Blogger.

2. Klik Rancangan >> Edit HTML.

3. Klik Download Template Lengkap untuk membuat backup template.

4. Beri tanda centang di "Expand Template Widget".

5. Cari kode ]]></b:skin> dan letakkan kode berikut di atas kode tersebut.

/*----------------------------------------------------
{--------} Comment {--------}
----------------------------------------------------*/
#comments h4 {
font-size: 18px;
font-weight: normal;
margin: 20px 0;
}

.cm_wrap {
clear: both;
margin-bottom: 10px;
float: right;
width: 100%;
}

.cm_head {
margin: 0;
width:60px;
float: left;
}

.cm_avatar {
margin: 0;
vertical-align: middle;
outline: 1px solid #fff;
border: 1px solid #ddd;
padding: 3px;
background-image: url(http://img846.imageshack.us/img846/7357/unled1oww.jpg);
background-position:center;
background-repeat:no-repeat;
width: 35px;
height: 35px;
}
.cm_avatar_a {
margin: 0;
vertical-align: middle;
border: 1px solid #ddd;
padding: 3px;
background:#c6e5f7;
background-position:center;
background-repeat:no-repeat;
width: 35px;
height: 35px;
}

.cm_reply {
padding-top: 5px;
}

.cm_reply a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
}

.cm_reply a:hover {
text-decoration: none !important;;
background: #ccc;;
background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));;
background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);;
}

.cm_entry {
padding: 16px 16px 0 16px;
background: #F7F7F7;
outline: 1px solid #fff;
border: 1px solid #ddd;
overflow: hidden;
}
.cm_entry_a {
padding: 16px 16px 0 16px;
background: #F7F7F7;
outline: 1px solid #fff;
border: 1px solid #ddd;
overflow: hidden;
}

.cm_arrow {
display: block;
width: 9px;
height: 18px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR5agV6u5zYm_EIRIqgNjHZgqsUMUHLYTTUJf7dhlyVkbtaWWROO4njsDosnTSOyq1NR5J2F3Z4mVeAOyzoFcc0WbU-Yh6EZkSuk5RsMLyQEelGkM8m2P2YVWw9SUwO_sQlWMVWVlCHYg/s1600/comment-arrow.gif) no-repeat;
position: absolute;
margin-left: -25px;
}

.cm_info {
margin-bottom: 5px;
border: thin solid #E6E6E6;
background-color: #F4F4F4;
padding: 5px;
}
.cm_info_a {
margin-bottom: 5px;
border: thin solid #E6E6E6;
background-color: #dff0fa;
padding: 5px;
}

.cm_name {
font-size: 14px;
color: #666666 !important;
text-decoration:none;
font-weight: bold;
float: left;

}
.cm_name_a {
font-family:"Francois One";
font-size: 14px;
color: #666666 !important;
text-decoration:none;
font-weight: 250;
float: left;

}

.cm_date {
font-size: 10px;
color: #999;
text-decoration:none;
float: right;

}
.cm_date_a {
font-family:"Francois One";
font-size: 10px;
color: #2D5E7B;
text-decoration:none;
float: right;
padding-top:5px;

}
.cm_entry p {
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #F4F4F4;
font-size: 13px;
color: #333;
word-wrap:break-word;
}
.cm_entry_a p {
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #dff0fa;
font-size: 13px;
color: #333;
word-wrap:break-word;
}

.cm_pagenavi {
font-size: 10px;
text-transform: uppercase;
color: #666;
text-shadow: 1px 1px white;
font-weight: bold;
}

.cm_pagenavi a {
color: #666;
text-decoration: none;
padding:10px;
}

.cm_pagenavi a:hover {
text-decoration: underline
}

.cm_pagenavi span {
color: #888;
background: white;
padding: 4px;
border: 1px solid #E0E0E0;
}

6. Kemudian cari kode </body> dan taruh kode berikut di atas kode tersebut.

7. Selanjutnya cari kode yang seperti di bawah ini.

<b:includable id='comments' var='post'>

susunan kode yang harus diganti

</b:includable>

8. Ganti kode-kode yang berada di antara includable tersebut dengan kode di bawah ini.

<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
        <h4>
             <b:if cond='data:post.numComments > 0'>
          <b:if cond='data:post.numComments == 1'>
            <span id='cm_total'>1</span> comment
          <b:else/>
            <span id='cm_total'><data:post.numComments/></span> comments
          </b:if>
        </b:if>
        </h4>

        <div id='cm_reply_css'/>

        <div class='cm_pagenavi' id='cm_page'/>

        <div id='cm_block'>
            <b:loop values='data:post.comments' var='comment'>
                <b:if cond='data:comment.isDeleted'>
                <b:else/>

                    <div expr:id='data:comment.anchorName'>
                        <div class='cm_wrap'>
                            <a expr:name='data:comment.anchorName'/>

<b:if cond='data:comment.author == data:post.author'>
                               <div class='cm_head'>
                                <div class='cm_avatar_a'>
                                    <b:if cond='data:blog.enabledCommentProfileImages'>
                                        <data:comment.authorAvatarImage/>
                                    </b:if>
                                </div>
                                <div class='cm_reply'>
                                    <a expr:href='"https://www.blogger.com/comment.g?blogID=__BlogID__&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); return false;'>Reply</a>
                                </div>
                            </div>
<b:else/>

                            <div class='cm_head'>
                                <div class='cm_avatar'>
                                    <b:if cond='data:blog.enabledCommentProfileImages'>
                                        <data:comment.authorAvatarImage/>
                                    </b:if>
                                </div>
                                <div class='cm_reply'>
                                    <a expr:href='"https://www.blogger.com/comment.g?blogID=__BlogID__&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); return false;'>Reply</a>
                                </div>
                            </div>
</b:if>

<b:if cond='data:comment.author == data:post.author'>
                                <div class='cm_entry_a'>
                                <span class='cm_arrow'/>
                                <div class='cm_info_a'>
                                    <div class='cm_name_a'>

                                      <b:if cond='data:comment.author == data:post.author'>
                                                                                       <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
                                                <data:comment.author/>
                                            </a>
                                                           <b:else/>

                                        <b:if cond='data:comment.authorUrl'>
                                            <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
                                                <data:comment.author/>
                                            </a>
                                        <b:else/>
                                            <b><data:comment.author/></b>
                                       </b:if>
                                        </b:if>
                                    </div>

                                            <b:if cond='data:comment.author == data:post.author'>
                                     <div class='cm_date_a'>
                                        <data:comment.timestamp/>
                                        <b:include data='comment' name='commentDeleteIcon'/>
                                    </div>
                                    <div class='clear'/>

                                            <b:else/>

                                    <div class='cm_date'>
                                        <data:comment.timestamp/>
                                        <b:include data='comment' name='commentDeleteIcon'/>
                                    </div>
                                    <div class='clear'/>
                                            </b:if>
                                </div>
                                  <b:if cond='data:comment.author == data:post.author'>
                                     <div class='comment-body-author'>
                                <p><data:comment.body/></p>
                                     </div>
                                            <b:else/>
                                <p><data:comment.body/></p>
                                 </b:if>
                            </div>


<b:else/>

                            <div class='cm_entry'>
                                <span class='cm_arrow'/>
                                <div class='cm_info'>
                                    <div class='cm_name'>

                                      <b:if cond='data:comment.author == data:post.author'>
                                                                                      <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
                                                <data:comment.author/>
                                            </a>
                                                           <b:else/>

                                        <b:if cond='data:comment.authorUrl'>
                                            <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
                                                <data:comment.author/>
                                            </a>
                                        <b:else/>
                                            <b><data:comment.author/></b>
                                       </b:if>
                                        </b:if>
                                    </div>

                                            <b:if cond='data:comment.author == data:post.author'>
                                     <div class='cm_date_a'>
                                        <data:comment.timestamp/>
                                        <b:include data='comment' name='commentDeleteIcon'/>
                                    </div>
                                    <div class='clear'/>

                                            <b:else/>

                                    <div class='cm_date'>
                                        <data:comment.timestamp/>
                                        <b:include data='comment' name='commentDeleteIcon'/>
                                    </div>
                                    <div class='clear'/>
                                            </b:if>
                                </div>
                                  <b:if cond='data:comment.author == data:post.author'>
                                     <div class='comment-body-author'>
                                <p><data:comment.body/></p>
                                     </div>
                                            <b:else/>
                                <p><data:comment.body/></p>
                                 </b:if>
                            </div>
</b:if>
                        </div>
                    </div>
                </b:if>
     </b:loop>
        </div>

        <div class='cm_pagenavi' id='cm_page_copy'/>

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

Ganti __BlogID__ (ada 2) dengan nomor blog ID kita.

Cara menemukan Blog ID, lihat gambar di bawah.

Blog ID bisa ditemukan di browser address pada menu "Rancangan".

Blog ID adalah nomor yang diberi border merah.
Selain itu, saya juga mengganti kata "Reply" (ada 2) dengan kata "Balas".
Kemudian saya juga mengganti kata "comment" dan "comments" dengan kata "Komentar".

9. Klik tombol "SIMPAN TEMPLATE".

Sampai di sini komentar bertingkat ini sudah dapat berjalan atau bekerja. Namun, warna pada kotak komentar admin masih bertumpang tindih dengan warna komentar admin bawaan template blog ini. Untuk itu saya menghapus kode di bawah ini agar komentar bertingkat ini berjalan dengan baik.

.comment-body-author {
background: #fee6e6; /* Warna Background */
border:2px dotted #d31111; /*Border*/
margin:0;
padding:0 0 0 0px;
}

Saya tidak mengetahui apakah bila cara di atas dipraktekkan pada template yang lain akan mempunyai hasil yang sama dengan template blog ini.

Kamis, 08 Maret 2012

Cara Membuat Komentar Bertingkat di Blogger

Fitur komentar bertingkat ini telah disediakan Blogger sejak bulan Januari yang lalu. Dengan fitur komentar bertingkat ini, kita dapat langsung menuliskan balasan komentar di bawah komentar pengunjung yang ingin kita balas dengan mengeklik link "Balas" yang ada di bawah komentar pengunjung tersebut. Nantinya, bila komentar balasan ini telah dipublikasikan maka komentar itu akan muncul di bawah komentar yang dibalas seperti halnya pada komentar blog WordPress.

Perlu diketahui, setelah kita menerapkan komentar bertingkat ini, mungkin ada aplikasi yang berkaitan dengan komentar menjadi tidak berfungsi lagi, seperti warna kotak komentar admin yang berbeda, emoticons, dan lain sebagainya.

Bagi yang menggunakan template bawaan Blogger dapat mencoba cara di bawah ini untuk mengaktifkan fitur komentar bertingkat.

1. Masuk ke akun Blogger Anda.

2. Setelah berada di laman Dasbor, klik menu "Setelan" kemudian pilih "Komentar". Pada bagian "Komentar" tentu saja pilih tampilkan. Sedangkan di bagian "Penempatan Formulir Komentar" pilih "Disematkan di bawah entri".

Menu "Setelan"

3. Selanjutnya klik tombol "SIMPAN SETELAN" yang berada pada bagian bawah laman.

4. Masih berada di menu "Setelan", silakan klik tab "Feed Situs". Pada bagian "Izinkan Feed Blog" pilih "Penuh".

Pilih "Penuh" pada "Izinkan Feed Blog".

5. Kemudian klik tombol "SIMPAN SETELAN".

6. Selanjutnya silakan cek komentar pada blog Anda, apakah sudah berganti menjadi komentar bertingkat atau belum.

Nah, bagi yang menggunakan template modifikasi atau template hasil men-download dari pihak ke-tiga, bisa menyimak langkah-langkahnya di bawah ini.

1. Ikuti langkah-langkah di atas.

2. Klik Rancangan >> Edit HTML.

3. Klik Download Template Lengkap untuk membuat salinan template. Hal ini untuk berjaga-jaga jika nanti terjadi kesalahan, kita sudah mempunyai backup sehingga dengan mudah mengembalikan template seperti semula.

4. Beri tanda centang pada "Expand Template Widget".

5. Silakan cari kode <b:include data='post' name='comments'/>

Bila Anda menggunakan peramban web Mozilla Firefox, Anda dapat menekan tombol Ctrl + F pada keyboard. Kemudian copy kode yang akan dicari tersebut dan paste di kotak yang tersedia, kemudian klik tab "Sorot semuanya". Nah, sekarang kode-kode yang dicari akan mempunyai warna latar belakang teks berwarna ungu. Kode tersebut ada yang berjumlah 3, ada juga yang berjumlah 4, tergantung pada template yang dipakai.

Klik "Sorot semuanya".

6. Silakan ganti semua kode pada langkah nomor 5 yang ditemukan dengan kode di bawah ini.

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

7. Klik tombol "SIMPAN TEMPLATE".

8. Silakan lihat komentar blog Anda, apakah sudah mengalami perubahan menjadi komentar bertingkat atau belum.

Sabtu, 25 Februari 2012

Tips Berkomentar pada Form Komentar yang Terpotong

ernahkah Anda mengunjungi suatu blog yang form komentarnya terpotong? Form komentar yang terpotong tersebut menyulitkan kita ketika akan berkomentar karena tidak terlihatnya huruf verifikasi dan tombol "Publish".

Form komentar yang terpotong pada suatu blog.

Untuk menyiasatinya agar kita dapat berkomentar di blog tersebut, kita bisa menekan tombol "Tab" pada keyboard berkali-kali hingga munculnya huruf verifikasi dan tombol "Publish".

Huruf chaptcha dan tombol "Publish" yang sudah terlihat.

Nah, bila sudah muncul tombol "Publish" maka sekarang kita dapat dengan mudah berkomentar di blog tersebut.

Komentar yang telah diterbitkan.

Kamis, 05 Januari 2012

Pasang Total Posting dan Total Komentar

Kali ini saya akan berbagi informasi mengenai pemasangan widget Total Posting dan Total Komentar. Dari namanya kita sudah bisa menebak kalau widget yang satu ini akan menunjukkan kepada kita jumlah keseluruhan dari posting dan komentar yang ada pada blog kita. Screenshot-nya dapat di lihat pada gambar di samping. Script dari widget Total Posting dan Total Komentar ini saya dapat dari hasil gugling. Terima kasih kepada pembuat script ini.

Total Posting dan Total Komentar

Untuk memasangnya pada sidebar blog, silakan simak langkah-langkahnya di bawah ini.

1. Masuk ke akun Blogger Anda.

2. Setelah di Dasbor, klik Rancangan kemudian Elemen Laman.

3. Lalu klik Tambah Gadget dan pilih HTML/JavaScript.

4. Berikan judul bila Anda mau.

5. Selanjutnya copy script untuk kedua widget tersebut di bawah ini dan paste di Konten.

SCRIPT UNTUK TOTAL POSTING

SCRIPT UNTUK TOTAL KOMENTAR

Ganti URL-BLOG-ANDA dengan URL blog, misalnya klikmunadi.blogspot.com.
Tulisan yang berwarna ungu dapat diganti sesuai keinginan.

6. Klik tombol SIMPAN.

7. Silakan letakkan widget ke tempat yang Anda inginkan.

8. Jika sudah, klik tombol SIMPAN.

9. Selesai

Selasa, 20 Desember 2011

Cara Mudah Menambahkan Scroll pada Komentar Blog

Jumlah komentar pada suatu artikel blog yang telah mencapai puluhan membuat tampilan memanjang ke bawah. Hal ini dapat membuat pengunjung berikutnya yang ingin memberikan komentar harus menggulung deretan komentar tersebut terlebih dahulu untuk menemukan kotak komentar. Bila tersedia link yang langsung mengantarkan pengunjung ke kotak komentar maka hal ini tidak begitu menjadi masalah. Namun, bila tidak tersedia link tersebut kita dapat menambahkan scroll atau penggulung pada kolom komentar tersebut. Selain dapat memudahkan pengunjung, adanya scroll ini juga bisa membuat blog terlihat simpel.

Kolom komentar dengan scroll.

Untuk menambahkan scroll pada komentar, kita dapat menggunakan kode CSS tertentu. Langkah-langkahnya dapat disimak di bawah ini.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk membuat salinan template.

4. Cari kode untuk komentar yang biasanya ditandai dengan #comments-block{. Gunakan tombol Ctrl + F untuk memudahkan pencarian. Contoh kode lengkapnya seperti di bawah ini:

#comments-block{border:0px dotted #ccc;width:569px;margin:1.3em 0 1.5em;line-height:1.6em}

5. Kemudian hapus kode border:0px dotted #ccc; dan tambahkan kode max-height:300px;border:1px solid #eee;overflow:auto; sehingga hasilnya seperti di bawah ini:

#comments-block{max-height:300px;border:1px solid #eee;overflow:auto;width:569px;margin:1.3em 0 1.5em;line-height:1.6em}

Tinggi scroll adalah 300 px, tebal border 1 px, gaya border solid dan warna border #eee, poin-poin ini dapat diganti sesuai selera Anda.

6. Klik tombol SIMPAN TEMPLATE.

Senin, 12 September 2011

Cara Membuat Fungsi Scroll pada Daftar Komentar Blog

ila komentar-komentar yang telah diberikan oleh para pengunjung blog sudah cukup banyak, tentunya hal ini akan membuat daftar komentar menjadi memanjang ke bawah. Belum lagi ditambah komentar-komentar dari sang pemilik blog karena merespon komentar-komentar dari pengunjung tersebut. Hal ini membuat halaman blog menjadi sangat panjang karena sudah banyaknya komentar sehingga terkesan memakan tempat.

Untuk mengatasinya kita dapat menggunakan fungsi scroll pada daftar komentar tersebut seperti yang terlihat pada gambar di atas. Caranya adalah dengan menambahkan kode CSS pada HTML template blog kita. Berikut ini adalah langkah-langkah membuatnya. Cara di bawah ini masih menggunakan antarmuka Blogger yang lama.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk membuat backup template. Gunanya untuk berjaga-jaga kalau nanti terjadi kesalahan dalam pengeditan, kita dapat dengan mudah mengembalikan template seperti semula.

4. Beri tanda centang pada Expand Template Widget.

5. Cari kode yang mirip-mirip dengan kode di bawah ini.

#comments h4 {

color:#666666;

font-weight:normal;

letter-spacing:0.2em;

line-height:1.4em;

margin:1em 0;

font-size:14px;

text-transform:none;

}

6. Kemudian letakkan kode berikut di atas kode tersebut.

#comments {

height:400px;

overflow:auto;

}

Sehingga susunan kodenya menjadi seperti di bawah ini.

#comments {

height:400px;

overflow:auto;

}

#comments h4 {

color:#666666;

font-weight:normal;

letter-spacing:0.2em;

line-height:1.4em;

margin:1em 0;

font-size:14px;

text-transform:none;

}

height:400px; menunjukkan tinggi scroll sebesar 400 piksel. Anda dapat mengubahnya sesuai keinginan Anda.

7. Selanjutnya cari kode yang mirip dengan kode di bawah ini. Intinya cari kode yang ada id='comments-block'-nya.

<b:if cond='data:post.numBacklinks != 0'>

<b:loop values='data:post.comments' var='comment'>

<b:if cond='data:comment.authorUrl'>

<b:else/>

<data:comment.author/>

</b:if>

<data:commentPostedByMsg/>

</dt>

<b:if cond='data:comment.isDeleted'>

<b:else/>

</b:if>

</dd>

<b:include data='comment' name='commentDeleteIcon'/>

</span>

</dd>

</b:loop>

</dl>

</b:if>

8. Lalu tambahkan kode <div style='overflow:auto; width:ancho; height:400px;'> di atas kode <dl class='comments-block' id='comments-block'> dan tambahkan kode penutup </div> di bawah kode </dl> sehingga hasilnya akan menjadi seperti di bawah ini.

<b:if cond='data:post.numBacklinks != 0'>

<b:loop values='data:post.comments' var='comment'>

<b:if cond='data:comment.authorUrl'>

<b:else/>

<data:comment.author/>

</b:if>

<data:commentPostedByMsg/>

</dt>

<b:if cond='data:comment.isDeleted'>

<b:else/>

</b:if>

</dd>

<b:include data='comment' name='commentDeleteIcon'/>

</span>

</dd>

</b:loop>

</dl>

</div>

</b:if>

9. Klik tombol SIMPAN TEMPLATE.

10. Selesai dan lihat blog Anda.

Bila Anda ingin menambahkan border atau garis tepi pada fungsi scroll seperti yang terlihat pada screenshot di atas, maka tambahkan kode border:1px solid #ccc; setelah kode overflow:auto; sehingga susunan kodenya akan menjadi seperti di bawah ini.

#comments {

height:400px;

overflow:auto;

border:1px solid #ccc;

}

border:1px solid #ccc; merupakan garis tepi atau border dengan ketebalan 1 piksel bergaya solid berwarna #ccc;