[Tanya] Code Gabungin Picture Dalam Satu Baris

Para suhu dan master, mau tanya ni..masih nyubi banget.
Gimana sih kode html di blogspot untuk gabungin pic supaya penampakannya bisa sejajar gt.
Sy penginnya gambar RSS ma Icon Tweet bisa sejajar gt gak sendiri2. Sementara ini di blog sy masih atas bawah penampakannya
Uploaded with ImageShack.us

Tolongin dong.
Terima kasih para master sebelumnya

 

Untuk sidbar toh Gan? YM ane. PM dilihat

 

1. Bisa pake' table HTML:

Code:

<table align="center">
<tr><td><a href="image.jpg"></td><td><a href="image.jpg"></td></tr>
</table>

2. Sebenarnya bisa dengan html biasa yang penting tanpa tag <br/>. Kalau dalam html yang kamu punya ada tag </br> hapus saja.

Code:

<img src="image.jpg">

Masalahnya kalau images tersebut melebihi widget sidebar, sudah pasti akan diturunkan kebawahnya.
Misalnya kamu punya dua images masing masing width berukuran 150px sedangkan sidebar kamu hanya 200px, jadi kalau kedua images tersebur digabungkan (150+150 > 200 px --> 'padding' diabaikan) sudah pasti salah satunya akan tergeser kebawah. Karena itu, pastikan dari penggabungan width itu total width tidak melebihi width sidebar.

 

Yang di sidebar?
Itu iconnya sendiri kegedean.
Coba cari yang msg2 dimensinya sama dan sesuai panjang sidebar.
Misalnya 48x48 pixel atau lbh besar dikit.
Cari di sini: _http://iconfinder.com.

-----------------------------------------------------

Untuk cara cepat pake table (tdk valid XHTML 1.0):

Code:

<!-- [B]Ini kode XHTML nya[/B] -->

[SIZE="2"]<table style="[B]border:none[/B];">
  <tr>
    <td><img src="url-icon-twitter" alt="Follow me on Twitter" /></td>
    <td><img src="url-icon-rss" alt="Subscribe to my feed" /></td>
  </tr>
</table>[/SIZE]

-----------------------------------------------------

Untuk cara cepat pake div (valid XHTML 1.0 & CSS inline):

Code:

<!-- [B]Ini kode XHTML nya[/B] -->

[SIZE="2"]<div style="[B]display:block;width:[COLOR="#ff0000"]100px[/COLOR];height:[COLOR="#ff0000"]100px[/COLOR];overflow:hidden;[/B]">
  <div style="[B]float:left;display:inline;width:[COLOR="#ff0000"]48px[/COLOR];height:[COLOR="#ff0000"]48px[/COLOR];[/B]">
    <img src="url-icon-twitter" alt="Follow me on Twitter" />
  </div>
  <div style="[B]float:left;display:inline;width:[COLOR="#ff0000"]48px[/COLOR];height:[COLOR="#ff0000"]48px[/COLOR];[/B]">
    <img src="url-icon-rss" alt="Subscribe to my feed" />
  </div>
</div>[/SIZE]

-----------------------------------------------------

Untuk cara baik pake div (valid XHTML 1.0 & CSS terpisah):

Code:

<!-- [B]Ini kode XHTML nya[/B] -->

[SIZE="2"]<div class="[B]social-box[/B]">
  <div class="[B]social-item[/B]">
    <img src="url-icon-twitter" alt="Follow me on Twitter" />
  </div>
  <div class="[B]social-item[/B]">
    <img src="url-icon-rss" alt="Subscribe to my feed" />
  </div>
</div>[/SIZE]

Code:

/* [B]Ini kode CSS nya[/B] */

[SIZE="2"][B].social-box[/B] {
  display:block;
  width:[COLOR="#ff0000"]100px[/COLOR];
  height:[COLOR="#ff0000"]100px[/COLOR];
  overflow:hidden;
}

[B].social-item[/B] {
  float:left;
  display:inline;
  width:[COLOR="#ff0000"]48px[/COLOR];
  height:[COLOR="#ff0000"]48px[/COLOR];
}[/SIZE]

-----------------------------------------------------

1. Nyang warna merah di ganti ama dimensi yg disukai.
2. Ini universal code, jadi silahkan di sesuaikan nth itu wp atau blogspot.
3. Siap copas, tapi pasti butuh adjusment juga ke theme yg dipake, edit2 aja.
4. Kalau ada kelakuan aneh, posting aja dimari.
5. Good luck.

 

makasih agan2 semua. Para master disini pada baik2 semua. Sori blm bs kasi thanks,lagi via hp nee. Nanti segera saya coba.
oiya,sekedar inpo. Memang yg sy maksud di sidebar. Tadinya dah sy kecilin tu icon tapi tetep ga bs sejajar.

--- Update ---

agan semua...terima kasih postingannya...
dah berhasil..
@anonimous
Sip codenya, thank sob

@Dcartes
suit-suit..iconnya kerennya...
makasiiiihh banyak
Kok gab bisa kasi thank ya?