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 commentsDi 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/AVvXsEjyAEEaifrWbYhNuaV4grqijACGpPAD8skkslyQW_k4gr7Zbljadp5NhxCMsQI9RfEGexOh8-vLywXo2Eeu_53siOc6en4LJWA-7ccKRCr4iWanFMlS2Ea-zq6s90Sfe6aT6_zvue-GqEM/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