Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

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.

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 «


6 komentar:

  1. Absolutely unique and fine piece of information.
    pvc pakistan I've never spent that much time reading before but this is really awesome..
    pvc
    Colchester Hair Salon

    BalasHapus
  2. mantap sob!!!!

    salam kenal...

    BalasHapus
  3. Wah... Sangat atraktif, Saya akan mencobanya untuk beberapa blog saya. Sukses buat admin.

    BalasHapus

 
GR | Edited by | gubhug reyot