Sekarang saya akan memberikan solusinya bagi kawan yang ingin menampilkan Iklan Sponsor di atas Komentar
Caranya sangat simple :
- Siapkan script Iklan Sponsor yang sudah di Parse atau » disini
- Masuk ke account Blogger dengan ID kawan
- Untuk jaga-jaga Simpan Template kawan dulu
- Beri tanda centang disamping
<a target="_blank" href="http://www.ppcindo.com/click.php?a=6963&x=TVRNd09UQTFOekExTkMweU1qSXVNVEkwTGpFMU5pNHlNekE9&d=1&adurl=296234426&url=http%3A%2F%2Fpaydotcom.net%2Fr%2F59708%2Fbnp%2F26662416%2F5%2F"><img src="http://www.omniforexsignals.com/banners/468x60.gif" width="468" height="60" border="0" style="top: 40.857074455015095px; "></a>
<div class='comments-content'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='threaded_comment_js'/>
</b:if>
<div id='comment-holder'>
<data:post.commentHtml/>
</div>
</div>
Teks yang berwarna biru adalah contoh script Iklan, tapi di Parse dulu sebelum disimpan :x;
 |
| Tampilan Iklan |
- Jangan lupa simpan Template kawan :y;
Kreasi saya sebelumnya tentang Tempatkan Iklan disamping kanan Kotak Komentar, masalah yang kawan temukan yaitu Kotak Komentar akan selalu berada dibawah Iklan yang di sebelah kanan Komentar :r;
Cara mengatasinya sebagai berikut :- Masuk ke Account Blogger dengan ID kawan
- Pada Perancang template pilih Edit HTML
- Beri tanda cek pada Radio disamping Expand Widget Templates
- Cari <p><data:blogCommentMessage/></p> yang terakhir
Kode selengkapnya seperti berikut :
<h4 id='comment-post-message'><data:postCommentMsg/></h4><p><data:blogCommentMessage/></p><data:blogTeamBlogMessage/><a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/><iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/></div>
Silahkan dipindahkan atau dipotong [cut] semuanya jangan "di delete" dan Paste-kan diantara </dl> </div> diatas </td><td valign='top'> seperti postingan saya sebelumnya atau selengkapnya sebagai berikut :
<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='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:if>
</b:loop>
</dl>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/></div>
</div>
</td><td valign='top'>
<div style='width:210px;height:auto;padding:5px; align:right;border:0px solid #F00;background:#FFF;'>
SIMPAN SCRIPT IKLAN / BANNER DISINI
<br/>
</div>
</td></tr></table>
</div>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
Simpan Template kawan, mudah-mudahan masalah tersebut teratasi :r;
Sekarang saya akan mencoba berbagi dengan kawan sesuai Judul yang saya berikan yaitu Simpan Iklan Sponsor disamping kanan Kotak Komentar :a mengapa harus disana ?
jawabannya sangat simple dan sangat realistis, coba kawan perhatikan Komentar Blog kawan, banyak tempat kosong disebelah kanannya, benar kan :z;
Caranya sangat mudah, masih ingat dengan Kreasi saya sebelumnya yaitu Cara Pasang Iklan diatas Kotak Komentar. Oke langsung saja ke cara pembuatannya :
- Masuk pada Account Blogger dengan ID kawan
- Pada Perancang Template pilih Edit HTML
- Beri tanda cek disamping Expand Template Widget
- Cari <b:loop values='data:post.comments' var='comment'>
<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
- Copy-paste kode berikut diatasnya,
<tr><td valign='top'>
<div style='width:480px;height:auto;padding:1px; align:left; border:0px solid #999'>
- maka selengkapnya akan menjadi seperti berikut :
<table border='0' cellpadding='1' height='auto' width='800'>
<tr><td valign='top'>
<div style='width:480px;height:auto;padding:1px; align:left; border:0px solid #999'>
<br/>
<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
- width='800' silahkan disesuaikan dengan lebar postingan blog kawan
- width=480px; disesuaikan dengan pengurangan tempat iklan
- selanjutnya cari <data:comment.body/> yang terakhir
- selengkapnya kurang lebih seperti berikut :
<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='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:if>
</b:loop>
</dl>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
- Maka selengkapnya akan menjadi seperti berikut :
<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='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:if>
</b:loop>
</dl>
</div> </td><td valign='top'> <div style='width:210px;height:auto;padding:5px; align:right;border:0px solid #F00;background:#FFF;'>
SIMPAN SCRIPT IKLAN / BANNER DISINI
<br/></div> </td></tr></table> </div>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
- Teks yang berwarna biru adalah kode tambahan
- Tempatkan script iklan pada teks warna merah tersebut :r;
- Simpan Template kawan.
- Apa yang saya sampaikan ini hanya sebagai gambaran saja, dikarenakan Struktur Template berbeda-beda disamping keterbatasan saya sebagai Admin [Penulis].
- Artikel ini tidak bisa untuk Template Blog dengan Thread Comments
Caranya :
- Siapkan script Iklan Sponsor yang sudah di Parse » disini
- Masuk ke account Blogger dengan ID kawan
- Untuk jaga-jaga Simpan Template kawan dulu
- Beri tanda centang disamping
[SIMPAN DISINI - KODE IKLAN]
Tampilan Iklan seperti berikut :
atau
<p><data:blogCommentMessage/></p>
[KODE IKLAN - SIMPAN DISINI]
Tampilan Iklan seperti berikut :
- Kawan bisa berkreasi menaruh Banner Iklan Sponsor diatas atau dibawah Poskan Komentar dan atau diatas Post Editor Komentar
- Simpan template kawan
Script Widget ini saya dapatkan dari Blogger W2B, OK langsung saja ke cara membuatnya :y;
Caranya sebagai berikut :
- Masuk Account Blogger dengan ID kawan
- Pada Tata Letak pilih Tambah Gadget - HTML / JavaScript
- Copas script berikut kedalamnya
Silahkan Edit seperlunya seperti :
<style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 25,
showAvatar = true,
avatarSize = 40,
roundAvatar = true,
characters = 100,
showMorelink = true,
moreLinktext = "More »",
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>
<script type="text/javascript" src="http://blogbego-creation.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=25"></script>
 |
- .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px; artinya avatar akan dikelilingi dengan bingkai lingkaran, seandainya kawan menginginkan Avatar apa adanya angka 100 tersebut bisa dikecilkan sampai angka 0 [kosong/Nol]
- numComments= 5, artinya jumlah Komentar yang akan kawan tampilkan
- defaultAvatar = "http://www.gravatar.com/avatar/?d=mm", bisa kawan ganti dengan URL Avatar / Gambar punya kawan, karena yang memberikan Komentar tidak ada Avatarnya.
- Ganti Teks yang berwarna merah URL Blog saya dengan URL Blog kawan
- Simpan Blog kawan
OK saya cukupkan sekian basa-basinya biar jangan ngelantur, langsung saja ke cara membuatnya sangat simple seperti script sebelumnya :z;
Caranya sebagai berikut :
Kalau kawan ingin memberikan sedikit polesan garis pinggir [Tabel] untuk mengurangi tempat yang ada, kawan cukup menambahkan seperti script sebelumnya
<div style="border: 1px solid black; height: 200px; overflow: auto; padding: 10px; width: 300px;">
SCRIPT KUMPULAN KOMENTAR DISINI
</div>
- Masuk Account Blogger dengan ID kawan
- Pada Tata Letak pilih Tambah Gadget - HTML / JavaScript
- Copas script berikut kedalamnya
<script style="text/javascript" src="http://blogergadgets.googlecode.com/files/recentcommentswidgetv1.js"></script>
<script style="text/javascript">
var a_rc=6;
var m_rc=true;
var n_rc=true;
var o_rc=100;
</script><script src="http://NAMABLOG KAWAN.blogspot.com/feeds/comments/default?alt=json-in-script&max-results=6&callback=showrecentcomments"></script>
- Silahkan Edit seperlunya dan ganti Teks yang berwarna merah dengan URL Blog kawan
- Simpan Blog kawan
Kalau kawan ingin memberikan sedikit polesan garis pinggir [Tabel] untuk mengurangi tempat yang ada, kawan cukup menambahkan seperti script sebelumnya <div style="border: 1px solid black; height: 200px; overflow: auto; padding: 10px; width: 300px;">
SCRIPT KUMPULAN KOMENTAR DISINI
</div>
- Simpan kembali Blog kawan dan semoga ada manfaatnya
Untuk mengetahui si Pengunjung memberikan Komentar di Blog kita maka diperlukan Rekapan Komentar yang bisa kita tampilkan di Home Page [Beranda Blog] :z;
Modelnyapun ada bermacam-macam, dan disini saya akan mencoba membahas satu-persatu
Caranya sebagai berikut :
- Masuk ke account Blogger dengan ID kawan.
- Pada Tata Letak pilih tambah gadget
- Klik tanda (+) pada HTML/JavaScript
- Copas (copy-paste) kode berikut ke dalamnya
<script style="text/javascript" src="https://sites.google.com/site/tipsblogbegoku/arsip/showrecentcomments.js">
</script><script style="text/javascript">
var numcomments = 25;var displaymore = true;
var showcommentdate = true;
var showposttitle = true;
var numchars = 80;var standardstyling = true;</script>
<script src="http://Nama Blog Kawan.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
Penjelasan :
Silahkan kawan ganti angka maupun Nama Blog Kawan yang berwarna merah menyesuaikan dengan kebutuhan kawan :y;
- Angka 25 menunjukkan jumlah komentar yang akan kawan tampilkan
- Angka 80 menunjukkan jumlah sukun kata komentar (apa hanya judul artikel yang diberikan komentar saja atau sampai isi komentarnya). Kalau dipakai 150 seperti contoh disamping ini hasilnya
- Kalau semuanya sudah disesuaikan, silahkan simpan hasil kerja kawan dan lihat hasilnya
- Seandainya kawan menginginkan biar kelihatan elegant dengan memberikan sedikit polesan border [table] dengan kode berikut dan diakhiri dengan
<div style="border: 1px solid black; height: 200px; overflow: auto; padding: 10px; width: 300px;"><script style="text/javascript" src="https://sites.google.com/site/tipsblogbegoku/arsip/showrecentcomments.js">
</script><script style="text/javascript">
var numcomments = 25;var displaymore = true;
var showcommentdate = true;
var showposttitle = true;
var numchars = 80;var standardstyling = true;</script>
<script src="http://Nama Blog Kawan.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
</div>
Mudah-mudahan apa yang saya sampaikan ini bisa membantu dan ada manfaatnya buat kawan
Keterangan :
height:200px adalah ketinggian dan width:300px adalah lebar
silahkan sesuaikan dengan penempatannya di Blog kawan
