Cara Mewarnai Layout atau Tata Letak Blogger

bungfrangki Tutorial Blog Cara Mewarnai Layout atau Tata Letak Blogger

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

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.