Membuat area komentar popUp / Melayang

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.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
}

.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