Your-BelajarBLOG: Cara Membuat Tombol Reply pada Komentar Blog

Tombol Reply adalah sebuah tombol yang di gunakan oleh autor atau pengunjung yang lain untuk menjawab pertanyaan dari si pengunjung yang berkomentar. Tombol Reply ini wajib dibuat oleh Para Autor. agar tidak memakan tempat yang banyak. Tombol ini juga mempunyai Style yang banyak dan anda bisa memilih sendiri untuk sytlenya. Pengunjung lebih tertatik jika anda memberikan style pada Tombol Reply ini dibandingkan dengan yang tidak memberikan Style. Untuk itu kali ini saya akan menjelaskan tentang tutorial Cara untuk Membuat Tombol Reply pada Komentar Blog. Untuk membuatnya, silahkan ikuti cara-cara berikut ini:Silahkan Login Ke Blogger Anda.

Setelah itu, Klik Menu Template, Kemudian, Klik Tombol Edit HTML untuk mengedit HTML template anda.
Centang Expand Template Widget, Cari Kode ini <data:commentPostedByMsg/> dengan menekan CTRL+F atau dengan F3
Setelah Menemukan, Paste kode berikut ini dibawah kode <data:commentPostedByMsg/> :

<a href='http://your-belajarblog.blogspot.com'><img alt='Your-BelajarBLOG' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUKPwueTUYsuRk8hK8IGfuHdqg5wPZIwQYJ-v_-outfTg0a8EzAJESotBgRmdhDWM9ugEX0_6orRHWI5QWPR5hGgcSnMuJY50wjA6I-S2jrf20pYPxhrDlLJVHyf4hlIwwgvjV-8To2jKA/s1600/best+blogger+tips.png'/></a><span class='comment-reply'><a class='h12' expr:href='"https://www.blogger.com/comment.g?blogID=Blog ID Anda Disini&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=400,height=450"); return false;'>Reply it</a></span><a href='http://your-belajarblog.blogspot.com'><img alt='Your-BelajarBLOG' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUKPwueTUYsuRk8hK8IGfuHdqg5wPZIwQYJ-v_-outfTg0a8EzAJESotBgRmdhDWM9ugEX0_6orRHWI5QWPR5hGgcSnMuJY50wjA6I-S2jrf20pYPxhrDlLJVHyf4hlIwwgvjV-8To2jKA/s1600/best+blogger+tips.png'/></a>

Keterangan:
Ganti Tulisan Blog ID Anda Disini dengan ID Blog anda, Jika tidak mengerti Berikut Contohnya:
http://www.blogger.com/blogger.g?blogID=4846728123937461213#overview

Ambil ID yang berwarna biru sesuai dengan ID anda.

Setelah itu, Cari Kode .post h3 { dengan menekan CTRL+F atau dengan F3.
Setelah Menemukan, Paste Kode berikut ini diatas kode .post h3 { :

Pilih Style Yang Anda Mau:

.h12 {
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
    background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
    background-color:#ededed;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #dcdcdc;
    display:inline-block;
    color:#777777;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    padding:1px 21px;
    text-decoration:none;
    text-shadow:1px 1px 0px #ffffff;
}/*your-belajarblog.blogspot.com */
.h12:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
    background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
    background-color:#dfdfdf;
}.h12:active {
    position:relative;
    top:1px;
}
/* This imageless css button was generated by your-belajarblog.blogspot.com */

.h12 {
    -moz-box-shadow:inset 0px 1px 0px 0px #f29c93;
    -webkit-box-shadow:inset 0px 1px 0px 0px #f29c93;
    box-shadow:inset 0px 1px 0px 0px #f29c93;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) );
    background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
    background-color:#fe1a00;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #d83526;
    display:inline-block;
    color:#ffffff;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    padding:1px 21px;
    text-decoration:none;
    text-shadow:1px 1px 0px #b23e35;
}
/*your-belajarblog.blogspot.com */
.h12:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00) );
    background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
    background-color:#ce0100;
}.h12:active {
    position:relative;
    top:1px;
}
/* This imageless css button was generated by your-belajarblog.blogspot.com */

.h12 {
    -moz-box-shadow:inset 0px 1px 0px 0px #97c4fe;
    -webkit-box-shadow:inset 0px 1px 0px 0px #97c4fe;
    box-shadow:inset 0px 1px 0px 0px #97c4fe;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #1e62d0) );
    background:-moz-linear-gradient( center top, #3d94f6 5%, #1e62d0 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#1e62d0');
    background-color:#3d94f6;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #337fed;
    display:inline-block;
    color:#ffffff;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    padding:1px 21px;
    text-decoration:none;
    text-shadow:1px 1px 0px #1570cd;
}.h12:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1e62d0), color-stop(1, #3d94f6) );
    background:-moz-linear-gradient( center top, #1e62d0 5%, #3d94f6 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e62d0', endColorstr='#3d94f6');
    background-color:#1e62d0;
}.h12:active {
    position:relative;
    top:1px;
}
/* This imageless css button was generated by your-belajarblog.blogspot.com */

.h12 {
    -moz-box-shadow:inset 0px 1px 0px 0px #fff6af;
    -webkit-box-shadow:inset 0px 1px 0px 0px #fff6af;
    box-shadow:inset 0px 1px 0px 0px #fff6af;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23) );
    background:-moz-linear-gradient( center top, #ffec64 5%, #ffab23 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23');
    background-color:#ffec64;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #ffaa22;
    display:inline-block;
    color:#333333;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    padding:1px 21px;
    text-decoration:none;
    text-shadow:1px 1px 0px #ffee66;
}.h12:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64) );
    background:-moz-linear-gradient( center top, #ffab23 5%, #ffec64 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64');
    background-color:#ffab23;
}.h12:active {
    position:relative;
    top:1px;
}
/* This imageless css button was generated by your-belajarblog.blogspot.com */

Setelah itu, Klik Tombol Simpan Template.

Selamat Mencoba,

Salam Sukses.

Your-BelajarBLOG

Your-BelajarBLOG

2/04/2013

Cara Membuat Tombol Reply pada Komentar Blog

No comments:

Post a Comment