Selamat Datang di Blog Karrysta buat Sobat semua
Kunjungan Anda ini sangat bermanfaat sekali untuk kelangsungan dan ke lestarian Blog Karrysta,
Semoga apa yang saya Bagikan di sini senantiasa bisa bermanfaat dan memberikan motivasi dan apresiasi untuk kita semua
Mudah-mudahan silaturrahmi dan Ukhuwah antar blogging semakin erat untuk tetap saling berbagi Terima kasih .. Salam hormat.

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

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://lh5.googleusercontent.com/-roM2Sm4S9xk/UEtqddiMo4I/AAAAAAAAIQ8/oSOxOIGl5og/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

Berlangganan lewat email pada post baru Blog : Karrysta.

Next
« Prev Post
Previous
Next Post »

36 komentar

nah ini yang saya cari sob...izin pasang threaded comments rotating-nya ya

Silahkan Sobat q Mang Yono,. terima kasih atas kunjungan
Dan pendapat nya yah Mang Yono . salam sukses

Keren kang modifnya :-bd perlu dicoba nih :D

Mangga Kang Adhy wayahna sa,ada nya :D terima kasih sudah berkunjung

Terima kasih sudah berkunjung Mbak Leony
Juga Mas Jacky, sip Sob keren tuh :)

wah manteb mas, terima kasih sudah berbagi

bagus nih mas Karysta jadi pengen nyoba hehe...

Pastinya jd keliat hidup nambah hidup kalo pake thread comen ini ya mas :)
Keren..pokoke :)

Buruan mas..mumpung masih fresh loh... :)

cantik kotak komen jenis ini.. yang saya pasang biasa saja..

Ok Mas Nico semoga bermanfaat terima kasih sudah berkunjung

Yah lumayan dikit, silahkan Mas Anthonie Mas Budi semoga bermanfaat
Tapi jangan lupa Kesehatan, dan hati-hati memilih sesuatu hhhh

Lagi trenz nih Mbak Mizz threaded comment, dengan fitur yang
Beraneka warna dan jenis nya, gak ada salah nya, di coba saja Mbak
Biar sobat blogging bisa saling berbagi pengalaman lewat form comments

mantaff abis kang, biar seperti threaded comment yang di pake blogna mas budi ya kang karrys :) avatarnya bisa muter2.. hehe

saya save dulu ya mas.. soalnya saya ngeblog pake hp mas.. jadi nggak kelihatan efek efek komentarnya.. apa ntr kalau sudah jadi seperti komentar di blog mas ini...?? Oya mas.. tombol follownya di mana ya..?

Betul Mas mirip dikit kaya Threaded comments di blognya Mas Budi
Tapi Mas Budi nya mah gak muter-muter ...tt3tt3tt3tt3

Silahkan Mas Nady, betul kurang lebih mirip seperti threaded
Comments, Seperti di blog saya, tapi mungkin warna dan effects
nya yang agak berbeda, menurut selera masing-masing

Tombol Follow Blog nya ada di side bar sebelah kanan. di urutan
Ke 2 dari bawah, atau di Navigasi atas paling kanan

Wahhh Skrip" nya banyak Juga yah hehe saya Jadi Puyeng Nih mas :D

Owh iyaa Salam Kenal yah Gan dari ZGAS-PC ^_^

menarik artikel nya Kang Saud sukses yah Kang
Terpesona




kalo gk ada tempatnya tak mungkin dibuatkan kodenya hehe :D

kunjungan malam mas :)

wah jadi makin menarik ya mas thread comentnya....saya ingin mencoba nanti kapan2. kodenya panjang sekali mas, itu bisa bikin berat loadingnya tidak ya??

Yah walau Script CSS nya banyak Namun sudah ada tempatnya
Sobat , Ainnul, cukup simpan kode css nya di atas kode :
]]></b:skin> tapi yang jelas gak begitu memakan
Berat untuk load blog.

Salam kenal balik dari saya yah Sob thanks sudah Berkunjung

Malam juga Kang WS..
Gak berat koq Kang? seperti threaded coments yang ada
Di blog saya, walau panjang juga script nya, coba saja dulu
Terima kasih atas kunjunganya Kang WS

Mau pasang sekarang saya bingung dengan tampilan sekarang mas, setelah utak atik daleman blog tuh threaded comments rotating cycle v3, kok ndak tersimpan - simpan, apa mungkin dari jaringan internetnya ya?

Oke Sob Mas Yahya, Makasih atas pendapatnya

Kalau jaringan internet nya bermasalah enakan pakai
Browser Google Chrome aja Mang, soal nya kalau pakai
Browser Firefox Mozilla minggu kemarin, saya juga gagal
Tersimpan terus, saat bongkar-bongkar template,.
Tapi paka Gg Chrome lancar-lancar aja tuh Mang.

Sudah di Follow back mas :) salam Mafia Sitez :)

Liat kanan kiri juga ya mas..kalo pas nyebrang..hehe :)

Hehe...
Sy boleh Request dong mas...buat thread komen yg avatarnya bisa salto jg ya....wkwk :D

Pokoke di jamin enteng..kayak kapas ya mas..hehe

Oke Mas Yandi salam balik yah, thanks atas kerja samanya.

keren, sudah saya coba di blog saya

Jangan Komentar Promosi, Link Hidup, Spam Karena akan terhapus
Silahkan untuk "Follower blog, atau Berlangganan Lainya" di blog ini
Untuk Mengkonversi kode dan icon Smiley silahkan Klik dibawah ini

Show Konversi KodeHide Konversi Kode Show SmileyHide Smiley Follower

Terima Kasih atas Kunjungan dan Komentar nya
Copyright © 2015. Karrysta - All Rights Reserved | Template Created by Kompi Ajaib | Modified : Saud Karrysta | Proudly powered by Blogger