Modifikasi Menu Tab Blogger Menjadi Tampilan Metro UI

Discussion in 'Blogger' started by wphoet, Jul 30, 2013.

  1. wphoet

    wphoet You'll Never Walk Alone

    Joined:
    Feb 19, 2013
    Messages:
    1,149
    Likes Received:
    142
    Trophy Points:
    63
    Google+:
    Ada yang pernah tau tampilan metro UI windows 8? Kalau ada yang belum pernah lihat, kira-kira tampilannya seperti pada gambar di bawah ini. Tampilan menu unik ini menjadi salah satu pembicaraan paling trend dikalangan desain web karena menu tampilannya yang sederhana dan colour full.

    [​IMG]

    Setelah dua hari saya mengumpulkan berbagai macam icon metro UI dan melakukan uji coba modifikasi menu tab pada blogger dengan meniru tampilan metro UI ini, akhirnya malam ini hasil testing dan oprek kanan oprek kiri code CSS saya membuahkan hasil menu tab blogger yang mengikuti tampilan menu metro UI. Cara yang saya gunakan disini sangat simple karena saya menggunakan sedikit penambahan code html pada template dan penambahan code CSS untuk mendesain tampilan metro UI ini pada template default blogger. Jadi yang saya gunakan disini adalah template default blogger, sedangkan template modifikasi orang lain yang biasa di share free pada situs-situs lain belum saya coba karena selain kita sendiri tidak paham dengan code yang dipakai pada html dan css mereka yang tidak sama dengan default blogger, kadang banyak juga yang di lock sehingga susah untuk di modifikasi.


    Ok, langsung saja saya jelaskan tahapannya untuk memulai modifikasi tampilan pada menu tab blogger ini menjadi tampilan menu metro UI.


    Mewarnai masing-masing menu tabs
    Seperti yang sudah kita ketahui, untuk mewarnai background menu tab biasanya kita hanya bisa melakukan single colour untuk mewarnainya, artinya settingan warna (dalam hal ini cuma satu warna) yang kita pakai berlaku untuk semua tab, sedangkan pada langkah pertama ini kita membutuhkan lebih dari beberapa warna untuk masing-masing tab pada blogger. Untuk melakukan hal tersebut kita perlu memodifikasi bebera html yang ada pada template.

    Pertama yaitu buka dashboard blogger >> pilih blog mana yang mau di edit (kalau punya lebih dari satu blog) >> klik menu template >> kemudian klik menu edit html dan cari kode berikut ini:


    Code:
    <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
    <b:else/>
    <li expr:class='data:link.title'><a expr:href='data:link.href'><data:link.title/></a></li>
    
    kalau sudah ketemu, silahkan di ganti dengan kode berikut ini:


    Code:
    <li expr:class='data:link.title + " selected"'><a expr:href='data:link.href'><data:link.title/></a></li>
    <b:else/>
    <li expr:class='data:link.title'><a expr:href='data:link.href'><data:link.title/></a></li>
    

    Setelah terpasang silahkan di save. Langkah selanjutnya yaitu menambahkan CSS untuk menu tab kita, caranya yaitu: masih pada dashboard blogger menu template silahkan klik costumize/sesuaikan >> advance/tingkat lanjut >> add css/tambahkan css, tampilan box untuk menambahkan CSS seperti ini:

    [​IMG]

    Kemudian masukkan css dengan format berikut ini kedalam box add CSS:


    Code:
    .PageList li.Nama Tab-nya a {Deklarasi CSS-nya}
    

    kira-kira contohnya seperti ini:


    Code:
    .PageList li.Beranda a {background-color: #FF8000;}
    
    .PageList li.Contact Us a {background-color: #eb0909;}
    


    Code:
    #FF8000
    
    dan
    Code:
    #eb0909
    
    adalah kode warna background yang akan dipakai, silahkan di sesuaikan buat masing-masing menu tabs page dan silahkan pilih warna kesukaan teman-teman, kalau masih bingung dengan kode warnanya bisa search disini buat acuannya : www.colorhexa.com

    Setelah selesai maka tampilan meu tabs kita akan tampak seperti ini:

    [​IMG]

    Jika tampilannya sudah seperti diatas, dimana masing-masing tab sudah mempunyai warna sendiri-sendiri, maka kita bisa melanjutkan ke langkah berikutnya.

    Merubah size box menu tabs

    Langkah selanjutnya yaitu merubah size box dari menu tabs ini, dimana jika kita melihat tampilan menu metro UI pada windows 8 memiliki ukuran box yang agak besar sehingga menu tabs pada blogger yang sudah kita warnai tadi harus ikut disesuaikan besarnya. Untuk memperbesar ukuran box ini caranya cukup mudah, silahkan tambahkan code css berikut ini :


    Code:
    .tabs-inner .PageList li a {padding-left:40px; padding-right:42.8px; padding-top:80px;}
    

    Silahkan angka-angka pada kode css diatas diganti sesuai ukuran yang Anda inginkan dan disesuaikan dengan lebar tampilan template kita. Kebetulan angka yang ada pada kode css tersebut merupakan angka-angka yang saya gunakan pada template saya sehingga menu tab-nya akan menjadi seperti ini:

    [​IMG]

    Menambahkan icon pada menu tabs

    Jika sudah berhasil merubah ukuran size box dari menu tabs tadi, sekarang saatnya menambahkan icon dari menu metro UI, kebetulan icon-icon ini beberapa hari lalu sudah saya kumpulkan dari beberapa situs penyedia icon dan sebagian kecil sudah saya upload di album picasa saya disini : https://picasaweb.google.com/106421813453893113093/MetroUiIconWindows8 kebetulan yang baru saya upload baru sebagian kecil saja karena yang lain masih saya edit lagi size-nya kemudian akan saya upload kembali di alamat url tersebut.

    Icon ini berbentuk transparan sehingga kalau di lihat di album tidak terlalu jelas tapi sudah saya namain satu-persatu jenis iconnya agar tidak bingung, jadi buat teman-teman yang mau melihat iconnya caranya silahkan pilih icon mana yang mau dilihat pada album kemudian pada icon gambar tersebut klik kanan dan copy url location-nya kemudian paste ke alamat browser untuk melihat lebih jelas karena backgroundnya akan berubah jadi hitam mengikuti google view image sehingga icon transparan dapat terlihat jelas. Contohnya seperti ini: https://lh6.googleusercontent.com/-rFkb1DEhnrM/UfaK1ZkCT1I/AAAAAAAAP64/9LY3UEzWjTU/s50/Games%2520alt%252050px.png

    Kembali pada topik pembahasan, untuk menambah icon gunakan css berikut yang ditambahkan pada deklarasi kode css yang pertama (tentang pewarnaan menu tabs diatas)


    Code:
    background: url(' url_image/icon yang dipilih ') no-repeat center;
    

    Contohnya kira-kira seperti ini jika digabungkan dengan css yang pertama:


    Code:
    .PageList li.Beranda a {background: url(' https://lh6.googleusercontent.com/-ZsqHoqj1JEU/UfaEyiZRSqI/AAAAAAAAP6Y/0a38caVBCh8/s50/home%252050px.png') no-repeat center; background-color: #2ca3e8; }
    

    Perlu diingat posisi penambahan css url icon sangat berpengaruh terhadap efek yang muncul pada menu tabs, jadi posisi yang benar css url ditambahkan di depan css warna, jangan sampai terbalik posisinya karena jika terbalik (css url dibelakang css warna) maka menu tabs ikut berubah menjadi transparan (warnanya hilang).

    Jika sudah berhasil menambahkan icon pada masing-masing menu tabs tersebut maka hasilnya akan tampak seperti ini:

    [​IMG]

    Silahkan mencoba dan bereksperimen pada blog masing-masing.

    Sumber & Demo : http://www.irmawan.me/2013/07/metro-ui-windows-8-pada-menu-tab-blogger.html
     
  2. cayun

    cayun Member

    Joined:
    Feb 5, 2013
    Messages:
    661
    Likes Received:
    27
    Trophy Points:
    28
    tadi udah nyoba di salah satu

    tadi udah nyoba di salah satu blog dan hasilnya memang keren, ditunggu icon" yg lainnya *bagus*
     
  3. wphoet

    wphoet You'll Never Walk Alone

    Joined:
    Feb 19, 2013
    Messages:
    1,149
    Likes Received:
    142
    Trophy Points:
    63
    Google+:
    update icon

    *bagus* iya nih icon yg lain lagi di edit dulu, dikecilin jadi 50px trs di compress biar lebih ringan, baru selesai icon awal yg pakai alphabet A masih ada banyak yg belum keedit. lumayan kriting juga nih jari edit satu2 *berkeringat* barusan saya tambahin 51 icon lagi, baru list A-B masih kurang bnyk *jail*
     
  4. ncang

    ncang Super Level

    Joined:
    Feb 7, 2013
    Messages:
    4,655
    Likes Received:
    761
    Trophy Points:
    113
    Google+:
    rajin banget bang @wphoet

    rajin banget bang @wphoet edit share template yg udah jadi ada gak :D
     
  5. wphoet

    wphoet You'll Never Walk Alone

    Joined:
    Feb 19, 2013
    Messages:
    1,149
    Likes Received:
    142
    Trophy Points:
    63
    Google+:
    ncang wrote:

    *ketawa4* yg udah jadi cuma dipakai sendiri *jail*
     
  6. Fahmi

    Fahmi Newbie

    Joined:
    Dec 5, 2012
    Messages:
    1,719
    Likes Received:
    159
    Trophy Points:
    63
    Google+:
    kenapa gk pakai fontawesome

    kenapa gk pakai fontawesome aja http://fontawesome.io/ cek contohnya disini @whpoet http://fontawesome.io/examples/
     
  7. wphoet

    wphoet You'll Never Walk Alone

    Joined:
    Feb 19, 2013
    Messages:
    1,149
    Likes Received:
    142
    Trophy Points:
    63
    Google+:
    Fahmi wrote:

    btw ini buat apanya ya? bingung *bingung* ditempatku keluar gambar cuma kotak-kotak doank, bingung cara pakainya *bingung* ini buat font ya?
    =============

    di edit dikit: ternyata sdh nongol, ini buat iconnya ya? *jail* maklum tadi koneksinya lagi lemot jadi keluarnya cuma kotak-kotak doank. *peace*
     
  8. Fahmi

    Fahmi Newbie

    Joined:
    Dec 5, 2012
    Messages:
    1,719
    Likes Received:
    159
    Trophy Points:
    63
    Google+:
    wphoet wrote:

    ini font icon, maksudnya format font tapi keluar hasilnya jadi icon contoh penggunaannya bisa diliat di webnya
    Code:
    <i class="icon-camera-retro"></i>
    
    akan menghasilkan gambar kamera, juga banyak gambar lainnya... kalau pakai blogspot load langsung ke free cdn bootstrap cdn http://www.bootstrapcdn.com/#tab_fontawesome
     
  9. wphoet

    wphoet You'll Never Walk Alone

    Joined:
    Feb 19, 2013
    Messages:
    1,149
    Likes Received:
    142
    Trophy Points:
    63
    Google+:
    Fahmi wrote:

    iya sdh bisa nongol gambarnya, tadi kotak-kotak doank soalnya koneksi lgi lelet *jail* btw ini icon-nya kalau dibuat warna putih gmn ya? apa ngikutin pengaturan warna yg ada di blogger *bingung* keren nih baru tau saya *jail*
     
  10. Fahmi

    Fahmi Newbie

    Joined:
    Dec 5, 2012
    Messages:
    1,719
    Likes Received:
    159
    Trophy Points:
    63
    Google+:
    wphoet wrote:

    warna sesuai color kan dia ngikut aslinya dari css blogger tuh
    bikin aja css class baru misalnya :

    Code:
    .putih {
    color: #ffffff;
    }
    
    nanti di tag nya dipasangin misal :

    Code:
    <i class="icon-camera-retro putih"></i>
    
    nah jadi deh warnanya putih :D
     
  11. wphoet

    wphoet You'll Never Walk Alone

    Joined:
    Feb 19, 2013
    Messages:
    1,149
    Likes Received:
    142
    Trophy Points:
    63
    Google+:
    @fahmi : ok... kyknya

    @fahmi : ok... *bagus* kyknya loadingnya lebih bagus ini ketimbang pakai gambar, ntar mau di utak-atik dulu *ketawa3* btw thnks pencerahannya *peace*
     
  12. Fahmi

    Fahmi Newbie

    Joined:
    Dec 5, 2012
    Messages:
    1,719
    Likes Received:
    159
    Trophy Points:
    63
    Google+:
    Ok deh

    Ok deh di utak atik dulu sampe pusing, nanti kalau sudah pusing eh bisa :D di shared deh :)
     
  13. wphoet

    wphoet You'll Never Walk Alone

    Joined:
    Feb 19, 2013
    Messages:
    1,149
    Likes Received:
    142
    Trophy Points:
    63
    Google+:
    Fahmi wrote:

    buat dipakai di CSS ternyata susah bngt, soalnya rata-rata contohnya pakai html i class, ketemu contoh css-nya disini http://astronautweb.co/snippet/font-awesome/ tapi tambah mumet soalnya pas di coba malah menu pageku jadi putih doank *pusing*
     
  14. Fahmi

    Fahmi Newbie

    Joined:
    Dec 5, 2012
    Messages:
    1,719
    Likes Received:
    159
    Trophy Points:
    63
    Google+:
    wphoet wrote:

    kalau gk mau ribet ya inline css ajah,, sedikit2 gpp lah :D
    Code:
    <i class="test class" style="color: #ffffff;"></i>
    
     
  15. wphoet

    wphoet You'll Never Walk Alone

    Joined:
    Feb 19, 2013
    Messages:
    1,149
    Likes Received:
    142
    Trophy Points:
    63
    Google+:
    @fahmi : iya nih masih

    @fahmi : *jail* iya nih masih berusaha pasang pakai css dulu, soalnya icon font awesome kebacanya font bukan image jadi mau lanjutin berpusing-pusing ria dulu sampai berhasil *jail* kala sdh putus asa baru pakai inline *ketawa3*
     
Loading...

Share This Page