Membuat area komentar popUp / Melayang

Bismillahhirrohmannirohim, setelah sebelumnya saya mem-posting tentang Pembuatan kotak komentar melayang seperti Chatbox 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.

Nah bisa juga tutorial ini di sebut Membuat Area komentar melayang karena ketika link popUp nya di klik maka munculah area komentar ok tanpa panjang lebar mari kita terapkan secara perlahan di blog kita, jangan buru - buru ntar salah liat kode lagi.

1. Masuk di anda
2. Klik Rancangan / Template
3. Klik Edit HTML
4. Klik Lanjutkan / Proceed ( Jika Di Editor Baru Blogger )
5. Centang Expand Template Widget
6. Cari kode ]]></b:skin>
7. Simpan semua kode css di bawah ini di atas 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.zhinto.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
}

.komenKiri {
float: left
}

.komenKanan {
float: right
}

Kemudian cari kode </head> setelah itu simpan kode di bawah ini di atas 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>

8. Kemudian cari kode <b:includable id='comments' var='post'>
9. Simpan kode di bawah ini di Bawah 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 -->

10. Kemudian cari kode seperti ini
<dl expr:class='data:post.avatarIndentClass' id='comments-block'> setelah ketemu silahkan simpan kode di bawah ini di atas kode tersebut.

<div class='komenKiri'><!--Awal komen kiri -->

11. Cari lagi kode seperti ini <b:if cond='data:post.commentPagingRequired'>
12. Jika kode tersebut ada 2 silahkan pilih kode yang di atasnya ada kode seperti di bawah ini

<dd class='comment-footer'>
</dd>
</b:loop>
</dl>

13. Setelah itu lihat kode </dl> di bawah kode itu simpan kode di bawah ini

</div><!--AKhir komen kiri -->

14. Cari lagi kode seperti ini <div id='backlinks-container'>
15. Jika kode tersebut ada 2 pilih yang kode lengkapnya seperti ini

<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>
</b:widget>

16. Lihat kan kode </div> nah di bawah kode itu simpan kode di bawah ini

</div><!--akhir PopUp -->
</div><!--akhir komeng -->

Jadi nanti seperti ini kodenya

<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</div><!--akhir PopUp -->
</div><!--akhir komeng -->
</b:includable>
</b:widget>

Nah seperti itulah penempatan kodenya

17. Cari kode seperti ini
<b:includable id='comment-form' var='post'>
Setelah ketemu silahkan simpan kode di bawah ini di Bawah kode tersebut.

<div class='komenKanan'><!--Awal komen kanan -->

18. Kemudian cari kode seperti ini <div class='comment-form'>
19. 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> di bawah kode itu simpan kode di bawah ini

</div><!--Akhir komen kanan -->

Nah setelah itu klik Pratinjau jika sudah OK silahkan simpan template.

20. End - Huftt Mumet juga Njelasin nih jangan sampai salah ya. kalau saat Pratinjau Error langsung saja klik Bersihkan Edit / Kosongkan hasil Edit, semoga Tutorial Membuat area komentar popUp / Melayang bermanfaat.