Threaded Comments Rotating Cycle V3

Threaded Comments Rotating Cycle V3

Di sela aktivitas kembali, saya luangkan waktu untuk berbagi,  buat sobat blogging  semua
Sebelumnya sudah posting,  Praktek Membuat threaded comment di Blog V1,  dan disusul
Dengan, Memasang Threaded Comments Stylish Light V2,  dan pada  kesempatan  kali ini
Saya akan share, Threaded Comments Rotating Cycle V3,  tentu dengan fitur dan tampilan
Yang berbeda, karena ada sedikit di poles baik css,  ataupun markup  threaded comments
Di version yang ke3 ini, salah satu nya,  tampilan avatar sedikit di perkecil, juga tampilan di
Image avatar, sedikit terhias pading,  dan effects Rotating, akan lebih  menambah  nuansa
Lain pada kolom  komentar blog,  jika anda tertarik silahkan simak  tutorialnya di bawah ini

Threaded Comments Rotating Cycle V3

Threaded comments Rotating Cycle V3,  ini sengaja saya sungguh kan buat sobat blogging
Yang bosan dengan tampilan threaded comments,  yang sebelumnya  jadi anda  yang ingin
Memakai atau mengganti threaded comment yang lama, dengan yang v3 ini silahkan simak

Di bawah ini trik urutan cara memasang Threaded Comments Rotating Cycle V3 :

01.Pertama anda masuk account blog anda dan sign in,  selanjutnya pilih template
Kemudian  pilih edite  template,  lalu  cari  kode   ]]></b:skin>   tekan   Ctrl + F untuk
Memudah kan  pencarian kodenya,  lalu copy kode Css di bawah ini,  dan pastekan
Kode  di bawah ini  tepat di atas  kode  ]]></b:skin>  di bagian  template  blog  anda

/*=== Threaded Comments ===*/
.comments .comments-content .icon.blog-author {
background-image: url(http://siteexpansion.com/img/smilies/21.gif);/*icon untuk admin*/
background-repeat: no-repeat;
width:38px;
height:20px;
}
.comments .comments-content .loadmore a {
border-top: 1px solid silver;
border-bottom: 1px solid silver;
}
.comments .comment .comment-actions a {
padding-right: 5px;
padding-top: 2px;
}
.comments .continue {
margin-top:2px;
border-top: 2px solid silver;
}
.comments .comments-content .datetime a{
float: right;
font-size:10px;
}
#comments-block li, .comments .comments-content .comment-thread ol li, .comments .comments-content .comment:last-child {
background:#FAFAFA url(url comment) top repeat-x;
margin:5px auto 0;
padding:5px 5px;
border:1px solid silver;
}
.comment-actions a {
padding:2px 5px;
margin-right:10px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
font: 11px sans-serif;
border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px;
background: #EDEDED;
background: linear-gradient( center top, white 20%, #E5E5E5 100% );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
background: -webkit-linear-gradient( center top, white 20%, #E5E5E5 100% );
background: -o-linear-gradient( center top, white 20%, #E5E5E5 100% );
background: -ms-linear-gradient( center top, white 20%, #E5E5E5 100% );
}
.comment-actions a:hover {
text-decoration: none !important;
background: #CCC;
background: linear-gradient(center top,#EEE 20%,#CCC 100%);
background: -moz-linear-gradient(center top,#EEE 20%,#CCC 100%);
background: -webkit-linear-gradient(center top,#EEE 20%,#CCC 100%);
background: -o-linear-gradient(center top,#EEE 20%,#CCC 100%);
background: -ms-linear-gradient(center top,#EEE 20%,#CCC 100%);
}
.comments .avatar-image-container {
margin-left:0px;
}

02.Tambahan Modifikasi avatar Threaded comments :

Apabila anda ingin memodifikasi photo, pada avatar pada kolom comments agar
Lebih keren dan dinamis  Copy kode di bawah ini,  dan paste di bawah kode no 1
Di atas,  atau paste kode dibawah ini tepat di atas kode  ]]></b:skin>

/*=== BOX Avatar dan Blank Avatar ===*/
.avatar-image-container {
box-shadow: 1px 1px 0 #CCC, 3px 3px 0 #FFF, 4px 4px 0 #CCC, 6px 6px 0 #FFF, 7px 7px 0 #CCC;
-webkit-box-shadow: 1px 1px 0 #CCC, 3px 3px 0 #FFF, 4px 4px 0 #CCC, 6px 6px 0 #FFF, 7px 7px 0
#CCC;
}
.avatar-image-container img {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt0orK7l-YyYaivHUagEcDXgrxVuTxlPyKpnUmwaxMSdGpNOm6Qw9tSmXdICtIvTHMo3J8fcgPBOfxvMT3dlIEctAMFi3D_BgVSoE6xmM3_b6K5Jfto5fcrLBk2IWienYKbr5r8fBjg8E/s1600/blog-anonim.png);
width:35px; height:35px; border:none;
}
.avatar-image-container img:hover {
transform:scale(1.2) rotate(360deg); -ms-transform:scale(1.2) rotate(360deg); -o-
transform:scale(1.2) rotate(360deg); -moz-transform:scale(1.2) rotate(360deg); -webkit-
transform:scale(1.2) rotate(360deg);
transition:0.5s; -ms-transition:0.5s; -o-transition:0.5s; -moz-transition:0.5s; -webkit-
transition:0.5s;
}

03 Keterangan kode diatas :

Pada kode Css di nomor 02, yang berwarna  Merah, itu CSS, avatar image dengan  effects hover
Rotating Cycle,  jika anda tidak mengingnkanya, tidak usah  di ikut sertakan, karena Css tersebut
Kurang valid jika sobat yang peduli dengan W3C, css validator,  namun jika anda inginkan effects
Tersebut tidak apa - apa, karena script tersebut kostumisasi effects pada image avatar komentar

04 KETERANGAN :

Jika threaded comments belum muncul di template blog anda,  silahkan anda cari kode

<b:include data='post' name='comments'/>

05 Lalu ganti kode diatas dengan kode di bawah ini

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

Jika kodenya  lebih  dari satu,   gantikan semua,   kode nomor  4. di atas dengan
Kode pada  kolom  nomor 05 di atas,  kalau  tidak salah  ada 4. bagian  kodenya
Jika sudah selesai semua pemasangan Css diatas, silahkan klik save template

Sampai di sini dulu pertemuan kali ini,  semoga artikel ini  bisa bermanfaat buat
Sobat semua,  mari kita apresiasi bersama jika ada yang kurang pada artikel ini
Silahkan semaikan  teks pelengkap,  atau diskusikan di form comments blog ini