Cara Memasang Komentar Blogger Versi Terbaru Skin Contempo

IwanBlog.com - Artikel kali ini lebih kearah template bawaan blogger yang sudah lebih baik dari yang dulu, dari sisi tampilan dan fitur juga sudah menjadi lebih baik. Tapi yang lebih menarik adalah tampilan komentar blogger yang berubah dari sebelumnya.

Perubahan ini terlihat lebih modern dan lebih simple jika digunakan, saya salah satu orang yang sangat gemar menggunakan komentar blogger daripada komentar pihak ketiga seperti Disqus dan semacamnya.

Memasang Komentar Blogger Skin Contempo

Sebenarnya ini bukan memasang komentarnya, melainkan kita hanya perlu mengganti tampilan dari komentar blogger itu sendiri dari tampilan atau skin yang lama menjadi yang lebih baru.

Pertama kali kamu perlu menambahkan kode berikut tepat dibawah kode <b:skin><![CDATA[ atau kode <b:skin version='1.3.0'><![CDATA[ pada template kamu :

<!-- Variable definitions -->
<Group description="Komentar Baru Blogger (Contempo, Soho, Emporio, Notable)">
 <Variable name="body.background" description="Body Background" type="background" color="#dddfe2" default="#dddfe2 none repeat scroll top left" value="#dddfe2 none repeat scroll top left"/>
 <Variable name="body.font" description="Font" type="font" default="normal 400 14px Roboto, Arial, sans-serif" value="normal 400 14px Arial,sans-serif"/>
 <Variable name="body.text.color" description="Text Color" type="color" default="#1d2129" value="#1d2129"/>
 <Variable name="body.text.font" description="1" type="font" default="$(body.font)" value="normal 400 14px Roboto,Arial,sans-serif"/>
 <Variable name="posts.background.color" description="2" type="color" default="#fff" value="#ffffff"/>
 <Variable name="body.link.color" description="3" type="color" default="#008c5f" value="#008c5f"/>
 <Variable name="body.link.visited.color" description="4" type="color" default="#008c5f" value="#008c5f"/>
 <Variable name="body.link.hover.color" description="5" type="color" default="#1d2129" value="#1d2129"/>
 <Variable name="blog.title.font" description="6" type="font" default="$(body.text.font)" value="normal 400 14px Roboto, Arial, sans-serif"/>
 <Variable name="blog.title.color" description="7" type="color" default="#fff" value="#ffffff"/>
 <Variable name="header.icons.color" description="8" type="color" default="#fff" value="#ffffff"/>
 <Variable name="tabs.font" description="9" type="font" default="$(body.text.font)" value="normal 400 14px Arial,sans-serif"/>
 <Variable name="tabs.color" description="10" type="color" default="#ccc" value="#cccccc"/>
 <Variable name="tabs.selected.color" description="11" type="color" default="#fff" value="#ffffff"/>
 <Variable name="tabs.overflow.background.color" description="12" type="color" default="#fff" value="#ffffff"/>
 <Variable name="tabs.overflow.color" description="13" type="color" default="$(body.text.color)" value="#1d2129"/>
 <Variable name="tabs.overflow.selected.color" description="14" type="color" default="$(body.text.color)" value="#1d2129"/>
 <Variable name="posts.title.color" description="15" type="color" default="$(body.text.color)" value="#1d2129"/>
 <Variable name="posts.title.font" description="16" type="font" default="$(body.text.font)" value="normal 400 14px Arial,sans-serif"/>
 <Variable name="posts.text.font" description="17" type="font" default="$(body.text.font)" value="normal 400 14px Arial,sans-serif"/>
 <Variable name="posts.text.color" description="18" type="color" default="$(body.text.color)" value="#1d2129"/>
 <Variable name="posts.icons.color" description="19" type="color" default="$(body.text.color)" value="#6c6f74"/>
 <Variable name="labels.background.color" description="20" type="color" default="#008c5f" value="#008c5f"/>
</Group>

Ganti yang saya berikan marking kuning tersebut dengan warna yang sesuai selera kamu atau sesuaikan saja dengan template yang sedang kamu gunakan.

Selanjutnya kamu perlu cari kode berikut :

data:post.commentFormIframeSrc

Ganti semua kode tersebut dengan kode dibawah ini :

data:post.commentFormIframeSrc + "&skin=contempo" + data:variantParam 

Untuk penampakan lengkapnya akan menjadi seperti berikut :

<b:if cond='data:mobile'>
<h4 id='comment-post-message'>
<a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' href='javascript:void(0)'><data:postCommentMsg/></a></h4>
<div class='pesan-komentar'><p><data:blogCommentMessage/></p></div>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc + &quot;&amp;skin=contempo&quot; + data:variantParam ' id='comment-editor-src' title='comment-from'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display:block' title='comment editor' width='100%'/>
<b:else/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<div class='pesan-komentar'><p><data:blogCommentMessage/></p></div>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc + &quot;&amp;skin=contempo&quot; + data:variantParam ' id='comment-editor-src' title='comment-from'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' title='comment editor' width='100%'/>
</b:if>

Kurang lebih caranya hanya seperti itu, jangan lupa untuk simpan hasil perubahan kamu itu dan lihat hasilnya. Perlu kamu perhatikan cara ini hanya untuk kamu yang menggunakan template dengan komentar blogger standar saja, jika kamu menggunakan komentar blogger versi modifikasi maka skin komentar ini tidak akan bekerja.