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 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.

Sumber: http://eltelu.blogspot.com/2012/08/cara-membuat-menu-mendatar-di-atas.html#ixzz2F2VUMbKw