Breaking News
Loading...
Senin, 13 Mei 2013

Membuat Tombol & Modif didalam pesan komentar dan di Blog



" Membuat Tombol & Modif didalam pesan komentar dan di Blog contoh : Tombol Konversi , OOT , Top Komentator , Cara berkomentar . "

Selamat Sore teman2 semua .. kali ini saya akan share Cara Membuat Tombol & Modif didalam pesan komentar dan di Blog . Apa itu Tombol didalam pesan komentar di Blog ?
demo tombol + modifikasi ada di blog saya ini :D atau lihat saja gambar diatas :)

Langkah 1 ~
Dalam langkah pertama ini , sobat harus membuat pesan diatas Form Komentar Blogger .
dengan cara Setelan -> Pos dan Komentar -> Pesan Formulir Komentar

Langkah ke 2 ~
Copy CSS dibawah ini dan masukkan tepat di atas ]]></b:skin>

#dtkmodif-comment{
position: relative; 
background:#BFE3FE;
width:100%;
padding:10px; 
font:normal 12px trebuchet ms; 
text-align:justify; 
border:3px solid #00477D;
margin:0 10px 10px 0; 
margin-top: 10px; 
line-height: 1.3em; 
} 
#dtkmodif-comment::after, #dtkmodif-comment::before { 
top: 100%; 
border: solid transparent; 
content: " ";
height: 0; 
width: 0; 
position: absolute; 
pointer-events: none 
} 
#dtkmodif-comment::before { 
border-top-color: #00477D; 
border-width: 15px; 
left: 10%; 
margin-left: -36px 
}
#dtkmodif-comment::after { 
border-top-color: #BFE3FE; /* Samakan dengan warna background */
border-width: 9px; 
left: 10%; 
margin-left: -30px
}

.tombol-konversi {
border: 1px solid #555;
color: #111;
cursor: pointer;
font-size: 13px;
font-weight: normal;
margin-top: 15px;
margin-bottom: 10px;
margin-right:5px;
padding:4px 10px;
text-decoration: none;
text-shadow: 1px 1px 0 #ffffff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
display: inline-block;
-webkit-box-shadow: inset 0 1px 0 0 #ffffff;
-moz-box-shadow: inset 0 1px 0 0 #ffffff;
box-shadow: inset 0 1px 0 0 #ffffff;
background: -webkit-gradient( linear,left top,left bottom,color-stop(0.05,#ededed),color-stop(1,#dfdfdf) );
background: -moz-linear-gradient( center top,#ededed 5%,#dfdfdf 100% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=' #ededed' ,endColorstr=' #dfdfdf' );
background-color: #ededed;
}
.tombol-konversi:hover {
text-shadow: 1px 1px 0 #f0f7ff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
display: inline-block;
-webkit-box-shadow: inset 0 1px 0 0 #ffffff;
-moz-box-shadow: inset 0 1px 0 0 #ffffff;
box-shadow: inset 0 1px 0 0 #ffffff;
background-color:#FF0000;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#cde1fc', endColorstr='#90c3eb');
background-image:-webkit-linear-gradient(top, #FE8080 0%, #FEBFBF 50%, #FE8080 100%);
background-image:-moz-linear-gradient(top, #FE8080 0%, #FEBFBF 50%, #FE8080 100%);
background-image:-ms-linear-gradient(top, #FE8080 0%, #FEBFBF 50%, #FE8080 100%);
background-image:-o-linear-gradient(top, #FE8080 0%, #FEBFBF 50%, #FE8080 100%);
background-image:linear-gradient(top, #FE8080 0%, #FEBFBF 50%, #FE8080 100%);
} 

Langkah ke 3 ~
Cari kode <data:blogCommentMessage/> kemudian ganti dengan kode dibawah ini


 <div id='dtkmodif-comment'><span><data:blogCommentMessage/></span><a class='tombol-konversi' href='https://dtk-site.googlecode.com/svn/trunk/Konversi%20Kode%20HTML.html' onclick='window.open(this.href, &quot;popupwindow&quot;, &quot;status=0, height=420, width=400, resizable=0, top=50, left=100&quot;);return false;' target='_blank'>Konversi Kode di Sini !</a></div>

kode tersebut di bungkus dengan tag span kemudian link kode konversinya di letakkan setelahnya .

biasanya ada 4 buah kode ini <data:blogCommentMessage/> . Lebih baiknya diganti semua saja .

sekian artikel dari saya .. semoga bermanfaat .
Jika terjadi kesalahan diharap ikut berpartisisapi pada komentar dibawah ini :D

39 komentar:

  1. inovatif blog nya gan... hehehe

    BalasHapus
  2. wah tutorial yang bermanfaat sobat..
    nice post ya..
    Salam persahabatan :)

    BalasHapus
  3. bagus sekali tutornya mas, tankyu udah share

    BalasHapus
  4. wah demonya kaya di blog ini ya sob, keren tuh, saya juga rencana mau pasang sob, trims sharingnya

    BalasHapus
    Balasan
    1. pasang saja mas :) lebih cantik dan menawan blognya :)

      Hapus
  5. Css dan sebangsannya saya ampun, dan maaf kalau komennya cuman segelintir doang karena saya ndak paham dan belum ada waktu untuk memahaminya , hehehehehhe

    BalasHapus
    Balasan
    1. jangan menyerah mas [-( saja dulu juga tidak paham apaapa tentang css dll ..

      Hapus
  6. keren sih, tapi takut blog gw berat jak nih. pasang2 gini'an.

    rencananya mw pasang di postingan aja.
    kalo pasang di postingan gimana?

    BalasHapus
    Balasan
    1. postingan saja ? iya itu kan dipasang di postingan saja :-?

      Hapus
  7. keren nih kolom momentarnya, ada bunga2nya. :>) beda dgn yg lainnya :d

    BalasHapus
  8. Wah, keren nih blognya..
    http://firmanardyansyah.blogspot.com/

    BalasHapus
  9. kapan2 aq coba ya sob.., kebetulan aq blom pny ni.., makasih (h)

    BalasHapus
  10. Wah bagus juga.. jadi gak perlu repot cari converter

    BalasHapus
  11. Lebih bagus lagi kalo kodenya ditaro di page halaman blog sob,, :)

    BalasHapus
  12. waaawwww keren...pengen coba hehehe :)

    BalasHapus
  13. kembaran template dengan mdf-blog ya mas ?? :)

    BalasHapus
  14. sip lah kalo ada waktu saya oprek2 template saya :)

    BalasHapus
  15. Terima kasih banyak kang dhani, udah dipraktekan di blog saya. BTW nambah tombol OOT dan emoticon nya gimana caranya? Maklum kang dhani, saya masih belajar. Salam kenal..

    BalasHapus
    Balasan
    1. langkah seperti diatas cuman tambahkan kode <a class='button-oot' href='/p/oot.html' target='_blank'>OOT</a>
      sesudah .. ;return false;' target='_blank'>Konversi Kode di Sini !</a>

      kemudian tambahkan cssnya ..

      .button-oot {
      text-decoration: none;
      color: white;
      cursor: pointer;
      padding: 5px 8px;
      background-color: #ddd;
      background: -webkit-gradient(linear,left top,left bottom,from(#f7f7f7),to(#ddd));
      background: -moz-linear-gradient(top,#f7f7f7,#ddd);
      position: relative;
      font-family: Arial,Sans-serif;
      font-weight: bold;
      font-size: 14px;
      border-radius: 3px;
      box-shadow: 0 1px 1px rgba(0,0,0,0.4);
      -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.4);
      -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.4);
      transition: none;
      bottom: 3px;
      transition-duration: 1s;
      margin: 0 3px 0 0;
      }

      Hapus
    2. Alhamdulilah udah dicoba berhasil mas, terima kasih atas tutorialnya. Cuma sementara ini belum saya terapkan diblog. Salam..

      Hapus
  16. keren nih...nanti kapan-kapan tak coba mas :)

    BalasHapus
  17. [img]http://2.bp.blogspot.com/-5_dZapgn_lE/UbGKuMNNXnI/AAAAAAAABvg/6TtutrdBshQ/s1600/HardDisk1.jpg[/img]

    BalasHapus

1.Jika ingin menyisipkan Gambar [img]URL Gambar[/img]
2.Jika ingin menyisipkan Video [youtube]URL Video[/youtube]
3.Jika ingin menyisipkan Kode [code]Kode Anda[/code]
4.Jika ingin menyisipkan kode html / css / jquery [pre]Kode Anda[/pre]
5.Jika ingin menyisipkan blockquote [blockquote]Kata-kata Anda[/blockquote]

Note : Berkomentar dengan baik :)
Live Link akan mendapatkan peringatan :D

 
Toggle Footer