Membuat Menu di Samping Judul Gadget dengan Teks Atau Gambar

Kembali lagi di post request. Postingan yang menjawab keinginan Anda. Blog ini mencoba ramah untuk menjawab setiap permasalahan, baik yang sedang hangat atau permasalahan lama yang tidak ditemukan di blog lain. Beberapa hari membahas tips dan tools, sekarang saatnya kita utik template kita. Pertanyaan dari sobat blogger adalah, "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.

Komentar

  1. wah !!! ini yg saya cari mas Doyok...
    besok saya coba ya, udah malam nih !!!
    makasih tutorial-nya mas Doy...

    BalasHapus
  2. wah mas doyok cepat bagat update apa lagi malam hum
    aku cobah aja besok udah malam ni

    salam dari akabr yahya
    www.topblogakbar.co.cc

    BalasHapus
  3. sipp mas... ntar sya coba... meskipun sedikit bingung....

    BalasHapus
  4. wah tips ini baguss tapi udah malam ni besok aja di cobah ea tapi hebat juga ya mas doyok bikin atikel malam hehehehe

    salam dari kang akbar
    www.topblogakbar.co.cc

    BalasHapus
  5. Sangat bagus untuk mempercantik blog

    BalasHapus
  6. Lebih Bagus lagi kalau hasil Tips kang doyok diberi hasilnya. Untuk membuktikan tips tersebut memang benar

    BalasHapus
  7. tipsnya mantap mas doyok, terimakasih nih...

    BalasHapus
  8. hmmm,,masih bingung nih maksudnya

    BalasHapus
  9. aku g ngerti mas maksudnya apa, hehehehe

    BalasHapus
  10. wah artikle yg kusubmit ada di paling atas.....
    :-)

    mantap deh tipsnya mas..

    BalasHapus
  11. trims buat tutorialnya. saya akan simpan tips ini, suatu saat pasti perlu nih untuk expand blog.

    BalasHapus
  12. makasih buat tips=nya. blog ini tanggap dengan kebutuhan para blogger, salute dan salam kenal :)

    BalasHapus
  13. bangun tidur berkunjung dulu ah.. makasih infonya. bermanfaat bagi blogger seperti saya.. zzz ngantuk

    BalasHapus
  14. wah keren nih Mas Doy...perlu dicoba....

    BalasHapus
  15. contohnya di gambar itu kurang ya :D hehehe

    BalasHapus
  16. keren... mas.... coba dulu....

    BalasHapus
  17. wah keren mas ......
    di bookmark dlu deh !!

    BalasHapus
  18. wah aku cari kode HTML nya sampe puyeng..bang..aduuh diakali pake copy F /Copy V masih ga ada yang di sorot..gimana nyari kode2 gitu spy gampang? ada ga triknya/???

    BalasHapus
  19. thanks infonya...
    http://pagerankgoogle01.blogspot.com/

    BalasHapus
  20. Makasih mas. Ntar tak coba pas liburan...

    BalasHapus
  21. gan..., masukan ?
    kurang begitu jelas bimbingannya apalagi buat para pemula kaya saya tolong bimbing cara penambahan /penulisanya di dalam gadget yang akan di edit setelah proses yg agan berikan, kok saya liat gak ada perubahan terhadap gedget nya dan gimana penambahan teks-nya ?
    sekedar tambahan aja untuk mempermudah pencarian kode yg akan disisipkan tambahan tekan tombol bantuan pencarian yaitu CTRL+F, keluar deh teks bar dibawah layar kita ok segitu aja mas, kabar dari saya , salam cbr

    BalasHapus
  22. waduh, sebanyak itu, males nyarinya,,,

    BalasHapus
  23. pengen juga nih tp bungung,txs nanti dicoba

    BalasHapus

Posting Komentar

Postingan Populer