Menu
» » » » Cara Membuat Pesan Komentar Valid HTML5 Keren

5
A+ A-
Pesan Komentar
Pesan Komentar HTML5

Pesan komentar valid HTML5 dan tentunya SEO friendly sangat dibutuhkan seorang blogger, cara memasang Pesan Komentar di halaman blog juga beraneka ragam. Pentingnya suatu pesan komentar buat para pengunjung yang akan berkomentar menjadi suatu aturan tersendiri untuk pengunjung blog tersebut. Pada postingan kali ini, saya akan Posting 'Cara Membuat Pesan Komentar Valid HTML5'.

Fungsi Pesan Komentar

Pesan Komentar berfungsi untuk memberikan Pesan / Peringatan sebelum berkomentar.

Fitur Pesan Komentar

Text Pesan Komentar.
Form Email Subscribe / Langganan Lewat Email.
Tombol / Button Join to Blog.
Tombol / Button Konversi / Parse Kode.
Tombol Link Exchange.
Tombol Social Media > Google+, Facebook, Twitter.

Saatnya Instalasi Pesan Komentar.

1. Login Dasbor Blogger.
2. Klik Template > Masuk ke HTML.
3. Cari kode ></b:skin> atau </style>
4. Copy kode CSS dibawah ini, lalu Paste tepat diatas kode ></b:skin> atau </style> 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 ***/

Instalasi Tag HTML.

Setelah Kode CSS terpasang, saatnya memasang kode HTML. Silahkan simak berikut ini :

Cari Kode <p><data:blogCommentMessage/></p> , biasanya ada 4 Kode yang sama, Carilah yang ke 2 dan ke 4, dan gantilah kode tersebut dengan kode HTML 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/AVvXsEiVVdxeKHJxzY09KTdJ7-r_-eTCaERPTIn8NRo96eV94IKOTiQ1c-O8IcKDU3heMBZp8MY-9TwWyMBQJasG9FSSn18ERgkY5lLElMbDevPld4A9oF_fPn3uASJFZjEGRU9ax-00V6dUsrw/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='#' 

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='http://hentongsekai.blogspot.com/p/link-exchange-hentongerz-blog.html' 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 -->

Silahkan ganti 'LINK ANDA' dan 'ID FEEDBURNER' dengan milik kamu sendiri.

Klik Simpan, dan lihat hasilnya.

Jika ada yang kurang jelas, silahkan Berkomentar.

Credits :
http://rivai-silaban.blogspot.com/2013/08/cara-membuat-pesan-komentar-valid-html5.html
Judul Cara Membuat Pesan Komentar Valid HTML5 Keren
Deskripsi Pesan Komentar HTML5 P esan komentar valid HTML5 dan tentunya SEO friendly sangat dibutuhkan seorang blogger, cara memasang Pesan Kome...
Author
Author Rating
4/5 Suara Dari 777 Ulasan

*** Mohon Tinggalkan Jejak !!! ***

Cara Membuat Pesan Komentar Valid HTML5 Keren
Terima Kasih Telah Berkunjung.

Judul : Cara Membuat Pesan Komentar Valid HTML5 Keren
Komentar : 5 Comments
Ditulis Oleh : , Pada : 03:20 Saturday 28 March 2015.
Label : , ,

Jika menyebarkan artikel, cantumkan link yang menuju pada artikel Cara Membuat Pesan Komentar Valid HTML5 Keren ini. Sesama blogger mari saling menghargai.

Terima kasih atas perhatiannya.

On 03:20 with 5 comments

Diposkan oleh
Label: , ,

Share to:

di 03:20

Post a Comment Blogger Disqus

  1. Unknown28 March 2015 at 06:12

    #comment-holder .cm-youtube {
    display:block;
    border:none !important;
    background-color:#333;
    width:450px;
    height:240px;
    margin:0 auto 30px;
    }
    #comment-holder .cm-image {
    display:block;
    margin:0 auto 15px;
    outline:none;
    border:1px solid #ccc;
    background-color:white;
    -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
    -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
    box-shadow:0px 1px 3px rgba(0,0,0,0.2);
    padding:5px;
    max-width:96%;
    height:auto;
    width:auto;
    }
    code, #comment-holder code,
    #comment-holder i[rel="code"] {
    font:normal 12px Monaco,"Courier New",Monospace;
    color:blue;
    }
    pre, #comment-holder pre,
    #comment-holder i[rel="pre"] {
    display:block;
    font:normal 12px Monaco,"Courier New",Monospace;
    background-color:#333;
    color:white;
    padding:0.5em 1em;
    word-wrap:normal;
    white-space:pre;
    overflow:auto;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
    }
    blockquote, #comment-holder blockquote,
    #comment-holder b[rel="quote"] {
    margin:0 2%;
    background-color:#eee;
    padding:1em 1.2em;
    border-left:4px solid #7498AD;
    display:block;
    font-weight:normal;
    font-style:italic;
    }
    #comment-holder i[rel="image"],
    #comment-holder i[rel="youtube"] {
    display:block;
    overflow:hidden;
    border:2px solid black;
    position:relative;
    width:170px;
    height:100px;
    margin:0 auto 30px;
    }
    #comment-holder i[rel="image"]:before,
    #comment-holder i[rel="youtube"]:before {
    content:"Please enable your JavaScript to see this image!";
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-color:red;
    color:white;
    font-weight:bold;
    text-align:center;
    padding:15px 0;
    }
    #comment-holder i[rel="youtube"]:before {
    content:"Please enable your JavaScript to watch this video!";
    }

    ReplyDelete
  2. Unknown28 March 2015 at 06:13

    wewewewewe
    wew
    ew
    ew
    e
    we
    we
    w
    ewe

    ReplyDelete
  3. Unknown28 March 2015 at 06:52

    #comment-holder .cm-youtube {
    display:block;
    border:none !important;
    background-color:#333;
    width:450px;
    height:240px;
    margin:0 auto 30px;
    }
    #comment-holder .cm-image {
    display:block;
    margin:0 auto 15px;
    outline:none;
    border:1px solid #ccc;
    background-color:white;
    -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
    -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
    box-shadow:0px 1px 3px rgba(0,0,0,0.2);
    padding:5px;
    max-width:96%;
    height:auto;
    width:auto;
    }
    code, #comment-holder code,
    #comment-holder i[rel="code"] {
    font:normal 12px Monaco,"Courier New",Monospace;
    color:blue;
    }
    pre, #comment-holder pre,
    #comment-holder i[rel="pre"] {
    display:block;
    font:normal 12px Monaco,"Courier New",Monospace;
    background-color:#333;
    color:white;
    padding:0.5em 1em;
    word-wrap:normal;
    white-space:pre;
    overflow:auto;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
    }
    blockquote, #comment-holder blockquote,
    #comment-holder b[rel="quote"] {
    margin:0 2%;
    background-color:#eee;
    padding:1em 1.2em;
    border-left:4px solid #7498AD;
    display:block;
    font-weight:normal;
    font-style:italic;
    }
    #comment-holder i[rel="image"],
    #comment-holder i[rel="youtube"] {
    display:block;
    overflow:hidden;
    border:2px solid black;
    position:relative;
    width:170px;
    height:100px;
    margin:0 auto 30px;
    }
    #comment-holder i[rel="image"]:before,
    #comment-holder i[rel="youtube"]:before {
    content:"Please enable your JavaScript to see this image!";
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-color:red;
    color:white;
    font-weight:bold;
    text-align:center;
    padding:15px 0;
    }
    #comment-holder i[rel="youtube"]:before {
    content:"Please enable your JavaScript to watch this video!";
    }

    ReplyDelete
  4. Unknown28 March 2015 at 07:10

    http://4.bp.blogspot.com/-OOIOrDXB5-w/VNjl6wiN6VI/AAAAAAAADgs/oHurnUfoWAY/s1600/blockquote%2Bmasdabang.jpg

    ReplyDelete
  5. Unknown28 March 2015 at 07:23

    https://www.youtube.com/watch?v=imwmmv9r1oE

    ReplyDelete

leave comment
feedburner
Salam Hentongerz .. !!
Pergunakan fasilitas yang dapat membantu anda pada halaman blog ini.

1. Komentar SPAM Akan secepatnya dihapus.
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun blog ini.
3. Cek komentar masuk sebelum bertanya.
4. Link aktif tidak akan berfungsi.
5. Diijinkan menyebarluaskan artikel, Harus disertakan Sumbernya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Contact Us "
7. Bergabung dengan kami untuk menjadi member Klik "Join to Blog "
8. Bila komentar anda mengandung code HTML silahkan anda konversikan terlebih dulu
silahkan klik " Konversi Kode "

Konversi Kode Contact Us Join to Blog LINK EXCHANGE Google+ Facebook Twitter
Terima kasih telah berkomentar

Komentar
Subscribe to: Post Comments (Atom)
 
Top Top