Button CSS3 u Reply Comment Blogger New Reply Comments

Membuat button reply comment di Blogger New Threaded Comments dengan css3 diharapkan membuat button reply comment menjadi levih mudah dikenali, terutama oleh pengunjung yang belum begitu akrab dengan fungsi reply comment di Blogger New Threaded Comments. Membuat button reply comment dengan kode css3 juga memberi banyak kemungkinan bagi blogger untuk menciptakan effek menarik layaknya sebuah effek animasi. Mengingat kemampuan lebih yang dimiliki css3, tentu saja menggunakan button comment seperti ini membuat blog menjadi lebih menarik. Beberapa kode css3 yang bisa digunakan antara lain css3 transition, css3 box-shadow dan text shadow dan css3 border radius (rounded corners).

Kode CSS Button Reply Comment Blogger New Threaded Comments :

.continue a,.comment-actions a{
      position:relative;
      top:0;
      display:inline-block !important;
      font-family:Arial;
      font-size:12px;
      padding:2px 8px !important;
      text-decoration:none;
      color:#ccc !important;
      border-radius:3px;
      border:1px solid #333;
      margin-right: 10px;
      text-shadow:1px 1px 1px #000;
      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGD8tbOkHZccsyIUjBJFRLkXg7PI8iys-8aV-WuOFJj8nHQGjAvLstIQaO6T_qlfVJhQgR_wwwWlT-vxb0iYqDhCS9nxg_bG9QW7LIcLXuxNQyD8UevMGMMxX4tx7qr78pxMVuLz4eNzf_/s128/bgHovJQAccordionBlueV30H1.gif.png) 0 0 repeat-x;
      transition:0.6s;
      -o-transition:0.6s;
      -moz-transition:0.6s;
      -webkit-transition:0.6s;
      -ms-transition:0.6s;
}
.continue a:hover,.comment-actions a:hover{
      text-decoration: none;
      color:#fff !important;
      border:1px solid #eee;
      box-shadow:-1px -1px 1px #222, 1px 2px 2px #000;
      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGD8tbOkHZccsyIUjBJFRLkXg7PI8iys-8aV-WuOFJj8nHQGjAvLstIQaO6T_qlfVJhQgR_wwwWlT-vxb0iYqDhCS9nxg_bG9QW7LIcLXuxNQyD8UevMGMMxX4tx7qr78pxMVuLz4eNzf_/s128/bgHovJQAccordionBlueV30H1.gif.png) 0 100% repeat-x;
}
.continue a:active,.comment-actions a:link:active{
      background:#555;
      border-radius:4px;
      top:2px;
}

Cara menggunakan kode CSS :

1. Login ke Blogger.
2. Dasbor/Dasboard.
3. Rancangan/Design.
4. Edit HTML.
5. Cari kode ]]></b:skin> .
6. Letakkan kode CSS di atas ]]></b:skin>
   Pilih salah satu kode css di atas, atau silahkan edit terlebih dahulu.
7. Simpan Template/Save Template.
8. Selesai.

Ganti & rubah ukuran icon author comment di Blogger New Threaded Comments

Dengan merubah ukuran icon author comment pada sistem komentar baru blogger "Threaded Comment", maka anda mempunyai banyak pilihan untuk mengganti "icon aneh berbentuk bulatan hitam dengan tongkat pak tua berada di tengah-tengahnya" ini. Perubahan icon author comment di Blogger New Threaded Comments tentunya mempunyai batasan tertentu karena ukuran yang terlalu tinggi akan membuat box komentar menjadi penuh sesak serta bisa merusak tatanan xomment box. Sebaiknya anda merubah tinggi maksimal 30px. Inipun sebenarnya sudah terlalu besar. Keleluasaan yang cukup memungkinkan adalah perubahan lebar (width) karena tersedia ruang yang cukup lebar. Anda bisa manfaatkan ini untuk mengganti icon author comment ini dengan berbagai icon/image lain yang membuat blog terlihat lebih menarik.

Kode CSS-1 :

.comment-block .icon.blog-author{
      width:30px !important; /* by: gubhugreyot , April, 09, 2012 */
      height:30px !important;
      background-size:30px auto !important;
      margin-bottom:-15px !important;
}

Keterangan :

1. Kode css di atas adalah kode dasar untuk perubahan ukuran icon author comment tanpa mengganti icon default.
2. Icon baru berukuran height=30px dan width=30px (ukuran default=18px).
3. Margin-bottom = 15px berfungsi untuk menarik icon yang sudah diperbesar agar lebih ke bawah dengan tujuan untuk keseimbangan header comment.
4. Untuk merubah ukuran icon default beserta ukurannya anda bisa gunakan kode css di bawah ini.

Kode CSS-2 :

.comment-block .icon.blog-author{
      width:35px !important; /* by: gubhugreyot , April, 09, 2012 */
      height:30px !important;
      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw7CDBKXC565P7D_mS3vjeqjT0i1OxOzFJXVMdsccvp8YJ3sEyOlbfNmEtFypVI9E0B7N8GKLyGEsCdJYT1Oezv9DIHK1WS_x6yCo08xmxPjcstgNY9iz1zTTV0hdPKROoso3pbGmJBw0F/s128/butt-dance.gif) center no-repeat !important;
      background-size:35px 30px !important;
      margin-bottom:-15px !important;

}

Kode CSS-3 :

.comment-block .icon.blog-author{
      width:128px !important; /* by: gubhugreyot , April, 09, 2012 */
      height:26px !important;
      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS9bXhy0udAY0JqkmnAppAnTx639zROQ1CGJDbTw5qntfoKAzoslafAFm9iExYJLRzuDYIg09KwWQ70vxcBdqelNxdT6khD_y8I6SBkNrLAZFl5d2Y3Z1dirENbZU6wnY-1GJDgghDcHs/s128/VBlogoGRfirst.gif) center no-repeat !important;
      background-size:128px 26 !important;
      margin-bottom:-10px !important;
}

Keterangan :

1. Kode CSS-2 dan CSS-3 menggunakan background imaga berbeda yang berfungsi sebagai pengganti icon author comment default blogger.
2. Kode berwarna merah adalah URL icon/image pengganti icon author comment.
3. Perhatikan pada width dan height. Nilai ini sama dengan nilai pada background-size dan nilai ini diambil dari ukuran background yang digunakan sebagai pengganti icon.
4. Margin-bottom bisa dirubah nilainya untuk penyesuaian pada header comment - autor comment.
5. Upload image pengganti icon author comment di boks posting atau di picasaweb.

Cara menggunakan kode CSS :

1. Login ke Blogger.
2. Dasbor/Dasboard.
3. Rancangan/Design.
4. Edit HTML.
5. Cari kode ]]></b:skin> .
6. Letakkan kode CSS di atas ]]></b:skin>
   Pilih salah satu kode css di atas, atau silahkan edit terlebih dahulu.
7. Simpan Template/Save Template.
8. Selesai.

Catatan/Keterangan :

1 syntax css u ganti icon author di Blogger New Treaded Comments

Silahkan klik untuk perbesar gambar!
Memang benar kata orang. Melihat icon author pada comment box Blogger New Threaded Comments yang berupa lingkaran hitam dengan sebuah tongkat/pena kecil ditengah sungguh membuat siapapun bingung mengartikannya. Icon/symbol yang sebenarnya menjadi penanda komentar author/penulis (author comment) ini terasa sangat janggal di mata. Bukan hanya karena warnanya yang bulat hitam dengan tongkat anehnya yang terasa tak proporsional saja, namun penanda author ini menjadi terasa kurang pas di blog karena terlihat seperti rambu-rambu lalu lintas yang biasa di pasang di tengah jalan raya. Yang membedakan keduannya hanyalah pada ukuran dan warnanya saja. Eit ... barangkali kalau ditambah bambu sebagai penyangga akan pas dan sama persis dengan rambu lalu lintas di samping rumah anda!

Jika anda salah satu diantara sekian banyak blogger yang merasa risih atau terganngu adanya icon author comment seperti tersebut di atas, ada sebuah cara untuk mengganti icon tersebut dengan icon yang lain. Anda dapat menggunakan emoticon, yahoo smiley atau berbagai image yang lain, baik berupa gambar statis aatupun animasi gif. Yang perlu diperhatikan hanyalah ukurannya. Gunakan ukuran image dengan tinggi (height) dan lebar (width) sebesar 18px (bujursangkar). Upload gambarnya di blogger atau picasaweb dan kemudian pastekan di kode css yang akan disertakan di bawah.

Kode CSS :

.comment-block .icon.blog-author{
      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdlfKOJZymKT_omzvRLzhxDOBXOTY1-71QFTzEaXW0a4wDd8bTQ9nTtWFWdgr7NzTgZNQf9eSyHyjEgrtzgkRFUWyCtegJPIw5HGkVUUQylzjeyF_DB4FRoCU7JG-Cog2CxuWciAxkkuze/s18/animasi-bendera-indonesia.gif) center no-repeat !important;
}

Cara menggunakan kode CSS :

1. Login ke Blogger.
2. Dasbor/Dasboard.
3. Rancangan/Design.
4. Edit HTML.
5. Cari kode ]]></b:skin> .
6. Letakkan kode CSS di atas ]]></b:skin>
   Pilih salah satu kode css di atas, atau silahkan edit terlebih dahulu.
7. Simpan Template/Save Template.
8. Selesai.

Catatan/Keterangan :

1. Gunakan image dengan ukuran width dan height sebesar 18px.
2. Upload image yang akan digunakan melalui halaman posting.
3. Jika ingin mengganti image, gantilah kode yang berwarna merah dengan image hasil upload.
4. Selain upload melalui halaman posting blogger, anda bisa upload di:
   http://picasaweb.google.com
5. Untuk ke picasaweb sebaiknya login ke blogger terlebih dahulu!

Trick Merubah Ukuran Avatar di Blogger New Threaded Comments

Klik untuk perbesar gambar!

Merubah ukuran avatar di box/kotak komentar Blogger New Threaded Comments memang membutuhkan trik khusus karena ukuran avatar ini memang sebelumnya telah di setting dengan ukuran tertentu. Merubahnya tak seperti ketika kita memposting image/gambar yang hanya perlu merubah width dan height. Trick merubah avatar kotak komentar melibatkan kode css !important (deklarasi css !important) agar kode yang diutamanakan oleh browser adalah kode css baru yang ditambahkan di template.

Kode CSS-1 :

.comment .avatar-image-container{
      width:60px; /* A */
      max-height:70px; /* D */
}
.comment .avatar-image-container img{
      width:50px; /* B */
      border:1px solid #666 !important;
      border-radius:5px;
      max-width:50px; /* C */
      max-height:70px; /* E */
      float:left;  /* by : gubhugreyot, April,2012 */
}
.comments .comment-block{
     margin-left:65px !important; /* F */
}

Keterangan :

1. A adalah lebar ruang/kolom penempatan avatar.
2. B adalah lebar avatar (width).
3. C adalah tinggi tinggi maksimal avatar (max-height).
4. D adalah tinggi ruang/kolom penampatan avatar.
5. E adalah lebar maksimal avatar (max-width).
6. F adalah jarak box teks komentar dari ujung sebelah kiri box komentar (margin-left).
7. A dibuat lebih besar dari B untuk memberi ruang bagi penggunaan padding, margin dan border.
8. D sama dengan E dengan ukuran lebih besar dari A, B dan C untuk memberi ruang jika tinggi image lebih besar dari lebar image (height>width).
9. F mempunyai selisih minimal sekitar 5px dibandingkan A agar ada ruang cukup untuk penempatan avatar.
10. Kode css di atas adalah kode paling sederhana untuk merubah ukuran avatar di comment box Blogger New Threaded Comments.
11. Dalam kode css di atas ukuran avatar telah diperbesar hingga mempunyai lebar 50px (width). Ukuran standar yang biasa digunakan berkisar 32px.

Kode CSS-2 :

.comment .avatar-image-container{
      width:90px;
      height:90px;
      max-height:150px;
}
.comment .avatar-image-container img{
      width:60px;
      border:1px solid #eee;
      padding:5px !important;
      background:#666 !important;
      border-radius:6px;
      max-width:100px;
      max-height:150px;
      float:left;
      margin:10px; 
      box-shadow:0 0 12px #000;
}
.comments .comment-block{
      margin-left:100px !important;
}

Keterangan :

1. Kode CSS-2 menggunakan ukuran avatar lebih besar.
2. Melibatkan background, padding, border-radius dan box-shadow sehingga ada beberapa perubahan toleransi ukuran yang berbeda dengan kode CSS-1 agar box-shadow bisa terlihat secara sempurna.

Cara menggunakan kode CSS :

1. Login ke Blogger.
2. Dasbor/Dasboard.
3. Rancangan/Design.
4. Edit HTML.
5. Cari kode ]]></b:skin> .
6. Letakkan kode CSS di atas ]]></b:skin>
   Pilih salah satu kode css di atas, atau silahkan edit terlebih dahulu.
7. Simpan Template/Save Template.
8. Selesai.

Praktis Kilat Pasang Widget Yahoo Smileys di Blogger - Threaded Comment

Ini adalah cara paling praktis dan mudah untuk memasang yahoo smiley di blogger. Bisa digunakan di Template Tata letak (Layout Template) maupun Template Designer (Perancang Template) yang sudah dilengkapi threaded comment.
Widget Smileys untuk Blogger ini tidak saja menggunakan javascript, xHTML dan kode CSS, namun di dalamnya digunakan juga css3. CSS3 berfungsi untuk membuat bentuk show hide box smiley dengan effek hover sekaligus juga digunakan untuk memperbesar (zoom) emoticon/yahoo smiley agar dapat terlihat dengan jelas saat pemberi komentar memilih emoticon yang akan ditampilkan dalam komentar. Kode css3 yang yang digunakan untuk fungsi zoom adalah css3 transform-scale plus css3 transition, sedang show-hide box yahoo smiley memanfaatkan padding dan css3 transition.

Desain show-hide box yahoo smiley dibuat dalam posisi fixed agar selalu terlihat di halaman blog di sisi kiri-bawah. Cara penempatan box yang seperti ini dimaksudkan untuk mempermudah pemberi komentar saat memilih emoticon/smiley karena box akan bisa dekat dengan comment box. Sebuah trik yang membuat widget menjadi berbeda dibandingkan dengan tutorial lainnya yang tidak menempatkan box yahoo smiley pada posisi strategis dan berdampingan dengan box komentar.

Untuk template non-Threaded Comment, silahkan buka link di bawah ini untuk mendapatkan widgetnya:
Widget Yahoo Smileys non-Threaded Comment

Cara pemasangan javascript widget yahoo smileys:

1. Login ke Blogger.
2. Klik "Rancangan (Design)".
3. Halaman Tata Letak (Layout).
   
   • Pilih salah satu "Add a Gadget/Tambah Gadget" yang terdapat dalam elemen blog bergaris putus-putus.
   • Setelah window baru terbuka dan gadget terlihat, pilih dan klik gadget "HTML/Javascript".
   • Copy dan paste-kan javascript dalam "box HTML/Javascript".
   • Klik "SIMPAN/SAVE".
4. Buka blog dan buat komentar dengan menyisipkan kode smiley seperti yang terlihat dalam box yahoo smiley.
5. Selesai.

Cara lain menyimpan javascript :

1. Login ke blogger.
2. Klik "Rancangan/Design".
3. Klik "Edit HTML".
4. Lakukan Backup Template.
5. Cari kode </body>
6. Letakkan javascript di atas </body>
7. Klik "Simpan Template/Save Template".
8. Buat komentar dan tambahkan kode smiley kemudian lihat hasilnya.
9. Selesai!

Javascript widget Yahoo Smileys :

<script src="http://gubhugreyot-javascript.googlecode.com/files/GRsmileys-threaded.js" type="text/javascript"></script>