Sabtu, 30 Juni 2012
,sekarang saya akan posting tentang cara membuat area komentar menjadi popup. Sedikit saya jelaskan, disini saya masih menggunakan komentar yang default dari blogger jadi bukan komentar yang bergaya Threaded, sebenarnya saya hanya memanfaatkan Efek Modal / PopUp dari Jquery. Nah di bawah ini ScreenShot nya.
Caranya :
- Masuk ke dasbor blog kamu
- Pilih Template lalu Edit HTML
- Lalu cari kode ]]></b:skin>
- Semua kode dibawah ini copy paste diatas kode ]]></b:skin>
/* Ini Css Efek Modal */#fade {display: none;background: #000;position: fixed;left: 0;top: 0;z-index: 10;width: 100%;height: 100%;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";filter: alpha(opacity=80);opacity: 0.8;z-index: 9999}.popup_block {display: none;background: #fff;padding: 5px;border: 5px solid #C00;float: left;font-size: 1.2em;position: fixed;top: 50%;left: 50%;z-index: 99999}img.btn_close {float: right;top: -30px;position: absolute;right: 25px}.popup p {padding: 5px 10px;margin: 5px 0}/* Hack Position Untuk IE */*html #fade {position: absolute;}*html .popup_block {position: absolute;}#linkKom {padding: 10px 15px;background: #4479BA;color: #FFF;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;border: solid 1px #20538D;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);-webkit-transition-duration: 0.2s;-moz-transition-duration: 0.2s;-o-transition-duration: 0.2s;transition-duration: 0.2s;-webkit-user-select: none;-moz-user-select: none;user-select: none}#linkKom:hover {background: #356094;border: solid 1px #2A4E77;text-decoration: none}#linkKom:active {-webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);-moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);background: #2E5481;border: solid 1px #203E5F}/* pembagi komen Original by www.sin1aja.blogspot.com */.KomenG {width: 850px;margin: 0 auto;overflow: auto;height: 350px;font-size: 15px;font-family: "Arial", sans-serif}.komenKiri, .komenKanan {width: 400px;padding: 5px;font-size: 13px;font-family: "Arial", sans-serif}
- Kemudian copy paste lagi kode dibawah ini tepat diatas kode </head>
<script src='ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script><script src='http://sites.google.com/site/zyztem33/js/fade.js' type='text/javascript'></script>
- Kemudian cari kode <b:includable id='comments' var='post'>
- Lalu copy paste kode dibawah ini tepat dibawah kode <b:includable id='comments' var='post'>
<a class='poplight' href='#?w=860' id='linkKom' rel='popup1'>Mari Berkomentar</a><div class='popup_block' id='popup1'><div class='KomenG'><!--mulai komeng -->
- Kemudian cari kode <dl expr:class='data:post.avatarIndentClass' id='comments-block'>lalu copy paste kode dibawah ini tepat diatas kode tersebut
<div class='komenKiri'><!--Awal komen kiri -->
- Kemudian cari kode <b:if cond='data:post.commentPagingRequired'>
- Jika ada 2 silahkan cari yang diatasnya ada kode seperti dibawah ini
<dd class='comment-footer'></dd></b:loop></dl>
- Setelah itu lihat kode </dl> lalu dibawah kode itu simpan kode dibawah ini
</div><!--AKhir komen kiri -->
- Lalu cari lagi kode <div id='backlinks-container'> Jika ada 2 pilih kode lengkapnya seperti dibawah ini
<div id='backlinks-container'><div expr:id='data:widget.instanceId + "_backlinks-container"'><b:if cond='data:post.showBacklinks'><b:include data='post' name='backlinks'/></b:if></div></div></div></b:includable></b:widget>
- Lihat kode </div> nah dibawah kode itu copy paste kode dibawah ini
</div><!--akhir PopUp --></div><!--akhir komeng -->
- Kemudian cari kode <b:includable id='comment-form' var='post'> lalu copy paste kode dibawah ini tepat dibawah kode tadi
<div class='komenKanan'><!--Awal komen kanan -->
- Kemudian cari lagi kode <div class='comment-form'>
- Kode lengkapnya seperti ini
<div class='comment-form'><a name='comment-form'/><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' frameborder='0' height='290' id='comment-editor' scrolling='no' src='' width='350'/><data:post.iframeColorizer/></div>
- Lihat kode </div> kemudian copy paste kode dibawah ini tepat dibawah kode tadi
</div><!--Akhir komen kanan -->
- Kemudian disimpan
