Form Komentar Keren Valid HTML5

Tips And Trik Trfik SEO Trik Blog

AkuDuluAnak.Tk -Siang kawan di siang hari ini saya mau kasih tutorial cara membuat form komentar yang keren tapi valid HTML5. Tekhnik ini saya pelajari dari bang rivai silaban.

ScreenShotnya

Ada beberapa fitur diantaranya:

• Text Pesan Komentar
• Form Email Subscribe
• Tombol Join to Blog
• Tombol Konversi Kode
• Tombol Forum Diskusi
  
  • Tombol Link Exchange
• Tombol sosial media Gplus, Twitter, Facebook
• Gift image Feedburner logo 

yap langsung saja pertama sobat harus memasang CSS nya

• Login ke Blogger
• !BACKUP TEMPLATE ANDA! Edit Template
• Cari kode ]]></b:skin>
• Copy script dibawah ini diatas kode tadi

/*****************************************
Name : Pesan Komentar
By : Rivai Silaban | Blog Design
Update : 30 Agustus 2013
******************************************/
#bdrspesan-comment {
position : relative;
width : auto;
padding : 10px;
font : normal normal 12px trebuchet ms;
text-align : justify;
border : #000 solid 3px;
margin : 0 10px 10px 3px;
margin-top : 10px;
line-height : 1.3em;
background-color: #666666;
color: #FFFFFF;
}
#bdrspesan-comment strong {color:#99FF00}
#bdrspesan-comment::after, #bdrspesan-comment::before {
top : 100%;
border : transparent solid;
content : '';
height : 0;
width : 0;
position : absolute;
}
#bdrspesan-comment::before {
border-top-color : #000;
border-width : 15px;
left : 10%;
margin-left : -36px;
}
#bdrspesan-comment::after {
border-top-color : #666;
border-width : 9px;
left : 10%;
margin-left : -30px;
}
#bdrspesan-comment .BD-but{
border:1px solid #b0130d;
color:#000000;
cursor:pointer;
font-weight:100;
margin:5px -10px 0px 0;
text-decoration:none;
text-shadow:none;
display:inline-block;
box-shadow: 0 1px 0 0 #fff inset;
background-color:#00CCFF;
padding:5px 10px;
border-color: #333;
border-radius:5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
#bdrspesan-comment .BD-but:hover{
color:#99FF00;
text-shadow:none;
border:1px solid ;
display:inline-block;
box-shadow:0 0px 2px 0px #FFF;
background-color:#333333;
border-color: #333;
}
#bdrspesan-comment .BD-box {
margin-top : 0px;
padding : 0 0px;
text-align: right;
}
#bdrspesan-comment .input {
font-size : 12px;
padding : 10px 5px;
text-shadow : 1px 1px 0 #FFF;
width : 200px;
color : #990000;
font-family : georgia;
border : solid 1px;
border-color : #0099FF;
background-color: #E1FBFB;
border-radius:5px;
margin-bottom: 2px;
}
#bdrspesan-comment .input:hover {
background-color: #FFFFFF;
}
#bdrspesan-comment .submit {
border: solid 1px;
color : #000000;
cursor : pointer;
font-family : verdana;
font-size : 12px;
padding : 10px 15px;
border-radius:5px;
text-shadow : 0px 1px #999;
text-transform : uppercase;
height : auto;
background-color : #00CCFF;
border-color : #000099;
font-style: italic;
font-weight: normal;
margin-left:4px;
}
#bdrspesan-comment .submit:hover {
background-color :#2FD6FF;
box-shadow: 1px 1px 5px #333;
color : #990000;
text-shadow: none;
}/*** Blog Design CSS and ***/

Cara pemasangan kode HTML baca dengan Teliti

• Setelah kode CSS terpasang kini tinggal memasang Kode HTML nya
• Cari kode <p><data:blogCommentMessage/></p> akan ada 4 kode yang sama ganti semua kode tersebut dengan kode dibawah ini

<!-- Rivai Silaban | BLOG DESIGN Pesan Komentar start -->
<div id='bdrspesan-comment'>
<span class='BD-box'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ID FEEDBURNER &apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=600,height=550&apos;);return true' target='popupwindow'>
<img alt="feedburner" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmfO0ml6ta68owJzosn3kVxMO4RLPny2QLCMrFYi0R3li6fHoSKaKuzJPQb6bJTK8WDUtcRlrRx5r2geuh_vOVGrsH-RRGU3wRvwipEL1775rJYJXFE9VLbC8kEGUZREGC7veqayuFreg/h77/feedburner.png" title='feedburner' style="margin-bottom:-9px;margin-right:25px;"/> <input name='email' type='text' class='input' onblur='if (this.value == &apos;&apos;) this.value = &apos;Enter email here !!&apos;;' onclick='if (this.value == &apos;Enter email here !!&apos;) this.value = &apos;&apos;;' value='Enter email here !!' />
<input class='submit' id='submit' name='submit' title='subscribe' type='submit' value='SUBSCRIBE'/>
<input name='uri' type='hidden' value='ID FEEDBURNER'/>
<input name='loc' type='hidden' value='en_US'/>
</form></span>
<div style="font-family:Georgia, 'Times New Roman', Times, serif; color: #FFFF00; font-size: 14px; font-style: italic; font-weight: bold; width: 100%; background-color: #999999; margin: 15px -20px 5px -10px; padding:10px; text-shadow: 1px 1px 1px #000;">Salam bloger .. !! <br />
Pergunakan fasilitas yang dapat membantu anda pada halaman blog ini. </div>
<p> 1. Komentar <strong>SPAM</strong> Akan secepatnya dihapus <br/>
2. Pastikan untuk &quot; <strong>Berlangganan Lewat Email </strong>&quot; untuk membangun kreatifitas blog ini <br/>
3. Cek komentar masuk sebelum bertanya. <br/>
4. Link aktiv tidak akan berpungsi. <br/>
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya. <br/>
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik &quot;<strong> Forum Diskusi </strong>&quot; <br/>
7. Bergabung dengan kami untuk menjadi member Klik &quot;<strong>Join to Member</strong> &quot; <br/>
8. Bila komentar anda mengandung code HTML silahkan anda konversikan terlebih dulu<br/>
silahkan klik &quot; <strong>Konversi Kode </strong>&quot; <br/> </p>
<a class='BD-but' href='http://www.akuduluanak.tk/p/blog-page_2939.html'
onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;
height=500,width=700,toolbar=yes,location=yes,status=yes,menubar=yes,
scrollbars=yes,resizable=yes&quot;);return false;'
target='_blank' title='Konversi Kode'>Konversi Kode</a>
<a class='BD-but' href='LINK ANDA' target='_blank' title='Forum Diskusi'>Forum Diskusi</a>
<a class='BD-but' href='http://www.blogger.com/follow-blog.g?blogID=ID BLOG ANDA' rel='nofollow' target='_blank' title='Join to Blog'>Join to Blog</a>
<a class='BD-but' href='LINK ANDA' target='_blank' title='LINK EXCHANGE '>LINK EXCHANGE </a>
<a class='BD-but' href='LINK ANDA' target='_blank' title='GPLUS'>GPLUS</a>
<a class='BD-but' href='LINK ANDA' target='_blank' title='FACEBOOK'>FACEBOOK</a>
<a class='BD-but' href='LINK ANDA' target='_blank' title='TWITTER'>TWITTER</a> </div>
<!-- Rivai Silaban | BLOG DESIGN Pesan Komentar End --> 

• Simpan dan lihat hasilnya jika ada yang ditanyakan silahkan tulis pertanyaan di kolom komentar

Keterangan

• Tulisan kode warna MERAH ganti dengan link menu anda sematkan ID FEEDBURNER anda.
  Untuk title dan menu harus sama penulisannya biar lebih SEO Friendly lihat tulisan warna BIRU .
• Tulisan warna BIRU nama dan judul menu linknya .
• Untuk kode warna HIJAU silahkan ganti dengan pesan anda sendiri agar lebih afdol
• Silahkan edit CSSnya sesuai dengan tampilan halaman blog anda. 

Sumber : Rivai Silaban | Blog Design

Bagikan

Jangan lewatkan

Form Komentar Keren Valid HTML5

4/ 5

Oleh Rijal Imnida

Rijal Imnida 15:01 35 Komentar