Jumat, 22 Oktober 2010

Images in Blogspot Comments Side

Mari kita beri ucapan selamat kepada blogger berbasis blogspot dengan tampilan baru pada waktu kita memasuki sesi log-in <:-P :O) \:D/ =D> taraaa...

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² :-bd

Centang 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<b:includable id='comments' var='post'>Nanti sobat akan menemukan kode seperti ini<div class='comments' id='comment'>Sisipkan kode ramuan kedalamnya menjadi
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<div id='topc'>
....
....
Scroll kebawah, dan temukan kembali kode</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 DashboardDesignPage ElementsAdd a GadgetHTML/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>
Jadi nanti kalau pada kotak komentar sobat ingin memberitahukan sebuah image tinggal menuliskan syntax
[img]http://link-image-on-comments-side.jpg[/img]
Tinggal 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)
Good luck and see you \m/

Tidak ada komentar:

Posting Komentar