Mohon Tunggu Proses Memuat Konten Halaman

ADVERTISEMENT

Terbaru

12
Tgl. 22 September 2012

Cara Mengganti Tautan Beranda Yang Terdapat Pada Tab Menu Blog Dengan Ikon Tombol Home

Jika Anda mengaktifkan penggunaan widget ‘Page (Laman)’ (seperti yang diuraikan pada langkah pertama artikel dengan judul “ Cara Menambahk...

ELTELU - Tampilan Tombol Home Pada Tab Menu Standar Blog
Jika Anda mengaktifkan penggunaan widget ‘Page (Laman)’ (seperti yang diuraikan pada langkah pertama artikel dengan judul “Cara Menambahkan Sub Menu (Pull Down Menu) Pada Tab Menu Horizontal Standar Blogger”) dengan tujuan guna menampilkan halaman mandiri pada blog dalam bentuk tab menu horizontal seperti yang tampak pada gambar di atas, maka salah satu menu yang secara default akan ditampilkan adalah menu untuk halaman ‘Beranda (Home)’.

Menu yang ditampilkan dalam widget ‘Page (Laman)’ (khususnya menu untuk halaman beranda) secara default adalah berbentuk sebagai tautan teks, sehingga secara default pula perubahan yang dapat dilakukan hanyalah sebatas pada teks yang akan ditampilkan sebagai menu pada bagian tersebut. Namun tahukah Anda bahwasanya tautan ‘Beranda (Home)’ yang terdapat pada bilah menu standar Blogger, dapat dikustomisasi atau dimodifikasi dari yang semula berbentuk menu tautan teks menjadi menu dengan gambar berbentuk tombol atau ikon rumah seperti yang umum dipakai dalam kustom template.

Untuk melakukan kustomisasi caranya cukup mudah. Dimana langkah awal yang harus dilakukan adalah mengaktifkan penggunaan widget ‘Page (Laman)’, dan kemudian setelah widget tersebut terpasang pada blog maka langkah berikutnya adalah melakukan modifikasi kode dalam template untuk widget yang dimaksud. Sedangkan untuk melakukan modifikasi pada rangkaian kode widget, Anda dapat mengerjakan langkah-langkah berikut ini secara berurutan.

Pertama, buka editor template dengan cara mengeklik menu ‘Template>Edit HTML>Lanjutkan>Expand Template Widget’.

Kedua, cari kode <b:widget id='PageList dan kemudian apabila telah ketemu maka perhatikan beberapa baris di bawahnya. Nah, pada beberapa baris di bawahnya, hapuslah rangkaian kode seperti yang tampak pada contoh di bawah ini.
<ul> <!-- hapus dari sini -->
  <b:loop values='data:links' var='link'>
    <b:if cond='data:link.isCurrentPage'>
      <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
    <b:else/>
      <li><a expr:href='data:link.href'><data:link.title/></a></li>
    </b:if>
  </b:loop>
</ul> <!-- hapus sampai sini -->

Dan selanjutnya pada bagian yang dihapus tersebut sisipkan rangkaian kode seperti yang tampak pada contoh berikut ini.
<ul>
  <li><a href='http://eltelu.blogspot.com/'><img alt='L3' height='15px' src='https://lh6.googleusercontent.com/-GrWWmwsRww4/UFjcGGzlSYI/AAAAAAAAAn0/rP9UFz050sk/s800/Beranda.png' width='20px'/></a></li>
  <li><a href='URL'>Daftar Isi</a></li>
  <li><a href='URL'>Tanya Jawab</a></li>
  <li><a href='URL'>Tentang</a></li>
</ul>

Keterangan:
Tag <li> yang pertama digunakan untuk halaman beranda dengan model menu berbentuk tombol bergambar rumah, sedangkan tag <li> yang kedua, ketiga, dan keempat digunakan untuk menu yang berikutnya dengan model menu berbentuk tautan teks.
Ganti http://eltelu.blogspot.com/ sesuai dengan URL blog yang Anda kelola, serta ganti pula kata URL sesuai dengan link halaman atau artikel yang akan ditautkan. Dan sesuaikan pula menu tampilan yang akan digunakan yaitu dengan cara mengganti kata ‘Daftar Isi’ ‘Tanya Jawab’, serta ‘Tentang’.
Apabila gambar yang digunakan sebagai tombol beranda belum sesuai, maka silakan diubah sesuai dengan URL gambar yang telah Anda unggah.

Ketiga, simpan template.

Dengan demikian maka dapat diartikan bahwa model bilah menu yang digunakan adalah tetap bilah menu standar Blogger, sedangkan menu yang terdapat di dalamnya adalah sesuai dengan kustomisasi yang telah dilakukan. Sehingga akhirnya tampilan menu tidak lagi berbentuk tautan teks namun dapat diubah dalam bentuk menu berbentuk gambar tombol seperti yang tampak pada contoh gambar di atas (baik untuk menu beranda maupun untuk menu yang lainnya). Namun perlu diingat bahwa dengan menggunakan teknik ini akhirnya fungsi <li class='selected'> tidak lagi berfungsi seperti halnya yang terjadi pada kustom template.

Semoga berguna dan bermanfaat.
Salam.


Katagori: ,
Silakan klik di sini untuk mengeposkan komentar Anda. Jika Anda ingin membaca artikel lain yang terdapat pada blog ini, maka dapat Anda lakukan dengan cara membuka laman daftar isi. Catatan: Komentar balasan hanya diprioritaskan untuk pertanyaan dan atau pernyataan yang diposkan dengan memakai formulir komentar Blogger.
Admin
Terdapat 12 komentar pada artikel ini ▶
23/09/12 06.31 O

Uraian yang bermanfaat sekali

23/09/12 19.32 O

wow keren,,

Mas ada tutorial, bikin Join This Site seperti yang ada di blog ini gak?,,

kalau ada kasih tau saya di yukinote.

Fast Respond blogwalking ,,

Yukinote,,

24/09/12 11.31 O

@aditTerimakasih Sobat. Semoga uraian tersebut benar-benar dapat diambil manfaatnya.

24/09/12 11.43 O

@YukinoteTerimakasih Sobat.

Oh ya, untuk membuat 'Join This Site' seperti dalam blog ini, maka Sobat dapat menggunakan script dengan format berikut ini.

[a href="http://www.blogger.com/follow-blog.g?blogID=944413042420217262" target="_blank"][img src="URL_Gambar"/][/a]

Keterangan:
---------------------
[ = <
] = >
Ganti 944413042420217262 sesuai dengan blogID Sobat dan ganti pula URL_Gambar sesuai dengan URL gambar tombol yang akan digunakan.

Sebagai contohnya silakan sobat buka artikel dengan judul Memasang Widget Blogger Follow Button Pada Blogspot Versi Mobile

Sekian dan semoga dapat membantu. :)

Anonim
10/10/12 14.33 O

Wah terima kasih sob, atas infonya saya akan coba di blog baru saya.

10/10/12 17.57 O

@qalby-ikhlasSama-sama Sobat. Silakan bila ingin menerapkan teknik tersebut. :)

09/02/13 20.58 O

masukin URL gambar home nya sebelah mana ya, au pasang di tempat L3 gak keluar gambarnya malah url nya yg tertampilkan,, makasih sebelumnya..

11/02/13 07.52 O

@Rak BukuBila Sobat ingin mengubah gambar tombol home, maka tinggal mengganti https://lh6.googleusercontent.com/-GrWWmwsRww4/UFjcGGzlSYI/AAAAAAAAAn0/rP9UFz050sk/s800/Beranda.png dengan URL gambar yang ingin Sobat pasang. :)

12/02/13 03.54 O

kok aku ga nemu kode <b:widget id='PageList ya.. ada kode lain yang berhubungan ga? aku masih bingung cara ganti tombol menu yang di blog dasar min..

12/02/13 06.02 O

@Arlitya StriItu terjadi karena bisa jadi Sobat belum mengaktifkan penggunaan bilah menu standar Blogger.

Sehingga agar bagian tersebut dapat ditemukan, maka aktifkan terlebih dulu penggunaan bilah menu standar Blogger. Dimana cara untuk mengaktifkannya dapat Sobat temukan pada langkah pertama artikel ini.

Semoga dapat membantu. :)

11/08/13 19.16 O

sangat bermanfaat , mau dicoba dulu mas..

12/08/13 16.05 O

@Rian AkbarySilakan Sob. Semoga saja Sobat tidak mengalami kesulitan dalam mengimplementasikan teknik yang saya uraikan pada artikel di atas.

How To ▶
Education ▶
SEO ▶
Other Internet ▶
Programming ▶
Tutorial ▶
DP & Story ▶
Tips & Trick ▶

o

  • .Ragam Tumbuhan
  • .Unik & Langka
  • .Aneka Buah
  • .Produk Sederhana
  • .Karya Seni
  • .Tempat Wisata
  • .Ragam Kegiatan
  • .Aneka Bunga
  • .Hewan & Serangga
GALERI
KIRIM MASUKAN
E L T E L U
Semar Bingung's Weblog