Blogger Comment : Contempo Style

Seperti artikel sebelumnya bahawa kita harus mengatur variable style untuk memasang komentar dengan gaya contempo, berikut ini adalah variable yang harus anda masukan dalam tag <b:skin version='1.3.0' /> beserta penjelasannya dan cara pasangnya

🍉 Full Code

<b:skin version='1.3.0'><![CDATA[
/*
<!-- Constants -->
<Group description="New Comment Required">
    <!-- Comment as dan warna teks -->
    <Variable name="body.text.color" description="Text Color" type="color" default="#000" value="#000000"/>
    <!-- Font Type --->
    <Variable name="body.text.font" description="2" type="font" default="normal normal 14px 'roboto', sans-serif" value="normal normal 1rem -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, &#39;Helvetica Neue&#39;, Arial, &#39;Noto Sans&#39;, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;, &#39;Noto Color Emoji&#39;"/>
    <!-- Comment Background Color -->
    <Variable name="posts.background.color" description="6" type="color" default="#fff" value="#ffffff"/>
    <!-- Send Button color -->
    <Variable name="body.link.color" description="7" type="color" default="#ff00ff" value="#ff00ff"/>
    <!-- Nothing -->
    <Variable name="tabs.font" description="9" type="font" default="normal 400 14px sans-serif"  value="normal 400 14px sans-serif"/>
    <Variable name="posts.title.color" description="19" type="color" default="#212121" value="#212121"/>
    <Variable name="posts.text.color" description="18" type="color" default="#1d2129"  value="#1d2129"/>
    <Variable name="posts.icons.color" description="23" type="color" default="#707070" value="#707070"/>
    <Variable name="labels.background.color" description="24" type="color" default="$(sidebar.backgroundColorTopHD)" value="$(sidebar.backgroundColorTopHD)"/>
    <Variable name="body.background" description="Body Background" type="background" color="#000" default="#000 none repeat scroll top left" value="#000 none repeat scroll top left"/>
</Group>
*/
]]></b:skin>

Info

Jika di template anda sudah ada tag <b:skin version='1.3.0' /> silahkan salin dari tag <Group /> dan tempelkan dalam tag <b:skin version='1.3.0' />

🍍 Penjelasan

Untuk tag yang saia kasih komentar  itu adalah tag yang tidak berpengaruh pada style contempo tetapi harus tetap ada supaya komentarnya tidak crash

Kita awali dengan

<!-- Comment as dan warna teks -->
<Variable name="body.text.color" description="Text Color" type="color" default="#000" value="#000000"/>

body.text.color adalah warna untuk bagian Comment As dan juga warna teks, silahkan ganti value pada attribute value dengan code warna hex

<!-- Font Type --->
<Variable name="body.text.font" description="2" type="font" default="normal normal 14px 'roboto', sans-serif" value="normal normal 1rem -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, &#39;Helvetica Neue&#39;, Arial, &#39;Noto Sans&#39;, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;, &#39;Noto Color Emoji&#39;"/>

body.text.font adalah variable untuk mengatur font family, silahkan ganti value pada attribute value dengan font family

Info

Lebih baik menggunakan safe web font family, karena kita tidak bisa mengimport font dari luar

<!-- Comment Background Color -->
<Variable name="posts.background.color" description="6" type="color" default="#fff" value="#ffffff"/>

posts.background.color adalah variable untuk mengatur warna background komentar, silahkan ganti value pada attribute value dengan code warna hex

<!-- Send Button color -->
<Variable name="body.link.color" description="7" type="color" default="#ff00ff" value="#ff00ff"/>

body.link.color adalah variable untuk mengatur warna publish, silahkan ganti value pada attribute value dengan code warna hex

🍓 Cara pasang

Untuk cara pasangnya silahkan salin full code di atas lalu pastekan di dalam tag <b:skin version='1.3.0' />

Lalu sialahkan anda cari code di bawah ini

<b:includable id='commentFormIframeSrc' var='post'>
  <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
</b:includable>

Lalu tampahkan parameter skin contempo, hasilnya seperti ini dengan operator params

<b:includable id='commentFormIframeSrc' var='post'>
  <a expr:href='data:post.commentFormIframeSrc params { skin: "contempo" }' id='comment-editor-src'/>
</b:includable>

Lalu silahkan simpan templatenya

Sekian dari saia, terimakasih 😐