Recent Coments Teranyar Dengan Animasi Slide

Karena Screen Shot ini hanya sebuah gambar biasa tentunya agan tidak dapat melihat lansung animasi yang ditampilkan oleh recent coment ini untuk itu silahkan dicoba dulu untuk menerapkan di blog anda dan lihat bagaimana animasinya....

Pada postingan ini saya akan membagikan sutu tips menarik yang saya dapat beberapa waktu lalu ketika berkunjung ke mkr-site.blogspot.com sebuah recent coment cantik dengan animasi slide akan hadir di blog anda dengan beberapa kode tambahan diwilayah  ]]></b:skin>  ok gan dari pada penasaran mending lansung ke tutorialnya saja...

Masuk blog anda
pilih menu template/edit html
kemudian cari kode ]]></b:skin> seperti yang saya bilang tadi gunakanlah ctrl + f
jika sudah ketemu letakan kode dibawah ini tepat diatas tag ]]></b:skin>

.loadingxrcm {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOmwTpFrilimaWWHrPvQ1ZSWg_hcF2Yp5W5LT6ZHOJhKeC67Iqx5FyAViWUdt6GyX2KsMOgBypPY2Tdis3UMGqtXymqmeU3ihJMK0dQA1vbt_CTyYvMs3wQicWLBaG1xdvaeaikC9zeAo/s1600/progress_ani.gif) no-repeat 50% 50%;width:32px;height:32px;display:block;margin:0 auto;text-indent:-9999px;}
ul#kmtranimasi{text-align:left;font:normal normal 11px Verdana,Geneva,sans-serif}
ul#kmtranimasi,ul#kmtranimasi li{margin:0;padding:0;list-style:none;overflow:hidden;position:relative}
ul#kmtranimasi li{text-indent:0;height:90px;background:whiteSmoke;padding:0 8px;border:1px solid #DFDFDF;border-top:1px solid white}
ul#kmtranimasi img{border-radius:9999px;overflow:hidden;background:#383838;border:0;float:left;margin:5px 5px 0 0}
ul#kmtranimasi .ketkomt{overflow:hidden}
ul#kmtranimasi .ketkomt a{display:block;color:white;font-weight:bold;overflow:hidden;background:#363636;border-radius:2px;float:left;padding:0 5px;margin: 5px 0 0 0;}
ul#kmtranimasi .ketkomt span{font-size:8px;position:absolute;z-index:2;top:21px;border-radius:2px;display:block;line-height:14px;padding:0 5px;left:68px;background:white}
ul#kmtranimasi p{margin:15px 0 0}

Selesai dibagian edit html save template anda terlebih dahulu
dan kita beralih ke menu tata letak/add gadged
kemudian copas kode dibawah ini pada box yang tersedia

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="http://ivyth.googlecode.com/svn/js/rckmtr-dgn-animasi.js" type="text/javascript"></script>
<div id="rcentcomnets"><span class="loadingxrcm">Loading...</span></div>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
rccommnetsx({
id_containrc:"#rcentcomnets",
animatedRecentcomments:true,
numComments:10,
url_blog:"http://ngeblogbarengbareng.blogspot.com/",
adminBlog:"arieadie"
});
});
//]]>
</script>

Catatan : Untuk kode berwarna kuning anda boleh tidak memakainya jika sudah terdapat
               sebelumnya ditemplate anda
               Untuk kode berwarna merah saya kira sobat paham untuk menggantinya...

Sekian untuk penjelasan Recent_coment nya selamat mencoba semoga bermanfaat.....

Membuat Widged Recent Coments Dengan Efek Scroll

Lansung saja gan untuk metode yang satu ini tidak usah repot - repot cukup dngan beberapa kode html maka recent coment dengan efek scroll akan hadir mewarnai home page anda...
lansung aja gan simak tutorialnya dibawah ini...

Masuk blog anda
kemudian pilih menu tata letak/add gadged
kemudian pilih html javascript
dan letakan kode dibawah ini pada box yang tersedia

<div style="overflow:auto;width:auto;height:234px;border:2px solid #none; padding:15px; margin:0 auto;background:#000000;"> <style type="text/css"> ul.w2b_recent_comments{list-style:none;margin:0;padding:0;} .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;} .w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;} .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;} .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;} .w2b_recent_comments li span{margin-top:4px;color: #c1bebe;display: block;font-size: 12px;font-style: Courier;line-height: 1.4;} </style>
<script type="text/javascript">
 //<![CDATA[
 // Recent Comments Settings
var
numComments = 25,
showAvatar     = true,
 avatarSize      = 30,
 roundAvatar   = true,
characters       = 40,
defaultAvatar  = "",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://reoa-dam-newcoment.googlecode.com/files/newcomment.js"></script> <script type="text/javascript" src="http://ngeblogbarengbareng.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=100"></script></div>

Silahkan Disesuaika sendiri kode kode nya gan belajar untu kreatif
Nie contohnya kayak gini numComents : menmpilkan jumlah komentar
                                         AvatarSize     : ukuran gambar atau avatarnya
                                         characters      : jumlah karakter kata yang akan ditampilkan
silahkan dirombak sendiri dech kayak backgroundnya  dan satu lagi kode berwarna merah diganri dengan URL blog agan sendiri....

ok gan saya kira sudah cukup jelas penjelasannya selamat mencoba semoga bermanfaat.....

Menambahkan Sebuah Box Indah Dengan Animasi Warna Pada Widged

Pada Postingan Ini kita akan belajar unutk menambah animasi pada sebuah box widged di blog anda banyak sekali animasi animasi yang ditawarkan oleh blog untuk lebih memperindah tampilan blog kita tetapi pada tutorial ini kita cukup menyelimuti widged kita dengan sebuah box indah dengan  animasi wanrna yang brubah rubah secara otomatis nah sebagai contohnya disini saya akan membuatmenerapkanya pada widged Recent_Coment seperti yang terlihat diatas.....

untuk lebih jelasnya silahkan agan simak langkah langkah penerapannya dibawah ini....

Masuk blog anda
pilih menu template/edit html
kemudian carilah kode  ]]></b:skin>  gunakan ctrl + f untuk memudahlkan langkah anda
jika sudah ketemu letakan kode dibawah ini tepat diatas tag   ]]></b:skin>

.bgboxgandaluar {
 margin: 20px auto;
 padding: 5px;
 width: 350px;
 border: 2px solid #999;
 border-radius: 10x;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 -o-transition: all 1.5s ease-in;
 -moz-transition: all 1.5s ease-in;
 -webkit-transition: all 1.5s ease-in;
 background: #888;
 opacity: 0.6;
 filter: alpha(opacity=60); /* for IE */
 }
.bgboxgandaluar:hover {
 box-shadow: 1px 1px 18px #000;
 -moz-box-shadow: 1px 1px 18px #000;
 -webkit-box-shadow: 1px 1px 18px #000;
 background: red url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgFadeBlackV411H1.gif) bottom left repeat;
 border: 2px solid #43b1fd;
 opacity: 1.0;
 filter: alpha(opacity=100); /* for IE */ 
 }
.bgboxgandadalam {
 background: #111;
 border: 1px solid #666;
 padding: 15px 10px;
 border-radius: 25px;
 -moz-border-radius: 25px;
 -webkit-border-radius: 25px;
 -o-transition: all 2.5s ease-in-out;
 -moz-transition: all 2.5s ease-in-out;
 -webkit-transition: all 2.5s ease-in-out;
 color: #eee;
 }
.bgboxgandadalam:hover {
 background: #000099 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgGradRedBlackH1V300.gif) top left repeat;
 border: 1px solid #777;
 border-radius: 30px;
 -moz-border-radius: 30px;
 -webkit-border-radius: 30px;
 box-shadow: 1px 1px 8px #fff;
 -moz-box-shadow: 1px 1px 8px #fff;
 -webkit-box-shadow: 1px 1px 8px #fff;
 }

 Silahkan Sesuaikan Ukuran Boxnya Dengan mengganti kode yang berwarna merah diatas
 Setelah itu simpan tempalate anda..

Nah untuk menerapkan efek tersebut tentulah membutuhkan sebuah kode pemanggil
silahkan letakan kode pemanggil dibawah ini pada widged yang ingin diberi efek animasi..

<div class="bgboxgandaluar">
<div class="bgboxgandadalam">
Letakan kode yang ingin diberi efek disini !
</div>
</div>

Saya kira penjelasan tentang Box Animasinya sudah cukup jelas tinggal digunakan saja gan...
selamat mencoba box animasinya semoga bermanfaat untuk kita semua....

Membuat Scroll Bar Pada Kolom Komentar

pada postingan kali ini saya akan membagi tips yaitu cara membuat scroll bar pada kolom komentar banyak blog yang sudah memiliki banyak pengunjung biasanya menghadapi masalah ini dimana terlalu banyak pengunjung yang berkomentar pada blognya akan mengganggu loading blog hal ini tentunya sangat membuat pengunjung tidak nyaman..untuk menghadapi masalah tersebut tidak ada salahnya agan mencoba tips yang akan saya bagikan ini...

masuk blog anda
pilih template/edit html
cari kode ]]></b:skin> kemudian copas kode dibawah ini dan letakan persis diatas tag ]]></b:skin>

 .comments {
        opacity:0.6;
        filter:alpha(opacity=60);              
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
        height: 260px;
        overflow:hidden;
       -o-transition: opacity 1s 1s, height 1s 0.2s;
       -moz-transition: opacity 1s 1s, height 1s 0.2s;
       -webkit-transition: opacity 1s 1s, height 1s 0.2s;
}
.comments:hover{
        opacity:1.0;
        filter:alpha(opacity=100);
       -ms-filter:"progid.DXImageTransform.Microsoft.Alpha(opacity=100)";
        height:400px;
        overflow:auto;
        overflow-x:hidden;
       -o-transition: opacity 1s 0.1s, height 0.6s 1s;
       -moz-transition: opacity 1s 0.1s, height 0.6s 1s;
       -webkit-transition: opacity 1s 0.1s, height 0.6s 1s;
}

Jika sudah save template agan dan liat hasilnya..
selamat mencoba semoga bermanfaat...

Cara Menampilkan Dan Menyembunyikan Kotak Komentar Secara otomatis

Lansung aja gan pada episode kali ini kita akan mempelajari tentang cara membuat Show-Hide Pada kotak komentar dengan cara yang sangat mudah...silahkan agan simak baik - baik tutorialnya...

Masuk blog agan
pilih template/edit html
cari kode ]]></b:skin> gunakan ctrl + f untuk mempermudah agan dalam pencarian kodenya
jika sudah ketemu copas kode dibawah ini dan letakan diatas tag ]]></b:skin>

/* Panel Comments */
a.openpanel {
display:block;
width:auto;
padding:0px 0px;
text-align:center;
font-weight:bold;
line-height:32px;
background-color:#000;
color:white;
text-decoration:none;
margin:0px 0px;
-webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.2);
-moz-box-shadow:0px 1px 1px rgba(0,0,0,0.2);
box-shadow:0px 1px 1px rgba(0,0,0,0.2);
position:relative;
}
a.openpanel em {
width:0px;
height:0px;
display:block;
position:absolute;
top:15px;
right:15px;
border:6px solid transparent;
border-top-color:white;
}
a.openpanel.active {background-color:#303030;}
a.openpanel.active em {
top:6px;
border-color:transparent transparent white transparent;
}
div.paneline {
height:0px;
border-bottom:4px inset #1a1a1ab;
}
div.hompiPanel {
padding:10px 20px 20px;
-webkit-box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2);
-moz-box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2);
box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2);
margin:0px 0px !important;
}

Jangan beranjak dari situ gan cari kode </head> letaknya juga tidak jauh dibawah kode ]]></b:skin> kok...

jika sudah ketemu copas lagi kode dibawah ini dan letakan diatas tag </head>

<script src='http://reader-download.googlecode.com/svn/trunk/blogger-slide-panel-comments.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
var panelSelector       = '#comments',
    openPanelText       = "Open Comment",
    closePanelText      = "Close Comment",
    slideDownPanelSpeed = 600,
    slideUpPanelSpeed   = 400;
//]]>
</script>

Setelah Dimodifiikasi

Langkah terakhir save template agan dan lihat hasilnya....
selamat mencoba gan semoga bermanfaat........ 

Mengubah Tampilan Kotak Komentar yang Masih Standar

Cara merubah kotak komentar menjadi lebih keren sangat mudah dan simple ok gan untuk tutorialnya agan ikuti aja langkah dibawah ini..

Masuk blog anda
pilih template/edit html
kemudian cari kode ]]></b:skin>  gunakan ctrl + f  untuk mempermudah pencarian
jika sudah ketemu copas kode dibawah ini tepat diatas tag  ]]></b:skin>

/* CSS Komentar */
#form-wrapper {margin-top:20px;}
#comments{overflow:hidden;}
.comments {clear: both;padding: 20px 30px 30px;margin: 10px 0px;background: none repeat scroll 0% 0% rgb(34, 34, 34);    border: 1px solid rgb(51, 51, 51);box-shadow: 0px 0px 3px black inset;color: white;}
#comments h4{display:block;padding:5px;line-height:30px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4{background:rgba(255, 0, 0, 0.2); text-align:center;}
#comments h4,.comments .user a{font-size:14px}
#comments h4{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:20px;width: 0px;height: 0px;border-style: solid;
border-width: 10px 7.5px 0 7.5px;border-color: rgba(255, 0, 0, 0.2) transparent transparent transparent;line-height:0}
h4#comment-post-message {display:none}
#comments .avatar-image-container img {border: 0px none; padding: 0px;box-shadow: none;border-radius: 30px;-webkit-border-radius:30px;-moz-border-radius:30px;}
.comments .comments-content .datetime { float: right; font-size: 10px; margin-right:4px}
.comments .comments-content .comment:first-child {padding-top: 0px;}
.comments .thread-toggle { display: none;}
.comments .comment .comment-actions a {padding: 2px 10px;background: rgb(51, 51, 51);border: 1px solid rgb(70, 70, 70);position: absolute;box-shadow: 0px 1px 2px black;color:rgb(230, 230, 230);-webkit-transition: all .05s linear;-moz-transition: all .05s linear;-o-transition: all .05s linear;transition: all .05s linear;}
.comments .comment .comment-actions a:hover {background: none repeat scroll 0% 0% rgb(40, 40, 40);border: 1px solid rgb(51, 51, 51);text-decoration: none;box-shadow: 0px 0px 1px black;}
.comment-thread{color:rgb(230, 230, 230); font-size:13px;}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a, .comments .user a, .comments .comment-thread.inline-thread .user a {color: rgb(230, 230, 230);font-weight: bold;font-size: 13px;text-shadow: 1px 1px rgb(0, 0, 0);}
.comments .avatar-image-container, .comments .avatar-image-container img {width: 45px;max-width: 100%;height: 45px;    max-height: 100%;margin: 0px 0px 3px;vertical-align: middle;border: 1px solid rgb(51, 51, 51);padding: 4px;box-shadow: 0px 1px 2px black;background-color: transparent;background-clip: content-box;transition: all 0.5s ease-out 0s;border-radius: 30px 0px 0px 30px;-webkit-border-radius:30px 0px 0px 30px;-moz-border-radius:30px 0px 0px 30px;overflow:hidden;}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:58px}
.comments .comment-block{ border: 1px solid rgb(51, 51, 51);padding: 6px;background: none repeat scroll 0% 0% rgb(40, 40, 40);box-shadow: 0px 1px 2px black;position: relative;    transition: all 1s ease-out 0s;}
.comments .comments-content .comment-header {margin: 2px 0px 0px; padding: 5px 10px 7px; border: 1px solid rgb(65, 65, 65);background-color: rgb(51, 51, 51); word-wrap: break-word; }
.comments .comments-content .comment-content {margin: 2px 0px 10px; padding: 5px 10px 7px; border: 1px solid rgb(65, 65, 65);background-color: rgb(51, 51, 51); word-wrap: break-word; }
.comments .comments-content .comment{margin:20px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .comment-thread {margin: 20px 0px;}
.comments .comments-content .icon.blog-author{display:block;  width:0;  height:0;  border:13px solid transparent;  border-right-color:rgba(255, 0, 0, 0.1);  position:absolute;  right:-1px;  bottom:4px;animation:author-icon .9s infinite;-moz-animation:author-icon .9s infinite; -webkit-animation:author-icon .9s infinite; }
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left: 1px solid rgb(20, 20, 20);background: none repeat scroll 0% 0% transparent;box-shadow: -1px 0px 0px rgb(51, 51, 51);}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a, .comments .comments-content .loadmore a {background: none repeat scroll 0% 0% rgb(40, 40, 40);
font-size: 16px;font-weight: normal;color: rgb(255, 255, 255);padding: 10px 0px;text-align: center;box-shadow: 0px 1px 2px black;
text-transform: capitalize;text-shadow: 1px 1px rgb(0, 0, 0);-webkit-transition: all 0.26s ease-out 0s;-moz-transition: all 0.26s ease-out 0s;-o-transition: all 0.26s ease-out 0s;transition: all 0.26s ease-out 0s;border: 1px solid rgb(59, 59, 59);}
.comments .continue a:hover, .comments .comments-content .loadmore a:hover{box-shadow: 0px 0px 1px black;}
.comments .continue a:active, .comments .comments-content .loadmore a:active{box-shadow: none;background:rgb(70, 70, 70);}
.comments .comments-content .loadmore {margin-top:0px;}
.comment .continue{display:none}
#comment-editor{width:103%!important;}
.comment-form{width:100%;max-width:100%;margin-top:20px;}

Langkah terakhir save template agan dan lihat hasilnya...
selamat mencoba semoga bermanfaat........

Cara Unik Memasang Icon Reply dan Coment Pada Komentar

Trik ini adalah trik khusus untuk mempercantik tampilan komentar pada blog anda disini saya akan membagikan sebuah trik yaitu memasang icon reply dan coment pada komentar di blog anda jika anda merasa tertarik ikuti saja langkah dibawah ini....

Masuk blog anda
pilih template/edit html
cari kode <b:include data='comment' name='commentDeleteIcon'/> selalu gunakan ctrl + f agar mudah
jika sudah ketemu maka copas kode dibawah ini tepat dibawah kode diatas tadi

<span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=ID BLOG ANDA&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'><img alt='Reply To This Comment' src='URL BUTTON REPLY ANDA'/></a></span>

Catatan : silahkan ganti kode berwarna biru dengan ID Blog anda dan URL Icon yang akan anda gunakan...

Jika sudah save template dan lihat hasilnya....

Disini saya telah menyiapkan beberapa icon yang mungkin bisa membuat anda tertarik...

                                                          

http://img692.imageshack.us/img692/5678/replybuttonblue.png

                                                          

http://img21.imageshack.us/img21/1659/replybuttongreen.png

                                                           

http://img576.imageshack.us/img576/4171/treplyb.gif

             
                                                           

 http://img225.imageshack.us/img225/5681/replyt.gif

                                                         

 http://img688.imageshack.us/img688/2853/90595834.png 

                                                               

                                                           

http://img641.imageshack.us/img641/9880/68119496.png

Selamat mencoba Dan Semoga Bermanfaat.........

Simple Thereaded Comments Untuk Blog

Pada postingan ini saya akan share mengenai cara menerapkan simple thereaded comments untuk blog sebenarnya thereaded ini memang masih sederhana tetapi saya share siapa tau diantara teman teman blogger yang tertarik menggunakannya..

Masuk blog anda
pilih menu template/edit html
kemudian cari kode ]]></b:skin> gunakan ctrl + f
setelah ketemu letakan css nya diatas kode ]]></b:skin>

/*simple thereaded coments EMP-BLOG*/
#comments h4{color:#111;font-size:16px;font-family:Tahoma, Arial, Verdana;font-weight:400;margin:0 0 5px;padding:0}
#comments{background:#ddd;border:1px solid #999;margin:0 0 10px;padding:10px}
.deleted-comment{font-style:italic;color:gray}
#comments-block .comment-author,.profile-datablock{margin:.5em 0}
.comment-content{white-space: pre-wrap;width: 95%;word-wrap: break-word;}
.comments .comments-content .comment {background: trasnparent;position: relative;border-radius: 0px 100px 120px;padding:5px;color:white;}
span.comment-actions, .continue {width:120px;background: transparent;border-radius: 20px 20px;text-align:center;font-weight:bold;text-decoration:none !important;}
span.comment-actions:hover, .continue:hover {background: transparent;text-decoration:none !important;}
.secondary-text{padding: 6px 12px 6px;text-decoration:none !important;}
.comments .comment .comment-actions a:hover{text-decoration:none !important;}
.comment-replies span div ol div li span {display:none !important;}
.comments .thread-toggle {background: #ECF3F7;border-radius: 20px;padding: 6px 12px 6px;font-weight: bold;}
.comments .thread-toggle:hover {background: gold;}
.comments .comment-block {padding: 11px !important;margin-left: 28px;position: relative;left: 40px;background:#610B0B;border-radius: 10px;width: 420px;}
.comments .avatar-image-container img {overflow:visible !important;width:40px !important;}
.comments .avatar-image-container {width:40px !important;background: #610B0B;padding: 3px;border-radius: 100px;}
.avatar-image-container img,.avatar-image-container a img, .avatar-image-container {border-radius:20px;position:relative;height:40px;width:40px;background-clip:padding-box;}
.comments .avatar-image-container {max-height:50px !important;}
.comments .comments-content .comment-header {width: 460px;background:#610B0B;position: relative;left: -38px;}
.comments .comments-content .user {font-style: normal;font-weight: bold;position: relative;left: 40px;}
.comments .comments-content .datetime {position: absolute;right:0px;}
.comment-thread ol div.continue {display:none !important;}
-webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
/*End simple thereaded coments EMP-BLOG*/

Untuk  warna dan lain - lain silahkan sesuaikan sesuai selera..
Jika sudah simpan template anda dan lihat hasilnya..

Selamat mencoba,semoga bermanfaat.

Membuat Kotak Komentar Tepat di Bawah Postingan

Kali ini saya disuruh nyarikan cara menaruh kotak komentar tepat di bawah postingan. Yo wis langsung aja yuk...

Seperti biasa login di warung sebelah, lalu pesan kopi dan sruput kopinya hahaha.. Wis ah serius sekarang. pertama-tama login di akun Blogspot anda.

• Klik menu Template >> Edit HTML, centang kotak Expand Template Widget (jangan lupa backup template dulu ya). Lalu cari kode di bawah ini (untuk memudahkan tekan Ctrl + f )

    <div class='comments-content'>
          <b:if cond='data:post.embedCommentForm'>
            <b:include data='post' name='threaded_comment_js'/>
          </b:if>
          <div id='comment-holder'>
             <data:post.commentHtml/>
          </div>
        </div>

        <p class='comment-footer'>
          <b:if cond='data:post.allowNewComments'>
            <b:include data='post' name='threaded-comment-form'/>
          <b:else/>
            <data:post.noNewCommentsText/>
          </b:if>
        </p>

Jika sudah ketemu hapus kode tersebut dan ganti dengan kode di bawah ini

<p class='comment-footer'>
          <b:if cond='data:post.allowNewComments'>
            <b:include data='post' name='threaded-comment-form'/>
          <b:else/>
            <data:post.noNewCommentsText/>
          </b:if>
        </p>

        <div class='comments-content'>
          <b:if cond='data:post.embedCommentForm'>
            <b:include data='post' name='threaded_comment_js'/>
          </b:if>
          <div id='comment-holder'>
             <data:post.commentHtml/>
          </div>
        </div>

Setelah itu cari kode </body>, lalu masukkan kode di bawah ini tepat di atas </body>

    <!-- comment form before comment content starts -->
    <script src='http://code.jquery.com/jquery-latest.js'/>
    <script>
    var yob = $(".comment-replybox-thread").closest(".comment-thread").parent("div").children(".comment-thread").children(".comment-replybox-thread");
    jQuery('.comment-thread ol').before(jQuery(yob));
    </script>
    <!-- comment form before comment content  ends -->

Setelah itu klik SIMPAN. Selamat mencoba !

Cara buat Tombol Show/Hide pada Comment

Ok, kita langsung saja ya pada pokok bahasan yaitu Cara Membuat Tombol Show/hide Area Komentar.

saya tidak akan menjelaskan dari awal login karena mungkin sobat sudah pada paham bagaimana caranya kalau mau mengedit template.
Sobat letakan kode CSS berikut tepat diatas kode



]]></b:skin>

a.bukacoment {
display:block;
clear:both;
width:auto;
padding:0px 0px;
text-align:center;
font-size:14px;
font-weight:bold;
line-height:30px;
background-color:#000;
color:white;
text-decoration:none;
margin:0px 0px;
position:relative;

}

a.bukacoment em {
width:0px;
height:0px;
display:block;
position:absolute;
top:10px;
right:10px;
border:6px solid transparent;
border-top-color:white;

}

a.bukacoment.active {background-color:#900;}
a.bukacoment.active em {
top:6px;
border-color:transparent transparent white transparent;

}

div.btsbawah {
height:0px;
border-bottom:4px solid #ff0000;

}

div.jqcoment {
padding:0px;
margin:0px 0px !important;

}

Kemudian sobat letakan kode Javascript berikut tepat diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var panelSelector = '#comments',
openPanelText = "Poskan Komentar",
closePanelText = "Tutup Komentar",
slideDownPanelSpeed = 600,
slideUpPanelSpeed = 400;
//]]>
</script><script src='http://elina.googlecode.com/files/Buka-coment.js' type='text/javascript'/>

Perhatikan kode yang diberi garis bawah, itu library JQuery bila template sobat sudah ada kode tersebut maka kode bergaris bawah tersebut hapus saja.

#comments ini adalah ID area komentar bila ID area komentar sobat berbeda silahkan ganti dengan kode ID area komentar sobat.

Poskan Komentar ini kalimat yang tampil sebelum diklik, sobat bisa ganti sesuai keinginan
Tutup Komentar ini kalimat yang tampil setelah diklik, sobat bisa sesuaikan.
600 dan 400 adalah kecepatan membuka dan menutup kotak komentar.
Sebagai tambahan bila pada template sobat menggunakan Library Jquery versi dibawah 1.7.2 maka sobat ganti saja Jquery tersebut dengan JQuery 1.7.2.


Semoga Bermanfa'at.....

Jangan Lupa Untuk Membagikan Artikel Ini Ok

Buat Komentar Blogger Seperti Komentar Fb CSS

kali ini kita akan belajar cara membuat komentar di blog mirip Facebook dengan CSS
Kali ini saya tidak akan panjang lebar memberikan tutornya, karena memang ini sangat mudah.. baik ikuti langkah-langkah dibawah :
1. Login blogger
2. Masuk pada Template => Edit HTML => Centang “Expand Template Widget”
3. Kemudian cari kode ]]></b:skin>, tekan F5 aja biar cepat mas...
4. Copy CSS code komentar dibawah ini (harap jangan memodifikasinya) :

Judul Spoiler:

/* CSS Komentar Blogspot - Tema Facebook * Selengkapnya: https://facebook.com/rama.banten */ .comments { font:normal 11px/14px "Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif !important; color:rgb(51,51,51); } .comments .comments-content a { color:#3B5998!important; } .comments h2, .comments h3, .comments h4 { font-family:"Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif !important; font-size:16px; } .comments .comments-content .comment { margin:0 0 0; padding:10px 10px; border-top:1px solid #e9e9e9; border-left:1px solid #ccc; }.comments .comment .comment-header, .comments .comment .comment-actions, .comments .comment .comment-actions a, .comments .comment .comment-thread.inline-thread, .comments .comment .continue { margin:0 0 0; padding:0 0 0; border:none; background:transparent; } .comments .comment.comment-header { margin-bottom:4px; } .comments .comment .comment-header .datetime a { color:#808080 !important; } .comments .comment .comment-actions a { padding-right:5px; } .comments .thread-toggle .thread-arrow { width:7px; height:7px; padding-right:4px; } .comments .comment.avatar-image-container, .comments .comment .avatar-image-container img { width:50px; height:50px; max-width:none; max-height:none; border:none; padding:0; margin:0; outline:none; } .comments .comment .comment-block { margin:0 0 0 60px !important; } .comments .comment .comment-thread.inline-thread { margin:7px 0 0 22px; } .comments .comment .comment-thread.inline-thread ol { margin:7px 0 10px !important; } .comments .comment .comment-thread.inline-thread .comment { background-color:#EDEFF4; padding:5px 5px 0; margin:1px 0 0; border:none; border-bottom:1px solid #D2D9E7; } .comments .comment .comment-thread.inline-thread .comment .avatar-image-container, .comments .comment .comment-thread.inline-thread .comment .avatar-image-container img { width:32px; height:32px; } .comments .comment .comment-thread.inline-thread .comment.comment-block { margin:0 0 0 40px !important; } .comments .comment .comment-content { text-align:left; } .comments .comments-content .icon.blog-author { width:16px; height:16px; display:inline-block; vertical-align:top; background:transparent url('/favicon.ico') no-repeat 50% 50%; }.comments .comment .comment-thread.inline-thread .comment:last-child { border-left:2px solid #A8B2CE !important; } 

5. Pastekan diatas code ]]></b:skin>tadi

6. Save template
Silahkan cek, semoga sukses... :)

emoticon girl sexy dikotak komentar blog

Yang satu ini beda dari emoticon yang lain sob...
Jika sobat ingin tahu cara membuatnya,
simak tutorialnya baik2 yak...

1. Login blog
2. Rancangan
3. Edit html
4. Letakkan kode di atas </body>

<script src='http://elmubarok.googlecode.com/files/sexyemotion.js' type='text/javascript'/>

 :a:  :b:  :c:  :d:  :e:  :f:  :g:  :h:  :i:  :j:  :k:  :l: 


5. Letakkan kode berikut di atas <b:if cond='data:post.embedCommentForm'>
atau di bawah <p class='comment-footer'>

<b><img height='50' src='http://i881.photobucket.com/albums/ac17/elmubarok/ce10.gif' width='50'/>
:a:
<img height='50' src='http://i881.photobucket.com/albums/ac17/elmubarok/ce11.gif' width='50'/>
:b:
<img height='50' src='http://i881.photobucket.com/albums/ac17/elmubarok/ce12.gif' width='50'/>
:c:
<img height='50' src='http://i881.photobucket.com/albums/ac17/elmubarok/ce6.gif' width='50'/>
:d:
<img height='50' src='http://i881.photobucket.com/albums/ac17/elmubarok/ce7.gif' width='50'/>
:e:
<img height='50' src='http://i881.photobucket.com/albums/ac17/elmubarok/ce8.gif' width='50'/>
:f:
<img height='50' src='http://i881.photobucket.com/albums/ac17/elmubarok/ce9.gif' width='50'/>
:g:
<img height='50' src='http://i881.photobucket.com/albums/ac17/elmubarok/cesexy1.gif' width='50'/>
:h:
<img height='50' src='http://i881.photobucket.com/albums/ac17/elmubarok/cesexy2.gif' width='50'/>
:i:
<img height='50' src='http://i881.photobucket.com/albums/ac17/elmubarok/cesexy3.gif' width='50'/>
:j:
<img height='50' src='http://i881.photobucket.com/albums/ac17/elmubarok/cesexy4.gif' width='50'/>
:k:
<img height='50' src='http://i881.photobucket.com/albums/ac17/elmubarok/cesexy5.gif' width='50'/>
:l:

6. Simpan template Terima kasih
Jangan Lupa Untuk Membagikan Artikel Ini Ok

Cara Membuat Widget Recent Comment Versi 2

Widget - Sebelumnya saya sudah pernah bahasa cara membuat widget recent comments (komentar terbaru) dengan Avatar namun yang kali ini lain tanpa ada avatar dan lebih simpel. Dengan nama yang berkomentar serta artikel mana yang dikomentari dan deskripsi komentar. Itu merupakan fasilitas yang ada dalam widget recent commentes.

1. Login ke blog kamu.
2. Pilih Rancangan.
3. Pilih Tata Letak > Add Gadget > HTML/JavaScript > Copy kode di bawah ini.

<div class="recent-comments">
<div id="recent-comjudul">Yang Berkomentar</div>
<script style=text/javascript src="http://helplogger.googlecode.com/svn/trunk/recent comments widget.js"></script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=0;</script><script src=http://pengembarabiru.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script>
</div>

• Kode yang berwarna biru itu adalah jumlah kata pada setiap komentar.
• Kode yang berwarna merah adalah jumlah komentar terbaru yang ingin ditampilkan.
• Kode yang berwarna orange adalah judul widget. 
• Ganti kode yang berwarna ungu dengan URL blog Anda. 

4. Simpan. Sekarang kamu pilih menu EDIT HTML > cari kode </head> letakan kode di bawah ini tepat di atas kode </head>

<style type=text/css> .rcw-comments a {text-transform: capitalize;text-decoration:none;} .rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} #rcw-cr {font-family: Arial,Tahoma;font-size:9px;padding-top:7px;display:block;text-decoration:none;}
.recent-comments {width:300px;color:#000;font-size:12px Arial;border:1px solid #ccc;padding:0px;padding:3px;}
.recent-comments a {color:#333;font-weight:bold;text-decoration:none;}
.recent-comments a:hover {color:#ff6600;text-decoration:none;}
#recent-comjudul {color:#333;font-weight:bold;text-decoration:none;font:size:13px;background:#ccc;padding:3px;}
</style> 

5. Simpan dan lihat hasilnya.

Cara Membuat Show-Hide Komentar/Expand-Collapse Comment Bag.3

Baiklah jika sobat penasaran contoh sobat bisa lihat langsung pada kotak komentar dipostingan ini..!!

1. Pertama,pergilah ke Dashboard,lalu Tata Letak,kemudian pilih tab Edit HTML.

2. Lalu contreng check box tulisan Expand Widget Templates,lalu cari kode berikut :

]]></b:skin> , Setelah ketemu,tepat diatasnya,letakkan kode CSS berikut :

 

/* Panel Comments */
a.openpanel {
display:block;
width:auto;
padding:0px 0px;
text-align:center;
font-weight:bold;
line-height:32px;
background-color:#000;
color:white;
text-decoration:none;
margin:0px 0px;
-webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.2);
-moz-box-shadow:0px 1px 1px rgba(0,0,0,0.2);
box-shadow:0px 1px 1px rgba(0,0,0,0.2);
position:relative;
}
a.openpanel em {
width:0px;
height:0px;
display:block;
position:absolute;
top:15px;
right:15px;
border:6px solid transparent;
border-top-color:white;
}
a.openpanel.active {background-color:#303030;}
a.openpanel.active em {
top:6px;
border-color:transparent transparent white transparent;
}
div.paneline {
height:0px;
border-bottom:4px inset #1a1a1ab;
}
div.hompiPanel {
padding:10px 20px 20px;
-webkit-box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2);
-moz-box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2);
box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2);
margin:0px 0px !important;
}

3. Setelah itu,masih di HTML area (aaaalah!),tarik scroll kebawah cari kode:
</head>, Setelah ketemu letakkan kode script di bawah ini tepat diatasnya.

 

<script src='http://reader-download.googlecode.com/svn/trunk/blogger-slide-panel-comments.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
var panelSelector       = '#comments',
    openPanelText       = "Open Comment",
    closePanelText      = "Close Comment",
    slideDownPanelSpeed = 600,
    slideUpPanelSpeed   = 400;
//]]>
</script>

4. Lalu Simpan Template,Selesai!!

Selamat Mencoba!