Mohon Tunggu Proses Memuat Konten Halaman

ADVERTISEMENT

Terbaru

27
Tgl. 26 Agustus 2012

Cara Membuat Menu Mendatar Di Atas Widget Attribution Dalam Area Footer Halaman Blog

Secara default, Blogger menyediakan sebuah widget ‘Laman’ yang dapat digunakan untuk menampilkan laman mandiri pada sebuah blog dalam bent...

ELTELU - Menu Horizontal Pada Footer Blog Versi Web
Secara default, Blogger menyediakan sebuah widget ‘Laman’ yang dapat digunakan untuk menampilkan laman mandiri pada sebuah blog dalam bentuk tab menu horizontal seperti yang tampak di bawah bagian header blog ini. Namun dengan berbagai alasan dan tujuan, tidak sedikit pengelola blog yang lebih memilih menggunakan menu horizontal kustom daripada memakai widget ‘Laman’ yang sebenarnya juga dapat dimodifikasi sedemikian rupa sehingga sesuai dengan keinginan kita. Sebagai contoh misalnya adalah penambahan pull-down menu pada tab menu standar Blogger, seperti yang saya uraikan dalam artikel dengan judul “Cara Menambahkan Sub Menu (Pull Down Menu) Pada Tab Menu Horizontal Standar Blogger”.

Widget ‘Laman’ sebagai menu navigasi pada blog, secara default hanya tersedia satu buah. Sehingga apabila widget tersebut telah ditambahkan pada blog, maka kita tidak lagi dapat menambahkan menu navigasi baru terkecuali dengan memanfaatkan menu kustom.

Berbicara mengenai menu kustom pada blog, tentu Anda pernah mendapati sebuah blog yang memiliki daftar menu tersendiri di area footer seperti yang tampak pada gambar di atas. Menu navigasi dalam area footer halaman seperti yang tampak pada gambar di atas, dapat dengan mudah kita jumpai pada blog yang menggunakan kustom template. Hal ini disebabkan karena pada kustom template telah dilakukan modifikasi widget atribusi yang salah satunya dimaksudkan untuk menampilkan atribusi untuk pembuat template yang dimaksud. Dan termasuk diantaranya adalah kustomisasi dengan melakukan penambahan menu horizontal di area footer atau di area attribution widget.

Nah, yang menjadi pertanyaan sekarang adalah apakah hal yang demikian dapat dilakukan pada template standar Blogger? Jawabannya adalah dapat. Lantas bagaimana cara melakukannya? Jadi begini, jika pada umumnya untuk keperluan ini dilakukan dengan cara menghapus attribution widget dan kemudian menggantinya dengan widget HTML/JavaScript sebagai penggantinya, maka bisa jadi yang saya uraikan dalam artikel ini berbeda dengan penggunaan cara tersebut karena dalam penerapannya tidak dilakukan penghapusan pada widget atribusi sama sekali, melainkan langsung menambahkan menu navigasi baru diatasnya. Dimana untuk mengimplementasikannya 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:skin> dan kemudian sisipkan kode berikut ini tepat di atasnya.
table.section-columns {
  margin-bottom: 20px;
}

.foot.section .widget {
  margin-top:0px;
}

.foot.section .widget.Attribution .widget-content {
  padding: 0px; margin: 0px; height: auto;
  border: none; box-shadow: none; 
  border-radius: 0px; background: inherit;
}

Keterangan:
Kode tersebut digunakan untuk mengatur jarak tabel dan widget yang terdapat di area footer dan apabila jarak yang dihasilkan belum sesuai dengan desain halaman blog Anda, maka silakan dilakukan kustomisasi.

Ketiga, cari kode <!-- outside of the include in order to lock Attribution widget –> dan kemudian sisipkan rangkaian kode dengan format berikut ini tepat di atasnya.
<b:if cond='data:blog.isMobile'>
  <div style='text-align: center;'>
    <a href='URL'>Menu 1</a>
    | 
    <a href='URL'>Menu 2</a>
    |
    <a href='URL'>Menu 3</a>
  </div>
<b:else/>
  <div style='text-align: center;'>
    <a href='URL'>Menu 1</a>
    | 
    <a href='URL'>Menu 2</a>
    |
    <a href='URL'>Menu 3</a>
  </div>
</b:if>

Keterangan:
Pertama, rangkaian kode yang terletak di antara <b:if cond='data:blog.isMobile'> dan <b:else/> digunakan untuk membuat menu mendatar di atas widget attribution untuk tampilan halaman blog versi seluler. Dimana menu yang terbentuk oleh rangkaian kode tersebut hanya akan ditampilkan apabila setelan template seluler yang digunakan adalah ‘Tersesuai (Custom)’.
Kedua, rangkaian kode yang terletak di antara <b:else/> dan </b:if> digunakan untuk membuat menu mendatar di atas widget attribution untuk tampilan halaman blog versi web.
Ketiga, ganti URL sesuai dengan URL laman atau artikel yang akan dijadikan sebagai menu horizontal dalam area footer.
Keempat, ganti Menu 1, Menu 2, Menu 3 sesuai dengan nama menu yang akan ditampilkan.
Kelima, apabila jumlah menu yang akan ditampilkan lebih dari 3 buah, maka Anda dapat menambahkan kode | dan <a href='URL'>Nama Menu</a> (seperti yang tampak pada contoh rangkaian kode di atas) secara berulang di bawah menu yang terakhir.

Keempat, simpan template.

Dengan demikian maka Anda tidak perlu lagi menghapus wdiget atribusi dan kemudian menambahkan widget HTML/JavaScript apabila ingin menambahkan menu navigasi di area footer halaman blog.

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 27 komentar pada artikel ini ▶
26/08/12 09.45 O

Bagus yang ini sobat, wah baru tahu saya ternyata bisa dibuat seperti ini juga, bisa menghemat tempat dan menambahkan url link yang kita inginkan ya sobat? keren, pingin belajar banyak dari blog ini. Trima kasih dan salam sukses

26/08/12 10.31 O

wah lama tak keliatan sob,ditunggu tutor memasang emoticon di colom comentar.hehe

28/08/12 23.18 O

@Kraeng FranciscoTentu saja bisa Sob. Itulah sebabnya dalam artikel sebelumnya saya berpendapat bahwa template standar Blogger merupakan template terbaik yang pernah ada.

28/08/12 23.25 O

@annash mobilepcHe heee... Iya Sob. Maklumlah, karena kesibukan hari raya Idul Fitri sehingga akhirnya tidak bisa ngeblog sama sekali.

Dan bahkan untuk saat ini saja, sepertinya saya juga belum bisa seaktif sebelumnya.

Oh ya, mengenai cara memasang emoticon di kolom komentar, setahu saya sudah banyak kok tutorialnya. Coba deh Sobat cari memakai mesin telusur.

12/09/12 12.01 O

kok gak muncul sobat...???

12/09/12 15.31 O

@Soekarno FatmawatiTadi sudah saya cek dan sepertinya Sobat telah berhasil mengimplementasikan teknik dalam artikel ini. :)

Anonim
15/09/12 12.05 O

kunjungan balik gan,,,
sip ini gan tutorialnya,,,
kapan2 boleh dicoba,,,
terima kasih gan,,

15/09/12 16.05 O

@karimalaminTerimakasih Sobat. Dan silakan apabila hendak mengimplementasikan teknik tersebut.

Anonim
28/09/12 14.23 O

kalo mau bikin yang begini gimana mas...??

© 2011-2012 Semar Bingung.

29/09/12 02.54 O

@Limit PostSobat dapat melakukannya dengan mengedit widget attribution melalui menu layout (tata letak).

Anonim
29/09/12 11.20 O

@AYAHE MELAoalah cuman begitu toh hahaha lupa saya caranya kirain harus ngedit template lagi :D

05/12/12 23.33 O

ihihhihi .. emang keren banget artikelnya .. saya simpan dulu, mungkin besok atau lusa baru saya kerjakan ,,

terimakasih dan salam

06/12/12 09.48 O

@bu punsuSilakan dan terimakasih balik Sob... :)

16/04/13 06.20 O

Permisi mas mau tanya, cara agar menu mendatarnya footer bisa diterapkan di bawah Head Blog nya seperti apa mas?
Apakah bisa?
Terimakasih sebelumnya.

18/04/13 22.28 O

@Sandi MetalandBisa saja Sob, karena secara teknis sebenarnya sama. Hanya saja penempatan yang berbeda. Akan tetapi untuk keperluan tersebut paling tidak kita memang mesti memahami id atau class yang terdapat dalam template yang kita gunakan.

08/05/16 12.51 O

Thanks.
Tutorial yang sangat membantu..

09/05/16 15.58 O

@Info Tips Saya juga berharap begitu Sob. Terimakasih pula atas komentarnya untuk ulasan ini.

01/06/16 15.07 O

berhasil.... terimakasih ya.

01/06/16 21.17 O

@Zainal Mutaqin Syukurlah kalau begitu. Sama-sama Sob.

26/04/17 22.57 O

sangat bagus blognya gan,, mohon pencerahan menghilangkan subscribe post atom . di di http://bonsaibanyumas.blogspot.com maaf masih pemula

23/05/17 10.14 O

@Iwan PriyonoSebaiknya lakukan uji coba untuk menghilangkannya Bang. Sebab masing-masing template itu kan memiliki karakteristik yang berbeda. Oleh sebab itu saya tidak bisa menjawabnya. Maaf.

23/11/17 08.12 O

thanks gan work 100%

dedelw.blogspot.com

23/11/17 20.44 O

@NakGileBaguslah kalau begitu... 😃

30/11/17 15.10 O

Terimakasih infonya, langsung saya terapin di blog

30/11/17 15.39 O

@dodoiDDTWaaah, iya Bang... 😃 Trus gimana Bang? Berhasil gak? 🤔

17/04/20 09.23 O

salam,
saya masih pemula, mau bertanya, bisakah tabs page di footer blog di buat horizontal tanpa edit html, atau ada pengturan lewat atur gadget saja, saya ingin tabs saya mendatar di footer sbgaimana di motivasiibadah.com..trims

19/04/20 11.53 O

@zaharuddinUntuk membuat menu model seperti itu, saya rasa tetap diperlukan adanya edit HTML, Bang.

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