Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Friday, August 30, 2013

cara membuat pesan komentar valid html5

Pesan komentar valid html 5 dan tentunya seo friendly sangat dibutuhkan seorang bloger, cara memasang Pesan Komentar di halaman blog juga beraneka ragam. Pentingnya suatu pesan komentar buat para pengunjung yang akan berkomentar menjadi suatu aturan tersendiri buat pengunjung blog tersebut. pada postingan kali ini saya terinspirasi dari seorang sahabat yang memang membutuhkan script Pesan Komentar, semoga beliau merasa senang atas tampilan pesan komentar ini walaupun memang tampilannya sederhana.


fungsi Pesan Komentar


Pesan Komentar ini berfungsi untuk memberikan suatu pesan aturan dari tata cara menyampaikan sebuah komentar untuk sebuah artikel yang telah kita posting pada halaman blog kita. Sebagai fungsi suatu pesan aturan, kita akan menuliskan suatu pesan yang memang benar benar ringkas jelas dan tidak bertele tele. Sebuah pesan yang disampaikan buat para pengunjung yang akan menjadi sebuah aturan dalam berkomentar harus dituliskan dengan serba sopan santun agar para pengunjung kita tidak merasa tersinggung, sebab suatu kunjungan sangat berharga buat suatu halaman blog kita. Dalam postingan saya kali ini, sebuah pesan dalam halaman blog akan kita buat, dan akan saya uraikan melalui tag tag html agar dapat kita sisipkan dalam tubuh tag HTML blog kita. Saya beharap sahabat sahabat bloger saya sudah memahami kegunaan dari Pesan Komentar yang akan kita buat pada halaman blog kita. Langsung saja menuju TKP

Lihat screen shoot gambar pesan komentar yang akan kita buat dibawah ini.

cara membuat pesan komentar valid html5


Fitur Pesan Komentar


  • 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

Artikel pendukung


  • Cara membuat pesan komentar BAG 1
  • Cara membuat pesan komentar BAG 2
  • Banyak para bloger kesal akibat pesan komentarnya selalu melorot kebawah kotak komentar, tapi saya sudah mempunyai solusinya temukan solusinya dan lihat pada tutorial Cara mengatasi kesalahan pesan komentar

Install Program CSS


  1. Login ke dashboard anda
  2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  3. Cari code ]]></b:skin> 
  4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda

/*****************************************
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 ***/


Install tag html


  • Setelah kode CSSnya sudah terpasang kini saatnya kita akan memasukkan kode tag htmlnya. disini saya akan menjelaskan pemasangan pesan komentar untuk blog standart.
  • Pencarian I -- coba anda cari kode <p><data:blogCommentMessage/></p> . Kode tersebut terdiri dari 4 kode yang sama pada 2 tempat berbeda, Untuk melihat 2 kode <p><data:blogCommentMessage/></p> coba cari kode <b:includable id='comment-form' var='post'> setelah anda buka keseluruhan kodenya silahkan cari kode <p><data:blogCommentMessage/></p> pastinya anda akan menemukan 2 kode serupa. Silahkan Copy Kode tag HTmL didalam spoiler yang ada dibawah dan ganti kode <p><data:blogCommentMessage/></p> dengan kode yang anda copy. Ingat.. !! Gantikan pada kedua kode <p><data:blogCommentMessage/></p> tersebut.
  • Pencarian II -- coba anda cari kode <b:includable id='threaded-comment-form' var='post'> ( kode ini berada pada bagian comment ) setelah anda sudh menemukan kode tersebut buka keseluruhan kodenya silahkan cari kode <p><data:blogCommentMessage/></p> pastinya anda akan menemukan 2 kode serupa. Silahkan Copy Kode tag HTmL didalam spoiler yang ada dibawah dan ganti kode <p><data:blogCommentMessage/></p> dengan kode yang anda copy. Ingat.. !! Gantikan pada kedua kode seperti mengganti kode pada pencarian pertama.
  • Save template anda dan lihat hasilnya.


  • Untuk Memasang kode pesan komentar ini pada beberapa template yang telah saya buat, silahkan ada cari kode <div id='pesan-comment'><data:blogCommentMessage/></div> didalam bagian kode <b:includable id='comment-form' var='post'>, ada 2 kode serupa silahkan ganti kode <div id='pesan-comment'><data:blogCommentMessage/></div> dengan kode yang ada pada spoiler dibawah ini. gantikan pada ke 2 kode yang sama.

    Setelah terpasang cari kembali code <b:includable id='threaded-comment-form' var='post'> ( kode ini berada pada bagian comment ) lihat kode bagian dalamnya anda pasti menemukan 2 kode <div id='pesan-comment'><data:blogCommentMessage/></div> yang sama silahkan gantikan kode tersebut dengan kode didalam spoiler dibawah ini seperti mengganti kode pencarian yang pertama.
  • Save halaman anda dan lihat hasilnya, semoga bermanfaat.

<!-- 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://lh5.googleusercontent.com/--h68rQVZ4V0/UgiYYVLX7XI/AAAAAAAABro/MDwIDY0vTY8/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://rivai-silaban.blogspot.com/p/k-onversi-kode-html-adalah-suatu-sistem.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 -->

Keterangan Code
  • 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 abdol
  • Silahkan edit CSSnya sesuai dengan tampilan halaman blog anda.

Kesimpulan

Widget Pesan Komentar ini sangat berguna buat para bloger untuk membuat suatu aturan atau pesan singkat untuk para pengunjung blog agr lebih paham terhadap peraturan dari blog tersebut.

Widget Pesan Komentar ini Valid HTML 5 dan SEO friendly tentunya sebab menganut sistem penulisan tag html yang standart peraturan SEO yang berlaku saat ini. Kode yang ringan dan tampilan yang lumayan menarik menjadikan widget ini sebagai pilihan para bloger.

Massage Alert Comment
Minggu, 30 Agustus 2013
By : Admin Blog Design

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Rivai Silaban Update pada : 5:33 PM

21 comments :

  1. Terima kasih yang tak terhingga akhirnya,. Bang Rivai posting juga Artikel
    yang sangat Saya tungu-tunggu.. dan sangat penting dan Bermanfaat sekali
    Buat semua Blogging,. yang benar2 Mempertahan kan scor SEO nya dan
    Dan berupaya template Blog nya benar2 Valid HTML5 - Css3.

    Sangat lengakap dan terperinci,. artikel Bang Rivai ini sehingga blogging
    Pemula (newbie) sekalipun seperti saya mudah untuk memahami untuk
    menerap kan script/css untuk di install di blog nya..

    Terima kasih yah Bang.. semoga kebaikan Abang ini di berikan balasan
    Berkah dan Barrakah dari allah yang tak terhingga Amien......

    ReplyDelete
    Replies
    1. sama sama bang,
      makasih atas pendapatnya..
      thx telah berkunjung..

      Delete
  2. Website dan blog sekarang memang semuanya harus valid HTML5 dan CSS3. Terima kasih atas tutorialnya.

    ReplyDelete
    Replies
    1. yup tepat sekali sob..
      sama sama sob..
      makasih atas kunjungan malamnya..

      Delete
  3. Bagus banget mas informasinya sangat bermanfaat.. tapi maaf, kenapa agan melarang orang menyebarluaskan artikel tanpa persetujuaan agan ya?
    Kalau saya sih justru berterimakasih banget tuh kalau ada orang yang bersedia menyebarluaskan postingan blog saya.
    Boleh tahu nggak kenapa? :D

    ReplyDelete
    Replies
    1. makasih atas kunjungannya bang dan salam kenal dari saya.

      Sebenarnya alasannya saya ambil dri pengalaman saya bang, di waktu yang lewat ada copas artikel dan linknya sumbernya tidak dicantumkan dan ketepatan ada juga yang copas artikel yang copas dari saya tadi, pendek cerita si copas yang pertama claim bahwa itu adalah artikel dia dan laposkan ke DMCA protect, saya mendapat email atas dasar artikel itu memang telah saya submit atau terdaftar ke DMCA protect dan commont 3.0, ternyata di internet ini adahal yang perlu di pertanggung jawabkan walaupun kita tidak pernah bertemu,

      Jadi alasan saya bila artikel yang ada pada postingan ini disalah gunakan dan menjadi keributan diluar blog ini secara hal itu tidak akan dapat saya pertanggung jawabkan, dan artikel asalnya akan terhapus oleh pengindexan search engine bang, kira kira begitu.

      Jadi singkatnya bila ada yang pamit artikel ini di reposting kembali tanpa sepengetahuanku berarti saya dapat menerima semua resiko asal postingannya bang.

      Delete
  4. Bang Rivai saya Bingung pada pemasang pesan komentar
    Di bagian, Install tag html saya Bingung dengan
    Keterngan artikel Bang Rivai ini, di jelaskan soalnya saya
    Berulang kali memasang nya namun selalu gagal terus
    Mohon solusi yang tepat, dan mudah di mengerti buat
    saya Bang, yang lengkap dengan keterngan yang terperinci

    Terima kasih di tunggu jawabnya Bang..?

    ReplyDelete
    Replies
    1. pada template blog abang coba cari kode

      <div id='pesan-comment'><data:blogCommentMessage/></div>

      kode tersebut ada 4 buah, silahkan ganti kode
      <div id='pesan-comment'><data:blogCommentMessage/></div>

      dengan kode yang ada di dalam spoiler kode HTML pada tutorial diatas.


      Delete
  5. Pada code 'pesan-comment-data:blogCommentMessage
    Memang sudah ketemu ada 4 Bang.. yang saya bingung dan saya tanyakan...?
    Code div id='pesan-comment-data:blogCommentMessage
    Pada urutan yang ke berapa..? apa yang ke 4 code nya, yang harus di ganti dengan
    Code yang ada di artikel Bang Rivai,. jujur saya masih belum tau, Bang..

    Maaf selalu menyusahkan Bang Rivai,. saya coba lagi ya Bang
    Semoga sekarang saya bisa dengan jawaban yang Abang berikan

    ReplyDelete
    Replies
    1. Belum berhasil juga Bang,..?
      waduh lumayan susah nya yah Bang..?
      pengen sesuatu yang relevan pada pesan
      Coment, code yang Abang berikan pada
      komentar di atas setelah saya ikuti petunjuknya
      Masih belum keluar mungkin saya masih ada
      yang salah memasang kode yang ada dalam spoiler itu
      Dan juga ada tag kode yang error contoh nya pada tag font

      seperti ini tag yang error nya Bang "Times New Roman", Times, serif">
      "Times New Roman", Times, serif">

      Mohon Bang pencerahan agar bisa tampil di blog
      saya pesan coment di artikel Abang ini trima kasih.

      Delete
    2. Coba abang nonaktifkan tulisan pada pesan formulir dari dasbor abang. kalo soal times romannya itu masalah hurufnya tapi tiak eror kok bang.

      bila abang sudah memasang sesuai dengan tutorial silahkan coba cara ini.

      masuk ke dasbor terus buka " setelan " kemudian post dan komentar, hapus tulisan pada formulir pesan semuanya.

      Delete
  6. Sudah lah gak apa2 gak palai pesan komentar juga
    Yang penting masih baik2 saja blog nya.
    trima kasih atas segalanya

    ReplyDelete
    Replies
    1. Jangan menyerah bang heheh..

      coba abang cari kode

      <div id='pesan-comment'>
      <data:blogCommentMessage/>
      </div>

      kode tersebut ada 4 buah kode pada template tersebut,

      gantikan semua kode tersebut dengan kode html pada tutorial.

      Delete
  7. Kode di bawah ini memang ada 4 sudah ketemu di blog saya Bang?
    i rel="pre">div id='pesan-comment'>

    div>i>

    Tapi pada posisi yang berjauhan, atau beda tempat.
    Kalau ke empat kode di atas di hapus, dan di ganti
    Dengan kode script dalam spoiler ke 2 di artikel Abang

    Lalu nempatin kode yang dalam spoiler nya di bagian kode

    i rel="pre">div id='pesan-comment'>

    div/i>

    pada urutan yang ke berapa Bang..?
    Kan ada empat kode, dalam template, dan tempat
    Yang berbeda, itu yang saya bingung dan selalu salah
    Nempatin kode yang dalam spoiler itu, Bang
    Mohon Keterangan, yang lebih Rinci Bang
    Maklum belum Mahir dalam otak-atik template,
    Ini pun dalam tahap belajar HTML Di Bang Rivai
    Trima kasih di tunggu Pencerahan nya.

    ReplyDelete
    Replies
    1. kode yang abang cari kan kode dibawah ini

      <div id='pesan-comment'>
      <data:blogCommentMessage/>
      </div>

      gantikan kode tersebut dengan kode yang ada pada spoiler code html pada tutorial bang semuanya ganti bang 4 kode itu bang

      ingat bang CSSnya dipasang

      Delete
    2. walau pun dia beda tempat itu tidak masalah yang penting asal kode
      <div id='pesan-comment'>
      <data:blogCommentMessage/>
      </div>
      ganti semua dengan kode yang didalam spoiler code html pada tutorial.

      Delete
  8. unruk mengubah lebarnya codenya yang mana mas???

    ReplyDelete
    Replies
    1. coba di lihat code CSSnya lihat bagian #bdrspesan-comment nah di dalam kode tersebut ada kode ( width:auto; ) silahkan rombak agar memiliki digit misalnya ( width:500px; ) mas..

      Delete
  9. ini ada masalah lagi mas,aq udah ngikutin cara ini tp masalahnya pesan komentar ada dibawah kotak tambahkan komentar,seharusnya kan diatas.bagaimana solusinya? [-(

    ReplyDelete
    Replies
    1. heheh iya yah, tapi kan dah ada solusinya gan, coba di klik
      tulisan yang berwarna merah ...

      Cara mengatasi kesalahan pesan komentar

      Delete
  10. Mantap gan tutorialnya. komplit dan valid HTML pula. ijin nyoba yah.

    ReplyDelete

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog