他のサイトの制作方法についてはお答えできませんので、ここでは「みどり同盟ブログではどうやって絵文字を表示させているか」を解説します。
みどり同盟ブログの絵文字は表示される場所により、2種類の表示方法があります。
どちらの場合も使いたい絵文字ボタンをクリックするだけで文章の好きな位置に絵文字を挿入することができるようになっていますが、一長一短があります。
1.記事に絵文字を入れるとき
画像タグがそのまま文章に挿入されます。

利点
- 画像タグがそのまま挿入されているので、投稿後、閲覧したときに表示が速い
- JavaScriptをoffにした環境でも絵文字を見ることができる
- 投稿者が編集することによって表示位置を細かく調節することができる

マイナス点
- 画像タグは長いので、編集に失敗すると文章全体やみどり同盟ブログ全体の表示が崩れてしまう
- 画像タグからはどんな絵文字になるのかパッと見ではわかりにくい

記事は、記事の投稿権を持つみどり同盟会員しか投稿できません。
記事を書くときに絵文字ボタンを押すと画像タグがそのまま挿入されます。
閲覧するときは最初から画像タグになっています(閲覧者のPCで画像に変換していない=最初から画像になっている)ので、すばやく表示されます。
記事の閲覧者はJavaScriptをoffにした環境でも絵文字を見ることができます。
記事投稿者の努力次第で、記事の左右や中央に表示したりと、表示位置を細かく調節することができます。
画像タグは長くなりますので、ボタン一つで入力できるのは便利ですが、記事の原稿の見た目がややこしくなります。
特に画像タグの一部を消してしまったりタグの中に余計な文字を追加したりすると表示が崩れてしまいます。
ただし、記事にはプレビュー機能があり、投稿する前に実際の表示を確認することができます。
また、投稿者は自分の記事を後で修正したり、削除したりすることができます。
つまり、マイナス点はプレビュー機能を上手に使えばカバーできるというわけです。
(絵文字の数185種類)
2.コメントに絵文字を入れるとき
[:絵文字:]のような短い絵文字コードが挿入されます。

利点
- コードが短いので文章全体を把握しやすい
- [:笑い:]のように、コードの内容からどんな絵文字になるのかを何となく判断することができる

マイナス点
- 投稿後、閲覧したときに(JavaScriptによって閲覧者のPCで)絵文字コードを画像タグに変換しているので、PCの性能などによって表示が遅くなることがある
- JavaScriptをoffにしている閲覧者には絵文字は見えない(絵文字コードが変換されず[:絵文字:]のようなまま表示される)
- 絵文字の種類が多いと変換処理に時間がかかってしまう

基本的にコメントは会員でなくても、投稿権がなくても、誰でも投稿できます。
絵文字ボタンをクリックすると短いコードが挿入されます。
絵文字コードは[:笑い:]のようにどんな画像に変換されるかわかりやすくなっています。
ただし、コメントにはプレビュー機能がありません。
実際にコメントを送信した後に絵文字がどのような位置に表示されるかはわかりません(ちょうど絵文字の前で改行されることがあったりします)。
絵文字の表示位置は細かく調節することができませんので、文章の先頭・途中・最後など、大雑把にしか挿入できません。
また他の会員が投稿した記事にコメントした場合は、自分でそのコメントを修正したり、削除したりできません(自分の記事のコメントは削除することができます)。
ページを表示する際には、JavaScriptで絵文字コードの内容を判定して画像タグに置き換えています。
つまりJavaScriptをoffにしていると、(絵文字コードから画像タグに変換されませんので)絵文字は表示されません。
絵文字の種類が多いと変換処理に時間がかかってしまいますので、記事投稿に比べ使える絵文字の数が少なくなっています。
(絵文字の数97種類)
まとめ:
記事の場合はボタンを押すと画像タグが直接入るようにし、コメントの場合はボタンを押すと絵文字コードが挿入され閲覧者がコメントを見たときだけ(閲覧者のPCで)絵文字コードを画像タグに変換するようにしました。
普段記事を見るときは最初はコメントは表示されませんし、コメントは誰でも簡単に投稿できることが重要ですので、こうやって二つの方法を採用することによって、見易さと表示の速さが両立できるという「適材適所」になっているというわけです。
プログラムの内容については、質問者がどの程度の知識を持っていらっしゃるのかわかりませんのでここでは答えられません。
実際に(Habboホテル内で)会って話すことはできると思いますが、例えば
この程度の初歩的な話がスムーズに伝わらないと説明できないと思います。