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
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...
- 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>
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
Jika, gambr Anda terlalu besar, silahkan baca Atur Ukuran Gambar Dengan Script. Semoga postingan kali ini bermanfaat.
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 != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<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 != ""'>
<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>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<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;
}
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.
wah !!! ini yg saya cari mas Doyok...
BalasHapusbesok saya coba ya, udah malam nih !!!
makasih tutorial-nya mas Doy...
wah mas doyok cepat bagat update apa lagi malam hum
BalasHapusaku cobah aja besok udah malam ni
salam dari akabr yahya
www.topblogakbar.co.cc
sipp mas... ntar sya coba... meskipun sedikit bingung....
BalasHapuswah tips ini baguss tapi udah malam ni besok aja di cobah ea tapi hebat juga ya mas doyok bikin atikel malam hehehehe
BalasHapussalam dari kang akbar
www.topblogakbar.co.cc
Sangat bagus untuk mempercantik blog
BalasHapusLebih Bagus lagi kalau hasil Tips kang doyok diberi hasilnya. Untuk membuktikan tips tersebut memang benar
BalasHapustipsnya mantap mas doyok, terimakasih nih...
BalasHapuskayak apa si yah..
BalasHapushmmm,,masih bingung nih maksudnya
BalasHapusaku g ngerti mas maksudnya apa, hehehehe
BalasHapuswah artikle yg kusubmit ada di paling atas.....
BalasHapus:-)
mantap deh tipsnya mas..
trims buat tutorialnya. saya akan simpan tips ini, suatu saat pasti perlu nih untuk expand blog.
BalasHapusmakasih buat tips=nya. blog ini tanggap dengan kebutuhan para blogger, salute dan salam kenal :)
BalasHapusbangun tidur berkunjung dulu ah.. makasih infonya. bermanfaat bagi blogger seperti saya.. zzz ngantuk
BalasHapuswah keren nih Mas Doy...perlu dicoba....
BalasHapuscontohnya di gambar itu kurang ya :D hehehe
BalasHapuskeren... mas.... coba dulu....
BalasHapuswah keren mas ......
BalasHapusdi bookmark dlu deh !!
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/???
BalasHapusthanks infonya...
BalasHapushttp://pagerankgoogle01.blogspot.com/
Makasih mas. Ntar tak coba pas liburan...
BalasHapusgan..., masukan ?
BalasHapuskurang 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
waduh, sebanyak itu, males nyarinya,,,
BalasHapuspengen juga nih tp bungung,txs nanti dicoba
BalasHapus