Cara Membuat Komentar Blogger Responsive Valid HTML5
Memulai lagi memasang komentar bawaan blogger diblogspot karena mungkin sudah merasa jenuh dengan kolom comment dari pihak ketiga. Membuat komenta bawaan blogger ke mode atau versi terbaru agar lebih SEO. Pengguna blogger saat ini semakin hari semakin ramai. Semakin banyak juga pembaharuan pada tampilan template blogger yang membuat para blogger semakin berminat untuk mengikuti trend tersebut, sekalipun ada juga sebahagian dari mereka masih mempertahankan gaya lama pada thema yang dimiliki. Termasuk perbaikan tampilan komentar blogger yang dimodifikasi dan dipercantik sedemikian rupa agar lebih menarik para pembaca / pengunjung blog.
Beberapa update komentar terbaru pada blogger bisa dilihat dibeberapa blogger terkenal, seperti penambahan atau penggantian kolom komentar yang mereka miliki. Untuk saat sekarang, pengguna komentar standard blogger sudah banyak beralih ke komentar disqus dan komentar facebook dan tidak memasang komentar blogger. Namun ada juga yang memasang 3 kolom komentar blog sekaligus. Hal ini tentunya memudahkan visitor untuk menulis komentar dengan 3 pilihan.
Lantas bagaimana dengan Anda yang tetap konsisten dengan komentar blogger saja dan ingin melakukan sedikit perubahan tampilan. Mungkin tutorial dibawah ini bisa sedikit membantu Anda. Tutorial ini juga berlaku bagi Anda yang telah terlanjur memasang template dengan komentar defaultnya adalah disqus. Mungkin Anda ingin kembali menjadikan kolom komentar Anda menjadi blogger comment stand alone.
Berikut ini penerapan code pada template blogspot. Silahkan login ke blogger Anda >> pilih theme / template >> Pilih edit theme
Setelah masuk, silahkan cari kode berikut </head> atau </head><!--<head/> (gunakan Ctrl+F untuk mempermudah pencarian). Setelah ketemu, masukkan kode CSS berikut ini di diatasnya
Silakan cari kode ini pada template Anda
Kemudian kalau sudah ketemum ganti dengan kode dibawah ini
Pada code HTML dan Javascript diatas sudah dilengkapi dengan penambahan Emotion dan membuat tampilan kolom komentar semakin keren.
Demikian tutorial kali ini tentang cara membuat komentar blogger responsive valid HTML5 dari dewaplokis, selamat mencoba, semoga sukses.
Source: http://blog.kangismet.net/2013/09/blogger-threaded-comments-hack-v3.html
Beberapa update komentar terbaru pada blogger bisa dilihat dibeberapa blogger terkenal, seperti penambahan atau penggantian kolom komentar yang mereka miliki. Untuk saat sekarang, pengguna komentar standard blogger sudah banyak beralih ke komentar disqus dan komentar facebook dan tidak memasang komentar blogger. Namun ada juga yang memasang 3 kolom komentar blog sekaligus. Hal ini tentunya memudahkan visitor untuk menulis komentar dengan 3 pilihan.
Lantas bagaimana dengan Anda yang tetap konsisten dengan komentar blogger saja dan ingin melakukan sedikit perubahan tampilan. Mungkin tutorial dibawah ini bisa sedikit membantu Anda. Tutorial ini juga berlaku bagi Anda yang telah terlanjur memasang template dengan komentar defaultnya adalah disqus. Mungkin Anda ingin kembali menjadikan kolom komentar Anda menjadi blogger comment stand alone.
Komentar Blogger Keren Responsive
Thread comment pada tutorial kali ini memiliki tampilan yang unik, yakni komentar blogger yang bersusun.Berikut ini penerapan code pada template blogspot. Silahkan login ke blogger Anda >> pilih theme / template >> Pilih edit theme
Setelah masuk, silahkan cari kode berikut </head> atau </head><!--<head/> (gunakan Ctrl+F untuk mempermudah pencarian). Setelah ketemu, masukkan kode CSS berikut ini di diatasnya
1. Kode CSS
<b:if cond='data:blog.pageType != "index"'>
<style type='text/css'>
/* CSS Comments */
#comments{background:#fff;position:relative;margin:0 auto;padding:20px;}
#comments h3 {display:inline-block;margin:0 0 10px 0;}
.comment_avatar_wrap{width:42px;height:42px;background:#fcfcfc;border-radius:6px;text-align:center;margin:0 0 20px 0;padding:0}
#comments .avatar-image-container{float:left;margin:0 10px 0 0;width:42px;height:42px;max-width:42px;max-height:42px;padding:0;margin-bottom:10px}
#comments .avatar-image-container img{width:42px;height:42px;max-width:42px;max-height:42px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP1sMtwK03Nvm8t7Inroq6rZk5-2s6wmr_UlJTQLn9Il4WlNpGL1a6N3QcMcnjfn82c8B6MAYrlL17wOFY8CjpkSBXFZtFagTqFnX88yb6lftWM9N3mm_UnWWL32RFX_k3QLStH3JSIenD/s1600/anon.jpg) no-repeat}
#comments .comment_name,#comments .comment_admin .comment_name{padding:0 0 10px 0;font-size:13px;position:relative}
#comments .comment_name a{color:#666;font-weight:700;padding:0;font-size:14px;text-decoration:none}
#comments .comment_admin .comment_date{font-weight:normal;font-size:11px}
#comments .comment_admin .comment_author_flag{display:inline-block;font-size:14px;color:rgb(17,143,249);text-align:center;margin:0 0 0 3px;}
#comments .comment_service{margin-top:5px}
#comments .comment_date{color:#a9a9a9;float:right;font-size:11px;font-weight:normal;margin-top:-3px}
#comments .comment_date a{color:#a9a9a9;float:right;font-size:11px;font-weight:normal;margin:0;padding:0}
#comments .comment_date a:hover{color:#a9a9a9;text-decoration:underline}
#comments .comment_body{margin-left:62px;margin-top:-64px;background:#fafafa;padding:18px 20px;line-height:26px;border-radius:7px;margin-bottom:20px;position:relative;border:1px solid rgba(0,0,0,0.05)}
#comments .comment_body p{margin:5px 0 0 0;font-size:14px;word-wrap:break-word;padding:0 0 5px 0}
#comments .comment_body:before{content:'';right:100%;border:solid transparent;height:0;width:0;position:absolute;pointer-events:none;border-right-color:rgba(0,0,0,0.08);border-width:10px}
#comments .comment_body:after{content:'';top:19px;right:99.9%;border:solid transparent;height:0;width:0;position:absolute;pointer-events:none;border-right-color:#fafafa;border-width:9px}
#comments .comment_inner{margin:12px 0}
#comments .comment_child .comment_wrap{padding-left:3%}
#comments .comment_reply{display:inline-block;margin-top:10px;padding:1px 7px;color:#fff;text-align:center;text-decoration:none;background:#bdc3c7;font:11px/18px sans-serif;transition:background-color .5s ease-out 0s}
#comments .comment_reply:hover{text-decoration:none;background:#95a5a6}
#comments .unneeded-paging-control{display:none}
#comments .comment-form{max-width:100%;}
#comment-editor{width:100%;background:transparent url(http://4.bp.blogspot.com/-jSUS8v5kwpQ/U8Z_6Ufr-PI/AAAAAAAAEYY/o4cQPKvt8vQ/s1600/loading.gif) no-repeat 50% 30%;border:1px solid #eee}
#comments .comment_form a{text-decoration:none;}
#comments .comment-form p{background:#f5f5f5;padding:15px 15px 11px;margin:5px 0 15px;color:rgba(0,0,0,.8);font-size:15px;line-height:normal;border-radius:3px;position:relative;max-width:100%;}
#comments .comment-form p:after{content:"";width:0;height:0;position:absolute;bottom:-16px;left:7%;border:8px solid transparent;border-color:#f5f5f5 transparent transparent}
#comments .comment_reply_form{padding:0 0 0 70px}
#comments .comment_reply_form .comment-form{width:99%}
.comment_emo_list .item{float:left;display:block;text-align:center;margin:1px 1px 0 0;height:40px;width:41px}
.comment_emo_list span{display:block;font-weight:700;font-size:11px;margin:3px 0 0 0;letter-spacing:1px}
img.comment_emo {width:16px;height:16px;}
.comment_youtube{max-width:100%;width:400px;height:225px;display:block;margin:auto}
.comment_img{max-width:100%}
#comments .deleted-comment{display:block;color:#999;}
#comments .comment_header{width:50px}
#respond{overflow:hidden;padding-left:10px;clear:both}
#comments .comment_avatar img{width:42px;height:auto;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrLWyYKYscjk-ao4ShnrIyRHizL9FtIhbnN2uIFfLOowCNBXTy3IDtGS9Cs1wO7U75p0hBslqPJQMPar_Dv7YtlGWxElUhHkl6W6CVXDKx7C254vggyBV7CPyoKCbKifyacmvBnuvzQJw/s1600/avatar.png) no-repeat;border-radius:6px}
#comments .comment-delete img{float:right;margin-left:15px;margin-top:3px;}
iframe{border:none;overflow:hidden}
#emo-box,#hide-emo{display:none}
.paging-control-container{text-align:center;margin:0 0 0 25%}
.paging-control-container a{text-align:center;margin:0 auto;background:#ccc;border:1px solid #e1e1e1;padding:3px 10px}
.button-group{float:right;text-align:left;margin:0 auto}
button,button[disabled]:active{border:none;font-size:12px;font-weight:normal;border-radius:1px;padding:4px 10px;text-decoration:none;background:#b6c472;color:#fff;display:inline-block;transition:all 0.5s linear;cursor:pointer}
button:hover{background:#a0ad64;color:#fff;transition:all 0.2s linear}
button:active{background:#a0ad64;color:#fff}
button[disabled],button[disabled]:active{background:#a0ad64;border-bottom:2px solid #8b9656;color:#fff;cursor:default}
.small-button a,.small-button1 a{background:#f84141;color:#fff;font-size:13px;cursor:pointer;margin:15px 5px 5px 0;text-decoration:none;text-transform:none;text-shadow:none;border-radius:3px;display:inline-block;padding:5px 10px;box-shadow:0 1px 2px rgba(0,0,0,0.1)}
.small-button:hover a,.small-button1:hover a{background:#e73636;}
@media screen and (max-width:480px) {
#comments{padding:10px}
#comments .comment_body{background:#fff;margin-left:52px;margin-top:-57px;padding:0;width:auto;border:0;}
.comment_avatar_wrap{width:32px;height:32px;border-radius:2px}
#comments .comment_avatar img{width:32px;background:#f6f6f6;border-radius:2px}
#comments .comment_reply{margin-top:5px;padding:0;color:#444;background:#fff;}
#comments .comment_body p{margin:0;font-size:13px;padding:0}
#comments .comment_name,#comments .comment_admin .comment_name{padding:0}
#comments .comment-delete img{opacity:.5}
#comments .comment-delete:hover img{opacity:.8}
#comments .comment_inner{border-bottom:1px solid rgba(0,0,0,0.14)}
#comments .comment_date,#comments .comment_body:before{display:none}}
</b:if>Jika pada template Anda sudah ada kode comment CSS maka hapus atau timpa saja dengan kode diatas
2. HTML & JS
Berikutnya adalah memasukkan kode HTMLnya. Pada bagian ini, dibutuhkan ketelitian yang cukup tinggi, jadi perhatikan setiap step berikut dengan baik.Silakan cari kode ini pada template Anda
<b:includable id='comments' var='post'>...</b:includable>Kemudian kalau sudah ketemum ganti dengan kode dibawah ini
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<h3>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h3>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
 
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</span>
</b:if>
<div class='clear'/>
<div id='comment_block'>
<b:loop values='data:post.comments' var='comment'>
<div data-level='0' expr:class='data:comment.adminClass' expr:id='data:comment.anchorName'>
<b:if cond='data:post.adminClass == data:comment.adminClass'>
<div class='comment_inner comment_admin'>
<b:else/>
<div class='comment_inner'>
</b:if>
<b:if cond='data:comment.isDeleted'>
<b:else/>
<div id='comment_box'>
<div class='comment_header'>
<div class='comment_avatar'>
<img alt='avatar' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/>
</div>
</div>
<div class='comment_body'>
<div class='comment_service'>
<div class='comment_name'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<b:if cond='data:comment.author == data:post.author'>
<span class='comment_author_flag'/>
</b:if>
<a expr:href='data:comment.url' rel='nofollow' title='permalink'><span class='comment_date'><data:comment.timestamp/></span></a>
</div>
</div>
<div class='clear'/>
<span class='comment_arrow'/>
<p><data:comment.body/></p>
<div class='comment_intime'>
<a class='comment-delete' expr:href='"http://www.blogger.com/delete-comment.g?blogID=" + data:blog.blogId + "&amp;postID=" + data:comment.id' expr:title='data:top.deleteCommentMsg'>
<img alt='delete' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2bkc207hFwE7Y0_tESi3WpzFMvBfQEFU9OHo5AqCejLXLYl2N0bRDkhxAQcLb5jiw6WOJygY87QUkSjPGlYLVR2qBP-QKIxylbhyHxYJtRf9BcN-PsttmRff4NkBbdK_lp0e6r2Sq7Io/s1600/delete4.png' title='Hapus Komentar'/>
</a>
<div class='comment_reply'>
<a expr:href='"#r_"+data:comment.anchorName' expr:id='"r"+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)'>Balas</a></div>
</div>
<div class='clear'/>
</div>
<div class='clear'/>
</div>
</b:if>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'>
<data:comment.body/>
</span>
</b:if>
<div class='clear'/>
</div>
<div class='clear'/>
<div class='comment_child'/>
<div class='comment_reply_form' expr:id='"r_f_"+data:comment.anchorName'/>
</div>
</b:loop>
</div>
<div class='clear'/>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
 
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</span>
</b:if>
<div class='clear'/>
<div class='comment_form'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='threaded-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>
</div>
</b:if>
</div>
<script type='text/javascript'>
//<![CDATA[
if (typeof(jQuery) == 'undefined') {
//output the script (load it from google api)
document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>");
}
//]]>
</script>
<script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>
<script type='text/javascript'>
<b:if cond='data:post.numComments != 0'>
var Items = <data:post.commentJso/>;
var Msgs = <data:post.commentMsgs/>;
var Config = <data:post.commentConfig/>;
<b:else/>
var Items = {};
var Msgs = {};
var Config = {'maxThreadDepth':'0'};
</b:if>
//<![CDATA[
//Global setting
Config.maxThreadDepth = 5;//How threaded level that you want
Display_Emo = true;//Display emoticon or not? set "false" to no display
Replace_Youtube_Link = true;//Auto replace youtube link to iframe embedded, choose "false" to disable
Replace_Image_Link = true;//Auto replace an image link choose "false" to disable.
Replace_Force_Tag = true;//Auto replace an virtual tag example: [pre] to <pre>, and [/pre] </pre>, If user input wrong , your layout will be gone. Then becare ful when enable this trap
Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP'];//(support: jpg, gif, png, bmp),only effect when Replace_Image_Link=true
//Config emoticons declare
Emo_List = [
':)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaWNQpSyPcGBkSZ6r8wnW4WaRFi9K2Sx0YVjKdPLYnPNTgwAdtGBznI_UTEBSkobEh6BaJHFPcUAvz6b4hRXoa63Pf0k9XKOQ0zaszslqNcNQ5R20Ql1LOoCRsgC5jloFqDAJviOMQRyI/s1600/smile1.gif',
':(' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja8OtCYIAQvbgXpiHEY_i51V2kIdX835hzd8xhr0IzZ8Tsn6aepP3WIAhfESHspe_mtXM2jPYXu_1wg0rCfZXDQM-MC14VOUOsKP7am0-LFYiAtEplAwkAFpMEk33Oe2mic0fNXDE8O_4/s1600/sad.gif',
'=(' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLUFbNHE7XejeVodTAlvuvT6j0oPfwKIHbcSDJYpdOFf96AiQCjTC6uFKuWkgvqOPlcRT9gmhYgzLvLgDXnKTer87wVhyGu3QZ8vyw0WBQXJb27cdBa2iTPfimigErinTx7u-bvQgNLaM/s1600/sadanimated.gif',
'^_^' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX327q9iYwnPDI8b1z_qasqfnwyAE9yLlvhC3Ac_mFOOXzZUvv1-5m_x7zYNBi-LAz3Sd4-KEBMtVzVzbi_Oib2w1Q29bLc8BhYVEYtbmcQktkc8-v6jfu5FRjIbw0kNR-QWHfzC-myJ4/s1600/smile.gif',
':D' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5ikqhunEhYWL49JtgYCUy2V8F9cXPwjrczfuL58z6uNyqEiiqb-uH2fv2lg86_9JPFKJrQKyvhJfmdqDMzfltkn4wr_5fUL9pw3oC1hk-vSxx6Q-5IRFjoZ6T7o62aYEOXSzqzgZjJc8/s1600/icon_smile.gif',
'=D' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiytCXJQvgrmLPm_LLjy_DZgM8SOp1JyVp9nVTayStGp7Jly4ZVwwT8J9m8PcufXjX80V95HrJIRq_caHrwW3MHtqomi1WRVNw2YIpQ0LxtzFGe-bkQ4DEZ4xz0psH_zZ8Y1cyjvCQ7QXU/s1600/hihi.gif',
'|o|' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNAyAJ452Wr8oZP9akO-2W7bjPg7GIdoi6zNvhbix_2iUtCrx9vJ094mIHONy3sjcsb2nExvnko2LgRrzQE7mMmdOmNy8PYOSLGYOa8Q1EyGmHPTJ7zMdg9bqEzMzq287Y66Ta2211IPI/s1600/applause.gif',
'@@,' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZjNCpyxt9RvrtSZsalukJHihAj_MNmTkZwFr4BC6AvvdkXXnzh_NsECprKkuuDRCBF4B8_yl81lUs4cBIeaLJkJeaNS3n-ViSQ7-n6S5bKJtgIOyGAiqeARY3_zkfG0R7QZQE5SryzCc/s1600/rolleyes.gif',
';)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZh3K5ggHQjZvpwaEClACtqD0IDIqNPNnEpf6iJoFRBpZ7NFwJ8Q88uP4muJHQSYXqOUaLBs9qi6Kxg5KSWf20jdDinKUoyBlLgUP4H6WHK_kUaHgKLK9wCBxom4h0dYdc9a-sp8ddpXs/s1600/wink.gif',
':-bd','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8-A-tiQFJdJuIJEoTBRn9pwhHOGQNc6lHZ3lCF06VgwLArEFgIU68wdpbg0Yj_fhjKXCV5Z9LQ1WzFeokG-qf3qmjdJ3XxkVV9COo3fF7yT83F0ts_9OxhSpJ3mADzwSGiT5AN5B9CPU/s1600/thumb.gif',
':-d' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj12dxSzQF9ljOyVhdU7loo3k-S9uuLmQVNnCd5KTMNqaWNVbyoKJsGPD9cPDgK77TqS3oBbGb0mQQnBmI00fgFZorfpTLKTULwTLRpZF7BiyW5xV6DvONqL07s9WAGtsMHBodlImjcgOQ/s1600/thumbsup.gif',
':p' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC5jjgZDdL26xstDv64C_USNolb_wN2TAHOFaj5InLgdxe017oU63irrSYFbCuMgF6lEV6YIp11rMGnAlzuHE4FeSM1PIhfRtFJmI0fd2CthK-PZpRn6yItRYzbNW-CB-h0z4xGsRrtew/s1600/wee.gif',
];
//Config Force tag list, define all in lower case
Force_Tag = [
'[pre]','<pre>',
'[/pre]','</pre>',
'<pre class="brush: plain; title: ; notranslate" title="">','<code>',
'</pre>','</code>'
];
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('3 q=\'.W\';3 1a=$(\'#N-Y\').B(\'y\');u 1w(H){3 1h=\' \\n\\r\\t\\f\\2p\\1S\\1T\\1U\\24\\25\\26\\27\\2e\\2h\\2k\\2m\\2n\\2u\\2y\\2z\\2A\\2F\\1L\\1N\\1O\\1P\\1Q\';G(3 i=0;i<H.5;i++){b(1h.g(H.1V(i))!=-1){H=H.d(0,i);11}}C H}$(\'#28 .1B p\').k(u(D,7){b(2r){3 m=\'1g://13.Z.X/1t?v=\';3 8=7.g(m);F(8!=-1){1H=7.d(8);K=1w(1H);3 1c=K.g(\'&\');3 T=\'\';b(1c==-1){T=K.d(m.5)}1e{T=K.d(m.5,1c)}3 1j=\'<1k I="1W" y="1g://13.Z.X/1X/\'+T+\'?1Y=1" 20="0" 21></1k>\';7=7.d(0,8)+1j+7.d(8+K.5);8=7.g(m);b(8==-1){m=\'22://13.Z.X/1t?v=\';8=7.g(m)}}}b(23){3 1d=\'\';3 x=7;G(3 i=0;i<1z.5;i++){3 m=\'.\'+1z[i];3 o=x.E();3 8=o.g(m);F(8!=-1){l=x.d(0,8+m.5);o=l.E();3 w=\'2j://\';3 z=o.g(w);3 L=\'\';F(z!=-1){L=w.R();l=l.d(z+w.5);o=l.E();z=o.g(w)}w=\'1K://\';o=l.E();z=o.g(w);F(z!=-1){L=w.R();l=l.d(z+w.5);o=l.E();z=o.g(w)}b(L==\'\'||l.5<6){11}l=L+l;1d+=x.d(0,8+m.5-l.5)+\'<S y="\'+l+\'" I="2s"/>\';x=x.d(8+m.5);o=x.E();8=o.g(m)}}7=1d+x}b(1m){3 5=A.5;b(5%2==1){5--}G(3 i=0;i<5;i+=2){3 V=\'<S y="\'+A[i+1]+\'" I="1x"/>\';8=7.g(A[i]);F(8!=-1){7=7.d(0,8)+V+7.d(8+A[i].5);8=7.g(A[i])}}}b(2G){3 5=U.5;b(5%2==1){5--}G(3 i=0;i<5;i+=2){F(1){3 x=7.R();8=x.g(U[i]);b(8!=-1){7=7.d(0,8)+U[i+1]+7.d(8+U[i].5)}1e{11}}}}C 7});$(\'.1M\').k(u(D,7){b(1m){3 5=A.5;b(5%2==1){5--}3 15=\'\';G(3 i=0;i<5;i+=2){3 1C=\'<1F>\'+A[i]+\'</1F>\';3 V=\'<S y="\'+A[i+1]+\'" I="1x"/>\';15+=\'<M I="1R">\'+V+1C+\'</M>\'}C 15}});$(\'.1f .1B p\').k(u(i,h){10=h.R();D=10.g(\'@<a 12="#c\');b(D!=-1){14=10.g(\'</a>\',D);b(14!=-1){h=h.d(0,D)+h.d(14+4)}}C h});u 1l(j){r=j.g(\'c\');b(r!=-1)j=j.d(r+1);C j}u 1n(j){j=\'&1Z=\'+j+\'#%1o\';1p=1a.1q(/#%1o/,j);C 1p}u 1r(){k=$(q).k();$(q).k(\'\');q=\'.W\';$(q).k(k);$(\'#N-Y\').B(\'y\',1a)}u 1s(e){j=$(e).B(\'16\');j=1l(j);k=$(q).k();b(q==\'.W\'){1u=\'<a 12="#1v" 29="1r()">\'+2a.2b+\'</a><a 2c="1v"/>\';$(q).k(1u)}1e{$(q).k(\'\')}q=\'#2d\'+j;$(q).k(k);$(\'#N-Y\').B(\'y\',1n(j))}17=2f.2g.12;18=\'#N-2i\';19=17.g(18);b(19!=-1){1y=17.d(19+18.5);1s(\'#2l\'+1y)}G(3 i=0;i<O.5;i++){b(\'1A\'2o O[i]){3 j=O[i].1A;3 1b=2q($(\'#c\'+j+\':P\').B(\'1D-1E\'));$(\'#c\'+j+\' .2t:P\').k(u(D,7){3 J=O[i].16;b(1b>=2v.2w){$(\'#c\'+J+\':P .2x\').1G()}3 Q=$(\'#c\'+J+\':P\').k();Q=\'<M I="1f" 16="c\'+J+\'" 1D-1E="\'+(1b+1)+\'">\'+Q+\'</M>\';$(\'#c\'+J).1G();C(7+Q)})}}3 1I=$("#2B");1I.2C(\'.2D S\').2E(u(){3 1J=$(1i).B(\'y\');$(1i).2H().B(\'y\',1J.1q(/\\/s[0-9]+(\\-c)?\\//,"/2I-c/"))});',62,169,'|||var||length||oldhtml|check_index|||if||substring|||indexOf|||par_id|html|img_src|search_key||upper_html||Cur_Cform_Hdr||||function||http_search|temp_html|src|find_http|Emo_List|attr|return|index|toUpperCase|while|for|str|class|child_id|yt_link|save_http|div|comment|Items|first|child_html|toLowerCase|img|yt_code|Force_Tag|img_html|comment_form|com|editor|youtube|temp|break|href|www|index_tail|newhtml|id|cur_url|search_formid|search_index|Cur_Cform_Url|par_level|yt_code_index|save_html|else|comment_wrap|http|whitespace|this|yt_video|iframe|Valid_Par_Id|Display_Emo|Cform_Ins_ParID|7B|n_cform_url|replace|Reset_Comment_Form|Display_Reply_Form|watch|reset_html|origin_cform|trim|comment_emo|ret_id|Replace_Image_Ext|parentId|comment_body|img_code|data|level|span|remove|ht|avatar|ava|HTTPS|u200a|comment_emo_list|u200b|u2028|u2029|u3000|item|x5d|x7c|x7d|charAt|comment_youtube|embed|autohide|parentID|frameborder|allowfullscreen|https|Replace_Image_Link|x3c|x3e|x0b|xa0|comment_block|onclick|Msgs|addComment|name|r_f_c|u2000|window|location|u2001|form_|HTTP|u2002|rc|u2003|u2004|in|x5b|parseInt|Replace_Youtube_Link|comment_img|comment_child|u2005|Config|maxThreadDepth|comment_reply|u2006|u2007|u2008|comments|find|comment_avatar|each|u2009|Replace_Force_Tag|show|s45'.split('|'),0,{}))
//]]>
</script>
</b:includable>
Pada code HTML dan Javascript diatas sudah dilengkapi dengan penambahan Emotion dan membuat tampilan kolom komentar semakin keren.
Demikian tutorial kali ini tentang cara membuat komentar blogger responsive valid HTML5 dari dewaplokis, selamat mencoba, semoga sukses.
Source: http://blog.kangismet.net/2013/09/blogger-threaded-comments-hack-v3.html
Load Comments
Tutup Komentar
Disqus Codes
- To write a bold letter please use
<strong></strong>or<b></b>. - To write a italic letter please use
<em></em>or<i></i>. - To write a underline letter please use
<u></u>. - To write a strikethrought letter please use
<strike></strike>. - To write HTML code, please use
<code></code>or<pre></pre>or<pre><code></code></pre>.
And use parse tool below to easy get the style.
strong em u strike
pre code pre code spoiler
embed
