Blogger Comment : Contempo Style

2 September 2019
6

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>

🍍 Penjelasan

Untuk tag yang saia kasih komentar <!-- Nothing --> 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

<!-- 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 😐