Membuat Menu di Samping Judul Gadget dengan Teks Atau Gambar

bagaimana menambahkan menu di sebelah kanan judul, seperti gadget submit artikel di blog ini?"




Mari kita langsung mencobanya...
1. Login blogger
2. Tata Letak
3. Edit HTML
4. Centang Expand Template Widget
5. Carilah kode widget Anda, misal seperti ini
<b:widget id='HTML7' locked='false' title='Hot Update' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
</b:widget>

Yang berwarna merah adalah kode judul gadget Anda pada sidebar. Nah untuk menambahkan teks ke samping kanan judul sidebar, Anda cukup tambahkan ke sebelah kode berwarna merah tersebut. Misalkan menjadi kode seperti ini...

<b:widget id='HTML7' locked='false' title='Hot Update' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/> | <a href='http://alamatlinksatu' target='_blank'>namalinksatu</a> | <a href='http://alamatlinkdua'>namalinkdua</a></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
</b:widget>

- Simpan Template Anda

Agar Link Rata Kanan
Agar link yang ditambahkan di samping judul label bisa rata kanan (judul label asli mepet kiri, dan link tambahan mepet kanan) silahkan...
1. Tambahkan kode berikut ini di atas ]]></b:skin>
 #linklabel{
float:right;
}

2. Nah, sekarang link yang Anda tambahkan di kanan kode judul gadget menjadi seperti ini:
<h2 class='title'><data:title/><div id='linklabel'><a href='http://alamatlink.com/'>NamaLink</a></div></h2>

Jika Ingin Dengan Gambar
Jika Anda ingin menggunakan icon, cukup Anda ganti kode link di kanan kode judul sehingga seperti ini
<h2 class='title'><data:title/><div id='linklabel'><a href='http://tujuangambar.com'><img src='alamatgambar'/></a></div></h2>

Jika, gambr Anda terlalu besar, silahkan baca Atur Ukuran Gambar Dengan Script. Semoga postingan kali ini bermanfaat.

1 comment: