Mengubah Komentar Lama Menjadi Baru

Komentar sudah menjadi hal yang tak bisa dipisahkan dengan postingan, seperti ibarat motor dengan bensin, tetapi pada postingan saya kali ini akan membahas bagaimana cara mengubah bentuk komentar lama blogger menjadi komentar baru blogger yang lebih canggih dengan ada photo author disebelah post comments.

Apabila Anda menggunakan template lawas photo author ini tidak muncul selayaknya yang ada pada template baru blogger yang ada photo author disebelahnya.

Coba lihat gambar dibawah ini untuk membedakan komentar lawas dengan komentar baru.

Nah terlihat skema di atas ada perbedaan dengan ditambahi foto komentator.

Apakah Anda ingin mengubahnya ?

Langkah pertama masuk pada menu "Settings" lalu "Comments" dan pastikan pilih "YES" untuk pertanyaan "Show profile images on comments?" lalu SAVE

langkah kedua masuk menu Edit HTML dan centang box "Expand Widget Templates"

Lalu cari kode dibawah ini

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='&quot;comment-&quot; + data:comment.id'>
<a expr:name='&quot;comment-&quot; + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='&quot;#comment-&quot; + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Pahami dan sesuaikan codenya untuk template Anda.

Lalu Ganti code diatas dengan code dibawah ini

<div expr:class='data:post.postAuthorClass' expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd expr:class='&quot;comment-body &quot; + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
<span class='interaction-iframe-guide'/>
</p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
</div>

Nah tinggal SAVE dan lihat hasilnya deh.

Dan apabila ada pertanyaan silahkan lontarkan saja komentar disini, mulai sekarang saya semangat untuk membalas komentar-komentar Anda.

Terima Kasih.

Highlight Post Dengan Tombol Select All

Salam blogger,

Sebelumnya pada postingan yang kemaren saya sudah membahas mengenai "Menonjolkan teks tertentu pada postingan" dengan background yang berbeda bahkan background image yang sudah saya tulis disitu. Pada kesempatan kali ini membahas lagi mengenai Highlight Post dengan tambahan tombol select all yang mempermudah pengunjung blog untuk memBlok text yang ditonjolkan, misalkan anda menuliskan tutorial dan Anda menyisipkan script yang harus dicopy maka tombol select all ini sangat berguna untuk blok text otomatis.

Seperti contoh dibawah ini

Ingatkah kau...
Waktu kamu berbohong kepadaku
dan aku memaafkanya..

Ingatkah kau
Akan perjuanganku terhadapmu
walau aku tak bisa tetap ku perjuangkan

Ingatkah kau akan perhatianku terhadapmu
yang setiap waktu datang menyelimutimu

Tapi kini kau membalasnya dengan senyum pahitmu...

Hehehe hanya sekedar contoh gak perlu di artikan ya..

Okelah kita beranjak ke cara pembuatanya

1. Masuk Edit HTML pada blog Anda lalu taruh code javascript dibawah ini dibawah code <head>

<script type="text/javascript">
function fnSelect(objId)
{
fnDeSelect();
if (document.selection)
{
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(objId));
range.select();
}
else if (window.getSelection)
{
var range = document.createRange();
range.selectNode(document.getElementById(objId));
window.getSelection().addRange(range);
}
}
function fnDeSelect()
{
if (document.selection)
document.selection.empty();
else if (window.getSelection)
window.getSelection().removeAllRanges();
}
</script>

4. Masih pada Edit HTML lalu masukkan code CSS berikut diatas code ]]></b:skin>

/*__Style_copy_area__*/
.copybox { /* -- Style Box dalam --*/
padding:5px;
border:1px solid #FFC71F;
background:#FFFFCC;
}
.kopiaer { /* -- Style Box Luar --*/
background:red;
padding:7px;
}
.cangkirkopi { /* -- Style Tombolnya --*/
background:#B88A00;
border:1px solid #FFC71F;
color:#FFD65C;
padding:2px;
font-weight:bold;
}

Anda bisa mengunah tampilan code CSS diatas sesuai selera Anda lalu SAVE

5. Setelah itu pada posting editor gunakan code dibawah ini untuk menonjolkan textnya

<div class="kopiaer">
<input class="cangkirkopi" type="button" value="Select All" onClick="fnSelect('kopihangat')"/>
<div class="copybox" id="kopihangat">

INI TEKS YANG INGIN DITAMPILKAN

</div>
</div>

> Ingat ganti text yang berwarna biru berbeda setiap 1x penggunaan dan keduanya harus sama

> Ganti teks yang berwarna merah diatas dengan teks Anda

6. Publish dehh dan lihat hasilnya

Nah diatas adalah tutorial singkat dari Saya semoga berguna bagi Anda, Silahkan lontarkan komentar jika Anda mempunyai pertanyaan mengenai tutorial ini.

Tampilan Komentar Owner Berbeda (Template Baru)

Tampilan Komentar Owner atau pemilik blog berbeda ini sudah menjadi pernak-pernik blog yang popular karena dengan trik ini pembaca komentar bisa membedakan author dengan user di komentar artikel.
Sebelumnya Saya sudah pernah membahas tentang bagaimana cara membuat kotak komentar pemilik blog berbeda dengan user, namun perkembangan blogger pun membuat tutorial tersebut tak bisa dipakai pada template yang baru, karena template yang baru codenya berbeda dengan yang lama. Dan saya pun juga pernah menulis tentang bagaimana cara mengubah komentar lawas menjadi yang baru, lalu pada kesempatan kali ini Saya akan mencoba menulis tutorial tentang cara membuat tampilan kotak komentar pemilik blog berbeda di template baru.

Yuk langsung saja ke tutorialnya

1. Masuk pada menu Design -> Edit HTML dan centang "Expand Widget Templates"
   
2. Taruh Code CSS dibawah ini diatas code ]]></b:skin>
   
   .comment-body-author {
   background: #FFFF29; /* Warna Background */
   border:1px dotted #FF2929; /*Border*/
   margin:0;
   padding:0 0 0 20px;
   }
   
3. Kemudian cari code yang berwarna hitam lalu sisipkan code yang berwarna merah, seperti dibawah ini.
   
   
   <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
   <b:if cond='data:comment.favicon'>
   <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
   </b:if>
   <a expr:name='data:comment.anchorName'/>
   <b:if cond='data:blog.enabledCommentProfileImages'>
   <data:comment.authorAvatarImage/>
   </b:if>
   <b:if cond='data:comment.authorUrl'>
   <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
   <b:else/>
   <data:comment.author/>
   </b:if>
   <data:commentPostedByMsg/>
   </dt>
   
   <b:if cond='data:comment.author == data:post.author'>
   <dd class='comment-body-author'>
   <p><data:comment.body/></p>
   </dd>
   <b:else/>
   
   <dd expr:class='&quot;comment-body &quot; + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
   <b:if cond='data:comment.isDeleted'>
   <span class='deleted-comment'><data:comment.body/></span>
   <b:else/>
   <p>
   <data:comment.body/>
   <span class='interaction-iframe-guide'/>
   </p>
   </b:if>
   </dd>
   
   </b:if>
   
   <dd class='comment-footer'>
   
   Perhatikan betul-betul penempatanya
   
4. SAVE dan lihat hasilnya.
   

Okkeylah sekian dulu. semoga bermanfaat bagi Anda dan jangan malu-malu bertanya jika ada kesulitan karena Saya akan mencoba membantu Anda.

Cara Menghilangkan Widget Attribution Blogger

Pada episode yang lalu saya sudah menerangkan tentang kemunculan widget attribution blogger dan cara memindahkanya, pada episode kali ini pun masih membahas tentang widget attribution blogger namun yang saya bahas kali ini adalah cara menghilangkanya.

Caranya cukup simple dan mudah banget, ikuti Saja langkah dibawah ini.

pertama masuk pada "Design" Lalu "Edit HTML"

masukkan code css dibawah ini diatas code ]]></b:skin>

#Attribution1 {height:0px;
visibility:hidden;
display:none
}

Tinggal SAVE deh.

Dan jika Anda menggunakan code CSS di postingan ini, tinggal ganti code yang berwarna biru dengan code diatas.

Sekian dan terima kasih

Menampilkan Widget Di Halaman Tertentu

Hai sobat blogger, bagaimanakah kabar Anda sekalian ? semoga dalam keadaan sehat dan selalu ceria. Pada tulisan kali ini, saya akan membagikan ilmu yang sudah saya pelajari kepada Anda yaitu masih tentang blogger dan topik yang saya bahas kali ini adalah seputar "Menampilkan widget pada halaman tertentu" yang sering digunakan pada template megazine, misalnya anda ingin menampilkan widget dihalaman post saja atau tidak ada hanya dihalaman post.

Nah langsung saja kita pelajari bersama-sama.

Langkah pertama yang harus Anda lakukan adalah masuk menu "Design" kemudian masuk ke bagian "Edit HTML" lalu centang kotak "Expand widget templates"

lalu cari code widgetnya seperti ini

<b:widget id='HTML1' locked='false' title='Pesan' type='HTML'>
<b:includable id='main'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>

</b:includable>
</b:widget>

Untuk mempermudah pencarian silahkan masukkan judul widget seperti "Pesan" kedalam kotak pencarian browser (ctrl + F)

Kemudian tambah code

<b:if cond='data:blog.url == data:blog.homepageUrl'>

dan ditutup dengan code </b:if> untuk menempatkan di hanya halaman depan saja

dan ditempatkan seperti dibawah ini

<b:widget id='HTML1' locked='false' title='Pesan' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Perhatikan penempatan code yang berwarna hijau !

kemudian save.

Dan dibawah ini adalah code yang bisa digunakan untuk penempatan lainya

Untuk menempatkan di halaman depan/index digunakan code

<b:if cond='data:blog.pageType == data:blog.homepageUrl'>

Untuk menempatkan di halaman Archive saja

<b:if cond='data:blog.pageType == "archive"'>

Untuk menempatkan dihalaman item/posting saja digunakan code

<b:if cond='data:blog.pageType == "item"'>

Dan untuk pada halaman pages atau static page blogger digunakan

<b:if cond='data:blog.pageType == "static_page"'>

Dan untuk tambahan, jika Anda ingin menempatkan di halaman tertentu dengan menggunakan URL gunakan code dibawah ini

<b:if cond='data:blog.url == "URL_HERE"'>

Ganti code URL_HERE dengan URL yang ingin anda tampilkan.

Dan untuk pengecualian, misalnya anda tidak menempatkan widget hanya di halaman depan saja dengan cara mengganti tanda = pertama dengan tanda !

Contoh

<b:if cond='data:blog.pageType != data:blog.homepageUrl'>

Nah tidak terlalu sulit kan? semoga bermanfaat bagi Anda.

Sekian silahkan berkomentar jika ada pertanyaa, :D

NB : Code diatas juga dapat di aplikasikan ke fungsi-fungsi blogger lainya yang akan saya bahas di waktu selanjutnya