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/AVvXsEj-qEYNmUx5ccKHynOMqxmQWKZHWeUYiCJYcQB-EnnHLMnjpIi5ospE__Ry9IKXqpDUi94u87RSQw_vWwIxh8yFMTLEJ2ebFFvUFULryNExfIBlmq3rCFw8ZAZhbyaihuFlUHJ6W4Ud3hvr/s1600/home-icon-16x16.png"/></a></li>

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

Home Icon In Thesis For Blogspot

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

{ 8 comments.. read them below or add one }

ayam kampung ayam kampung August 18, 2012
salam kenal pa cie, macam mana buat footer mesra seo. Di versi 2 rock tidak ditemukan. Mohon cek lah
Mus Lim Mus Lim August 20, 2012
Untuk template thesisforblogger V2 ini memang tidak disertakan widget pada footer-nya, Pak. Template ini didesain agar mirip seperti template thesis pada Wordpress.

Walau tidak ada widget footer, dijamin template ini bagus untuk dijadikan template blog/website bisnis Ayam Kampung yang Bapak kelola.
Anonymous Anonymous August 23, 2012
Mcm mana nak pindahkan share button di bawah post tu ke bahagian atas selepas Post title.?
Mus Lim Mus Lim August 28, 2012
Apa alasan saudara sehingga nak memindahkan share button tu? heheheh ... :)

caranya mudah saja:

temukan kode ini:
< div style='height:15px; border-top:1px solid #ccc; padding:15px 0px 0px 0px;margin:10px 0 0px 0;'>
< g:plusone size='medium'/>
< div style='float:right;'>
< span class='st_google_hcount' displayText='Google'/>< span class='st_linkedin_hcount' displayText='LinkedIn'/>< span class='st_facebook_hcount' displayText='Facebook'/>< span class='st_sharethis_hcount' displayText='ShareThis'/>< /div>< /div>

cut kemudian paste tepat diatas < data:post.body/>
Unknown Unknown January 13, 2013
letak icon HOME yg baru.......baru nampak hensem :)
syazrin syazrin January 30, 2013
menarik tp sy dh buang tab menu dkt atas tue, hehehehee