Senin, 17 September 2012

Cara mudah memasang Menu Blog di Bawah Header

 Assalamualaikum,wr.wb.....>Sahabat Semuanya,! Bakalan-Tlogorejo-City,Akan Berbagi Dengan Sampeyan-->>Sebelumnya perlu Kita Tau,Bahwa Dalam hidup terkadang kita mendapatkan,Banyak apa yang tidak kita inginkan,Tapi setelah kita mendapatkan apa yang kita inginkan,Terkadang tidak bisa membuat hidup kita lebih bahagia,Dan Mencari Teman Buatku Sangat Mudah,Dan berteman Adalah Suatu Hal Yang Sangat Istimewa,Tapi Teman Yang Sangat Istimewa Buatku Adalah Teman Yang Mau Menunjukkan Kesalahanku,,,Berbagi Sesama Adalah Hal yang Sangat Menyenangkan,,,Oleh Karena Itu Melalu Blog Sederhana ini,(Blognya Kuli Bangunan) Saya Akan Berbagi Artikel Atau Tulisan Yang Saya Tulis Sendiri Maupun Hasil Copas Dari Blog Sahabat-Sahabat Lainya...Karena Membaca Adalah Jendela Akhirat,,,, Sebelumnya saya Mohon Maaf Apabila Nanti Ada Tulisan Yang Kurang Berkenan Di hati Sahabat,,,,,,


 Kali Ini ! Bakalan-Tlogorejo-City --->> Akan berbagi Mengenai..>>

Cara mudah memasang Menu Blog di Bawah Header

Bagi rekan blogger yang menggunakan template yang belum difasilitasi dengan menu horisontal dibawah header pada blognya, berikut saya postkan bagaimana cara membuat menu tersebut. Fungsi dan kegunaan menu ini adalah agar memudahkan kita dalam menelusuri  semua isi yang terkandung didalam blog tersebut Yuk kita mulai...

Hal pertama yang harus dilakukan adalah login ke blogger > Layout/Tata Letak > Edit Html .
Selanjutnya Anda cari kode dibawah ini, untuk mempermudah pencarian silahkan gunakan CTRL+F 

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>
</div>

Anda ubah kode showaddelement='no' menjadi  showaddelement='yes' , kalau sudah klik simpan ya

Setelah yang pertama sudah disimpan, sekarang klik Page elements / Elemen Laman > Tambah Gadget > HTML/Javascript , copy kode dibawah ini,simpan dan letakan tepat dibawah header. 
<a href="http://bakalan-tlogorejo-city.blogspot.com/ " class="navigation">HOME</a>
<a href="http://bakalan-tlogorejo-city.blogspot.com/ " class="navigation">CONTACT</a>
<a href="http://bakalan-tlogorejo-city.blogspot.com/ " class="navigation">BUKU TAMU</a>
<a href="http://bakalan-tlogorejo-city.blogspot.com/ " class="navigation">FACEBOOK</a>
<a href="http://bakalan-tlogorejo-city.blogspot.com/ " class="navigation">TWITER</a>
<a href="http://bakalan-tlogorejo-city.blogspot.com/ " class="navigation">DOWNLOAD</a>
<a href="http://bakalan-tlogorejo-city.blogspot.com/ " class="navigation">LAIN-LAIN</a>
<a href="http://bakalan-tlogorejo-city.blogspot.com/ " class="navigation">CHATTING</a>

*Alamat url diatas silahkan sesuaikan dengan blog Anda.

Hal ketiga adalah supaya menu itu menimbulkan efek warna sehingga menjadi kelihatan menarik.

Klik Tata Letak > Edit HTML , cari kode </b:skin> , agar mudah gunakan tombol CTRL+F
Copy kode dibawah ini dan letakan tepat diatas kode  </b:skin> kemudian simpan.
a.navigation {
background: #3333ff ;
color: #ffffff;
margin: 1px;
padding: 2px;
border-width: 0;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
a.navigation:hover {
background: #333333;
color: #ffffff;
text-decoration: none;
}

Perhatikan kode yang berwarna biru adalah warna tombol dan efek hover dan bisa dirubah sesuka hati Anda.Dan yang berwarna hitam adalah jarak antara tombol satu dengan lainnya, silahkan Anda sesuaikan sesuai selera.
Selamat Mencoba...!!!
Selesai, semoga bermanfaat....

0 komentar:

Posting Komentar