Trik merubah icon Author Comment jadi teks berjalan di Blogger Threaded CommentClick here to get more tutorials!

Blogger hack kali ini mencoba merubah icon blog author yang terletak di kotak komentar (di atas teks komentar author/penulis) yang bertanda "Icon blog author yang digunakan di blogger threaded comment. Icon berukuran 18px x 18px dan digunakan sebagai penanda bahwa si pemberi komentar adalah author atau penulis." menjadi sebuah teks berjalan memanfaatkan kode css3 animation. Efek teks berjalan pada icon blog author blogger threaded comment tak memungkinkan untuk dibuat menggunakan kode html marquee sehingga kita gunakan css3 animation. Fungsinya akan tak berbeda karena dengan css3 animation ini maka teks akan berjalan dari kanan ke kiri dengan kecepatan yang dapat diatur juga.

D E M O

Lihat di kotak komentar di bawah posting. Dia atas teks komentar penulis akan terlihat sebuah teks berjalan yang disertai icon profil author di ujung sebelah kanan.

Cara mengganti icon blog author dg teks berjalan

1. Login ke BloggerAnda bisa klik disini untuk login ke blogger!
2. Template
3. Backup/Restore Template. Panduannya bisa dibuka disiniKlik untuk mengikuti panduan cara melakukan backup/restore template.
4. Edit HTML
   

   Template › Edit HTML

   • Procced (Lanjutkan)
   • Cari Kode : ]]></b:skin>
   • Gunakan Ctrl + F untuk mempermudah & mempercepat pencarian.
   • Copy dan paste-kan kode css sesuai icon profil yang digunakan (lihat kode css di bagian bawah) di atas kode ]]></b:skin>
   • Simpan Template/Save Template
5. Selesai...
6. Buka blog di halaman posting, kemudian buat sebuah komentar untuk melihat hasilnya.

Kode CSS

.comment-header{
        position:relative;
        background:linear-gradient(to right,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 100%);
        background:-o-linear-gradient(left,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 100%);
        background:-ms-linear-gradient(left,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 100%);
        background:-moz-linear-gradient(left,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 100%);
        background:-webkit-gradient(linear,left top,right top,color-stop(0%,rgba(0,0,0,.2)),color-stop(100%,rgba(0,0,0,0)));
        background:-webkit-linear-gradient(left,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#33000000',endColorstr='#00000000',GradientType=1);
        height:18px;
        padding:3px 5px 3px 5px;
        overflow:hidden;
}
cite.user,span.datetime{
        position:relative;
        display:block;
        height:18px; /* code by: http://gubhugreyot.blogspot.com - 25 juli 2012 */
        max-width:120px;
        overflow:hidden;  
        float:right;
        text-align:right;
}
cite.user{
       padding-right:5px;
}
cite.user a,span.datetime a{
        text-decoration:underline;
}
span.datetime{
        margin-right:10px;       
}
cite.user  a,span.datetime a{
        display:inline-block;
        height:100%;
}
@keyframes admin_GRanima{from{left:0%;}to{left:-70%;}}
@-o-keyframes admin_GRanima{from{left:0%;}to{left:-70%;}}
@-ms-keyframes admin_GRanima{from{left:0%;}to{left:-70%;}}
@-moz-keyframes admin_GRanima{from{left:0%;}to{left:-70%;}}
@-webkit-keyframes admin_GRanima{from{left:0%;}to{left:-70%;}}
span.icon.user.blog-author{
        animation:admin_GRanima 8s infinite linear alternate; /* 8s = durasi - kecepatan */
        -o-animation:admin_GRanima 8s infinite linear alternate; /* semakin besar semakin lambat */
        -ms-animation:admin_GRanima 8s infinite linear alternate; /* makin kecil makin cepat */
        -moz-animation:admin_GRanima 8s infinite linear alternate;
        -webkit-animation:admin_GRanima 8s infinite linear alternate;
        background:none !important;
        position:absolute;        
        width:300px;
        height:18px;
        top:3px;
        left:0;  /* code by: http://gubhugreyot.blogspot.com - 25 juli 2012 */
        text-align:right;        
}
span.icon.user.blog-author:before{
        width:280px; /* lebar boxs teks ==> sesuaikan panjang teks dg lebar boks  */
        display:block;
        padding-right:20px;
        height:18px;
        content:"Komentar oleh Admin - gubhugreyot"; /* Buat teks berjalan di sini */
        font-size:12px;
        font-weight:bold;
        color:#900;
        background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid4swtNR8WuqebmNWkM1yFmBPAJyW7pT1bLS9-KZPau5imIsQjA9Sah4eLqr-JRKSvrSnN6jWWXG-RjxF9BRrIfq3PMNo6vHDHPQXzM8o7gMArugMcdJtaFu3TLV7RpKsiaPFejN6ejfg/s128/gubhugreyot-profile-transparent-18x18.png) right center no-repeat;
        background-size:18px 18px;
}

Keterangan/Catatan:

• Ganti teks "Komentar oleh Admin - gubhugreyot" dengan teks anda.
• Anda bisa gunakan teks yang pendek ataupun panjang, namun batasan maksimal boks teks sebesar 280px .
• Kecepatan teks diatur dengan merubah nilai 8s (dalam detik/second), dimana semakin besar teks akan berjalan semakin lambat. Semakin kecil sebaliknya akan semakin cepat.
• Ganti icon profil author "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid4swtNR8WuqebmNWkM1yFmBPAJyW7pT1bLS9-KZPau5imIsQjA9Sah4eLqr-JRKSvrSnN6jWWXG-RjxF9BRrIfq3PMNo6vHDHPQXzM8o7gMArugMcdJtaFu3TLV7RpKsiaPFejN6ejfg/s128/gubhugreyot-profile-transparent-18x18.png" dengan URL icon profil anda.
• Icon profil author berukuran 18 x 18 (px)