Styling Menu Thesis Ver.2 Rock!

on 15 Aug 2012

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="http://2.bp.blogspot.com/-Wa_i_AXZHOo/UCwKF1CzzVI/AAAAAAAAB9c/BMamGLN0o2c/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

5

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

  1. salam kenal pa cie, macam mana buat footer mesra seo. Di versi 2 rock tidak ditemukan. Mohon cek lah

    ReplyDelete
    Replies
    1. 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.

      Delete
  2. Mcm mana nak pindahkan share button di bawah post tu ke bahagian atas selepas Post title.?

    ReplyDelete
    Replies
    1. 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/>

      Delete
  3. letak icon HOME yg baru.......baru nampak hensem :)

    ReplyDelete
  4. menarik tp sy dh buang tab menu dkt atas tue, hehehehee

    ReplyDelete

Spamming will report.