Membuat komen author berbeda di blogger (template designer)

Akhirnya setelah keliling kesana-kemari ada di blog orang (jeremymartin - Thanks). Sedikit berbeda dengan template blogger yang lama, disini menggunakan jQuery.

Pertama copy - lalu pastekan kode dibawah ini setelah penutup </head>

<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'/>

Save template dulu :)

Setelah itu kita lanjutkan, jangan lupa Klik dulu Expand Widget Templates. Tapi sebelum itu, apakah blog authornya cuman satau atau beberapa author. Lanjut yuk ! 

Cara 1 : Authornya cuman 1 orang


Cari kode ini

<b:else/> <!-- normal blog profile -->

Setelah ketemu. Copy lalu pastekan kode ini dibawahnya :

<script type='text/javascript'>

$().ready(function() {

$('dl#comments-block dt a').each(function(i) {

if($(this).attr('href') == '<data:userUrl/>') {

$(this).parent('dt').addClass('author-comment').next('dd.comment-body').addClass('author-comment').next('dd.comment-footer').addClass('author-comment');

}

});

});

</script>

Lanjut menuju bagian CSS di Cara 2
Lalu save..
* Untuk cara yang ini belum sempet di test

Cara 2 : Beberapa author dan anda sebegai co-author

Untuk cara yang kedua ini udah di test seperti yang telah di terapkan di blog ini :) Mari kita lanjutkan

Cari kode ini

<b:if cond='data:team == "true"'>

Lalu pastekan dibawahnya kode ini 

<script type="text/javascript">

var author_urls = new Array();

</script>

Lanjut cari kode ini

<b:loop values='data:authors' var='i'>

Pastekan dibawahnya kode ini

<script type="text/javascript">
author_urls[author_urls.length] = '<data:i.userUrl/>';
</script>

Lanjut dibawahnya cari 

</ul>

Pastekan tepat dibawahnya :

<script type='text/javascript'>

$().ready(function() {

var urlsReg = new RegExp(author_urls.join("|"));

$('dl#comments-block dt a').each(function(i) {

if(urlsReg.test($(this).attr('href'))) {

$(this).parent('dt').addClass('author-comment').next('dd.comment-body').addClass('author-comment').next('dd.comment-footer').addClass('author-comment');

}

});

});

</script>

Nah selesai juga semua tentang javascript, panjang juga yah :)

Bagian CSS
Belum selesai lanjut ke CSS nya, pastekan kode dibawah ini tepat diatasnya </style>

dl#comments-block dt.author-comment {

  background-image: none;

  background-color: #EDE5BE;

  margin-bottom: 0px;

  padding: 6px 0 6px 10px;

  border: 1px solid #ccc;

  border-bottom: 1px solid #FFF7CF;

}

dl#comments-block dd.comment-body.author-comment {

  color: #593622;

  background-color: #EDE5BE;

  margin-top: 0px;

  margin-bottom: 0px;

  padding: 10px;

  border: 1px solid#ccc;

  border-top: 1px solid #CBC4AC;

}

dl#comments-block dd.comment-footer.author-comment {

  font-size: .8em;

  background-color: #CBC39C;

  padding: 3px;

  margin-top: 0px;

  float: right;

  border: 1px solid #ccc;

  border-top: none;

}

Save ! selesai akhirnya


lihat demonya disini

Semoga berguna :)