![Gambar](http://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP0cgr6oK7QzPK_f1Dy1PiiDXe3eggTah0-XaCM_8BKtlSBFrcYy0PrhHj6HrmGP-rjHFwLqLWaUD8NBpilVWtarpjF2GO7Ba-tkLWBIyq5PUgPxjioldzdTdFFe0FJJY/s113/bungfrangki.jpg)
Oleh
Bungfrangki
·
![Cara Mewarnai Layout atau Tata Letak Blogger](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZxvo85Ecze2GLT8xWWkghg1g66SBvfuCYfwU5t0IhnbY2bMTLOkHodLaZLbTsspedP4kAROo9FCG-ns2rDIloShC_aXxiGPrR5FmRBFnt6W34uVrVmJtbwomveIBUZ8rF6_KcWPB2f99v/s1600/cara-mewarnai-layout-blogger.png)
Untuk memberi warna setiap section ataupun widget pada Layout Blogger/Blogspot, tidak bisa diterapkan pada jenis HTML5.
![Cara memberi warna setiap widget pada layout Blogger/Blogspot Cara memberi warna setiap widget pada layout Blogger/Blogspot](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZxvo85Ecze2GLT8xWWkghg1g66SBvfuCYfwU5t0IhnbY2bMTLOkHodLaZLbTsspedP4kAROo9FCG-ns2rDIloShC_aXxiGPrR5FmRBFnt6W34uVrVmJtbwomveIBUZ8rF6_KcWPB2f99v/s1600/cara-mewarnai-layout-blogger.png)
Salah satu ciri struktur HTML5 yang paling mencolok adalah, tulisan HTML ditulis dengan huruf kapital, baik dibagian pembuka dan penutupnya. Contoh seperti ini:
Syarat agar bisa mewarnai tampilan Layout/Tata Letak di Blogger, Anda harus ubah tulisan kode
Syarat selanjutnya ialah, kita harus menambahkan (atau mengganti) skin template, dengan yang seperti ini:
Nah, pada skin tersebut kita sudah bisa mewarnai section dan widget apa saja pada Layout.
Petunjuk mewarnai Layout kurang lebih bisa diterapkan seperti berikut ini:
Ingin mewarnai seluruh tampilan Layout/Tata Letak:
Jika ingin mewarnai section Layout/Tata Letak:
Atau
Atau
Atau
Jika ingin mewarnai setiap widget pada Layout/Tata Letak. Misalnya widget pada sidebar:
Sesuaikan tag ID atau Class ataupun selector di atas sesuai struktur template Anda.
Jika disatukan maka hasil penerapannya menjadi seperti ini:
Demikian tutorial tentang cara mempercantik tampilan layout/tata letak dengan memberi warna pada masing-masing section dan widget.
Semoga membantu dan selamat mencoba.
![Cara memberi warna setiap widget pada layout Blogger/Blogspot Cara memberi warna setiap widget pada layout Blogger/Blogspot](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZxvo85Ecze2GLT8xWWkghg1g66SBvfuCYfwU5t0IhnbY2bMTLOkHodLaZLbTsspedP4kAROo9FCG-ns2rDIloShC_aXxiGPrR5FmRBFnt6W34uVrVmJtbwomveIBUZ8rF6_KcWPB2f99v/s1600/cara-mewarnai-layout-blogger.png)
Salah satu ciri struktur HTML5 yang paling mencolok adalah, tulisan HTML ditulis dengan huruf kapital, baik dibagian pembuka dan penutupnya. Contoh seperti ini:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<title>Hello world!</title>
</head>
<body>
</body>
<HTML>
Syarat agar bisa mewarnai tampilan Layout/Tata Letak di Blogger, Anda harus ubah tulisan kode
<HTML>
(yang huruf kapital) tersebut menjadi huruf kecil. Sehingga pembukannya nampak seperti ini <html>
dan penutupnya seperti ini </html>
.Syarat selanjutnya ialah, kita harus menambahkan (atau mengganti) skin template, dengan yang seperti ini:
<b:template-skin>
<![CDATA[
// CSS Anda disini
]]></b:template-skin>
Nah, pada skin tersebut kita sudah bisa mewarnai section dan widget apa saja pada Layout.
Petunjuk mewarnai Layout kurang lebih bisa diterapkan seperti berikut ini:
Ingin mewarnai seluruh tampilan Layout/Tata Letak:
body#layout{background:#2469d8!important}
Jika ingin mewarnai section Layout/Tata Letak:
body#layout #content-wrapper{background-color:#673e7d}
Atau
body#layout #header-wrapper{background-color:#f442df}
Atau
body#layout #sidebar-wrapper{background-color:#f4416e}
Atau
body#layout #footer-wrapper{background-color:#d6634d}
Jika ingin mewarnai setiap widget pada Layout/Tata Letak. Misalnya widget pada sidebar:
#layout #sidebar-wrapper .widget-content{background:##5fd64d!important;border:none!important}
Sesuaikan tag ID atau Class ataupun selector di atas sesuai struktur template Anda.
Jika disatukan maka hasil penerapannya menjadi seperti ini:
<b:template-skin>
<![CDATA[
body#layout{background:#2469d8!important}
body#layout #content-wrapper{background-color:#673e7d}
body#layout #header-wrapper{background-color:#f442df}
body#layout #sidebar-wrapper{background-color:#f4416e}
body#layout #footer-wrapper{background-color:#d6634d}
#layout #sidebar-wrapper .widget-content{background:##5fd64d!important;border:none!important}
]]></b:template-skin>
Demikian tutorial tentang cara mempercantik tampilan layout/tata letak dengan memberi warna pada masing-masing section dan widget.
Semoga membantu dan selamat mencoba.
Baca Juga:
Share this
Posting Komentar
Komentar telah ditutup. Jika ada yang perlu disampaikan terkait konten ini, silahkan kirim pesan lewat laman kontak.