Trik Blogger

Modifikasi Komentar Blog

4 komentar Rabu, 11 Januari 2012

Bisa di bilang Sistem Komentar kali ini sungu Fantastis, Exotis dan Boombastis. Karena sistem komentar ini sudah saya edit dengan baik dan sempurna, dengan berbagai fitu seperti.

Komentar Fantastis

Styel Elegan dan Simpel
Image Avatar
Tombol Reply
Styel Reply WP
Highlight Blog Owners
Pesan Ucapan "Terimakasi"
Emoticon Onion (Kucing)

Saya juga mengunakan Sistem Komentar ini? Seperti anda lihat Fantastis, Exotis dan Boombasti Bukan! Baiklah kita mulai.

1. Login di Blogger.com, Pergi ke Template > Edit HTML (Expand Template Widget)
2. Tekan Ctrl+F cari ]]></b:skin>, Letakan kode berikut di atas ]]></b:skin>

/* Comments
----------------------------------------------- */
#comments h4 {
font-size: 18px;
font-weight: normal;
margin: 20px 0;
}
.cm_wrap {
clear: both;
margin-bottom: 10px;
float: right;
width: 100%;
}
.cm_head {
margin: 0;
width:60px;
float: left;
}
.cm_avatar {
margin: 0;
vertical-align: middle;
border: 1px solid #DDD;
padding: 3px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMNaU_zj40UiWIJ9lxZK6F3o-shFRFU4BCeGckOP9t5sVdyVnXFzOfo6PYfgsbm6EerXa9FaQvxOVh6n_eFcpM0iUmknCnd10CPLRI0Hfiy20YNnl5AA-ZwQyaNKolIoP8J2sKp19eJhY/s1600/takdikenal.jpg) center no-repeat;
width: 35px;
height: 35px;
}
.cm_avatar_a {
margin: 0;
vertical-align: middle;
border: 1px solid #DDD;
padding: 3px;
background:#c6e5f7;
background-position:center;
background-repeat:no-repeat;
width: 35px;
height: 35px;
}
.cm_reply {
padding-top: 5px;
}
.cm_reply a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
}
.cm_reply a:hover {
text-decoration: none !important;;
background: #ccc;;
background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));;
background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);;
}
.cm_entry {
padding: 16px;
background: #fcfcfc;
border: 1px solid #E4E4E4;
overflow: hidden;
}
.cm_arrow {
display: block;
width: 9px;
height: 18px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBrvSMg-roWxu6gY6dzB9mP5KETWQBZNSY0BghYwUG02ypyQKIhTIdPMb0xpR3h1m0tBkTP4neUkHgOjrG3hMDW9KDTnAi66Lxsc_9VDzsJHhxr9jSeS7dUPi-0GGl6p9vPA9kmXBr_WA/s1600/comment-arrow.gif) no-repeat;
position: absolute;
margin-left: -25px;
}
.cm_info {
margin-bottom: 5px;
border: thin solid #E6E6E6;
background-color: #F4F4F4;
padding: 5px;
}
.cm_info_a {
margin-bottom: 5px;
border: thin solid #E6E6E6;
background-color: #dff0fa;
padding: 5px;
}
.cm_name {
font-size: 14px;
color: #666666 !important;
text-decoration:none;
float: left;
}
.cm_name_a {
font-family:"Comic Sans MS", cursive;
font-size: 14px;
color: #666666 !important;
text-decoration:none;
font-weight: bold;
float: left;
}
.cm_date {
font-size: 10px;
color: #999;
text-decoration:none;
float: right;
}
.cm_date_a {
font-family:"Comic Sans MS", cursive;
font-size: 10px;
color: #2D5E7B;
text-decoration:none;
float: right;
padding-top:5px;
}
.cm_entry p {
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #ffffff;
font-size: 13px;
color: #333;
word-wrap:break-word;
}
.cm_entry_a p {
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #ffffff;
font-size: 13px;
color: #333;
word-wrap:break-word;
}
.cm_pagenavi {
font-size: 10px;
text-transform: uppercase;
color: #666;
text-shadow: 1px 1px white;
font-weight: bold;
}
.cm_pagenavi a {
color: #666;
text-decoration: none;
padding:10px;
}
.cm_pagenavi a:hover {
text-decoration: underline
}
.cm_pagenavi span {
color: #888;
background: white;
padding: 4px;
border: 1px solid #E0E0E0;
}
/* Comment Admin */
.comment-body-author {
font-family:"Comic Sans MS", cursive;
font-weight: 300;
}

Untuk menganti background agar sesuai dengan template yang anda gunakan cari saja kode CSS .cm_entry

3. Berikutnya cari </body>, Masukan kode berikut di atas kode </body>

<b:if cond='data:blog.pageType == "item"'>
<script src='http://donor-ilmu.googlecode.com/files/comment.js' type='text/javascript'/>
<script src='http://donor-ilmu.googlecode.com/files/emoticon_wp2.js' type='text/javascript'/>
</b:if>

4. Selanjutnya cari kode
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
Kalau suda ketemu letakan kode berikut tepat dibawah kode yang anda temukan.

5. Terakhir cari <b:includable id='comments' var='post'>, ganti kode yang berada diantara dua kode dari pembuka <b:includable ...> sampai penutup </b:includable>

<b:includable id='comments' var='post'>

Kode yang harus di ganti

</b:includable>

Ganti kode dia antara b:includable dengan kode di bawah ini

<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments > 0'>
<a href='#comment-form' style='float:right; margin-right:5px;'>+ <data:commentLabelPlural/> +</a>
<b:if cond='data:post.numComments == 1'>
<span id='cm_total'>1</span> <data:commentLabelPlural/>
<b:else/>
<span id='cm_total'><data:post.numComments/></span> <data:commentLabelPlural/>
</b:if>
</b:if>
</h4>

<div id='cm_reply_css'/>

<div class='cm_pagenavi' id='cm_page'/>

<div id='cm_block'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.isDeleted'>
<b:else/>

<div expr:id='data:comment.anchorName'>
<div class='cm_wrap'>
<a expr:name='data:comment.anchorName'/>
<div class='cm_head'>
<div class='cm_avatar'>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
</div>
<div class='cm_reply'>
<a expr:href='"https://www.blogger.com/comment.g?blogID=0000000000000000000&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); return false;'>Reply</a>
</div>
</div>
<b:if cond='data:comment.author == data:post.author'>
<dd class='cm_entry'>
<span class='cm_arrow'/>
<div class='cm_info_a'>
<div class='cm_name_a'>
<b:if cond='data:comment.authorUrl'>
<img height='20px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWNeSYcEtOybny08oKy9Hu3vDFB0_uTTQn3b1vlNwRgD1OOWEYK2-knGF9jLJ8PO_t73lN49Xkti-v5lI5cXDvnhivddPqxgdI0xQNkld5fWXZNeVathkMIafcrnizvgzPfB1nDJ5R0LY/s1600/adminstar.png' title='Admin' width='20px'/>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<b><data:comment.author/></b>
</b:if>
</div>
<div class='cm_date_a'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</div>

<div class='comment-body-author'>
<p><data:comment.body/></p>
</div>
</dd>
<b:else/>
<dd class='cm_entry'>
<span class='cm_arrow'/>
<div class='cm_info'>
<div class='cm_name'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<b><data:comment.author/></b>
</b:if>
</div>
<div class='cm_date'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</div>

<p><data:comment.body/></p>
<span style='text-align:center; font-size:9px;'>Terimakasih <b><data:comment.author/></b> atas Komentarnya di <b><data:post.title/></b></span>
</dd>
</b:if>
</div>
</div>
</b:if>
</b:loop>
</div>
<div class='cm_pagenavi' id='cm_page_copy'/>

<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</b:if>
</div>

Dalam kode di ini anda perlu menganti Nomor 0000000000000000000 dengan ID Blog anda.

6. Langkah terakhir simpan template, Klik Save Template.

Read On

Menyisipkan Kode HTML di Posting Blog

0 komentar Selasa, 10 Januari 2012

Kadangkala kita ingin menyisipkan kode HTML pada posting di blog kita. Untuk menuliskan codeng/script/kode kedalam artikel blog memang ada tekniknya sendiri, karena jika kita menuliskannya dengan cara yang biasa maka yang akan muncul kemudian di blog tidaklah seperti dengan apa yang kita tuliskan dan kita harpkan.

Misalnya gini, jika kita menuliskan kode dengan cara yang biasa maka hasilnya tidak akan muncul dalam postingan karena kode tersebut langsung diterjemahkan kedalam bahasa HTML.

Nah terus bagaimana kalau ada banyak kode yang harus kita posting?

Berikut Cara yang paling praktis untuk menyisipkan kode HTML di posting blog kita :

- Buka situs ini Centricle.com (http://centricle.com/tools/html-entities), trus isikan kode-kode HTML tersebut kedalam kotak yang disediakan.

Nah kalau sudah tekan tombol "Encode", maka kita akan mendapatkan kode script baru untuk diposting di blog kita. Silahkan copy kode baru dan paste ke posting kita

Atau

- Buka Blogcrowds (http://www.blogcrowds.com/resources/parse_html.php)

Masukkan kode yang akan diparse, namun kali ini kamu hanya menekan tombol "Parse".

Semoga bermanfaat.. :)

Read On

Trik Blogger

Modifikasi Komentar Blog

Menyisipkan Kode HTML di Posting Blog

Arsip Blog

Followers