Pada kesempatan kali ini saya kembali lagi ntuk membrikan tutorial 'Pasang Kotak Komentar Melayang ala akaUTta' Bag.2' kepada sobat2 ut2a-4down.heheee,.
oia sebelumnya saya juga pernah memberikan tutorial serupa yaitu 'Pasang Kotak Komentar Melayang ala akaUTta' Bag.1'.sobat bisa melihatnya jika tdk tertarik dgn tutorial saya yg satu ini. dan perbedaan dr postingan saya sebelumnya dengan yg sekarang, cuma beberapa efek css saja, klw dibandingin dgn yg skrg, jujur gw lbh snang yg sekrang drpada yg sebelumnya :D.
Maaf saya tidak membrikan demonya, tp dijamin berhasil gan, karena sebelum sy post tutorial ini, sy slalu melakukan ujicoba pada template saya, jka berhasil bru deh saya post. :D asal cra2 pasangnya tidak salah yah.
Baiklah untuk memasangnya silahkan sobat ikuti tahap2 berikut:
1. Login Ke Akun Blog Sobat
2. Pilih Rancangan/Tata Letak
3. Cari Kode ]]></b:skin> , Lalu Masukan Kode Berikut tepat diatasnya.
.tombolaka-koment{background:rgba(1,1,1,.9);;border:solid 2px #333;text-align:center;margin:0 auto;margin-top:2px;padding:5px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-webkit-box-shadow: 0px 0px 3px rgba(50, 50, 50, 1);-moz-box-shadow: 0px 0px 3px rgba(50, 50, 50, 1);box-shadow: 0px 0px 3px rgba(50, 50, 50, 1);}4. Selanjutnya cari kode <b:includable id='comments' var='post'> . jika sudah ketemu, lalu letakkan kode berikut tepat dibawahnya:
.show-comentaka:target{padding:10px;margin-top:0%;opacity:1;}
.tombolaka-koment a{color:#fff;text-shadow:0 1px 2px #000;font:normal 18px impact,sans serif}
.tombolaka-koment a:hover{color:#00CCD3;text-shadow:0 0 2px #00CCD3;}
.tombolaka-koment li{ display:inline;}
#tombolaka-x {position:fixed;top:50%;left:-2%;display:block;list-style:none;}
#tombolaka-x a{padding:25px;border:2px solid #fff;-moz-border-radius:100%;-webkit-border-radius:100%;line-height:20px;width:20px;height:20px;border-radius:100%;display:block;background-color:rgba(0, 0, 0, 0.9);text-align:center;text-transform:uppercase;font-size:30px;font-family:arial;color:#eee;-moz-box-shadow:0 0 5px 1px #fff;-webkit-box-shadow:0 0 5px 1px #fff;box-shadow:0 0 5px 1px #fff;}
#tombolaka-x a:hover{color:#00CCD3;text-shadow:0 0 4px #00CCD3;border:2px solid #00CCD3;background-color:rgba(1,1,1,0.70);box-shadow:0 0 8px 1px #00CCD3;-moz-box-shadow:0 0 8px 1px #00CCD3;-webkit-box-shadow:0 0 8px 1px #00CCD3;}
.show-comentaka{background-color:rgba(0,0,0,0.9);border:2px solid #00CCD3;-moz-box-shadow:0 0 8px 1px #00CCD3;-webkit-box-shadow:0 0 8px 1px #00CCD3;box-shadow:0 0 8px 1px #00CCD3;width:auto;height:60%;overflow-y:auto;overflow-x:hidden;position:fixed;top:20%;left:25%;z-index:10;margin-top:-150%;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;opacity:0;
transition:opacity 1s ease-in-out;-webkit-transition:opacity 1s ease-in-out;-moz-transition:opacity 1s ease-in-out;-o-transition:opacity 1s ease-in-out;-ms-transition:opacity 1s ease-in-out;}
<div class='tombolaka-koment'>
<li><a href='#p' id='link-p'>Show
<b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/>
<b:else/><data:post.numComments/> <data:top.commentLabelPlural/>
</b:if>
</a></li>
</div>
<div class='show-comentaka' id='p'>
<ul id='tombolaka-x'>
<li><a href='#X' id='link-X'>X</a></li>
</ul>
NB::
- Langkah terakhir ini terkadang membuat sebagian blogger bingung, jadi tolong langkah trakhir ini sobat cermati baik2.oke :D, lanjut,.. jadi Sobat Perhatikan Kode <b:includable id='comments' var='post'>, jika sdh tau persis letaknya, maka sobat scroll kebawah smpai menemukan kode ini:- </b:includable>
</b:widget>
- Jadi Seperti ini langkah trakhirnya. sobat lihat kode </b:includable> .jika sudah, mka letakkan kode </div> tepat diatasnya. sehinggah tampilannya seperti ini.
</div>
</b:includable>
</b:widget>
5. Mudah bukan??hehee,.. sobat Privew dl, jika tdk terjadi keslahan, baru Simpan template!
Selamat Mencoba!!
Jika ada pertanyaan jangan sungkan untuk meninggalkan jejak di kotak komentar trim atas kunjungannya ^_^
Posting Komentar