a

Mengganti Desain Comment Box


Halo Teman-teman semuaaa..
Kalian apa kabar?..
Setelah aku Hiatus (-c-) Selama lima jam,.
Akhirnya aku kembali.. hehehe.. 5 jam?..

 Nah,..
Beberapa hari yang lalu, sempatkah kamu liat, Desain Comment Blog Fasya, Udah Beda!..
Sebenernya, Fasya susah bangeeeeet nyari nyari Caranya buat ngerubah Comment Box Desain Fasya.. Soalnya, semua tutorial Gak bisa menampilkan Comment Box Yang Fasya Mauu..

Dan dengan Takut-takut,. Fasya mencari kode /*Comments .. Ketemulah kode-kode konten Comment Box Desain..
Hah?? KONTEN COMMENT BOX DESAIN!.. Waah Fasya langsung menuju Google dan mencari kode untuk Konten Comment Fasya.. Dann berubahlah Comment Box Fasya jadi seperti sekarang..
Nah,. Kamu mau?.. Ikuti langkah di bawah ini ya!

  • Masuk ke blog kamu yang sudah pasti, sudah terbuka. Maka, klik Desain.. 
  • Setelah itu, klik Edit HTML,. 
  • Cari kode di bawah,. 
/* Comments
  • Nah,. Setelah ketemu,. Hapus kode di bawah nya,. Yaa.. Sampai Kode, 
}
  • Atau Sebelum Kode,
/* Widgets
  • Nah, setelah kamu hapus, semua kode itu, sekarang, kamu ganti dengan kode Comments Box kamu.. Fasya punya Kok Freebies nya di bawah :) Freebies nya Fasya dapat dari blog kak Salsa 
 ^^Freebies Comment Box Sytle..

comment box, modifikasi comment box, cute comment box 

.comment-content{ background:#FFE2E2; padding:13px; border-radius:30px; color:#666;} h4{ background:#D1F4FE; text-align:center; color:#fff; text-shadow:2px 2px 3px #888; font:30px ttn !important;} @font-face{ font-family:ttn; src:url(http://static.tumblr.com/dep4vzc/82Km8jmz4/tutano_cc_v2.ttf); } .comment-block{background:#FEF3F3; padding:10px; border-radius:30px; border:3px dashed #FEE8E8} .avatar-image-container{background:#FFE2E2;padding:5px;border-radius:50%;} .avatar-image-container img{ -webkit-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out; transition: all 0.8s ease-out; border-radius:50%;} .avatar-image-container img:hover{ border-radius:50%; transform: rotate(360deg) ; -webkit-transform: rotate(360deg) ; -moz-transform: rotate(360deg) ; -o-transform: rotate(360deg) ; -ms-transform: rotate(360deg) ;} .datetime{ background:#fff; padding:8px; float:right; border-radius:30px; font:10px arial; margin-top:10px;} .secondary-text{ padding:8px; background:#fff; border-radius:30px; float:right; border:2px solid #FEE8E8; }
#comments h4 { margin: 1em 3em; font-weight: bold; line-height: 1.4em; color: #ffffff; } #comments-block { margin-left:1.5em; line-height:1.6em; background: #ffffff; color: black; padding: 1em; border:0px solid #ffffff; } #comments-block .comment-author {margin:.5em 0;} #comments-block .comment-body {margin:.25em 0 0; background: #ffffff;} #comments-block .comment-footer { margin:-.25em 0 2em; line-height: 1.4em; letter-spacing:.1em; } #comments-block .comment-body p { margin:0 0 .60em; padding: 5px 5px 5px 5px; background: url(URL BACKGROUND) repeat top left; -moz-border-radius: 20px 20px / 20px 20px; border-radius: 5px 5px / 5px 5px; border: 2px solid #ff9bc1; } .deleted-comment { font-style:underlined; color:pink; }
#comments-block .comment-author{ background:#ff6699 !important; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; padding:5px; font-size:15px; font-weight:bold; border:1px solid #ff6699; } #comments-block .comment-body{ margin: 0; font-size: 17px; border-left: 1px solid #ff6699; border-right: 1px solid #ff6699; margin-top: -5px; /*position*/ padding: 5px; } #comments-block .comment-footer{ margin:0; font-size: 13px; font-weight: normal; margin-bottom: 20px; border-left: 1px solid #ff6699; border-right: 1px solid #ff6699; border-bottom: 1px solid #ff6699; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; margin-top: -12px; /*position*/ padding: 5px; } #comments-block .deleted-comment{ font-style:italic; color:gray; } #comments-block .comment-author a{ color:#ffffff !important; } #comments-block .comment-footer a, .comment-body a{ color:#ff6699 !important; }
 


#comments-block{margin:0;padding:0;}#comments-block .comment-author{background:#000000 !important;-moz-border-radius-topleft: 0px;-moz-border-radius-topright: 10px;padding:5px;font-size:15px;font-weight:bold;border:1px solid #000000;}#comments-block .comment-body{margin:0 0 .60em;padding: 5px 5px 5px 5px;background: url(BACKGROUND URL);repeat top left;-moz-border-radius: 20px 20px / 20px 20px;border-radius: 5px 5px / 5px 5px;font-size: 16px;border-left: 1px dashed #000000;border-right: 1px dashed #000000;margin-top: -5px; /*position*/}#comments-block .comment-footer{margin:0;font-size: 13px;font-weight: normal;margin-bottom: 20px;border-left: 1px dashed #000000;border-right: 1px dashed #000000;border-bottom: 1px dashed #000000;-moz-border-radius-bottomright: 10px;-moz-border-radius-bottomleft: 10px;margin-top: -12px; /*position*/padding: 5px;}#comments-block .deleted-comment{font-style:italic;color:gray;}#comments-block .comment-author a{color:#ffffff !important;}#comments-block .comment-footer a, .comment-body a{color:#000000 !important;}s
     

    .<itempage> <div id="comments" style="margin-top:5px;"> <blogitemcommentsenabled><a name="comments"></a> <dl id="comments-block"> <div style="width:470px; padding:5px;margin-top:20px;border:4px solid #000000;6px;background:url(Url Background); box-shadow:0 0 3px #ddd;"> <$CommentPager$> <blogitemcomments> <dt class="comment-data" id="<$BlogCommentAnchorName$>"><a name="<$BlogCommentAnchorName$>"></a> <$I18NCommentAuthorSaid$></dt> <dd class="comment-body"> <p> <$BlogCommentBody$></p> <$BlogCommentDeleteIcon$> </dd> </BlogItemComments> <$CommentPager$> </dl> </div> <p class="comment-timestamp"> <$BlogItemCreate$> </p> </div> </ItemPage>
    Nah,. Kamu tinggal Save..!
    Gampang kan?.. Oh ya,. Fasya minta tolong ya..
    Kalau mau Copy Paste alias Re-Post.. Pakai Nama ku.. Dan di sebelah nya pakai Link blog ku.. Aku mohhoonn bangeeeet. Soalnya, ini Fasya susah susah Convert Code nya.. ,. Edit kodenya.. Dsb.. '
    Jangan cuma pakai, Cr: Fasya.. Fasya itu kan, banyak.,... Iya kan?.. Makanya,. Sertakan link blog Fasya juga ya.. :) 

    5 comments:

    1. Kak Fasya, aku cari kode /* Widgets dan yang satunya itu kok ga ada ya. Aku udah centang Ctrl + F untuk mempermudah pencarian juga ga bisa. Apa ini karena templatenya? Ini untuk blogskins ya?

      ReplyDelete
    2. thanks a lot, Fasya ^^ aku pake style 1 yahh >w<

      ReplyDelete
    3. thx, mau pake 1 ya, btw salken ^^ follow blogku ya www.ruthdamanda.blogspot.co.id
      Mau xchange banner dunk !!

      ReplyDelete

    ^^Komentar adalah yang Nomor satu! Jadi kamu harus Komen! (‾^‾)b
    ^^Komentar harus sesuai Artikel (‾^‾)b
    ^^Jangan Me-Request di komentar! Di Cbox/Ask,fm Aja (‾^‾)b
    ^^Nah, ayo tinggalkan komentar di Kotak bawah \(´▽`)/