Styling Menu Thesis Ver.2 Rock!

Bagi sebahagian pengguna template thesis for blogspot Thesis Ver.2 Rock!, horizontal menu dapat diberi sedikit gaya dengan merubah menu "Home" menjadi icon "Home". Perubahan ini sebenarnya tidaklah mempengaruhi penampilan dari Template Thesis For Blogspot ini, namun icon yang akan ditampilkan akan terlihat kecil karena ukuran horizontal menu yang tidak besar :D

Begitu juga halnya dengan styling fixed menuhorizontal thesis, mungkin pada browser Firefox dan Chrome akan terlihat indah dan rapi dan pada browser lainnya belum tentu akan tersusun indah.

Akan tetapi jika pengguna setia template thesis ingin merubahnya dan memberikan sedikit sentuhan gaya, Kami akan mempersembahkan tutor sederhana ini.

Home Icon Pada Menu Thesis For Blogspot

Untuk merubah menu Home menjadi icon Home, silahkan ikuti trik ini:
1. Edit template dan expand
2. Cari dengan Ctrl+F kode:

<li><a expr:href='data:blog.homepageUrl' style='border-left:1px solid #cccccc;'>HOME</a></li>

 3. Replace dengan kode:

<li><a expr:href='data:blog.homepageUrl' style='border-left:1px solid #cccccc;'><img title="HOME" alt="HOME" style="width:11px;height:11px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSUMJnpPKR-N_BrzucrjTqA2y_cNc9uaP_iF8TK8mKAHvGDnp0Vp4IUHvT35iUVhRo2Xq-XJDxUhB5VAWp8trQnw341yCR1QOe1k_u1elxLVhiBVxnibfgKU3nL9oI71-sjmekCYwF7ICD/s1600/home-icon-16x16.png"/></a></li>

4. Preview dan jika berhasil, Save perubahan yang telah dilakukan. 

Fixed Style Menu Thesis For Blogspot

Untuk membuat menu horizontal menjadi fixed style (mengikuti scrolling pada browser), silahkan ikuti trik ini:
1. Edit template dan expand
2. Cari dengan Ctrl+F kode ]]></b:skin>
3. Letakkan kode css ini diatasnya:

.menuhorizontal{position:fixed;top:0;background:#ccc;margin-left:15px;margin-top:-20px;}
.menuhorizontal li a{padding:20px 20px 10px 10px;} 
#head{margin-top:32px;}

4. Preview dan jika berhasil, Save perubahan yang telah dilakukan.

Selamat mencoba :D

Ranking: 5