Artikel ini masih dari blog sobat yg notabene masih menggunakan klasik template :) Heres for original article http://categories.blogspot.com/2006/02/images-in-blogspot-comments.html Menampilkan tag gambar pada komentar dengan bantuan JavaScript sedikit CSS dan HTML juga :D Jadi kita hanya menggunakan syntax sederhana seperti ini[img]http://link-gambar.jpg[/img]Mari kita ramu dengan bumbu yg sudah Beben si bloglang ganteng kalem tea ulik² :-bdCentang Expand Widget pada bagian edit template sobat...
Javascript
Letakan javascript berikut dibawah tag <head> atau diatas tag penutup </head><script type="text/Javascript">
//<![CDATA[
function commenthtml(string)
{
normaltitle = document.getElementById(string).innerHTML;
fattitle = "";
yy = normaltitle.length;
yy = yy+5
for( var xx = 0; xx < yy; xx++ )
{
nextone = normaltitle.slice(0,1)
normaltitle = normaltitle.slice(1)
if ( nextone=="[") {
if (normaltitle.indexOf("img]")=="0") {
if (normaltitle.indexOf("[/img]")!="-1") {
find=normaltitle.indexOf("[/img]");
doinsert = normaltitle.slice(0,find);
normaltitle = normaltitle.slice(find);
normaltitle = normaltitle.slice(6);
if (doinsert.indexOf("\"")=="-1") {
nextone="image";doinsert = doinsert.slice(4); doinsert = "<img src=\""+doinsert+"\">";
}}}
};
if (nextone=="image"){nextone=doinsert}
fattitle = fattitle.concat(nextone);
}
document.getElementById(string).innerHTML = fattitle;
}
//]]>
</script>
Setelah melakukan expand widget temukan kode ini//<![CDATA[
function commenthtml(string)
{
normaltitle = document.getElementById(string).innerHTML;
fattitle = "";
yy = normaltitle.length;
yy = yy+5
for( var xx = 0; xx < yy; xx++ )
{
nextone = normaltitle.slice(0,1)
normaltitle = normaltitle.slice(1)
if ( nextone=="[") {
if (normaltitle.indexOf("img]")=="0") {
if (normaltitle.indexOf("[/img]")!="-1") {
find=normaltitle.indexOf("[/img]");
doinsert = normaltitle.slice(0,find);
normaltitle = normaltitle.slice(find);
normaltitle = normaltitle.slice(6);
if (doinsert.indexOf("\"")=="-1") {
nextone="image";doinsert = doinsert.slice(4); doinsert = "<img src=\""+doinsert+"\">";
}}}
};
if (nextone=="image"){nextone=doinsert}
fattitle = fattitle.concat(nextone);
}
document.getElementById(string).innerHTML = fattitle;
}
//]]>
</script>
<b:includable id='comments' var='post'>Nanti sobat akan menemukan kode seperti ini<div class='comments' id='comment'>Sisipkan kode ramuan kedalamnya menjadiScroll kebawah, dan temukan kembali kode<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<div id='topc'>
....
....
</b:includable>Letakan tag penutup </div> tepat diatas kode tadi yah sob! Setelah itu save deh :) Sekarang untuk kode CSS dan HTML-nya yah...Kode CSS dan HTML
Masukan seluruh kode dengan melakukan Dashboard ► Design ► Page Elements ► Add a Gadget ► HTML/Javascript :D<style>
#imgfix {
background: url(http://link-your-button-image.png) no-repeat;
left: 0px;
top: 75px;
height: 35px;
width: 35px;
position: fixed;
z-index: 5000;
border: none;
}
#imgfix a {
display: block;
width: 100%;
height: 100%;
}
</style>
<div id="imgfix"><a href="#" onclick="commenthtml('topc');return false;" title=""></a></div>
#imgfix {
background: url(http://link-your-button-image.png) no-repeat;
left: 0px;
top: 75px;
height: 35px;
width: 35px;
position: fixed;
z-index: 5000;
border: none;
}
#imgfix a {
display: block;
width: 100%;
height: 100%;
}
</style>
<div id="imgfix"><a href="#" onclick="commenthtml('topc');return false;" title=""></a></div>
Jadi nanti kalau pada kotak komentar sobat ingin memberitahukan sebuah image tinggal menuliskan syntaxTinggal memberi tag [img] dan ditutup kembali dengan tag [/img] Karena berkerja dg menggunakan javascript, maka efek akan berfungsi setelah load halaman beres 100% ;) Setelah full load 100% pada satu halaman, tekan/klik tombol yg tadi dibuat (lihat gambar diatas itu kan)[img]http://link-image-on-comments-side.jpg[/img]
Good luck and see you \m/
Tidak ada komentar:
Posting Komentar