Jumat, 13 Februari 2015

Membuat Tampilan Layout Blogger (Blogspot) Berwarna

Membuat Tampilan Layout Blogger (Blogspot) Berwarna - Salah satu kelebihan dari platform Blogger atau Blogspot adalah mudahnya di edit sesuka hati, diobok-obok sampai bingung sendiri. Dan salah satu hasil obok-obok Blogger hari ini, kita bisa mengganti tampilan layout blogger atau Tata Letak Blogger menjadi lebih menarik dan tidak membosankan dengan cara membuat tampilan layout (tata letak) blogger atau blogspot menjadi berwarna seperti pelangi dan hasilnya bisa dilihat pada tampilan gambar berikut ini

Membuat Tampilan Layout Blogger (Blogspot) Berwarna

Dan bandingkan dengan tampilan Layout Blogger yang tidak berwarna berikut ini yang merupakan tampilan awal dari gambar diatas

Membuat Tampilan Layout Blogger (Blogspot) Berwarna

Jika Anda tertarik untuk mengganti tampilan Layout (Tata Letak) Blogger seperti gambar pertama diatas yaitu membuat tampilan layout blogspot menjadi berwarna maka yang perlu dipersiapkan pertama kali adalah Anda harus punya blog di Blogger, setelah itu mengetahui letak Layout Blogger tersebut. Letak layout blogger berada di halaman dashboard akun Blogger Anda, perhatikan gambar pertama diatas, ada menu deretan vertikal pada bagian sebelah kiri, pada gambar menu Layout berwarna oranye. Layout adalah menu halaman tata letak blogger yang digunakan untuk mengatur dan menambahkan widget kedalam blog

Membuat Tampilan Layout Blogger (Blogspot) Berwarna
Untuk membuat tampilan layout blogger tersebut menjadi berwarna, yang wajib diperhatikan adalah struktur kode CSS dari kode template blog yang Anda gunakan karena tidak semua kode CSS template blog memiliki struktur kode yang sama. Pada contoh gambar diatas merupakan salah satu blog saya yang diganti tampilan layoutnya, struktur blog saya tersebut menggunakan kode CSS dasar dari sebuah template blog. Anda bisa melihat kode CSS template blog saya tersebut di view-source:neuwindow.blogspot.com jadi kode CSS template dasar yang saya gunakan adalah sebagai berikut:

#header-wrapper{..} /* dan beberapa kode pengikut didalamnya seperti tag id #header, #header-right. #header-left dan #menu
#outer-wrapper{..} /* pembungkus bagian body artikel yang bisa meliputi #header-wrapper sampai #footer
#content-wrapper{..} /* pembungkus bagian body artikel yang bisa meliputi #main-wrapper sampai #sidebar-wrapper
#main-wrapper{..} /* pembungkus bagian konten artikel yang meliputi tag .post sampai dengan tag .comments
#kotak-sidebar{..} /* pembungkus bagian widget disisi kanan blog, bisa disebut juga dengan tag #sidebar-wrapper
#footer{..}
/* pembungkus bagian footer termasuk copyright

Sedangkan pada halaman Tata Letak (Layout) Blogger, sebagai kode dasarnya menggunakan tag kode CSS dengan id #layout
Sehingga untuk mengganti warna background halaman Tata Letak Blogger adalah menggunakan kode CSS berikut ini:

#layout {background:#88c354!important;} /*menghasilkan background warna hijau seperti contoh gambar diatas
Kenapa menggunakan !important, silahkan baca di kode !important di CSS

Mengganti warna widget header (Judul Blog) di halaman tata letak (layout) Blogger
Jika header blog Anda terbagi menjadi dua (seperti contoh gambar diatas) kanan dan kiri, maka akan memiliki dua struktur kode css untuk header yaitu tag #header atau #header-left yang membentuk sisi kiri header dan biasanya ditempati judul blog dan tag #header-right yang biasanya digunakan untuk tempat iklan atau widget lainnya
Untuk mengganti warna widget pada header blog maka gunakan kode CSS berikut ini:

#layout #header .widget-content {
color: #fff;
background: #d50ae2;
}


Mengganti warna widget header sisi kanan (biasanya widget Iklan) di halaman tata letak (layout) Blogger
#layout #header-right .add_widget {
background: #f98f48!important;
}


Mengganti warna widget Menu di halaman tata letak (layout) Blogger
#layout #menu {
width: 100%;
height: 70px;
background:#66666;
}


Mengganti warna widget Posting Blog di halaman tata letak (layout) Blogger
#layout .main .locked-widget .widget-content {
color: #000000;
background: #f4c649!important;
}


Mengganti warna widget sidebar di halaman tata letak (layout) Blogger
Pada bagian sidebar ini, saya menggunakan tiga kode css untuk mengganti warna pada widgetnya yaitu sidebar yang sudah terdapat widget dan belum (lihat gambar diatas):
  • Warna untuk background sidebar:
    #layout .sidebar {
    background:#fb8f3d;
    }
  • Warna untuk Add Widget
    #layout #kotak-sidebar .add_widget {
    background: #057199 !important;
    }
    #layout #kotak-sidebar .add_widget a {
    color: #ffffff!important;
    }

    tag #kotak-sidebar sama dengan #sidebar-wrapper
  • Warna untuk yang sudah ada widgetnya
    #layout .sidebar .widget-content {
    background: #dc5e4b;
    color: #ffffff;
    }
Mengganti warna widget footer di halaman tata letak (layout) Blogger
Pada contoh gambar diatas, saya tidak melakukan pergantian warna pada bagian footer, jika Anda ingin mengganti warna widget footer juga, silahkan gunakan kode CSS berikut ini dan isi value sesuai dengan keinginan anda
#layout #footer-wrapper {}
#layout #footer {}


Mengganti tombol Edit di halaman tata letak (layout) Blogger
Untuk mengganti tombol Edit seperti contoh gambar diatas, gunakan kode CSS berikut ini:
.editlink {
height: 35px;
line-height: 35px;
bottom: 10px;
border: 1px solid;
padding:0 10px;
color:#ffffff!important
}


Untuk menggnati tombol Edit pada header dan sidebar, gunakan kode CSS berikut ini:
#layout .sidebar .widget-content .editlink, #layout #header .widget-content .editlink {
height:35px;
line-height: 35px;
bottom: 10px;
border: 1px solid;
padding: 0 10px;
color: #ffffff!important;
}


Untuk mengganti tombol Edit pada Potingan Blog dengan tombol Edit pindah ke pojok kanan atas seperti contoh gambar, gunakan kode berikut ini:
#layout .main .locked-widget .widget-content .editlink {
height: 35px;
line-height: 35px;
top: 10px;
border: 1px solid;
padding: 0 10px;
color: #ffffff!important;
}


Jika kode CSS disatukan maka akan menghasilkan kode CSS untuk layout (Tata Letak) Blogger seperti berikut ini:
#layout {
background: #88c354!important;
}
#layout #header .widget-content {
color: #fff;
background: #d50ae2;
}
#layout #header-right .add_widget {
background: #f98f48!important;
}
#layout #menu {
width: 100%;
height: 70px;
background:#66666;
}
#layout .main .locked-widget .widget-content {
color: #000;
background: #f4c649!important;
}
#layout .sidebar {
background:#fb8f3d;
}
#layout #kotak-sidebar .add_widget {
background: #057199 !important;
}
#layout #kotak-sidebar .add_widget a {
color:#fff!important;
}
#layout .sidebar .widget-content .editlink, #layout #header .widget-content .editlink {
height:35px;
line-height: 35px;
bottom: 10px;
border: 1px solid;
padding: 0 10px;
color: #ffffff!important;
}
#layout .main .locked-widget .widget-content .editlink {
height: 35px;
line-height: 35px;
top: 10px;
border: 1px solid;
padding: 0 10px;
color: #ffffff!important;
}
#layout #footer-wrapper {}
#layout #footer {}


Untuk menerapkannya kedalam blog, silahkan salin kode berikut ini setelah atau dibawah kode ]]></b:skin> atau bisa juga </style>
<b:template-skin>
<![CDATA[
#layout {
background: #88c354!important;
}
#layout #header .widget-content {
color: #fff;
background: #d50ae2;
}
#layout #header-right .add_widget {
background: #f98f48!important;
}
#layout #menu {
width: 100%;
height: 70px;
background:#66666;
}
#layout .main .locked-widget .widget-content {
color: #000;
background: #f4c649!important;
}
#layout .sidebar {
background:#fb8f3d;
}
#layout #kotak-sidebar .add_widget {
background: #057199 !important;
}
#layout #kotak-sidebar .add_widget a {
color:#fff!important;
}
#layout .sidebar .widget-content .editlink, #layout #header .widget-content .editlink {
height:35px;
line-height: 35px;
bottom: 10px;
border: 1px solid;
padding: 0 10px;
color: #ffffff!important;
}
#layout .main .locked-widget .widget-content .editlink {
height: 35px;
line-height: 35px;
top: 10px;
border: 1px solid;
padding: 0 10px;
color: #ffffff!important;
}
#layout #footer-wrapper {}
#layout #footer {}
]]>
</b:template-skin>


Sebelum menerapkan kode diatas, perhatikan struktur kode CSS template blog Anda, kode diatas adalah kode dasar dan umum digunakan pada semua template blog. Jika kode diatas tidak ada didalam template blog Anda berarti kodenya lain, silahkan atur dan sesuaikan sendiri. Sedangkan untuk kode CSS Layout Blogger, semuanya memiliki kode yang sama. Dan jika masih belum paham silahkan tinggalkan komentar Anda di artikel ini, Membuat tampilan Layout (Tata Letak) Blogger (Blogspot) berwarna. Terimakasih

Membuat Tampilan Layout Blogger (Blogspot) Berwarna Rating: 4.5 Diposkan Oleh: ana sriwahyuni

52 komentar:

  1. Bagus-bagus dan kreatif,,, ijin mencoba sobat....

    BalasHapus
    Balasan
    1. silahkan mas dan semoga berhasil.. :)

      Hapus
  2. Beneran deh kalau ngomongin masalah template, layout dll aku paling nggak paham tapi pengen blognya bagus heee. Jadi dari artikel-artikel seperti ini aku jadi sedikit bisa, walau masih mengandalkan saudara untuk mengedit dll :-)

    BalasHapus
    Balasan
    1. mari mas kita belajar bersama agar lebih mudah dikerjakan :)

      Hapus
  3. bagus mba elok sekali, harus bandingin dulu letak css nya ya mba supaya sama, apakah tampilan luarnya tak terpengaruh ? terima kasih..

    BalasHapus
    Balasan
    1. iya mbak harus disesuaikan terlebih dahulu..
      tidak ada pengaruhnya mbak karena sudah menggunakan kode css dari layout blogger tersebut..

      Hapus
  4. kalau udah berwarna warni gini, saya malah betah nongkrong di dasbor aja deh mbk. hehee

    BalasHapus
    Balasan
    1. hehehee... gak update-update kalau seperti itu mas...

      Hapus
  5. untuk penulisan #layout #header apakah tidak perlu di pisahkan dengan koma mbak...terus titik penegasnya hanya perlu menambahkan #layout dan important dalam deklarasi perbagiannya aja kan mbak? mohon pencerahan?

    oh ya saya mengucapkan terima kasih atas link LICEcapnya...akhirnya bisa pakai juga buat diposting dan kayaknya tambah menarik...ok terima kasih banyak ya mbak ana...dan semoga mendapat kebaikan dunia akhirat atas ilmunya. salam sahabat blogger.

    BalasHapus
    Balasan
    1. tidak perlu mas, kecuali ada dua tag dengan kode yang sama maka perlu dipisahkan dengan tanda koma
      penggunaan #layout juga bisa ditulis dengan body#layout
      penggunaan !important hanya sebagai penegasan kalau kode dengan !important itulah yang digunakan
      penggunaan !important karena ada kode dasar yang sudah ada, sehingga akan ditindih dengan kode yang memiliki !important

      aamiin, makasih banyak mas...

      Hapus
    2. waduh udah pada jago masalah bahasa HTML nih, jadi ngiri nih saya :D
      sy gk terlalu bisa apa2 kalo masalah ini!

      Hapus
    3. saya juga masih belajar mas... yuk belajar bersama..

      Hapus
  6. saya BM dulu untuk dipelajari mbak,soalnya banyak banget jeh..
    ini mau nyiapin kopi dulu sambil membaca pelan2

    BalasHapus
    Balasan
    1. silahkan mas Yanto, semoga berhasil membuat kopinya :)

      Hapus
    2. itu mah kerjaan saya mbak
      emang mau dibuatin?

      Hapus
  7. Bener mbak, jadi lebih keliat fresh ya tampilannya, bisa di isi warna suka2 kita :)

    BalasHapus
    Balasan
    1. iya mbak Susi, bisa di coba di blognya mbak Susi ya..

      Hapus
  8. Hasilnya cukup menarik bisa bikin betah melototin dashboard tapi lihat kodenya jadi nyut-nyutan kepala.Kapan-kapan kalau ada waktu luang cobain ah,,,

    BalasHapus
    Balasan
    1. jangan diplototin terus mas, nanti tambah nyut-nyutan loh...

      Hapus
  9. sangat menarik dan membuat mata kita saat mengelola menjadi tidak akan measa jenuh, jika tampilan lauout dari blog kesayangan kita berbeda warna, seperti yang telah dijabarkan.
    keren deh ih

    BalasHapus
    Balasan
    1. silahkan dicoba mas Thea, pasti tampilannya jadi menarik....

      Hapus
    2. sudah tak pasang diblog baru saya ngga ada masalah justru mata saya jadi berbinar-binar setelah mengelola template dengan warna yang berbeda ini kak.
      kakak hebat deh ih...:D

      Hapus
  10. ternyata layout bisa ditambah warna background juga ya mbak.
    Jadi lebih fresh dan warnanya tidak monoton lagi..
    aku coba utak-atik di blog percobaanku dulu mbak. Sekalian belajar, hehehe .. Makasih triknya..

    BalasHapus
    Balasan
    1. nah betul mas, lebih baik dicoba di blog percobaan dulu, kalau berhasil bisa diterapkan ke semua blog :)

      Hapus
  11. keren nih mbak ana. baru tau juga saya nich ternyata layout bisa di edit warnanya, kalau yang suka warna pelangi boleh tuh di coba. ayo-ayo. saya masih pusing dengan kode beginian mbak, nanti tak pelajari lagi.

    BalasHapus
    Balasan
    1. iya mas, silahkan di coba kalau tertarik.. keren kok :)

      Hapus
  12. Wah, saya gaptek nih...baru tahu sekarang kalo tata letak bisa dikasih warna. makasih banyak infonya mbak :)

    BalasHapus
    Balasan
    1. sama-sama mas,, yuk dipraktekin mas.. :)

      Hapus
  13. selamat Pagi Mba,sepertinya terlihat lebih menarik ya jika tampilan layout blogger berwarna,tapi apa tidak membuat lambat Blog Mba setelah mengubah tampilan layout bloggernya ?

    BalasHapus
    Balasan
    1. tidak mas, penggunaan kode CSSnya juga sedikit dan tidak mempengaruhi loading blog..

      Hapus
  14. kayaknya memang ahli di dunia temlate nih mbak. tapi saya suka yang default deh soalnya udah terbiasa , salam kenal

    BalasHapus
    Balasan
    1. pilihan ada di mas Sabda,, memang sederhana lebih bagus terlihat.. saya masih tahap belajar mas, bukan ahli

      Hapus
  15. Mbak anak pintar amat dalam mendesaign halaman blog/website nih :D, pastinya ini akan sangat mencolok lagi untuk tampilannya ya mbak, ijin bookmarkl dulu deh mbak . . .

    BalasHapus
    Balasan
    1. hayoo siapa yang bilang saya anak pintar? nanti tak kasih permen loh :D

      Hapus
  16. nice info mba,cuman kayanya terlalu rame kalo dibikin warna-warni gtu.hehe

    BalasHapus
    Balasan
    1. salah satu tujuannya seperti itu mas, biar rame dengan warna dan bisa jadi akan membuat bingung juga heheee..

      Hapus
  17. Lah saya baru tau kalo layout bisa di edit juga, Kirain udah bawaan blog, gak bisa dirubah... Mba ana bisa aja otak atik templatenya,, pas banget dengan nama webnya.. Pandai otak atik template...

    BalasHapus
    Balasan
    1. hehee jadi malu saya mas, jangan gitu ah itu berlebihan namanya :)

      Hapus
  18. keren ya bisa warna-warni gitu ... ini akan mempunyai nilai lebih dengan blog lain, asal penempatan warnanya yang tepat saja ...

    BalasHapus
    Balasan
    1. kalau dibandingkan dengan blog lain bisa jadi seperti mas, lebih keren, masalahnya apa yang dibuat hanya bisa dinikmati sendiri :)

      Hapus
  19. Jadi warna-warni gitu, anak saya pasti senang nih. Hehehe.
    Baru tau kalo halaman ini bisa diedit juga..

    BalasHapus
    Balasan
    1. sebenarnya sudah lama mas, namun baru saya update.. :)
      salam hangat buat buah hatinya mas.. :)

      Hapus
  20. bisa jadi berwarna gitu mba, jadi seger nggak monoton, patut dicoba neh

    BalasHapus
    Balasan
    1. silahkan di coba mas, semoga bisa memberikan warna yang menyenangkan dan menambah semangat dalam ngblog

      Hapus
  21. Aiiih jadi warna warni, ponakan saya basti betah main-main di dapor blog saya nantinya hehe

    BalasHapus
    Balasan
    1. yang penting tetap dijaga mas, jangan sampai blognya ke deleted loh.. :)

      Hapus
  22. mantap banget ya mbak kalo tampilan layout nya seperti ini,, keren sekali,, maklum lah mbak,, saya kan masih newbie...hehehe

    BalasHapus
    Balasan
    1. sama mas Wicky, saya juga masih pemula kok, saya masih belajar..

      Hapus
  23. akhirnya bisa juga saya menarapkan membuat tampilan layout blogger berwarna...jadi meriah mbak heee....makasih ya ilmunya...

    BalasHapus
    Balasan
    1. hehee.. terimakasih banyak atas testimoninya mas.. :)

      Hapus
  24. sangat menarik dan atraktif mbak ana.
    ijin mencobanya ya...

    BalasHapus
    Balasan
    1. silahkan mbak Wiwi, semoga berhasil ya :) saya tunggu testimoninya juga.. :)

      Hapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia