Buat Link "Poskan Komentar" Tampil Beda dengan CSS3

Ada tiga pilihan bentuk tampilan kolom komentar (Comment Form Placement/Default Komentar untuk Entri) yang dapat kita gunakan:

• Full page (Halaman Penuh).
• Pop-up window (Jendela munculan)
• Embedded below post (Disemat di bawah entri)

Catatan: Panduan ini bisa digunakan di New Blogger Template dan Template Lama.

Untuk memilih bentuk tampilan kolom komentar ini bisa kita lakukan dengan KLIK "Settings (Pengaturan)", kemudian KLIK "Comments (Komentar)".
Dari 3 pilihan yang tersedia, hampir kebanyakan blogger menggunakan pilihan ke-2 dan ke-3. Bentuk kolom komentar yang ke-2 sering dipilih demi efisiensi ruang dan keinginan terciptanya halaman blog yang lebih minimalis. Kolom komentar ke-3 menjadi pilihan favorite juga karena tampilnya kolom komentar akan dapat lebih memudahkan pengunjung blog saat ingin menuliskan sebuah komentar. Selain hal ini, seorang blogger dapat melakukan banyak improvisasi terhadap desain kolom komentar hingga bagian ini juga mampu memberi kontribusi lebih terhadap "gaya dan penampilan blog". Tentu saja masing-masing mempunyai kelebihan dan kekurangan.
Kembali pada pilihan bentuk kolom komentar yang ke-2 (Pop-up window atau Jendela munculan), sekalipun kelebihan yang dia miliki seperti tersebut di atas, setelah kita cermati ternyata ada satu kekurangan yang sebenarnya akibatnya akan cukup terasakan oleh pemilik blog. Rata-rata link "Pos a Comment" atau link "Poskan Komentar" mempunyai bentuk dan ukuran yang kurang menonjol jika di bandingkan dengan teks atau link di sekitarnya. Bagi yang sudah berpengalaman memberikan komentar tentu saja tak akan menjadi masalah. Masalah baru akan muncul ketika beberapa "aktivis baru" ingin memberikan komentarnya terhadap posting yang telah ia lahap secara tuntas. beberapa di antara mereka mungkin akan ragu, bingung mencari kotak komentar. Lha ini repotnya! Sesaat setelah bingung dia justru nggak berusaha untuk mencari cara untuk bisa memberikan komentar dan meluapkan hasratnya yang membeludak, e .... malah dianya ngacir sambil nggedumel "hmmmm ...., susah amat, nich, blog! Masa mo kasih komentar saja nggak di kasih kolomnya! Uh ..., dasar!". E ....., nggak "matur nuhun" justru mengumpat, dia! Dus, jika kejadian seperti ini terjadi berulang siapa yang akan terugikan jika bukan sampeyan sendiri? Lha ..., bukankan komentar adalah spirit untuk terus menciptakan posting baru?

Mengatasi persoalan seperti ini bisa kita lakukan dengan sedikit melakukan modifikasi pada template dengan menambahkan kode CSS baru dan menambahkan "class" serta "title" (biar muncul tooltip) di satu tag (a) yang terletak di bagian body. Untuk melihat bentuknya, silahkan sampeyan buka link di bawah ini.

D E M O

Langkah Merubah Link "Poskan Komentar"

• Login : Login ke Blogger.
  • Tulis User Name (Nama Pengguna) atau Email Address.
  • Tuliskan Password (Sandi).
  • KLIK "Login".
• Dasboard : KLIK link "Design (Rancangan)".
• Design/Rancangan : KLIK "Edit HTML".
• Back-up Templates : Lihat caranya di "Special Tutorials" di menu kiri atas.
• Cari kode ]]></b:skin>, kemudian copy dan pastekan kode CSS di atasnya. (Lihat cara cepat cari kode HTML di "Special Tutorials").
• Lanjutkan dengan mencari kode <p class='comment-footer'>. Kode seperti ini ada 2 buah. Cari yang di kode berikutnya terdapat kode seperti terlihat di bawah ini.

      <p class='comment-footer'>
        <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>

      </p>

• Ganti kode yang berwarna oranye dengan xHTML berikut:

           <a class='bgsGRkomentar' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' title='Terima kasih telah berkunjung. Silahkan klik di sini untuk komentar!'><data:postCommentMsg/></a>

• KLIK "SAVE Template/Simpan Template".
• Buka blog yang telah berisi posting untuk melihat hasilnya!

Kode CSS Perubah Teks link "Poskan Komentar"

p.comment-footer a.bgsGRkomentar{
       margin: 0 auto;
       font-size: 18px;
       padding: 1px 0px;
       font-family: Serif;
       display: block;
       text-decoration: none;
       text-decoration: blink;
       width: 200px;
       text-align: center; /* original code by: http://gubhugreyot.blogspot.com */
       background: #aaa;
       background: -moz-linear-gradient(top, #666, #ccc);
       background: -webkit-gradient(linear, 0% top, 0% bottom, from(#666), to(#ccc));
       color: #660066;
       border: 1px solid orange;
       outline: none;
       border-radius: 8px;
       -moz-border-radius: 8px;
       -webkit-border-radius: 8px;
       box-shadow: 0px 1px 8px #333;
       -moz-box-shadow: 0px 1px 8px #333;
       -webkit-box-shadow: 0px 1px 8px #333;
       text-shadow: 1px 1px 1px #eee;
       -o-transition: all 0.6ss ease-in-out;
       -moz-transition: all 0.6s ease-in-out;
       -webkit-transition: all 0.6s ease-in-out;
}
p.comment-footer a.bgsGRkomentar:hover {
       background: #996600;
       color: red;
       border-color: #6699FF;
       box-shadow: 0 0 15px #333;
       -moz-box-shadow: 0 0 15px #333;
       -webkit-box-shadow: 0 0 15px #333;
}
p.comment-footer a.bgsGRkomentar:active {
       background: #CCCCCC;
       color: #0000FF;
       font-size: 16px; 
}

Catatan

Bila ingin teks tak berkedip, silahkan hapus kode CSS yang berkedip!

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 


• 

» Happy Blogging - gubhugreyot «