Membuat Tombol pada Pesan Formulir Komentar
0 views
Membuat Tombol pada Pesan Formulir Komentar - Pada artikel sebelumnya (baca: Membuat Pesan di atas Form Komentar Blogger) saya sudah menjelaskan cara membuat atau memodifikasi pesan formulir komentar blogger.

Selanjutnya, pada tutorial kali ini saya akan menjelaskan bagaimana cara menambahkan tombol /button pada pesan tersebut.
Saat ini, saya anggap sobat telah melakukan langkah-langkah dalam membuat pesan di atas form komentar. Selanjutnya sobat tinggal menambahkan kode CSS dan HTML untuk tombol.
Langkah 1 : Simpan CSS dibawah ini di atas
Langkah 2 : Cari
Sama seperti tutorial sebelumnya, lakukan pada kode ke 2 dan ke 4.
Semoga bermanfaat.

Selanjutnya, pada tutorial kali ini saya akan menjelaskan bagaimana cara menambahkan tombol /button pada pesan tersebut.

Saat ini, saya anggap sobat telah melakukan langkah-langkah dalam membuat pesan di atas form komentar. Selanjutnya sobat tinggal menambahkan kode CSS dan HTML untuk tombol.
Langkah 1 : Simpan CSS dibawah ini di atas
]]></b:skin>
.small-button {
border: 2px solid #555;
color: #111;
cursor: pointer;
font-size: 11px;
font-weight: normal;
margin-top: 15px;
margin-bottom: 10px;
margin-right:5px;
padding:2px 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;
}
.small-button: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:#90c3eb;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#cde1fc', endColorstr='#90c3eb');
background-image:-webkit-linear-gradient(top, #cde1fc 0%, #b5d5eb 50%, #90c3eb 100%);
background-image:-moz-linear-gradient(top, #cde1fc 0%, #b5d5eb 50%, #90c3eb 100%);
background-image:-ms-linear-gradient(top, #cde1fc 0%, #b5d5eb 50%, #90c3eb 100%);
background-image:-o-linear-gradient(top, #cde1fc 0%, #b5d5eb 50%, #90c3eb 100%);
background-image:linear-gradient(top, #cde1fc 0%, #b5d5eb 50%, #90c3eb 100%);
}
Langkah 2 : Cari
<p><data:blogCommentMessage/></p>
yang telah ditambakan kode . Kode di simpan sebelum penutup tag </p>
. Kurang lebih seperti ini :<p><data:blogCommentMessage/>
...kode HTML di sini.... untuk penulisan gunakan class='small-button'
</p>

Sama seperti tutorial sebelumnya, lakukan pada kode ke 2 dan ke 4.
Semoga bermanfaat.
98 komentar
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code
mhon bantuannnya...
http://project-saya.blogspot.com/
di sana saya coba dengan
<a class='small-button' href='http://mosbsno.blogspot.com/2014/02/request-tutorial-setting-mouse-macro.html' target='_blank'>Request Tutorial</a>
Namun kode <a ... itu tidak berfungsi kang ,,,
kalau misal di tmbah kan <span di depan sih kode nya berhasil cuma Link ny gak aktif :(
itu gimana yah kang solusi nya?
kaya'nya udah update lagi nih konversi kodenya, bagi dong tipsnya...
Aku coba-coba tombol buttonnya ga ngefek...
salam blogger
keren salam damai aja!
Rio Us"
- salam damai -
mohon pencerahannya yah kang :-D
emilseo.blogspot.com
www.kevin-432.blogspot.com
Terimakasih!
dan kode ... <p><data:blogCommentMessage/></p> ... di blog saya lebih dari satu.
solusinya gimana ?
<a class="small-button" href="http://cdn.kangismet.net/tool/html-escaper.html" onclick="window.open(this.href,"popupwindow","status=0,height=420,width=400,resizable=0,top=50,left=100");return false;" target="_blank">Konversi Kode di Sini</a>
<script type='text/javascript'>
var pres = document.getElementsByTagName("blockquote");
for (var i = 0; i < pres.length; i++) {
pres[i].addEventListener("dblclick", function () {
var selection = getSelection();
var range = document.createRange();
range.selectNodeContents(this);
selection.removeAllRanges();
selection.addRange(range);
}, false);
}
</script>
Ini blog saya :
http://blogsitaufik.blogspot.com/2013/07/cara-upgrade-ke-windows-81.html
terimakasih
pdata:blogCommentMessage
kok ndak ada ya?
[img]http://4.bp.blogspot.com/-d4ENvpbJdYE/UbbFmA9ECWI/AAAAAAAAAYE/93xrPsZm8vk/s1600/123.jpg[/img]
http://masjawika.blogspot.com/
http://informasibloger.blogspot.com
salam hangat blogger sumbawa..
Bookmark dulu agrh... :-D
http://masjawika.blogspot.com/
Tips2nya pun makin greget. Sukses ya, kang :)