Pada Pagi hari yang cerah ini, ALDHI akan membagikan sebuah artikel. Yang Pada artikel sebelumnya Saya telah membagikan sebuah artikel tentang "Modifikasi Widget Popular Post Keren di Blog". Dan Pada Kesempatan Kali Ini Artikel yang akan Saya Bagikan Adalah tentang Modifikasi Pesan Formulir di Blogger. Sobat Bisa Melihat gambarnya berikut.
Pesan formulir bawaan blogger tampil dengan polos dan tidak ada model nya. Jika sobat merasa bosan dengan style bawaan yang polos itu, silahkan ikuti Cara Memodifikasi Pesan Formulir Komentar Blogger dibawah ini dengan seksama :
1. LogIn Ke Akun Blogger Sobat
2. Pilih Template
3. Edit HTML
4. Lalu cari kode <p><data:blogCommentMessage/></p> ( Tekan CTRL + F Agar lebih mudah ). Setelah ketemu, ganti kode diatas dengan kode ini :
2. Pilih Template
3. Edit HTML
4. Lalu cari kode <p><data:blogCommentMessage/></p> ( Tekan CTRL + F Agar lebih mudah ). Setelah ketemu, ganti kode diatas dengan kode ini :
<div id='aldhinya-comment'><data:blogCommentMessage/></div>
Catatan : Biasanya kode <p><data:blogCommentMessage/></p> ada lebih dari 2, jadi ganti semua kode tersebut. Saya sarankan untuk meng-backup template anda dulu agar bisa meminimalisir kesalahan yang tidak diinginkan.
5. Kemudian cari ]]></b:skin> dengan CTRL+F dan copy kode dibawah ini, dan taruh tepat diatas ]]></b:skin>
/*-- Mendekorasi Pesan Formulir Komentar --*/
#aldhinya-comment{
position: relative;
background:#3272c3; /* Warna Background Utama */
color:#000;
width:94%; /* Sesuaikan Lebar dengan Kebutuhan */
padding:10px;
font-family: 'Open Sans', sans-serif;
font-weight:normal;
text-align:justify;
border:3px solid #FF0000;
border-radius: 5px;
margin:0 10px 10px 0;
margin-top: 10px;
line-height: 1.3em;
}
#aldhinya-comment::after, #aldhinya-comment::before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none
}
#aldhinya-comment::before {
border-top-color: #FF0000;
border-width: 15px;
left: 10%;
margin-left: -36px
}
#aldhinya-comment::after {
border-top-color: #FFD1D1; /* Samakan dengan Warna Background Utama */
border-width: 9px;
left: 10%;
margin-left: -30px
}
* #FFD1D1: Warna Background
* #FF0000 : Warna Border
6. Lalu masukkan kode ini tepat diatas kode <body>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>7. Kemudian Save Template
Cukup mudah bukan ? Selamat mencoba .
Tidak ada komentar:
Posting Komentar