Membuat Pesan Formulir Komentar Keren Dengan Css

 

Hai, sob !!

How are you ??

Setelah saya memposting info tentang Cara Membuat Blog Menjadi Dofollow , kali ini saya akan mempostkan info tentang Cara Membuat Pesan Formulir Komentar Keren Dengan Css.

Ok Berikut Langkah-Langkahnya :

1. Buka Dasbor Blog Kalian.
2. Klik Template -> Edit HTML -> Centang "Expand Template Widget".
3. Cari Kode ]]></b:skin> . Kemudian Pastekan Kode ini diatas kode tadi.

#threaded-comment-form p {
position: relative;
background: #0060FF;
border: 5px solid #FFF;
padding: 10px;
font-size: 13px;
line-height: 1.6em;
color: #FFF;
margin-top: 30px;
}
#threaded-comment-form p::after, #threaded-comment-form p::before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none
}
#threaded-comment-form p::before {
border-top-color: #38F;
border-width: 15px;
left: 10%;
margin-left: -36px
}
#threaded-comment-form p::after {
border-top-color: #0060FF;
border-width: 9px;
left: 10%;
margin-left: -30px
}

Sisanya Kalian EDIT Sendiri Yaa !

     4.  Setelah Itu Cari Kode Yang Seperti Ini

<b:else/>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='500' id='comment-editor' name='comment-editor' src='' width='100%'/>

 Perhatian ! : Kode Yang Warna Hijau Itu Biasanya ada 2-3 . Tapi Cukup cari Kode yang Berada dibawah <b:else/>

    5. Setelah Ketemua Kalian Ganti Dengan Kode dibawah Ini

 <b:else/>
<div id='threaded-comment-form'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='500' id='comment-editor' name='comment-editor' src='' width='100%'/>
</div>

   6. Terakhir ! SIMPAN TEMPLATE / SAVE TEMPLATE 

Membuat Gambar Header Berputar

Membuat Gambar Header Berputar - Membuat Gambar Header Berputar
Halo Sobat, Kali Ini Saya Mau Posting Tentang Membuat Gambar Header Berputar
Mungkin Sobat Sudah Pernah Melihat Blog Yang Seperti Itu, Dan Kali Ini Saya Akan Membahas Tentang Cara Membuat Gambar Header Berputar.

CSS Ini Akan Bekerja Jika Sobat Menggunakan Header Gambar, Jika Sobat Masih Memakai Header Text Maka Sobat Rubah Dulu Jika Mau Membuat Gambar Header Berputar

Baiklah Tutorialnya :

• Login Blogger
• Klik Template
• Edit HTML
• Centang Expand Template Widget
• Cari Kode   ]]></b:skin>
• Copy Kode Dibawah Lalau Paste Diatas Kode   ]]></b:skin>

#header a img:hover {

 -moz-transform: scale(1) rotate(-180deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);

 -webkit-transform: scale(1) rotate(-180deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);

 -o-transform: scale(1) rotate(-180deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);

 -ms-transform: scale(1) rotate(-180deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);

 transform: scale(1) rotate(-180deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);

 -webkit-transition: all 600ms ease-in-out;

 -moz-transition: all 600ms ease-in-out;

 -ms-transition: all 600ms ease-in-out;-o-transition: all 600ms ease-in-out;

 transition: all 600ms ease-in-out;

}

• Klik Simpan Template

Keterangan :

• Kode Yang Berwarna Merah Adalah Besar Rotasi, Sobat Bisa Mengeditnya  Sendiri
• Kode - (Minus) Menunjukkan Rotasi Berlawanan Terhadap Arah Jarum Jam, Sobat Bisa Menghilangkan Kode Itu (Minus) Kalau Mau Gambarnya Berputar Searah Jarum Jam , Contoh (180deg)

Semoga Bermanfaat.